/* ============================================================
   Untangle marketing site — styles
   Design: Sprache DS tokens · "Bold" direction.
   Fonts self-hosted (Bricolage Grotesque, OFL). No third-party requests.
   ============================================================ */

/* ---- Fonts ---- */
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/bricolage-grotesque-var.woff2') format('woff2'); }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:500; font-display:swap; src:url('./fonts/bricolage-grotesque-var.woff2') format('woff2'); }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600; font-display:swap; src:url('./fonts/bricolage-grotesque-600.woff2') format('woff2'); }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:700; font-display:swap; src:url('./fonts/bricolage-grotesque-700.woff2') format('woff2'); }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:800; font-display:swap; src:url('./fonts/bricolage-grotesque-800.woff2') format('woff2'); }

:root {
  --sage-50:#EEF7F2; --sage-100:#DCEFE3; --sage-200:#BCDFCB; --sage-300:#93CBAE;
  --sage-400:#6FB893; --sage-500:#4FA47A; --sage-600:#3D8763; --sage-700:#2F694D; --sage-800:#234E3A;
  --coral-100:#FBDDD6; --coral-500:#E26B58; --coral-600:#C2533F; --coral-700:#963E2F;
  --butter-100:#FBEEC3; --butter-300:#F5D689; --butter-700:#7E5E1C;
  --sky-100:#DAEAF5; --sky-600:#43779F;
  --paper:#FBFAF6; --sand-50:#F4F1E9; --sand-100:#ECE7DA; --sand-200:#DAD3BF; --sand-800:#1E1C16;
  --card:#FFFFFF; --ink:#1E1C16; --ink-soft:#4A4538; --ink-mute:#948B72; --border:#E2DDCB;
  --font-display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-ui:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --shadow-sm:0 1px 2px rgba(35,40,38,.04), 0 1px 3px rgba(35,40,38,.06);
  --shadow-md:0 4px 8px rgba(35,40,38,.06), 0 2px 4px rgba(35,40,38,.04);
  --shadow-lg:0 12px 24px rgba(35,40,38,.10), 0 4px 8px rgba(35,40,38,.06);
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; background:var(--paper); }
body{
  font-family:var(--font-ui); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
}
::selection{ background:var(--sage-200); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:var(--sand-200); border-radius:999px; border:3px solid var(--paper); }
img{ max-width:100%; }
a{ color:inherit; }

.wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.wrap-md{ max-width:1000px; margin:0 auto; padding:0 24px; }
.wrap-sm{ max-width:820px; margin:0 auto; padding:0 24px; }
.eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-600); margin:0; }
.center{ text-align:center; }

