/* CleanJibe — project homepage (web/index.html).
 *
 * A sibling of css/style.css, not a replacement: the homepage loads tokens.css, then
 * style.css, then this file, so the surfaces, ink, buttons, panels, topbar and footer are
 * literally the analyzer's. Everything here is what a marketing-shaped page needs and an
 * app shell does not — a hero, a card grid, a term list, the track motif.
 *
 * Nothing in this file is loaded by the analyzer, and nothing in it overrides a rule the
 * analyzer relies on: every selector below is scoped to a `.home-*` class or to an element
 * that only exists on this page.
 *
 * Mobile-first. The only breakpoints are the two style.css already uses (760 / 560), so the
 * two pages change shape at the same widths.
 */

/* ------------------------------------------------------------------- chrome */

/* The topbar's right half on the homepage: one primary way in, one link out to the source.
   `.topbar-right` (style.css) already lays them out; these are the link-as-button bits. */
.topbar-right a.btn { text-decoration: none; }

.home main { padding-bottom: 34px; }

/* ------------------------------------------------------------- section nav
 *
 * The page's own table of contents, sticky under the topbar: these pages run six or seven
 * screens and a reader arrives with one question out of six. It is furniture, so it wears
 * the eyebrow's mono rather than the buttons' type, and it is one hairline tall.
 *
 * `--topbar-h` is written by the small script at the foot of each page that carries this
 * nav, because the topbar is itself sticky and changes height at the 760 px breakpoint (the
 * tagline goes, the padding shrinks). The fallback below is the desktop measurement, so a
 * page whose script never ran is a few pixels out rather than broken.
 *
 * Below 720 px it is a ROW OF CHIPS THAT SCROLLS SIDEWAYS, the shape the session switcher
 * in the app already has. It used to become a full-width grey <select> saying "On this
 * page…", which Jan photographed on 19 September 2026: under a page header, a grey box with
 * a caret reads as a form field a reader is meant to fill in, not as the contents of the
 * page (docs/web-design-review.md, finding 13). The anchors are the same anchors, the links
 * are the same links, and a reader without JavaScript loses nothing, because there is no
 * longer a control that needs any.
 */
.sectionnav {
  position: sticky; top: var(--topbar-h, 69px); z-index: 19;
  background: var(--surface-1); border-bottom: 1px solid var(--line-soft);
}
.sectionnav-inner {
  max-width: 1120px; margin: 0 auto;
  padding: 6px var(--pad-x-r) 6px var(--pad-x-l);
}
.sectionnav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 2px 18px;
}
.sectionnav a {
  display: inline-block; padding: 5px 0; text-decoration: none;
  font: 600 11px/1.4 var(--mono); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-3);
}
.sectionnav a:hover { color: var(--ink); }

/* Both sticky bars sit over an anchor's landing point, so every target the nav can reach
   has to reserve their height above itself. */
.home-section, .hero-card { scroll-margin-top: calc(var(--topbar-h, 69px) + 44px); }

/* The chips. Same trough-less pill as the session switcher's chips, the same 12.5 px sans,
   and the row bleeds to both screen edges so a scroll looks like a scroll rather than like
   a clipped box — the site nav one bar above does exactly this, and the end gutter is the
   last item's own padding for the reason written there. */
@media (max-width: 720px) {
  .sectionnav-inner {
    padding-top: 7px; padding-bottom: 7px;
    padding-inline: 0;
  }
  .sectionnav ul {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px;
    -webkit-overflow-scrolling: touch;
    padding-inline-start: var(--pad-x, 16px);
    scroll-padding-inline: var(--pad-x, 16px);
  }
  .sectionnav ul::-webkit-scrollbar { display: none; }
  .sectionnav li { flex: 0 0 auto; }
  .sectionnav li:last-child { padding-inline-end: var(--pad-x, 16px); }
  .sectionnav a {
    display: inline-flex; align-items: center; min-height: 34px;
    padding: 0 12px; border-radius: 999px;
    background: var(--surface-2); color: var(--ink-2);
    font: 600 12.5px/1 var(--sans); letter-spacing: 0; text-transform: none;
    white-space: nowrap;
  }
  .sectionnav a:hover { background: var(--surface-0); color: var(--ink); }
}

