/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  --green:#5FAC5A;
  --green-dark:#4E9749;
  --green-tint:#EDF5F0;
  --green-soft:rgba(95,172,90,.20);
  --green-line:rgba(95,172,90,.30);
  --green-line-2:rgba(95,172,90,.12);

  --ink:#202427;
  --ink-2:#111111;
  --body:#4A525A;
  --muted:#7C858C;

  --bg:#F9F9FC;
  --bg-alt:#F2F2F7;
  --grey-btn:#EAEAED;
  --grey-btn-h:#DFDFE3;
  --line:#E7EDF2;
  --line-2:#D5D6D7;
  --white:#fff;

  --r-btn:6px;
  --r-card:12px;
  --r-card-lg:18px;

  --sh-btn:0 1px 0 0 rgba(19,20,22,.08);
  --sh-card:0 4px 14px -2px rgba(19,20,22,.08);
  --sh-soft:0 1px 6px 0 rgba(95,172,90,.12);

  --container:1180px;
  --section-y:96px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:Inter,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
p{margin:0 0 18px}
h1,h2,h3,h4,h5{color:var(--ink);font-weight:500;margin:0 0 18px;letter-spacing:-.02em;line-height:1.18}
h1{font-size:clamp(32px,4.9vw,50px);letter-spacing:-.053em}
h2{font-size:clamp(28px,3.6vw,41px);letter-spacing:-.04em}
h3{font-size:clamp(23px,2.9vw,33px);letter-spacing:-.03em}
h4{font-size:20px;font-weight:600;color:var(--ink-2);line-height:1.3;letter-spacing:-.015em;margin-bottom:10px}
strong,b{color:var(--ink);font-weight:600}
ul{margin:0 0 18px;padding-left:0;list-style:none}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:var(--section-y) 0}
.section--white{background:var(--white)}
.section--bg{background:var(--bg)}
.section--alt{background:var(--bg-alt)}
.section--tight{padding:70px 0}
.center{text-align:center}
.narrow{max-width:780px;margin-left:auto;margin-right:auto}
.narrow-sm{max-width:620px;margin-left:auto;margin-right:auto}
.mt-40{margin-top:40px}
.mt-56{margin-top:56px}

.eyebrow{
  color:var(--green);
  font-size:15px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 14px;line-height:1.45;
}
.eyebrow--light{color:rgba(255,255,255,.65)}
.lead{font-size:19px;line-height:1.65}
.small{font-size:14px;line-height:1.55}
.muted{color:var(--muted)}

/* ============================================================
   2. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:16px;font-weight:500;line-height:1.2;
  padding:12px 24px;border-radius:var(--r-btn);
  border:1.6px solid transparent;cursor:pointer;text-align:center;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .08s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--green);border-color:var(--green);color:#fff;box-shadow:var(--sh-btn)}
.btn--primary:hover{background:var(--green-dark);border-color:var(--green-dark)}
.btn--ghost{background:#fff;border:.8px solid var(--line-2);color:#5B5B5B;font-weight:400;box-shadow:var(--sh-btn)}
.btn--ghost:hover{border-color:#b9babb;color:var(--ink)}
.btn--grey{background:var(--grey-btn);color:var(--ink)}
.btn--grey:hover{background:var(--grey-btn-h)}
.btn--soft{background:var(--green-soft);color:var(--ink-2);border-radius:8px;font-size:15px}
.btn--soft:hover{background:rgba(95,172,90,.32)}
.btn--white{background:#fff;border-color:#fff;color:var(--ink);box-shadow:var(--sh-btn)}
.btn--white:hover{background:#f1f1f4;border-color:#f1f1f4}
.btn--lg{font-size:19px;padding:14px 32px}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:flex-start}
.btn-stack{display:flex;flex-direction:column;align-items:center;gap:11px}
.btn-note{font-size:13px;color:var(--muted);line-height:1.45;text-align:center;max-width:300px}
.link-more{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:500;font-size:15px}
.link-more:hover{color:var(--green-dark)}
.link-more svg{transition:transform .15s ease}
.link-more:hover svg{transform:translateX(3px)}

/* ============================================================
   3. HEADER
   ============================================================ */
.header{background:var(--white);padding:22px 0;position:relative;z-index:60}
.header__inner{display:flex;align-items:center;gap:34px}

/* brand and actions each take half of the free space, which leaves the
   nav sitting dead centre of the header no matter how wide they are */