/* ---- Header / nav ---- */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:rgba(251,250,246,.82); border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; gap:20px; padding-top:13px; padding-bottom:13px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ display:block; border-radius:9px; }
.brand-name{ font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:-.03em; color:var(--ink); }
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.nav-links a{
  font-size:14.5px; font-weight:600; color:var(--ink-soft); text-decoration:none;
  padding:8px 13px; border-radius:10px; transition:background .12s var(--ease), color .12s var(--ease);
}
.nav-links a:hover{ background:var(--sand-100); color:var(--ink); }
.nav-cta{ display:flex; }
.nav-toggle{ display:none; }

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; cursor:pointer; font-family:var(--font-ui); border:none; }
.btn-primary{
  background:var(--sage-500); color:#fff; border-radius:11px; padding:10px 17px;
  font-size:14.5px; font-weight:700; box-shadow:var(--shadow-sm); transition:background .15s var(--ease);
}
.btn-primary:hover{ background:var(--sage-600); }
.btn-lg{ padding:13px 22px; font-size:15px; border-radius:12px; }
.btn-block{ width:100%; }
.btn-soft{ background:var(--sand-100); color:var(--ink); border-radius:12px; padding:13px 22px; font-size:15px; font-weight:700; transition:background .15s var(--ease); }
.btn-soft:hover{ background:var(--sand-200); }
.btn-light{ background:#fff; color:var(--ink); border-radius:12px; padding:12px 24px; font-size:15px; font-weight:700; box-shadow:var(--shadow-lg); transition:transform .15s var(--ease); }
.btn-light:hover{ transform:translateY(-2px); }

/* App-store badge buttons */
.store-row{ display:flex; gap:12px; flex-wrap:wrap; }
.store-btn{
  display:inline-flex; align-items:center; gap:11px; background:var(--ink); color:#fff;
  border-radius:14px; padding:11px 18px; text-decoration:none; box-shadow:var(--shadow-md);
  transition:transform .15s var(--ease);
}
.store-btn:hover{ transform:translateY(-2px); }
.store-btn.light{ background:#fff; color:var(--ink); box-shadow:var(--shadow-lg); }
.store-btn .lbl{ display:flex; flex-direction:column; line-height:1.08; text-align:left; white-space:nowrap; }
.store-btn .lbl small{ font-size:10px; font-weight:500; opacity:.82; }
.store-btn .lbl b{ font-size:16px; font-weight:700; letter-spacing:-.01em; }

/* ---- Hero (A · bold split) ---- */
.hero{ background:var(--paper); overflow:hidden; border-bottom:1px solid var(--border); }
.hero-grid{ padding-top:74px; padding-bottom:56px; display:grid; grid-template-columns:1.08fr .92fr; gap:44px; align-items:center; }
.pill{ display:inline-flex; align-items:center; gap:8px; background:var(--sage-50); border:1px solid var(--sage-200); color:var(--sage-700); border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:700; letter-spacing:.02em; }
.pill .dot{ width:7px; height:7px; border-radius:999px; background:var(--sage-500); }
.hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5.4vw,72px); line-height:1.0; letter-spacing:-.045em; margin:20px 0 0; }
.hero h1 .accent{ color:var(--coral-500); }
.lead{ margin:22px 0 0; max-width:520px; font-size:18px; line-height:1.55; color:var(--ink-soft); }
.hero .store-row{ margin-top:30px; }
.hero-note{ margin-top:18px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-mute); }
.hero-note span{ display:inline-flex; align-items:center; gap:6px; }
.hero-note svg{ color:var(--sage-600); }

