/* =========================================================================
   MDB Growth Capital: one design system, two practices.
   Shared by /index.html (B2B founders) and /wealth/index.html (Wealth firms).

   TOKENS (all on :root)
     Surfaces   --paper --paper-2 --card --dark --dark-2 --dark-3
     Text       --ink --ink-2 --mute --on-dark --on-dark-2 --on-dark-mute
     Lines      --line --line-strong --line-dark
     Shared     --warn (the "break" red used by both pages)
     Type       --font-display (Instrument Serif) --font-body (Inter)
     Scale      --sp-1 .. --sp-9 (4px base), --wrap, --gutter
     Shape      --radius-s --radius --radius-l --pill
     Motion     --ease --t-fast --t --t-slow

   ACCENT THEMES (set on <html data-accent="...">)
     [data-accent="green"]   B2B founders page. Fill #17A34A, text on light
                             #13793A, text on dark #4ADE80, text on fill white.
     [data-accent="signal"]  Wealth firms page. Fill #D9FF43, text on light
                             #5C6B00, text on dark #D9FF43, text on fill ink.
     Every component reads --accent, --accent-ink, --accent-bright,
     --accent-soft, --on-accent. Nothing else changes between the pages.

   COMPONENTS (in order): reset, type, nav + segmented toggle, buttons,
   kickers, sections, cards, rows, rail, compare, fit, faq, stat, panel,
   form, footer, motion, breakpoints.
   ========================================================================= */

:root{
  --paper:#F5F4EF;--paper-2:#ECEAE2;--card:#FFFFFF;
  --dark:#0F110F;--dark-2:#171A17;--dark-3:#20241F;
  --ink:#111311;--ink-2:#2A2D2A;--mute:#5F655F;
  --on-dark:#F2F1EA;--on-dark-2:#C9CBC0;--on-dark-mute:#9A9D92;
  --line:#D8D6CC;--line-strong:#B9B6AA;--line-dark:rgba(255,255,255,.12);
  --warn:#D9573F;--warn-ink:#A33D2B;--warn-soft:rgba(217,87,63,.12);

  --font-display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --sp-7:48px;--sp-8:64px;--sp-9:96px;
  --wrap:1200px;--gutter:24px;

  --radius-s:6px;--radius:12px;--radius-l:20px;--pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);--t-fast:160ms;--t:320ms;--t-slow:640ms;
  --nav-h:64px;
}
[data-accent="green"]{
  --accent:#17A34A;--accent-ink:#13793A;--accent-bright:#4ADE80;
  --accent-soft:rgba(23,163,74,.10);--accent-soft-dark:rgba(74,222,128,.12);
  --accent-glow:rgba(23,163,74,.35);--on-accent:#FFFFFF;--accent-line:rgba(23,163,74,.35);
}
[data-accent="signal"]{
  --accent:#D9FF43;--accent-ink:#5C6B00;--accent-bright:#D9FF43;
  --accent-soft:rgba(217,255,67,.16);--accent-soft-dark:rgba(217,255,67,.10);
  --accent-glow:rgba(217,255,67,.35);--on-accent:#0F110F;--accent-line:rgba(217,255,67,.45);
}

