/* V.E.Y.R marketing site - design system v4 calm violet (2026-09-26/27 premium pass: AA contrast, focus rings,
   theme-aware shots + videos, parallax de-jank, no card backdrop blur). Earlier history: v3 ("signal", 2026-09-18 reskin to the wiz.io language).
   One file, no build step. Direction: enterprise-premium via restraint - deep-space base, ONE
   disciplined accent (cyan), clean hairline cards instead of heavy glass, soft diffused shadows
   instead of glow-everywhere, tight bold display type, generous section rhythm, calm motion
   (reduced-motion safe). Tokens first - every page uses ONLY these.

   This is a RESKIN of the prior "aurora glass" system (v2), not a rebuild: the shell markup
   (nav/footer/hero/card/split/etc. class names), the iOS Safari touch-event stacking-context fix,
   the phone-width overflow fixes (min-width:0 on grid/flex items), and reveal.js's behavior
   contract are all preserved unchanged - only the visual tokens and a few component treatments
   changed. See core/decisions/log.md in the jarvis repo for the design-direction record. */

/* Self-hosted typeface (Inter variable, one file, all weights 100-900). SELF-HOSTED woff2 only - no
   external font fetch (the Pages CSP blocks third-party hosts, and a self-host is faster + private).
   font-display:swap so text paints immediately in the fallback stack, then swaps with no layout jump
   (Inter's metrics are near the -apple-system fallback). */
@font-face{
  font-family:'InterVar';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/InterVariable.woff2') format('woff2');
}
@font-face{
  font-family:'InterVar';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/InterVariable-Italic.woff2') format('woff2');
}

