:root{
  --brand:#2c5f4a;
  --brand-ink:#1a1f2e;
  --brand-paper:#fdfcfa;
  --line:#e8e2d8;
  --muted:#5f6a62;
  --white:#fff;
  --shadow:0 14px 40px rgba(26,31,46,.07);
  --shadow-sm:0 6px 18px rgba(26,31,46,.05);
  --focus:0 0 0 3px rgba(44,95,74,.24);
  --section-y:clamp(56px, 8vw, 88px);
  --card-pad:clamp(22px, 2.4vw, 28px);
  --card-radius:20px;
}

*{box-sizing:border-box}

::selection{
  background:rgba(44,95,74,.14);
  color:var(--brand-ink);
}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 88% 4%, rgba(44,95,74,.06), transparent 32rem),
    radial-gradient(circle at 4% 96%, rgba(44,95,74,.04), transparent 24rem),
    linear-gradient(180deg, #fff 0%, var(--brand-paper) 42%, #faf7f2 100%);
  color:var(--brand-ink);
  font-family:Barlow, system-ui, sans-serif;
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.landing{
  width:min(1120px, calc(100% - clamp(24px, 5vw, 48px)));
  margin:0 auto;
}

/* ── Nav ── */
.topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:clamp(20px, 3vw, 32px) 0 clamp(12px, 2vw, 20px);
}

.topline-links{
  display:flex;
  align-items:center;
  gap:clamp(14px, 2vw, 24px);
}

.topline-links a{
  color:var(--muted);
  font-weight:600;
  font-size:.92rem;
  text-decoration:none;
  padding:6px 2px;
}

.topline-links a:hover{color:var(--brand)}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:inherit;
  text-decoration:none;
}

.brand img{
  display:block;
  border-radius:50%;
  box-shadow:var(--shadow-sm);
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.brand-text strong{
  font-family:"Barlow Condensed", Barlow, sans-serif;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.05;
}

.brand-text small{
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.login{
  color:var(--brand) !important;
  font-weight:700 !important;
}

.login:hover{color:#214a39 !important}

/* ── Shared ── */
.eyebrow{
  margin:0 0 14px;
  color:var(--brand);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.accent{color:var(--brand)}

.section-head{
  max-width:42rem;
  margin-bottom:clamp(28px, 4vw, 36px);
}

.section-head h2{
  font-family:"Barlow Condensed", Barlow, sans-serif;
  font-size:clamp(1.75rem, 3.6vw, 2.35rem);
  margin:0 0 12px;
  line-height:1.08;
  letter-spacing:-.02em;
}

.section-head p{
  margin:0;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.65;
}

.actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:clamp(24px, 3vw, 32px);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 24px;
  border-radius:999px;
  font:inherit;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.btn:focus-visible{
  outline:none;
  box-shadow:var(--focus);
}

.primary{
  background:var(--brand);
  color:#fff;
  box-shadow:0 10px 24px rgba(44,95,74,.18);
}

.primary:hover{
  background:#214a39;
  transform:translateY(-1px);
}

.secondary{
  color:var(--brand-ink);
  border-color:var(--line);
  background:var(--white);
}

.secondary:hover{
  border-color:rgba(44,95,74,.3);
  color:var(--brand);
}

/* ── Hero ── */
.hero{
  display:grid;
  grid-template-columns:minmax(0, 1.06fr) minmax(280px, .74fr);
  gap:clamp(32px, 5vw, 64px);
  align-items:start;
  padding:clamp(16px, 3vw, 28px) 0 var(--section-y);
}

.hero-copy h1{
  font-family:"Barlow Condensed", Barlow, sans-serif;
  font-size:clamp(2.4rem, 5.2vw, 3.75rem);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.028em;
  margin:0 0 20px;
  max-width:15ch;
  text-wrap:balance;
}

.lead{
  max-width:38rem;
  margin:0;
  color:var(--muted);
  font-size:clamp(1.02rem, 1.45vw, 1.14rem);
  line-height:1.72;
}

.trust-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:clamp(22px, 3vw, 28px) 0 0;
  padding:0;
  list-style:none;
}

.trust-pills li{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(44,95,74,.14);
  background:rgba(255,255,255,.92);
  color:var(--brand);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.01em;
}

.hero-note{
  margin:16px 0 0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.55;
}

.hero-panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  padding:var(--card-pad);
  box-shadow:var(--shadow);
}

.panel-kicker{
  margin:0 0 16px;
  color:var(--brand);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  counter-reset:step;
}

.hero-steps li{
  position:relative;
  padding:18px 0 18px 44px;
  border-top:1px solid rgba(232,226,216,.9);
}

.hero-steps li:first-child{
  border-top:none;
  padding-top:4px;
}

.hero-steps li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:0;
  top:16px;
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:"Barlow Condensed", Barlow, sans-serif;
  font-size:.92rem;
  font-weight:700;
  color:var(--brand);
  background:rgba(44,95,74,.08);
  border:1px solid rgba(44,95,74,.14);
}

.hero-steps li:first-child::before{top:2px}

.step-title{
  display:block;
  font-weight:700;
  font-size:1rem;
  color:var(--brand-ink);
  margin-bottom:5px;
}

.step-desc{
  display:block;
  color:var(--muted);
  font-size:.93rem;
  line-height:1.58;
}

/* ── Compare strip ── */
.compare-strip{
  padding-bottom:var(--section-y);
}

.compare-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(16px, 2.5vw, 24px);
}