.hero-art{ position:relative; display:flex; justify-content:center; min-height:440px; align-items:center; }
.hero-art .halo{ position:absolute; width:320px; height:320px; border-radius:50%; background:var(--sage-100); top:36px; z-index:0; }
.phone{ background:#1E1C16; border-radius:40px; padding:9px; box-shadow:0 34px 64px -22px rgba(35,40,38,.45); }
.phone img{ display:block; width:100%; border-radius:32px; }
.hero-phone{ position:relative; z-index:1; width:250px; transform:rotate(-2.5deg); }
.chip{ position:absolute; z-index:2; background:#fff; border:1px solid var(--border); border-radius:15px; padding:11px 14px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; }
.chip .ic{ width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.chip .ic.coral{ background:var(--coral-100); color:var(--coral-700); }
.chip .ic.sage{ background:var(--sage-100); color:var(--sage-700); }
.chip b{ display:block; font-weight:700; font-size:14px; }
.chip small{ display:block; font-size:11.5px; color:var(--ink-mute); }
.chip.tl{ top:26px; right:-6px; }
.chip.bl{ bottom:34px; left:-10px; }

/* ---- Stat strip ---- */
.stats{ background:var(--sand-50); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stats .wrap-md{ padding-top:60px; padding-bottom:60px; max-width:1100px; }
.stats h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3vw,34px); letter-spacing:-.03em; line-height:1.12; margin:12px 0 0; max-width:620px; }
.stats .eyebrow{ color:var(--ink-mute); }
.stat-grid{ margin-top:38px; display:grid; grid-template-columns:repeat(3,1fr); }
.stat{ padding:4px 30px; border-left:1px solid var(--border); }
.stat:first-child{ padding-left:0; border-left:none; }
.stat-top{ display:flex; align-items:flex-start; gap:10px; }
.stat-bar{ border-radius:999px; background:var(--coral-600); margin-top:clamp(16px,2.1vw,26px); flex:none; height:20px; width:40px; }
.stat-v{ font-family:var(--font-display); font-weight:800; font-size:clamp(42px,5.2vw,60px); letter-spacing:-.04em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat-k{ margin-top:16px; font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.stat-s{ margin-top:5px; font-size:14px; line-height:1.5; color:var(--ink-soft); max-width:230px; }

/* ---- Section heads ---- */
.section{ background:var(--paper); }
.section-head{ padding-top:84px; padding-bottom:8px; }
.section-head h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.6vw,44px); letter-spacing:-.035em; margin:14px auto 0; max-width:640px; line-height:1.08; }
.section-head p{ margin:16px auto 0; max-width:560px; font-size:17px; line-height:1.55; color:var(--ink-soft); }

/* ---- Features ---- */
.features{ padding-top:20px; padding-bottom:40px; display:flex; flex-direction:column; gap:34px; }
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:center; }
.feature .fnum{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:.02em; }
.feature h3{ font-family:var(--font-display); font-weight:800; font-size:clamp(24px,2.8vw,32px); letter-spacing:-.03em; margin:16px 0 0; line-height:1.1; }
.feature p{ margin:14px 0 0; font-size:16.5px; line-height:1.6; color:var(--ink-soft); max-width:440px; }
.feature .art{ border-radius:28px; padding:36px 24px 0; display:flex; justify-content:center; align-items:flex-end; min-height:340px; overflow:hidden; }
.feature .art .phone{ width:230px; border-radius:36px; padding:8px; box-shadow:0 26px 52px -22px rgba(35,40,38,.4); }
.feature .art .phone img{ border-radius:29px; }
.feature.rev .txt{ order:2; }
.feature.rev .art{ order:1; }
/* tints */
.t-sage .fnum{ background:var(--sage-100); color:var(--sage-700); } .t-sage .art{ background:var(--sage-100); }
.t-coral .fnum{ background:var(--coral-100); color:var(--coral-700); } .t-coral .art{ background:var(--coral-100); }
.t-butter .fnum{ background:var(--butter-100); color:var(--butter-700); } .t-butter .art{ background:var(--butter-100); }
.t-sky .fnum{ background:var(--sky-100); color:var(--sky-600); } .t-sky .art{ background:var(--sky-100); }

/* ---- How it works ---- */
.how{ background:var(--sand-50); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.how .wrap{ padding-top:80px; padding-bottom:80px; }
.how .eyebrow{ color:var(--coral-600); }
.how h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.6vw,44px); letter-spacing:-.035em; margin:14px auto 0; max-width:560px; line-height:1.08; color:var(--ink); }
.steps{ margin-top:48px; display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap; gap:8px; }
.step-wrap{ display:flex; align-items:center; flex:1 1 240px; min-width:220px; }
.step{ position:relative; flex:1; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:30px 24px 26px; height:100%; }
.step .n{ position:absolute; top:-18px; left:24px; width:44px; height:44px; border-radius:13px; background:var(--sage-500); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:19px; box-shadow:var(--shadow-sm); }
.step .tag{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-600); margin-top:14px; }
.step h3{ font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.02em; margin:7px 0 0; color:var(--ink); }
.step p{ margin:9px 0 0; font-size:14.5px; line-height:1.55; color:var(--ink-soft); }
.step-arrow{ flex:none; width:40px; display:flex; align-items:center; justify-content:center; color:var(--sage-400); }