:root{
  /* ---- design system v5 "iris" (2026-09-30 premium palette pass). Purple-led and blue-free: a deep
     violet-ink base (never flat black, never grey), hairlines tinted with the brand violet instead of
     white, soft off-white text, ONE iris accent for marks and links, and ONE gradient (iris into
     orchid) reserved for primary actions and display highlights. The same tokens are redefined for
     the light theme below, so no component knows which theme it is in. Every value here is proven by
     ui/tools/site-audit/palette.mjs: WCAG AA for every text pair in both themes, no blue hue, and no
     colour literal anywhere outside these blocks (node --test ui/tools/site-palette.test.mjs). ---- */
  --bg:#0b0916; --bg2:#100d1e;
  --card:rgba(24,19,44,.74); --card-solid:#16122a;
  --line:rgba(186,168,255,.10); --line2:rgba(186,168,255,.19);
  --tx:#f3f0fc; --dim:#b6aed2; --faint:#948cb3;
  --ac:#a78bfa; --ac2:#c4b5fd;
  --ac-soft:rgba(167,139,250,.13); --ac-line:rgba(167,139,250,.36);
  --grad:linear-gradient(100deg,#e2d9ff 0%,#a78bfa 50%,#e08cf2 100%);
  --btn:linear-gradient(135deg,#7548e8 0%,#6a3fe0 50%,#9a2dd4 100%); --btn-1:#7548e8; --btn-2:#9a2dd4; --btn-ink:#ffffff;
  --ic-bg:linear-gradient(150deg,rgba(167,139,250,.20) 0%,rgba(224,140,242,.06) 100%);
  --glow-1:#6d46e0; --glow-2:#a324c4;
  --em:#5fd4a4; --amber:#e8c06a; --rose:#f297ab;
  --dot-r:rgba(251,113,133,.6); --dot-y:rgba(251,191,36,.6); --dot-g:rgba(52,211,153,.6);
  --fill:rgba(186,168,255,.035); --fill2:rgba(186,168,255,.06); --btn-hi:rgba(255,255,255,.22);
  --shadow:0 22px 50px -12px rgba(0,0,0,.5); --shadow-lg:0 36px 90px -16px rgba(0,0,0,.62);
  --shadow-btn:0 14px 34px -8px rgba(122,72,232,.6);
  --overlay:rgba(8,6,16,.92); --nav-bg:rgba(11,9,22,.78); --nav-bg2:rgba(11,9,22,.97);
  --input:rgba(0,0,0,.3);
  --sel:rgba(167,139,250,.32); --sky-op:.34;
  --r-lg:20px; --r:14px; --r-sm:10px;
  --w:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark;
}
/* light theme: follows the OS unless the visitor picked one (data-theme, remembered in localStorage).
   The two light blocks must stay identical - palette.mjs fails the build if they drift. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#fbfaff; --bg2:#f3f0fb;
    --card:rgba(255,255,255,.86); --card-solid:#ffffff;
    --line:rgba(60,30,140,.09); --line2:rgba(60,30,140,.17);
    --tx:#16121f; --dim:#4b4462; --faint:#645d7f;
    --ac:#5b36d4; --ac2:#4a28b8;
    --ac-soft:rgba(91,54,212,.08); --ac-line:rgba(91,54,212,.28);
    --grad:linear-gradient(100deg,#4a28b8 0%,#6d46e0 48%,#a324c4 100%);
    --btn:linear-gradient(135deg,#6a3fe0 0%,#5b36d4 52%,#8a2bc9 100%); --btn-1:#6a3fe0; --btn-2:#8a2bc9; --btn-ink:#ffffff;
    --ic-bg:linear-gradient(150deg,rgba(109,70,224,.12) 0%,rgba(163,36,196,.05) 100%);
    --glow-1:#8b6cf0; --glow-2:#d38bf0;
    --em:#177a52; --amber:#95650f; --rose:#be3a5b;
    --dot-r:rgba(225,29,72,.5); --dot-y:rgba(217,119,6,.5); --dot-g:rgba(5,150,105,.5);
    --fill:rgba(60,30,140,.03); --fill2:rgba(60,30,140,.055); --btn-hi:rgba(255,255,255,.28);
    --shadow:0 18px 44px -12px rgba(46,26,120,.16); --shadow-lg:0 34px 80px -18px rgba(46,26,120,.24);
    --shadow-btn:0 12px 30px -8px rgba(91,54,212,.45);
    --overlay:rgba(251,250,255,.94); --nav-bg:rgba(251,250,255,.82); --nav-bg2:rgba(251,250,255,.98);
    --input:#ffffff;
    --sel:rgba(91,54,212,.18); --sky-op:.22;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#fbfaff; --bg2:#f3f0fb;
  --card:rgba(255,255,255,.86); --card-solid:#ffffff;
  --line:rgba(60,30,140,.09); --line2:rgba(60,30,140,.17);
  --tx:#16121f; --dim:#4b4462; --faint:#645d7f;
  --ac:#5b36d4; --ac2:#4a28b8;
  --ac-soft:rgba(91,54,212,.08); --ac-line:rgba(91,54,212,.28);
  --grad:linear-gradient(100deg,#4a28b8 0%,#6d46e0 48%,#a324c4 100%);
  --btn:linear-gradient(135deg,#6a3fe0 0%,#5b36d4 52%,#8a2bc9 100%); --btn-1:#6a3fe0; --btn-2:#8a2bc9; --btn-ink:#ffffff;
  --ic-bg:linear-gradient(150deg,rgba(109,70,224,.12) 0%,rgba(163,36,196,.05) 100%);
  --glow-1:#8b6cf0; --glow-2:#d38bf0;
  --em:#177a52; --amber:#95650f; --rose:#be3a5b;
  --dot-r:rgba(225,29,72,.5); --dot-y:rgba(217,119,6,.5); --dot-g:rgba(5,150,105,.5);
  --fill:rgba(60,30,140,.03); --fill2:rgba(60,30,140,.055); --btn-hi:rgba(255,255,255,.28);
  --shadow:0 18px 44px -12px rgba(46,26,120,.16); --shadow-lg:0 34px 80px -18px rgba(46,26,120,.24);
  --shadow-btn:0 12px 30px -8px rgba(91,54,212,.45);
  --overlay:rgba(251,250,255,.94); --nav-bg:rgba(251,250,255,.82); --nav-bg2:rgba(251,250,255,.98);
  --input:#ffffff;
  --sel:rgba(91,54,212,.18); --sky-op:.22;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{color:var(--tx);font-family:'InterVar','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-optical-sizing:auto;font-feature-settings:'cv05','cv08','ss03';letter-spacing:-.011em;
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh;
  /* isolate body as its OWN stacking context so the z-index layering below is deterministic on iOS
     Safari - see nav/main/footer z-index and .sky below (the real mobile-tap root cause, found
     2026-09-14, preserved through the v3 reskin - it is a structural fix, not a visual one). */
  position:relative;isolation:isolate}
img{max-width:100%;display:block}
picture{display:block}
h1,h2,h3{text-wrap:balance}
.lede,.sub,.card p,.step p{text-wrap:pretty}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:var(--r-sm);background:var(--btn);color:var(--btn-ink);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
/* keyboard focus: one visible ring, only for keyboard users (:focus-visible), never a click halo */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ac);outline-offset:3px;border-radius:6px}
.btn:focus-visible,.nav-cta:focus-visible{outline-offset:4px}
a{color:inherit;text-decoration:none}
/* an inline <code> with a long unspaced URL (install instructions) must wrap, not push the page wide */
code{overflow-wrap:break-word;word-break:break-word}
::selection{background:var(--sel)}

/* ---- background field: ONE restrained radial glow, not three drifting rainbow blobs ----
   wiz's hero uses a subtle gradient/glow behind content, not a full-bleed animated aurora. This
   keeps the calm-motion field (still pure CSS, still position:fixed) but trims it to a single soft
   cyan glow anchored top-center, low opacity, minimal drift - "premium, not busy".
   STRUCTURAL NOTE (preserved from v2): a blurred position:fixed layer on iOS Safari (a) gets its
   own compositing layer and (b) can composite ABOVE sibling content regardless of z-index:-1,
   swallowing touch events even with pointer-events:none. Fix: give nav/main/footer a real positive
   stacking context (z-index:1) inside the isolated body, and pin this field to z-index:0 so it can
   never escape behind content into the touch plane. */
.sky{position:fixed;inset:-10% -20% auto -20%;height:70vh;z-index:0;filter:blur(90px);opacity:var(--sky-op);pointer-events:none}
.sky i{position:absolute;border-radius:50%;animation:drift 22s ease-in-out infinite alternate}
.sky i:nth-child(1){width:46vw;height:46vw;left:14%;top:-18%;background:radial-gradient(circle,var(--glow-1),transparent 66%)}
.sky i:nth-child(2){width:32vw;height:32vw;right:6%;top:0;background:radial-gradient(circle,var(--glow-2),transparent 68%);opacity:.7;animation-delay:-9s}
.sky i:nth-child(3){display:none} /* third blob dropped - one restrained glow, not a field of them */
@keyframes drift{to{transform:translate(2vw,1.5vh) scale(1.06)}}
@media(max-width:640px){.sky{filter:blur(56px);height:56vh}}