/* ---------- reset + base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;overflow-x:hidden}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
b,strong{font-weight:600}
.wrap{width:min(var(--wrap),calc(100% - 2*var(--gutter)));margin-inline:auto}
.narrow{max-width:800px}
.center{text-align:center}
.center p,.center .lead{margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--radius-s);font-weight:600;text-decoration:none;transition:top var(--t-fast)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.dark :focus-visible{outline-color:var(--accent-bright)}

/* ---------- type ---------- */
h1,h2,.display,.h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;text-wrap:balance}
h1,.display{font-size:clamp(42px,6.2vw,80px);line-height:.98;margin-top:var(--sp-4)}
h2,.h2{font-size:clamp(32px,4.4vw,54px);line-height:1.02;margin:var(--sp-3) 0 var(--sp-4)}
h3{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.em{font-style:italic;color:var(--accent-ink)}
.dark .em{color:var(--accent-bright)}
p{max-width:68ch;margin:var(--sp-3) 0}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--mute);max-width:62ch}
.dark .lead{color:var(--on-dark-2)}
.dark p{color:var(--on-dark-2)}
.dark b,.dark strong,.dark h3{color:var(--on-dark)}
.small{font-size:14px;color:var(--mute)}
.dark .small{color:var(--on-dark-mute)}
.micro{font-size:12px;color:var(--mute);letter-spacing:.01em}
.dark .micro{color:var(--on-dark-mute)}
.tm{font-size:.5em;vertical-align:super;letter-spacing:0;font-family:var(--font-body);font-weight:600}
.num{font-variant-numeric:tabular-nums}

