/* The home page: full-width bands, each with its own ground, taken from the
   painted city views the app is named after. Every band redefines the same
   tokens, so labels, buttons, rules and the canvases follow it without a
   colour of their own. */

body.home { padding-inline: 0; background: var(--paper); }
.home .band { background: var(--paper); color: var(--ink); }
.home .band > .wrap, .home .story-pin > .wrap { padding-inline: var(--gut); }
.home section.band { padding-block: clamp(64px, 9vw, 120px); border-bottom: 0; }
/* the bar is the first band: full width already, so no gutter tricks */
.home .bar { margin-inline: 0; padding-inline: 0; }
.home .hero .other-dl { font-size: 15px; color: var(--ink-2); margin-left: 4px; }

/* ── the grounds, light ───────────────────────────────────────────────── */
.g-sky {      /* morning sky over the roofs */
  --paper: #DDE7EE; --sheet: #EBF1F5; --ink: #121820; --ink-2: #3C4754; --ink-3: #4C5866;
  --rule: #B7C6D2; --rule-2: #CBD7E0; --field: #708090; --band: #3A5CB8; --band-ink: #FFFFFF;
  --band-wash: rgba(58, 92, 184, 0.12); --band-wash-2: rgba(58, 92, 184, 0.24);
  --stone: #844E27; --stone-wash: rgba(132, 78, 39, 0.10); --up: #237254; --down: #A94533;
}
.g-ultra {    /* the deep blue of a painted lagoon at dusk */
  --paper: #182546; --sheet: #1F2F56; --ink: #EFF2F9; --ink-2: #C6CEDF; --ink-3: #A7B1C9;
  --rule: rgba(239, 242, 249, 0.18); --rule-2: rgba(239, 242, 249, 0.10); --field: #8E9AB4;
  --band: #97ABF3; --band-ink: #111B34; --band-wash: rgba(151, 171, 243, 0.16);
  --band-wash-2: rgba(151, 171, 243, 0.30); --stone: #E3BA80; --stone-wash: rgba(227, 186, 128, 0.12);
  --up: #6FCFAA; --down: #F5917D; --focus: #E3BA80; color-scheme: dark;
}
.g-night {    /* the same view after dark */
  --paper: #0C111A; --sheet: #131A26; --ink: #E9ECF1; --ink-2: #B3BBC7; --ink-3: #9099A7;
  --rule: rgba(233, 236, 241, 0.14); --rule-2: rgba(233, 236, 241, 0.07); --field: #6C7585;
  --band: #839AF1; --band-ink: #0C111A; --band-wash: rgba(131, 154, 241, 0.16);
  --band-wash-2: rgba(131, 154, 241, 0.32); --stone: #DBA46D; --stone-wash: rgba(219, 164, 109, 0.12);
  --up: #63C6A6; --down: #F48773; --lagoon: #6BBFB1; --focus: #DBA46D; color-scheme: dark;
}
.g-lagoon {   /* water by day */
  --paper: #DEE9E4; --sheet: #EAF2EE; --ink: #111E1B; --ink-2: #374F4A; --ink-3: #455E58;
  --rule: #B2C9C1; --rule-2: #C8D9D3; --field: #688079; --band: #3A5CB8; --band-ink: #FFFFFF;
  --band-wash: rgba(58, 92, 184, 0.12); --band-wash-2: rgba(58, 92, 184, 0.24);
  --stone: #2C685F; --stone-wash: rgba(44, 104, 95, 0.10); --up: #257355; --down: #A94533;
}
.g-ochre {    /* sunlit plaster */
  --paper: #E3CDA3; --sheet: #EEDDBB; --ink: #1C1408; --ink-2: #453720; --ink-3: #554428;
  --rule: rgba(28, 20, 8, 0.20); --rule-2: rgba(28, 20, 8, 0.10); --field: #77633E;
  --band: #244091; --band-ink: #FFFFFF; --band-wash: rgba(36, 64, 145, 0.12);
  --band-wash-2: rgba(36, 64, 145, 0.24); --stone: #863727; --stone-wash: rgba(134, 55, 39, 0.10);
  --up: #196044; --down: #953727; --focus: #244091;
}
.g-stone { /* the site's own cool stone, as before */ }