/* ---- nav (identical every page) ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent}
nav.frost{background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line)}
.nav-in{max-width:var(--w);margin:0 auto;display:flex;align-items:center;gap:26px;padding:16px 24px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:.1em}
.logo img{width:28px;height:28px;border-radius:7px}
.logo b{color:var(--tx)}
.nav-links{order:1;display:flex;align-items:center;gap:24px;margin-left:auto}
.nav-links a{font-size:13.5px;font-weight:600;color:var(--dim);transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:var(--tx)}
.nav-cta{background:var(--btn);color:var(--btn-ink)!important;font-weight:700;padding:9px 20px;border-radius:var(--r-sm);
  box-shadow:0 1px 0 var(--btn-hi) inset;transition:transform .15s,box-shadow .15s,filter .15s}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:var(--shadow-btn),0 1px 0 var(--btn-hi) inset}
.nav-toggle{display:none;margin-left:auto;width:42px;height:42px;border-radius:var(--r-sm);background:var(--fill2);
  border:1px solid var(--line2);color:var(--tx);font-size:19px;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
.nav-toggle svg{width:20px;height:20px;display:block;margin:auto}
.nav-toggle:hover,.nav-toggle[aria-expanded=true]{background:var(--ac-soft);border-color:var(--ac)}

/* ---- theme toggle (nav): one quiet control, same spot on every page ---- */
.theme-toggle{order:2;flex:none;width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--fill);
  color:var(--dim);display:grid;place-items:center;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.theme-toggle:hover{color:var(--tx);border-color:var(--ac);background:var(--ac-soft)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme="dark"]) .theme-toggle .i-moon{display:none}
}

/* ---- shell / rhythm ---- */
/* z-index:1 + position:relative puts ALL interactive content above the .sky field (z-index:0 in the
   isolated body) so a filtered fixed layer can never sit on the touch plane on iOS - see .sky above. */
main{max-width:var(--w);margin:0 auto;padding:0 24px;position:relative;z-index:1}
/* wiz-style section rhythm: generous, slightly wider than the old 88px so pacing breathes more. */
section{padding:112px 0}
.hero{display:flex;flex-direction:column;justify-content:center;padding:172px 0 80px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:999px;
  padding:7px 16px;background:var(--fill);width:max-content}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ac);position:relative;box-shadow:0 0 10px var(--ac)}
.eyebrow .dot::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--ac);
  animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2.4);opacity:0}}
h1{font-size:clamp(38px,6.4vw,76px);line-height:1.04;font-weight:700;letter-spacing:-.03em;margin:22px 0 20px}
h1 .grad,.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lede{font-size:clamp(16px,1.9vw,19px);color:var(--dim);max-width:640px}
h2{font-size:clamp(30px,4.4vw,50px);font-weight:700;letter-spacing:-.032em;line-height:1.06}
h3{font-size:18px;font-weight:700;letter-spacing:-.008em}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;color:var(--ac)}
.sub{color:var(--dim);font-size:17px;line-height:1.6;max-width:640px;margin-top:16px}

/* ---- buttons: subtle rounded-rect, not full pill - solid accent primary, clean ghost secondary ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:var(--r-sm);
  font-weight:700;font-size:14.5px;color:var(--btn-ink);background:var(--btn);border:0;cursor:pointer;
  box-shadow:0 1px 0 var(--btn-hi) inset,0 8px 22px -12px var(--btn-2);transition:transform .18s var(--ease),filter .18s,box-shadow .18s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:var(--shadow-btn),0 1px 0 var(--btn-hi) inset}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--fill);border:1px solid var(--line2);color:var(--tx);box-shadow:none;font-weight:600}
.btn.ghost:hover{border-color:var(--ac-line);background:var(--ac-soft);color:var(--tx);filter:none;box-shadow:none}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ---- cards: clean hairline surfaces, minimal blur, soft diffused shadow on hover (not glow) ---- */
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--shadow)}
/* .hairline keeps its name (many pages reference it) but now means "accent edge on hover", not a
   gradient-mask hairline - a single flat accent border reads calmer than a rainbow ring. */
.card.hairline:hover{border-color:var(--ac-line);box-shadow:var(--shadow),0 0 0 1px var(--ac-soft)}
.card .ic{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--ic-bg);border:1px solid var(--ac-line);box-shadow:0 1px 0 var(--btn-hi) inset;
  margin-bottom:16px;font-size:18px;color:var(--ac)}
/* the card glyphs are lucide line icons inlined as SVG (the console's own icon set, same 2px stroke) */
.ic svg{width:20px;height:20px;display:block}
.card p{color:var(--dim);font-size:14px;margin-top:8px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}

/* ---- split feature rows (text + shot) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev>div:first-child{order:2}
/* grid items default to min-width:auto, so a non-wrapping child (a <pre>-style config block, a long
   code string) can force the whole grid track - and the page - wider than the viewport. min-width:0
   lets each side's own overflow-x:auto do its job instead (found on gateway.html at 390px). */
