/* Plain Air's site (docs/PLAN-2026-11-01-plainair-site-redesign.md): the path, measured. Dark only, on the film's
   Prussian night. Fraunces for what the app says, Red Hat Mono for what it measured, the system's text face for
   reading. Prussian night #8DB8E8 is the action (with #0B1A1C text, the app's own night action), the links, one
   headline phrase and the healthy stretches of the path. Naples #E8C25A marks only a reading worse than its line:
   the tall replies, the slow stretch and its counts. It is never a headline word, a glow or a decoration. No red,
   and every mark also has its word.

   WCAG contrast, measured (relative luminance, 1 Nov 2026). AA asks 4.5:1 for text, 3:1 for large text and UI.
                       on ground #0C1F31   on panel #12293F   on raised #173A5A
     text     #EEF3F7       15.0               13.3               10.5
     soft     #C4D3E0       10.9                9.7                7.7
     muted    #93A9BD        6.9                6.1                4.8
     prussian #8DB8E8        8.1                7.2                5.7
     naples   #E8C25A        9.8                8.7                6.9
     #0B1A1C on the action #8DB8E8 (buttons) 8.6 · the action against the ground 8.1 (UI 3:1)
     white on a strong neighbour #566168 6.4 (the app's night colour for them)
   Graphics, not text: the quiet replies #3A5068 are 2.0 on the ground and decorative, as in the app (the meaning is
   in the tall ones and in the words beside them). The glow is #1F4E79 at 45% over the ground, behind the hero and
   the close only. */
@font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces-Variable.latin.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Red Hat Mono'; src: url('fonts/RedHatMono-Variable.latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  --ground: #0C1F31; --panel: #12293F; --raised: #173A5A; --line: rgba(141, 184, 232, .14); --line-strong: rgba(141, 184, 232, .28);
  --text: #EEF3F7; --soft: #C4D3E0; --muted: #93A9BD;
  --prussian: #8DB8E8; --naples: #E8C25A; --on-action: #0B1A1C; --action-hover: #A6C8EE;
  --quiet: #3A5068; --strong: #566168; --faint: rgba(141, 184, 232, .13);
  --glow: rgba(31, 78, 121, .45); --top: rgba(12, 31, 49, .84);
  --head: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --mono: 'Red Hat Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --out: cubic-bezier(.2, .8, .2, 1);
  --gutter: 24px;
  --wrap: min(1180px, calc(100vw - 2 * var(--gutter)));
  color-scheme: dark;
}
/* Increase Contrast, as in the app: stronger hairlines and quiet replies, muted text up to soft */
@media (prefers-contrast: more) {
  :root { --line: rgba(141, 184, 232, .32); --line-strong: rgba(141, 184, 232, .55); --muted: var(--soft); --quiet: #59646A; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ground); }
main { overflow-x: clip; }
body { margin: 0; background: var(--ground); color: var(--text); font: 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--prussian); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; margin: 0; text-wrap: balance; font-variant-numeric: lining-nums; }
h3 { letter-spacing: -0.01em; line-height: 1.18; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
code { font-family: var(--mono); font-size: .9em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--ground); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--prussian); outline-offset: 3px; border-radius: 6px; }
.pa-wrap { width: var(--wrap); margin: 0 auto; }

/* Type: mono eyebrows and labels carry the structure; Fraunces carries what the app says */
.pa-eyebrow, .pa-caps { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pa-eyebrow { margin-bottom: 20px; }
/* A section's head: a hairline, its name, and one reading on the right */
.pa-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); margin-bottom: 44px; }
.pa-head .pa-eyebrow { margin: 0; }
.pa-reading { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
section h2 { font-size: clamp(36px, 4.6vw, 64px); }
section h2 em, .pa-hero h1 em { font-style: normal; color: var(--prussian); }
.pa-h3 { font-size: clamp(24px, 2.4vw, 32px); }
.pa-sub { color: var(--soft); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; max-width: 620px; margin-top: 22px; }
.pa-fine { color: var(--muted); font-size: 14px; margin-top: 20px; }
/* Naples, as a mark beside the words of a reading worse than its line */
.pa-mark-n { display: inline-block; flex: none; width: 3px; height: .95em; margin-right: 10px; border-radius: 2px; background: var(--naples); vertical-align: -0.12em; }

/* Buttons and the status line. Prussian night, with dark text, is the one action colour. */
.pa-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 10px; background: var(--prussian); color: var(--on-action); font: 600 15.5px var(--body); letter-spacing: -0.005em; border: 0; cursor: pointer; white-space: nowrap; transition: background .2s var(--ease); }
.pa-btn:hover { text-decoration: none; background: var(--action-hover); }
.pa-status { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font: 500 12.5px var(--mono); letter-spacing: .04em; }
.pa-status i { width: 7px; height: 7px; border-radius: 50%; flex: none; border: 1.5px solid var(--muted); }
.pa-status.review i, .pa-status.live i { background: var(--prussian); border-color: var(--prussian); }
.pa-actions { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin-top: 28px; }

