/* Ophthalmic Academy, public website.
   Dark glass in blue, the same surface as the app's Dark theme. Headlines are set tall and
   condensed in Big Shoulders, like chart and instrument lettering; everything a buyer reads is
   Instrument Sans at a size it can be read at.

   Layout and type follow the October 2026 design audit (Public site and sign-in, items 04 to 10)
   and the website redesign of 2026-10-13: one hero size (88/80, the only text that large), section
   heads a clear step down at 56/52, body copy at 16/26, 13px as the floor for basis lines, one
   filled button per hero, an 80px gap between sections (48px on a phone), and the app's radius
   scale: 6 for controls, 12 for cards, 16 for panels, the exam card, bands, menus and the dialog.

   GLASS BY COLOR ONLY (Kyle, 2026-10-13). Every card, tile, track card, worked example and band is
   a translucent fill and a 1px rule, with no backdrop-filter. A backdrop blur on many surfaces made
   scrolling lag in the app, and it was removed there the same day. The sticky header is the one
   element that keeps its blur; menus and the pricing dialog use a solid surface. site_surface_test
   fails if any other rule here asks for a backdrop-filter.

   Those are the sizes at 1920 wide and below. On a larger display the page scales continuously
   rather than in steps: the column widens with the window (--wrap), the display type, section gap
   and grid gaps grow with --k (1 up to 1920, 1.2 at 2560, at most 1.25), and running text grows
   far less with --kt (at most 1.08, so 16px body copy tops out near 17px) and keeps its measure in
   ch. Short laptop windows take their hero lead-in from the window height. */