.compare-grid article{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  padding:var(--card-pad);
  box-shadow:var(--shadow-sm);
}

.compare-grid article:first-child{
  border-color:rgba(44,95,74,.22);
  background:linear-gradient(180deg, #fff 0%, rgba(44,95,74,.025) 100%);
}

.compare-grid .muted-card{
  background:rgba(255,255,255,.88);
}

.compare-grid h3{
  margin:0 0 14px;
  font-family:"Barlow Condensed", Barlow, sans-serif;
  font-size:1.25rem;
  letter-spacing:-.01em;
}

.compare-grid ul{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.68;
  font-size:.96rem;
}

.compare-grid li + li{margin-top:6px}

.compare-grid strong{color:var(--brand-ink)}

/* ── Features ── */
.features{
  padding:0 0 var(--section-y);
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(16px, 2.5vw, 22px);
}

.feature-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  padding:var(--card-pad);
  box-shadow:var(--shadow-sm);
}

.feature-icon{
  display:block;
  font-size:1.4rem;
  margin-bottom:12px;
}

.feature-card h3{
  margin:0 0 8px;
  font-family:"Barlow Condensed", Barlow, sans-serif;
  font-size:1.18rem;
  letter-spacing:-.01em;
}

.feature-card p{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.6;
}

/* ── Pricing ── */
.pricing{
  padding:0 0 var(--section-y);
  scroll-margin-top:20px;
}

.pricing-head{
  max-width:44rem;
  margin-bottom:clamp(28px, 4vw, 36px);
}

.pricing-head h2{
  font-family:"Barlow Condensed", Barlow, sans-serif;
  font-size:clamp(1.95rem, 4vw, 2.55rem);
  margin:0 0 14px;
  color:var(--brand-ink);
  line-height:1.06;
  letter-spacing:-.02em;
}

.pricing-promise{
  margin:0;
  color:var(--muted);
  font-size:1.06rem;
  line-height:1.68;
}

.pricing-grid{
  display:grid;
  gap:clamp(16px, 2.5vw, 22px);
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.price-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  padding:var(--card-pad);
  box-shadow:var(--shadow-sm);
}

.price-card.featured{
  border-color:rgba(44,95,74,.32);
  box-shadow:0 16px 36px rgba(44,95,74,.1);
  transform:translateY(-3px);
}

