/* ============================================================================
   Gyro Suite - gyrosuite.com
   Design system. Light mode only. Palette: Signal Blue
   Type: Inter Variable (OFL 1.1) + JetBrains Mono (OFL 1.1), both self-hosted.
   Motion: no-motion-first authoring. Every animation lives inside a
   prefers-reduced-motion: no-preference query, so the static state is default.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */
@font-face{
  font-family:"Inter var";
  src:url("/f/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20A0-20BF,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter var";
  src:url("/f/inter-var-ext.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"JB Mono"; src:url("/f/jbmono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JB Mono"; src:url("/f/jbmono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
/* Metric-matched fallback: prevents CLS during the swap. */
@font-face{
  font-family:"Inter Fallback"; src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  size-adjust:107%; ascent-override:90%; descent-override:22.4%; line-gap-override:0%;
}

/* ---------------------------------------------------------------- tokens */
:root{
    --c-ink: #0F172A;
    --c-ink-2: #1E293B;
    --c-body: #475569;
    --c-muted: #64748B;
    --c-page: #FFFFFF;
    --c-surface: #F8FAFC;
    --c-surface-2: #EEF2F6;
    --c-line: #E2E8F0;
    --c-line-2: #CBD5E1;
    --c-line-ui: #7C8CA3;
    --c-brand: #3B82F6;
    --c-brand-deep: #2563EB;
    --c-brand-dark: #1D4ED8;
    --c-brand-soft: #EFF6FF;
    --c-brand-tint: #D3E3FD;
    --c-ok: #047857;
    --c-ok-soft: #ECFDF5;
    --c-warn: #B45309;
    --c-warn-soft: #FEF6EC;
    --c-bad: #B91C1C;
    --c-bad-soft: #FEF2F2;

  --font-sans:"Inter var","Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JB Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* type scale - base 17px, ratio ~1.25, tracking a function of size */
  --fs-xs:.8125rem;  --lh-xs:1.45;  --ls-xs:.005em;
  --fs-sm:.875rem;   --lh-sm:1.5;   --ls-sm:.003em;
  --fs-base:1.0625rem; --lh-base:1.62; --ls-base:0;
  --fs-lg:1.1875rem; --lh-lg:1.55;  --ls-lg:-.004em;
  --fs-xl:1.4375rem; --lh-xl:1.35;  --ls-xl:-.010em;
  --fs-2xl:1.8125rem;--lh-2xl:1.24; --ls-2xl:-.016em;
  --fs-3xl:2.25rem;  --lh-3xl:1.14; --ls-3xl:-.021em;
  --fs-4xl:2.875rem; --lh-4xl:1.07; --ls-4xl:-.025em;
  --fs-5xl:3.75rem;  --lh-5xl:1.02; --ls-5xl:-.029em;
  --fs-eyebrow:.75rem; --ls-eyebrow:.1em;

  /* 4px spacing scale */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;   --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem;   --sp-10:2.5rem;--sp-12:3rem;  --sp-16:4rem;
  --sp-20:5rem;  --sp-24:6rem;  --sp-32:8rem;

  --r-sm:6px; --r-md:9px; --r-lg:13px; --r-xl:18px; --r-full:999px;

  --shadow-pop:0 1px 2px rgb(11 18 32 / .06),0 12px 28px -8px rgb(11 18 32 / .14);
  --shadow-lift:0 1px 2px rgb(11 18 32 / .05),0 22px 48px -18px rgb(11 18 32 / .18);

  --dur-micro:120ms; --dur-sm:180ms; --dur-md:240ms; --dur-lg:340ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.64,0,.78,0);
  --ease-spring:linear(0,.0088 1.4%,.0344 2.9%,.1405 6.1%,.6039 15.5%,.7482 18.9%,.8557 22.3%,.9337 25.9%,.9887 29.8%,1.0219 33.9%,1.0353 38.6%,1.0294 45.1%,1.0002 61%,.9992 71.9%,1);

  --hdr-h:66px;
  --maxw:1180px;
  --maxw-prose:68ch;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-block-start:calc(var(--hdr-h) + 18px); /* WCAG 2.4.11 */
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--font-sans);
  font-size:var(--fs-base); line-height:var(--lh-base);
  color:var(--c-body); background:var(--c-page);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--c-brand-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

:focus-visible{
  outline:2px solid var(--c-brand-deep); outline-offset:3px; border-radius:3px;
}
::selection{background:var(--c-brand-tint);color:var(--c-ink)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--sp-4);top:-100px;z-index:200;background:var(--c-ink);
  color:#fff;padding:12px 18px;border-radius:var(--r-md);font-weight:600;font-size:var(--fs-sm)}
.skip:focus{top:12px}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4,h5{color:var(--c-ink);font-weight:600;text-wrap:balance}
h1{font-size:clamp(2.125rem,1.15rem + 3.9vw,var(--fs-5xl));line-height:var(--lh-5xl);
  letter-spacing:var(--ls-5xl);font-weight:640;font-variation-settings:"opsz" 32}
h2{font-size:clamp(1.6875rem,1.15rem + 1.9vw,var(--fs-3xl));line-height:var(--lh-3xl);
  letter-spacing:var(--ls-3xl);font-variation-settings:"opsz" 28}
h3{font-size:var(--fs-xl);line-height:var(--lh-xl);letter-spacing:var(--ls-xl)}
h4{font-size:var(--fs-lg);line-height:1.4;letter-spacing:var(--ls-lg)}
p{text-wrap:pretty}
strong,b{font-weight:600;color:var(--c-ink)}
code,kbd,samp{font-family:var(--font-mono);font-size:.88em;font-feature-settings:"calt" 0}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1,"zero" 1,"calt" 0}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--c-brand-deep);
}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:.55}
.lede{font-size:var(--fs-lg);line-height:1.58;color:var(--c-body);max-width:62ch}
.small{font-size:var(--fs-sm);color:var(--c-muted)}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-6)}
.sec{padding-block:var(--sp-24)}
.sec--tight{padding-block:var(--sp-16)}
.sec--surface{background:var(--c-surface);border-block:1px solid var(--c-line)}
.sec--ink{background:var(--c-ink);color:#C4CEDC}
.sec--ink h2,.sec--ink h3,.sec--ink h4{color:#fff}
.sec--ink .eyebrow{color:var(--c-brand-tint)}
.below-fold{content-visibility:auto;contain-intrinsic-size:auto 720px}

.sec-head{max-width:66ch;margin-bottom:var(--sp-12)}
.sec-head h2{margin-block:var(--sp-4) var(--sp-4)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-head--center .lede{margin-inline:auto}

.grid{display:grid;gap:var(--sp-5)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:center}
.split--wide{grid-template-columns:1.15fr 1fr}
.prose{max-width:var(--maxw-prose)}
.prose>*+*{margin-top:var(--sp-5)}
.prose h2{margin-top:var(--sp-12)}
.prose h3{margin-top:var(--sp-8)}
.prose ul{display:grid;gap:var(--sp-3)}
.prose ul li{padding-left:var(--sp-6);position:relative}
.prose ul li::before{content:"";position:absolute;left:6px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--c-brand)}
.prose ol{counter-reset:n;display:grid;gap:var(--sp-3)}
.prose ol li{counter-increment:n;padding-left:var(--sp-8);position:relative}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:.05em;
  font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--c-brand-deep);
  font-weight:500;border:1px solid var(--c-line-2);border-radius:var(--r-sm);
  width:22px;height:22px;display:grid;place-items:center}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:100;background:rgb(255 255 255 / .88);
  backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--c-line)}