/* ---------- kickers + section marks ---------- */
.kick{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.dark .kick{color:var(--accent-bright)}
.kick .no{font-family:var(--font-display);font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--pill);min-width:34px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;line-height:1}
.dark .kick .no{color:var(--on-dark);background:transparent;border-color:var(--line-dark)}
.kick.plain{color:var(--mute)}
.dark .kick.plain{color:var(--on-dark-mute)}
/* qualifier: large eyebrow above a hero h1 (wealth page) */
.qualifier{font-size:22px;font-weight:600;line-height:1.3;max-width:32ch;margin:0 0 var(--sp-4);color:var(--accent-ink)}
.dark .qualifier{color:var(--accent-bright)}
@media(max-width:600px){.qualifier{font-size:18px}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(245,244,239,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);height:var(--nav-h)}
.logo{font-family:var(--font-display);font-size:22px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;line-height:1;display:inline-flex;align-items:baseline;gap:6px}
.logo span{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.seg{display:inline-flex;padding:3px;border:1px solid var(--line-strong);border-radius:var(--pill);background:rgba(255,255,255,.6);flex:0 0 auto}
.seg a{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--pill);font-size:13px;font-weight:600;line-height:1;text-decoration:none;color:var(--mute);white-space:nowrap;transition:color var(--t-fast),background var(--t-fast)}
.seg a i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:0 0 auto}
.seg a:hover{color:var(--ink)}
.seg a.on{background:var(--ink);color:var(--paper)}
.seg a.on i{background:var(--accent)}
.nav-note{font-size:13px;font-weight:500;color:var(--mute);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.nav-note svg{width:15px;height:15px;color:var(--accent-ink);flex:0 0 auto}
.nav .btn{padding:10px 16px;font-size:13px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:16px;line-height:1;padding:15px 24px;border:1px solid transparent;border-radius:var(--pill);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t-fast)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px var(--accent-glow)}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn-lg{font-size:18px;padding:18px 30px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.btn-ghost:hover{border-color:var(--ink);box-shadow:none}
.dark .btn-ghost{color:var(--on-dark);border-color:rgba(255,255,255,.28)}
.dark .btn-ghost:hover{border-color:var(--on-dark)}
.btn-block{width:100%}
.underbtn{font-size:14px;color:var(--mute);margin-top:var(--sp-3)}
.dark .underbtn{color:var(--on-dark-mute)}

/* ---------- sections ---------- */
.section{padding:var(--sp-9) 0;position:relative}
.section.tint{background:var(--paper-2)}
.section.dark,.dark{background:var(--dark);color:var(--on-dark)}
.section.dark h2,.dark h2,.dark h1{color:var(--on-dark)}
.section.accent{background:var(--accent);color:var(--on-accent)}
.section.accent .kick{color:var(--on-accent);opacity:.8}
.section.accent .lead,.section.accent p{color:var(--on-accent)}
.section + .section.tint,.section.tint + .section:not(.dark){border-top:1px solid var(--line)}
.section.dark + .section.dark{border-top:1px solid var(--line-dark)}
.intro{margin-bottom:var(--sp-7)}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--sp-5);transition:transform var(--t) var(--ease),border-color var(--t)}
.card:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.card-title{font-size:17px;font-weight:600;margin:var(--sp-4) 0 6px;letter-spacing:-.01em}
.card-text{font-size:15px;color:var(--mute);line-height:1.55}
.dark .card{background:var(--dark-2);border-color:var(--line-dark)}
.dark .card:hover{border-color:rgba(255,255,255,.24)}
.dark .card-title{color:var(--on-dark)}
.dark .card-text{color:var(--on-dark-2)}
.ico{width:40px;height:40px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ico svg{width:20px;height:20px;stroke-width:1.8}
.dark .ico{background:var(--accent-soft-dark);color:var(--accent-bright)}
.ico.warn{background:var(--warn-soft);color:var(--warn-ink)}
.dark .ico.warn{color:#F0A08F}
.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}

/* ---------- rows: numbered hairline list ---------- */
.rows{border-top:1px solid var(--line)}
.dark .rows{border-top-color:var(--line-dark)}
.row{display:grid;grid-template-columns:64px 1fr;gap:var(--sp-5);padding:var(--sp-5) 0;border-bottom:1px solid var(--line);align-items:baseline}
.dark .row{border-bottom-color:var(--line-dark)}
.row-no{font-family:var(--font-display);font-size:28px;line-height:1;color:var(--accent-ink)}
.dark .row-no{color:var(--accent-bright)}
.row-title{font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.row-text{font-size:16px;color:var(--mute);margin-top:6px;max-width:62ch}
.dark .row-text{color:var(--on-dark-2)}
.row.three{grid-template-columns:64px .8fr 1.2fr}
.row.three .row-text{margin-top:0}

/* ---------- rail: horizontal connected steps ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--sp-3);position:relative;padding-top:22px}
.rail::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line-strong);border-radius:2px}
.dark .rail::before{background:rgba(255,255,255,.18)}
.rail-fill{position:absolute;left:0;top:7px;height:2px;background:var(--accent);border-radius:2px;width:var(--fill,0%)}
.rail-item{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4)}
.dark .rail-item{background:var(--dark-2);border-color:var(--line-dark)}
.rail-item::before{content:"";position:absolute;top:-21px;left:var(--sp-4);width:12px;height:12px;border-radius:50%;background:var(--card);border:3px solid var(--accent);box-sizing:border-box}
.rail-item.late::before{border-color:var(--warn)}
.rail-item.end::before{background:var(--accent)}
.rail-k{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.dark .rail-k{color:var(--accent-bright)}
.rail-item.late .rail-k{color:var(--warn-ink)}
.dark .rail-item.late .rail-k{color:#F0A08F}
.rail-t{font-size:16px;font-weight:600;margin:6px 0 4px;letter-spacing:-.01em}
.rail-d{font-size:14px;color:var(--mute);line-height:1.5}
.dark .rail-d{color:var(--on-dark-2)}

/* ---------- compare: two-column ledger ---------- */
.compare{border:1px solid var(--line-strong);border-radius:var(--radius-l);overflow:hidden;background:var(--card)}
.compare-head,.compare-row{display:grid;grid-template-columns:1fr 1fr}
.compare-head.three,.compare-row.three{grid-template-columns:170px 1fr 1fr}
.compare-head>*{padding:14px 20px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.compare-head .old{background:var(--paper-2);color:var(--mute)}
.compare-head .new{background:var(--ink);color:var(--accent-bright)}
.compare-head .blank{background:var(--paper-2)}
.compare-row{border-top:1px solid var(--line)}
.compare-row>*{padding:16px 20px;font-size:16px;line-height:1.45}
.compare-row .lab{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding-top:19px}
.compare-row .old{color:var(--mute)}
.compare-row .new{color:var(--ink);font-weight:500;background:var(--accent-soft)}
.compare-row strong{display:block;font-weight:600;color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}
.compare-row .old strong{color:var(--ink-2)}
.compare-verdict{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-strong)}
.compare-verdict>div{padding:var(--sp-5) 20px}
.compare-verdict small{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.compare-verdict strong{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.01em}
.compare-verdict .old{background:var(--paper-2);color:var(--ink-2)}
.compare-verdict .old small{color:var(--warn-ink)}
.compare-verdict .new{background:var(--ink);color:var(--on-dark)}
.compare-verdict .new small{color:var(--accent-bright)}

/* ---------- fit: yes / no ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.fit-col{border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--sp-6);background:var(--card);border-top-width:4px}
.fit-col.yes{border-top-color:var(--accent)}
.fit-col.no{border-top-color:var(--line-strong)}
.fit-col h3{margin-bottom:var(--sp-4)}
.fit-col li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--line);font-size:16px;line-height:1.45}
.fit-col li svg{position:absolute;left:0;top:14px;width:17px;height:17px}
.fit-col.yes li svg{color:var(--accent-ink)}
.fit-col.no li svg{color:var(--mute)}
.dark .fit-col{background:var(--dark-2);border-color:var(--line-dark)}
.dark .fit-col.yes{border-top-color:var(--accent)}
.dark .fit-col li{border-top-color:var(--line-dark);color:var(--on-dark-2)}
.dark .fit-col.yes li svg{color:var(--accent-bright)}

/* ---------- faq: button accordion ---------- */
.faq{max-width:860px;margin-inline:auto;border-top:1px solid var(--line-strong)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);padding:20px 0;background:none;border:0;text-align:left;cursor:pointer;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.faq-q .pm{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-family:var(--font-display);font-size:20px;line-height:1;transition:transform var(--t) var(--ease)}
.faq-q[aria-expanded="true"] .pm{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t) var(--ease)}
.faq-a>div{overflow:hidden}
.faq-a p{font-size:16px;color:var(--mute);line-height:1.65;padding:0 48px 22px 0;max-width:72ch;margin:0}
.faq-q[aria-expanded="true"] + .faq-a{grid-template-rows:1fr}
.faq-group-title{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin:var(--sp-6) 0 var(--sp-2)}
.faq-group-title:first-child{margin-top:0}

/* ---------- stat ---------- */
.stat{display:flex;flex-direction:column;gap:6px}
.stat b{font-family:var(--font-display);font-weight:400;font-size:clamp(48px,7vw,88px);line-height:.9;letter-spacing:-.02em;color:var(--accent-ink)}
.dark .stat b{color:var(--accent-bright)}
.stat span{font-size:14px;color:var(--mute);font-weight:500}
.dark .stat span{color:var(--on-dark-mute)}

/* ---------- panel: bordered document ---------- */
.panel{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-l);overflow:hidden}
.dark .panel{background:var(--dark-2);border-color:var(--line-dark)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);padding:14px 20px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.dark .panel-head{border-bottom-color:var(--line-dark);color:var(--on-dark-mute)}
.panel-head b{color:var(--accent-ink)}
.dark .panel-head b{color:var(--accent-bright)}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-glow);animation:pulse 2.2s infinite}
.dark .tag{color:var(--on-dark-mute)}
.pill{display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--pill);border:1px solid var(--line-strong);font-size:14px;font-weight:600;background:var(--card)}
.dark .pill{background:rgba(255,255,255,.05);border-color:var(--line-dark);color:var(--on-dark)}
.state{display:inline-flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:var(--pill);border:1px solid var(--line-strong);color:var(--mute);white-space:nowrap}
.state.warn{color:var(--warn-ink);border-color:rgba(217,87,63,.45)}
.dark .state{color:var(--on-dark-mute);border-color:var(--line-dark)}
.dark .state.warn{color:#F0A08F;border-color:rgba(217,87,63,.55)}

/* ---------- form ---------- */
.form{background:var(--card);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-l);padding:var(--sp-6)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.field{display:grid;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-strong);background:var(--paper);border-radius:var(--radius-s);padding:12px 13px;font-size:16px;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{min-height:110px;resize:vertical}
.form .btn{margin-top:var(--sp-4)}
.form-status{min-height:20px;margin-top:var(--sp-2);font-size:14px;color:var(--accent-ink)}
.form-thanks{display:none;padding:var(--sp-6) 0}
.form-thanks h3{font-family:var(--font-display);font-weight:400;font-size:30px;margin-bottom:8px}
.form.done .fields,.form.done .btn,.form.done .form-note{display:none}
.form.done .form-thanks{display:block}
.form .form-thanks h3{color:var(--ink)}
.form .form-thanks p{color:var(--ink-2)}
.form .form-note{color:var(--ink-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.footer{background:var(--dark);color:var(--on-dark-mute);padding:var(--sp-7) 0;font-size:14px;border-top:1px solid var(--line-dark)}
.footer-in{display:grid;grid-template-columns:1fr auto;gap:var(--sp-5);align-items:start}
.footer .logo{color:var(--on-dark)}
.footer .logo span{color:var(--on-dark-mute)}
.footer-tag{font-family:var(--font-display);font-size:20px;color:var(--on-dark-2);margin-top:10px}
.footer-credit{margin-top:14px}
.footer-credit b{color:var(--on-dark)}
.footer-doors{display:flex;flex-direction:column;gap:6px;text-align:right}
.footer-doors span{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.footer-doors a{color:var(--on-dark-2);text-decoration:none;font-weight:500}
.footer-doors a:hover{color:var(--on-dark)}
.footer-doors a.on{color:var(--accent-bright)}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(0,0,0,0)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .tag i{animation:none}
  .btn,.card,.faq-a,.faq-q .pm{transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ---------- breakpoints ---------- */
@media(max-width:1100px){.nav-note{display:none}}
@media(max-width:900px){
  .section{padding:var(--sp-8) 0}
  .grid-3,.grid-4,.grid-5{grid-template-columns:1fr 1fr}
  .fit{grid-template-columns:1fr}
  .compare-head.three,.compare-row.three{grid-template-columns:120px 1fr 1fr}
  .rail{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr;padding-top:0}
  .rail::before,.rail-fill{display:none}
  .rail-item::before{display:none}
  .rail-item{border-left:3px solid var(--accent)}
  .rail-item.late{border-left-color:var(--warn)}
  .footer-in{grid-template-columns:1fr}
  .footer-doors{text-align:left}
}
@media(max-width:600px){
  :root{--gutter:16px;--nav-h:60px}
  .grid-2,.grid-3,.grid-4,.grid-5,.rail{grid-template-columns:1fr}
  .logo span{display:none}
  .seg a{padding:6px 10px;font-size:12px}
  .nav .btn{padding:9px 12px;font-size:12px}
  .row{grid-template-columns:40px 1fr;gap:var(--sp-3)}
  .row.three{grid-template-columns:40px 1fr}
  .row.three .row-text{grid-column:2;margin-top:4px}
  .row-no{font-size:22px}
  .compare-head{display:none}
  .compare-row,.compare-row.three{grid-template-columns:1fr}
  .compare-row .lab{padding-bottom:0}
  .compare-row .old::before,.compare-row .new::before{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
  .compare-row .old::before{content:var(--old-label,"Before");color:var(--warn-ink)}
  .compare-row .new::before{content:var(--new-label,"After");color:var(--accent-ink)}
  .compare-verdict{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .faq-q{font-size:16px}
  .faq-a p{padding-right:0}
  .form{padding:var(--sp-5)}
}

/* small phones (added 2026-10-12 after a 390px overflow check): the hero carries its own CTA, so the nav keeps only
   the logo and the practice toggle */
@media(max-width:520px){
  .nav .btn{display:none}
  .seg a{padding-left:10px;padding-right:10px}
}