:root{
  /* The app's Dark theme, copied BY VALUE (CLAUDE.md, "The public website"): this file does not
     read tools/build-themes.mjs, so a change to the Dark palette there needs the same change here.
     Values are the audit's Dark token table, 2026-10-03:
       page #0e1014 · surface #181d2a · raised #1e222a · fg #e9ebf0 · fg-2 #aab1bd · fg-3 #8b93a1
       field-line #717988 · good #4ccf8f · bad #ff8a80 · warn #e8b949
       accent text #7aa5ff · accent fill #3566e0 with #ffffff on it.
     The site keeps its own token names so every rule below keeps working. */
  color-scheme:dark;
  --paper:#0e1014; --surface:#181d2a; --card:rgba(24,29,42,.72); --raised:#1e222a;
  --ink:#e9ebf0; --ink-2:#aab1bd; --ink-3:#8b93a1; --field:#717988;
  --rule:rgba(255,255,255,.08); --rule-2:rgba(255,255,255,.15);
  --cobalt:#7aa5ff; --cobalt-2:#9dbcff; --cobalt-wash:rgba(122,165,255,.14);
  --fill:#3566e0; --on-fill:#ffffff;
  --fluor:#6E9BFF; --fluor-ink:#0B0C0E;
  --red:#ff8a80; --green:#4ccf8f; --warn:#e8b949; --red-wash:rgba(255,138,128,.10); --green-wash:rgba(76,207,143,.10);
  --glow-a:rgba(110,155,255,.70); --glow-b:rgba(110,155,255,.14); --grid:rgba(255,255,255,.035);
  --tint:rgba(122,165,255,.12); --tint-line:rgba(122,165,255,.28); --tint-ink:#7aa5ff;
  /* The app's radius scale, by value. */
  --r-sm:6px; --r-md:12px; --r-lg:16px;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --k:clamp(1px, calc(0.4px + 0.03125vw), 1.25px);
  --kt:clamp(1px, calc(0.7px + 0.015625vw), 1.08px);
  --wrap:clamp(1180px, 76vw, 1840px);
  --gap:calc(80 * var(--k));
  /* The sticky header's height; the track pages' section bar sits directly under it. */
  --hdr:calc(64 * var(--k));
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-padding-top:calc(var(--hdr) + 16px)}
/* The section bar on a track page is sticky too, so an anchor lands below both. */
html:has(.secbar){scroll-padding-top:calc(var(--hdr) + 72px)}
body{
  margin:0;color:var(--ink);font-family:var(--body);font-size:calc(16 * var(--kt));line-height:calc(26 * var(--kt));-webkit-font-smoothing:antialiased;
  /* The app's surface: a broad wash, a beam of blue behind the header, and a faint grid. */
  background-color:var(--paper);
  background-image:
    radial-gradient(60% 42% at 50% 0%, var(--glow-b), transparent 75%),
    radial-gradient(26% 56% at 50% -10%, var(--glow-a), transparent 78%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 56px 56px, 56px 56px;
  background-attachment:fixed;
}
a{color:var(--cobalt)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:4px}
img{max-width:100%;height:auto}
figure{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
h1,h2,h3,h4{margin:0;text-wrap:balance}
/* Section heads: 56/52, a clear step down from the 88/80 hero. */
h2{font-family:var(--display);font-weight:700;font-size:clamp(40px, 5.2vw, calc(56 * var(--k)));line-height:.93;letter-spacing:.005em;text-transform:uppercase}
h3{font-size:calc(20 * var(--kt));font-weight:600;line-height:calc(28 * var(--kt))}
p{margin:0}
/* One gap between every pair of sections, and the same gap everywhere: each section carries it
   below itself and nothing above, so two plain sections never stack two paddings. */
main > section{padding-block:0 var(--gap)}
.lede{font-size:calc(16 * var(--kt));line-height:calc(26 * var(--kt));color:var(--ink-2);max-width:64ch}
.sec-head{display:grid;gap:12px;margin-bottom:calc(32 * var(--k));max-width:calc(820 * var(--k))}
/* Eyebrow: 12/16 500, uppercase, in the second ink. A label, not a mark. */
.eyebrow{font:500 calc(12 * var(--kt))/calc(16 * var(--kt)) var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
/* A smaller label over a group of cards ("The certification ladder", "Other tracks"). */
.group-h{display:block;margin:0 0 12px;font:500 calc(12 * var(--kt))/calc(16 * var(--kt)) var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Skip link (accessibility audit, 2026-10-13): the first stop on every page, off screen until it has
   focus, past the header and its menus to the page itself. */
.skip{position:absolute;left:12px;top:-100px;z-index:200;padding:10px 14px;border-radius:var(--r-sm);background:var(--fill);color:var(--on-fill);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
#main:focus{outline:none}

/* ---- glass, by color only ----
   A translucent fill and a 1px rule. No backdrop-filter anywhere but the header (see the top). */
.glass,.glass-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md)}
.glass-card{display:flex;flex-direction:column;gap:8px;padding:24px}
.glass-card h3,.glass-card h4{font-size:calc(16 * var(--kt));line-height:calc(24 * var(--kt));font-weight:600}
.glass-card p{font-size:calc(15 * var(--kt));line-height:calc(24 * var(--kt));color:var(--ink-2)}

/* ---- buttons ----
   Primary is the one filled control: the accent fill with white on it. Secondary (.btn-line) is an
   outline. .textlink is the underlined link that sits beside a primary without competing. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border-radius:var(--r-sm);padding:0 16px;
  font:500 calc(14 * var(--kt))/calc(20 * var(--kt)) var(--body);text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:filter .16s ease-out,background .16s ease-out,border-color .16s ease-out,transform .16s ease-out}
.btn-primary{background:var(--fill);color:var(--on-fill);border-color:var(--fill);font-weight:600}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:active{filter:brightness(.94);transform:translateY(1px)}
.btn-primary:disabled{filter:none;opacity:1;background:var(--raised);border-color:var(--rule-2);color:var(--ink-2);cursor:default}
.btn-ghost,.btn-line{background:transparent;border-color:var(--rule-2);color:var(--ink)}
.btn-ghost:hover,.btn-line:hover{border-color:var(--cobalt);background:var(--tint)}
.btn-lg{min-height:48px;padding:0 24px;font-size:calc(15 * var(--kt))}
.btn-sm{min-height:34px;padding:0 14px;font-size:calc(13 * var(--kt))}
.textlink{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;font:500 calc(15 * var(--kt))/calc(20 * var(--kt)) var(--body);color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.textlink:hover{color:var(--cobalt)}
.more{font:500 calc(14 * var(--kt))/calc(20 * var(--kt)) var(--body);text-decoration:none;color:var(--cobalt)}
.more:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- header ----
   Wordmark, Product and Tracks menus, Security and Pricing, then Sign in as text and Request
   pricing as an outline, so the hero's filled button stays the strongest call on the page. On a
   phone the menus fold into one, leaving the wordmark, Sign in and the menu button. The header
   stays sticky at every width (56px on a phone). */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(14,16,20,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:calc(32 * var(--k));height:var(--hdr)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:700;
  font-size:calc(20 * var(--k));line-height:1;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.brand svg{flex:none}
.brand-mark{color:var(--fluor)}
.nav{display:flex;gap:4px;align-items:center}
.nav-link,.dd > summary{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;
  font:500 calc(14 * var(--kt))/calc(20 * var(--kt)) var(--body);cursor:pointer;list-style:none;white-space:nowrap}
.dd > summary::-webkit-details-marker{display:none}
.nav-link:hover,.dd > summary:hover{color:var(--ink);background:rgba(255,255,255,.04)}
/* The current page's item is underlined: Tracks on a track page, Security on its own page. */
.nav-link[aria-current="page"],.dd.on > summary{color:var(--ink);box-shadow:inset 0 -2px 0 var(--cobalt);border-radius:0}
.dd[open] > summary{color:var(--ink);background:var(--tint);border-radius:var(--r-sm);box-shadow:none}
.dd > summary svg{transition:transform .16s ease-out}
.dd[open] > summary svg{transform:rotate(180deg)}
.dd{position:relative}
/* Menus are a solid surface, not glass. */
.dd-panel{position:absolute;left:0;top:calc(100% + 10px);z-index:30;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  width:680px;background:var(--raised);border:1px solid var(--rule-2);border-radius:var(--r-lg);box-shadow:0 16px 48px rgb(0 0 0 / .4);overflow:hidden}
.dd-product{width:600px}
.dd-col{padding:16px;display:flex;flex-direction:column;gap:2px}
.dd-side{border-left:1px solid var(--rule);background:rgba(255,255,255,.02)}
.dd-h{padding:0 10px 8px;font:500 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.dd-item{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:8px;color:var(--ink);text-decoration:none}
.dd-item:hover,.dd-item:focus-visible{background:var(--tint)}
.dd-item b{font:600 14px/20px var(--body)}
.dd-row{display:flex;justify-content:space-between;gap:12px}
.dd-lvl{font:400 12px/20px var(--body);color:var(--ink-3)}
.dd-desc{font:400 13px/18px var(--body);color:var(--ink-2)}
.dd-all{margin-top:auto;padding:10px;font:500 13px/20px var(--body);color:var(--cobalt);text-decoration:none}
.dd-all:hover{text-decoration:underline;text-underline-offset:3px}
.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.signin{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;color:var(--ink);text-decoration:none;font:500 calc(14 * var(--kt))/calc(20 * var(--kt)) var(--body)}
.signin:hover{text-decoration:underline;text-underline-offset:4px}
/* The narrow-screen menu: a <details>, so it opens without a script. Hidden on wide screens. */
.menu{display:none;position:relative}
.menu summary{list-style:none;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;border-radius:var(--r-sm);color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{display:block}
.menu[open] summary{background:var(--raised)}
.menu-panel{position:absolute;right:0;top:50px;width:min(320px,calc(100vw - 16px));max-height:calc(100dvh - 72px);overflow:auto;display:grid;gap:2px;padding:12px;
  background:var(--raised);border:1px solid var(--rule-2);border-radius:var(--r-lg);box-shadow:0 16px 48px rgb(0 0 0 / .4)}
.menu-h{padding:8px 8px 4px;font:500 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.menu-tracks{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.menu-panel a:not(.btn){display:flex;align-items:center;min-height:44px;padding:0 8px;color:var(--ink);text-decoration:none;font:500 15px/20px var(--body);border-radius:var(--r-sm)}
.menu-panel a:not(.btn):hover{background:rgba(255,255,255,.04)}
.menu-panel .btn{margin-top:8px;min-height:44px}

/* ---- hero ----
   88/80 Big Shoulders (from 56 on a phone to about 110 on a large display, always the largest
   text), the only text that large on the page, with no accent-colored word. The lede is 20/30 at
   52ch. One filled button and one text link, then the three outcomes as label and value rows. */
.hero{padding-top:clamp(32px, calc(14vh - 48px), calc(112 * var(--k)))}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:calc(56 * var(--k));align-items:center}
.hero-copy{display:grid;gap:24px;justify-items:start}
.hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(56px, 7.4vw, calc(88 * var(--k)));line-height:.91;letter-spacing:.005em;color:var(--ink)}
.hero-copy .sub,.c-hero .sub{color:var(--ink-2);font-size:calc(20 * var(--kt));line-height:calc(30 * var(--kt));max-width:52ch;text-wrap:pretty}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* The three outcomes (2026-10-08): what a buyer gets back, as label and value rows. */
.outcomes{margin:8px 0 0;width:100%;border-top:1px solid var(--rule)}
.outcomes > div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.outcomes dt{font:600 calc(14 * var(--kt))/calc(22 * var(--kt)) var(--body);color:var(--ink)}
.outcomes dd{margin:0;font-size:calc(14 * var(--kt));line-height:calc(22 * var(--kt));color:var(--ink-2)}
@media (min-width:700px){.nowrap{white-space:nowrap}}
/* A laptop browser window is short: 1366x768 leaves about 625px of page, 1280x720 about 590.
   The lead-in above is taken from the window height, so it no longer jumps at a cutoff. On a short
   window the copy is top-aligned, so the headline, the line under it and the button all land on
   the first screen. */
@media (min-width:981px) and (max-height:760px){
  .hero .wrap{align-items:start}
}

/* The real refraction simulator, captured from the platform at double resolution, in a window
   frame whose title bar names the screen. */
.sim-hero{display:grid;gap:12px}
.sim-window{border:1px solid var(--rule-2);border-radius:var(--r-md);overflow:hidden;background:#0d1120;box-shadow:0 24px 64px rgb(0 0 0 / .45)}
.sim-bar{min-height:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:6px 12px;border-bottom:1px solid var(--rule);
  background:rgba(255,255,255,.03);font:400 calc(12 * var(--kt))/calc(16 * var(--kt)) var(--body);color:var(--ink-2)}
.sim-bar .live{font:500 11px/16px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border:1px solid var(--rule-2);border-radius:4px;padding:2px 6px}
.sim-frame{position:relative;aspect-ratio:1568/1276}
.sim-frame img{display:block;width:100%;height:100%;object-fit:cover}
.sim-hero figcaption{font-size:calc(13 * var(--kt));line-height:calc(20 * var(--kt));color:var(--ink-2);max-width:60ch}

/* ---- KPI tiles ----
   The app dashboard's tile: a label, the number, a basis line. The numbers are generated. */
.proof{margin-top:calc(-24 * var(--k))}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpi{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--rule)}
.kpi b{font:700 calc(44 * var(--k))/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi .pl{font:500 calc(13 * var(--kt))/calc(20 * var(--kt)) var(--body);color:var(--ink-2)}
.kpi .ps{font:400 calc(13 * var(--kt))/calc(20 * var(--kt)) var(--body);color:var(--ink-3)}
/* On the home page the label reads first; the number stays first for a screen reader. */
.proof .kpi .pl{order:-1}

/* ---- founder note ---- */
/* Hairlines above and below, drawn inside the column's padding so they line up with the text. */
.founder{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:calc(56 * var(--k));align-items:start;padding-block:40px;
  background:linear-gradient(var(--rule), var(--rule)) top / calc(100% - 48px) 1px no-repeat, linear-gradient(var(--rule), var(--rule)) bottom / calc(100% - 48px) 1px no-repeat}
.founder .sec-head{margin:0}
.founder h2{font-size:clamp(36px, 4.4vw, calc(48 * var(--k)))}
.founder blockquote{margin:0;display:grid;gap:16px}
.founder blockquote p{font-size:calc(22 * var(--kt));line-height:calc(34 * var(--kt));font-weight:500;letter-spacing:-.01em;text-wrap:pretty}
.founder blockquote p + p{font-size:calc(18 * var(--kt));line-height:calc(30 * var(--kt));font-weight:400;letter-spacing:0;color:var(--ink-2)}
.founder cite{display:block;margin-top:16px;font-style:normal;font:400 calc(13 * var(--kt))/calc(20 * var(--kt)) var(--body);color:var(--ink-2)}

/* ---- which is clearer? ----
   Two numbered columns, a dash and a check per cell, aligned row by row. No red or green wash:
   the numbers and the marks carry the meaning in every kind of color vision. */
.duo{overflow:hidden}
.duo-head,.duo-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.duo-head{border-bottom:1px solid var(--rule-2)}
.duo-head > span{display:flex;align-items:center;gap:10px;padding:16px 24px;font:600 calc(14 * var(--kt))/20px var(--body);color:var(--ink-2)}
.duo-head > .two-col,.duo-row .b{border-left:1px solid var(--rule);background:rgba(122,165,255,.06);color:var(--ink)}
.duo-n{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;font:700 16px/1 var(--display);font-style:normal;color:var(--ink-2)}
.duo-n.on{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.duo-row{border-bottom:1px solid var(--rule)}
.duo-row:last-child{border-bottom:0}
.duo-row p{display:flex;gap:12px;padding:16px 24px;font-size:calc(15 * var(--kt));line-height:calc(24 * var(--kt))}
.duo-row .a{color:var(--ink-2)}
.duo-row .a::before{content:"";flex:none;width:12px;height:2px;margin:11px 2px 0;border-radius:1px;background:var(--ink-3)}
.duo-row .b::before{content:"";flex:none;width:11px;height:6px;margin:7px 3px 0 2px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}

/* ---- tracks: the ladder ----
   Four connected rungs, Foundations to COMT, then OSC and Patient Access alongside. Each card is a
   link through its own "more" link, stretched over the card. */
.ladder{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:20px}
.ladder::before{content:"";position:absolute;left:24px;right:24px;top:4px;height:1px;background:linear-gradient(90deg, rgba(122,165,255,.25), rgba(122,165,255,.9))}
.rung{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--rule);
  min-height:236px;transition:border-color .16s ease-out,background .16s ease-out}
.rung:hover{border-color:rgba(122,165,255,.45);background:rgba(30,36,52,.8)}
.ladder > .rung::before{content:"";position:absolute;left:20px;top:-23px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:2px solid var(--cobalt)}
.rung .lvl{font:500 calc(12 * var(--kt))/calc(16 * var(--kt)) var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rung h3{font:700 calc(32 * var(--k))/1 var(--display);letter-spacing:.01em;text-transform:uppercase;hyphens:auto}
.rung p{font-size:calc(14 * var(--kt));line-height:calc(22 * var(--kt));color:var(--ink-2)}
.rung .spec{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);font:400 calc(13 * var(--kt))/calc(20 * var(--kt)) var(--body);color:var(--ink-2);font-variant-numeric:tabular-nums}
.rung .more::after{content:"";position:absolute;inset:0;border-radius:inherit}
.rung:has(.more:focus-visible){outline:2px solid var(--cobalt);outline-offset:2px}
.rung .more:focus-visible{outline:none}
.ladder + .group-h{margin-top:32px}
.sidetracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rung.side{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;min-height:0}
.side-name,.side-body{display:flex;flex-direction:column;gap:8px}
.side-body .spec{margin-top:0;padding-top:0;border-top:0}

/* ---- split sections: heading on the left, the content on the right ---- */
.split2{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:calc(56 * var(--k));align-items:start}
.side-head{margin-bottom:0}
.wide-side{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}

/* ---- sample questions ----
   One at a time with a Next sample control (audit item 08), so the explanation is what the eye
   lands on after answering. On the home page a tab per track picks that track's question. Without
   a script the first question shows alone; site.js adds .js and takes over which one is shown. */
.qtabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin-bottom:16px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--rule)}
.qtab{height:32px;padding:0 12px;border-radius:5px;border:0;background:transparent;color:var(--ink-2);font:500 13px/20px var(--body);cursor:pointer}
.qtab:hover{color:var(--ink)}
.qtab[aria-selected="true"]{background:var(--fill);color:var(--on-fill);font-weight:600}
.qs{display:grid;gap:16px}
.qs:not(.js) .q ~ .q{display:none}
.qs.js .q{display:none}
.qs.js .q.on{display:grid}
.qs .q{display:grid;gap:16px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);padding:24px}
.q-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.dots{display:flex;gap:4px;flex:none}
.dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.dots i.on{width:18px;background:var(--cobalt)}
.qs .meta{font:500 calc(12 * var(--kt))/calc(16 * var(--kt)) var(--body);color:var(--ink-2);letter-spacing:.08em}
.qs .stem{font-size:calc(20 * var(--kt));line-height:calc(28 * var(--kt));font-weight:600}
.opts{display:grid;gap:8px}
.opt{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:start;text-align:left;font:inherit;font-size:calc(16 * var(--kt));line-height:calc(24 * var(--kt));color:var(--ink);
  background:var(--raised);border:1px solid var(--field);border-radius:var(--r-sm);padding:10px 12px;min-height:44px;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--cobalt)}
.opt .l{font-weight:600;color:var(--ink-2)}
.opt:disabled{cursor:default;color:var(--ink)}
/* Right and wrong carry a glyph and a word as well as the color, so they read in any color vision. */
.opt .mk{font:500 calc(12 * var(--kt))/calc(24 * var(--kt)) var(--body);letter-spacing:.04em;white-space:nowrap}
.opt.right{border-color:var(--green);background:var(--green-wash)}
.opt.right .mk{color:var(--green)}
.opt.wrong{border-color:var(--red);background:var(--red-wash)}
.opt.wrong .mk{color:var(--red)}
.why{font-size:calc(16 * var(--kt));line-height:calc(26 * var(--kt));color:var(--ink-2);border-left:2px solid var(--cobalt);padding-left:16px}
.why b{color:var(--ink)}
.qs-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.qs-count{font:400 calc(13 * var(--kt))/calc(20 * var(--kt)) var(--body);color:var(--ink-2);font-variant-numeric:tabular-nums}
.qs-note{font-size:calc(13 * var(--kt));line-height:calc(20 * var(--kt));color:var(--ink-3);margin-top:8px}

/* ---- simulators ---- */
.sim-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:calc(40 * var(--k));align-items:start}
.sim-shots{display:grid;gap:32px}
.sim-feature{display:grid;gap:12px}
.sim-feature img{display:block;width:100%;border-radius:var(--r-md);border:1px solid var(--rule)}
.sim-feature figcaption{font-size:calc(15 * var(--kt));line-height:calc(24 * var(--kt));color:var(--ink-2);max-width:62ch}
.sim-feature figcaption b{color:var(--ink);font-weight:600}
.sim-feature figcaption .credit{display:block;margin-top:4px;font-size:calc(12 * var(--kt));line-height:calc(18 * var(--kt));color:var(--ink-3)}
.sim-feature figcaption .credit a{color:inherit}
.sim-list-card{overflow:hidden}
.slc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--rule);font:600 14px/20px var(--body)}
.slc-head span + span{font:400 12px/16px var(--body);color:var(--ink-3)}
.sim-list{list-style:none;margin:0;padding:0}
.sim-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--rule);font-size:calc(14 * var(--kt));line-height:calc(20 * var(--kt))}
.sim-list li:last-child{border-bottom:0}
.sim-list li span:last-child{font:400 calc(12 * var(--kt))/calc(16 * var(--kt)) var(--body);color:var(--ink-2);text-align:right;white-space:nowrap}