.hdr__in{display:flex;align-items:center;gap:var(--sp-6);height:var(--hdr-h);
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-6)}
.logo{display:flex;align-items:center;gap:10px;font-weight:640;font-size:1.0625rem;
  letter-spacing:-.02em;color:var(--c-ink);flex:none}
.logo:hover{text-decoration:none}
.logo svg{width:27px;height:27px;flex:none}
.logo b{font-weight:640}
.logo i{font-style:normal;color:var(--c-muted);font-weight:500}

.nav{display:flex;align-items:center;gap:2px;margin-left:var(--sp-4)}
.nav__item{position:relative}
.nav__btn,.nav__lnk{display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-sm);font-weight:500;color:var(--c-body);
  padding:8px 11px;border-radius:var(--r-sm);white-space:nowrap;min-height:36px}
.nav__btn:hover,.nav__lnk:hover{color:var(--c-ink);background:var(--c-surface);text-decoration:none}
.nav__btn[aria-expanded=true]{color:var(--c-ink);background:var(--c-surface)}
.nav__btn svg{width:11px;height:11px;opacity:.6}
.nav__lnk[aria-current=page]{color:var(--c-ink);font-weight:600}

.mega{position:absolute;top:calc(100% + 9px);left:-8px;min-width:320px;
  background:var(--c-page);border:1px solid var(--c-line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);padding:var(--sp-2);display:none;z-index:110}
.nav__item.is-open .mega{display:block}
.mega a{display:grid;grid-template-columns:auto 1fr;gap:2px var(--sp-3);
  padding:10px 12px;border-radius:var(--r-md);color:var(--c-ink)}
.mega a:hover{background:var(--c-surface);text-decoration:none}
.mega a .t{font-size:var(--fs-sm);font-weight:600;grid-column:2}
.mega a .d{font-size:var(--fs-xs);color:var(--c-muted);grid-column:2;line-height:1.4}
.mega a .ic{grid-row:1/3;grid-column:1;width:30px;height:30px;border-radius:var(--r-sm);
  background:var(--c-surface);display:grid;place-items:center;color:var(--c-brand-deep)}
.mega a:hover .ic{background:var(--c-brand-soft)}

.hdr__end{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);flex:none}
.burger{display:none;width:40px;height:40px;border:1px solid var(--c-line);
  border-radius:var(--r-md);place-items:center;color:var(--c-ink)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:-.002em;
  padding:11px 18px;min-height:42px;border-radius:var(--r-md);
  border:1px solid transparent;white-space:nowrap;position:relative;isolation:isolate}