.split>.rv,.sticky-wrap>*{min-width:0}
.split ul{list-style:none;margin-top:18px}
.split li{padding:9px 0;color:var(--dim);font-size:14.5px;display:flex;gap:11px;align-items:baseline}
.split li::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--ac);transform:translateY(-1px)}

/* ---- device frames for real screenshots ---- */
.frame{position:relative;border-radius:16px;border:1px solid var(--line2);background:var(--bg2);
  box-shadow:var(--shadow-lg);overflow:hidden}
.frame .bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.frame .bar i:first-child{background:var(--dot-r)}.frame .bar i:nth-child(2){background:var(--dot-y)}.frame .bar i:nth-child(3){background:var(--dot-g)}
.frame img{width:100%;height:auto} /* no aspect-ratio override: the width/height attributes reserve the box before the shot loads (no layout shift) */
.frame video{width:100%;height:auto;display:block;aspect-ratio:1280/854;background:var(--bg2);object-fit:cover}
.phone{width:min(300px,80vw);margin:0 auto;border-radius:30px;border:1px solid var(--line2);background:var(--bg2);
  padding:10px;box-shadow:var(--shadow-lg)}
.phone .screen{border-radius:22px;overflow:hidden}
.shot-ph{aspect-ratio:16/10;display:grid;place-items:center;color:var(--faint);font-size:13px;
  background:repeating-linear-gradient(45deg,var(--fill) 0 12px,transparent 12px 24px)}

/* ---- lightbox: click any screenshot for a full-screen, zoomable view ---- */
.lb-ov{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  background:var(--overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lb-ov.on{display:flex;animation:lbfade .18s ease}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.lb-stage{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-out}
.lb-img{max-width:96vw;max-height:92vh;border-radius:10px;box-shadow:var(--shadow-lg);
  transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}
.lb-img:active{cursor:grabbing}
.lb-x{position:fixed;top:18px;right:22px;z-index:1001;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line2);background:var(--card);color:var(--tx);font-size:26px;line-height:1;
  cursor:pointer;display:grid;place-items:center;transition:border-color .15s,background .15s}
.lb-x:hover{border-color:var(--ac);background:var(--card-solid)}
.lb-hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:1001;color:var(--dim);
  font-size:12.5px;letter-spacing:.02em;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:7px 16px;pointer-events:none}
@media(max-width:600px){.lb-hint{font-size:11px;padding:6px 12px}.lb-x{top:12px;right:14px;width:40px;height:40px}}

/* ---- stat band / counters ---- */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center;
  padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band b{display:block;font-size:clamp(26px,3.6vw,40px);font-weight:700;letter-spacing:-.02em;color:var(--tx)}
.band>div>span{color:var(--dim);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;display:block;max-width:200px;margin:0 auto;line-height:1.5}

/* ---- pricing ---- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
@media(max-width:1000px){.plans{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.plans{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column}
.plan .price{font-size:36px;font-weight:700;letter-spacing:-.02em;margin:10px 0 2px}
.plan .per{color:var(--faint);font-size:12.5px}
.plan ul{list-style:none;margin:18px 0 22px;flex:1}
.plan li{padding:8px 0;color:var(--dim);font-size:13.5px;display:flex;gap:10px;align-items:baseline}
.plan li::before{content:'\2713';color:var(--em);font-weight:800;flex:none}
.plan.featured{border-color:var(--ac);background:var(--card-solid);
  border:1.5px solid var(--ac);box-shadow:0 0 0 1px var(--ac-soft),var(--shadow)}
.plan .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--btn);color:var(--btn-ink);
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 14px}
.plan .btn{font-size:13.5px;padding:13px 14px;white-space:nowrap}

/* ---- install command strip (get-started) ---- */
.install-row{margin-top:14px;padding:16px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.install-row code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;font-size:13px;max-width:100%}
.install-row .btn{padding:9px 20px;font-size:13px;flex:none}
@media(max-width:480px){.install-row code{font-size:11.5px}}

/* ---- steps ---- */
.steps{counter-reset:st;display:grid;gap:14px}
/* .step is the grid item; without min-width:0 its automatic minimum bubbles up from any non-wrapping
   descendant (e.g. the install-command code strip) regardless of that descendant's OWN min-width:0,
   forcing the whole page wider than the viewport on phones. */
.step{display:flex;gap:20px;align-items:flex-start;min-width:0}
.step>div{min-width:0;flex:1}
.step .n{flex:none;width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;font-weight:700;
  color:var(--btn-ink);background:var(--btn);font-size:14.5px;box-shadow:0 1px 0 var(--btn-hi) inset}
.step p{color:var(--dim);font-size:14px;margin-top:4px}

/* ---- trust pills (kept name/markup; now a calmer, flatter treatment) ---- */
.trust{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.trust em{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--fill)}