.header__brand{flex:1 1 0;min-width:0;display:flex;align-items:center}
.header__actions{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:18px}
.nav{flex:0 1 auto;display:flex;align-items:center;gap:25px}

.logo{display:inline-flex;align-items:center;gap:9px;flex-shrink:0}
.logo__mark{width:31px;height:31px;flex-shrink:0}
.logo__type{font-size:21px;font-weight:600;letter-spacing:-.035em;white-space:nowrap;line-height:1}
.logo__type .lt-we{color:var(--ink)}
.logo__type .lt-track{color:var(--green)}
.logo__type .lt-everything{color:var(--green-dark)}
/* on the dark footer the first word has to invert */
.logo--light .logo__type .lt-we{color:#fff}

.nav a{color:var(--body);font-size:15px;font-weight:500;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.header__actions .btn,.header__signin{white-space:nowrap}
.header__signin{color:var(--body);font-size:15px;font-weight:500}
.header__signin:hover{color:var(--ink)}
.burger{display:none;background:none;border:0;padding:9px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .18s ease}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   4. HERO
   ============================================================ */
.hero{background:var(--white);padding:40px 0 88px;overflow:hidden}
/* letter-spacing is pinned on the class, not left to the h1 element: on the
   home template this heading is an h2 (the small kicker above it is the h1)
   and it would otherwise quietly pick up h2's looser tracking */
.hero__title{max-width:1000px;margin:0 auto;text-align:center;letter-spacing:-.053em}
.hero__title .l1{display:block;color:var(--green)}
.hero__title .l2{
  display:block;color:var(--ink);
  font-size:clamp(20px,2.85vw,32px);letter-spacing:-.03em;
  margin-top:12px;line-height:1.28;
}
.hero__cta{margin-top:60px;display:flex;flex-wrap:wrap;gap:22px;justify-content:center}

/* --- split hero ----------------------------------------------------------
   Used by the home template only. Instead of a centred headline with the
   mock underneath it, the hero is one two-column row: the whole pitch on
   the left, the dashboard mock and the buttons that belong to it on the
   right. The plain .hero above is what the other templates still use, so
   anything that changes shared rules is scoped to .hero--split.
   ---------------------------------------------------------------------- */
.hero--split{padding-top:56px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:60px;align-items:center}

/* left column */
.hero__intro{max-width:580px}

/* the page's h1. Small on purpose: it names the category above the headline
   without competing with it, so it overrides the h1 element sizing. Not green,
   or it would blur into the green line underneath. */
.hero__kicker{
  font-size:17px;font-weight:500;color:var(--body);
  letter-spacing:-.005em;line-height:1.45;
  margin:0 0 14px;
}
.hero--split .hero__title{max-width:none;margin:0 0 26px;text-align:left;font-size:clamp(30px,3.7vw,45px)}
.hero--split .hero__title .l2{font-size:clamp(18px,1.85vw,24px);line-height:1.34}
.hero__copy p{margin-bottom:15px;font-size:17px}
.hero__copy p.punch{color:var(--ink);font-weight:600;margin-bottom:6px}
.hero__copy p:last-child{margin-bottom:0}
.hero__trust{margin:26px 0 0;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* right column */
/* the mock's bottom badge hangs 18px past the card, so the gap here is
   bigger than it looks to clear it */
.hero__visual{display:grid;gap:56px}
/* the buttons sit inside a column now, not across the full page, so they go
   one under the other at a shared width. Side by side they only fit by
   shrinking the type until the second label breaks over two lines. */
.hero--split .hero__cta{margin-top:0;flex-direction:column;align-items:center;gap:22px}
.hero--split .hero__cta .btn-stack{width:100%;max-width:340px}
.hero--split .hero__cta .btn{width:100%}
.hero--split .hero__cta .btn-note{max-width:none}

/* hero dashboard mock */
.mock{position:relative;padding:10px}
.mock__main{background:#fff;border:.8px solid var(--line);border-radius:14px;box-shadow:0 18px 44px -20px rgba(19,20,22,.28);padding:20px}
.mock__bar{display:flex;align-items:center;gap:6px;margin-bottom:18px}
.mock__dot{width:9px;height:9px;border-radius:50%;background:#E4E7EA}
.mock__label{margin-left:auto;font-size:10.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-weight:500}
.mock__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:18px}
.mock__stat{background:var(--bg);border-radius:10px;padding:11px 13px}
.mock__stat span{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px;font-weight:500}
.mock__stat b{font-size:19px;color:var(--ink);font-weight:600;letter-spacing:-.025em}
.mock__stat b.up{color:var(--green)}
.mock__chart{display:flex;align-items:flex-end;gap:6px;height:104px;margin-bottom:18px}
.mock__chart i{flex:1;background:var(--green-tint);border-radius:4px 4px 2px 2px;display:block}
.mock__chart i.hi{background:var(--green)}
.mock__rows{border-top:.8px solid var(--line);padding-top:15px;display:grid;gap:11px}
.mock__row{display:flex;align-items:center;gap:10px;font-size:13px}
.mock__row b{margin-left:auto;font-weight:600}
.tick{width:17px;height:17px;border-radius:50%;background:var(--green-soft);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mock__badge{position:absolute;background:#fff;border:.8px solid var(--green-line);border-radius:12px;padding:10px 15px;box-shadow:var(--sh-card)}
.mock__badge span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.mock__badge b{font-size:18px;color:var(--green);font-weight:600;letter-spacing:-.02em}
.mock__badge--tl{top:-16px;left:-20px}
.mock__badge--br{bottom:-18px;right:-16px}

/* ============================================================
   5. GENERIC CARDS / GRIDS
   ============================================================ */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:30px;
}
.card--tint{background:var(--green-tint);border:.8px solid var(--green-line);border-radius:var(--r-card-lg);box-shadow:none}
.card__stat{font-size:38px;font-weight:600;color:var(--green);letter-spacing:-.04em;line-height:1.1;margin-bottom:2px}
.card__stat-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500;margin-bottom:18px}
.card p:last-child{margin-bottom:0}

/* cost cards */
.cost-card{background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:32px 30px}
.cost-card__num{
  width:34px;height:34px;border-radius:50%;background:var(--green-soft);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;margin-bottom:18px;
}
.cost-card__example{
  margin-top:18px;padding:13px 15px;background:var(--bg);border-radius:9px;
  font-size:13.5px;line-height:1.55;color:var(--body);
}
.cost-card__example b{color:var(--ink)}

/* pillar cards */
.pillar{
  background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:32px 30px;display:flex;flex-direction:column;
}
.pillar .eyebrow{font-size:13px;letter-spacing:.07em}
.pillar h4{font-size:22px;margin-bottom:12px}
.pillar p{font-size:15.5px}
.pillar .link-more{margin-top:auto}

/* feature grid */
.feature{padding:4px 0}
.feature__icon{
  width:44px;height:44px;border-radius:11px;background:var(--green-tint);
  border:.8px solid var(--green-line-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.feature h4{font-size:17.5px;margin-bottom:8px}
.feature p{font-size:15px;margin-bottom:0}

/* ============================================================
   6. INSIGHTS / EMAIL MOCK
   ============================================================ */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px;align-items:center}
.checklist{display:grid;gap:13px;margin:24px 0 0}
.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:16px}
.checklist li b{font-weight:600}

.mail{background:#fff;border:.8px solid var(--line);border-radius:14px;box-shadow:var(--sh-card);overflow:hidden}
.mail__head{padding:16px 20px;border-bottom:.8px solid var(--line);display:flex;align-items:center;gap:11px}
.mail__avatar{width:32px;height:32px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px;flex-shrink:0}
.mail__from{font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.35}
.mail__from span{display:block;font-weight:400;color:var(--muted);font-size:12px}
.mail__time{margin-left:auto;font-size:12px;color:var(--muted)}
.mail__body{padding:20px}
.mail__body h5{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 14px}
.mail__item{display:flex;gap:12px;padding:12px 0;border-bottom:.8px solid var(--line);align-items:flex-start}
.mail__item:last-child{border-bottom:0;padding-bottom:0}
.mail__tag{
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 8px;border-radius:5px;flex-shrink:0;margin-top:1px;min-width:60px;text-align:center;
}
.mail__tag.scale{background:var(--green-soft);color:#356B31}
.mail__tag.fix{background:#FDF1DC;color:#8A6110}
.mail__tag.pause{background:#F6E2E2;color:#8C3B3B}
.mail__item p{margin:0;font-size:13.5px;line-height:1.5}
.mail__item p b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}

/* ============================================================
   7. INTEGRATIONS
   ============================================================ */
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.chip{
  background:#fff;border:.8px solid var(--line);border-radius:10px;
  padding:18px 16px;text-align:center;font-size:14.5px;font-weight:500;color:var(--ink);
  box-shadow:0 1px 2px rgba(19,20,22,.04);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:96px;
}
.chip svg{color:var(--green)}
.chip span{display:block;font-size:12px;color:var(--muted);font-weight:400;line-height:1.35}

/* ============================================================
   8. STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;counter-reset:step}
.step{background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:30px 28px;position:relative}
.step__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;background:var(--green);color:#fff;
  font-weight:600;font-size:14px;margin-bottom:16px;
}
.step h4{font-size:18px}
.step p{font-size:15px;margin-bottom:0}
.step__time{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--green);background:var(--green-tint);border-radius:20px;padding:3px 11px;font-weight:500}

/* ============================================================
   9. COMPARISON TABLE
   ============================================================ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-card)}
table.compare{
  width:100%;min-width:660px;border-collapse:separate;border-spacing:0;
  background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-card);overflow:hidden;
}
table.compare th,table.compare td{padding:15px 18px;text-align:center;font-size:14.5px;border-bottom:.8px solid var(--line)}
table.compare thead th{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;
  color:var(--muted);background:var(--bg);padding-top:18px;padding-bottom:18px;
}
table.compare thead th.hl{color:var(--green);background:var(--green-tint)}
table.compare tbody td.hl{background:rgba(95,172,90,.06)}
table.compare th[scope="row"],table.compare td:first-child{text-align:left;font-weight:500;color:var(--ink);min-width:230px}
table.compare tbody tr:last-child td,table.compare tbody tr:last-child th{border-bottom:0}
.yes{color:var(--green);font-weight:600}
.no{color:#C0C4C8;font-weight:600}
.partial{color:#C79A3B;font-size:12.5px;font-weight:500}

/* ============================================================
   10. PRICING
   ============================================================ */
.toggle{display:inline-flex;align-items:center;gap:12px;background:var(--white);border:.8px solid var(--line);border-radius:30px;padding:5px;box-shadow:var(--sh-btn)}
.toggle button{
  border:0;background:transparent;font-family:inherit;font-size:14.5px;font-weight:500;
  color:var(--body);padding:8px 18px;border-radius:24px;cursor:pointer;transition:all .15s ease;
}
.toggle button.on{background:var(--green);color:#fff}
.toggle .save{font-size:11.5px;font-weight:600;color:var(--green);text-transform:uppercase;letter-spacing:.04em;padding-right:14px}

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start;margin-top:44px}
.plan{background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:30px 28px;position:relative}
.plan--best{border:1.6px solid var(--green);box-shadow:0 8px 30px -8px rgba(95,172,90,.32)}
.plan__flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#fff;font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:5px 14px;border-radius:20px;white-space:nowrap;
}
.plan__name{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.plan__price{display:flex;align-items:flex-start;gap:3px;color:var(--ink);margin-bottom:6px}
.plan__price .cur{font-size:20px;font-weight:500;margin-top:9px}
.plan__price .amt{font-size:46px;font-weight:600;letter-spacing:-.045em;line-height:1.05}
.plan__price .per{font-size:15px;color:var(--muted);align-self:flex-end;margin-bottom:9px;font-weight:400}
.plan__desc{font-size:14.5px;min-height:64px;margin-bottom:20px}
.plan__list{display:grid;gap:10px;margin:22px 0 0;font-size:14.5px}
.plan__list li{display:flex;gap:10px;align-items:flex-start}
.plan__list li b{font-weight:600}
.plan__divider{margin:22px 0 0;padding-top:18px;border-top:.8px solid var(--line);font-size:13px;color:var(--muted)}

/* ============================================================
   11. GUARANTEE / QUOTE STRIP
   ============================================================ */
.guarantee{
  background:var(--green-tint);border:.8px solid var(--green-line);
  border-radius:var(--r-card-lg);padding:44px 44px 40px;
}
.guarantee__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 34px;margin-top:26px}
.guarantee__grid li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}

.quote-strip{background:var(--white);padding:64px 0}
.quote-strip p{
  font-size:23px;line-height:1.5;color:var(--ink);font-weight:400;
  letter-spacing:-.02em;max-width:860px;margin:0 auto 20px;text-align:center;
}
.quote-strip .who{text-align:center;font-size:14px;color:var(--muted)}

/* ============================================================
   12. FAQ
   ============================================================ */
.faq{max-width:820px;margin:44px auto 0;border-top:.8px solid var(--line)}
.faq__item{border-bottom:.8px solid var(--line)}
.faq__q{
  width:100%;background:none;border:0;font-family:inherit;cursor:pointer;
  display:flex;align-items:flex-start;gap:16px;text-align:left;
  padding:20px 0;font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.015em;line-height:1.4;
}
.faq__q:hover{color:var(--green-dark)}
.faq__q .ico{
  margin-left:auto;flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:var(--green-soft);color:#356B31;display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;transition:transform .2s ease;margin-top:2px;font-weight:600;
}
.faq__item.open .faq__q .ico{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq__a-inner{padding:0 44px 22px 0;font-size:15.5px}
.faq__a-inner p:last-child{margin-bottom:0}

/* ============================================================
   13. TESTIMONIALS
   ============================================================ */
.tcards{columns:3;column-gap:22px}
.tcard{
  break-inside:avoid;background:#fff;border:.8px solid var(--green-line-2);
  border-radius:14px;box-shadow:var(--sh-soft);padding:22px;margin-bottom:22px;
}
.tcard__who{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.tcard__av{width:34px;height:34px;border-radius:50%;background:var(--green-tint);border:.8px solid var(--green-line);flex-shrink:0}
.tcard__name{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.tcard__name span{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.tcard p{font-size:14.5px;line-height:1.6;margin:0;color:var(--body)}
.tcard--slot{background:var(--bg);border-style:dashed;border-color:var(--line-2);box-shadow:none}
.tcard--slot p{color:var(--muted);font-style:italic}

/* ============================================================
   14. FINAL CTA + FOOTER
   ============================================================ */
.final{background:var(--ink);color:rgba(255,255,255,.72);padding:88px 0}
.final h2{color:#fff}
.final h2 em{font-style:normal;color:var(--green)}
.final p{color:rgba(255,255,255,.72);font-size:18px}

.footer{background:var(--ink);color:rgba(255,255,255,.6);padding:0 0 34px;font-size:14.5px}
.footer__top{border-top:.8px solid rgba(255,255,255,.1);padding:56px 0 46px;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.footer h5{color:#fff;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:0 0 18px}
.footer ul{display:grid;gap:11px;margin:0}
.footer a{color:rgba(255,255,255,.6)}
.footer a:hover{color:#fff}
.footer__brand p{font-size:14.5px;color:rgba(255,255,255,.55);max-width:330px;line-height:1.6}
.footer__bottom{
  border-top:.8px solid rgba(255,255,255,.1);padding-top:26px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  font-size:13px;color:rgba(255,255,255,.45);
}
.footer__disclosure{
  background:rgba(255,255,255,.04);border-radius:10px;padding:16px 20px;
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.55);margin-bottom:26px;
}

/* ============================================================
   15. STICKY CTA BAR
   ============================================================ */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-top:.8px solid var(--line);
  box-shadow:0 -4px 18px -6px rgba(19,20,22,.12);
  padding:12px 0;transform:translateY(110%);transition:transform .28s ease;
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta__inner{display:flex;align-items:center;gap:20px;justify-content:center;flex-wrap:wrap}
.sticky-cta__text{font-size:14.5px;color:var(--ink);font-weight:500;margin-right:auto}
.sticky-cta__text span{display:block;font-weight:400;color:var(--muted);font-size:12.5px}

/* ============================================================
   16. REVEAL ANIMATION
   Only hidden when JS is available, so the page is never blank
   if scripts fail to load.
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   17. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  :root{--section-y:74px}
  /* tighten the header so the centred nav still fits beside the actions */
  .header__inner{gap:22px}
  .nav{gap:18px}
  /* minmax(0,1fr), not 1fr: a plain 1fr track refuses to go under the
     min-content width of the mock, which pushes the whole column wider
     than the container and gets the text clipped by .hero{overflow:hidden} */
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:52px}
  /* stacked: the pitch keeps a readable measure instead of running the
     full width of the container */
  .hero__intro{max-width:720px;margin-left:auto;margin-right:auto}
  .hero__visual{gap:40px}
  .mock{max-width:560px;margin:0 auto}
  .split{grid-template-columns:1fr;gap:44px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tcards{columns:2}
  .footer__top{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:860px){
  /* mobile nav = dropdown panel anchored under the header bar */
  .nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;
    gap:0;margin:0;padding:6px 0 10px;
    background:var(--white);
    border-top:.8px solid var(--line);
    box-shadow:0 14px 28px -12px rgba(19,20,22,.20);
    z-index:70;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 24px;font-size:16px}
  .nav a:hover{background:var(--bg-alt);color:var(--ink)}
  .burger{display:block;order:3}
  .header__inner{gap:16px}
  /* nav becomes a dropdown, so the brand goes back to hugging the left */
  .header__brand{flex:0 0 auto;margin-right:auto}
  .header__actions{flex:0 0 auto}
  .header__signin{display:none}
  /* only the header wordmark is space constrained; the footer one is not */
  .header .logo__type{font-size:19px}
  .grid-3,.grid-2,.steps,.plans{grid-template-columns:1fr}
  .plans{max-width:460px;margin-left:auto;margin-right:auto}
  .guarantee__grid{grid-template-columns:1fr}
  .sticky-cta__text{display:none}
}
@media (max-width:640px){
  :root{--section-y:60px}
  /* the text wordmark plus the CTA button need trimming to fit a phone */
  .header__inner{gap:10px}
  .header .logo__type{font-size:17px;letter-spacing:-.03em}
  .footer .logo__type{font-size:23px}
  .header__actions .btn{font-size:13.5px;padding:9px 13px}
  .burger{padding:9px 4px}
  body{font-size:15.5px}
  .hero{padding:26px 0 62px}
  .hero__cta{margin-top:40px;gap:16px}
  .btn-stack{width:100%}
  .btn--lg{width:100%;font-size:17px;padding:13px 22px}
  .chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tcards{columns:1}
  .card,.cost-card,.pillar,.step,.plan{padding:24px 20px}
  .guarantee{padding:30px 22px}
  .quote-strip p{font-size:19px}
  .mock__badge--tl{left:-6px;top:-10px}
  .mock__badge--br{right:-4px;bottom:-12px}
  .footer__top{grid-template-columns:1fr}
}

/* ============================================================
   18. WORDPRESS DEFAULT CONTENT
   Used by page.php, index.php, single.php and 404.php, so posts
   and plain pages inherit the same look as the landing templates.
   ============================================================ */
.prose-page{max-width:760px;margin:0 auto}
.prose-page h1{font-size:clamp(30px,4.2vw,42px);letter-spacing:-.045em;margin-bottom:22px}
.prose-page h2{font-size:clamp(24px,3vw,31px);margin:44px 0 16px}
.prose-page h3{font-size:clamp(20px,2.3vw,24px);margin:34px 0 14px}
.prose-page p,.prose-page li{font-size:17px;line-height:1.72}
.prose-page ul,.prose-page ol{margin:0 0 20px;padding-left:22px}
.prose-page ul{list-style:disc}
.prose-page ol{list-style:decimal}
.prose-page li{margin-bottom:8px}
.prose-page img{border-radius:var(--r-card);margin:26px 0}
.prose-page blockquote{
  border-left:3px solid var(--green);background:var(--bg);
  margin:28px 0;padding:20px 24px;border-radius:0 var(--r-card) var(--r-card) 0;
}
.prose-page blockquote p:last-child{margin-bottom:0}
.prose-page code{
  background:var(--bg-alt);border-radius:5px;padding:2px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;
}
.prose-page pre{
  background:var(--ink);color:#C9D1D9;border-radius:var(--r-card);
  padding:20px 22px;overflow-x:auto;font-size:13.5px;line-height:1.6;
}
.prose-page pre code{background:none;padding:0;color:inherit}
.prose-page table{width:100%;border-collapse:collapse;margin:26px 0}
.prose-page th,.prose-page td{border-bottom:.8px solid var(--line);padding:12px 10px;text-align:left;font-size:15.5px}
.prose-page a{text-decoration:underline}

.post-summary{border-bottom:.8px solid var(--line);padding-bottom:30px;margin-bottom:34px}
.post-summary:last-of-type{border-bottom:0}
.post-summary h2{margin-top:0}
.post-summary h2 a{color:var(--ink);text-decoration:none}
.post-summary h2 a:hover{color:var(--green)}

.pagination{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;border-radius:var(--r-btn);
  background:var(--bg-alt);color:var(--ink);font-size:14.5px;font-weight:500;text-decoration:none;
}
.pagination .page-numbers.current{background:var(--green);color:#fff}