/* ── the grounds, dark ────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .g-sky {
    --paper: #101820; --sheet: #17212B; --ink: #E7ECF1; --ink-2: #ABB5C1; --ink-3: #8994A2;
    --rule: #283647; --rule-2: #1E2936; --field: #647386; --band: #849DF2; --band-ink: #101820;
    --band-wash: rgba(132, 157, 242, 0.14); --band-wash-2: rgba(132, 157, 242, 0.28);
    --stone: #DCA974; --stone-wash: rgba(220, 169, 116, 0.10); --up: #5EC39F; --down: #F48773; color-scheme: dark;
  }
  :root:not([data-theme="light"]) .g-ultra { --paper: #121D38; --sheet: #1A274A; }
  :root:not([data-theme="light"]) .g-night { --paper: #080B11; --sheet: #0F141E; }
  :root:not([data-theme="light"]) .g-lagoon {
    --paper: #0F1B18; --sheet: #162422; --ink: #E3EEEA; --ink-2: #A9C0BA; --ink-3: #89A29B;
    --rule: #253730; --rule-2: #1A2925; --field: #627C75; --band: #849DF2; --band-ink: #0F1B18;
    --band-wash: rgba(132, 157, 242, 0.14); --band-wash-2: rgba(132, 157, 242, 0.28);
    --stone: #6EC3B3; --stone-wash: rgba(110, 195, 179, 0.10); --up: #5EC39F; --down: #F48773; color-scheme: dark;
  }
  :root:not([data-theme="light"]) .g-ochre {
    --paper: #271C0E; --sheet: #322714; --ink: #F2E7D1; --ink-2: #D3C29E; --ink-3: #B9A783;
    --rule: rgba(242, 231, 209, 0.18); --rule-2: rgba(242, 231, 209, 0.09); --field: #998768;
    --band: #EABA75; --band-ink: #271C0E; --band-wash: rgba(234, 186, 117, 0.14);
    --band-wash-2: rgba(234, 186, 117, 0.28); --stone: #EABA75; --stone-wash: rgba(234, 186, 117, 0.10);
    --up: #5EC39F; --down: #F5917D; --focus: #EABA75; color-scheme: dark;
  }
}
:root[data-theme="dark"] .g-sky {
  --paper: #101820; --sheet: #17212B; --ink: #E7ECF1; --ink-2: #ABB5C1; --ink-3: #8994A2;
  --rule: #283647; --rule-2: #1E2936; --field: #647386; --band: #849DF2; --band-ink: #101820;
  --band-wash: rgba(132, 157, 242, 0.14); --band-wash-2: rgba(132, 157, 242, 0.28);
  --stone: #DCA974; --stone-wash: rgba(220, 169, 116, 0.10); --up: #5EC39F; --down: #F48773; color-scheme: dark;
}
:root[data-theme="dark"] .g-ultra { --paper: #121D38; --sheet: #1A274A; }
:root[data-theme="dark"] .g-night { --paper: #080B11; --sheet: #0F141E; }
:root[data-theme="dark"] .g-lagoon {
  --paper: #0F1B18; --sheet: #162422; --ink: #E3EEEA; --ink-2: #A9C0BA; --ink-3: #89A29B;
  --rule: #253730; --rule-2: #1A2925; --field: #627C75; --band: #849DF2; --band-ink: #0F1B18;
  --band-wash: rgba(132, 157, 242, 0.14); --band-wash-2: rgba(132, 157, 242, 0.28);
  --stone: #6EC3B3; --stone-wash: rgba(110, 195, 179, 0.10); --up: #5EC39F; --down: #F48773; color-scheme: dark;
}
:root[data-theme="dark"] .g-ochre {
  --paper: #271C0E; --sheet: #322714; --ink: #F2E7D1; --ink-2: #D3C29E; --ink-3: #B9A783;
  --rule: rgba(242, 231, 209, 0.18); --rule-2: rgba(242, 231, 209, 0.09); --field: #998768;
  --band: #EABA75; --band-ink: #271C0E; --band-wash: rgba(234, 186, 117, 0.14);
  --band-wash-2: rgba(234, 186, 117, 0.28); --stone: #EABA75; --stone-wash: rgba(234, 186, 117, 0.10);
  --up: #5EC39F; --down: #F5917D; --focus: #EABA75; color-scheme: dark;
}

/* a button on a dark ground is the light ink, so it still reads as the
   main action */