/* ---- split layouts with a worked example beside the copy ---- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(56 * var(--k));align-items:start}
/* The worked example stays beside the copy while the reader goes down the list of facts. */
.two > .example{position:sticky;top:calc(var(--hdr) + 24px)}
.facts{display:grid;border-top:1px solid var(--rule)}
.facts > div{display:grid;align-content:start;grid-template-columns:168px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}
.facts h3{font-size:calc(15 * var(--kt));line-height:calc(24 * var(--kt))}
.facts p{font-size:calc(15 * var(--kt));line-height:calc(24 * var(--kt));color:var(--ink-2)}
.example{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.example .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule);font:400 calc(13 * var(--kt))/calc(20 * var(--kt)) var(--body);color:var(--ink-2)}
.example .bar b{color:var(--ink);font-weight:600;font-size:calc(14 * var(--kt))}
/* A placeholder that looks real must not pass as a customer: a dashed Example badge on both. */
.ex-badge{font:500 11px/16px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border:1px dashed var(--rule-2);border-radius:4px;padding:2px 6px;white-space:nowrap}
.tag{font:500 11px/16px var(--body);letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:var(--cobalt-wash);color:var(--cobalt);white-space:nowrap}
.tag.own{background:var(--tint);color:var(--ink);border:1px solid var(--tint-line)}
.course{list-style:none;margin:0;padding:0}
.course li{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--rule);font-size:calc(15 * var(--kt));line-height:calc(22 * var(--kt))}
.course li small{display:block;color:var(--ink-2);font-size:calc(13 * var(--kt));line-height:calc(20 * var(--kt))}
.ledger{font-family:var(--mono);font-size:calc(13 * var(--kt));line-height:calc(20 * var(--kt))}
.ledger > div{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.ledger time{color:var(--ink-2)}
.ledger .ok{color:var(--green)}
.ledger .warn{color:var(--warn)}
.caption{font-size:calc(13 * var(--kt));line-height:calc(20 * var(--kt));color:var(--ink-2);padding:12px 16px;background:rgba(255,255,255,.02)}

/* ---- practices ---- */
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cards2 + .more{display:inline-block;margin-top:calc(24 * var(--k))}
.scale{display:flex;gap:4px;margin-top:4px}
.scale i{font:500 calc(12 * var(--kt))/calc(16 * var(--kt)) var(--mono);font-style:normal;width:28px;height:24px;display:grid;place-items:center;border-radius:4px;border:1px solid var(--rule);color:var(--ink-2)}
.scale i.on{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}

/* ---- trust ---- */
.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(40 * var(--k))}
.trust-grid > div{display:grid;gap:12px;align-content:start;border-top:1px solid var(--rule-2);padding-top:24px}
.trust-grid h3{font-size:calc(18 * var(--kt));line-height:calc(26 * var(--kt))}
.trust-grid p{font-size:calc(15 * var(--kt));line-height:calc(24 * var(--kt));color:var(--ink-2)}
.srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.srcs span{font:500 calc(12 * var(--kt))/calc(16 * var(--kt)) var(--body);border:1px solid var(--rule-2);border-radius:4px;padding:4px 8px;color:var(--ink)}