/* ---------------------------------------------------------------------- hero */

/* Two halves at desktop, one stacked column on a phone. The section is the outer grid and
   `.hero-copy` is the inner one, so the copy keeps its own rhythm whichever way the page
   is shaped — and so `.hero .lede + .lede` below still sees two adjacent siblings. */
.hero {
  padding: 26px 0 30px;
  display: grid;
  gap: 20px;
}
.hero-copy { display: grid; gap: 20px; align-content: start; }

/* The brand at a size that reads as a brand. The tile shares `.mark`'s background rule
   (style.css) rather than an <img>: the URL resolves against the stylesheet, so the one
   artwork serves the 26 px topbar tile and this one without two relative paths, and it can
   never drift from the icon the installed app shows. It rides on the eyebrow's line, which
   is why the hero costs no extra height for it. `aspect-ratio` rather than a second length,
   so the clamp is stated once. */
.hero-brand { display: flex; align-items: center; gap: 14px; }
.hero-mark {
  width: clamp(64px, 15vw, 84px); aspect-ratio: 1; flex: none;
  border-radius: 21%;
  background: #0A1E30 url(../icons/icon.svg) center/cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--mark-ring), 0 10px 26px var(--art-shadow);
}
.hero-brand .eyebrow { min-width: 0; }

/* -------------------------------------------------------------- the hero card

   The page's hero image is the product's own output: the bundled example session exported
   through the analyzer's real share dialog. Three things govern its size.

   It is never drawn WIDER than its 440 native pixels — 340 on a phone, 400 from the first
   breakpoint, 420 at the widest. The cap is about the QR rather than about sharpness: the
   code is 33 modules at one image pixel per module, and a decoder that meets a blurred
   module edge simply declines. 420 is the largest that still reads across a desk.

   It is capped in PIXELS rather than given a column fraction for the same reason it always
   was: a share card printed larger than a phone screen stops reading as something a phone
   made.

   `aspect-ratio` off the intrinsic 440x550 reserves the box before the bytes land, so the
   headline beside it never jumps. */
.hero-card {
  margin: 0; display: grid; gap: 10px; justify-items: center;
}
.hero-card img {
  display: block; width: 100%; max-width: 340px; height: auto; aspect-ratio: 440 / 550;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px var(--art-shadow-strong);
}
.hero-card figcaption {
  color: var(--ink-3); font-size: 13px; line-height: 1.5; max-width: 46ch;
  text-align: center;
}
.hero-card figcaption b { color: var(--ink-2); }