/* The header: the icon's rule and the wordmark in Fraunces, as in the app */
.pa-top { position: fixed; inset: 0 0 auto; z-index: 20; height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 max(var(--gutter), calc((100vw - 1180px) / 2)); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.pa-top.solid { background: var(--top); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-color: var(--line); }
.pa-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.pa-mark:hover { text-decoration: none; }
.pa-mark b { font: 600 20px var(--head); letter-spacing: -0.015em; }
.pa-glyph { width: 22px; height: 22px; flex: none; }
.pa-top nav { display: flex; gap: 24px; margin-left: auto; }
.pa-top nav a { color: var(--soft); font-size: 14px; }
.pa-top nav a:hover { color: var(--text); text-decoration: none; }
.pa-top > .pa-btn, .pa-top > a:last-child:not(.pa-mark) { height: 36px; padding: 0 16px; border-radius: 9px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .25s, background .2s; }
.pa-top.past > .pa-btn, .pa-top.past > a:last-child:not(.pa-mark) { opacity: 1; pointer-events: auto; }

/* The footer: the studio's other products, then the rule and the wordmark */
.pa-foot { border-top: 1px solid var(--line); padding: 48px max(var(--gutter), calc((100vw - 1180px) / 2)) 42px; }
.pa-foot .more h2 { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--muted); }
.pa-foot .more a.more-app { background: var(--panel); border-color: var(--line); }
.pa-foot .more a.more-app:hover { border-color: var(--line-strong); }
.pa-foot .more .more-store { font: 12px var(--mono); letter-spacing: .02em; color: var(--muted); }
.pa-foot-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); }
.pa-foot .pa-mark span { display: flex; flex-direction: column; gap: 3px; }
.pa-foot .pa-mark small { font: 12.5px var(--body); color: var(--muted); letter-spacing: 0; }
.pa-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.pa-foot nav a { color: var(--soft); font-size: 14px; }
.pa-foot-fine { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 24px; color: var(--muted); font-size: 12.5px; }
.pa-foot-fine a { color: var(--soft); }

/* Other pages: privacy, notify, the press kit */
.pa-doc { position: relative; isolation: isolate; width: min(760px, calc(100vw - 2 * var(--gutter))); margin: 0 auto; padding: 150px 0 120px; }
.pa-doc::before { content: ''; position: absolute; inset: -40px 0 auto; height: 520px; background: radial-gradient(50% 50% at 50% 30%, var(--glow), rgba(31, 78, 121, 0) 70%); pointer-events: none; z-index: -1; }
.pa-doc h1 { font-size: clamp(40px, 6vw, 64px); margin-bottom: 16px; }
.pa-meta { color: var(--muted); font: 12.5px var(--mono); letter-spacing: .04em; margin-bottom: 38px; }
.pa-prose h2, .pa-prose h3 { font-size: 26px; margin: 44px 0 12px; }
.pa-prose p, .pa-prose li { color: var(--soft); line-height: 1.65; }
.pa-prose strong { color: var(--text); }
.pa-prose p + p { margin-top: 12px; }
.pa-prose ul { list-style: none; padding: 0; margin: 10px 0; }
.pa-prose li { position: relative; padding-left: 22px; }
.pa-prose li::before { content: ''; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--muted); }
.pa-prose li + li { margin-top: 8px; }
.pa-icon { display: block; width: 76px; height: 76px; margin-bottom: 28px; border-radius: 17px; }
.pa-form { margin-top: 32px; }
.pa-form label { display: block; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pa-form .row { display: flex; gap: 10px; }
.pa-form input[type=email] { flex: 1; min-width: 0; height: 46px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); padding: 0 14px; font: 16px var(--body); }
.pa-form input[type=email]::placeholder { color: var(--muted); }
.pa-form .error { color: var(--naples); margin-top: 10px; }
.hp { position: absolute; left: -9999px; }
.pa-link { font-weight: 600; }