/* ---- faq ---- */
.faq{display:grid;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding-block:16px}
.faq summary{cursor:pointer;font-weight:600;font-size:calc(16 * var(--kt));line-height:calc(26 * var(--kt));list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--cobalt);font-size:calc(20 * var(--kt));line-height:calc(26 * var(--kt))}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:8px;color:var(--ink-2);font-size:calc(15 * var(--kt));line-height:calc(24 * var(--kt));max-width:68ch}
.faq-more{display:contents}
.side-head .lede a{color:var(--cobalt)}

/* ---- "Show all N" ----
   site.js marks a [data-clip] list .clipped and adds a button after it. Without a script every
   item shows. data-clip="phone" cuts only on a phone. */
[data-clip="all"].clipped .clip-x{display:none}
.clip-btn{margin-top:16px}
.clip-btn.for-phone{display:none}

/* ---- the call-to-action band (home #pricing, every track page, All features) ---- */
.band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding:calc(40 * var(--k));border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(53,102,224,.16), rgba(24,29,42,.72));border:1px solid var(--tint-line)}
.band-copy{display:grid;gap:12px}
.band-copy .lede{max-width:60ch}
.band-act{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.band-mail{font-size:calc(13 * var(--kt));line-height:20px;color:var(--ink-2)}

/* ---- the pricing form: a dialog on every page, inline on Contact ----
   Fields as the audit's text field: label above, 44px, a 1px field-line border on the raised
   surface, focus as an accent border with a 3px halo, and an error as a red border with a red halo
   and an icon with words under the field. The dialog is a solid surface, not glass. */
.pf-dialog{width:min(640px, calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:clamp(16px, 7vh, 56px) auto auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.pf-dialog::backdrop{background:rgba(5,7,10,.72)}
.pf-card{display:flex;flex-direction:column;max-height:calc(100dvh - 48px);background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r-lg);box-shadow:0 32px 96px rgb(0 0 0 / .6)}
.pf-inline{max-height:none;box-shadow:none}
.pf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 24px 16px}
.pf-title{display:grid;gap:6px}
.pf-head h2{font:700 32px/1 var(--display);text-transform:uppercase}
.pf-sub{font-size:14px;line-height:22px;color:var(--ink-2)}
.pf-x{flex:none;width:36px;height:36px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.pf-x:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.pf{position:relative;display:flex;flex-direction:column;min-height:0;flex:1}
.pf-body{display:flex;flex-direction:column;gap:20px;padding:4px 24px 20px;overflow:auto;min-height:0}
.pf-row{display:grid;gap:16px}
.pf-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-3{grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr) minmax(0,.75fr)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label,.seg legend{font:500 14px/20px var(--body);color:var(--ink)}
input,select,textarea{font:inherit;font-size:calc(15 * var(--kt));line-height:calc(20 * var(--kt));font-weight:400;min-height:44px;padding:11px 12px;border:1px solid var(--field);border-radius:var(--r-sm);background:var(--raised);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(122,165,255,.28);outline:none}
textarea{min-height:96px;resize:vertical}
.field [aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,138,128,.2)}
.err{display:flex;gap:6px;align-items:flex-start;font:400 13px/18px var(--body);color:var(--red)}
.err::before{content:"!";flex:none;width:14px;height:14px;margin-top:2px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font:700 9px/1 var(--body)}
/* "I would like": three radio inputs drawn as a switch. The posted value is the option's text. */
.seg{margin:0;padding:0;border:0;min-width:0}
.seg legend{padding:0;margin-bottom:6px}
.seg-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:8px;border:1px solid var(--field);background:var(--raised)}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer}
.seg span{min-height:36px;display:flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:5px;font:400 14px/18px var(--body);color:var(--ink-2);text-align:center}
.seg input:hover + span{color:var(--ink)}
.seg input:checked + span{background:var(--fill);color:var(--on-fill);font-weight:600}
.seg input:focus-visible + span{outline:2px solid var(--cobalt);outline-offset:2px}
.pf-foot{display:flex;align-items:center;gap:12px;padding:16px 24px 24px;border-top:1px solid var(--rule)}
.pf-foot .note{font-size:13px;line-height:20px;color:var(--ink-2)}
.pf-actions{margin-left:auto;display:flex;gap:8px;flex:none}
/* A failed send: the inline error look, and the form stays filled. */
.sent{font-size:14px;line-height:20px}
.sent.bad{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-sm);color:var(--red);background:var(--red-wash);border:1px solid rgba(255,138,128,.36)}
.sent.bad::before{content:"!";flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font:700 10px/1 var(--body)}
/* Sent: a check, "Request sent", the address it will reply to, and Close. */
.pf.done .pf-body,.pf.done .pf-foot{display:none}
.pf-done{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px 24px 32px;text-align:center;flex:1}
.pf-check{width:56px;height:56px;border-radius:50%;background:rgba(76,207,143,.12);border:1px solid rgba(76,207,143,.4);display:grid;place-items:center;color:var(--green)}
.pf-done-h{font-size:20px;line-height:28px;outline:none}
.pf-done .sent{font-size:15px;line-height:24px;color:var(--ink-2);max-width:40ch}

