/* Guideling — the public website.
 *
 * Drawn from the Guideling design system (project 1d4f533f-e257-4991-b111-b32151649bb2),
 * which is the same system the iOS app is drawn from. The tokens below are copied from
 * that project's `tokens/*.css` verbatim; everything under "site" is layout that the
 * design system does not model, built in its grammar rather than in a framework's.
 *
 * Four rules from the system are load-bearing here too:
 *   1. Never draw a guess as a measurement.
 *   2. No idle motion, ever — no spinners, no scroll reveals, no parallax, no shimmer.
 *   3. Silence is drawn as a fact about the past, never as an absence.
 *   4. Quiet and broken must never be confusable.
 *
 * Dark only, on purpose, and there is no light set to fall back to: the design system has
 * one palette. A light mode invented for this site alone would be a treatment nobody
 * specified, and it would have to decide for itself when to apply — which is the half of
 * the problem the app never solved either.
 */

/* ─────────────────────────────────────────── fonts
 * Self-hosted, subset to latin + latin-ext, from the same OFL binaries the iOS app bundles
 * (`ios/App/GuideApp/Fonts/`). The design system's `tokens/fonts.css` pulls these from
 * Google Fonts; that would put a third-party request on the first page of a product whose
 * pitch is that it keeps your position to itself. 127 KB for all five faces is cheaper than
 * the explanation. */
@font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
color-scheme:dark;

/* ── base ramp ── */
--ink-950:#050708;--ink-900:#080B0D;--ink-850:#0C1013;--ink-800:#111619;
--ink-750:#161C20;--ink-700:#1C2328;--ink-650:#232B31;--ink-600:#2B343A;--ink-500:#374249;
--ink-400:#48545C;
--slate-500:#5C6A73;--slate-400:#71818B;--slate-300:#8C9BA4;--slate-200:#A9B6BD;--slate-100:#C8D2D7;
--paper-100:#E4EAED;--paper-50:#F2F6F8;--white:#FFFFFF;

/* ── signal hues. Hue carries state, brightness carries relevance, one saturated hue at a time. ── */
--amber-600:#B87A22;--amber-500:#E39B33;--amber-400:#F2A93B;--amber-300:#F7C070;--amber-100:#FAE0B8;
--ice-600:#3F565F;--ice-500:#5E7C89;--ice-400:#7E9DAA;--ice-300:#A9C4D0;
--clay-600:#9C3A29;--clay-500:#C24B36;--clay-400:#D9553F;--clay-200:#EFA697;

/* ── surfaces ── */
--surface-base:var(--ink-900);
--surface-card:var(--ink-800);
--surface-raised:var(--ink-750);
--surface-sunken:var(--ink-950);
--surface-input:var(--ink-700);
--surface-hit:rgba(201,213,219,.10);

/* ── text ── */
--text-glance:var(--paper-50);
--text-primary:var(--paper-100);
--text-secondary:var(--slate-200);
--text-tertiary:var(--slate-400);
--text-quiet:var(--slate-500);
--text-on-amber:#160E02;
--text-link:var(--amber-300);
--text-link-hover:var(--amber-100);

/* ── borders & focus ── */
--border-hairline:rgba(168,182,190,.14);
--border-soft:rgba(168,182,190,.22);
--border-strong:rgba(168,182,190,.38);
--focus-ring:var(--amber-300);

/* ── state vocabulary ── */
--state-candidate:var(--slate-400);
--state-scheduled:var(--amber-400);
--state-speaking:var(--amber-300);
--state-heard:var(--ice-400);
--state-dropped:var(--ink-500);
--state-quiet:var(--slate-400);
--state-fault:var(--clay-400);

/* ── certainty ── */
--certainty-measured:var(--paper-50);
--certainty-inferred:var(--slate-200);
--certainty-unknown:var(--slate-500);

/* ── type ── */
--font-core:'IBM Plex Sans','SF Pro Text',system-ui,-apple-system,'Helvetica Neue',sans-serif;
--font-mono:'IBM Plex Mono','SF Mono',ui-monospace,Menlo,monospace;
--font-weight-regular:400;--font-weight-text:450;--font-weight-medium:500;
--font-weight-semibold:600;--font-weight-bold:700;
--type-title:24px;--lh-title:30px;--ls-title:-0.01em;
--type-heading:19px;--lh-heading:25px;--ls-heading:-0.005em;
--type-body:17px;--lh-body:25px;
--type-body-sm:15px;--lh-body-sm:21px;
--type-caption:13px;--lh-caption:17px;--ls-caption:0.01em;
--type-label:13px;--lh-label:15px;--ls-label:0.09em;
--type-data:15px;--lh-data:20px;
--type-data-sm:13px;--lh-data-sm:18px;
--tnum:"tnum" 1,"lnum" 1;

