/* Invoizify — landing page styles
   Design tokens live in :root. Nothing here is used by more than one page. */

:root{
  --ink:#10201b;--muted:#66736e;--paper:#fbfaf6;--green:#0b8f68;--dark:#075b45;
  --mint:#e3f2eb;--line:#dfe4e0;--soft:#f4f5f0;--dim:#c9d0cb;
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.container{width:min(1060px,calc(100% - 40px));margin:auto}

nav{height:70px;position:sticky;top:0;z-index:20;background:var(--paper);display:flex;align-items:center}
.navin{width:min(1060px,calc(100% - 40px));margin:auto;display:flex;align-items:center;
  justify-content:space-between;gap:24px}
.logo{font-size:19px;font-weight:700;letter-spacing:-.035em}
.links{display:flex;gap:26px;font-size:14px;color:#5d6a65}
.links a{transition:color .2s ease}
.links a:hover{color:var(--green)}
section{scroll-margin-top:70px}

h1{font-size:clamp(38px,5.6vw,74px);line-height:.96;letter-spacing:-.065em;margin:0 0 24px}
h1 em{font-style:normal;color:var(--green)}
.lead{font-size:clamp(16.5px,1.45vw,19px);line-height:1.6;color:#56635e;max-width:600px;margin:0}
.kicker{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green);margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:10px}
.title{font-size:clamp(28px,3.9vw,50px);line-height:1.04;letter-spacing:-.05em;margin:0;max-width:18ch}
.sectionLead{font-size:16.5px;line-height:1.6;color:var(--muted);max-width:560px;margin:20px 0 0}
.tc{text-align:center}.tc .title,.tc .sectionLead{margin-inline:auto}
.section{padding:104px 0}
.pro{border:1px solid #a9d8c6;color:var(--green);border-radius:999px;padding:3px 9px;
  font-size:10px;letter-spacing:.13em;font-weight:800}

/* ---------------- hero ---------------- */
.hero{padding:58px 0 86px}
.heroTop{max-width:840px}
.said{margin:42px 0 0;display:flex;align-items:flex-start;gap:14px;max-width:620px}
.micDot{width:30px;height:30px;border-radius:50%;border:1.4px solid var(--green);
  display:grid;place-items:center;flex:0 0 auto;margin-top:2px}
.micDot svg{width:14px;height:14px}
.micDot.live{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(11,143,104,.22)}50%{box-shadow:0 0 0 9px rgba(11,143,104,0)}}
.saidText{font-size:clamp(18px,2.1vw,25px);line-height:1.35;letter-spacing:-.03em;font-weight:600;min-height:2.7em}
.caret2{display:inline-block;width:2px;height:.95em;background:var(--green);
  vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.reads{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;max-width:100%}
.read{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;
  padding:10px 13px;background:#fff;font-size:14px;color:#46524d;
  opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.read.on{opacity:1;transform:none}
.read b{font-weight:700;color:var(--ink)}
.read svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--green);fill:none;stroke-width:1.5}
.outcome{margin-top:20px;display:flex;align-items:center;gap:10px;font-size:15px;color:#46524d;
  opacity:0;transition:opacity .5s ease}
.outcome.on{opacity:1}
.outcome .tick{color:var(--green);font-weight:800}
.trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px;font-size:13.5px;color:#6d7873}
.trust span{display:flex;align-items:center;gap:7px}
.trust i{font-style:normal;color:var(--green);font-weight:800}

/* ---------------- sticky stages ---------------- */
.stage{position:relative}
.sticky{position:sticky;top:0;height:100vh;padding-top:58px;display:flex;align-items:center;overflow:hidden}
.stageIn{width:min(760px,calc(100% - 40px));margin:auto;text-align:center}
.stageTitle{font-size:clamp(27px,3.3vw,42px);line-height:1.06;letter-spacing:-.05em;
  margin:0 auto;max-width:18ch;font-weight:800}

/* ---------------- the friction ---------------- */
.fricStage{height:300vh;background:var(--paper)}
.fricPhase{font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;
  color:#a6afaa;margin-top:22px;transition:color .45s ease}
.fricPhase.now{color:var(--green)}
.fric{position:relative;margin:22px auto 0;max-width:520px;text-align:left;
  overflow:hidden;max-height:620px;
  transition:opacity .42s ease,max-height .55s cubic-bezier(.22,.7,.28,1),margin-top .45s ease}
.fric.gone{opacity:0;max-height:0;margin-top:0}
.fRow{will-change:auto}
.fricRail{position:absolute;left:19px;top:16px;bottom:16px;width:1.5px;background:var(--line)}
.fricFill{position:absolute;left:0;top:0;width:100%;background:var(--green);height:0}
.fRow{display:flex;gap:16px;align-items:flex-start;padding:9px 0;position:relative}
.fIco{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--paper);
  display:grid;place-items:center;border:1.4px solid var(--dim);transition:border-color .4s ease}
.fRow.on .fIco{border-color:var(--green)}
.fIco svg{width:19px;height:19px;fill:none;stroke:var(--dim);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s ease}
.fRow.on .fIco svg{stroke:var(--green)}
.fWhere{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#b3bbb6;
  transition:color .4s ease}
.fRow.on .fWhere{color:var(--green)}
.fWhat{font-size:clamp(15.5px,1.7vw,18px);line-height:1.45;color:#c3cac5;margin-top:3px;
  transition:color .4s ease}
.fRow.on .fWhat{color:var(--ink)}
.fricOne{display:flex;gap:16px;align-items:center;max-width:520px;margin:26px auto 0;
  opacity:0;transition:opacity .5s ease;text-align:left}
.fricOne.on{opacity:1}
.fricOne .fIco{border-color:var(--green)}
.fricOne .fIco svg{stroke:var(--green)}
.fricOne p{margin:0;font-size:clamp(17px,2vw,22px);font-weight:700;letter-spacing:-.03em}
.meters{display:flex;justify-content:center;gap:30px;margin-top:30px}
.meter{min-width:84px;text-align:center}
.meter span{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:800;color:#9ba49f}
.meter b{display:block;font-size:25px;letter-spacing:-.03em;margin-top:3px;
  font-variant-numeric:tabular-nums;transition:color .4s ease}
.meter.good b{color:var(--green)}
.fricNote{margin-top:22px;font-size:clamp(17px,2.1vw,26px);line-height:1.25;letter-spacing:-.04em;
  font-weight:800;color:var(--ink);min-height:2.4em}
.fricNote b{color:var(--green)}

/* ---------------- the dashboard ---------------- */
.dash{max-width:760px;margin:48px auto 0;text-align:left;border:1px solid var(--line);border-radius:20px;
  background:#fff;overflow:hidden}
.dashBar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid #eef1ef}
.dashBar i{width:8px;height:8px;border-radius:50%;background:#e4e8e5;display:block}
.dashBar span{margin-left:8px;font-size:12px;color:#9ba49f;letter-spacing:.04em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#eef1ef}
.stat{background:#fff;padding:22px 20px}
.stat span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#a6afaa}
.stat b{display:block;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.04em;margin-top:6px;
  font-variant-numeric:tabular-nums}
.stat.warn b{color:var(--green)}
.rows{padding:6px 0 10px}
.dRow{display:flex;align-items:center;gap:14px;padding:13px 20px;font-size:14.5px;
  opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.dRow.on{opacity:1;transform:none}
.dRow .who2{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dRow .amt{font-variant-numeric:tabular-nums;color:#46524d}
.pill{font-size:11px;font-weight:800;letter-spacing:.06em;border-radius:999px;padding:4px 10px;
  white-space:nowrap}
.pill.paid{background:#e6f5ee;color:var(--green)}
.pill.due{background:#fdf0e4;color:#b4702a}
.pill.late{background:#fbe9e7;color:#b4453a}

/* ---------------- the hook ---------------- */
.final{background:var(--ink);color:#fff;text-align:center;padding:104px 0 90px}
.final .kicker{color:#8fe0c4}
.final .pro{border-color:#3c7a66;color:#8fe0c4}
.final .title{color:#fff;margin:0 auto 20px;max-width:15ch;font-size:clamp(32px,4.6vw,60px)}
.final .title em{font-style:normal;color:#8fe0c4}
.finalLead{font-size:16px;line-height:1.6;color:#a7bab2;max-width:520px;margin:0 auto 32px}
.cta{max-width:600px;margin:auto;background:#ffffff0d;border:1px solid #ffffff22;border-radius:18px;
  padding:8px 8px 8px 16px;display:flex;align-items:center;gap:13px;cursor:pointer;
  transition:border-color .25s ease,background .25s ease}
.cta:hover{border-color:#8fe0c4;background:#ffffff14}
.ctaMic{width:30px;height:30px;border-radius:50%;border:1.4px solid #8fe0c4;display:grid;
  place-items:center;flex:0 0 auto;animation:pulse2 1.8s ease-in-out infinite}
@keyframes pulse2{0%,100%{box-shadow:0 0 0 0 rgba(143,224,196,.25)}50%{box-shadow:0 0 0 9px rgba(143,224,196,0)}}
.ctaMic svg{width:14px;height:14px}
/* fixed box: scripts have different ascenders, so the height is pinned, never derived */
.ctaText{flex:1;min-width:0;text-align:left;font-size:16px;color:#dbe7e2;
  height:44px;line-height:44px;overflow:hidden;white-space:nowrap}
.ctaText .c{display:inline-block;width:2px;height:16px;background:#8fe0c4;
  vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
.ctaBtn{background:var(--green);color:#fff;border:0;font-weight:700;font-size:14.5px;text-decoration:none;display:inline-block;white-space:nowrap;
  border-radius:12px;padding:13px 19px;cursor:pointer;flex:0 0 auto;transition:filter .2s ease}
.cta:hover .ctaBtn{filter:brightness(1.08)}
.finalHint{margin-top:15px;font-size:13px;color:#8fa099}

footer{background:var(--ink);color:#8a9791;padding:26px 0 32px;font-size:12.5px}
.footerin{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap}
.footerin b{color:#fff}
.footerin a{color:#d6e2dd}
.footerin a:hover{color:#8fe0c4}

@media(max-width:900px){
  .links{display:none}
  .stats{grid-template-columns:1fr;gap:1px}
}
@media(max-width:600px){
  nav{height:62px}
  .hero{padding:36px 0 60px}
  h1{font-size:37px;letter-spacing:-.05em}
  .section{padding:72px 0}
  .said{gap:12px;margin-top:30px}
  .fric{margin-top:24px}
  .fWhat{font-size:15px}
  .meters{gap:18px}
  .meter{min-width:70px}
  .meter b{font-size:21px}
  .fricNote{font-size:17px}
  .dRow{padding:11px 15px;font-size:13.5px;gap:10px}
  .stat{padding:17px 16px}
  .final{padding:76px 0 64px}
  .cta{flex-wrap:wrap;padding:13px}
  .ctaText{flex-basis:100%;order:2;height:38px;line-height:38px;font-size:15px}
  .ctaMic{order:1}
  .ctaBtn{order:3;width:100%;padding:14px}
}
@media (prefers-reduced-motion:reduce){
  .fricStage{height:auto}
  .sticky{position:static;height:auto;padding:56px 0}
  .read,.outcome,.dRow,.fricOne{opacity:1!important;transform:none!important}
  .fRow{opacity:1}
}

/* ================= voice section ================= */
.voiceSec{background:#f6f6f2}
.voiceGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;margin-top:56px}
.voiceCopy .devline{font-size:26px;line-height:1.45;color:var(--ink);letter-spacing:-.02em;margin:0 0 6px;
  font-family:"Noto Sans Devanagari",system-ui,sans-serif}
.voiceCopy .devsub{font-size:14px;color:#8a938e;margin-bottom:26px}
.voiceCopy .pts{display:grid;gap:14px;margin-top:30px}
.voiceCopy .pt{display:flex;gap:13px;align-items:flex-start;font-size:16px;line-height:1.5;color:#56635e}
.voiceCopy .pt b{color:var(--ink);font-weight:750}
.voiceCopy .pt .ix{width:23px;height:23px;border-radius:50%;border:1.5px solid #cfd8d2;flex:0 0 auto;
  display:grid;place-items:center;font-size:11px;color:#8a938e;margin-top:1px}

.scene{width:100%;max-width:none;display:block}
.scene .ln{fill:none;stroke:#b9c3bd;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.scene .ln.soft{stroke:#c8d2cc}
.scene .ln.dark{stroke:#8b978f}
.scene .fillg{fill:#8b978f}
.scene .accent{stroke:var(--green)}
.scene .accentf{fill:var(--green)}
.scene text{font-family:Inter,system-ui,sans-serif}

/* --- recording: the arcs breathe --- */
.scene .arc{opacity:0}
.playing .arc{animation:arcPulse 2.6s ease-in-out infinite}
.playing .arc:nth-of-type(2){animation-delay:.22s}
.playing .arc:nth-of-type(3){animation-delay:.44s}
@keyframes arcPulse{0%,100%{opacity:0}35%{opacity:.9}70%{opacity:.15}}

/* --- the bars dance, then lie down --- */
.scene .bar{transform-box:fill-box;transform-origin:center;transform:scaleY(.26)}
.playing .bar{animation:barLive 1.1s ease-in-out infinite alternate}
.playing .bar{animation-delay:calc(var(--i) * .055s)}
@keyframes barLive{from{transform:scaleY(.16)}to{transform:scaleY(1)}}
.settled .bar{animation:none;transform:scaleY(.26);transition:transform .55s cubic-bezier(.3,.8,.3,1);
  transition-delay:calc(var(--i) * .022s)}

/* --- the document draws itself --- */
.scene .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.drawn .draw{animation:drawIn 1.5s cubic-bezier(.25,.8,.3,1) forwards}
@keyframes drawIn{to{stroke-dashoffset:0}}
.scene .docline{opacity:0;transform:translateX(-14px)}
.drawn .docline{animation:lineIn .55s cubic-bezier(.25,.9,.3,1) forwards;
  animation-delay:calc(.75s + var(--j) * .13s)}
@keyframes lineIn{to{opacity:1;transform:none}}
.scene .total{opacity:0}
.drawn .total{animation:fadeUp .7s ease forwards;animation-delay:1.5s}
@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.scene .flow{opacity:0}
.drawn .flow{animation:fadeUp .7s ease forwards;animation-delay:.35s}

.replayVoice{margin-top:26px;opacity:1;background:transparent;border:1px solid var(--line);color:#6a756f;
  font-size:12px;font-weight:750;padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:color .2s,border-color .2s}
.replayVoice:hover{color:var(--green);border-color:#b6d8c9}

@media(max-width:900px){.voiceGrid{grid-template-columns:1fr;gap:40px}}
@media (prefers-reduced-motion:reduce){
  .scene .bar{transform:scaleY(.55);animation:none!important}
  .scene .draw{stroke-dashoffset:0!important;animation:none!important}
  .scene .docline,.scene .total,.scene .flow{opacity:1!important;transform:none!important;animation:none!important}
  .scene .arc{opacity:.5;animation:none!important}
}


/* ============ voice: one continuous take ============ */
.voiceCopy .devline{min-height:2.4em}
.devline .caret{display:inline-block;width:2px;height:.92em;background:var(--green);
  vertical-align:-.08em;margin-left:2px;opacity:0}
.typing-on .devline .caret{opacity:1;animation:caretBlink .9s steps(1) infinite}
@keyframes caretBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
.voiceCopy .anim{opacity:0;transform:translateY(12px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.25,.8,.3,1)}
.voiceCopy .anim.in{opacity:1;transform:none}
.replayVoice.anim{transform:none}

/* the mic itself breathes while it listens */
.scene .micbody{transform-box:fill-box;transform-origin:center;transform:scale(1)}
.playing .micbody{animation:micLive 1.5s ease-in-out infinite}
@keyframes micLive{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.scene .arc{opacity:0;transform-box:fill-box;transform-origin:left center}
.playing .arc{animation:arcOut 1.9s ease-out infinite}
.playing .arc:nth-of-type(2){animation-delay:.32s}
.playing .arc:nth-of-type(3){animation-delay:.64s}
@keyframes arcOut{0%{opacity:0;transform:scale(.55)}25%{opacity:.85}100%{opacity:0;transform:scale(1)}}


/* ============ the journey: one graphic, scrubbed by scroll ============ */
.askStage{position:relative;height:440vh;background:var(--paper)}
.askSticky{position:sticky;top:0;height:100vh;padding-top:64px;display:flex;align-items:center;overflow:hidden}
.askIn{width:min(1080px,calc(100% - 44px));margin:auto;text-align:center}
.askIn .kicker{margin-bottom:14px}
.askIn .title{font-size:clamp(30px,3.6vw,46px);margin-inline:auto;max-width:18ch}

.rail{width:100%;margin:54px auto 0;display:block;overflow:visible}
.rail .track{fill:none;stroke:#d7ded9;stroke-width:1.4;stroke-linecap:round}
.rail .fill{fill:none;stroke:var(--green);stroke-width:1.4;stroke-linecap:round}
.rail .node{fill:var(--paper);stroke:#c5cec8;stroke-width:1.4;
  transition:stroke .35s ease,fill .35s ease}
.rail .node.on{stroke:var(--green);fill:var(--green)}
.rail .glyph{fill:none;stroke:#c1cbc5;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  opacity:.7;transition:stroke .35s ease,opacity .35s ease}
.rail .glyph.on{stroke:var(--green);opacity:1}
.rail .nlab{font-family:Inter,system-ui,sans-serif;font-size:10px;letter-spacing:.13em;
  fill:#bcc5bf;transition:fill .35s ease}
.rail .nlab.on{fill:var(--ink)}
.rail .paper{fill:#fff;stroke:#8b978f;stroke-width:1.4;stroke-linejoin:round}
.rail .paperline{stroke:#ccd5cf;stroke-width:1.2;stroke-linecap:round}

.askWords{position:relative;height:190px;margin-top:46px}
.askLine{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  will-change:opacity,transform}
.askLine .said{font-size:clamp(26px,3.2vw,42px);line-height:1.12;letter-spacing:-.04em;margin:0;
  font-weight:800;max-width:20ch}
.askLine .why{font-size:17px;line-height:1.55;color:var(--muted);margin-top:16px;max-width:46ch}

@media(max-width:760px){
  .askStage{height:420vh}
  .askWords{height:240px}
  .rail{margin-top:36px}
}
@media (prefers-reduced-motion:reduce){
  .askStage{height:auto}
  .askSticky{position:static;height:auto;padding:70px 0}
  .askWords{height:auto;display:grid;gap:46px}
  .askLine{position:static;opacity:1!important;transform:none!important}
  .rail .node,.rail .glyph,.rail .nlab{stroke:var(--green);opacity:1}
  .voiceCopy .anim{opacity:1!important;transform:none!important}
}


/* ---- rail: vertical on a phone, where a 1000-unit graphic would vanish ---- */
.rail.vert{max-width:320px;margin:24px auto 0}
.rail.vert .nlab{font-size:11px;text-anchor:start}
.askSticky{padding-top:62px}
@media(max-width:760px){
  .askStage{height:460vh}
  .askIn .title{font-size:clamp(27px,7.4vw,34px);max-width:16ch}
  .askWords{height:210px;margin-top:26px}
  .askLine .said{font-size:clamp(22px,5.6vw,27px);max-width:17ch}
  .askLine .why{font-size:15px;margin-top:12px;max-width:34ch}
}
@media(max-width:600px){
  .voiceGrid{grid-template-columns:1fr}
  .stageTitle{font-size:clamp(26px,7.2vw,34px)}
}


/* ---------------- one alignment for the whole page ---------------- */
.section,.hero{text-align:center}
.title,.sectionLead,.lead,.stageTitle{margin-left:auto;margin-right:auto}
.heroTop{margin:auto}
.said{flex-direction:column;align-items:center;gap:12px;margin:40px auto 0;text-align:center}
.saidText{min-height:2.7em}
.reads,.outcome,.trust{justify-content:center}
.reads{max-width:none;margin-inline:auto}
.read{white-space:nowrap}
@media(max-width:820px){.read{white-space:normal}}
.voiceSec .container{text-align:center}
.voiceCopy{text-align:left}
.fric{text-align:left}

/* ---------------- the questions people actually ask ---------------- */
.faq{max-width:680px;margin:46px auto 0;display:grid;gap:34px}
.q{font-size:clamp(17px,1.9vw,21px);letter-spacing:-.03em;font-weight:700;margin:0}
.a{font-size:16px;line-height:1.6;color:var(--muted);margin:8px auto 0;max-width:60ch}
@media(max-width:600px){.faq{gap:26px}.a{font-size:15.5px}}

/* ---------------- hero CTA — conversion without scrolling ---------------- */
.heroCta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:32px}
.btn{background:var(--green);color:#fff;border:0;font-weight:700;font-size:15px;border-radius:13px;text-decoration:none;display:inline-block;
  padding:15px 24px;cursor:pointer;transition:filter .2s ease,transform .2s ease}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:none}
.heroFree{font-size:14px;color:#6d7873}
.heroFree b{color:var(--ink);font-weight:600}
.heroSmall{margin:12px 0 0;font-size:13px;color:#8a938e}

/* ---------------- the close: the product starting, not a contact form ------ */
.steps{display:flex;justify-content:center;margin:32px auto 0;max-width:680px;flex-wrap:wrap}
.step{flex:1;min-width:170px;padding:0 16px;text-align:center}
.step span{display:block;font-size:11px;letter-spacing:.15em;font-weight:800;color:#8fe0c4;margin-bottom:7px}
.step p{margin:0;font-size:14.5px;line-height:1.5;color:#c6d6d0}

.voiceTitle{font-size:clamp(25px,3vw,38px)}
.voiceSec .sectionLead i{color:var(--ink)}

@media(max-width:600px){
  .steps{gap:20px}
  .step{min-width:100%;padding:0}
  .heroCta{gap:12px}
  .btn{width:100%}
}
.askNote{font-size:15px;line-height:1.55;color:var(--muted);max-width:44ch;margin:14px auto 0}
@media(max-width:760px){.askNote{font-size:14px;margin-top:10px}}

/* ---------------- dashboard = WhatsApp: the same action, either way ------- */
.same{max-width:740px;margin:44px auto 0;text-align:left}
.sameHead{display:grid;grid-template-columns:1fr 46px 1fr;align-items:center;
  padding:0 0 12px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:800;color:#a6afaa}
.sameHead span:last-child{color:var(--green)}
.sameRow{display:grid;grid-template-columns:1fr 46px 1fr;align-items:center;gap:0;
  padding:15px 0;border-top:1px solid #ecefed}
.click,.say{font-size:clamp(15px,1.6vw,17px);line-height:1.45}
.click{color:#5d6a65}
.click b{color:var(--ink);font-weight:600}
.say{color:var(--ink);font-weight:600}
.eq{justify-self:center;width:26px;height:26px;border-radius:50%;background:var(--mint);
  color:var(--green);display:grid;place-items:center;font-size:13px;font-weight:800}
.sameFoot{text-align:center;font-size:15px;color:var(--muted);margin:26px auto 0;max-width:46ch}
.sameFoot b{color:var(--ink);font-weight:600}
@media(max-width:640px){
  .sameHead{grid-template-columns:1fr;gap:0}
  .sameHead span:nth-child(2),.sameHead span:last-child{display:none}
  .sameRow{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .eq{display:block;justify-self:start;width:auto;height:auto;background:none;font-size:0}
  .eq::after{content:"= same thing";font-size:11px;font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
}

/* The stage heading swaps its words at the flip. Deliberately a hard cut and
   not a cross-fade: opacity on text this large promotes a compositing layer
   that half-paints after a fast scroll, and the whole stage turns over at
   this moment anyway. */

/* ---------- waitlist dialog ---------- */
dialog#wl{border:0;padding:0;background:transparent;max-width:452px;width:calc(100% - 32px);color:var(--ink)}
dialog#wl::backdrop{background:rgba(8,20,16,.6)}
.wlCard{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:28px 26px 22px;box-shadow:0 30px 60px -30px rgba(8,20,16,.55);text-align:left}
.wlClose{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:9px;
  background:transparent;color:var(--muted);font-size:21px;line-height:1;cursor:pointer;font-family:inherit}
.wlClose:hover{background:var(--soft);color:var(--ink)}
.wlKicker{font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--green);margin-bottom:9px}
.wlTitle{font-size:25px;line-height:1.1;letter-spacing:-.042em;margin:0 0 8px;font-weight:700}
.wlSub{font-size:14.5px;line-height:1.5;color:#56635e;margin:0 0 19px}
.wlField{display:block;margin-bottom:12px}
.wlField span{display:block;font-size:12.5px;font-weight:600;color:#56635e;margin-bottom:5px}
.wlField span i{font-style:normal;font-weight:400;color:#8a9791}
.wlField input{width:100%;font:inherit;font-size:15.5px;padding:12px 13px;border:1px solid var(--line);
  border-radius:11px;background:#fff;color:var(--ink)}
.wlField input::placeholder{color:#a9b3ae}
.wlField input:focus{outline:2px solid var(--green);outline-offset:1px;border-color:transparent}
.wlHp{position:absolute;left:-9999px;width:0;height:0;opacity:0}
.wlGo{width:100%;background:var(--green);color:#fff;border:0;font:inherit;font-weight:700;font-size:15px;
  border-radius:12px;padding:14px;cursor:pointer;margin-top:6px;transition:filter .2s ease}
.wlGo:hover{filter:brightness(1.08)}
.wlGo[disabled]{opacity:.55;cursor:default}
.wlFine{font-size:12px;color:#8a9791;margin:11px 0 0;text-align:center}
.wlErr{font-size:13.5px;line-height:1.45;color:#a8432a;margin:12px 0 0}
.wlErr a{color:var(--green);text-decoration:underline}
.wlDone{text-align:center;padding:10px 0 8px}
.wlDone .tick{width:54px;height:54px;border-radius:50%;background:var(--mint);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.wlDone .wlSub{margin-bottom:2px}
[hidden]{display:none!important}
@media(max-width:480px){.wlCard{padding:24px 20px 20px}.wlTitle{font-size:23px}}

/* ---------- SEO landing pages ---------- */
.seoHero{padding:86px 0 78px;text-align:center;background:
  radial-gradient(circle at 78% 18%, rgba(11,143,104,.16), transparent 32%),
  radial-gradient(circle at 8% 88%, rgba(11,143,104,.1), transparent 34%),
  var(--paper)}
.seoHero h1{max-width:920px;margin-inline:auto}
.seoGrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:50px;align-items:center;text-align:left}
.seoGrid .kicker{justify-content:flex-start}
.seoGrid h1,.seoGrid .lead{margin-left:0;margin-right:0;text-align:left}
.seoGrid .heroCta{justify-content:flex-start}
.seoCard,.priceCard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 28px 70px -54px rgba(8,20,16,.55)}
.seoCardTop{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 12px}
.seoCard h2{font-size:clamp(24px,3vw,38px);line-height:1.05;letter-spacing:-.05em;margin:0 0 22px}
.seoRows{display:grid;grid-template-columns:110px 1fr;border-top:1px solid #edf0ee}
.seoRows span,.seoRows b{padding:13px 0;border-bottom:1px solid #edf0ee;font-size:14px}
.seoRows span{color:var(--muted)}
.seoRows b{text-align:right}
.seoColumns{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px;text-align:left}
.seoColumns article,.compareCol{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.seoColumns h3,.compareCol h2{font-size:20px;letter-spacing:-.035em;margin:0 0 10px}
.seoColumns p,.compareCol p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0}
.seoSoft{background:#f6f6f2}
.seoTable{max-width:780px;margin:auto;text-align:left;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.seoTableHead{padding:18px 22px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green);background:#f7faf8}
.seoTable div:not(.seoTableHead){display:grid;grid-template-columns:190px 1fr;gap:20px;padding:18px 22px;border-top:1px solid var(--line)}
.seoTable span{color:var(--muted)}
.seoTable b{font-weight:700}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:auto;text-align:left}
.compareCol.green{border-color:#a9d8c6;background:#f4fbf7}
.pricingGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.priceCard h2{font-size:44px;letter-spacing:-.06em;margin:0 0 12px}
.priceCard p{color:var(--muted);line-height:1.55}
.priceCard ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.priceCard li{position:relative;padding-left:22px;color:#46524d}
.priceCard li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.priceCard.main{border-color:#93d2bb;box-shadow:0 34px 78px -48px rgba(11,143,104,.5)}
@media(max-width:900px){
  .seoGrid,.seoColumns,.compare,.pricingGrid{grid-template-columns:1fr}
  .seoGrid,.seoGrid h1,.seoGrid .lead{text-align:center}
  .seoGrid .kicker,.seoGrid .heroCta{justify-content:center}
}
@media(max-width:600px){
  .seoHero{padding:54px 0 56px}
  .seoTable div:not(.seoTableHead){grid-template-columns:1fr;gap:6px}
  .seoRows{grid-template-columns:1fr}
  .seoRows b{text-align:left;padding-top:0}
  .seoRows span{border-bottom:0;padding-bottom:4px}
}