/* ---- footer ----
   The JCAHPO non-affiliation line lives here, once, for every page (audit item 09). */
footer{color:var(--ink-2);padding-block:48px 40px;font-size:calc(14 * var(--kt));line-height:calc(22 * var(--kt));border-top:1px solid var(--rule)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:calc(40 * var(--k))}
.foot-brand{display:grid;gap:8px;align-content:start;max-width:38ch}
.foot-brand .brand{font-size:calc(20 * var(--k))}
.foot-fine{font-size:calc(12 * var(--kt));line-height:calc(18 * var(--kt));color:var(--ink-3)}
footer nav{display:grid;gap:8px;align-content:start}
footer nav h2{font:500 calc(12 * var(--kt))/calc(16 * var(--kt)) var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---- inner page heroes ---- */
.crumb{font:400 calc(13 * var(--kt))/calc(20 * var(--kt)) var(--body);color:var(--ink-2);display:flex;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--ink);text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.c-hero{padding-top:clamp(32px, calc(12vh - 40px), calc(72 * var(--k)))}
.c-hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:calc(56 * var(--k));align-items:start}
/* 72/68, the web hero size for an inner page: a step below the home hero, still the largest text
   here. FOUNDATIONS: is the longest word in any track title, so it scales down on narrow screens. */