.btn:hover{text-decoration:none}
.btn svg{width:16px;height:16px;flex:none}
.btn--primary{background:var(--c-brand-deep);color:#fff}
.btn--primary:hover{background:var(--c-brand-dark)}
.btn--ghost{background:var(--c-page);color:var(--c-ink);border-color:var(--c-line-ui)}
.btn--ghost:hover{border-color:var(--c-ink-2);background:var(--c-surface)}
.btn--onink{background:#fff;color:var(--c-ink)}
.btn--onink:hover{background:var(--c-brand-tint)}
.btn--ghostink{border-color:rgb(255 255 255 / .28);color:#fff}
.btn--ghostink:hover{border-color:#fff;background:rgb(255 255 255 / .07)}
.btn--lg{font-size:var(--fs-base);padding:14px 24px;min-height:50px}
.btn--sm{font-size:var(--fs-xs);padding:7px 12px;min-height:32px}
.btn--block{width:100%}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background var(--dur-micro) linear,border-color var(--dur-micro) linear,
        transform var(--dur-sm) var(--ease-spring)}
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0)}
  .btn__arrow{transition:transform var(--dur-sm) var(--ease-spring)}
  .btn:hover .btn__arrow{transform:translateX(3px)}
}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;padding-block:var(--sp-24) var(--sp-20);overflow:hidden;
  background:linear-gradient(180deg,var(--c-page) 0%,var(--c-surface) 100%)}
.hero__grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--c-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--c-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 85% at 50% 0%,#000 12%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 85% at 50% 0%,#000 12%,transparent 72%);
  opacity:.55}
.hero__in{position:relative;text-align:center;max-width:900px;margin-inline:auto}
.hero h1{margin-block:var(--sp-5) var(--sp-6)}
.hero .lede{margin-inline:auto;font-size:clamp(1.0625rem,.95rem + .5vw,1.3125rem);max-width:60ch}
.hero__cta{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-8)}
.hero__meta{display:flex;gap:var(--sp-5);justify-content:center;flex-wrap:wrap;
  margin-top:var(--sp-6);font-size:var(--fs-sm);color:var(--c-muted)}
.hero__meta span{display:inline-flex;align-items:center;gap:7px}
.hero__meta svg{width:15px;height:15px;color:var(--c-brand)}

.relpill{display:inline-flex;align-items:center;gap:9px;padding:5px 6px 5px 12px;
  border:1px solid var(--c-line-ui);border-radius:var(--r-full);background:var(--c-page);
  font-size:var(--fs-xs);color:var(--c-body);font-weight:500}
.relpill b{font-family:var(--font-mono);font-weight:500;color:var(--c-brand-deep)}
.relpill .go{display:inline-flex;align-items:center;gap:4px;background:var(--c-surface);
  border-radius:var(--r-full);padding:3px 10px;color:var(--c-ink);font-weight:600}
.relpill:hover{text-decoration:none;border-color:var(--c-ink-2)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--c-brand);flex:none}
@media (prefers-reduced-motion:no-preference){
  .dot{box-shadow:0 0 0 0 var(--c-brand);animation:pulse 2.6s var(--ease-out) infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgb(13 148 136/.55)}70%,100%{box-shadow:0 0 0 7px rgb(13 148 136/0)}}
}

/* ---------------------------------------------------------------- app frame */
.appshot{border:1px solid var(--c-line-2);border-radius:var(--r-xl);overflow:hidden;
  background:var(--c-page);box-shadow:var(--shadow-lift)}
.appshot__bar{display:flex;align-items:center;gap:7px;padding:0 14px;height:36px;
  background:var(--c-surface);border-bottom:1px solid var(--c-line)}
.appshot__bar i{width:9px;height:9px;border-radius:50%;background:var(--c-line-2)}
.appshot__url{margin-left:10px;font-family:var(--font-mono);font-size:11px;color:var(--c-muted);
  background:var(--c-page);border:1px solid var(--c-line);border-radius:var(--r-sm);
  padding:3px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.appshot__body{display:grid;grid-template-columns:184px 1fr;min-height:340px}
.appshot__side{border-right:1px solid var(--c-line);padding:var(--sp-4) var(--sp-3);
  background:var(--c-surface);display:grid;align-content:start;gap:1px}
.appshot__side .grp{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--c-muted);font-weight:600;padding:12px 10px 6px}
.appshot__side a,.appshot__side span{display:flex;align-items:center;gap:9px;padding:7px 10px;
  border-radius:var(--r-sm);font-size:13px;color:var(--c-body);font-weight:500}
.appshot__side .on{background:var(--c-page);color:var(--c-ink);font-weight:600;
  box-shadow:0 1px 2px rgb(11 18 32/.05)}