/* style.css sizes h1 for a topbar (18px). The page's actual headline is its own thing. */
.hero h1 {
  font-size: clamp(28px, 7.5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.hero .lede {
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11.5px/1 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.hero .eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--foil);
  box-shadow: 0 0 0 3px #40c8e02e;   /* the same teal at 18 %, spelled out for old engines */
}

/* The hero's aside about the name is gone: the clause now lives in the "Jibe outcomes"
   entry of the vocabulary list, which is where a reader who wants a definition looks.
   Nothing on either page uses `.pun` any more, so the rule went with it. */

.hero .lede + .lede { margin-top: -6px; }

.cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cta .btn { text-decoration: none; }
.cta .cta-note { color: var(--ink-3); font-size: 13px; }

/* ---------------------------------------------------------------- the motif */

/* The track breadcrumb: an off-foil line with two flying segments on it and the three
   outcome markers, drawn in the presentation tokens themselves. It is a picture of what
   the apps record, and it is also the legend for the vocabulary the rest of the page uses,
   which is why the labels are real text rather than part of the drawing.

   It lives in the "What it counts" section now rather than in the hero, so it needs the
   margin the hero's grid gap used to give it. */
.home-section > .motif { margin-bottom: 20px; }
/* The plate is `--figure-plate`, not `--surface-1`: like the analyzer's two figures, this
   drawing is inked in the presentation tokens, which are stepped for a dark surface and
   shared with the iOS app (see "LIGHT THEME" in style.css). So the picture keeps its own
   sky on a light page, and only its caption and key turn with the paper. */
.motif {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 12% 0%, #16232a 0%, var(--figure-plate) 60%);
  padding: 16px 14px 12px;
}
.motif svg { display: block; width: 100%; height: auto; }

/* The drawing's ink. These are the presentation tokens the apps use for the same things
   (docs/presentation.md): the phase tints for the track, the outcome ladder for the three
   verdicts. Shape carries the state — disc / triangle / cross — and colour reinforces it,
   which is the rule the whole project draws by. */
.motif .m-track {
  fill: none; stroke: var(--track); stroke-width: 4.5; opacity: 0.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.motif .m-foil {
  fill: none; stroke: var(--foil); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
}
.motif .m-dir {
  fill: none; stroke: var(--wf-direction-ink); stroke-width: 2; opacity: 0.45;
  stroke-linecap: round; stroke-linejoin: round;
}
.motif .m-flew  { fill: var(--good); stroke: var(--figure-plate); stroke-width: 2; }
.motif .m-touch { fill: var(--warn); stroke: var(--figure-plate); stroke-width: 2; }
.motif .m-fell  { fill: none; stroke: var(--bad); stroke-width: 3.5; stroke-linecap: round; }
/* The key sits ON the plate, not under it — and the plate is dark in both themes (see
   `--figure-plate`). So its ink is the DARK theme's tertiary, spelled out rather than read
   from `--ink-3`: on paper that variable is a near-black that would vanish into the navy. */
.motif-key {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 10px; font-size: 12.5px; color: #8a8a80;
}
.motif-key span { display: inline-flex; align-items: center; gap: 7px; }
.motif-key i {
  width: 10px; height: 10px; flex: none; border-radius: 50%;
  background: currentColor; font-style: normal;
}
/* The four labels are the legend for the marks beside them, so they carry the marks' own
   tokens and NOT the darker text twins — the twins exist for ink on paper, and this is ink
   on the plate. A label in a different green from the disc it names would be a second
   vocabulary for one thing. */
.motif-key .k-flew { color: var(--good); }
.motif-key .k-touch { color: var(--warn); }
.motif-key .k-fell { color: var(--bad); }
.motif-key .k-foil { color: var(--foil); }

/* ------------------------------------------------------------------ sections */

.home-section { padding: 30px 0 0; }
.home-section > h2 { margin-bottom: 4px; }
.home-section > .section-lede {
  color: var(--ink-2); max-width: 62ch; margin-bottom: 16px;
}

/* --------------------------------------------------------------- piece cards */

.pieces { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }

/* `.panel` gives the card its surface; this gives it its innards. */
.piece { display: grid; gap: 12px; align-content: start; }
.piece-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.piece h3 { font-size: 17px; letter-spacing: -0.01em; }
.piece .what { color: var(--ink-3); font-size: 12.5px; }

/* The card's screenshot. All three sources are square, so the box is square too and no
   image is cropped or stretched to fit the row — `contain` is the safety net, not the
   plan. The plate underneath is the app's own second surface, which the watch shot (black
   circle on black) sits in without a seam and the two light screenshots read as a screen
   against. `aspect-ratio` plus intrinsic width/height on the <img> means the row reserves
   its space before a single byte of image arrives, so nothing below it jumps. */
.piece .shot { margin: 0; display: grid; gap: 7px; }
.piece .shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: calc(var(--radius) - 4px);
}
.piece .shot figcaption { color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.piece ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 7px; font-size: 14px; color: var(--ink-2);
}
/* A hairline tick rather than a bullet glyph: the same restraint the app's legends use.
   Absolutely positioned rather than a second grid column — a grid `li` turns every inline
   element inside it (a `<code>` span, say) into a grid item of its own and shatters the
   sentence across the columns. */
.piece li { position: relative; padding-left: 18px; }
.piece li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  height: 1px; width: 10px; background: var(--line); border-radius: 1px;
}
.piece .piece-foot { margin-top: auto; padding-top: 2px; }
.piece .piece-foot .btn { text-decoration: none; }