.c-hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--ink);font-size:clamp(40px,5.6vw,calc(72 * var(--k)));line-height:.944;margin-top:16px}
.c-hero .sub{margin-top:20px}
.c-hero .ctas{margin-top:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips a{height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid var(--rule-2);color:var(--ink);text-decoration:none;font:500 13px/20px var(--body);white-space:nowrap}
.chips a:hover{border-color:var(--cobalt);background:var(--tint)}

/* ---- track page ----
   The exam card is glass with the eye-chart red rule under the big letters (owner decision,
   2026-10-13), no longer the only white surface on the site. */
.card-exam{background:var(--card);border:1px solid var(--rule-2);border-radius:var(--r-lg);overflow:hidden}
.ce-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:20px 24px 16px;border-bottom:2px solid var(--red)}
.card-exam .big{font:700 calc(64 * var(--k))/.9 var(--display);letter-spacing:.04em}
.ce-label{font:500 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-bottom:6px;text-align:right}
.card-exam dl{margin:0;padding:4px 24px;display:grid;grid-template-columns:auto 1fr}
.card-exam dt,.card-exam dd{margin:0;padding:11px 0;border-bottom:1px solid var(--rule)}
.card-exam dt{font:500 calc(12 * var(--kt))/20px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-right:16px}
.card-exam dd{font-size:calc(15 * var(--kt));line-height:20px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.card-exam .src{font-size:calc(13 * var(--kt));line-height:calc(20 * var(--kt));color:var(--ink-2);padding:12px 24px 18px}
/* The section bar, sticky under the header. It is not glass: the header keeps the only blur. */
/* The hero above already carries the section gap; the bar sits 48px under its content. */
.secbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hdr));z-index:15;margin:calc(-32 * var(--k)) 0 var(--gap);background:rgba(14,16,20,.94);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.secbar .wrap{display:flex;align-items:center;gap:12px;min-height:52px}
.secbar-links{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.secbar-links::-webkit-scrollbar{display:none}
.secbar-links a{flex:none;display:flex;align-items:center;height:52px;padding:0 12px;color:var(--ink-2);text-decoration:none;font:500 calc(14 * var(--kt))/20px var(--body);white-space:nowrap}
.secbar-links a:hover{color:var(--ink)}
.secbar-links a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--cobalt)}
.secbar .sh{display:none}
.secbar .btn{flex:none}
.bp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:calc(28 * var(--k))}
.bp-head .sec-head{margin:0}
.bp-share{flex:none;font-size:13px;line-height:20px;color:var(--ink-3)}
.bp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--rule-2)}
.bp-col{display:flex;flex-direction:column}
.bp-row{display:grid;grid-template-columns:minmax(0,1fr) 140px 40px;gap:16px;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule);font-size:calc(14 * var(--kt));line-height:calc(20 * var(--kt))}
.bp-row.plain{grid-template-columns:minmax(0,1fr)}
.bp-row.plain:has(.bp-num){grid-template-columns:28px minmax(0,1fr)}
.bp-num{font:500 12px/20px var(--mono);color:var(--ink-3)}
.bp-bar{height:6px;background:var(--cobalt-wash);border-radius:3px;overflow:hidden}
.bp-bar i{display:block;height:100%;border-radius:3px;background:var(--cobalt)}
.bp-row b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.bp-note{margin-top:20px;font-size:calc(14 * var(--kt));line-height:calc(22 * var(--kt));color:var(--ink-2);max-width:96ch}
.elig-get{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:calc(40 * var(--k));align-items:stretch}
.elig-card{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--rule)}
.card-h{font:500 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.elig{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.elig li{position:relative;padding-left:20px;font-size:calc(15 * var(--kt));line-height:calc(24 * var(--kt))}
.elig li::before{content:"";position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--cobalt)}
.elnote{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);font-size:13px;line-height:20px;color:var(--ink-2)}
.get{display:flex;flex-direction:column;gap:20px}
.get .sec-head{margin:0}
.get h2{font-size:clamp(36px, 4.4vw, calc(48 * var(--k)))}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:auto}
.stats .kpi{padding:16px}
.stats .kpi b{font-size:calc(36 * var(--k))}
.stats .kpi .pl{color:var(--ink)}
.otherc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:baseline;padding:16px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--rule);color:var(--ink);text-decoration:none}
.ot:hover{border-color:rgba(122,165,255,.45)}
.ot .lvl{grid-column:1/-1;font:500 11px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ot-n{font:700 24px/1 var(--display);text-transform:uppercase}
.ot .arr{color:var(--cobalt)}

/* ---- All features ---- */
.fgroup{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding-top:24px;margin-top:32px;border-top:1px solid var(--rule-2)}
.fg-h{font-size:calc(18 * var(--kt));line-height:calc(26 * var(--kt))}
.fcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.fcards .glass-card{padding:20px}
.kpis-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpis-2 .ps{color:var(--ink-2)}
.log{list-style:none;margin:0;padding:0 0 0 24px;border-left:2px solid var(--rule);display:grid;gap:22px}
.log li{position:relative;display:grid;gap:4px}
.log li::before{content:"";position:absolute;left:-31px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--cobalt)}
.log-wrap > .log > li:first-child::before{background:var(--cobalt)}
.log time{font:400 calc(13 * var(--kt))/calc(20 * var(--kt)) var(--body);color:var(--ink-2)}
.log h3{font-size:calc(16 * var(--kt));line-height:calc(24 * var(--kt))}
.log p{font-size:calc(15 * var(--kt));line-height:calc(24 * var(--kt));color:var(--ink-2)}
.log-older summary{display:inline-flex;align-items:center;min-height:40px;margin:20px 0 0 24px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--rule-2);
  font:500 14px/20px var(--body);color:var(--ink);cursor:pointer;list-style:none}
.log-older summary::-webkit-details-marker{display:none}
.log-older summary:hover{border-color:var(--cobalt);background:var(--tint)}
.log-older .when-open,.log-older[open] .when-closed{display:none}
.log-older[open] .when-open{display:inline}
.log-older .log{margin-top:22px}

/* ---- Security ---- */
.glance{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0 0 56px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--rule);overflow:hidden}
.glance > div{display:flex;flex-direction:column;gap:6px;padding:18px;border-right:1px solid var(--rule)}
.glance > div:last-child{border-right:0}
.glance dt{font:500 12px/16px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.glance dd{margin:0;font:600 calc(15 * var(--kt))/calc(22 * var(--kt)) var(--body)}
.sgroup{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding-top:24px;margin-bottom:56px;border-top:1px solid var(--rule-2)}
.sg-h{font:600 calc(18 * var(--kt))/calc(26 * var(--kt)) var(--body);text-transform:none;letter-spacing:0}
.sitems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}
.sitems > div{display:grid;gap:6px;align-content:start}
.sitems h3{font-size:calc(16 * var(--kt));line-height:calc(24 * var(--kt))}
.sitems p{font-size:calc(15 * var(--kt));line-height:calc(24 * var(--kt));color:var(--ink-2)}
.callout{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:var(--r-md);border:1px solid var(--tint-line);background:rgba(122,165,255,.08);color:var(--cobalt)}
.callout svg{flex:none}
.callout p{color:var(--ink);font-size:calc(15 * var(--kt));line-height:calc(24 * var(--kt))}