.appshot__side svg{width:15px;height:15px;opacity:.8;flex:none}
.appshot__main{padding:var(--sp-5) var(--sp-6)}
.appshot__top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--sp-5);gap:var(--sp-4);flex-wrap:wrap}
.appshot__h{font-size:15px;font-weight:640;letter-spacing:-.012em;color:var(--c-ink)}
.appshot__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:var(--sp-5)}
.appshot__kpis>*{min-width:0}
.kpi .v{overflow:hidden;text-overflow:ellipsis}
.kpi{border:1px solid var(--c-line);border-radius:var(--r-md);padding:11px 13px}
.kpi .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);font-weight:600}
.kpi .v{font-family:var(--font-mono);font-size:19px;color:var(--c-ink);font-weight:500;
  letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.kpi .d{font-size:11px;margin-top:2px;color:var(--c-brand-deep);font-weight:500}

/* ---------------------------------------------------------------- tables */
.tbl{border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;background:var(--c-page)}
.tbl__scroll{overflow-x:auto}
.tbl table{font-size:var(--fs-sm);min-width:520px}
.tbl thead th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-muted);font-weight:600;padding:11px 16px;background:var(--c-surface);
  border-bottom:1px solid var(--c-line);white-space:nowrap}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--c-line);color:var(--c-body);vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--c-ink);font-weight:500}
.tbl .r,.tbl th.r{text-align:right;font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl--compare td:first-child{width:32%}
@media (prefers-reduced-motion:no-preference){
  .tbl tbody tr{transition:background var(--dur-micro) linear}
}
.tbl tbody tr:hover{background:var(--c-surface)}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:var(--r-sm);letter-spacing:.01em;white-space:nowrap}
.chip--ok{background:var(--c-ok-soft);color:var(--c-ok)}
.chip--warn{background:var(--c-warn-soft);color:var(--c-warn)}
.chip--bad{background:var(--c-bad-soft);color:var(--c-bad)}
.chip--mute{background:var(--c-surface-2);color:var(--c-muted)}

.yes,.no,.part{display:inline-flex;align-items:center;gap:7px;font-weight:500}
.yes{color:var(--c-ok)} .no{color:var(--c-muted)} .part{color:var(--c-warn)}
.yes svg,.no svg,.part svg{width:16px;height:16px;flex:none}

/* ---------------------------------------------------------------- cards */
.card{border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--sp-6);
  background:var(--c-page);position:relative}
.card h3{font-size:var(--fs-lg);letter-spacing:-.012em;margin-bottom:var(--sp-2)}
.card p{font-size:var(--fs-sm);line-height:1.6;color:var(--c-body)}
.card__ico{width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--c-surface);color:var(--c-brand-deep);margin-bottom:var(--sp-4);
  border:1px solid var(--c-line)}
.card__ico svg{width:21px;height:21px}
.card__more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-4);
  font-size:var(--fs-sm);font-weight:600;color:var(--c-brand-deep)}
.card__more svg{width:14px;height:14px}
.card--link::after{content:"";position:absolute;inset:0;border-radius:inherit}
@media (prefers-reduced-motion:no-preference){
  .card{transition:border-color var(--dur-sm) linear,transform var(--dur-md) var(--ease-out)}
  .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    box-shadow:var(--shadow-pop);opacity:0;transition:opacity var(--dur-md) linear}
  .card:hover,.card:focus-within{border-color:var(--c-line-2);transform:translateY(-2px)}
  .card:hover::after,.card:focus-within::after{opacity:1}
  .card:hover .card__ico{background:var(--c-brand-soft);border-color:var(--c-brand-tint)}
  .card__ico{transition:background var(--dur-sm) linear,border-color var(--dur-sm) linear}
  .card__more svg{transition:transform var(--dur-sm) var(--ease-spring)}
  .card:hover .card__more svg{transform:translateX(3px)}
}

.mini{display:flex;gap:var(--sp-4);align-items:flex-start}
.mini__ico{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--c-brand-soft);color:var(--c-brand-deep);flex:none}
.mini__ico svg{width:18px;height:18px}
.mini h3{font-size:var(--fs-base);font-weight:600;margin-bottom:4px;letter-spacing:-.008em;line-height:1.4}
.mini p{font-size:var(--fs-sm);color:var(--c-body);line-height:1.58}

/* ---------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-line);
  border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--c-page);padding:var(--sp-6) var(--sp-5)}
.sec--ink .stats{background:rgb(255 255 255/.12);border-color:rgb(255 255 255/.14)}
.sec--ink .stat{background:var(--c-ink)}
.stat .v{font-family:var(--font-mono);font-size:clamp(1.75rem,1.3rem + 1.5vw,2.375rem);
  font-weight:500;color:var(--c-ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  line-height:1.05}
.sec--ink .stat .v{color:#fff}
.stat .k{font-size:var(--fs-sm);color:var(--c-muted);margin-top:var(--sp-2);line-height:1.45}
.sec--ink .stat .k{color:#96A5B8}

/* ---------------------------------------------------------------- steps */
.steps{counter-reset:s;display:grid;gap:var(--sp-4)}
.step{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);
  border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);
  background:var(--c-page)}
.step__n{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:500;
  background:var(--c-ink);color:#fff}
.step h3{font-size:var(--fs-base);margin-bottom:5px;line-height:1.4}
.step p{font-size:var(--fs-sm);color:var(--c-body)}
.step code{background:var(--c-surface);border:1px solid var(--c-line);border-radius:4px;
  padding:2px 6px;font-size:12.5px;color:var(--c-ink)}

/* ---------------------------------------------------------------- pricing */
.price-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:stretch}
.price-card{border:1px solid var(--c-line-2);border-radius:var(--r-xl);padding:var(--sp-8);
  background:var(--c-page);box-shadow:var(--shadow-pop)}