.home .btn:hover { background: var(--band); border-color: var(--band); color: var(--band-ink); }
.home .btn.ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.home a:hover { color: var(--band); }

/* ── 02 the app tour ──────────────────────────────────────────────────── */
/* The pictures are drawn, not photographed: a plain version of each page
   of the app, in its Mixed appearance (a dark sidebar beside a light page).
   The ground below redefines the site's tokens for that light page, so the
   band is the band's blue, the past is stone, results are up and down. */
.g-app {
  --paper: #EAEDF1; --sheet: #F3F5F8; --ink: #121519; --ink-2: #464C55; --ink-3: #5F6671;
  --rule: #C4CAD2; --rule-2: #D8DDE4; --band: #3762D6; --band-wash: rgba(55, 98, 214, 0.16);
  --band-wash-2: rgba(55, 98, 214, 0.34); --stone: #8E592F; --up: #297758; --down: #AE4634;
  --side: #171C25; --side-2: #272F3D; --side-ink: #E8EBF0; --side-ink-2: #87909F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .g-app {
    --paper: #D6DBE2; --ink-3: #585F6A; --sheet: #E1E5EA; --rule: #AFB7C2; --rule-2: #C5CBD3;
    --side: #0C0F15; --side-2: #1D2430;
  }
}
:root[data-theme="dark"] .g-app {
  --paper: #D6DBE2; --ink-3: #585F6A; --sheet: #E1E5EA; --rule: #AFB7C2; --rule-2: #C5CBD3;
  --side: #0C0F15; --side-2: #1D2430;
}
.tour { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); }
.tstep { min-height: min(48vh, 460px); display: grid; align-content: center; gap: 12px; padding-block: 24px;
         border-top: 1px solid var(--rule); opacity: 0.72; transition: opacity 160ms linear; }
/* 0.72: the dimmed steps' text stays above 4.5:1 */
.tstep:first-child { border-top: 0; }
.tstep.on { opacity: 1; }
.tstep h3 { font-size: clamp(26px, 2.6vw, 34px); }
.tstep p { color: var(--ink-2); }
.facts { margin: 4px 0 0; padding-left: 18px; color: var(--ink-2); display: grid; gap: 6px; font-size: 16px; }
.tfig { display: none; }
.tour-stage { position: relative; }
.frame { position: sticky; top: calc(var(--bar-h) + clamp(16px, 6vh, 64px));
         border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--sheet); }
/* before the drawing exists, the same two flat grounds it will have */
.screen, .tfig { background: linear-gradient(90deg, var(--side) 0 20%, var(--paper) 20% 100%); }
.screen { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; }
.screen svg, .tfig svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.frame-bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px;
             font: 500 13px/1.3 var(--f-body); color: var(--ink-3); background: var(--sheet);
             border-top: 1px solid var(--rule); }