/* ---- trust/logo strip (new, wiz-signature pattern): a quiet horizontal band of short claims,
   used right under a hero - restrained, textual (no vendor logos to fabricate), same rhythm as
   wiz's "trusted by" strip without inventing customer names we do not have. ---- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;
  display:flex;gap:0;flex-wrap:wrap;justify-content:center;text-align:center}
.strip span{color:var(--faint);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 22px;border-right:1px solid var(--line)}
.strip span:last-child{border-right:0}
@media(max-width:700px){.strip span{border-right:0;padding:4px 14px}}

/* ---- footer (identical every page) ---- */
footer{border-top:1px solid var(--line);margin-top:60px;padding:48px 24px 64px;background:var(--bg2);
  position:relative;z-index:1}   /* above the .sky field, same as main - keeps footer links tappable on iOS */
.foot-in{max-width:var(--w);margin:0 auto}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.1em;margin-bottom:8px}
.foot-brand img{width:26px;height:26px;border-radius:6px}
.foot-tag{color:var(--faint);font-size:13px;margin-bottom:22px}
.foot-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 24px;font-size:13.5px}
.foot-links a{color:var(--dim);transition:color .15s}
.foot-links a:hover{color:var(--tx)}
.foot-legal{margin-top:22px;color:var(--faint);font-size:12px}

/* ---- reveal motion ----
   Reveal is decorative enhancement, never a gate. A hidden reveal is pointer-events:none so a
   still-invisible element (e.g. an IntersectionObserver miss on a fast phone scroll) can NEVER sit
   on top of the page and eat a tap - the resting `.in` state restores clicks. The .no-js / JS
   safety sweep (reveal.js) guarantees content ends visible even if the observer never fires. */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.rv.in{opacity:1;transform:none;pointer-events:auto}
[data-plx].rv.in{transition:opacity .6s var(--ease)}
.rv-stagger>*{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.rv-stagger.in>*{opacity:1;transform:none;pointer-events:auto}
.rv-stagger.in>*:nth-child(2){transition-delay:.07s}
.rv-stagger.in>*:nth-child(3){transition-delay:.14s}
.rv-stagger.in>*:nth-child(4){transition-delay:.21s}
.rv-stagger.in>*:nth-child(5){transition-delay:.28s}
.rv-stagger.in>*:nth-child(6){transition-delay:.35s}

/* ---- network map illustration (monitoring.html): the Wiring view + link card, drawn in site tokens so it
   follows the site theme with no image pair. Mirrors the real link inspector's fields; demo names only. ---- */
.netviz .nv-body{padding:22px 22px 24px;display:grid;gap:18px}
.nv-tree{width:100%;height:auto;display:block;overflow:visible}
.nv-ln{fill:none;stroke:var(--line2);stroke-width:1.6;stroke-linejoin:round}
.nv-ln.nv-sel{stroke:var(--ac);stroke-width:2.6}
.nv-ln.nv-guess{opacity:.45}
.nv-port{font-size:10.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;fill:var(--faint)}
.nv-port.nv-port-sel{fill:var(--ac);font-weight:600}
.nv-port.nv-port-guess{opacity:.8;font-style:italic}
.nv-port.nv-end{text-anchor:end}
.nv-node rect{fill:var(--card-solid);stroke:var(--line2);stroke-width:1}
.nv-node text{font-size:12.5px;font-weight:600;fill:var(--tx);text-anchor:middle}
.nv-node.nv-node-sel rect{stroke:var(--ac);stroke-width:1.6;fill:var(--ac-soft)}
.nv-node.nv-node-guess{opacity:.55}
.nv-card{border:1px solid var(--line2);border-radius:var(--r);background:var(--card-solid);padding:16px 16px 14px;
  box-shadow:var(--shadow);font-size:13px;min-width:0}
.nv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.nv-head b{display:block;font-size:14.5px;color:var(--tx)}
.nv-head span{color:var(--faint);font-size:12px}
.nv-up{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--em)!important;
  border:1px solid currentColor;border-radius:999px;padding:3px 10px;font-size:11.5px!important}