/* ── spacing ── */
--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;
--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:56px;
--space-12:72px;--space-13:96px;
--target-min:44px;

/* ── radii and semantic strokes ── */
--radius-1:4px;--radius-2:8px;--radius-3:14px;--radius-4:20px;--radius-5:28px;
--radius-pill:999px;--radius-circle:50%;
--stroke-hairline:1px;--stroke-hollow:2px;--stroke-live:2.5px;

/* ── elevation ── */
--elev-1:0 1px 0 0 rgba(255,255,255,.04) inset;
--elev-2:0 2px 10px rgba(0,0,0,.45);
--elev-3:0 6px 26px rgba(0,0,0,.58);
--ring-focus:0 0 0 3px rgba(247,192,112,.55);

/* ── motion. Two sanctioned cases only: acknowledge a state change, or depict a
 * measurement. A website has no measurements, so only the first applies. ── */
--dur-state:140ms;
--ease-state:cubic-bezier(.32,.72,.32,1);

/* ── site layout (not modelled by the design system) ── */
--measure:34rem;        /* prose column: ~68 characters at 17px */
--page-max:66rem;
--gutter:var(--space-6);
}

@media (prefers-reduced-motion:reduce){:root{--dur-state:0ms}}

/* ─────────────────────────────────────────── reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--surface-base);
color:var(--text-primary);
font:var(--font-weight-regular) var(--type-body)/var(--lh-body) var(--font-core);
text-wrap:pretty;
-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure,table,blockquote{margin:0}
ul,ol{padding:0;list-style:none}

a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur-state) var(--ease-state)}
a:hover{color:var(--text-link-hover)}
/* The system's 3px amber ring at 55%. `outline` rather than `box-shadow`: a
 * shadow ring needs a radius to sit on, and setting one here squared off the
 * pill button and the 14px input the moment either took focus. An outline
 * follows the element's own radius. */
:focus-visible{outline:3px solid rgba(247,192,112,.55);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--space-5);top:var(--space-5);z-index:10;background:var(--surface-raised);padding:var(--space-4) var(--space-5);border-radius:var(--radius-2)}

/* ─────────────────────────────────────────── type recipes */
.label{font:var(--font-weight-semibold) var(--type-label)/var(--lh-label) var(--font-core);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-tertiary)}
.num,.mono{font-family:var(--font-mono);font-feature-settings:var(--tnum);font-variant-numeric:tabular-nums lining-nums}
.caption{font:var(--font-weight-regular) var(--type-caption)/var(--lh-caption) var(--font-core);letter-spacing:var(--ls-caption);color:var(--text-tertiary)}
.lede{font-size:var(--type-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);color:var(--text-secondary);font-weight:var(--font-weight-regular)}
.quiet{color:var(--text-quiet)}

/* ─────────────────────────────────────────── page frame */
.page{max-width:var(--page-max);margin:0 auto;padding-inline:var(--gutter)}
.prose{max-width:var(--measure)}
.prose > * + *{margin-top:var(--space-6)}

/* ─────────────────────────────────────────── masthead */
.masthead{border-bottom:var(--stroke-hairline) solid var(--border-hairline);background:var(--surface-base)}
.masthead__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:64px;flex-wrap:wrap}
.wordmark{display:inline-flex;align-items:center;gap:var(--space-4);color:var(--text-glance);text-decoration:none;font-weight:var(--font-weight-semibold);letter-spacing:-0.01em;font-size:var(--type-heading)}
.wordmark:hover{color:var(--text-glance)}
.wordmark svg{color:var(--amber-400);flex:none}
.nav{display:flex;gap:var(--space-6);flex-wrap:wrap;align-items:center}
.nav a{color:var(--text-secondary);text-decoration:none;font-size:var(--type-body-sm);line-height:var(--target-min)}
.nav a:hover{color:var(--text-glance)}
.nav a[aria-current="page"]{color:var(--text-glance)}