/* the caption is words; only its count is a figure */
.frame-bar .num { font-size: 12px; }
/* inside the drawing */
.tour svg text { font-family: var(--f-body); }
.tour svg .t-d { font-family: var(--f-display); font-weight: 600; }
.tour svg .t-m { font-family: var(--f-mono); font-weight: 500; }
.tour svg .t-ink { fill: var(--ink); }
.tour svg .t-ink3 { fill: var(--ink-3); }
.tour svg .t-up { fill: var(--up); }
.tour svg .t-down { fill: var(--down); }
.tour svg .t-side { fill: var(--side-ink); }
@media (max-width: 900px) {
  /* one column: each step carries its own drawing, above its words, and
     morphs into it from the step before as it comes up the screen */
  .tour { grid-template-columns: 1fr; }
  .tour-stage { display: none; }
  .tstep { min-height: 0; opacity: 1; padding-block: 28px; }
  .tfig { display: block; order: -1; position: relative; aspect-ratio: 5 / 4; max-width: 560px; width: 100%;
          margin-bottom: 8px; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
          background: linear-gradient(90deg, var(--side) 0 10%, var(--paper) 10% 100%); }
}

/* ── 03 the scroll story ──────────────────────────────────────────────── */
.story { padding-block: 0 !important; height: 240vh; position: relative; }
/* top-aligned, so the canvas stays put while the open chapter changes */
.story-pin { position: sticky; top: var(--bar-h); height: calc(100vh - var(--bar-h)); height: calc(100svh - var(--bar-h));
             display: grid; align-items: start; padding-top: clamp(16px, 6vh, 72px); overflow: hidden; }
.story-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px);
              align-items: center; width: 100%; }
.story-text { display: grid; gap: 12px; align-content: center; }
.story-text h2 { font-size: clamp(30px, 3.6vw, 48px); }
.story-note { color: var(--ink-3); font-size: 15px; }
.chapters { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: c; }
.chapters li { counter-increment: c; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px;
               padding-block: 8px; border-top: 1px solid var(--rule); color: var(--ink-3); }
.chapters li::before { content: attr(data-n); font: 500 14px/1.6 var(--f-mono); color: var(--ink-3); grid-row: span 2; }
.chapters li b { font-weight: 600; font-size: 16px; }
.chapters li p { grid-column: 2; font-size: 15px; line-height: 1.5; max-height: 0; overflow: hidden;
                 opacity: 0; transition: max-height var(--spring-smooth-d) var(--spring-smooth), opacity 160ms linear; }
.chapters li.on { color: var(--ink); }
.chapters li.on::before { color: var(--stone); }
.chapters li.on p { max-height: 9em; min-height: 4.6em; opacity: 1; color: var(--ink-2); }
.story-stage { display: grid; gap: 10px; }
.story-stage canvas { width: 100%; height: min(62vh, 520px); display: block; }
.story-readout { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; min-height: 1.6em;
                 font-size: 15px; color: var(--ink-2); }
.story-readout .num { font-size: 22px; color: var(--ink); }
@media (max-width: 900px) {
  .story { height: 300vh; }
  /* the next line sat between the words and the chart; the section after
     follows straight on anyway */
  .story-text .next-step { display: none; }
  .story-grid { grid-template-columns: 1fr; gap: 10px; align-content: center; }
  .story-text h2 { font-size: 28px; }
  .story-note { display: none; }
  html:not(.no-js) .chapters li:not(.on) { display: none; }
  .chapters li { border-top: 0; }
  /* what the pinned area leaves after the words and the readout, so the
     readout's line is never cut off on a short phone screen */
  .story-stage canvas { height: clamp(150px, calc(100svh - 480px), 40vh); }
}
/* without the script there is nothing to scrub: the steps read as a list */
.no-js .story { height: auto; padding-block: 80px !important; }
.no-js .story-pin { position: static; height: auto; }
.no-js .chapters li p { max-height: none; opacity: 1; }
.no-js .story-stage { display: none; }

/* ── 04 try it ────────────────────────────────────────────────────────── */
.g-lagoon .demo canvas { border-bottom-color: var(--rule); }
.g-lagoon .example { margin-bottom: 64px; }