.price-card__amt{display:flex;align-items:baseline;gap:8px;margin-block:var(--sp-3) var(--sp-2)}
.price-card__amt .n{font-family:var(--font-mono);font-size:4rem;font-weight:500;
  letter-spacing:-.04em;color:var(--c-ink);line-height:1}
.price-card__amt .u{font-size:var(--fs-base);color:var(--c-muted)}
.price-list{display:grid;gap:var(--sp-3);margin-block:var(--sp-6)}
.price-list li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);
  font-size:var(--fs-sm);color:var(--c-body);align-items:start}
.price-list svg{width:17px;height:17px;color:var(--c-brand-deep);margin-top:2px;flex:none}
.price-list b{color:var(--c-ink)}

.calc{border:1px solid var(--c-line);border-radius:var(--r-xl);background:var(--c-surface);
  padding:var(--sp-8);display:flex;flex-direction:column;justify-content:flex-start}
.calc .calc__out{margin-top:auto}
.calc__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  margin-bottom:var(--sp-6)}
.stepper{display:flex;align-items:center;gap:2px;border:1px solid var(--c-line-ui);
  border-radius:var(--r-md);background:var(--c-page);padding:3px}
.stepper button{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--c-ink);font-size:18px;line-height:1}
.stepper button:hover:not(:disabled){background:var(--c-surface)}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper output{min-width:52px;text-align:center;font-family:var(--font-mono);font-size:1.125rem;
  font-weight:500;color:var(--c-ink);font-variant-numeric:tabular-nums}
.calc__out{border-top:1px solid var(--c-line-2);padding-top:var(--sp-6)}
.calc__total{display:flex;align-items:baseline;gap:8px}
.calc__total .n{font-family:var(--font-mono);font-size:3rem;font-weight:500;letter-spacing:-.035em;
  color:var(--c-ink);line-height:1;font-variant-numeric:tabular-nums;min-width:5ch}
.calc__note{font-size:var(--fs-sm);color:var(--c-muted);margin-top:var(--sp-3)}

.defbox{border-left:3px solid var(--c-brand);background:var(--c-brand-soft);
  padding:var(--sp-5) var(--sp-6);border-radius:0 var(--r-md) var(--r-md) 0}
.defbox h4{font-size:var(--fs-base);margin-bottom:var(--sp-2);line-height:1.4}
.defbox p{font-size:var(--fs-sm);color:var(--c-body)}
.defbox p+p{margin-top:var(--sp-2)}

.callout{border:1px solid var(--c-line);border-left:3px solid var(--c-ink);
  background:var(--c-surface);padding:var(--sp-5) var(--sp-6);border-radius:0 var(--r-md) var(--r-md) 0}
.callout--warn{border-left-color:var(--c-warn);background:var(--c-warn-soft);border-color:#F5E4CC}
.callout--ok{border-left-color:var(--c-brand);background:var(--c-brand-soft);border-color:var(--c-brand-tint)}
.callout h3,.callout__h{font-size:var(--fs-base);margin-bottom:var(--sp-2);line-height:1.4;letter-spacing:-.006em}
.callout p{font-size:var(--fs-sm)}
.callout p+p{margin-top:var(--sp-3)}

/* ---------------------------------------------------------------- faq */
.faq{border-top:1px solid var(--c-line)}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  padding:var(--sp-5) 0;cursor:pointer;list-style:none;font-weight:600;color:var(--c-ink);
  font-size:var(--fs-base);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--c-brand-deep)}
.faq summary .pm{width:22px;height:22px;flex:none;border:1px solid var(--c-line-ui);
  border-radius:var(--r-sm);display:grid;place-items:center;color:var(--c-muted);position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:currentColor}