.nv-up i{width:6px;height:6px;border-radius:50%;background:currentColor}
.nv-ends{margin-top:12px;display:grid;gap:6px}
.nv-ends>div{display:flex;gap:10px;align-items:baseline;color:var(--tx);font-weight:600}
.nv-ends code{font-size:12px;color:var(--ac);font-weight:500}
.nv-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.nv-facts>div{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;background:var(--fill)}
.nv-facts span{display:block;color:var(--faint);font-size:11px}
.nv-facts b{color:var(--tx);font-size:14px}
.nv-sec{margin-top:12px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.nv-chips span{border:1px solid var(--ac-line);color:var(--ac);border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:600}
.nv-src{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:6px}
.nv-src span{background:var(--ac-soft);color:var(--ac);border-radius:999px;padding:2px 10px;font-weight:600;font-size:12px}
.nv-src em{font-style:normal;color:var(--faint);font-size:12px}
@media(max-width:640px){.netviz .nv-body{padding:16px 14px 18px}.nv-card{font-size:14px}.nv-head b{font-size:15.5px}}

/* ---- responsive ---- */
@media(max-width:900px){
  .g3,.g4{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:34px}
  .split.rev>div:first-child{order:0}
  .band{grid-template-columns:1fr 1fr}
  section{padding:72px 0}
  .hero{padding-top:130px}
  /* Hamburger nav on TABLET + phone: the full inline nav is cramped below 900px, so collapse it
     behind the hamburger into a CENTERED dropdown. PC (>900px) keeps the inline nav. */
  .nav-toggle{display:block;order:3;margin-left:0}
  .theme-toggle{margin-left:auto;width:42px;height:42px}
  .nav-in{gap:10px}
  .nav-links{display:none;position:fixed;top:58px;left:0;right:0;margin-left:0;flex-direction:column;
    align-items:center;text-align:center;gap:2px;background:var(--nav-bg2);backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:16px 22px 24px}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;font-size:16.5px;width:100%;text-align:center}
  .nav-cta{margin-top:10px;padding:12px 28px;display:inline-block}
}
@media(max-width:640px){
  /* phone type scale runs BIGGER by design - customers found the old scale too small */
  body{font-size:17px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .nav-links a{font-size:17.5px}
  .plan.featured{transform:none}
  .lede{font-size:18px}
  .sub{font-size:17px}
  h3{font-size:20px}
  .card p{font-size:15.5px}
  .split li{font-size:16px}
  .plan li{font-size:15px}
  .plan .desc{font-size:15px}
  .step p{font-size:15.5px}
  .trust em{font-size:12.5px}
  .band>div>span{font-size:12.5px}
  .eyebrow{font-size:12px}
  .foot-links{font-size:14.5px;gap:12px 20px;grid-template-columns:1fr 1fr}
  .foot-legal{font-size:13px}
  .btn{padding:16px 30px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.rv-stagger>*{opacity:1;transform:none;pointer-events:auto}
  html{scroll-behavior:auto}
}

/* ---- hero v2: two-column with floating product frames ---- */
.hero-2col{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.hero-visual{position:relative;min-height:520px}
.hero-visual .frame{position:absolute;overflow:hidden;will-change:transform}
.hero-visual .float{width:100%;top:0;right:0;transform:rotate(.6deg);animation:heroFloat 8s ease-in-out infinite alternate}
.hero-visual .float2{width:56%;bottom:-16px;left:-24px;transform:rotate(-1deg);animation:heroFloat 9s ease-in-out -3s infinite alternate-reverse;box-shadow:var(--shadow-lg)}
@keyframes heroFloat{to{transform:translateY(-10px) rotate(0deg)}}
@media(max-width:980px){.hero-2col{grid-template-columns:1fr;padding-top:120px;gap:34px}
 .hero-visual{min-height:0}.hero-visual .frame{position:static;width:100%;margin-bottom:14px;animation:none;transform:none}
 .hero-visual .float2{display:none}}
@media(prefers-reduced-motion:reduce){.hero-visual .frame{animation:none!important}}

/* ---- domain sub-brand lockup (V.E.Y.R wordmark + GATEWAY/CREATOR sub-mark, same treatment site-wide) ---- */
.lockup{display:flex;align-items:center;gap:14px;margin:0 0 20px}
.lockup img{width:44px;height:44px;border-radius:var(--r-sm)}
.lockup .word{display:flex;flex-direction:column;line-height:1.05}
.lockup .word b{font-size:19px;font-weight:800;letter-spacing:.12em;color:var(--tx)}
.lockup .word span{font-size:10px;font-weight:700;letter-spacing:.3em;color:var(--ac);margin-top:3px}

/* ---- domain cards (home grid): icon header + honest status pill ---- */
.card .head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card .head img{width:38px;height:38px;border-radius:var(--r-sm)}
.card .head .ic{margin-bottom:0;width:38px;height:38px;font-size:17px}
.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--dim);margin-top:16px}
.pill.em{color:var(--em);border-color:var(--em)}
.pill.hot{color:var(--ac);border-color:var(--ac-line)}

/* ---- scroll polish: parallax hooks + screenshot settle-in ---- */
[data-plx]{will-change:transform}
.frame img.shot-img,.phone .screen img.shot-img{transition:transform 1.5s var(--ease)}
.rv:not(.in) .frame img.shot-img,.rv-stagger:not(.in) .frame img.shot-img{transform:scale(1.04)}

/* ---- showcase: one wide product frame that owns its section ---- */
.showcase .frame{margin-top:40px}
.showcase .frame img{width:100%;height:auto}

/* ---- sticky side imagery (Apple-style: text scrolls, the product holds) ---- */
.sticky-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.sticky-side{position:sticky;top:110px}
@media(max-width:900px){.sticky-wrap{grid-template-columns:1fr;gap:34px}.sticky-side{position:static}}

/* an inline lucide glyph inside a line of text or a button label (order page lock) */
.i-inline{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;flex:none}
/* a lucide check / glyph inside a numbered step tile */
.step .n svg{width:18px;height:18px}

/* ---- v6 launch pass (2026-10-05, owner: "rework my website now please, I don't like the wording and it seems
   stale"). The site now leads with the V.E.Y.R 4G stick and the one V.E.Y.R app; these components carry that:
   a launch hero with a drawn stick and phone (site tokens only, so both themes follow), a tinted full-bleed band
   for rhythm, Today / Coming status on every promise, and the one-app plan cards (what the app shows per plan).
   Same rules as the rest of this file: tokens only, no colour literal, AA in both themes (palette.mjs). ---- */
.center{text-align:center}
.center .sub,.center .lede{margin-left:auto;margin-right:auto}
.center .btn-row,.center .trust{justify-content:center}
.announce{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;border:1px solid var(--line2);
  background:var(--fill);font-size:13px;font-weight:600;color:var(--dim);width:max-content;max-width:100%;transition:border-color .15s,color .15s}
.announce b{background:var(--btn);color:var(--btn-ink);border-radius:999px;padding:4px 11px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;flex:none}
.announce:hover{border-color:var(--ac-line);color:var(--tx)}
.hero-launch{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:60px;align-items:center;padding:170px 0 84px}
.hero-launch h1{font-size:clamp(46px,6.6vw,92px);line-height:.98;letter-spacing:-.045em;margin:26px 0 24px}
.hero-launch .lede{font-size:clamp(17px,1.9vw,20px);line-height:1.6;max-width:560px}
.hero-launch .btn-row{margin-top:36px}

/* the scene: a stick at home, a phone far away, the text arriving */
.scene{position:relative;min-height:500px;min-width:0}
.scene .halo{position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(closest-side,var(--ac-soft),transparent);filter:blur(10px)}
.stick{position:absolute;z-index:2;left:2%;top:4%;width:min(290px,50%);aspect-ratio:3.1/1;border-radius:22px;background:var(--card-solid);
  border:1px solid var(--line2);box-shadow:var(--shadow-lg),0 1px 0 var(--btn-hi) inset;display:flex;align-items:center;gap:14px;
  padding:0 22px 0 0;transform:rotate(-9deg);animation:heroFloat 9s ease-in-out infinite alternate}
.stick .plug{width:22%;height:46%;margin-left:-16%;border-radius:6px 2px 2px 6px;background:var(--line2);border:1px solid var(--line2);flex:none;
  box-shadow:inset 0 0 0 3px var(--card-solid)}
.stick .mk{display:flex;flex-direction:column;line-height:1.1;margin-left:6px}
.stick .mk b{font-size:15px;letter-spacing:.14em;font-weight:800;color:var(--tx)}
.stick .mk span{font-size:9.5px;letter-spacing:.32em;font-weight:700;color:var(--ac);margin-top:3px}
.stick .led{margin-left:auto;width:11px;height:11px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 4px var(--ac-soft),0 0 18px var(--ac);flex:none}
.handset{position:relative;display:block;width:min(270px,58%);margin-left:auto;margin-right:2%;margin-top:120px;border-radius:38px;padding:10px;background:var(--card-solid);
  border:1px solid var(--line2);box-shadow:var(--shadow-lg);transform:rotate(3deg);animation:heroFloat 10s ease-in-out -4s infinite alternate-reverse}
.handset .scr{border-radius:30px;background:var(--bg2);border:1px solid var(--line);padding:16px 14px 18px;min-height:390px;display:flex;flex-direction:column;gap:10px}
.handset .top{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:var(--faint);padding:0 4px 6px}
.handset .tabs{display:flex;gap:6px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.handset .tabs span{flex:1;text-align:center;font-size:10.5px;font-weight:700;color:var(--faint);padding:7px 0;border-radius:10px}
.handset .tabs span.on{color:var(--ac);background:var(--ac-soft)}
.bub{max-width:88%;border-radius:16px;padding:9px 12px;font-size:12.5px;line-height:1.45;background:var(--card);border:1px solid var(--line);color:var(--tx)}
.bub small{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.bub.me{margin-left:auto;background:var(--btn);color:var(--btn-ink);border:0}
.bub .code{font-weight:800;letter-spacing:.14em;white-space:nowrap}
.wire{position:absolute;left:24%;top:24%;width:30%;height:22%;border-top:2px dashed var(--ac-line);border-right:2px dashed var(--ac-line);border-radius:0 60px 0 0}
.wire i{position:absolute;right:-6px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--ac);box-shadow:0 0 14px var(--ac)}
@media(max-width:980px){.hero-launch{grid-template-columns:1fr;padding-top:124px;gap:30px}.scene{min-height:440px}}
@media(max-width:520px){.scene{min-height:420px}.stick{width:58%;top:2%;left:0}.handset{width:66%;margin-top:110px}.handset .scr{min-height:330px}.wire{display:none}}
@media(prefers-reduced-motion:reduce){.stick,.handset{animation:none!important}}

/* full-bleed tinted band for section rhythm (the band's own background spans the viewport, content stays in main) */
.tint{position:relative}
.tint::before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--bg2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);z-index:-1}