/* ─────────────────────────────────────────── sections */
.band{padding-block:var(--space-12);border-top:var(--stroke-hairline) solid var(--border-hairline)}
.band:first-of-type{border-top:0}
.band--sunken{background:var(--surface-sunken)}
.band__head{max-width:var(--measure)}
.band__head .label{display:block;margin-bottom:var(--space-4)}
h1{font-size:clamp(34px,6vw,52px);line-height:1.08;letter-spacing:-0.025em;font-weight:var(--font-weight-semibold);color:var(--text-glance)}
h2{font-size:clamp(24px,3.4vw,32px);line-height:1.16;letter-spacing:-0.018em;font-weight:var(--font-weight-semibold);color:var(--text-glance)}
h3{font-size:var(--type-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-weight:var(--font-weight-semibold);color:var(--text-primary)}
.band__head + *{margin-top:var(--space-9)}

/* ─────────────────────────────────────────── hero */
.hero{padding-block:var(--space-13) var(--space-12)}
.hero h1{max-width:18ch}
.hero .lede{margin-top:var(--space-7);max-width:var(--measure)}

/* ─────────────────────────────────────────── grids */
.grid{display:grid;gap:var(--space-6)}
@media (min-width:44rem){
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ─────────────────────────────────────────── the state vocabulary, reused verbatim */
.pip{display:inline-block;width:9px;height:9px;border-radius:var(--radius-circle);flex:none;vertical-align:baseline}
.pip--hollow{border:var(--stroke-hollow) solid currentColor}
.pip--filled{background:currentColor}
.state{display:inline-flex;align-items:center;gap:var(--space-3);font:var(--font-weight-semibold) var(--type-label)/var(--lh-label) var(--font-core);letter-spacing:var(--ls-label);text-transform:uppercase}
.state--quiet{color:var(--state-quiet)}
.state--scheduled{color:var(--state-scheduled)}
.state--heard{color:var(--state-heard)}
.state--fault{color:var(--state-fault)}

/* ─────────────────────────────────────────── tables of parameters */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:30rem;font-size:var(--type-body-sm);line-height:var(--lh-body-sm)}
caption{text-align:left;color:var(--text-tertiary);font-size:var(--type-caption);line-height:var(--lh-caption);letter-spacing:var(--ls-caption);padding-bottom:var(--space-4)}
th,td{text-align:left;padding:var(--space-4) var(--space-5);border-bottom:var(--stroke-hairline) solid var(--border-hairline);vertical-align:top}
thead th{font:var(--font-weight-semibold) var(--type-label)/var(--lh-label) var(--font-core);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap}
td.n,th.n{font-family:var(--font-mono);font-feature-settings:var(--tnum);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;color:var(--text-primary)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* ─────────────────────────────────────────── lists */
.rule-list{border-top:var(--stroke-hairline) solid var(--border-hairline)}
.rule-list > li{border-bottom:var(--stroke-hairline) solid var(--border-hairline);padding-block:var(--space-6)}
.rule-list h3{margin-bottom:var(--space-3)}
.rule-list p{color:var(--text-secondary);font-size:var(--type-body-sm);line-height:var(--lh-body-sm)}
.bullets{max-width:var(--measure)}
.bullets li{position:relative;padding-left:var(--space-6);color:var(--text-secondary)}
.bullets li + li{margin-top:var(--space-4)}
.bullets li::before{content:"·";position:absolute;left:var(--space-3);color:var(--text-tertiary)}

/* ─────────────────────────────────────────── controls
 * One control, one meaning. Every control carries a word; there are no icon-only
 * buttons on this site. Press is a brightness drop, never a scale. */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
min-height:var(--target-min);padding:var(--space-4) var(--space-7);
border-radius:var(--radius-pill);border:var(--stroke-hairline) solid transparent;
font:var(--font-weight-semibold) var(--type-body)/1 var(--font-core);
text-decoration:none;cursor:pointer;
transition:filter var(--dur-state) var(--ease-state),color var(--dur-state) var(--ease-state);
}
.btn--primary{background:var(--amber-400);color:var(--text-on-amber)}
.btn--primary:hover{color:var(--text-on-amber);filter:brightness(1.06)}
.btn--primary:active{filter:brightness(.86)}
.btn--secondary{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn--secondary:hover{color:var(--text-glance);background:var(--surface-hit)}
.btn--secondary:active{filter:brightness(.86)}
.btn[disabled]{opacity:.42;cursor:default}

/* ─────────────────────────────────────────── the waitlist form */
.signup{max-width:var(--measure)}
.signup__row{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-6)}
.signup input[type=email]{
flex:1 1 16rem;min-height:var(--target-min);
padding:var(--space-4) var(--space-5);
background:var(--surface-input);color:var(--text-primary);
border:var(--stroke-hairline) solid var(--border-soft);border-radius:var(--radius-3);
font:var(--font-weight-regular) var(--type-body)/1.2 var(--font-core);
}
.signup input[type=email]::placeholder{color:var(--text-quiet)}
/* Honeypot. Off-screen rather than display:none, which some autofillers skip. */
.signup__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup__note{margin-top:var(--space-5);color:var(--text-tertiary);font-size:var(--type-caption);line-height:var(--lh-caption)}
/* Outcome. States a fact, in the state vocabulary — never a spinner, and the failure
 * says what is true and what happens next, in that order. */
.signup__result{margin-top:var(--space-6);display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--type-body-sm);line-height:var(--lh-body-sm)}
.signup__result .pip{margin-top:6px}
.signup__result[data-state="ok"]{color:var(--state-heard)}
.signup__result[data-state="fault"]{color:var(--state-fault)}
.signup__result[hidden]{display:none}

