/* Deltas storefront.
─────────────────────────────────────────────────────────────────────
Hand-written, no preprocessor, no utility framework, no build step —
businesses/AGENTS.md, "The stack — all of it". The three families below
are SELF-HOSTED for the same reason: a storefront page carries zero
external , so fonts.googleapis.com is not an option and these
are the upstream woff2 subsets served off our own /static.
Only the `latin` and `latin-ext` subsets ship, plus ONE more: Source
Serif's `greek`, because Δ is U+0394 and the wordmark would otherwise
fall back to Georgia for its first character and to Source Serif for the
rest of the word.
Colour comes from three places and they do not mix: --ink/--paper/--line
are the page, --mark is the Δ and nothing else, and chart hues are
validated separately (scripts/validate_palette.js) and never brand. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
font-display: swap; src: url('/static/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
font-display: swap; src: url('/static/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
font-display: swap; src: url('/static/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
font-display: swap; src: url('/static/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Variable faces: one file covers 400–600, so the weight range is declared
rather than a file per weight. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600;
font-stretch: 100%; font-display: swap;
src: url('/static/fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600;
font-stretch: 100%; font-display: swap;
src: url('/static/fonts/ibm-plex-sans-var-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600;
font-display: swap; src: url('/static/fonts/source-serif-4-var-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600;
font-display: swap; src: url('/static/fonts/source-serif-4-var-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600;
font-display: swap; src: url('/static/fonts/source-serif-4-var-greek.woff2') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
U+03A3-03FF; }
:root {
--ink: #16181d; --body: #3a3d45; --muted: #5b5e66;
--paper: #f5f3f0; --paper-2: #efece7; --line: #d9d5cf; --rule: #b9b4ac;
--mark: #c1440e; --mark-hover: #a63a0c;
/* The chart kit's chrome on the public pages (/lists), re-grounded to this
paper the same way app_shell.css does for the signed-in app. Series
colours are the kit's own and untouched. */
--dc-grid: #e8e2dc; --dc-accent: #c1440e; --dc-callout: #c1440e;
--dc-band-critical: #16181d; --dc-band-high: #3a3d45; --dc-band-medium: #ddd6cf;
--dark: #16181d; --dark-2: #1f2229; --dark-line: #2e313a;
--dark-body: #c9ccd3; --dark-muted: #9a9ea8; --dark-dim: #6b6f79;
--sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--serif: 'Source Serif 4', Georgia, serif;
--wide: 1240px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--sans); color: var(--ink); background: var(--paper);
line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: var(--mono); background: #e7e3dd; padding: .1em .35em;
border-radius: 3px; font-size: .9em; }
/* An underlined phrase inside a headline. `em` because it is emphasis, not
a link; the rule is drawn in the mark colour and nothing else is. */
.ul { font-style: normal; text-decoration: underline;
text-decoration-color: var(--mark); text-decoration-thickness: 3px;
text-underline-offset: 6px; }
h2 .ul, h3 .ul { text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* A mono eyebrow. Small caps are done with letter-spacing rather than
`font-variant`, which Plex Mono does not carry. */
.kicker { font-family: var(--mono); font-size: 12px; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em; margin: 0 0 16px; }
/* The hero's opener is a SENTENCE, not an eyebrow — it is the one line on
the page that says who this is for, and setting it in caps turns it into
a label nobody reads. Same mono face, no transform. */
.hero-claim .kicker { text-transform: none; font-size: 13px;
letter-spacing: .02em; margin-bottom: 22px; }
.body { font-size: 16px; color: var(--body); text-wrap: pretty; }
.note { color: var(--muted); font-size: 14px; margin-top: 12px; }
.muted { color: var(--muted); font-size: .9rem; }
.lede { font-size: 19px; line-height: 1.5; color: var(--body);
max-width: 46rem; text-wrap: pretty; }
/* ── The mark ──────────────────────────────────────────────────────────
Δ, the one warm thing in the palette. Chrome only. */
.mark { color: var(--mark); font-family: var(--serif); font-weight: 600;
margin-right: 6px; }
.tld { color: #7a7d86; font-weight: 400; }
/* ── Buttons ───────────────────────────────────────────────────────── */
.btn { display: inline-block; background: var(--mark); color: var(--paper);
padding: 13px 22px; border-radius: 3px; border: none; font: inherit;
font-size: 15px; font-weight: 500; cursor: pointer; }
.btn:hover { background: var(--mark-hover); text-decoration: none; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
/* `.btn-outline` and the legacy `.btn-secondary` are the same button. */
.btn-outline, .btn-secondary { background: transparent; color: var(--ink);
border: 1px solid var(--ink); padding: 12px 18px; }
.btn-outline:hover, .btn-secondary:hover { background: var(--ink);
color: var(--paper); text-decoration: none; }
/* ── Nav ───────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(245,243,240,.92);
backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav-inner { max-width: var(--wide); margin: 0 auto; padding: 14px 32px;
display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.nav-brand { display: flex; align-items: baseline; line-height: 1;
font-family: var(--serif); font-weight: 500; font-size: 22px;
letter-spacing: -.025em; }
.nav-brand:hover { text-decoration: none; }
.nav-brand .mark { font-size: 24px; }
.nav-links { display: flex; gap: 22px; font-size: 14px; margin-left: auto;
flex-wrap: wrap; align-items: center; }
.nav-anchors { display: contents; }
.nav-end { display: flex; gap: 18px; align-items: center; font-size: 14px; }
/* ── Hero ──────────────────────────────────────────────────────────── */
.hero-split { max-width: var(--wide); margin: 0 auto;
padding: 88px 32px 72px; display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 56px; align-items: start; }
.hero-claim { max-width: 560px; }
.hero-claim h1 { font-family: var(--serif); font-weight: 500;
font-size: clamp(44px, 5.2vw, 68px); line-height: 1.02;
letter-spacing: -.02em; text-wrap: pretty; margin: 0 0 24px; }
.hero-claim .lede { margin-bottom: 32px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-instrument { min-width: 0; }
/* ── The instrument ────────────────────────────────────────────────────
Three radios and `:checked ~` — no script. The radios are the FIRST
children so every panel that reacts to them is a following sibling. */
.instrument { background: var(--dark); color: var(--paper); border-radius: 6px;
padding: 22px 24px 20px; font-family: var(--mono);
font-size: 13px; box-shadow: 0 30px 60px -30px rgba(22,24,29,.45); }
.scope-radio { position: absolute; width: 1px; height: 1px; opacity: 0;
pointer-events: none; }
.instrument-head { display: flex; justify-content: space-between; gap: 12px;
flex-wrap: wrap; color: var(--dark-muted); font-size: 12px;
border-bottom: 1px solid var(--dark-line);
padding-bottom: 12px; }
.scope-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 18px; }
.scope-tabs label { font-size: 12px; padding: 6px 10px; border-radius: 3px;
cursor: pointer; border: 1px solid var(--body);
color: var(--dark-body); }
.scope-tabs label:hover { border-color: var(--dark-muted); }
#scope-0:checked ~ .scope-tabs label[for="scope-0"],
#scope-1:checked ~ .scope-tabs label[for="scope-1"],
#scope-2:checked ~ .scope-tabs label[for="scope-2"] {
background: var(--mark); border-color: var(--mark); color: var(--paper); }
/* Keyboard focus lands on the hidden radio, so the ring is drawn on the
label it controls — otherwise the tab stop is invisible. */
.scope-radio:focus-visible ~ .scope-tabs label[for="scope-0"],
.scope-radio:focus-visible ~ .scope-tabs label[for="scope-1"],
.scope-radio:focus-visible ~ .scope-tabs label[for="scope-2"] {
outline: 2px solid var(--paper); outline-offset: 2px; }
#scope-0:focus-visible ~ .scope-tabs label[for="scope-1"],
#scope-0:focus-visible ~ .scope-tabs label[for="scope-2"],
#scope-1:focus-visible ~ .scope-tabs label[for="scope-0"],
#scope-1:focus-visible ~ .scope-tabs label[for="scope-2"],
#scope-2:focus-visible ~ .scope-tabs label[for="scope-0"],
#scope-2:focus-visible ~ .scope-tabs label[for="scope-1"] { outline: none; }
.percentiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px; text-align: center; }
.p-label { color: var(--dark-muted); font-size: 11px; }
.p-value { font-size: 26px; padding: 10px 0; color: var(--dark-dim);
border-top: 1px solid var(--dark-line); }
.readouts { margin-top: 14px; }
.readout { display: none; padding: 14px 16px; background: var(--dark-2);
border-radius: 4px; grid-template-columns: auto minmax(0, 1fr);
gap: 8px 14px; align-items: baseline; }
#scope-0:checked ~ .readouts .readout-0,
#scope-1:checked ~ .readouts .readout-1,
#scope-2:checked ~ .readouts .readout-2 { display: grid; }
.rk { color: var(--dark-muted); font-size: 11px; text-transform: uppercase;
letter-spacing: .04em; }
.rv { color: var(--paper); display: flex; align-items: center; gap: 8px; }
.rv-prose { font-family: var(--sans); font-size: 13px; line-height: 1.45;
color: var(--dark-body); display: block; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px;
background: var(--mark); flex: none;
animation: dpulse 1.6s ease-in-out infinite; }
@keyframes dpulse { 0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
.instrument-foot { margin-top: 14px; display: flex; gap: 12px; flex-wrap: wrap;
justify-content: space-between; align-items: center;
font-size: 12px; color: var(--dark-muted); }
.instrument-foot .stamp { color: var(--paper); }
.hero-instrument .note { margin: 14px 4px 0; font-size: 13px; }
/* ── Rule strip ────────────────────────────────────────────────────── */
.rule-strip { border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line); background: var(--paper-2); }
.rule-strip-inner { max-width: var(--wide); margin: 0 auto; padding: 22px 32px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px; font-size: 14px; color: var(--body); }
.rule-no { font-family: var(--mono); color: var(--mark); font-size: 12px;
display: block; margin-bottom: 4px; }
/* ── Section headings, shared ──────────────────────────────────────── */
.method h2, .altitudes h2, .measures h2, .talk h2 {
font-family: var(--serif); font-weight: 500;
font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1;
letter-spacing: -.015em; text-wrap: pretty; margin: 0 0 20px; }
.method .body + .body, .measures .body { margin-top: 16px; }
/* ── Level and change ──────────────────────────────────────────────── */
.method { max-width: var(--wide); margin: 0 auto; padding: 96px 32px 80px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 56px; align-items: start; }
.schematic { background: #fff; border: 1px solid var(--line); border-radius: 6px;
padding: 24px; font-family: var(--mono); font-size: 12px;
color: var(--muted); }
.schematic-head { display: flex; justify-content: space-between; gap: 12px;
flex-wrap: wrap; margin-bottom: 18px; }
/* A schematic, not a chart: four absolutely positioned rules that say
"flat, then a step, then flat". No data, so no axis values. */
.plot { position: relative; height: 180px; border-left: 1px solid var(--line);
border-bottom: 1px solid var(--line); }
.plot span { position: absolute; }
.plot-zero { left: 0; right: 0; top: 62%; border-top: 1px dashed var(--rule); }
.plot-base { left: 0; width: 58%; top: 62%; height: 2px; background: var(--ink); }
.plot-riser { left: 58%; top: 30%; height: 32%; width: 2px; background: var(--ink); }
.plot-after { left: 58%; right: 0; top: 30%; height: 2px; background: var(--ink); }
.plot-label { color: var(--ink); }
.plot-label-base { left: 8px; top: calc(62% - 22px); }
.plot-label-step { left: calc(58% + 10px); top: calc(30% + 8px); }
.plot-t { left: 58%; bottom: -24px; transform: translateX(-50%); }
.schematic-legend { margin-top: 36px; display: grid;
grid-template-columns: 1fr 1fr; gap: 16px; }
.schematic-legend div { border-top: 1px solid var(--line); padding-top: 10px; }
.schematic-legend .strong { color: var(--ink); }
.schematic figcaption { margin-top: 16px; font-family: var(--sans);
font-size: 12px; color: var(--muted); }
/* ── The altitude ladder (dark) ────────────────────────────────────── */
.altitudes { background: var(--dark); color: var(--paper); }
.altitudes-inner { max-width: var(--wide); margin: 0 auto; padding: 88px 32px 96px; }
.altitudes .kicker { color: var(--dark-muted); }
.altitudes .body { color: var(--dark-body); }
.altitudes-head { display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px; align-items: end; margin-bottom: 48px; }
.altitudes-head .body { max-width: 520px; }
/* One column explicitly: the rungs are a list, and a grid that is allowed
to fit two of them side by side stops being a ladder. */
.ladder { display: grid; grid-template-columns: minmax(0, 1fr); }
.rung { border-top: 1px solid var(--dark-line); }
.rung:last-child { border-bottom: 1px solid var(--dark-line); }
.rung > summary { display: grid; grid-template-columns: 72px minmax(0, 1fr);
cursor: pointer; list-style: none; }
.rung > summary::-webkit-details-marker { display: none; }
.rung > summary:hover { background: #1b1e25; }
.rung > summary:focus-visible { outline: 2px solid var(--mark);
outline-offset: -2px; }
.rung-no { padding: 26px 0; font-family: var(--mono); font-size: 12px;
color: var(--dark-muted); border-right: 1px solid var(--dark-line); }
.rung-alt { display: block; color: var(--dark-dim); }
.rung-body { padding: 22px 0 22px 28px; display: grid;
grid-template-columns: minmax(200px, 1.1fr) minmax(200px, 2fr) auto;
gap: 16px 32px; align-items: baseline; }
.rung-name { font-family: var(--serif); font-weight: 500; font-size: 28px;
line-height: 1.1; }
.rung-line { font-size: 16px; color: var(--dark-body); }
.rung-state { font-family: var(--mono); font-size: 12px; color: var(--dark-muted); }
/* The +/− is CSS, driven by [open]: nothing to keep in sync in JS. */
.chev::after { content: '+'; color: var(--mark); }
.rung[open] .chev::after { content: '\2212'; }
/* The 72px rule belongs to the rung, not to the summary, so it is picked
up again here — otherwise it stops dead where the open panel begins and
the panel reads as belonging to the row below. */
.rung-open { margin-left: 72px; border-left: 1px solid var(--dark-line);
padding: 0 0 26px 28px; display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px; font-size: 14px; color: var(--dark-body);
line-height: 1.55; }
.rung-for { color: var(--dark-muted); font-family: var(--mono); font-size: 12px;
text-transform: uppercase; letter-spacing: .04em; }
.altitudes-foot { margin-top: 28px; display: flex;
justify-content: space-between; gap: 16px; flex-wrap: wrap;
font-size: 14px; color: var(--dark-muted); }
.altitudes-foot a { color: var(--paper); border-bottom: 1px solid var(--dark-dim);
padding-bottom: 1px; }
.altitudes-foot a:hover { text-decoration: none; border-color: var(--paper); }
/* ── Measures ──────────────────────────────────────────────────────── */
.measures { max-width: var(--wide); margin: 0 auto; padding: 96px 32px 80px; }
.measures-head { max-width: 640px; margin-bottom: 48px; }
/* A 1px gap over a --line background draws the grid's rules for free — but
only while the last row is FULL. `auto-fit` put six cards in four columns
at 1240px and the two leftover cells rendered as bare grey rectangles, so
the column count is fixed to divisors of six instead of fitted. */
.measure-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 1000px) { .measure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .measure-grid { grid-template-columns: minmax(0, 1fr); } }
.measure { background: var(--paper); padding: 26px 24px; }
.measure-label { font-family: var(--mono); font-size: 12px; color: var(--muted);
margin-bottom: 8px; }
.measure h3 { font-size: 18px; font-weight: 600; line-height: 1.3;
margin-bottom: 10px; }
.measure p { font-size: 14px; color: var(--body); line-height: 1.55; }
/* ── Beliefs, and what this is not ─────────────────────────────────── */
.creed { border-top: 1px solid var(--line); max-width: var(--wide);
margin: 0 auto; padding: 88px 32px; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 64px; }
.beliefs { list-style: none; display: grid; gap: 28px; }
.beliefs li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.belief-no { font-family: var(--mono); font-size: 13px; color: var(--muted);
padding-top: 6px; }
.beliefs h3, .not-headline { font-family: var(--serif); font-weight: 500;
font-size: 24px; line-height: 1.2;
text-wrap: pretty; margin: 0 0 6px; }
.beliefs p { font-size: 15px; color: var(--body); }
.not-headline { margin-bottom: 18px; }
.not-list { font-size: 15px; color: var(--body); }
.not-list > div { padding: 14px 0; border-top: 1px solid var(--line);
display: grid;
grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
gap: 16px; }
.not-list > div:last-child { border-bottom: 1px solid var(--line); }
.not-list dt { font-family: var(--mono); font-size: 12px; color: var(--ink);
padding-top: 3px; }
/* ── Talk to us ────────────────────────────────────────────────────── */
.talk { background: var(--paper-2); border-top: 1px solid var(--line);
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 48px; align-items: center; padding: 96px 32px; }
.talk > div:first-child { max-width: 560px; }
.talk .body { font-size: 17px; }
.talk-actions { display: grid; gap: 12px; width: 100%; max-width: 440px;
justify-self: end; }
.cta-row { display: flex; justify-content: space-between; align-items: center;
gap: 12px; padding: 18px 20px; border-radius: 3px; font-weight: 500;
font-size: 16px; }
.cta-row-primary { background: var(--mark); color: var(--paper); }
.cta-row-primary:hover { background: var(--mark-hover); text-decoration: none; }
.cta-note { font-family: var(--mono); font-size: 13px; color: #f3d9cc; }
.cta-quiet { font-size: 14px; color: var(--muted); padding: 4px 2px; }
.join { display: flex; gap: 10px; flex-wrap: wrap; }
.join input { flex: 1 1 220px; padding: 12px 14px; border: 1px solid var(--line);
border-radius: 3px; font: inherit; font-size: 15px;
background: #fff; color: var(--ink); }
/* ── Footer ────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); }
.footer-inner { max-width: var(--wide); margin: 0 auto; padding: 40px 32px 48px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 32px; font-size: 14px; }
.footer-inner p { margin-top: 10px; color: var(--muted); max-width: 280px; }
.footer-col { display: grid; gap: 8px; align-content: start; }
.footer-col .kicker { margin: 0; }
.footer-fine { color: var(--muted); }
.footer .nav-brand { font-size: 20px; }
.footer .nav-brand .mark { font-size: 22px; }
/* ── The rest of the storefront ────────────────────────────────────────
pricing.html, product.html, signin.html and the account pages predate
the landing page and keep their class names; these rules re-dress them
in the same language rather than leaving one page in an older one. */
.hero { max-width: 760px; margin: 0 auto; padding: 84px 32px 48px; }
.hero.small { padding: 56px 32px 8px; }
.hero h1 { font-family: var(--serif); font-weight: 500;
font-size: clamp(34px, 4vw, 52px); line-height: 1.05;
letter-spacing: -.02em; margin-bottom: 16px; text-wrap: pretty; }
.badge { display: inline-block; font-family: var(--mono); font-size: 12px;
color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
margin-bottom: 14px; }
.subhead { font-size: 19px; color: var(--body); margin-bottom: 28px;
text-wrap: pretty; }
.section { max-width: 760px; margin: 0 auto; padding: 56px 32px; }
.section h2 { font-family: var(--serif); font-weight: 500; font-size: 30px;
line-height: 1.15; margin: 28px 0 12px; }
.section h3 { font-size: 18px; margin: 20px 0 8px; }
.section .features { max-width: none; margin: 0; padding: 0; }
.features { max-width: 640px; margin: 0 auto; padding: 40px 32px; }
.features h2 { font-family: var(--serif); font-weight: 500; font-size: 30px;
margin-bottom: 16px; }
.features ul { list-style: none; }
.features li { padding: 10px 0 10px 30px; position: relative;
border-bottom: 1px solid var(--line); }
.features li::before { content: "\2713"; position: absolute; left: 4px;
color: var(--mark); font-weight: 700; }
.why { max-width: 640px; margin: 0 auto; padding: 12px 32px 8px;
color: var(--muted); font-size: 16px; }
.cta { padding: 24px 32px 72px; }
.panel { border: 1px solid var(--line); border-radius: 6px; padding: 18px;
margin: 14px 0; background: #fff; }
/* BLOCK, not inline. An is inline by default, so a panel with two
fields laid them out side by side and a three-field signup form wrapped
into an unreadable grid — the label of one field sitting next to the box
of another. */
.input { display: block; width: 100%; max-width: 26rem; padding: 10px 12px;
border: 1px solid var(--line); border-radius: 3px; font: inherit;
background: #fff; margin: 0 0 10px 0; }
.plans { max-width: var(--wide); margin: 0 auto; padding: 32px 32px; }
.plans h2 { font-family: var(--serif); font-weight: 500; font-size: 30px;
margin-bottom: 12px; }
.plan-grid { display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.plan { border: 1px solid var(--line); border-radius: 6px; padding: 26px;
background: #fff; }
.plan.wide { max-width: 560px; margin: 0 auto; }
.plan .price { font-family: var(--serif); font-size: 2rem; font-weight: 600;
margin: 10px 0; }
.plan .price span { font-family: var(--sans); font-size: 1rem;
color: var(--muted); font-weight: 400; }
.plan ul { list-style: none; margin: 14px 0 20px; color: var(--body);
font-size: 15px; }
.plan li { padding: 4px 0; }
/* A roster: a plain list, deliberately NOT `.features`. That class prefixes a
checkmark, which beside a person's name reads as "verified" rather than as a
bullet — a claim the page is not making. */
.roster { list-style: none; margin: 0; padding: 0; }
.roster li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.roster li:last-child { border-bottom: 0; }
/* ── Narrow ────────────────────────────────────────────────────────────
The ladder's three-column rung and its 100px indent are the only
layouts that do not simply reflow, so they are the only ones restated. */
@media (max-width: 860px) {
.nav-inner, .hero-split, .rule-strip-inner, .method, .altitudes-inner,
.measures, .creed, .talk, .footer-inner { padding-left: 20px; padding-right: 20px; }
.hero-split { padding-top: 56px; gap: 40px; }
.method, .measures { padding-top: 64px; }
.creed, .altitudes-inner, .talk { padding-top: 64px; padding-bottom: 64px; }
.rung-body { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rung-open { margin-left: 0; border-left: 0; padding-left: 28px; }
/* One row, always. Brand, Sign in, Talk to us — the two things a
visitor on a phone came to do. Every link dropped here is reachable
from the footer and from the page itself. */
.nav-inner { gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.nav-links { display: none; }
.nav-end { margin-left: auto; gap: 16px; }
.nav-brand { font-size: 20px; }
.talk-actions { justify-self: start; }
}