/* a promise with its honest status: Today (works now) or Coming */
.promise{display:flex;flex-direction:column}
.promise .st{align-self:flex-start;margin:0 0 14px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 11px;border:1px solid}
.promise .st.today{color:var(--em);border-color:var(--em)}
.promise .st.soon{color:var(--ac);border-color:var(--ac-line)}
.promise h3{font-size:19px}
.audience{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:46px 0 16px}
.audience h3{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.audience a{font-size:14px;font-weight:600;color:var(--ac)}

/* the one app: what it shows on each plan */
.appplans{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.appplan{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.appplan.biz{border-color:var(--ac-line);background:var(--card-solid);box-shadow:0 0 0 1px var(--ac-soft),var(--shadow)}
.appplan .who{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.appplan h3{font-size:24px;letter-spacing:-.02em;margin-top:8px}
.appplan>p{color:var(--dim);font-size:15px;margin-top:8px}
.mods{list-style:none;display:grid;gap:10px;margin-top:20px}
.mods li{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);background:var(--fill);border:1px solid var(--line)}
.mods li .ic{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;background:var(--ic-bg);border:1px solid var(--ac-line);color:var(--ac)}
.mods li .ic svg{width:18px;height:18px}
.mods li b{display:block;font-size:15px;color:var(--tx)}
.mods li span{display:block;font-size:13.5px;color:var(--dim);margin-top:2px}
.mods li.plus{border-color:var(--ac-line);background:var(--ac-soft)}
@media(max-width:760px){.appplans{grid-template-columns:1fr}}
@media(max-width:640px){.mods li span{font-size:15px}.appplan>p{font-size:16px}}

/* two homes side by side (hosted or your own) */
.homes2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.homes2 .card{padding:30px}
.homes2 h3{font-size:22px;letter-spacing:-.015em}
@media(max-width:760px){.homes2{grid-template-columns:1fr}}

/* a quiet three-up of big numbers or facts with a line each */
.facts3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:8px}
.facts3>div{padding:30px 26px;border-right:1px solid var(--line)}
.facts3>div:last-child{border-right:0}
.facts3 b{display:block;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;color:var(--tx)}
.facts3 span{display:block;color:var(--dim);font-size:14.5px;margin-top:6px}
@media(max-width:760px){.facts3{grid-template-columns:1fr}.facts3>div{border-right:0;border-bottom:1px solid var(--line);padding:22px 4px}.facts3>div:last-child{border-bottom:0}}
.own-2 .steps{max-width:780px;margin-top:34px}

/* ---- v7 simple pass (2026-10-08, owner: "I need it more simple to explain, properly present, no extra wording or
   ugliness"). One hero per page, one idea per section, centred section heads, three steps in a row, plain check
   lists instead of walls of cards and chips, and the honest limits as one list. Tokens only (palette.mjs). ---- */
.hero.simple{padding:176px 0 24px}
.hero.simple .lede{max-width:600px}
.hero.simple.center{align-items:center;text-align:center}
.hero.simple.center .lede{margin-left:auto;margin-right:auto}
.hero.simple .lockup{margin-bottom:8px}
.hero.simple.center .lockup{justify-content:center}
.head-c{text-align:center;max-width:720px;margin:0 auto}
.head-c .sub{margin-left:auto;margin-right:auto}
.lead-shot{margin-top:64px}
.btn-row.c{justify-content:center}
.steps3{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.steps3>li{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;min-width:0}
.steps3 .n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;
  color:var(--btn-ink);background:var(--btn);box-shadow:0 1px 0 var(--btn-hi) inset;margin-bottom:22px}
.steps3 h3{font-size:20px;letter-spacing:-.015em}
.steps3 p{color:var(--dim);font-size:15px;margin-top:8px;text-wrap:pretty}
.steps3 code{font-size:.92em;color:var(--tx)}
.pair2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:48px}
.card.panel{padding:34px 32px;border-radius:var(--r-lg);min-width:0}
.card.panel:hover{transform:none;box-shadow:none;border-color:var(--line)}
.card.panel .head{margin-bottom:6px}
.card.panel h3{font-size:21px;letter-spacing:-.015em}
.checks{list-style:none;display:grid;gap:14px;margin-top:22px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--tx)}
.checks li::before{content:'\2713';flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;color:var(--ac);background:var(--ac-soft);border:1px solid var(--ac-line)}
.coming{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:26px;color:var(--dim);font-size:14.5px}
.coming .pill{margin:0 2px 0 0}
.coming.c{justify-content:center;text-align:center}
.uses{margin-top:56px}
.aud{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:26px}
.usegrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:32px 40px}
.usegrid li{display:flex;gap:16px;align-items:flex-start;min-width:0}
.usegrid .ic{width:40px;height:40px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--ic-bg);
  border:1px solid var(--ac-line);color:var(--ac)}