/* ─────────────────────────────────────────── diagram */
.figure{margin-top:var(--space-9)}
.figure svg{display:block;width:100%;height:auto;background:var(--surface-sunken);border:var(--stroke-hairline) solid var(--border-hairline);border-radius:var(--radius-4)}
.figure figcaption{margin-top:var(--space-5);color:var(--text-tertiary);font-size:var(--type-caption);line-height:var(--lh-caption);max-width:var(--measure)}

/* ─────────────────────────────────────────── faq */
.qa{border-top:var(--stroke-hairline) solid var(--border-hairline);max-width:var(--measure)}
.qa > div{border-bottom:var(--stroke-hairline) solid var(--border-hairline);padding-block:var(--space-7)}
.qa h3{margin-bottom:var(--space-4)}
.qa p{color:var(--text-secondary);font-size:var(--type-body-sm);line-height:var(--lh-body-sm)}
.qa p + p{margin-top:var(--space-4)}

/* ─────────────────────────────────────────── footer */
.foot{border-top:var(--stroke-hairline) solid var(--border-hairline);padding-block:var(--space-9);color:var(--text-tertiary);font-size:var(--type-body-sm);line-height:var(--lh-body-sm)}
.foot__row{display:flex;justify-content:space-between;gap:var(--space-7);flex-wrap:wrap}
.foot a{color:var(--text-secondary);text-decoration:none}
.foot a:hover{color:var(--text-glance)}
.foot ul{display:flex;gap:var(--space-6);flex-wrap:wrap}

/* ─────────────────────────────────────────── nav call to action
 * One button in the masthead, rightmost, and it is an absolute link rather than
 * a fragment: `#beta` was a dead anchor on every page except the front one. */
.nav a.btn{min-height:36px;padding:var(--space-3) var(--space-6);font-size:var(--type-body-sm);line-height:1}
.nav a.btn--primary,.nav a.btn--primary:hover{color:var(--text-on-amber)}

/* ─────────────────────────────────────────── hero, split
 * Copy left, the real app right. Stacks below 56rem, copy first: on a phone the
 * recording of a phone is not what should be above the fold. */
@media (min-width:56rem){
.hero--split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-12);align-items:center}
.hero--split h1{max-width:13ch}
}
.hero__sub{margin-top:var(--space-6);max-width:var(--measure);color:var(--text-tertiary)}
.hero__actions{margin-top:var(--space-9);display:flex;gap:var(--space-5);flex-wrap:wrap}
.hero__meta{margin-top:var(--space-7)}
@media (max-width:55.99rem){.shot--hero{margin-top:var(--space-11)}}

/* ─────────────────────────────────────────── the phone
 * A frame around a real capture — the simulator's status bar is cropped off,
 * the Apple Maps attribution at the bottom is kept, as MapKit's terms need. */