/* ---- Pricing ---- */
.pricing .wrap-md{ max-width:920px; padding-top:84px; padding-bottom:84px; }
.pricing .eyebrow{ color:var(--coral-600); }
.pricing h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.6vw,44px); letter-spacing:-.035em; margin:14px auto 0; max-width:560px; line-height:1.08; }
.plans{ margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.plan{ position:relative; background:var(--card); border:1px solid var(--border); border-radius:22px; padding:28px 26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.plan.featured{ border:2px solid var(--sage-500); box-shadow:var(--shadow-md); }
.plan .tag{ position:absolute; top:20px; right:20px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--butter-100); color:var(--butter-700); padding:4px 10px; border-radius:999px; }
.plan .pname{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.02em; }
.plan .price{ display:flex; align-items:baseline; gap:8px; margin-top:12px; }
.plan .price .amt{ font-family:var(--font-display); font-weight:800; font-size:46px; letter-spacing:-.03em; line-height:1; }
.plan .price .per{ font-size:14px; color:var(--ink-mute); }
.plan .rule{ height:1px; background:var(--border); margin:22px 0; }
.plan ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.plan li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-soft); }
.plan li svg{ flex:none; margin-top:1px; color:var(--sage-600); }
.plan .btn{ margin-top:24px; }
.plan-foot{ text-align:center; margin-top:20px; font-size:13px; color:var(--ink-mute); }

/* ---- CTA band ---- */
.cta{ background:var(--sage-600); color:#fff; }
.cta .wrap-sm{ max-width:900px; padding-top:82px; padding-bottom:82px; text-align:center; }
.cta img.mark{ border-radius:16px; box-shadow:var(--shadow-lg); }
.cta h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,4.4vw,54px); letter-spacing:-.04em; margin:22px auto 0; max-width:640px; line-height:1.03; }
.cta p{ margin:18px auto 0; max-width:480px; font-size:17px; line-height:1.55; opacity:.9; }
.cta .store-row{ margin-top:28px; justify-content:center; }

/* ---- Footer ---- */
.site-footer{ background:var(--sand-800); color:rgba(255,255,255,.7); }
.footer-grid{ padding-top:56px; padding-bottom:30px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
.footer-brand .brand-name{ color:#fff; font-size:19px; }
.footer-brand p{ margin:14px 0 0; font-size:13.5px; line-height:1.55; max-width:280px; color:rgba(255,255,255,.6); }
.footer-col h4{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 14px; }
.footer-col{ display:flex; flex-direction:column; }
.footer-col a{ font-size:14px; color:rgba(255,255,255,.72); text-decoration:none; margin-bottom:11px; transition:color .12s var(--ease); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:20px; padding-bottom:40px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; font-size:13px; color:rgba(255,255,255,.5); }

/* ---- Legal / doc pages ---- */
.page-head{ background:var(--sand-50); border-bottom:1px solid var(--border); }
.page-head .wrap-sm{ padding-top:66px; padding-bottom:46px; }
.page-head.center .wrap-sm{ text-align:center; }
.page-head h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(36px,5vw,56px); letter-spacing:-.04em; margin:14px 0 0; line-height:1.02; }
.page-head.center h1{ margin-left:auto; margin-right:auto; }
.page-head .eyebrow{ color:var(--ink-mute); }
.page-head .sub{ margin:16px 0 0; font-size:15px; color:var(--ink-mute); }
.page-head.center .lead{ margin-left:auto; margin-right:auto; }
.doc{ padding-top:52px; padding-bottom:80px; }
.doc > p{ margin:0 0 14px; font-size:16px; line-height:1.66; color:var(--ink-soft); }
.doc h2{ font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.02em; margin:36px 0 12px; color:var(--ink); }
.doc ul{ margin:0 0 14px; padding-left:22px; }
.doc li{ margin:0 0 9px; font-size:16px; line-height:1.6; color:var(--ink-soft); }
.doc a{ color:var(--sage-700); }
.doc .meta{ font-size:14px; color:var(--ink-mute); margin-top:6px; }
.doc .callout{ background:var(--sage-50); border:1px solid var(--sage-200); border-radius:14px; padding:16px 20px; margin:18px 0; }
.doc .callout p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-soft); }
.doc-cta{ background:var(--sage-50); border:1px solid var(--sage-200); border-radius:16px; padding:22px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:36px; }
.doc-cta .txt{ flex:1; min-width:200px; }
.doc-cta b{ font-size:16px; }
.doc-cta small{ display:block; font-size:14.5px; color:var(--ink-soft); margin-top:3px; }
.doc-cta a.mail{ color:var(--sage-700); font-weight:600; text-decoration:none; }