/* The sentence that used to sit under the share card, now that the card itself is the hero.
   It is a `.section-lede` after the row rather than before it, which is the one place on
   the page a lede runs last: it is the row's conclusion, not its introduction. */
.pieces-foot { margin: 16px 0 0; }

/* The card's status line: "open beta, Connect IQ" is a fact, and it belongs beside the name. */
.status {
  font: 600 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 8px; white-space: nowrap;
}
.status.live {
  color: var(--foil-text);
  border-color: color-mix(in srgb, var(--foil-text) 40%, var(--line));
}

/* ------------------------------------------------------------------ beta pills
 *
 * A `beta` marker beside a feature that is real today but only inside the public beta, so a
 * reader of any page can tell at a glance what an App Store install will and will not carry.
 * docs/channels.md is the list; nothing here decides it.
 *
 * It is `.tag` (style.css) with one colour change, not a shape of its own: the site already
 * teaches that capsule, and a second capsule vocabulary for the same kind of fact is how a
 * page stops being scannable. Release features are unlabelled — an unmarked feature is the
 * quiet majority, and marking both halves would double the noise to say the same thing.
 *
 * Lowercase, because it is a channel name rather than a shout, and `.tag` uppercases by
 * default. The colour is the app's own blue at label weight in both themes: it must not
 * borrow an outcome ink, which on this site means a verdict about foiling.
 */
.tag.beta {
  text-transform: none; letter-spacing: .02em;
  color: var(--series-1); border-color: color-mix(in srgb, var(--series-1) 45%, var(--line));
}
/* In a table cell and in a heading the pill rides the text's own baseline block, so it may
   not add a line of height to the row it sits in. */
h3 .tag.beta, td .tag.beta, dt .tag.beta, li .tag.beta { vertical-align: 2px; }

/* The one-line legend, once per page that carries a pill. Quieter than the note it usually
   follows: it explains furniture. */
.beta-legend {
  margin-top: 10px; font-size: 12.5px; color: var(--ink-3);
}
.beta-legend .tag.beta { margin-left: 0; margin-right: 6px; }
/* The same pill LEADING a note instead of trailing a label: the margin swaps sides. */
.note > .tag.beta:first-child { margin-left: 0; margin-right: 6px; }

/* --------------------------------------------------------------- vocabulary */

.terms { display: grid; gap: 0; }
.term {
  display: grid; gap: 3px;
  padding: 12px 0; border-top: 1px solid var(--line-soft);
}
.term:first-child { border-top: 0; }
.term dt { font-weight: 650; font-size: 14.5px; }
.term dd { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.term .swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px;
}

/* -------------------------------------------------------- numbered flows (/invite/) */

/* The unlock flow is the highest-friction moment of the whole product, and it is a flow:
   five things in an order, three of which happen somewhere that is not this page (a watch,
   a mail client, Garmin Connect). Numbers rather than bullets, because a reader who loses
   their place in it has to start again — and a rule down the left so the list still reads
   as one sequence when a step runs to three paragraphs and a screenshot. */
.steps-flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0; counter-reset: step;
}
.steps-flow > li {
  counter-increment: step;
  position: relative; padding: 14px 0 14px 42px;
  border-top: 1px solid var(--line-soft);
}
.steps-flow > li:first-child { border-top: 0; }
.steps-flow > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font: 650 12.5px/1 var(--mono); color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line);
}
.steps-flow h3 { font-size: 15px; margin-bottom: 5px; letter-spacing: -0.005em; }
.steps-flow p { color: var(--ink-2); font-size: 14px; }
.steps-flow p + p { margin-top: 8px; }
.steps-flow .note { margin-top: 8px; }
.home-section > .note { margin-top: 16px; }