/* ── 05 install ───────────────────────────────────────────────────────── */
.devices { flex-wrap: wrap; margin-bottom: 8px; }
.devices button { font: 500 14px/1.2 var(--f-body); padding: 10px 14px; color: var(--ink); }
.devices button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.devices { --seg-ink: var(--ink); }
.devices button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dev-guess { margin: 0 0 18px; }
.dev-panel { padding-top: 22px; }
.dl { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; }
@media (max-width: 860px) { .dl { grid-template-columns: 1fr; gap: 28px; } }
.install li { grid-template-columns: 34px 1fr; }
.install li b { font-weight: 600; }
.install li p { color: var(--ink-2); margin-top: 4px; font-size: 16px; }
.install li::before { color: var(--stone); font-size: 16px; }
.cmd { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.cmd code { font-size: 13px; line-height: 1.5; padding: 8px 10px; background: var(--sheet); color: var(--ink);
            border-color: var(--rule); overflow-wrap: anywhere; user-select: all; }
.dl-side { display: grid; gap: 18px; align-content: start; }
.dev-note { display: grid; gap: 12px; max-width: 64ch; padding-block: 8px 12px; }
.dev-note p { color: var(--ink-2); }
.dev-note b { color: var(--ink); }
.first { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); }
.first h3 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 14px; }
.first-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr));
               column-gap: 48px; color: var(--ink-2); }
.first-steps b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .first-steps { grid-template-columns: 1fr; } }

/* ── 06 changelog, questions ─────────────────────────────────────────── */
.g-stone section { padding-block: clamp(56px, 8vw, 96px); }
.g-stone section + section { border-top: 1px solid var(--rule); }
.g-stone section { border-bottom: 0; }
/* the three sections at the foot of the page are for looking things up, so
   their headings are a size down from the sections that make the case */
#numbers h2, #changelog h2, #faq h2 { font-size: clamp(26px, 3vw, 34px); }
#numbers .head, #changelog .head, #faq .head { margin-bottom: clamp(16px, 2.2vw, 26px); }
.g-stone .foot { border-top: 1px solid var(--rule); }

/* a short screen: a smaller canvas and no second line under it */
@media (max-height: 640px) {
  .story-pin { padding-top: 16px; }
  .story-stage canvas { height: 40vh; }
  .story-readout span:last-child { display: none; }
  .story-text h2 { font-size: 26px; }
}

/* without the script: every step and every device, laid out flat */
.no-js .tour-stage { display: none; }
.no-js .tour { grid-template-columns: 1fr; }
.no-js .tstep { opacity: 1; min-height: 0; }
.no-js .tfig { display: none; }
.no-js .devices, .no-js #xattr-copy, .no-js #link-copy { display: none; }
.no-js .dev-panel[hidden] { display: block !important; }
.no-js .dev-panel + .dev-panel { border-top: 1px solid var(--rule); margin-top: 22px; }
.copied { margin-left: 4px; }

@media (prefers-reduced-motion: reduce) {
  .tstep, .chapters li p { transition: none; }
}
.dev-h { display: none; font-size: 22px; margin-bottom: 10px; }
.no-js .dev-h { display: block; }

/* ── 3.0.1: trust and the way in (after the review) ─────────────────── */
.hero-facts { margin: -14px 0 0; font: 400 14px/1.5 var(--f-body); color: var(--ink-2); display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.hero-facts .sk { width: 22em; }
/* 3.0.4 (site audit): who makes it, under the buttons */
.hero-maker { margin: -8px 0 0; color: var(--ink-2); max-width: 62ch; }
/* the line over the headline: what it costs and where it runs, in plain words */
.hero-kicker { font: 500 16px/1.4 var(--f-body); color: var(--ink-2); margin-bottom: -10px; }
.proof { margin: 0; padding: 12px 0 0; font-size: 15px; color: var(--ink-2); display: flex; gap: 10px; flex-wrap: wrap; }
.proof[hidden] { display: none; }
.why-warn { margin: 0 0 24px; padding: 14px 16px; background: var(--sheet); border-top: 1px solid var(--ink); max-width: 860px; }
.why-warn > p { margin: 0; color: var(--ink-2); }
.why-warn details { border-top: 1px solid var(--rule); margin-top: 12px; padding-block: 12px 0; }
.why-warn details:last-child { border-bottom: 0; }
.why-warn code, .still code { font-size: 13px; background: var(--paper); padding: 2px 6px; color: var(--ink); overflow-wrap: anywhere; }
details.still { margin-top: 8px; padding-block: 12px; }
details.still summary { font-weight: 500; }
#record-home .scroll { margin: 18px 0 10px; overflow-x: auto; }
.rec-limits { max-width: 70ch; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 14px; }
.final-cta .wrap { display: grid; gap: 14px; }
.final-cta .actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 0; }