/* ---- Privacy and Terms: one legal template ----
   Contents in a sticky column, the document in a 720px article. Every h2 is an anchor. */
.c-hero .pill{display:inline-flex;align-items:center;min-height:26px;margin-top:16px;padding:0 10px;border-radius:999px;border:1px solid var(--rule-2);font:400 13px/20px var(--body);color:var(--ink)}
.legal-sec{margin-top:calc(-40 * var(--k))}
.legal{display:grid;grid-template-columns:260px minmax(0,1fr);gap:calc(56 * var(--k));align-items:start}
.toc{position:sticky;top:calc(var(--hdr) + 24px);display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - var(--hdr) - 48px);overflow:auto;padding-top:32px;border-top:1px solid var(--rule)}
.toc-h{padding:0 12px 8px;font:500 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.toc ol,.toc-m ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.toc ol{gap:2px}
.toc a{min-height:34px;display:flex;align-items:center;padding:4px 12px;border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;font:400 14px/20px var(--body)}
.toc a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.toc a.on{background:var(--tint);color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--cobalt)}
.toc-m{display:none}
.doc{max-width:calc(720 * var(--kt));display:flex;flex-direction:column;gap:16px;padding-top:32px;border-top:1px solid var(--rule);font-size:calc(16 * var(--kt));line-height:calc(27 * var(--kt));color:var(--ink-2)}
.doc h2{font:600 calc(24 * var(--kt))/calc(32 * var(--kt)) var(--body);text-transform:none;letter-spacing:0;color:var(--ink);margin-top:16px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:calc(16 * var(--kt));line-height:calc(26 * var(--kt));margin-top:8px;color:var(--ink)}
.doc ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.doc b{color:var(--ink)}

/* ---- Contact ---- */
.contact .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:calc(56 * var(--k))}
.contact{padding-bottom:var(--gap)}
.routes{list-style:none;counter-reset:route;margin:32px 0 0;padding:0;border-top:1px solid var(--rule)}
.routes li{counter-increment:route;position:relative;display:grid;gap:6px;padding:20px 0 20px 50px;border-bottom:1px solid var(--rule)}
.routes li::before{content:counter(route);position:absolute;left:0;top:20px;width:36px;height:36px;border-radius:10px;background:var(--tint);border:1px solid var(--tint-line);
  display:grid;place-items:center;font:700 16px/1 var(--display);color:var(--cobalt)}
.routes h3{font-size:calc(17 * var(--kt));line-height:calc(24 * var(--kt))}
.routes p{font-size:calc(15 * var(--kt));line-height:calc(24 * var(--kt));color:var(--ink-2)}
.contact-line{margin-top:20px;font-size:calc(15 * var(--kt));color:var(--ink-2)}