@media (max-width: 560px) {
  .steps-flow > li { padding-left: 36px; }
  .steps-flow > li::before { width: 24px; height: 24px; font-size: 12px; }
}

/* ------------------------------------------------------------------ the fold
   ONE disclosure style for the whole document family, added 15 September 2026 with the
   cut that made the pages short. Three places use it and the argument is the same in all
   three: /start/ puts each route's steps behind one, because a rider takes exactly one
   route and the other four are somebody else's instructions; /watches/ puts "not on the
   list, and why" behind one, because its readers are a minority looking for one model;
   /whats-new/ puts every card older than the three newest behind one, because nine
   equal-weight cards make the newest look like an archive entry.

   It is furniture, so it wears the section nav's ink and the eyebrow's restraint rather
   than a button's type. The default triangle is replaced with a token-coloured one, which
   is what lets the light theme at the foot of style.css turn it with everything else.
   `list-style: none` plus the WebKit pseudo-element is both halves of hiding it; Safari
   still needs the second. */
.home-section details { margin: 14px 0 0; }
.home-section details > summary {
  cursor: pointer; list-style: none;
  color: var(--ink-2); font-size: 13.5px; line-height: 1.55;
  padding: 4px 0;
}
.home-section details > summary::-webkit-details-marker { display: none; }
.home-section details > summary::before {
  content: "\25B8"; color: var(--ink-3); font-size: 11px;
  display: inline-block; width: 14px;
}
.home-section details[open] > summary::before { content: "\25BE"; }
.home-section details > summary:hover { color: var(--ink); }
.home-section details > summary:hover::before { color: var(--ink-2); }
.home-section details > summary:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
/* Inside a route card the handle IS the summary line the card always printed, so it keeps
   that line's size and colour.

   THE TRIANGLE ALONE WAS NOT AN AFFORDANCE (Jan, 16 September 2026). A summary line with a
   7 px glyph in front of it reads as a sentence, and a reader who does not know there are
   steps under it does not go looking for them. So the handle is two rows: the route's own
   summary, and a control line that says what opening it costs — *Show the 6 steps* — with a
   chevron at the far right that turns when the card is open. The control is a full 44 px
   row across the whole card, which is the tap target the rest of the site is built to
   (--tap), and the first route card ships open so the pattern is taught once. No script:
   `details[open]` is the only state there is. */
.piece > details > summary.what {
  color: var(--ink-3); font-size: 12.5px;
  display: grid; gap: 4px; padding: 4px 0 0;
}
/* The generic triangle belongs to the one-line folds; this handle has its own chevron. */
.piece > details > summary.what::before { content: none; }
.piece > details > summary.what:hover { color: var(--ink-2); }
.piece > details > summary.what .what-more {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--tap);
  font: 600 11px/1.5 var(--mono); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-2); border-top: 1px solid var(--line-soft);
}
.piece > details > summary.what .what-more::after {
  content: "\25BE"; font-size: 12px; color: var(--ink-3);
  transition: transform 140ms ease;
}
.piece > details[open] > summary.what .what-more::after { transform: rotate(180deg); }
.piece > details > summary.what:hover .what-more { color: var(--ink); }
.piece > details > summary.what:hover .what-more::after { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .piece > details > summary.what .what-more::after { transition: none; }
}

/* The class pill on a route card: what you get BACK, in docs/copy's own name for it, on a
   card whose title says what you hold. Two ladders, so two labels — and the pill is a link
   to the table that explains the four, because a letter on its own answers nothing. */
.piece-class { margin: 0; }
/* A route's one warning (getting-started.json `notice`), above the fold beside the pill. */
.piece-note { margin: 10px 0 0; }
/* What the browser app does with a way in (getting-started.json `browser`, rider review S10):
   one line above the fold, after the warning if there is one. */