/* 1. Hero: left-aligned and editorial, a Prussian glow behind it, then the path, measured, across the page */
.pa-hero { position: relative; padding: clamp(112px, 14vh, 150px) 0 0; overflow: hidden; }
.pa-hero::before { content: ''; position: absolute; inset: -20% -10% 30% 25%; background: radial-gradient(50% 50% at 60% 40%, var(--glow), rgba(31, 78, 121, 0) 70%); pointer-events: none; }
.pa-hero-text { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.pa-hero-text > .pa-eyebrow { grid-column: 1 / -1; }
.pa-hero h1 { grid-column: 1 / span 8; font-size: clamp(46px, 6.6vw, 96px); line-height: .98; letter-spacing: -0.03em; }
.pa-hero h1 em { display: block; }
.pa-hero-side { grid-column: 9 / -1; padding-bottom: 8px; }
.pa-lede { color: var(--soft); font-size: 18px; line-height: 1.5; max-width: 620px; }
.pa-price-line { margin-top: 16px; color: var(--muted); font-size: 14px; }
.pa-price-line span { display: block; margin-top: 4px; font: 12.5px var(--mono); }
.js [data-in] { opacity: 0; transform: translateY(14px); animation: rise .9s var(--out) forwards; animation-delay: calc(var(--d) * 110ms + 120ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

.pa-measured { position: relative; margin: clamp(56px, 8vh, 84px) 0 0; padding-bottom: 20px; }
.pa-cap { display: flex; gap: 18px; align-items: baseline; font: 500 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pa-cap b { font-weight: 500; color: var(--soft); }
.pa-path-wrap { position: relative; margin-top: 18px; }
.pa-path-wrap::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--line); }
.pa-verdict { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 48px; align-items: baseline; }
.pa-say { font: 600 clamp(26px, 2.9vw, 40px)/1.15 var(--head); letter-spacing: -0.015em; text-wrap: balance; }
.pa-say-line { color: var(--soft); font-size: 16px; line-height: 1.55; }

/* The path, as the app draws it: rings at the stops, a 3 px line for each stretch (Prussian, or Naples when worse
   than its line), the time above in Fraunces, a word below in mono, and every reply as a tick on the Wi-Fi stretch:
   short within 40 ms, tall and Naples above it. Phones show the last 30, as the app does. */
.pa-path { --top: 46px; --tick: 128px; --base: calc(var(--top) + var(--tick)); position: relative; height: calc(var(--base) + 72px); }
.pa-stretch { position: absolute; top: 0; bottom: 0; }
.pa-time { position: absolute; top: 4px; left: 0; right: 0; text-align: center; font: 600 clamp(24px, 2.4vw, 34px)/1 var(--head); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pa-stretch.slow .pa-time { color: var(--naples); }
.pa-ticks { position: absolute; top: var(--top); height: var(--tick); left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-end; }
.pa-ticks i { flex: none; width: 2px; height: calc(var(--h) * 100%); background: var(--quiet); border-radius: 1px 1px 0 0; transform-origin: bottom; }
.pa-ticks i.tall { background: var(--naples); }
.pa-line { position: absolute; top: calc(var(--base) - 1.5px); left: 0; right: 0; height: 3px; background: var(--prussian); transform-origin: 0 50%; }
.pa-stretch.slow .pa-line { background: var(--naples); }
.pa-word { position: absolute; top: calc(var(--base) + 18px); left: 0; right: 0; text-align: center; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pa-stretch.slow .pa-word { color: var(--naples); }
.pa-node { position: absolute; top: var(--base); width: 0; }
.pa-node .ring { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--prussian); background: var(--ground); z-index: 1; }
.pa-node.mac .ring { border-color: var(--text); }
.pa-node.slow .ring { border-color: var(--naples); }
.pa-node b, .pa-node span { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; text-align: center; }
.pa-node b { top: 18px; font: 600 15px var(--body); }
.pa-node span { top: 40px; font: 12px var(--mono); color: var(--muted); }
.pa-node.mac b, .pa-node.mac span { transform: translateX(-10px); text-align: left; }
.pa-node:last-of-type b, .pa-node:last-of-type span { transform: translateX(calc(-100% + 10px)); text-align: right; }
.pa-path.calm { --tick: 0px; --top: 10px; }
.pa-path.calm .pa-time { display: none; }

/* Measuring, once, when the hero's path is in view: each stretch draws, then the replies arrive left to right at
   the reading's own spacing (sped up so 150 take about 1.5 s), then the times, the words and the sentence settle.
   Without script, or with Reduce Motion, the reading is simply shown. */
@media (prefers-reduced-motion: no-preference) {
  .js .pa-measured .pa-line { transform: scaleX(0); }
  .js .pa-measured .pa-node .ring { opacity: 0; }
  .js .pa-measured .pa-ticks i { transform: scaleY(0); }
  .js .pa-measured :is(.pa-time, .pa-word, .pa-node b, .pa-node span) { opacity: 0; }
  .js .pa-measured .pa-verdict > * { opacity: 0; transform: translateY(8px); }
  .js .pa-measured.go .pa-node .ring { opacity: 1; transition: opacity .3s var(--out) calc(.1s + var(--i) * .16s); }
  .js .pa-measured.go .pa-line { transform: none; transition: transform .45s var(--out) calc(.2s + var(--i) * .16s); }
  .js .pa-measured.go .pa-ticks i { transform: none; transition: transform .26s var(--out) calc(.8s + var(--k) * 10ms); }
  .js .pa-measured.go :is(.pa-time, .pa-word, .pa-node b, .pa-node span) { opacity: 1; transition: opacity .4s var(--out) calc(2.3s + var(--i) * .12s); }
  .js .pa-measured.go .pa-verdict > * { opacity: 1; transform: none; transition: opacity .5s var(--out) 2.8s, transform .5s var(--out) 2.8s; }
  .js .pa-measured.go .pa-verdict > :last-child { transition-delay: 3s; }
  .js .pa-return .pa-line { transform: scaleX(0); }
  .js .pa-return.seen .pa-line { transform: none; transition: transform .5s var(--out) calc(.3s + var(--i) * .25s); }
}

@media (max-width: 1100px) {
  .pa-hero h1, .pa-hero-side { grid-column: 1 / -1; }
  .pa-hero-side { margin-top: 26px; padding: 0; max-width: 620px; }
  .pa-verdict { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .pa-path { --top: 34px; --tick: 84px; height: calc(var(--base) + 52px); }
  .pa-ticks { left: 12px; right: 12px; }
  .pa-ticks i { width: 1.5px; }
  .pa-ticks i:nth-child(-n+120) { display: none; }
  .pa-word, .pa-node span { display: none; }
  .pa-node b { font-size: 12.5px; top: 16px; }
  .pa-node:last-of-type b { white-space: normal; width: 52px; line-height: 1.2; }
  .pa-cap { flex-direction: column; gap: 2px; }
}
@media (max-width: 600px) {
  .pa-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* A rule row: hairline tops, Naples above a reading worse than its line */
.pa-rule-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.pa-rule-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pa-rule-row li { border-top: 2px solid var(--line-strong); padding-top: 18px; display: flex; flex-direction: column; }
.pa-rule-row li.slow { border-top-color: var(--naples); }
.pa-rule-row b { display: block; font: 600 22px/1.2 var(--head); margin-top: 8px; }
.pa-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.pa-big span { font: 600 clamp(44px, 4.6vw, 64px)/.95 var(--head); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pa-big small { font: 500 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pa-word-line span.slow { color: var(--naples); }
.pa-word-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 16px; font-weight: 600; font-size: 15px; }
.pa-word-line .pa-mark-n { margin-right: 0; }
.pa-word-line span { font: 12.5px var(--mono); color: var(--muted); font-weight: 400; }
.pa-how { color: var(--soft); font-size: 14.5px; line-height: 1.5; margin-top: 12px; }
.pa-promise { margin-top: 64px; font: 500 clamp(22px, 2.2vw, 30px)/1.3 var(--head); letter-spacing: -0.01em; max-width: 30em; color: var(--soft); }
.pa-promise em { font-style: normal; color: var(--text); }

/* 2. Four measurements */
.pa-four { padding: 140px 0 150px; }
.pa-four-head h2 { max-width: 12em; }
@media (max-width: 1000px) { .pa-rule-row.four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 900px) { .pa-four { padding: 100px 0; } .pa-rule-row { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 600px) { .pa-rule-row.four { grid-template-columns: minmax(0, 1fr); } }

/* 3. The beat: every reply across the page, 100 ms apart, the 40 ms line dashed, a ruler at every half second;
   then the four figures and the statement */
.pa-pauses { padding: 40px 0 150px; }
.pa-pauses-head h2 { max-width: 11em; }
.pa-beat-fig { margin: 80px 0 0; }
.pa-beat { padding: 0 var(--gutter); }
.pa-beat-lines { position: relative; height: clamp(120px, 16vw, 210px); display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--line-strong); }
.pa-beat-lines i { flex: none; width: clamp(1.5px, .2vw, 3px); height: calc(var(--h) * 100%); background: var(--quiet); border-radius: 1px 1px 0 0; transform-origin: bottom; }
.pa-beat-lines i.tall { background: var(--naples); }
.pa-rule40 { position: absolute; left: 0; right: 0; bottom: calc(var(--h) * 100%); border-top: 1px dashed var(--line-strong); pointer-events: none; }
.pa-ruler { position: relative; height: 30px; }
.pa-ruler li { position: absolute; top: 0; padding-top: 10px; transform: translateX(-50%); font: 11px var(--mono); color: var(--muted); }
.pa-ruler li::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 6px; background: var(--line-strong); }
.pa-ruler li:first-child { transform: none; }
.pa-ruler li:first-child::before { left: 0; }
.pa-ruler li { white-space: nowrap; }
.pa-ruler li:last-child { transform: translateX(-100%); }
.pa-ruler li:last-child::before { left: auto; right: 0; }
.pa-beat-cap { display: grid; grid-template-columns: minmax(0, 228px) minmax(0, 1fr); gap: 8px 40px; margin-top: 22px; }
.pa-beat-cap span:last-child { color: var(--soft); font-size: 15px; max-width: 46em; }
@media (prefers-reduced-motion: no-preference) {
  .js .pa-beat-fig .pa-beat-lines i { transform: scaleY(0); }
  .js .pa-beat-fig.seen .pa-beat-lines i { transform: none; transition: transform .26s var(--out) calc(.3s + var(--k) * 9ms); }
}
.pa-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 80px 0 0; }
.pa-figures div { border-top: 2px solid var(--line-strong); padding-top: 16px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; }
.pa-figures div.slow { border-top-color: var(--naples); }
.pa-figures dt { font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pa-figures dd { margin: 0; font: 600 clamp(40px, 4.4vw, 62px)/1 var(--head); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pa-figures div.slow dd { color: var(--naples); }
.pa-statement { margin-top: 90px; font: 600 clamp(34px, 4.4vw, 62px)/1.05 var(--head); letter-spacing: -0.025em; max-width: 14em; }
@media (max-width: 900px) {
  .pa-pauses { padding-bottom: 100px; }
  .pa-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .pa-beat-cap { grid-template-columns: minmax(0, 1fr); }
  .pa-ruler li:not(.five) { font-size: 0; }
}
@media (max-width: 600px) { .pa-beat { padding: 0 var(--gutter); } }

/* 4. What to change: a numbered editorial list, each with its steps, its button and its source; then "You do." */
.pa-changes { padding: 40px 0 150px; }
.pa-changes-head h2 { max-width: 12em; }
.pa-fixes { margin-top: 72px; border-top: 1px solid var(--line-strong); }
.pa-fixes > li { display: grid; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr); gap: 0 40px; padding: 36px 0 40px; border-bottom: 1px solid var(--line); }
.pa-n { font: 500 13px var(--mono); color: var(--prussian); padding-top: 4px; }
.pa-fix-main h3 { font-size: clamp(26px, 2.6vw, 36px); margin-top: 10px; }
.pa-why { color: var(--soft); margin-top: 14px; font-size: 16px; }
.pa-steps { counter-reset: s; display: grid; gap: 10px; }
.pa-steps li { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0, 1fr); font-size: 16px; line-height: 1.45; }
.pa-steps li::before { content: counter(s); font: 500 12.5px/1.9 var(--mono); color: var(--muted); }
.pa-button-label { display: flex; align-items: baseline; gap: 12px; margin-top: 20px; font-weight: 600; font-size: 15px; color: var(--prussian); }
.pa-button-label span { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pa-source { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.pa-source a { color: var(--soft); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.pa-you { margin-top: 110px; }
.pa-statement.big { margin-top: 0; font-size: clamp(44px, 6.4vw, 96px); line-height: .98; letter-spacing: -0.03em; max-width: 11em; }
.pa-statement em { font-style: normal; color: var(--prussian); }
@media (max-width: 900px) {
  .pa-changes { padding-bottom: 100px; }
  .pa-fixes > li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 22px; }
  .pa-fix-how { grid-column: 2; }
  .pa-you { margin-top: 80px; }
}

/* 5. Who shares your air: each band as spans by channel across the page, yours in Prussian, strong neighbours in
   the app's grey, the rest faint; never a name */
.pa-air { padding: 40px 0 150px; }
.pa-air-head h2 { max-width: 12em; }
.pa-band-fig { margin: 72px 0 0; }
.pa-band { position: relative; padding: 18px 0 0; }
.pa-band + .pa-band { margin-top: 56px; }
.pa-band::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--line); }
.pa-band-cap { display: flex; gap: 18px; align-items: baseline; font: 500 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pa-band-cap b { font-weight: 500; color: var(--soft); }
.pa-band-rows { position: relative; margin-top: 22px; display: grid; gap: 6px; }
.pa-band-row { position: relative; height: 24px; }
.pa-net { position: absolute; top: 0; height: 24px; border-radius: 5px; padding: 0 8px; display: flex; align-items: center; font: 500 11.5px var(--mono); letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
.pa-net.yours { background: var(--prussian); color: var(--on-action); font-weight: 600; }
.pa-net.strong { background: var(--strong); color: #fff; }
.pa-net.faint { background: var(--faint); color: var(--muted); }
.pa-band.other .pa-band-row { height: 18px; }
.pa-band.other .pa-net { height: 18px; font-size: 10.5px; }
.pa-chan { position: relative; height: 26px; margin-top: 12px; border-top: 1px solid var(--line); }
.pa-chan li { position: absolute; top: 6px; transform: translateX(-50%); font: 11px var(--mono); color: var(--muted); }
.pa-air-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 30px; font-size: 14px; color: var(--soft); }
.pa-legend { display: inline-flex; align-items: center; gap: 8px; }
.pa-legend i { width: 18px; height: 10px; border-radius: 3px; }
.pa-legend i.yours { background: var(--prussian); }
.pa-legend i.strong { background: var(--strong); }
.pa-legend i.faint { background: var(--faint); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pa-air-cap b { margin-left: auto; font: 600 clamp(20px, 2vw, 26px) var(--head); color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .js .pa-band-fig .pa-net { opacity: 0; transform: scaleX(.6); transform-origin: 0 50%; }
  .js .pa-band-fig.seen .pa-net { opacity: 1; transform: none; transition: opacity .35s var(--out) calc(.3s + var(--r) * 90ms), transform .35s var(--out) calc(.3s + var(--r) * 90ms); }
}
@media (max-width: 900px) { .pa-air { padding-bottom: 100px; } .pa-air-cap b { margin-left: 0; flex-basis: 100%; } }
@media (max-width: 600px) { .pa-net { padding: 0 5px; font-size: 10.5px; } .pa-band-cap { flex-direction: column; gap: 2px; } }

/* 6. Every sentence it can say: a dense board of the 24, grouped by where on the path, Naples beside a reading worse
   than its line; then the published sources in a mono row */
.pa-answers { padding: 40px 0 150px; }
.pa-answers-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.pa-answers-head h2 { grid-column: 1 / span 6; }
.pa-answers-head .pa-sub { grid-column: 7 / -1; margin: 0; font-size: 16px; }
.pa-board { margin-top: 56px; columns: 3 280px; column-gap: 32px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.pa-board dl { break-inside: avoid; margin: 0 0 34px; }
.pa-board dt { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pa-board dt span:last-child { color: var(--prussian); letter-spacing: .06em; }
.pa-board dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); font: 500 16px/1.35 var(--head); color: var(--soft); display: flex; align-items: baseline; }
.pa-board dd .pa-mark-n { flex: none; }
.pa-board dd.here { color: var(--text); font-weight: 600; }
.pa-board dl.fine dd { color: var(--text); font-size: 19px; }
.pa-sources { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.pa-sources a { display: inline-flex; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--soft); }
.pa-sources a span { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) {
  .pa-answers { padding-bottom: 100px; }
  .pa-answers-head { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .pa-answers-head > * { grid-column: 1 !important; }
  .pa-sources { flex-direction: column; gap: 10px; }
}

/* 7. Pay once: keeping watch and the menu bar's word beside the report, typeset as the app makes it */
.pa-watch { padding: 40px 0 150px; }
.pa-watch-head h2 { max-width: 13em; }
.pa-watch-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; margin-top: 72px; align-items: start; }
.pa-watch-side .pa-sub { font-size: 17px; }
.pa-ledger { margin: 30px 0 0; }
.pa-ledger dt { margin-bottom: 8px; font-size: 11px; }
.pa-ledger dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font: 14.5px var(--mono); color: var(--soft); }
.pa-ledger dd:last-child { border-bottom: 1px solid var(--line); }
.pa-menubar { margin-top: 48px; }
.pa-mb-strip { display: flex; justify-content: flex-end; height: 30px; padding: 0 14px; border-radius: 8px 8px 0 0; background: rgba(238, 243, 247, .07); border: 1px solid var(--line); border-bottom: 0; }
.pa-mb-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; margin: 3px 0; border-radius: 5px; background: rgba(238, 243, 247, .1); font: 500 13px var(--body); color: var(--text); }
.pa-mb-item .pa-glyph { width: 16px; height: 16px; }
.pa-mb-panel { margin-left: auto; width: min(320px, 100%); padding: 16px 18px 14px; border-radius: 0 0 12px 12px; background: var(--panel); border: 1px solid var(--line); }
.pa-mb-panel .pa-caps { font-size: 10.5px; color: var(--naples); }
.pa-mb-say { margin-top: 6px; font: 600 17px/1.25 var(--head); }
.pa-mb-path { display: flex; gap: 6px; margin-top: 14px; }
.pa-mb-path i { height: 3px; border-radius: 2px; background: var(--prussian); flex: 1; }
.pa-mb-path i.slow { background: var(--naples); flex: 1.3; }
.pa-mb-path i:last-child { flex: .55; }
.pa-mb-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font: 11.5px var(--mono); color: var(--muted); }
.pa-report { padding: 34px 36px 30px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .7); }
.pa-report > .pa-caps { font-size: 11px; }
.pa-report-say { margin-top: 14px; font: 600 clamp(26px, 2.6vw, 34px)/1.12 var(--head); letter-spacing: -0.015em; }
.pa-report-line { margin-top: 12px; color: var(--soft); font-size: 15.5px; }
.pa-report-also { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; }
.pa-how-h { margin-top: 26px; font-size: 11px; }
.pa-how-list { margin: 10px 0 0; }
.pa-how-list div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.pa-how-list dt { color: var(--soft); font-size: 14.5px; }
.pa-how-list dd { margin: 0; font: 500 13.5px var(--mono); font-variant-numeric: tabular-nums; }
.pa-report-foot { margin-top: 18px; color: var(--muted); font-size: 13px; }
.pa-report-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.pa-report-acts span { height: 30px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; font: 600 13px var(--body); background: var(--raised); color: var(--text); }
.pa-report-acts span.on { background: var(--prussian); color: var(--on-action); }
@media (max-width: 1000px) { .pa-watch-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; } }
@media (max-width: 600px) { .pa-report { padding: 24px 20px; } .pa-watch { padding-bottom: 100px; } }

/* 8. How it looks: a numbered list beside one framed screen that changes as you scroll (wide screens, with motion).
   Without script, with Reduce Motion, or on a phone, each step simply shows its own screen. */
.pa-looks { padding: 40px 0 120px; }
.pa-looks-in { width: var(--wrap); margin: 0 auto; }
.pa-looks-text h2 { max-width: 10em; }
.pa-looks-steps { margin: 40px 0 0; }
.pa-looks-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.pa-looks-steps .n { font: 500 12.5px var(--mono); color: var(--prussian); padding-top: 6px; }
.pa-looks-steps h3 { font-size: 22px; }
.pa-looks-steps p { color: var(--soft); font-size: 15px; margin-top: 6px; max-width: 34em; }
.pa-look-pic { grid-column: 1 / -1; margin-top: 16px; }
.pa-looks-pic { display: none; }
.pa-win { position: relative; border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 1px var(--line-strong), 0 50px 110px -20px rgba(0, 0, 0, .65); line-height: 0; }
.pa-win img { display: block; width: 100%; height: auto; }
@media (min-width: 901px) {
  .pa-looks-steps li { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 2fr); gap: 0 32px; padding: 26px 0; }
  .pa-looks-steps li > div:not(.pa-look-pic) { grid-column: 2; }
  .pa-look-pic { grid-column: 3; grid-row: 1; margin: 0; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .pa-looks { height: 420vh; padding: 0; }
  .js .pa-looks-in { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; gap: 56px; padding: 84px 0 30px; }
  .js .pa-looks-text { flex: 0 0 34%; }
  .js .pa-looks-text h2 { font-size: clamp(34px, 3.6vw, 50px); }
  .js .pa-looks-text .pa-sub { font-size: 15.5px; margin-top: 16px; }
  .js .pa-looks-steps { margin-top: 26px; }
  .js .pa-looks-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; padding: 12px 0; opacity: .38; transition: opacity .4s var(--out); }
  .js .pa-looks-steps li.on { opacity: 1; }
  .js .pa-looks-steps h3 { font-size: 19px; }
  .js .pa-looks-steps p { font-size: 14px; margin-top: 3px; }
  .js .pa-look-pic { display: none; }
  .js .pa-looks-pic { display: block; flex: 1; }
  .js .pa-looks-pic .pa-win { aspect-ratio: 1600 / 980; }
  .js .pa-looks-pic img { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .4s var(--out); }
  .js .pa-looks-pic img.on { opacity: 1; }
}

/* 9. The film, in its Prussian frame: the night the rest of the page is built in */
.pa-film { position: relative; padding: 40px 0 150px; }
.pa-film::before { content: ''; position: absolute; inset: 120px 0 40px; background: radial-gradient(60% 55% at 50% 55%, var(--glow), rgba(31, 78, 121, 0) 70%); pointer-events: none; }
.pa-film .pa-wrap { position: relative; }
.pa-film-frame { position: relative; margin-top: 48px; border-radius: 18px; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 1px var(--line-strong), 0 60px 140px -50px #000; }
.pa-film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--panel); }
.pa-film video.tall { aspect-ratio: 9 / 16; }
.pa-film-frame:has(video.tall) { max-width: 420px; margin-inline: auto; }
.pa-play { position: absolute; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer; color: var(--on-action); background: var(--prussian); display: grid; place-items: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 0 10px rgba(141, 184, 232, .18); transition: transform .25s var(--out), background .2s; }
.pa-play:hover { transform: scale(1.05); background: var(--action-hover); }
.pa-play svg { width: 32px; height: 32px; margin-left: 4px; }