/* ---- narrow screens ---- */
@media (max-width:980px){
  .nav{display:none}
  .top-actions > .btn{display:none}
  .menu{display:block}
  .hero .wrap,.sim-grid,.two,.founder,.c-hero .wrap,.split2,.elig-get,.fgroup,.sgroup,.contact .wrap{grid-template-columns:minmax(0,1fr)}
  .two > .example{position:static}
  .kpis,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ladder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ladder::before,.ladder > .rung::before{display:none}
  .trust-grid{grid-template-columns:1fr 1fr}
  .otherc{grid-template-columns:repeat(3,minmax(0,1fr))}
  .glance{grid-template-columns:repeat(3,minmax(0,1fr))}
  .glance > div{border-bottom:1px solid var(--rule)}
  .legal{grid-template-columns:200px minmax(0,1fr);gap:32px}
  .fgroup,.sgroup{gap:16px}
  .split2{gap:24px}
}
@media (max-width:640px){
  :root{--gap:48px;--hdr:56px}
  .wrap{padding-inline:16px}
  .top .wrap{gap:8px}
  .brand{font-size:18px;line-height:18px;gap:8px}
  .brand svg{width:24px;height:24px}
  .signin{padding:0 8px}
  h2{font-size:40px}
  .hero{padding-top:36px}
  .hero-copy .sub,.c-hero .sub{font-size:17px;line-height:27px}
  /* Phone order: headline, lede and buttons, then the screenshot, then the outcomes. */
  .hero .wrap{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .hero-copy{display:contents}
  .hero-copy > *{justify-self:start}
  .outcomes{order:2;margin-top:0}
  .outcomes > div{grid-template-columns:1fr;gap:2px}
  .hero .ctas{flex-direction:column;align-items:stretch;gap:4px}
  .hero .ctas .btn-primary{min-height:48px}
  .hero .ctas .textlink{justify-content:center;min-height:44px}
  .sim-bar > span:first-child{flex-basis:100%}
  .proof{margin-top:0}
  .kpis{gap:12px}
  .kpi{padding:14px;gap:4px}
  .kpi b{font-size:32px}
  .founder{padding-block:28px;gap:14px;background-size:calc(100% - 32px) 1px}
  .founder blockquote p{font-size:19px;line-height:29px}
  .founder blockquote p + p{font-size:16px;line-height:26px}
  .duo-head{display:none}
  .duo-row{grid-template-columns:1fr}
  .duo-row p{padding:12px 14px;gap:10px;font-size:14px;line-height:22px}
  .duo-row .b{border-left:0}
  .duo-row .a::before,.duo-row .b::before{content:"1";width:20px;height:20px;margin:1px 0 0;border:1px solid var(--rule-2);border-radius:50%;background:none;transform:none;
    display:grid;place-items:center;font:700 12px/1 var(--display);color:var(--ink-2)}
  .duo-row .b::before{content:"2";background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
  /* The ladder runs down the left edge. */
  .ladder{grid-template-columns:1fr;gap:10px;padding:0 0 0 22px}
  .ladder::before{display:block;left:4px;right:auto;top:22px;bottom:22px;width:1px;height:auto;background:linear-gradient(180deg, rgba(122,165,255,.25), rgba(122,165,255,.9))}
  .ladder > .rung::before{display:block;left:-24px;top:20px}
  .rung,.rung.side{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 8px;min-height:0;padding:14px 16px}
  .rung h3{order:1;font-size:26px}
  .rung .lvl{order:2;font-size:11px}
  .rung p,.rung .spec,.rung .more{order:3;flex-basis:100%}
  .rung .spec{padding-top:0;border-top:0;margin-top:4px}
  .side-name{display:contents}
  .side-body{display:contents}
  .sidetracks{grid-template-columns:1fr;gap:10px}
  .ladder + .group-h{margin-top:20px}
  .qtabs{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0;margin:0 -16px 16px 0;border:0;background:none;gap:6px;scrollbar-width:none}
  .qtabs::-webkit-scrollbar{display:none}
  .qtab{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--rule-2)}
  .qtab[aria-selected="true"]{border-color:var(--fill)}
  .qs .q{padding:16px;gap:14px}
  .qs .stem{font-size:18px;line-height:27px}
  /* The verdict drops under the option text rather than squeezing it into a narrow column. */
  .opt{grid-template-columns:22px 1fr;font-size:15px;line-height:22px}
  .opt .mk{grid-column:2/-1;grid-row:2;line-height:16px}
  .sim-shots{gap:20px}
  .sim-feature figcaption{font-size:14px;line-height:22px}
  .sim-list li{grid-template-columns:1fr;gap:0;padding:9px 14px}
  .sim-list li span:last-child{text-align:left}
  .facts > div{grid-template-columns:1fr;gap:4px}
  .two{gap:24px}
  .two.mirror > .example{order:2}
  .ledger > div{grid-template-columns:1fr;gap:2px}
  .cards2{grid-template-columns:1fr;gap:10px}
  .glass-card{padding:16px}
  .trust-grid{grid-template-columns:1fr;gap:20px}
  .trust-grid > div{padding-top:16px}
  [data-clip="phone"].clipped .clip-x{display:none}
  .clip-btn.for-phone{display:flex;width:100%}
  .clip-btn{width:100%;min-height:44px}
  .band{grid-template-columns:1fr;gap:14px;padding:24px 20px}
  .band-act{align-items:stretch}
  .band-mail{text-align:center}
  /* Facts, features and security statements as accordions on a phone (site.js). */
  [data-acc].acc-on > div{display:block;padding:0;margin:0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none}
  [data-acc].acc-on > div > :not(:first-child){padding-bottom:14px}
  [data-acc].acc-on > div.acc-shut > :not(:first-child){display:none}
  .acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:12px 0;border:0;background:none;color:var(--ink);
    font:600 15px/24px var(--body);text-align:left;cursor:pointer}
  .acc-btn::after{content:"\2212";font:400 18px/24px var(--mono);color:var(--cobalt)}
  .acc-shut .acc-btn::after{content:"+"}
  .fcards,.sitems{grid-template-columns:1fr;gap:0}
  [data-acc].acc-on{border-top:1px solid var(--rule)}
  .fg-h,.sg-h{font:500 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
  .fgroup,.sgroup{border-top:0;padding-top:0;gap:8px;margin:28px 0 0}
  .sgroup{margin-bottom:0}
  .glance{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:12px}
  .glance > div{padding:12px}
  .glance > div:nth-child(2n){border-right:0}
  .glance dd{font-size:14px;line-height:20px}
  .callout{margin-top:28px;padding:16px;align-items:flex-start}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .kpis-2 .kpi b{font-size:32px}
  /* Track page */
  .c-hero{padding-top:28px}
  .c-hero .wrap{gap:20px}
  .c-hero .ctas{flex-direction:column;align-items:stretch;gap:4px}
  .c-hero .ctas .textlink{justify-content:center;min-height:44px}
  .card-exam .big{font-size:48px}
  .ce-top{padding:14px 16px 12px}
  .card-exam dl{padding:0 16px}
  .card-exam dt,.card-exam dd{padding:10px 0}
  .card-exam .src{padding:10px 16px 14px;font-size:12px;line-height:18px}
  .secbar{margin-top:-24px}
  .secbar .wrap{min-height:0;padding-block:10px;padding-right:0}
  .secbar-links{gap:6px}
  .secbar-links a{height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--rule-2);font-size:13px}
  .secbar-links a.on{box-shadow:none;background:rgba(122,165,255,.16);border-color:rgba(122,165,255,.45)}
  .secbar .lg,.secbar .btn{display:none}
  .secbar .sh{display:inline}
  .bp-head{flex-direction:column;align-items:flex-start;gap:8px}
  .bp{grid-template-columns:1fr}
  .bp-row{grid-template-columns:minmax(0,1fr) 44px;gap:6px 12px}
  .bp-bar{grid-column:1/-1;grid-row:2;height:5px}
  .elig-card{padding:18px}
  .stats{gap:10px}
  .stats .kpi b{font-size:30px}
  .otherc{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ot{padding:12px 14px}
  .ot-n{font-size:20px}
  /* Privacy and Terms: "On this page" folds under the title. */
  .legal-sec{margin-top:-24px}
  .legal{grid-template-columns:1fr;gap:24px}
  .toc{display:none}
  .toc-m{display:block;border-radius:var(--r-md);background:var(--raised);border:1px solid var(--rule-2);overflow:hidden}
  .toc-m summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font:600 14px/20px var(--body);cursor:pointer;list-style:none}
  .toc-m summary::-webkit-details-marker{display:none}
  .toc-m summary::after{content:"+";font:400 18px/1 var(--mono);color:var(--cobalt)}
  .toc-m[open] summary::after{content:"\2212"}
  .toc-m[open] summary{border-bottom:1px solid var(--rule)}
  .toc-m a{min-height:40px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--ink);text-decoration:none;font-size:14px}
  .toc-m li:last-child a{border-bottom:0}
  .doc{border-top:0;padding-top:0}
  /* Contact: the routes as cards. */
  .routes{border-top:0;display:grid;gap:10px;margin-top:24px}
  .routes li{padding:16px 16px 16px 62px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--card)}
  .routes li::before{left:14px;top:16px}
  /* The pricing dialog becomes a full-height sheet. */
  .pf-dialog{width:100%;height:100%;max-width:100%;max-height:100%;margin:0}
  .pf-dialog .pf-card{height:100%;max-height:none;border:0;border-radius:0}
  .pf-dialog .pf-head{padding:12px 8px 12px 16px;border-bottom:1px solid var(--rule)}
  .pf-dialog .pf-head h2{font-size:24px}
  .pf-x{width:44px;height:44px}
  .pf-body{padding:16px}
  .pf-head{padding:20px 16px 12px}
  .pf-2,.pf-3{grid-template-columns:1fr}
  input,select{min-height:48px}
  .pf-foot{flex-direction:column;align-items:stretch;padding:12px 16px 16px}
  .pf-actions{margin-left:0}
  .pf-actions .btn{flex:1;min-height:48px}
  .pf-done-close{width:100%;min-height:48px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px 16px}
  .foot-brand{grid-column:1/-1;max-width:none}
  footer{padding-block:32px}
  footer nav{gap:0}
  footer nav a{min-height:32px;display:flex;align-items:center}
}
@media (min-width:641px) and (max-width:980px){
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1;max-width:none}
}
@media (prefers-reduced-motion: no-preference){
  .hero h1,.hero-copy .sub,.outcomes{animation:rise .7s ease-out both}
  .hero-copy .sub{animation-delay:.12s}
  .outcomes{animation-delay:.2s}
  @keyframes rise{from{transform:translateY(12px)}to{transform:none}}
}
@media (prefers-reduced-motion: reduce){
  .btn,.rung,.dd > summary svg{transition:none}
}