.faq summary .pm::before{width:9px;height:1.5px}
.faq summary .pm::after{width:1.5px;height:9px}
.faq details[open] summary .pm::after{opacity:0}
.faq__a{padding-bottom:var(--sp-6);max-width:76ch}
.faq__a p{font-size:var(--fs-sm);color:var(--c-body)}
.faq__a p+p{margin-top:var(--sp-3)}
.faq__a ul{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.faq__a li{font-size:var(--fs-sm);padding-left:var(--sp-5);position:relative}
.faq__a li::before{content:"";position:absolute;left:5px;top:.62em;width:4px;height:4px;
  border-radius:50%;background:var(--c-brand)}
@media (prefers-reduced-motion:no-preference){
  .faq summary{transition:color var(--dur-micro) linear}
  .faq summary .pm::after{transition:opacity var(--dur-sm) var(--ease-out)}
  .faq details[open] .faq__a{animation:fadeUp var(--dur-md) var(--ease-out) both}
  @keyframes fadeUp{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* ---------------------------------------------------------------- timeline */
.tl{display:grid;gap:0;position:relative}
.tl__item{display:grid;grid-template-columns:150px 1fr;gap:var(--sp-8);
  padding-block:var(--sp-8);border-top:1px solid var(--c-line)}
.tl__meta .v{font-family:var(--font-mono);font-size:var(--fs-base);font-weight:500;color:var(--c-ink)}
.tl__meta .d{font-size:var(--fs-xs);color:var(--c-muted);margin-top:3px;
  font-variant-numeric:tabular-nums}
.tl__body h3,.tl__h{font-size:var(--fs-lg);margin-bottom:var(--sp-3);line-height:1.35;letter-spacing:-.008em}
.tl__body ul{display:grid;gap:var(--sp-2)}
.tl__body li{font-size:var(--fs-sm);padding-left:var(--sp-6);position:relative;color:var(--c-body)}
.tl__body li::before{content:"";position:absolute;left:4px;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--c-line-2)}
.tl__body li.new::before{background:var(--c-brand)}
.tl__body li.fix::before{background:var(--c-warn)}
.tl__body li.sec::before{background:var(--c-bad)}

/* ---------------------------------------------------------------- form */
.form{display:grid;gap:var(--sp-5)}
.field{display:grid;gap:7px}
.field label{font-size:var(--fs-sm);font-weight:600;color:var(--c-ink)}
.field .hint{font-size:var(--fs-xs);color:var(--c-muted);font-weight:400}
.field input,.field textarea,.field select{
  width:100%;padding:11px 14px;border:1px solid var(--c-line-ui);border-radius:var(--r-md);
  background:var(--c-page);color:var(--c-ink);font-size:var(--fs-sm);min-height:44px}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--c-muted);opacity:1}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--c-brand-deep);outline-offset:1px;border-color:transparent}
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice>span{display:grid;grid-template-columns:auto 1fr;gap:3px var(--sp-3);
  border:1px solid var(--c-line-ui);border-radius:var(--r-md);padding:13px 15px;cursor:pointer;
  background:var(--c-page);min-height:56px;align-content:center}
.choice .t{font-size:var(--fs-sm);font-weight:600;color:var(--c-ink);grid-column:2;line-height:1.35}
.choice .d{font-size:var(--fs-xs);color:var(--c-muted);grid-column:2;line-height:1.42}
.choice .ic{grid-row:1/3;grid-column:1;width:32px;height:32px;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--c-surface);color:var(--c-brand-deep);
  align-self:center;border:1px solid var(--c-line);flex:none}
.choice .ic svg{width:16px;height:16px}
.choice input:checked+span{border-color:var(--c-brand-deep);background:var(--c-brand-soft);
  box-shadow:inset 0 0 0 1px var(--c-brand-deep)}
.choice input:checked+span .ic{background:var(--c-page);border-color:var(--c-brand-tint)}
.choice input:focus-visible+span{outline:2px solid var(--c-brand-deep);outline-offset:2px}
.choice:hover>span{border-color:var(--c-ink-2)}
@media (prefers-reduced-motion:no-preference){
  .choice>span{transition:border-color var(--dur-micro) linear,background var(--dur-micro) linear}
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);font-size:var(--fs-sm);display:none}
.formmsg.ok{display:block;background:var(--c-brand-soft);color:var(--c-brand-dark);
  border:1px solid var(--c-brand-tint)}
.formmsg.err{display:block;background:var(--c-bad-soft);color:var(--c-bad);border:1px solid #F5C6C6}
.only-when{display:none}
.only-when.on{display:grid}

/* ---------------------------------------------------------------- misc */
.crumbs{display:flex;gap:8px;align-items:center;font-size:var(--fs-xs);color:var(--c-muted);
  padding-top:var(--sp-6);flex-wrap:wrap}
.crumbs a{color:var(--c-muted)}
.crumbs a:hover{color:var(--c-ink)}
.crumbs svg{width:12px;height:12px;opacity:.5}

.subnav{position:sticky;top:var(--hdr-h);z-index:60;background:rgb(255 255 255/.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-line)}
.subnav__in{display:flex;gap:2px;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--sp-6);overflow-x:auto;scrollbar-width:none}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{padding:13px 13px;font-size:var(--fs-sm);font-weight:500;color:var(--c-muted);
  white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--c-ink);text-decoration:none}
.subnav a.on{color:var(--c-ink);border-bottom-color:var(--c-brand);font-weight:600}

.pillrow{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);font-weight:500;
  color:var(--c-body);border:1px solid var(--c-line);border-radius:var(--r-full);
  padding:7px 13px;background:var(--c-page)}
.pill svg{width:14px;height:14px;color:var(--c-brand-deep)}

.cta-band{background:var(--c-ink);border-radius:var(--r-xl);padding:var(--sp-16) var(--sp-12);
  text-align:center;position:relative;overflow:hidden}