.price-badge{
  display:inline-block;
  margin:0 0 10px;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(44,95,74,.1);
  color:var(--brand);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.price-card h3{
  margin:0 0 10px;
  font-family:"Barlow Condensed", Barlow, sans-serif;
  font-size:1.48rem;
}

.price-main{
  margin:0;
  font-family:"Barlow Condensed", Barlow, sans-serif;
  font-size:2.05rem;
  font-weight:700;
  color:var(--brand);
  line-height:1.05;
}

.price-main span{
  font-family:Barlow, sans-serif;
  font-size:.86rem;
  font-weight:600;
  color:var(--muted);
}

.price-gross{
  margin:6px 0 0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.5;
}

.price-card ul{
  margin:18px 0 0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.65;
  flex:1;
  font-size:.95rem;
}

.price-card li + li{margin-top:4px}

.price-btn{
  margin-top:20px;
  width:100%;
}

.pricing-note{
  margin:clamp(20px, 3vw, 28px) 0 0;
  color:var(--muted);
  font-size:.96rem;
  line-height:1.65;
  max-width:52rem;
}

.pricing-cta{
  margin-top:clamp(24px, 3vw, 32px);
}

/* ── FAQ ── */
.faq{
  padding:0 0 var(--section-y);
}

.faq-list{
  display:grid;
  gap:12px;
}

.faq details{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(16px, 2vw, 20px) clamp(18px, 2.2vw, 22px);
  box-shadow:var(--shadow-sm);
}

.faq summary{
  cursor:pointer;
  font-weight:700;
  color:var(--brand-ink);
  list-style:none;
  line-height:1.45;
  padding-right:28px;
}

.faq summary::-webkit-details-marker{display:none}

.faq summary::after{
  content:"+";
  float:right;
  color:var(--brand);
  font-family:"Barlow Condensed", Barlow, sans-serif;
  font-size:1.25rem;
  line-height:1;
  margin-right:-28px;
}

.faq details[open] summary::after{content:"−"}

.faq p{
  margin:14px 0 0;
  color:var(--muted);
  font-size:.96rem;
  line-height:1.65;
}

/* ── Final CTA ── */
.final-cta{
  margin-bottom:clamp(40px, 6vw, 56px);
}

.final-cta-inner{
  display:flex;
  align-items:center;
  gap:clamp(20px, 3vw, 28px);
  flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(44,95,74,.08), rgba(255,255,255,.95));
  border:1px solid rgba(44,95,74,.16);
  border-radius:var(--card-radius);
  padding:clamp(24px, 3.5vw, 32px) clamp(24px, 4vw, 36px);
}

.final-cta-inner img{
  border-radius:50%;
  box-shadow:var(--shadow-sm);
}

.final-cta-inner h2{
  margin:0 0 6px;
  font-family:"Barlow Condensed", Barlow, sans-serif;
  font-size:clamp(1.55rem, 3vw, 2rem);
  line-height:1.08;
  letter-spacing:-.02em;
}

.final-cta-inner p{
  margin:0;
  color:var(--muted);
  font-size:.96rem;
  line-height:1.6;
}

.final-cta-inner .btn{margin-left:auto}

/* ── Footer ── */
.landing-foot{
  padding:0 0 clamp(40px, 6vw, 64px);
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
}

.landing-foot p{margin:0 0 8px}

.landing-foot a{
  color:var(--brand);
  font-weight:600;
  text-decoration:none;
}

.landing-foot a:hover{text-decoration:underline}

/* ── Responsive ── */
@media (max-width:900px){
  .hero{
    grid-template-columns:1fr;
    gap:36px;
  }

  .hero-copy h1{max-width:none}

  .feature-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .compare-grid{
    grid-template-columns:1fr;
  }

  .pricing-grid{
    grid-template-columns:1fr;
  }

  .price-card.featured{transform:none}
}

@media (max-width:600px){
  .topline-links a:not(.login){display:none}

  .feature-grid{
    grid-template-columns:1fr;
  }

  .actions .btn{
    flex:1 1 calc(50% - 7px);
    min-width:9.5rem;
  }

  .final-cta-inner{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }

  .final-cta-inner .btn{
    margin-left:0;
    width:100%;
  }
}

@media (max-width:480px){
  .brand img{width:42px;height:42px}
}

@media (prefers-reduced-motion:reduce){
  .btn,.price-card.featured{transition:none}
  .primary:hover{transform:none}
}