.shot{margin:0}
.phone{
max-width:18rem;margin-inline:auto;
border:6px solid var(--ink-700);border-radius:var(--radius-5);
overflow:hidden;background:var(--ink-850);box-shadow:var(--elev-3);
}
.phone video,.phone img{display:block;width:100%;height:auto;aspect-ratio:660/1434}
.phone{position:relative}
.phone__play{position:absolute;left:50%;top:40%;transform:translateX(-50%);box-shadow:var(--elev-3);white-space:nowrap}

/* ─────────────────────────────────────────── section intro */
.intro{max-width:var(--measure)}
.intro p{margin-top:var(--space-5);color:var(--text-secondary)}
.intro p.note,.note{color:var(--text-tertiary);font-size:var(--type-body-sm);line-height:var(--lh-body-sm)}
.intro + *{margin-top:var(--space-9)}
p.note{margin-top:var(--space-7);max-width:var(--measure)}

/* ─────────────────────────────────────────── recordings
 * A list, not cards. The bar is the one sanctioned motion that is not a state
 * change: it depicts a measurement, how much of the recording has played. */
.clips{border-top:var(--stroke-hairline) solid var(--border-hairline)}
.clip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-6);padding-block:var(--space-7);border-bottom:var(--stroke-hairline) solid var(--border-hairline)}
.clip__body{max-width:40rem}
.clip h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4)}
.clip__meta{font:var(--font-weight-regular) var(--type-data-sm)/var(--lh-data-sm) var(--font-mono);font-feature-settings:var(--tnum);color:var(--text-tertiary)}
.clip p{margin-top:var(--space-3);color:var(--text-secondary)}
.clip audio{margin-top:var(--space-5);width:100%;max-width:22rem}
.clip__bar{display:none;margin-top:var(--space-5);height:3px;max-width:22rem;border-radius:var(--radius-pill);background:var(--ink-650);overflow:hidden}
.clip__bar i{display:block;height:100%;width:0;background:var(--state-speaking)}
.clip.is-live .clip__bar,.clip.is-played .clip__bar{display:block}
.clip.is-played .clip__bar i{background:var(--state-heard)}
.clip__play{align-self:start;
min-width:5.5rem;min-height:var(--target-min);padding:var(--space-3) var(--space-5);
border-radius:var(--radius-pill);border:var(--stroke-hairline) solid var(--border-strong);
background:transparent;color:var(--text-primary);cursor:pointer;
font:var(--font-weight-semibold) var(--type-body-sm)/1 var(--font-core);
transition:background var(--dur-state) var(--ease-state),color var(--dur-state) var(--ease-state);
}
.clip__play:hover{background:var(--surface-hit)}
.clip.is-live .clip__play{background:var(--amber-400);border-color:var(--amber-400);color:var(--text-on-amber)}
.clip.is-live h3{color:var(--text-glance)}
[hidden]{display:none !important}

/* ─────────────────────────────────────────── three screens */
.shots{display:grid;gap:var(--space-10) var(--space-8)}
@media (min-width:44rem){.shots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.shots .phone{max-width:15rem;margin-inline:0}
.shots figcaption{margin-top:var(--space-6);max-width:20rem}
.shots figcaption p{margin-top:var(--space-3);color:var(--text-secondary);font-size:var(--type-body-sm);line-height:var(--lh-body-sm)}

/* ─────────────────────────────────────────── copy beside a table */
@media (min-width:56rem){.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);align-items:start}.split .intro + *{margin-top:0}}
.split .tbl-wrap table{min-width:22rem}