.piece-browser { margin: 10px 0 0; }
/* The Garmin watches by family (make_devices.py, rider review S8): the models of one family
   run on as one line, a middle dot between two. */
.device-models { list-style: none; margin: 0; padding: 0; }
.device-models li { display: inline; }
.device-models li + li::before { content: " · "; }
.tag.class-pill {
  margin-left: 0; text-decoration: none; display: inline-block;
  text-transform: none; letter-spacing: 0.02em;
}
.tag.class-pill:hover { color: var(--ink); border-color: var(--ink-3); }
.home-section details > .steps-flow,
.home-section details > .terms { margin-top: 10px; }
/* /whats-new/: the collapsed cards keep the spacing they have when they are open. */
.home-section details > .panel + .panel { margin-top: 14px; }

/* ------------------------------------------------------------------- claims */

.claims { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.claim h3 { font-size: 15px; margin-bottom: 6px; }
.claim p { color: var(--ink-2); font-size: 14px; }
/* A claim card that carries a list — the two channel lists under "what is coming" — wears
   the piece card's hairline ticks rather than a second bullet style. */
.claim ul {
  margin: 8px 0 0; padding: 0; list-style: none;
  display: grid; gap: 7px; font-size: 14px; color: var(--ink-2);
}
.claim li { position: relative; padding-left: 18px; }
.claim li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  height: 1px; width: 10px; background: var(--line); border-radius: 1px;
}
.claim p + p, .claim ul + p { margin-top: 8px; }
.claim .piece-foot { margin-top: 12px; }
.claim .piece-foot .btn { text-decoration: none; }

/* -------------------------------------------------------------------- footer */

.home footer p + p { margin-top: 6px; }
.home footer a { color: var(--ink-2); }

/* ---------------------------------------------------------------- wider than a phone */

@media (min-width: 761px) {
  /* The hero splits. The right column is the card's own cap, so the grid never stretches
     the picture past its native pixels; `start` rather than `center` keeps the headline at
     the top of the fold on a short window, with the taller card hanging below it. */
  .hero {
    padding: 44px 0 40px; gap: 20px 40px;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: start;
  }
  /* The card is FIRST in the markup, because on a phone it is the eye-catcher and has to be
     the first thing on the screen. A wide window wants the other order — argument left,
     output right — so the two halves swap here rather than in the document. `order` on a
     grid item is exactly this and nothing else: the DOM order, and therefore the reading
     order a screen reader and a keyboard get, is untouched. */
  .hero-copy { gap: 24px; order: 1; }
  .hero-card { order: 2; }
  .hero-card { justify-items: stretch; }
  .hero-card img { max-width: 400px; }
  .hero-card figcaption { text-align: left; }
  .pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* `auto-fit` rather than a fixed three: the claim rows are two cards in one place and
     three in another, and a fixed grid leaves the two-card row with a visible hole where
     the third would have been. */
  .claims { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
  .home-section { padding-top: 46px; }
  /* Two columns of definitions, with the rule between rows still reading left to right. */
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .term:nth-child(2) { border-top: 0; }
}

/* The card's last 20 px, and its native size: 440 is all there is, so this is where it
   stops. The QR is at its most legible here — one screen pixel per module on a 1x display. */
@media (min-width: 1040px) {
  .hero { grid-template-columns: minmax(0, 1fr) 420px; gap: 20px 48px; }
  .hero-card img { max-width: 420px; }
}

@media (max-width: 760px) {
  /* style.css already gives buttons a 44 px target here; a full-width primary CTA is the
     phone convention and stops the two buttons sharing a cramped row. */
  .cta { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cta .btn { width: 100%; }
  .cta .cta-note { text-align: center; }
}

@media (max-width: 560px) {
  .hero h1 { max-width: none; }
  .motif { padding: 12px 10px 10px; }
}

/* The motif is decoration with meaning, not an animation; nothing here moves. But the
   gradient is the one place a forced-colors user would lose the panel edge. */
@media (forced-colors: active) {
  .motif { background: Canvas; }
}