/* ---- Support / FAQ ---- */
.faq{ padding-top:48px; padding-bottom:40px; max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq details{ background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 20px; font-size:16.5px; font-weight:700; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .plus{ margin-left:auto; flex:none; color:var(--ink-mute); transition:transform .2s var(--ease); }
.faq details[open] summary .plus{ transform:rotate(45deg); }
.faq details p{ margin:0; padding:0 20px 20px; font-size:15.5px; line-height:1.62; color:var(--ink-soft); }
.help-cta{ max-width:760px; margin:0 auto; padding:8px 24px 84px; }
.help-cta .box{ background:var(--ink); color:#fff; border-radius:22px; padding:36px 32px; text-align:center; }
.help-cta h2{ font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-.03em; margin:0; }
.help-cta p{ margin:12px auto 0; max-width:400px; font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.78); }
.help-cta .btn-light{ margin-top:20px; }

/* ---- Contact ---- */
.contact-grid{ padding-top:52px; padding-bottom:84px; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start; }
.contact-card{ background:var(--card); border:1px solid var(--border); border-radius:22px; padding:30px; box-shadow:var(--shadow-sm); }
.field{ display:flex; flex-direction:column; gap:7px; }
.field + .field, .field-row + .field{ margin-top:16px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field span{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.field input, .field textarea{
  border:1px solid var(--border); border-radius:11px; background:var(--paper); padding:12px 14px;
  font-family:var(--font-ui); font-size:15px; color:var(--ink); outline:none; transition:border-color .15s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field textarea:focus{ border-color:var(--sage-400); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ margin:14px 0 0; font-size:14px; }
.form-status.ok{ color:var(--sage-700); } .form-status.err{ color:var(--coral-600); }
.contact-info{ display:flex; flex-direction:column; gap:16px; }
.info-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px 22px; display:flex; gap:14px; align-items:flex-start; }
.info-card .ic{ width:40px; height:40px; border-radius:11px; background:var(--sage-100); color:var(--sage-700); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.info-card b{ font-size:15px; } .info-card div small{ display:block; font-size:14px; color:var(--ink-soft); margin-top:3px; line-height:1.45; }
.info-card a{ color:var(--sage-700); text-decoration:none; }

/* ---- 404 ---- */
.notfound{ max-width:520px; margin:0 auto; padding:96px 24px; text-align:center; }
.notfound h1{ font-family:var(--font-display); font-weight:800; font-size:40px; letter-spacing:-.03em; margin:24px 0 0; }
.notfound p{ color:var(--ink-soft); margin:12px 0 0; }

/* ---- Responsive ---- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:24px; padding-top:52px; }
  .hero-art{ min-height:380px; }
  .feature{ grid-template-columns:1fr; gap:20px; }
  .feature.rev .txt{ order:1; } .feature.rev .art{ order:2; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .nav-links, .nav-cta{ display:none; }
  .site-header.open .nav-links{
    display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--paper); border-bottom:1px solid var(--border); padding:8px 16px 16px; gap:2px; margin-left:0;
  }
  .site-header.open .nav-cta{ display:flex; position:absolute; top:100%; margin-top:150px; left:16px; right:16px; }
  .site-header.open .nav-cta .btn{ width:100%; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; margin-left:auto; background:none; border:none;
    cursor:pointer; padding:8px;
  }
  .nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }
  .stat-grid{ grid-template-columns:1fr; gap:28px; }
  .stat{ padding:0; border-left:none; }
  .plans{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .steps{ flex-direction:column; }
  .step-wrap{ flex-direction:column; }
  .step-arrow{ transform:rotate(90deg); width:100%; height:30px; }
}