/* ─────────────────────────────────────────── three short answers */
.facts{display:grid;gap:var(--space-10)}
@media (min-width:56rem){.facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-9)}}
.facts h2{font-size:var(--type-title);line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.facts p{margin-top:var(--space-4);color:var(--text-secondary);font-size:var(--type-body-sm);line-height:var(--lh-body-sm)}

/* ─────────────────────────────────────────── the lead answer
 * A self-contained 40–60 word definition at the top of a page, so a machine
 * quoting one paragraph quotes a true and complete one. */
.answer{
max-width:var(--measure);
border-left:var(--stroke-hollow) solid var(--amber-500);
padding-left:var(--space-6);
color:var(--text-primary);
font-size:var(--type-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);
}

/* ─────────────────────────────────────────── comparison
 * Yes is ice — the "heard" hue, meaning done and true. No is the dropped grey.
 * The fault red appears nowhere here: not having a feature is not a fault. */
.cmp td.y{color:var(--state-heard)}
.cmp td.no{color:var(--text-quiet)}
.cmp th[scope="row"]{color:var(--text-primary);font-weight:var(--font-weight-medium)}
.cmp thead th:first-child{width:34%}

/* ─────────────────────────────────────────── passes */
.plans{display:grid;gap:var(--space-6)}
@media (min-width:44rem){.plans{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}}
.plan{background:var(--surface-card);border:var(--stroke-hairline) solid var(--border-hairline);border-radius:var(--radius-4);padding:var(--space-7);box-shadow:var(--elev-3);display:flex;flex-direction:column;gap:var(--space-4)}
.plan--free{background:transparent;box-shadow:none;border-color:var(--border-soft)}
.plan .price{font-family:var(--font-mono);font-feature-settings:var(--tnum);font-size:30px;line-height:1.1;font-weight:var(--font-weight-medium);color:var(--text-glance);letter-spacing:-0.02em}
.plan .per{color:var(--text-tertiary);font-size:var(--type-caption);line-height:var(--lh-caption)}
.plan p{color:var(--text-secondary);font-size:var(--type-body-sm);line-height:var(--lh-body-sm)}
.plan ul{display:flex;flex-direction:column;gap:var(--space-3);margin-top:auto;padding-top:var(--space-4)}
.plan li{color:var(--text-secondary);font-size:var(--type-body-sm);line-height:var(--lh-body-sm);padding-left:var(--space-6);position:relative}
.plan li::before{content:"·";position:absolute;left:var(--space-3);color:var(--text-tertiary)}

/* ─────────────────────────────────────────── freshness and cross-links */
.crosslinks{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-7);margin-top:var(--space-8)}
.crosslinks a{font-size:var(--type-body-sm)}

/* ─────────────────────────────────────────── footer, in columns
 * Four pages fitted on one line; nine do not. */
.foot__cols{display:grid;gap:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.foot__cols h2{font:var(--font-weight-semibold) var(--type-label)/var(--lh-label) var(--font-core);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-tertiary);margin-bottom:var(--space-5)}
.foot__cols ul{display:flex;flex-direction:column;gap:var(--space-4)}
.foot__note{margin-top:var(--space-9);padding-top:var(--space-6);border-top:var(--stroke-hairline) solid var(--border-hairline);display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}

/* ─────────────────────────────────────────── narrow screens
 * The masthead keeps its one button; every page it drops is in the footer. */
@media (max-width:40rem){
.nav a:not(.btn){display:none}
.masthead__row{flex-wrap:nowrap}
.shots .phone{max-width:13rem}
/* Only the wide comparison tables scroll sideways; the rest fit by wrapping. */
.tbl-wrap table:not(.cmp){min-width:0}
.tbl-wrap table:not(.cmp) td.n{white-space:normal}
.tbl-wrap table:not(.cmp) th,.tbl-wrap table:not(.cmp) td{padding-inline:var(--space-3)}
}

/* ─────────────────────────────────────────── the film */
.film{margin:0}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--radius-4);border:var(--stroke-hairline) solid var(--border-hairline);background:var(--surface-sunken)}

/* ─────────────────────────────────────────── four prices, in a row, not cards */
.prices{display:grid;gap:var(--space-8);border-top:var(--stroke-hairline) solid var(--border-hairline);padding-top:var(--space-7)}
@media (min-width:44rem){.prices{grid-template-columns:repeat(4,minmax(0,1fr))}}
.price h2{font-size:30px;line-height:1.1;font-weight:var(--font-weight-medium);letter-spacing:-0.02em}
.price__per{margin-top:var(--space-3);color:var(--text-tertiary);font-size:var(--type-caption);line-height:var(--lh-caption)}
.price p:last-child{margin-top:var(--space-4);color:var(--text-secondary);font-size:var(--type-body-sm);line-height:var(--lh-body-sm)}
.split .shot .phone{max-width:15rem}
.split .shot figcaption{margin-top:var(--space-5);max-width:15rem;margin-inline:auto}
.prose > h2 + p{margin-top:var(--space-5)}
.hero h1 + .lede{margin-top:var(--space-7)}
/* A prose column shares the page's left edge rather than centring in it. */
.page.prose{max-width:var(--page-max)}
.page.prose > *{max-width:var(--measure)}
.intro h2.gap{margin-top:var(--space-10)}