.usegrid li b{display:block;font-size:16.5px;color:var(--tx);letter-spacing:-.01em}
.usegrid li div>span{display:block;color:var(--dim);font-size:14.5px;margin-top:4px;line-height:1.55}
.limits{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:40px;border-top:1px solid var(--line)}
.limits li{padding:20px 0;border-bottom:1px solid var(--line);min-width:0}
.limits li>b{display:block;font-size:16px;color:var(--tx)}
.limits li>span{display:block;color:var(--dim);font-size:14.5px;margin-top:4px}
.parts{margin-top:48px}
.parts .card{display:flex;flex-direction:column}
.parts .card p{flex:1;font-size:15px}
.parts .card>.pill,.parts .card>.more{align-self:flex-start}
.card.panel>p{font-size:16px;margin-top:18px}
.more{display:inline-block;margin-top:18px;font-size:14px;font-weight:600;color:var(--ac)}
.price-note{margin-top:18px;color:var(--faint);font-size:14px}
@media(max-width:900px){.steps3,.pair2{grid-template-columns:1fr}.limits{grid-template-columns:1fr}}
@media(max-width:640px){
  .hero.simple{padding-top:128px}
  .steps3 p,.usegrid li div>span,.limits li>span{font-size:15.5px}
  .checks li{font-size:16.5px}
  .card.panel{padding:26px 22px}
  .steps3>li{padding:26px 22px}
  .usegrid{grid-template-columns:1fr;gap:26px}
}
.head-c+.facts3,.head-c+.limits{margin-top:48px}