/* 10. Private, the price, questions, and the close: the path returns, all Prussian, under the app's own sentence */
.pa-private { padding: 40px 0 150px; }
.pa-promises li { font: 600 clamp(40px, 5.8vw, 84px)/1.02 var(--head); letter-spacing: -0.03em; }
.pa-promises li:last-child { color: var(--prussian); }
.js .pa-private .pa-promises li { opacity: 0; transform: translateY(14px); }
.js .pa-private.seen .pa-promises li { animation: rise .8s var(--out) forwards; animation-delay: calc(var(--i) * 240ms); }
.pa-talks { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); }
.pa-talks b { font: 500 15px var(--mono); }
.pa-talks b + b::before { content: '·'; color: var(--muted); margin-right: 24px; }
.pa-private .pa-sub { margin-top: 24px; }
.pa-price { padding: 20px 0 150px; }
.pa-price h2 { max-width: 13em; }
.pa-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }
.pa-plan { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px; display: flex; flex-direction: column; }
.pa-plan.main { border-color: rgba(141, 184, 232, .5); background: linear-gradient(180deg, rgba(141, 184, 232, .08), rgba(141, 184, 232, 0) 60%), var(--panel); }
.pa-plan.main .pa-caps { color: var(--prussian); }
.pa-plan .amount { font: 600 56px/1.05 var(--head); letter-spacing: -0.03em; margin: 12px 0 20px; }
.pa-plan .amount em { font: 500 12.5px var(--mono); color: var(--muted); font-style: normal; margin-left: 10px; letter-spacing: .12em; text-transform: uppercase; }
.pa-plan ul { margin: 0 0 26px; border-top: 1px solid var(--line); }
.pa-plan li { position: relative; padding: 10px 0 10px 22px; font-size: 15.5px; border-bottom: 1px solid var(--line); }
.pa-plan li::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--muted); }
.pa-plan.main li::before { background: var(--prussian); }
.pa-plan .pa-btn { margin-top: auto; align-self: flex-start; }
.pa-faq { padding: 20px 0 140px; }
.pa-faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.pa-faq-grid > div:first-child { grid-column: 1 / span 4; }
.pa-faq-grid > div:last-child { grid-column: 6 / -1; }
.pa-qs details, .pa-new details { border-top: 1px solid var(--line); padding: 18px 0; }
.pa-qs details:last-child { border-bottom: 1px solid var(--line); }
.pa-qs summary, .pa-new summary { cursor: pointer; font: 600 19px/1.35 var(--head); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.pa-qs summary::-webkit-details-marker, .pa-new summary::-webkit-details-marker { display: none; }
.pa-qs summary::after { content: '+'; color: var(--muted); font: 400 18px var(--mono); }
.pa-qs details[open] summary::after { content: '−'; }
.pa-qs details p { color: var(--soft); margin-top: 10px; max-width: 40em; }
.pa-new { padding: 0 0 100px; }
.pa-new summary span { font: 12.5px var(--mono); color: var(--muted); }
.pa-new details div { color: var(--soft); margin-top: 8px; }
.pa-end { position: relative; padding: 120px 0 0; overflow: hidden; }
.pa-end::before { content: ''; position: absolute; inset: 0 0 -20%; background: radial-gradient(45% 55% at 50% 45%, var(--glow), rgba(31, 78, 121, 0) 70%); pointer-events: none; }
.pa-end-text { position: relative; text-align: center; }
.pa-end h2 { font-size: clamp(42px, 6vw, 88px); max-width: 12em; margin: 0 auto; letter-spacing: -0.03em; }
.pa-end .pa-actions { justify-content: center; }
.pa-return { position: relative; margin: 96px 0 0; padding-bottom: 70px; }

/* Sections that rise in */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--out), transform .9s var(--out); }
.js [data-reveal].seen { opacity: 1; transform: none; }

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .pa-top nav { display: none; }
  .pa-top > .pa-btn, .pa-top > a:last-child:not(.pa-mark) { margin-left: auto; }
  .pa-faq-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .pa-faq-grid > div { grid-column: 1 !important; }
  .pa-film { padding: 20px 0 100px; }
  .pa-looks { padding: 20px 0 90px; }
  .pa-private, .pa-price, .pa-faq { padding-bottom: 100px; }
  .pa-end { padding-top: 100px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .pa-head .pa-reading { white-space: normal; text-align: right; }
  .pa-looks-steps li { grid-template-columns: 34px minmax(0, 1fr); }
  .pa-play { width: 76px; height: 76px; }
  .pa-plans { grid-template-columns: 1fr; }
  .pa-plan { padding: 24px 22px; }
  .pa-end .pa-actions { flex-direction: column; align-items: center; }
  .pa-form .row { flex-direction: column; }
  .pa-form input[type=email] { flex: none; width: 100%; }
  .pa-foot-fine { flex-direction: column; }
  .pa-talks b + b::before { margin-right: 12px; }
}

/* Reduce Motion: every section shows its final state, and changes are instant */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-in], .js [data-reveal], .js .pa-private .pa-promises li { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .pa-btn, .pa-play, .pa-top { transition: none; }
}