/* ── 3.0.1: after the design review ─────────────────────────────────── */
/* the record table fits a phone: the percentages stay, the bars go */
@media (max-width: 560px) {
  #record-home .rec-table .meter .track { display: none; }
  #record-home .rec-table .meter { min-width: 0; }
  #record-home .rec-table th { font-size: 11px; }
}
/* four device tabs as a 2 x 2 grid on a phone, so none sits alone */
@media (max-width: 640px) {
  .devices.seg { display: grid; grid-template-columns: 1fr 1fr; }
  .devices.seg button + button { border-left: 0; }
  .devices.seg button:nth-child(even) { border-left: 1px solid var(--rule); }
  .devices.seg button:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
.hero .lede { max-width: 62ch; }

/* ── 3.0.3: where you are, and what comes next ─────────────────────────── */
/* the next step at the end of each main section: one line, one link */
.next-step { margin: clamp(28px, 4vw, 44px) 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
             font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.next-step .nx { margin-right: 4px; }
.next-step a { color: var(--ink); font-weight: 500; }
.story-text .next-step { margin-top: 18px; font-size: 15px; }
.g-stone section .next-step { margin-bottom: 0; }

/* the rail at the right edge (rail.js), where there is room beside the text.
   It sits on its own sheet so it reads over the light and the dark bands. */
.rail { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 15;
        background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r);
        padding: 12px 8px; }
.rail[hidden] { display: none; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.rail a { display: flex; align-items: center; gap: 10px; flex-direction: row-reverse;
          text-decoration: none; color: var(--ink-3); font: 500 11px/1 var(--f-mono);
          letter-spacing: 0.06em; text-transform: uppercase; min-height: 18px; }
.rail a:hover { color: var(--ink); }
.rail a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.rail-mark { flex: none; width: 10px; height: 10px; border: 1px solid var(--field); border-radius: 2px;
             background: var(--paper); position: relative; z-index: 1; }
.rail a.passed .rail-mark { background: var(--band); border-color: var(--band); }
.rail a[aria-current="location"] { color: var(--ink); }
.rail a[aria-current="location"] .rail-mark { background: var(--band); border-color: var(--ink);
                                               outline: 2px solid var(--band-wash-2); outline-offset: 1px; }
/* the line behind the marks, filled to where the reader is */
.rail-track { position: absolute; right: 12px; top: 21px; bottom: 21px; width: 2px; background: var(--rule-2); }
.rail-fill { position: absolute; inset: 0; background: var(--band); transform-origin: 50% 0; transform: scaleY(0); }
/* only the marks when the margin is narrow; the names when it is wide */
.rail[data-room="marks"] .rail-name { position: absolute; width: 1px; height: 1px; overflow: hidden;
                                      clip-path: inset(50%); white-space: nowrap; }
.rail[data-room="marks"] { padding: 12px 7px; }
.rail[data-room="marks"] .rail-track { right: 11px; }
@media print { .rail, .bar-progress { display: none; } }

/* the line along the bottom of the bar, where the rail does not fit */
.bar { position: sticky; }
.bar-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--band);
                transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.bar-progress[hidden] { display: none; }

/* the top bar's browser link moved to site.css in 3.0.3, for every page */
.final-survey { color: var(--ink-2); font-size: 15px; }
.final-survey a { color: var(--ink); }
.row-btns-inline { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── 3.0.3: after the site review ─────────────────────────────────────── */
/* reduced motion: "How it forecasts" is a plain list beside the finished
   picture, with no scroll runway (it was 4,000 to 7,000 px of nothing) */
@media (prefers-reduced-motion: reduce) {
  .story { height: auto; padding-block: clamp(64px, 9vw, 120px) !important; }
  .story-pin { position: static; height: auto; overflow: visible; padding-top: 0; }
  .chapters li p, .chapters li.on p { max-height: none; min-height: 0; opacity: 1; color: var(--ink-2); }
  .chapters li, html:not(.no-js) .chapters li:not(.on) { display: grid; color: var(--ink); }
  .chapters li::before { color: var(--stone); }
  .story-note { display: block; }
}
/* the tour's "scroll, and each one turns into the next" is only true where
   the drawings do turn into each other */
@media (max-width: 900px) { .wide-only { display: none; } }

/* the facts under the hero buttons: "What changed" on its own line, and
   the line kept as tall as it will be, so nothing below moves when it fills */
.hero-facts { display: grid; gap: 2px; justify-items: start; }
#hero-facts-t { min-height: 1.5em; }
@media (max-width: 640px) { #hero-facts-t { min-height: 3em; } }

/* the hero chart starts within the first screen of a laptop */
@media (min-width: 900px) and (max-height: 860px) {
  .home .hero { padding-top: clamp(20px, 4vh, 40px); gap: 22px; }
}

/* try it: on a phone the chart comes first, so a dial moves something you
   can see, and the sliders are big enough to take a thumb */
@media (max-width: 860px) {
  .demo canvas { order: -1; height: 240px; }
}
.demo input[type=range] { height: 44px; margin: 0; }
#say3 { display: block; margin-top: 2px; }
#say3[hidden] { display: none; }

/* one rule and one gap under the track record */
.rec-limits { border-top: 0; padding-top: 0; }

/* "after you install" folds away; it is about the desktop app */
details.first { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--rule); }
details.first > summary.first-h { font: 500 clamp(22px, 2.2vw, 28px)/1.2 var(--f-display); color: var(--ink);
                                  cursor: pointer; padding-block: 6px; }
details.first[open] > summary.first-h { margin-bottom: 14px; }

/* touch targets: "Other downloads" and the footer's links */
.home .hero .other-dl { display: inline-block; padding-block: 11px; }
@media (max-width: 640px) {
  .foot nav a { padding-block: 11px; }
  .foot nav { gap: 4px 20px; }
}

/* the rail takes the ground of the band behind it (rail.js), so it reads
   as part of the page on the dark bands too */
.rail { background: var(--paper); }
/* every "Next" line's rule runs the width of the column, like the others */
.next-step { max-width: none; }

/* ── 3.0.3: after the review of the review ─────────────────────────────── */
/* the warning, said under the download button before anyone clicks */
.hero-note { margin: -16px 0 0; font: 400 14px/1.5 var(--f-body); color: var(--ink-2); }
.hero-note a { display: inline-block; padding-block: 6px; }
/* the rail's names come up for a keyboard as well as for a pointer */
.rail[data-room="marks"] a:focus-visible .rail-name {
  position: absolute; right: calc(100% + 10px); width: auto; height: auto; clip-path: none;
  background: var(--paper); border: 1px solid var(--rule); padding: 4px 8px; color: var(--ink); }
.rail a { position: relative; }
/* the story's "Next": in the pinned column on a wide screen; on a phone, at
   the end of the story's run, under the chart */
.story-next { display: none; }
@media (max-width: 900px) {
  .home .story-next { display: block; padding-block: 0 40px; }
  .story-next .next-step { margin-top: 0; }
}
/* a short, wide screen (a small laptop): the pinned column had no room for
   the "Next" line and it was cut off. It goes where a phone has it. Only
   where the column is pinned: with reduced motion or no script it is not */
@media (min-width: 901px) and (max-height: 760px) and (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .story-pin { padding-top: 16px; }
  html:not(.no-js) .story-text .next-step { display: none; }
  html:not(.no-js) .home .story-next { display: block; padding-block: 0 40px; }
  html:not(.no-js) .story-next .next-step { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-only { display: none; }
}
/* touch targets: the footer's links wherever the pointer is a finger */
@media (pointer: coarse) {
  .foot nav a { padding-block: 11px; }
  .foot nav { gap: 4px 20px; }
}
/* "The app" on a phone: shorter drawings and no fact list (it is on /method),
   so the four pages take about a fifth less scrolling */
@media (max-width: 900px) {
  .tstep { padding-block: 20px; }
  .tfig { aspect-ratio: 16 / 11; }
  .tstep .facts { display: none; }
}

/* ── 3.0.4: the track record on its own warm ground ──────────────────── */
.g-ochre section { padding-block: clamp(56px, 8vw, 96px); }
#record-home .head .lede { max-width: 62ch; color: var(--ink-2); margin: 0; }
#record-home .bt { margin-bottom: 8px; }
.bt-more { margin: 0 0 6px; }
.bt-more a { font-weight: 500; }
.bt-live-h { font: 500 clamp(24px, 2.6vw, 32px)/1.15 var(--f-display); margin: clamp(36px, 5vw, 56px) 0 10px;
             padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--rule); }
.proof b { font-weight: 500; color: var(--ink); }
/* on the dark ochre the accent is an amber too close to the misses' coral,
   so the held months take the cream ink instead */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-ochre .bt { --bt-ok: var(--ink-2); } }
:root[data-theme="dark"] .g-ochre .bt { --bt-ok: var(--ink-2); }
/* the test's line sits with the facts under the buttons, in the first screen */
.hero .proof { display: block; padding-top: 0; margin-top: -8px; font-size: 15px; }
.hero .proof b { font-family: var(--f-body); font-weight: 600; }
/* a narrow phone: the browser button's hint goes under its name, not beside it in a squeeze */
@media (max-width: 430px) {
  .hero .actions .btn.ghost { flex-wrap: wrap; row-gap: 4px; padding-block: 10px; }
  .hero .actions .btn.ghost small { flex-basis: 100%; }
}

/* ── 3.0.4: install, for someone doing it the first time ─────────────── */
.dev-school { margin: 10px 0 0; color: var(--ink-2); }
.dev-school a { color: var(--ink); font-weight: 500; }
/* a drawing of what the computer shows at the step people stop at; the
   button to press is the one in the accent */
.howto { margin: 12px 0 4px; display: grid; gap: 6px; max-width: 340px; }
.howto svg { width: 100%; height: auto; display: block; }
.howto .h-box { fill: var(--sheet); stroke: var(--rule); }
.howto .h-title { font: 600 14px var(--f-body); fill: var(--ink); }
.howto .h-text { font: 400 12.5px var(--f-body); fill: var(--ink-2); }
.howto .h-label { font: 500 11.5px var(--f-mono); letter-spacing: 0.06em; fill: var(--ink-3); }
.howto .h-note { font: 400 12px var(--f-body); fill: var(--ink-3); }
.howto .h-rule { stroke: var(--rule-2); }
.howto .h-btn { fill: var(--paper); stroke: var(--rule); }
.howto .h-btext { font: 500 12.5px var(--f-body); fill: var(--ink-2); }
.howto .h-go { fill: var(--band-wash); stroke: var(--band); stroke-width: 2; }
.howto .h-gotext { fill: var(--ink); font-weight: 600; }
.howto figcaption { font: 400 13px/1.4 var(--f-body); color: var(--ink-3); }
.howto .h-link { font: 500 12.5px var(--f-body); fill: var(--band); text-decoration: underline; }