.cta-band__grid{position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:linear-gradient(rgb(255 255 255/.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgb(255 255 255/.5) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(90% 100% at 50% 0%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(90% 100% at 50% 0%,#000,transparent 70%)}
.cta-band>*{position:relative}
.cta-band h2{color:#fff;max-width:22ch;margin-inline:auto}
.cta-band p{color:#A9B7C9;max-width:56ch;margin:var(--sp-4) auto 0;font-size:var(--fs-lg)}
.cta-band .hero__cta{margin-top:var(--sp-8)}
.cta-band .small{color:#7E8FA5;margin-top:var(--sp-5)}

.quote{border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--sp-8);
  background:var(--c-page)}
.quote blockquote{font-size:var(--fs-lg);line-height:1.55;color:var(--c-ink);
  letter-spacing:-.008em;text-wrap:pretty}
.quote figcaption{margin-top:var(--sp-5);font-size:var(--fs-sm);color:var(--c-muted);
  display:flex;align-items:center;gap:var(--sp-3)}
.quote .av{width:36px;height:36px;border-radius:50%;background:var(--c-surface-2);
  display:grid;place-items:center;font-weight:600;color:var(--c-ink);font-size:13px;flex:none}
.quote cite{font-style:normal;color:var(--c-ink);font-weight:600}
.quote .metric{font-family:var(--font-mono);font-size:2.25rem;font-weight:500;
  color:var(--c-brand-deep);letter-spacing:-.03em;line-height:1;margin-bottom:var(--sp-4)}

.code{background:var(--c-ink);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);
  overflow-x:auto;border:1px solid var(--c-ink-2)}
.code pre{font-family:var(--font-mono);font-size:13px;line-height:1.75;color:#C9D6E4;
  white-space:pre;font-feature-settings:"calt" 0}
.code .c{color:#6C8296} .code .k{color:#5EEAD4} .code .s{color:#FCD9A8}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--c-ink);color:#8FA0B4;padding-block:var(--sp-20) var(--sp-10);margin-top:0}
.ftr__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--sp-10);
  padding-bottom:var(--sp-12);border-bottom:1px solid rgb(255 255 255/.1)}
.ftr__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-10)}
.ftr__brand .logo{color:#fff;margin-bottom:var(--sp-4)}
.ftr__brand .logo i{color:#7E8FA5}
.ftr__brand p{font-size:var(--fs-sm);max-width:34ch;line-height:1.6}
.ftr h5,.ftr__h{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  font-weight:600;margin-bottom:var(--sp-4);line-height:1.3}
.ftr ul{display:grid;gap:10px}
.ftr a{color:#8FA0B4;font-size:var(--fs-sm)}
.ftr a:hover{color:#fff;text-decoration:none}
.ftr__bot{display:flex;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;
  padding-top:var(--sp-8);font-size:var(--fs-xs);color:#8496AE}
.ftr__bot a{font-size:var(--fs-xs)}
.ftr__ver{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  border:1px solid rgb(255 255 255/.14);border-radius:var(--r-full);padding:4px 11px;color:#A9B7C9}

/* ---------------------------------------------------------------- motion */
/* Default state is always the finished state. Motion is added, never subtracted. */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:revealIn 1ms linear both;animation-timeline:view();
      animation-range:entry 8% cover 26%}
  }
  @supports not (animation-timeline:view()){
    .js .reveal{opacity:0;transform:translateY(10px);
      transition:opacity var(--dur-md) linear,transform var(--dur-md) var(--ease-out)}
    .js .reveal.is-in{opacity:1;transform:none}
  }
  .reveal-g>*{--d:calc(var(--i,0) * 55ms)}
  @supports (animation-timeline:view()){
    .reveal-g>*{animation:revealIn 1ms linear both;animation-timeline:view();
      animation-range:entry 4% cover 22%}
  }
  @supports not (animation-timeline:view()){
    .js .reveal-g>*{opacity:0;transform:translateY(10px);
      transition:opacity var(--dur-md) linear var(--d),transform var(--dur-md) var(--ease-out) var(--d)}
    .js .reveal-g.is-in>*{opacity:1;transform:none}
  }
}
@keyframes revealIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the logo gimbals tilt on hover: the mark is a gyroscope, so it should behave like one */
.gyro .gy-a,.gyro .gy-b{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .gyro .gy-a,.gyro .gy-b{transition:transform 520ms var(--ease-spring),opacity 260ms linear}
  .logo:hover .gyro .gy-a,.logo:focus-visible .gyro .gy-a{transform:rotate(26deg);opacity:.85}
  .logo:hover .gyro .gy-b,.logo:focus-visible .gyro .gy-b{transform:rotate(-26deg);opacity:.85}
}

/* Icons: one grid, one draw keyframe, parts staggered by --i.
   The hidden start state is scoped to containers the observer actually watches
   (.card, .mini, .step). An icon used anywhere else - the nav, a form, prose -
   renders statically, because an icon that never animates in is an icon nobody sees. */
.ico [data-part]{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .card .ico [data-part],
  .mini .ico [data-part],
  .step .ico [data-part]{
    opacity:0;transform:translateY(3px) scale(.96);
    --d:calc(var(--i,0) * 55ms);
    transition:opacity var(--dur-sm) linear var(--d),
               transform var(--dur-md) var(--ease-spring) var(--d)}
  .card.is-in .ico [data-part], .card:hover .ico [data-part], .card:focus-within .ico [data-part],
  .mini.is-in .ico [data-part],
  .step.is-in .ico [data-part]{opacity:1;transform:none}

  .card .ico [data-draw],
  .mini .ico [data-draw],
  .step .ico [data-draw]{stroke-dasharray:1;stroke-dashoffset:1}
  .card.is-in .ico [data-draw],
  .mini.is-in .ico [data-draw],
  .step.is-in .ico [data-draw]{animation:draw 620ms var(--ease-out) forwards;
    animation-delay:calc(var(--i,0) * 80ms)}

  .card:hover .ico [data-spin],
  .card:focus-within .ico [data-spin]{animation:spin 2.4s linear infinite}
}
/* Without JS the observer never fires, so nothing may depend on .is-in. */
html:not(.js) .ico [data-part]{opacity:1 !important;transform:none !important}
html:not(.js) .ico [data-draw]{stroke-dashoffset:0 !important}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{rotate:360deg}}
/* Without JS the observer never fires, so make sure icons are visible anyway. */
html:not(.js) .ico [data-part]{opacity:1;transform:none}
html:not(.js) .ico [data-draw]{stroke-dashoffset:0}

/* explicit user override, persisted; also satisfies WCAG 2.3.3 (AAA) */
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{
  animation-duration:.01ms !important;animation-iteration-count:1 !important;
  transition-duration:.01ms !important;scroll-behavior:auto !important}
html[data-motion="reduce"] .reveal,html[data-motion="reduce"] .reveal-g>*,
html[data-motion="reduce"] .ico [data-part]{opacity:1 !important;transform:none !important}
html[data-motion="reduce"] .ico [data-draw]{stroke-dashoffset:0 !important}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-g>*,.ico [data-part]{opacity:1 !important;transform:none !important}
  .ico [data-draw]{stroke-dashoffset:0 !important}
  .dot{animation:none !important}
}

.motion-toggle{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);
  color:#8FA0B4;border:1px solid rgb(255 255 255/.14);border-radius:var(--r-full);
  padding:6px 12px;min-height:32px}
.motion-toggle:hover{color:#fff;border-color:rgb(255 255 255/.3)}
.motion-toggle svg{width:14px;height:14px}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .split{gap:var(--sp-10)}
  .appshot__body{grid-template-columns:160px 1fr}
}
@media (max-width:960px){
  .nav,.hdr__end .btn--ghost{display:none}
  .burger{display:grid}
  .ftr__top{grid-template-columns:1fr;gap:var(--sp-10)}
  .ftr__cols{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .price-hero{grid-template-columns:1fr}
  .split,.split--wide{grid-template-columns:1fr}
  .appshot__kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  :root{--sp-24:4rem;--sp-20:3.5rem;--sp-16:3rem}
  .g-3,.g-2{grid-template-columns:1fr}
  .choices{grid-template-columns:1fr}
  .tl__item{grid-template-columns:1fr;gap:var(--sp-3)}
  .appshot__body{grid-template-columns:1fr}
  .appshot__side{display:none}
  .appshot__main{padding:var(--sp-4)}
  .appshot__kpis{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi{padding:9px 10px}
  .kpi .v{font-size:16px}
  .cta-band{padding:var(--sp-12) var(--sp-6)}
}
@media (max-width:640px){
  .wrap{padding-inline:var(--sp-5)}
  .g-4,.ftr__cols{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .price-card,.calc{padding:var(--sp-6)}
  .price-card__amt .n{font-size:3.25rem}
  .hero{padding-block:var(--sp-12) var(--sp-12)}
  .hero .lede{font-size:1rem;line-height:1.55}
  .hero h1{margin-block:var(--sp-4) var(--sp-5)}
  .hero__cta{gap:var(--sp-2);margin-top:var(--sp-6)}
  .hero__cta .btn{width:100%}
  .hero__meta{gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-5);font-size:var(--fs-xs)}
  .hero__grid{opacity:.4;background-size:44px 44px}
  .relpill{font-size:11px;padding:4px 5px 4px 11px;max-width:100%}
  .relpill .go span{display:none}
  .relpill .go{padding:3px 7px}
  .step{grid-template-columns:1fr;gap:var(--sp-3)}
  .subnav a{padding:11px 10px;font-size:var(--fs-xs)}
  .quote{padding:var(--sp-6)}
  .quote .metric{font-size:1.875rem}
}

/* ---------------------------------------------------------------- mobile nav */
.mnav{position:fixed;inset:var(--hdr-h) 0 0;background:var(--c-page);z-index:99;
  overflow-y:auto;padding:var(--sp-6) var(--sp-5) var(--sp-16);display:none}
.mnav.on{display:block}
body.locked{overflow:hidden}
.mnav h5{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--c-muted);
  font-weight:600;margin:var(--sp-6) 0 var(--sp-3)}
.mnav a{display:block;padding:12px 0;font-size:var(--fs-base);font-weight:500;
  color:var(--c-ink);border-bottom:1px solid var(--c-line);min-height:44px}
.mnav a:hover{text-decoration:none;color:var(--c-brand-deep)}
.mnav .btn{margin-top:var(--sp-6)}

@media print{
  .hdr,.ftr,.subnav,.cta-band,.mnav{display:none}
  body{color:#000;font-size:11pt}
}