/* =================================================================
   The Belonaire Ecosystem
   A single stylesheet. No framework, no reset library, no webfont.
   ================================================================= */

/* ---------- Tokens ----------

   Day lives here as plain values. Midnight overrides them further down, under
   `prefers-color-scheme: dark` and under `[data-theme="midnight"]`.

   Two blocks rather than one clever declaration, on purpose, see the note on
   the Midnight block for what the clever version actually did on a phone.
   ---------------------------------------------------------------------- */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Both schemes are allowed here; the toggle narrows it to one. */
  color-scheme: light dark;

  /* The two quiet greys are a step darker in Day than the Apple palette they
     came from. #86868b on #f5f5f7 reads at 3.3:1, the footer, the disabled
     checkout button and the "optional" hint on the bag were all below the 4.5:1
     that small text needs. Both moved down one notch rather than one being
     collapsed into the other, so the three-level hierarchy survives. Midnight
     was already clear and is untouched. */
  --ink: #1d1d1f;
  --ink-2: #5c5c61;
  --ink-3: #6e6e73;
  --paper: #ffffff;
  --paper-2: #f5f5f7;
  --hair: rgba(0, 0, 0, .12);
  --hair-soft: rgba(0, 0, 0, .06);
  --blue: #0066cc;
  --blue-bright: #0071e3;
  --blue-hover: #0077ed;
  --det: #0b6bcb;
  --prob: #9a5c14;
  --warn: #b3261e;

  --nav-h: 48px;
  --pill: 980px;

  /* ---------- Motion ----------

     Two curves and four durations, and everything on the site uses them. The
     stylesheet had grown .2s, .3s, .34s, .35s, .4s, .45s and .46s doing the
     same job in different places, which is not a thing anybody sees directly,
     it is a thing they feel as the site being slightly unlike itself from one
     tap to the next.

     --ease is the one that decelerates hard: things arriving. --ease-soft is
     even, for a colour or a shadow, where a dramatic curve would look like a
     twitch.

     The rule for picking a duration is how far the thing travels. A colour
     changes in dur-1. A small element moves in dur-2. A panel crosses the
     screen in dur-3. dur-4 is for the one or two things that should feel
     deliberate, like the drawer's rows arriving behind it. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-1: .18s;
  --dur-2: .28s;
  --dur-3: .42s;
  --dur-4: .6s;

  --container: 1024px;
  --container-wide: 1220px;
  --gutter: 22px;
}

/* The toggle writes one of these onto <html>. Nothing else changes. */
:root[data-theme="day"] { color-scheme: light; }
:root[data-theme="midnight"] { color-scheme: dark; }

/* ---------- Section grounds ----------

   Pages alternate grounds for rhythm. In Midnight that rhythm is kept but the
   whole range shifts down, so a "dark" section is still a change of ground
   rather than a jarring light panel in the middle of a dark page.
   ---------------------------------------------------------------------- */
.theme-light {
  --bg: #ffffff;
  --fg: #1d1d1f;
  --fg-2: #6e6e73;
  --line: rgba(0,0,0,.06);
  --card: #ffffff;
  --card-line: rgba(0,0,0,.08);
}
.theme-muted {
  --bg: #f5f5f7;
  --fg: #1d1d1f;
  --fg-2: #6e6e73;
  --line: rgba(0,0,0,.08);
  --card: #ffffff;
  --card-line: rgba(0,0,0,.06);
}
.theme-dark {
  --bg: #000000;
  --fg: #f5f5f7;
  --fg-2: #a1a1a6;
  --line: rgba(255,255,255,.14);
  --card: #131316;
  --card-line: rgba(255,255,255,.1);
}
.theme-ink {
  --bg: #161617;
  --fg: #f5f5f7;
  --fg-2: #a1a1a6;
  --line: rgba(255,255,255,.14);
  --card: #1d1d1f;
  --card-line: rgba(255,255,255,.1);
}



/* ══════════════════════════════════════════════════════════════════════════
   MIDNIGHT

   Plain overrides, deliberately not `light-dark()`.

   The palette used to be written as `--ink: #1d1d1f; --ink: light-dark(...)`,
   on the theory that the first line was a fallback for a browser without the
   function. IT IS NOT. A custom property accepts ANY value, the browser does
   not validate it at parse time, so the second declaration always wins and
   stores a function the browser cannot resolve. Every `color: var(--ink)` then
   becomes invalid at computed-value time, which for an inherited property
   means INHERIT, not fall back.

   On an iPhone older than iOS 17.5 that produced white text, on scrims that
   kept their own white because a REAL property's fallback does work, in dark
   mode only. Chrome on iOS is WebKit too, so it failed identically, which is
   exactly the report. Proved in the browser before rewriting: the fallback
   held for a real property and did not for a custom property.

   So: no function, two triggers, works everywhere.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #8a8a8f;
    --paper: #000000;
    --paper-2: #0c0c0d;
    --hair: rgba(255,255,255,.16);
    --hair-soft: rgba(255,255,255,.09);
    --blue: #2997ff;
    --blue-bright: #0b6ad4;
    --blue-hover: #1573dd;
    --det: #5ea9f5;
    --prob: #e0a45e;
    --warn: #ff8a80;
  }
  :root:not([data-theme="day"]) .theme-light {
    --bg: #000000;
    --fg: #f5f5f7;
    --fg-2: #a1a1a6;
    --line: rgba(255,255,255,.1);
    --card: #121214;
    --card-line: rgba(255,255,255,.1);
  }
  :root:not([data-theme="day"]) .theme-muted {
    --bg: #0c0c0d;
    --fg: #f5f5f7;
    --fg-2: #a1a1a6;
    --line: rgba(255,255,255,.1);
    --card: #161618;
    --card-line: rgba(255,255,255,.09);
  }
  :root:not([data-theme="day"]) .theme-dark {
    --bg: #161617;
    --fg: #f5f5f7;
    --fg-2: #a1a1a6;
    --line: rgba(255,255,255,.14);
    --card: #1f1f22;
    --card-line: rgba(255,255,255,.1);
  }
  :root:not([data-theme="day"]) .theme-ink {
    --bg: #1d1d1f;
    --fg: #f5f5f7;
    --fg-2: #a1a1a6;
    --line: rgba(255,255,255,.14);
    --card: #26262a;
    --card-line: rgba(255,255,255,.1);
  }
}

:root[data-theme="midnight"] {
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #8a8a8f;
  --paper: #000000;
  --paper-2: #0c0c0d;
  --hair: rgba(255,255,255,.16);
  --hair-soft: rgba(255,255,255,.09);
  --blue: #2997ff;
  --blue-bright: #0b6ad4;
  --blue-hover: #1573dd;
  --det: #5ea9f5;
  --prob: #e0a45e;
  --warn: #ff8a80;
}
:root[data-theme="midnight"] .theme-light {
  --bg: #000000;
  --fg: #f5f5f7;
  --fg-2: #a1a1a6;
  --line: rgba(255,255,255,.1);
  --card: #121214;
  --card-line: rgba(255,255,255,.1);
}
:root[data-theme="midnight"] .theme-muted {
  --bg: #0c0c0d;
  --fg: #f5f5f7;
  --fg-2: #a1a1a6;
  --line: rgba(255,255,255,.1);
  --card: #161618;
  --card-line: rgba(255,255,255,.09);
}
:root[data-theme="midnight"] .theme-dark {
  --bg: #161617;
  --fg: #f5f5f7;
  --fg-2: #a1a1a6;
  --line: rgba(255,255,255,.14);
  --card: #1f1f22;
  --card-line: rgba(255,255,255,.1);
}
:root[data-theme="midnight"] .theme-ink {
  --bg: #1d1d1f;
  --fg: #f5f5f7;
  --fg-2: #a1a1a6;
  --line: rgba(255,255,255,.14);
  --card: #26262a;
  --card-line: rgba(255,255,255,.1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.4706;
  letter-spacing: -0.022em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
[hidden] { display: none !important; }

a { color: var(--blue); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration: underline; } }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.07; }
p { margin: 0; }

::selection { background: rgba(0, 113, 227, 0.2); }

:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -60px; left: 12px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 10px 16px;
  border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.3);
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: calc(var(--nav-h) + 8px); }

/* ================================================================== *
   THE BAR, four things, at every width.

   Mark, search, bag, three bars. The product links used to sit here and
   collapse into a column of words on a phone; they live in the drawer now,
   where each is a row you can hit with a thumb.
   ================================================================== */
.globalnav {
  position: sticky; top: 0; z-index: 60;
  /* Solid, and deliberately not frosted. A translucent bar with a backdrop
     filter takes its colour from whatever is passing underneath, which is why
     the four icons sat on a grey wash instead of on white. Pure #fff in Day and
     pure #000 in Midnight, and nothing shows through. */
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-soft);
}
.globalnav.is-scrolled { border-bottom-color: var(--hair); }

.globalnav__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--nav-h);
  display: flex; align-items: center;
}

/* The mark IS the theme switch, the control is the thing that changes. */
.globalnav__logo {
  flex: none; margin: 0; padding: 0 10px 0 0;
  white-space: nowrap; user-select: none;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.globalnav__logo .mark {
  width: 22px; height: 22px; display: block;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-1) var(--ease-soft);
}

/* ── THE LOCKUP ─────────────────────────────────────────────────────────────
 *
 * The mark is the B. "elonaire" is set beside it so the two read as one word
 * rather than as a logo with a caption, which means matching three things:
 *
 *   SLANT. The mark is drawn inside `skewX(-12)`. The letters take the same
 *          -12deg, or the B leans and the word stands up straight behind it.
 *   HEIGHT. The B's cap height is 120 of the mark's 150 viewBox units, so at
 *          22px the cap is ~17.6px and the lowercase beside it wants an
 *          x-height near 9.4px. That is what sets the font size, not taste.
 *   WEIGHT. The mark's stroke is 20 units on a 150 grid, heavy. 600 is the
 *          nearest the system face gets without going to 700, which reads
 *          heavier than the drawn B rather than equal to it.
 *
 * The skew leans the last letter's right edge out over the baseline, so the
 * padding after it is larger than the gap before it, otherwise it collides
 * with whatever follows.
 * ───────────────────────────────────────────────────────────────────────── */
.wordmark {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  /* Negative, and this is the whole difference between "Belonaire" and
     "B elonaire". The mark's viewBox carries empty space to the right of the
     bowl, and the "e" carries its own left side bearing; stacked, they open a
     gap about six pixels wide, which the eye reads as a word break. Pulling
     back three closes it to an ordinary letter gap without the two touching. */
  margin-left: -3px;
  padding-right: 3px;
  transform: skewX(-12deg);
  transform-origin: 0 100%;
  transition: opacity var(--dur-1) var(--ease-soft);
}

@media (hover: hover) and (pointer: fine) {
  .globalnav__logo:hover .mark,
  .globalnav__logo:hover .wordmark { opacity: .6; }
}
.globalnav__logo:active .mark { transform: scale(.88); }
.globalnav__logo:active .wordmark { transform: skewX(-12deg) scale(.88); }

.globalnav__tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }

.globalnav__tool {
  position: relative;
  width: 40px; height: 40px; padding: 0; flex: none;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  display: grid; place-items: center; border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-1) var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .globalnav__tool:hover { background: var(--hair-soft); }
}
.globalnav__tool:active { background: var(--hair); }
.globalnav__tool svg { width: 23px; height: 23px; display: block; }

.globalnav__bag-count {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--blue-bright); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
  animation: bag-pop var(--dur-2) var(--ease);
}
@keyframes bag-pop { from { transform: scale(.2); opacity: 0; } }

/* Three bars that become a cross while the drawer is open. */
.bars { display: block; position: relative; width: 16px; height: 11.4px; }
.bars i {
  position: absolute; left: 0; width: 16px; height: 1.7px; border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-1) var(--ease-soft),
              top var(--dur-1) var(--ease);
}
.bars i:nth-child(1) { top: 0; }
.bars i:nth-child(2) { top: 4.85px; }
.bars i:nth-child(3) { top: 9.7px; }
/* Into a cross: the outer two slide to the middle, then turn. The middle one
   shrinks towards its centre rather than just fading, so it reads as being
   absorbed into the other two instead of blinking out. */
.globalnav__menu[aria-expanded="true"] .bars i:nth-child(1) { top: 4.85px; transform: rotate(45deg); }
.globalnav__menu[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.globalnav__menu[aria-expanded="true"] .bars i:nth-child(3) { top: 4.85px; transform: rotate(-45deg); }

/* ================================================================== *
   THE PRODUCTS DRAWER, pops in from the left.
   ================================================================== */
.pdrawer { position: fixed; inset: 0; z-index: 80; }
.pdrawer[hidden] { display: none !important; }

.pdrawer__scrim {
  position: absolute; inset: 0;
  background: var(--paper);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-soft);
}
.pdrawer.is-open .pdrawer__scrim { opacity: 1; }

.pdrawer__panel {
  position: absolute; inset: 0 auto 0 0;
  width: min(430px, 90vw);
  display: flex; flex-direction: column;
  background: var(--paper);
  transform: translateX(-100%);
  transition: transform var(--dur-3) var(--ease);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overscroll-behavior: contain;
}
.pdrawer.is-open .pdrawer__panel { transform: none; }

.pdrawer__head {
  flex: none; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 var(--gutter);
  border-bottom: 1px solid var(--hair-soft);
}
/* The head is the brand, not a destination label. It still goes home, because
   a logo always does, but the panel's explicit way back is the row below. */
.pdrawer__brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.015em;
}
@media (hover: hover) and (pointer: fine) {
  .pdrawer__brand:hover { text-decoration: none; opacity: .65; }
}
.pdrawer__brand .mark { width: 19px; height: 19px; display: block; }

/* ---------- The way back ----------

   First in the panel, above the label for everything it is not, and shaped
   like a row rather than a line of text so it reads as somewhere to go. */
.pdrawer__home {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; margin-bottom: 22px;
  border-radius: 14px;
  background: var(--hair-soft);
  color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -0.015em;
  transition: background var(--dur-1) var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .pdrawer__home:hover { text-decoration: none; background: var(--hair); }
}
.pdrawer__home .pdrawer__home-icon { display: grid; place-items: center; color: var(--ink-2); }
.pdrawer__home .pdrawer__home-icon svg { width: 21px; height: 21px; display: block; }
.pdrawer__home-label { flex: 1; }
.pdrawer__home .pdrawer__go { font-size: 22px; color: var(--ink-3); }
/* On the home page itself it is where you already are, so it says so and
   stops pretending to be a way somewhere. */
.pdrawer__home.is-current { background: none; border: 1px solid var(--hair); color: var(--ink-2); }
.pdrawer__home.is-current .pdrawer__go { display: none; }
.pdrawer__home.is-current .pdrawer__home-label::after {
  content: "You are here"; margin-left: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
}

.pdrawer__close {
  width: 38px; height: 38px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--ink-2);
  display: grid; place-items: center; border-radius: 10px;
  transition: background var(--dur-1) var(--ease-soft), color var(--dur-1) var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .pdrawer__close:hover { background: var(--hair-soft); color: var(--ink); }
}
.pdrawer__close svg { width: 20px; height: 20px; }

.pdrawer__nav {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 18px var(--gutter) 40px;
}

.pdrawer__label {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}
.pdrawer__label--also { margin-top: 26px; }

.pdrawer__list, .pdrawer__also { list-style: none; margin: 0; padding: 0; }

/* Each row arrives a beat after the one above it, the "popped from the left"
   the drawer as a whole is doing, repeated down the list. */
.pdrawer__item {
  opacity: 0; transform: translateX(-14px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  transition-delay: calc(90ms + var(--i, 0) * 28ms);
}
.pdrawer.is-open .pdrawer__item { opacity: 1; transform: none; }

.pdrawer__link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "kicker go" "name go" "line go";
  align-items: center;
  gap: 0 12px;
  padding: 13px 12px 15px;
  margin-inline: -12px;
  border-radius: 14px;
  color: var(--ink);
  transition: background var(--dur-1) var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .pdrawer__link:hover { text-decoration: none; background: var(--hair-soft); }
}
.pdrawer__link:active { background: var(--hair); }
.pdrawer__link + .pdrawer__link { margin-top: 2px; }

.pdrawer__kicker {
  grid-area: kicker;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3);
}
.pdrawer__name {
  grid-area: name;
  font-size: 23px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.16;
  margin-top: 2px;
}
.pdrawer__line {
  grid-area: line;
  font-size: 13px; line-height: 1.38; color: var(--ink-2); margin-top: 4px;
}
.pdrawer__go {
  grid-area: go;
  font-size: 22px; color: var(--ink-3);
  transition: transform var(--dur-2) var(--ease), color var(--dur-1) var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .pdrawer__link:hover .pdrawer__go { transform: translateX(3px); color: var(--blue); }
}
.pdrawer__link.is-current { background: var(--hair-soft); }
.pdrawer__link.is-current .pdrawer__name { color: var(--blue); }

.pdrawer__also-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px; margin-inline: -12px; border-radius: 12px;
  font-size: 16px; color: var(--ink);
}
.pdrawer__also-link span { color: var(--ink-3); font-size: 19px; }
@media (hover: hover) and (pointer: fine) {
  .pdrawer__also-link:hover { text-decoration: none; background: var(--hair-soft); }
}

/* ================================================================== *
   SEARCH, drops from the bar.
   ================================================================== */
.search { position: fixed; inset: 0; z-index: 90; }
.search[hidden] { display: none !important; }

.search__scrim {
  position: absolute; inset: 0;
  background: var(--paper);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-soft);
}
.search.is-open .search__scrim { opacity: 1; }

.search__panel {
  position: absolute; inset: 0 0 auto 0;
  max-height: 100dvh; display: flex; flex-direction: column;
  background: var(--paper);
  transform: translateY(-100%);
  transition: transform var(--dur-3) var(--ease);
  padding-top: env(safe-area-inset-top, 0px);
  overscroll-behavior: contain;
}
.search.is-open .search__panel { transform: none; }

.search__bar {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  max-width: 760px; width: 100%; margin: 0 auto;
  padding: 0 var(--gutter); height: calc(var(--nav-h) + 14px);
}
.search__bar-icon { display: grid; place-items: center; color: var(--ink-3); flex: none; }
.search__bar-icon svg { width: 21px; height: 21px; display: block; }

.search__input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 21px; font-weight: 400; letter-spacing: -0.015em;
  border: 0; background: none; color: var(--ink);
  padding: 8px 0;
}
.search__input::placeholder { color: var(--ink-3); }
.search__input:focus { outline: none; }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search__cancel {
  flex: none; font: inherit; font-size: 15px;
  background: none; border: 0; cursor: pointer; color: var(--blue);
  padding: 8px 2px;
}
@media (hover: hover) and (pointer: fine) {
  .search__cancel:hover { text-decoration: underline; }
}

.search__body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  max-width: 760px; width: 100%; margin: 0 auto;
  padding: 4px var(--gutter) 34px;
}

.search__label {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}

.search__chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.search__chips li {
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  transition-delay: calc(60ms + var(--i, 0) * 22ms);
}
.search.is-open .search__chips li { opacity: 1; transform: none; }

.search__chip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px; margin-inline: -12px; border-radius: 12px;
  font-size: 17px; color: var(--ink);
}
.search__chip span { color: var(--ink-3); font-size: 20px; }
@media (hover: hover) and (pointer: fine) {
  .search__chip:hover { text-decoration: none; background: var(--hair-soft); }
}

.search__results { display: grid; gap: 2px; }
.search__hit {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px;
  padding: 11px 12px; margin-inline: -12px; border-radius: 12px;
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .search__hit:hover { text-decoration: none; background: var(--hair-soft); }
}
.search__hit.is-active { background: var(--hair-soft); }
.search__hit-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.search__hit-sub {
  grid-column: 1; font-size: 13px; color: var(--ink-2); line-height: 1.38;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search__hit-cat {
  grid-row: 1 / span 2; grid-column: 2;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.search__hit mark { background: color-mix(in srgb, var(--blue) 22%, transparent); color: inherit; border-radius: 3px; }
.search__empty { padding: 26px 0; color: var(--ink-2); font-size: 15px; }

/* A drawer is open: stop the page behind it scrolling. */
body.is-locked { overflow: hidden; }

/* ── THE SWITCH ─────────────────────────────────────────────────────────────
 *
 * Day and Midnight snapped, because nothing had a transition on it, the whole
 * page swapped between two palettes in a single frame, which reads as a flinch
 * rather than as a change.
 *
 * This cross-fades it, and it is deliberately NOT a permanent transition on
 * every element. A site that animates every background colour all the time
 * makes a hover feel syrupy and a scroll feel like it is dragging something.
 * theme.js puts `data-switching` on the root, this fires, and it comes off
 * again a beat later, so the rule only exists for the quarter second it is
 * wanted, and the rest of the time nothing is paying for it.
 *
 * Wrapped in no-preference, so the reduced-motion rule below is never fighting
 * it; somebody who asked for less motion just gets the instant swap.
 * ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  :root[data-switching] *,
  :root[data-switching] *::before,
  :root[data-switching] *::after {
    transition: background-color var(--dur-2) var(--ease-soft),
                border-color var(--dur-2) var(--ease-soft),
                color var(--dur-2) var(--ease-soft),
                fill var(--dur-2) var(--ease-soft),
                stroke var(--dur-2) var(--ease-soft),
                box-shadow var(--dur-2) var(--ease-soft) !important;
  }
}

/* Somebody who has asked their device for less motion should get less motion
   from everything, including whatever gets built next month. This used to be a
   hand-kept list of selectors, which is a promise that quietly stops being true
   the first time someone adds an animation and forgets to come back here.

   Not zero: one frame, so `transitionend` and `animationend` still fire and any
   JS waiting on them still runs. A flat `none` is how reduced motion turns into
   a panel that never opens. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }

.section { background: var(--bg); color: var(--fg); }
.section--pad-lg { padding-block: clamp(72px, 10vw, 128px); }
.section--pad-md { padding-block: clamp(56px, 8vw, 96px); }
.section--pad-sm { padding-block: clamp(10px, 2vw, 22px); }

.section__head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--left { margin-inline: 0; }
.section__head:last-child { margin-bottom: 0; }

/* ---------- Type ---------- */
.headline {
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.07; letter-spacing: -0.016em; font-weight: 600;
  text-wrap: balance;
}
.headline--xl {
  font-size: clamp(38px, 6.1vw, 74px);
  line-height: 1.05; letter-spacing: -0.021em;
}
.subhead {
  margin-top: clamp(14px, 2vw, 22px);
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.24; letter-spacing: 0.004em; font-weight: 400;
  color: var(--fg-2, var(--ink-2));
  text-wrap: pretty;
}
.lead {
  margin-top: 18px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.43; letter-spacing: 0.011em;
  color: var(--fg-2, var(--ink-2));
  text-wrap: pretty;
}
.kicker {
  margin: 0 0 12px;
  font-size: clamp(17px, 1.8vw, 21px); font-weight: 600;
  letter-spacing: 0.009em; color: var(--fg-2, var(--ink-2));
}
.eyebrow {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-2, var(--ink-2));
}
strong { font-weight: 600; }
em.plain { font-style: italic; }

/* ---------- Actions ---------- */
/* align-items matters once a pill shares the row with a chevron link: without
   it the links stretch to the pill's 44px and their text sits at the top. */
.actions { margin-top: clamp(20px, 3vw, 30px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.section__head--center .actions, .hero .actions { justify-content: center; }

.chevron-link {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: clamp(17px, 1.5vw, 21px); color: var(--blue);
}
.chevron-link span { font-size: 1.05em; transition: transform var(--dur-2) var(--ease); display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .chevron-link:hover { text-decoration: underline; }
  .chevron-link:hover span { transform: translateX(3px); }
}
.chevron-link--light { color: #2997ff; }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 23px;
  border-radius: var(--pill);
  font-size: 17px; line-height: 1.24; letter-spacing: -0.01em;
  transition: background var(--dur-1) var(--ease-soft), color var(--dur-1) var(--ease-soft), border-color var(--dur-1) var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .pill:hover { text-decoration: none; }
}
.pill--filled { background: var(--blue-bright); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .pill--filled:hover { background: var(--blue-hover); }
}
/* A statement in the shape of a button, where a button would be if the thing
   could be bought. It is not a link and it is not disabled, there is simply
   nothing to press yet, and saying so is better than an empty space. */
.pill--quiet {
  /* --line is redefined by every .theme-* section, so it is the right polarity
     for whatever ground this is painted on; --hair is the document default and
     only correct outside a themed section. A real property falls back properly,
     which is why this is written on border-color and not on a custom property. */
  border: 1px solid var(--line, var(--hair)); color: var(--fg-2, var(--ink-2));
  background: none; cursor: default;
}
.pill--ghost { border: 1px solid currentColor; color: var(--blue); }
@media (hover: hover) and (pointer: fine) {
  .pill--ghost:hover { background: var(--blue-bright); border-color: var(--blue-bright); color: #fff; }
}
.theme-dark .pill--ghost, .theme-ink .pill--ghost { color: #2997ff; }

/* ---------- Leaving for the product itself ----------

   A small arrow after the label, the standard mark for a link that goes off
   this site. It sits on the text baseline rather than beside it, so a button
   that opens the game does not read as taller than the one next to it. */
.pill--out .pill__out {
  display: inline-flex; margin-left: 7px; opacity: .8;
}
.pill--out .pill__out svg { width: 13px; height: 13px; display: block; }

/* The same button, for an app that exists and is not out yet. Not a link, so
   nothing here is pressable, and it says which it is rather than looking
   broken. */
.pill--waiting {
  background: none; border: 1px solid var(--line, var(--hair));
  color: var(--fg-2, var(--ink-2)); cursor: default;
  gap: 9px; padding-right: 9px;
}
.pill__soon {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--line, var(--hair)); color: var(--fg-2, var(--ink-3));
  white-space: nowrap;
}

/* One line under a row of buttons, saying where the button goes. */
.actions__note {
  margin: 12px 0 0;
  font-size: 14px; line-height: 1.45; color: var(--fg-2, var(--ink-3));
}
.section__head--center .actions__note, .hero .actions__note { text-align: center; }

/* ---------- Hero ---------- */
.hero {
  background: var(--bg); color: var(--fg);
  padding-block: clamp(64px, 9vw, 112px) clamp(48px, 7vw, 88px);
  text-align: center;
}
.hero .container { max-width: 1040px; }
.hero--sm { padding-block: clamp(52px, 7vw, 84px) clamp(40px, 5vw, 64px); }
.hero__visual { margin-top: clamp(40px, 6vw, 72px); }

.book-formats {
  display: block; margin-top: 10px;
  font-size: 13px; color: var(--fg-2, var(--ink-2));
  font-variant-numeric: tabular-nums;
}

/* ---------- The written pages ---------- */
.doc__head { max-width: 760px; margin-bottom: clamp(24px, 4vw, 40px); }
.doc__title {
  font-size: clamp(34px, 5.4vw, 52px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.07;
}
.doc__body { max-width: 720px; margin-inline: 0; }
.doc__body h2 {
  font-size: clamp(22px, 3vw, 27px); margin: 2em 0 .6em;
  letter-spacing: -0.018em;
}
.doc__body h3 { font-size: 19px; margin: 1.6em 0 .4em; }
.doc__body p, .doc__body li { font-size: 17px; line-height: 1.6; }
.doc__body p { margin: 0 0 1.05em; }
.doc__body ol, .doc__body ul { margin: 0 0 1.05em; padding-left: 1.3em; }
.doc__body li { margin-bottom: .5em; }
.doc__body strong { font-weight: 600; }
.doc__body a { text-decoration: underline; text-underline-offset: 2px; }
.doc__body hr { border: 0; border-top: 1px solid var(--hair); margin: 2.4em 0; }


/* The free list sits under the paid one, quieter, so the offer reads honestly
   at a glance: this is what you pay for, and this is what you already have. */
.plan__free {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.plan__free-head {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--det); margin-bottom: 8px;
}
.plan__free-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.plan__free-list li {
  font-size: 14px; line-height: 1.45; color: var(--fg-2);
  padding-left: 20px; position: relative;
}
.plan__free-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--det); font-weight: 700;
}



/* ---------- A book, with its formats ---------- */
.bookcard__formats {
  display: grid; gap: 6px; margin-top: 18px;
}
.bookcard__format {
  font: inherit; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 44px; padding: 9px 16px;
  border: 1px solid var(--hair); border-radius: 12px;
  background: none; color: var(--fg, var(--ink));
  transition: border-color var(--dur-1) var(--ease-soft),
              background var(--dur-1) var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .bookcard__format:hover {
    border-color: var(--blue-bright);
    background: color-mix(in srgb, var(--blue-bright) 8%, transparent);
  }
}
.bookcard__format:active { background: color-mix(in srgb, var(--blue-bright) 16%, transparent); }
.bookcard__format-label { font-weight: 500; }
.bookcard__format-price { font-variant-numeric: tabular-nums; color: var(--fg-2, var(--ink-2)); }
@media (hover: hover) and (pointer: fine) {
  .bookcard__format:hover .bookcard__format-price { color: var(--blue); }
}

/* ---------- Reveal ----------

   THE DEFAULT IS VISIBLE. This used to be the other way round: `.reveal` was
   `opacity: 0` unconditionally and site.js added `is-in` to bring each one
   back. That made every word on the site depend on one script running without
   throwing, and there was a `.no-js` escape hatch in this file that NOTHING
   EVER SET, so the escape hatch had never worked. One error in site.js on one
   browser and the page is blank. That is not a hypothetical; it is what a
   phone showed.

   So the hidden state is scoped to `:root.js`, a class site.js adds as its
   very first statement and removes again if it throws. Blocked, failed to
   parse, errored on line one, or running on something that does not like a
   feature it uses, the content is simply there, unanimated. The animation is
   now the enhancement it always claimed to be. */
.reveal { transition: opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease); }

:root.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition-delay: calc(var(--i, 0) * 60ms);
  will-change: opacity, transform;
}
:root.js .reveal.is-in,
:root.js .reveal.is-static { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  :root.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ---------- Feature rows ---------- */
.feature-rows { display: grid; gap: clamp(56px, 8vw, 104px); }
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.feature-row--flip .feature-row__text { order: 2; }
.feature-row__title { font-size: clamp(25px, 2.7vw, 36px); letter-spacing: -0.014em; }
.feature-row__body { margin-top: 16px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.47; color: var(--fg-2); }
.feature-row__text p + p { margin-top: 18px; }
@media (max-width: 820px) {
  .feature-row { grid-template-columns: 1fr; gap: 28px; }
  .feature-row--flip .feature-row__text { order: 0; }
}

/* ---------- Stat band ---------- */
.stat-band {
  margin: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4vw, 48px); text-align: center;
}
.stat { margin: 0; }
.stat__value {
  font-size: clamp(40px, 5.4vw, 68px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1; color: var(--fg);
}
.stat__label { margin: 12px 0 0; font-size: 15px; line-height: 1.4; color: var(--fg-2); }
.stat-band__note { margin: clamp(28px, 3vw, 40px) auto 0; max-width: 62ch; text-align: center; font-size: 15px; color: var(--fg-2); }
@media (max-width: 760px) { .stat-band { grid-template-columns: repeat(2, 1fr); } }
/* On a phone the two columns are about 150px each, and the band's words are
   words rather than numbers: "Checkable" set at the 40px floor is wider than
   its column and pushes the whole page sideways. The value scales with the
   viewport down there instead, and min-width:0 stops a long word forcing a
   grid track open. */
@media (max-width: 520px) {
  .stat-band { gap: 26px 18px; }
  .stat { min-width: 0; }
  .stat__value { font-size: clamp(24px, 7.4vw, 38px); }
}

/* ---------- Pull quote ---------- */
.pullquote { margin: 0; text-align: center; }
.pullquote p {
  font-size: clamp(26px, 3.6vw, 46px); font-weight: 600;
  line-height: 1.13; letter-spacing: -0.016em; color: var(--fg);
  text-wrap: balance;
}
.pullquote footer { margin-top: 24px; font-size: 15px; color: var(--fg-2); }

/* ---------- Cards ---------- */
.card-row { display: grid; gap: 14px; }
.card-row--2 { grid-template-columns: repeat(2, 1fr); }
.card-row--3 { grid-template-columns: repeat(3, 1fr); }
.card-row--4 { grid-template-columns: repeat(4, 1fr); }
.card {
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 18px;
}
.card__badge { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 12px; }
.card__title { font-size: 21px; letter-spacing: -0.01em; }
.card__text { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--fg-2); }
@media (max-width: 900px) { .card-row--3, .card-row--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-row--2, .card-row--3, .card-row--4 { grid-template-columns: 1fr; } }

/* ---------- Comparison ---------- */
.compare { border-top: 1px solid var(--line); }
.compare__head, .compare__row {
  display: grid; grid-template-columns: 0.8fr 1.1fr 1.1fr;
  gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.compare__head { padding: 18px 0; }
.compare__title { font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.compare__title--det { color: var(--det); }
.compare__title--prob { color: var(--prob); }
.compare__key { font-size: 15px; font-weight: 600; color: var(--fg); }
.compare__cell { font-size: 16px; line-height: 1.45; color: var(--fg-2); }
@media (max-width: 720px) {
  .compare__head { display: none; }
  .compare__row { grid-template-columns: 1fr; gap: 8px; }
  .compare__cell::before { display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 4px; }
  .compare__cell:nth-of-type(1)::before { content: "Deterministic"; color: var(--det); }
  .compare__cell:nth-of-type(2)::before { content: "Probabilistic"; color: var(--prob); }
}

/* ---------- Refusals ---------- */
.refusals { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 860px; margin-inline: auto; }
.refusal {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.refusal:first-child { border-top: 1px solid var(--line); }
.refusal__mark { position: relative; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.refusal__mark::before, .refusal__mark::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px;
  background: var(--fg-2); transform-origin: center;
}
.refusal__mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.refusal__mark::after { transform: translate(-50%, -50%) rotate(-45deg); }
.refusal__text { font-size: 17px; line-height: 1.5; color: var(--fg-2); }
.refusal__text strong { color: var(--fg); display: block; margin-bottom: 3px; font-size: 19px; letter-spacing: -0.01em; }

/* ---------- More from the ecosystem ---------- */
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.more-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 26px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--card-line);
  color: var(--fg); transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .more-card:hover { text-decoration: none; transform: translateY(-3px); border-color: rgba(0,0,0,.18); }
}
.more-card__kicker { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-2); }
.more-card__name { font-size: 22px; font-weight: 600; letter-spacing: -0.012em; }
.more-card__line { font-size: 15px; line-height: 1.45; color: var(--fg-2); }
@media (max-width: 900px) { .more-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .more-grid { grid-template-columns: 1fr; } }

/* ---------- Closer ---------- */
.closer { text-align: center; max-width: 760px; margin-inline: auto; }

/* ---------- Footer ---------- */
.footer { background: var(--paper-2); color: var(--ink-2); padding-block: 40px 28px; font-size: 12px; line-height: 1.5; }
.footer__note { max-width: 100%; padding-bottom: 20px; border-bottom: 1px solid var(--hair); color: var(--ink-3); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding: 26px 0; }
.footer__col-title { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__col a { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .footer__col a:hover { color: var(--ink); text-decoration: underline; }
}
/* The copyright line sits ABOVE the links, and the links are one row divided by
   upright slashes. The dividers are drawn with ::before rather than typed into
   the markup, so the first item never carries a leading slash and nothing has
   to be re-spaced when a link is added or removed. */
.footer__bar {
  display: block;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  color: var(--ink-3);
}
.footer__copy { margin: 0 0 8px; }

.footer__legal { display: flex; flex-wrap: wrap; align-items: center; }
.footer__legal { row-gap: 4px; }
.footer__legal a { color: var(--ink-3); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .footer__legal a:hover { color: var(--ink); }
}
/* ::after on every link but the last, NOT ::before on every link but the first.
   The generated box lives inside its own anchor either way, so a divider can
   never be separated from the link it belongs to, which on a phone is the
   difference between a second line reading "Sales and Refunds | Legal" and one
   reading "| Sales and Refunds | Legal" with an orphan slash in front. */
.footer__legal a:not(:last-child)::after {
  content: "|";
  margin: 0 10px;
  /* Visible, but never louder than the links it separates. */
  color: color-mix(in srgb, var(--ink-3) 55%, transparent);
  pointer-events: none;
  display: inline-block;
  text-decoration: none;
}
@media (max-width: 760px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }

/* =================================================================
   Visuals
   ================================================================= */

/* ---- The boundary ---- */
.boundary-vis {
  max-width: 860px; margin-inline: auto;
  display: grid; gap: clamp(18px, 3vw, 28px);
  text-align: left;
}
.boundary-vis__label {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 14px; text-align: center;
}
.boundary-vis__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.boundary-vis__list li {
  opacity: 0; transform: translateY(14px);
  animation: chipIn .8s var(--ease) forwards;
  animation-delay: calc(240ms + var(--i) * 110ms);
}
.boundary-vis__side--prob .boundary-vis__list li { animation-delay: calc(900ms + var(--i) * 140ms); }
@keyframes chipIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .boundary-vis__list li { opacity: 1; transform: none; animation: none; } }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 17px; border-radius: var(--pill);
  font-size: 15px; line-height: 1.2; letter-spacing: -0.01em;
  border: 1px solid var(--card-line); background: var(--card); color: var(--fg);
}
.chip--det { border-color: color-mix(in srgb, var(--det) 30%, transparent); }
.chip__val {
  width: 34px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--det), color-mix(in srgb, var(--det) 25%, transparent));
}
.chip--prob { border-color: color-mix(in srgb, var(--prob) 32%, transparent); font-weight: 500; }

.boundary-vis__line { display: flex; align-items: center; gap: 14px; padding-block: clamp(4px, 1vw, 10px); }
.boundary-vis__line-rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fg-2), transparent);
  opacity: .5;
}
.boundary-vis__line-label {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-2); white-space: nowrap;
}
@media (max-width: 620px) {
  .boundary-vis__line-label { font-size: 9px; letter-spacing: .06em; white-space: normal; text-align: center; }
  .chip { font-size: 13px; padding: 9px 14px; }
}

/* ---- Snapshot ---- */
.snapshot {
  margin: 0; max-width: 520px; margin-inline: auto;
  border-radius: 18px; overflow: hidden;
  background: var(--card); border: 1px solid var(--card-line);
  text-align: left;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
}
.theme-dark .snapshot, .theme-ink .snapshot { box-shadow: none; }
.snapshot__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--card-line); }
.snapshot__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.snapshot__bar p { margin-left: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.snapshot__rows { padding: 6px 0; }
.snap-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 13px 16px; font-size: 15px;
}
.snap-row + .snap-row { border-top: 1px solid var(--line); }
.snap-row__label { color: var(--fg); }
.snap-row__spark { font-family: var(--font-mono); color: var(--det); letter-spacing: -2px; }
.snap-row__state { font-size: 12px; padding: 3px 9px; border-radius: var(--pill); white-space: nowrap; }
.snap-row__state.is-current {
  background: color-mix(in srgb, var(--det) 12%, transparent); color: var(--det);
}
.snap-row__state.is-absent { border: 1px dashed var(--line); color: var(--fg-2); }
.snapshot__foot { padding: 14px 16px; border-top: 1px solid var(--card-line); font-size: 13px; color: var(--fg-2); }
@media (max-width: 520px) {
  .snap-row { grid-template-columns: 1fr auto; }
  .snap-row__spark { display: none; }
}

/* ---- Floor grid ---- */
.floor-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.floor-cell {
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px 22px; background: var(--card); border: 1px solid var(--card-line);
}
.floor-cell__mark {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--det); position: relative; flex: none;
}

.floor-cell__mark::after {
  content: ""; position: absolute; left: 5px; top: 8px;
  width: 7px; height: 3.5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); color: var(--det);
}
.floor-cell__label { font-size: 19px; font-weight: 600; letter-spacing: -0.012em; color: var(--fg); line-height: 1.2; }
.floor-cell__detail { font-size: 14px; line-height: 1.45; color: var(--fg-2); }
@media (max-width: 1000px) { .floor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .floor-grid { grid-template-columns: 1fr; } }

/* ---- Chain ---- */
.chain { margin: 0; display: grid; gap: 0; max-width: 460px; }
.chain__row { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; padding: 14px 0; position: relative; }
.chain__row:not(:last-child)::after {
  content: ""; position: absolute; left: 10px; top: 30px; bottom: -6px; width: 1px; background: var(--line);
}
.chain__dot { width: 11px; height: 11px; margin: 6px auto 0; border-radius: 50%; border: 2px solid var(--det); background: var(--bg); }
.chain__row--kept .chain__dot { background: var(--det); }
.chain__body { font-size: 16px; line-height: 1.45; color: var(--fg-2); }
.chain__body b { color: var(--fg); font-weight: 600; }

/* ---- Question forms ---- */
.forms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.form-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--card-line);
}
.form-card__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.form-card__q { font-size: 19px; font-weight: 500; letter-spacing: -0.012em; line-height: 1.3; color: var(--fg); }
.form-card__note { font-size: 14px; line-height: 1.45; color: var(--fg-2); }
@media (max-width: 900px) { .forms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .forms { grid-template-columns: 1fr; } }

/* ---- Before / after ---- */
.beforeafter { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; max-width: 900px; margin-inline: auto; }
.beforeafter__pane { padding: 30px; border-radius: 18px; border: 1px solid var(--card-line); background: var(--card); }
.beforeafter__pane--before { opacity: .62; }
.beforeafter__tag { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 12px; }
.beforeafter__mono { font-family: var(--font-mono); font-size: 15px; color: var(--fg-2); }
.beforeafter__q { font-size: 21px; font-weight: 600; letter-spacing: -0.014em; line-height: 1.25; color: var(--fg); }
.beforeafter__a { margin-top: 12px; font-size: 14px; color: var(--fg-2); }
.beforeafter__arrow { color: var(--fg-2); width: 40px; }
.beforeafter__arrow svg { display: block; width: 40px; height: 24px; }
@media (max-width: 760px) {
  .beforeafter { grid-template-columns: 1fr; gap: 14px; }
  .beforeafter__arrow { margin-inline: auto; transform: rotate(90deg); }
}

/* ---- Generator flow ---- */
.genflow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.genflow__step, .genflow__out {
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px 22px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--card-line);
}
.genflow__out { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(11,107,203,.09), rgba(176,106,28,.09)); border-color: var(--card-line); text-align: center; align-items: center; }
.genflow__n { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.genflow__t { font-size: 19px; font-weight: 600; letter-spacing: -0.012em; color: var(--fg); }
.genflow__d { font-size: 14px; line-height: 1.45; color: var(--fg-2); }
@media (max-width: 900px) { .genflow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .genflow { grid-template-columns: 1fr; } }

/* ---- Type chips ---- */
.typechips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.typechip {
  padding: 11px 20px; border-radius: var(--pill);
  border: 1px solid var(--card-line); background: var(--card);
  font-size: 16px; color: var(--fg);
}

/* ---- Sorter ---- */
.sorter { max-width: 760px; margin-inline: auto; }
.sorter__prompt { text-align: center; font-size: 15px; color: var(--fg-2); margin-bottom: 22px; }
.sorter__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sorter__item {
  display: grid; grid-template-columns: 1fr auto; gap: 12px 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.sorter__item:first-child { border-top: 1px solid var(--line); }
.sorter__q { font-size: 17px; line-height: 1.35; color: var(--fg); }
.sorter__choices { display: flex; gap: 8px; }
.sorter__btn {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 8px 15px; border-radius: var(--pill);
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  transition: background var(--dur-1) var(--ease-soft), border-color var(--dur-1) var(--ease-soft), color var(--dur-1) var(--ease-soft);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .sorter__btn:hover { border-color: var(--fg-2); }
}
.sorter__btn.is-right {
  background: color-mix(in srgb, var(--det) 14%, transparent);
  border-color: color-mix(in srgb, var(--det) 40%, transparent);
  color: var(--det);
}
.sorter__btn.is-wrong {
  background: color-mix(in srgb, var(--prob) 12%, transparent);
  border-color: color-mix(in srgb, var(--prob) 40%, transparent);
  color: var(--prob);
}
.sorter__verdict { grid-column: 1 / -1; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.sorter__verdict:empty { display: none; }
.sorter__foot { margin-top: 26px; text-align: center; font-size: 15px; color: var(--fg-2); }
@media (max-width: 620px) { .sorter__item { grid-template-columns: 1fr; } }

/* ---- Connector hub ---- */
.hub { max-width: 940px; margin-inline: auto; display: grid; gap: 16px; }
.hub__core, .hub__back {
  padding: 28px; border-radius: 18px; text-align: center;
  background: var(--card); border: 1px solid var(--card-line);
  display: grid; gap: 7px;
}
.hub__core-label, .hub__back-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 4px; }
.hub__core-line { font-size: 18px; font-weight: 500; letter-spacing: -0.012em; color: var(--fg); }
.hub__core-never { margin-top: 10px; font-size: 14px; color: var(--prob); }
.hub__back-line { font-size: 18px; font-weight: 500; color: var(--fg); }
.hub__ends { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hub__end { display: grid; gap: 7px; padding: 22px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); }
.hub__end-t { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.hub__end-d { font-size: 14px; line-height: 1.45; color: var(--fg-2); }
@media (max-width: 860px) { .hub__ends { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hub__ends { grid-template-columns: 1fr; } }

/* ---- Notes thread ---- */
.thread { margin: 0; max-width: 620px; margin-inline: auto; padding: 30px; border-radius: 20px; background: var(--card); border: 1px solid var(--card-line); text-align: left; }
.thread__q { font-size: clamp(21px, 2.3vw, 27px); font-weight: 600; letter-spacing: -0.014em; line-height: 1.22; color: var(--fg); margin-bottom: 22px; }
.thread__note { padding: 18px 0; border-top: 1px solid var(--line); }
.thread__what { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 8px; }
.thread__body { font-size: 17px; line-height: 1.4; color: var(--fg); }
.thread__cost { margin-top: 8px; font-size: 14px; color: var(--fg-2); }
.thread__foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-2); }

/* ---- Schools ---- */
.schools { max-width: 800px; margin-inline: auto; text-align: center; }
.schools__q { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 20px; }
.schools__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.schools__item {
  padding: 13px 22px; border-radius: var(--pill);
  border: 1px solid var(--card-line); background: var(--card);
  font-size: 17px; color: var(--fg);
}
.schools__foot { margin-top: 24px; font-size: 15px; color: var(--fg-2); }

/* ---- Book covers ---- */
.cover { perspective: 1600px; }
.cover__img {
  display: block; width: 100%; max-width: 330px; height: auto;
  margin-inline: auto; border-radius: 2px 7px 7px 2px;
  background: #f4f2ec;
  box-shadow:
    0 28px 64px rgba(0,0,0,.28),
    0 2px 8px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(0,0,0,.06);
  transform: rotateY(-8deg) rotateX(1.2deg);
  transition: transform var(--dur-4) var(--ease), box-shadow var(--dur-4) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .cover:hover .cover__img {
    transform: rotateY(-2deg);
    box-shadow: 0 34px 74px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.12);
  }
}
.cover--sm .cover__img { max-width: 190px; box-shadow: 0 14px 34px rgba(0,0,0,.22); }
@media (prefers-reduced-motion: reduce) { .cover__img { transform: none; } }

/* ---- One-way flow ---- */
.flow { max-width: 980px; margin-inline: auto; }
.flow__line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.flow__node {
  position: relative; padding: 22px 16px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--card-line);
  font-size: 15px; line-height: 1.35; text-align: center; color: var(--fg);
  display: flex; align-items: center; justify-content: center;
}
.flow__node:not(:last-child)::after {
  content: ""; position: absolute; right: -8px; top: 50%; width: 7px; height: 7px;
  border-top: 1.5px solid var(--fg-2); border-right: 1.5px solid var(--fg-2);
  transform: translateY(-50%) rotate(45deg); opacity: .6;
}
.flow__return { margin-top: 24px; text-align: center; font-size: 15px; color: var(--fg-2); }
@media (max-width: 900px) {
  .flow__line { grid-template-columns: 1fr; }
  .flow__node:not(:last-child)::after { right: 50%; top: auto; bottom: -9px; transform: translateX(50%) rotate(135deg); }
}

/* ---- Prose (used on the boundary page) ---- */
.prose { max-width: 700px; margin-inline: auto; }
/* Four paragraphs of argument want a little more room than a caption does,
   without becoming a wall the eye cannot find its way back into. */
.prose--wide { max-width: 760px; text-align: left; }
.prose p { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--fg-2); }
.prose p + p { margin-top: 22px; }
.prose p strong { color: var(--fg); }

/* ---------- Dark nav, for pages that open on a dark hero ----------
   The bar is opaque now and samples nothing, but a page whose first screen is
   black still wants a black bar sitting on it rather than a white one. */
body.nav-dark { background: #000; }
.nav-dark .globalnav {
  background: #000000;
  color: #f5f5f7;
}
.nav-dark .globalnav.is-scrolled { border-bottom-color: rgba(255, 255, 255, 0.16); }
.nav-dark .globalnav__logo,
.nav-dark .globalnav__tool { color: #f5f5f7; }
@media (hover: hover) and (pointer: fine) {
  .nav-dark .globalnav__tool:hover { background: rgba(255, 255, 255, 0.1); }
}
.nav-dark .globalnav__tool:active { background: rgba(255, 255, 255, 0.18); }

/* =================================================================
   Shop
   ================================================================= */

/* ---------- Plans ---------- */
.plan-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(30px, 3.4vw, 46px);
  background: var(--card); border: 1px solid var(--card-line); border-radius: 20px;
}
.plan--featured { border-color: rgba(0,113,227,.4); box-shadow: 0 0 0 1px rgba(0,113,227,.18); }
.plan__flag {
  position: absolute; top: -11px; left: clamp(30px, 3.4vw, 46px);
  background: var(--blue-bright); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--pill);
}
.plan__for { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-2); }
.plan__name { margin-top: 10px; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.014em; }
.plan__blurb { margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--fg-2); }
.plan__price { margin-top: 24px; font-size: clamp(34px, 4vw, 46px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.plan__per { font-size: 16px; font-weight: 400; color: var(--fg-2); letter-spacing: -0.01em; }
.plan__yearly { margin-top: 8px; font-size: 14px; color: var(--fg-2); }
.plan__features { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.plan__features li {
  position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: var(--fg-2);
}
.plan__features li::before {
  content: ""; position: absolute; left: 4px; top: 6px;
  width: 8px; height: 4px; border-left: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue);
  transform: rotate(-45deg);
}
.plan__action { margin-top: 28px; }
.plan__soon, .shop-card__soon {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; color: var(--fg-2);
}
@media (max-width: 820px) { .plan-row { grid-template-columns: 1fr; } }

/* ---------- Product grid ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.shop-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 20px;
}
.shop-card__art {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: var(--art-bg); color: var(--art-fg);
}
.shop-card__art--cover { aspect-ratio: 4 / 3; padding: 24px 0; background: var(--paper-2); }
.shop-card__cover {
  display: block; width: auto; height: 100%; max-height: 210px;
  border-radius: 1px 4px 4px 1px;
  box-shadow: 0 10px 26px rgba(0,0,0,.26), inset 0 0 0 1px rgba(0,0,0,.06);
}
.shop-card__glyph {
  width: 74px; height: 96px; border-radius: 3px 8px 8px 3px;
  background: currentColor; opacity: .92;
  box-shadow: inset 5px 0 0 rgba(0,0,0,.22);
  font-size: 0;
}
.shop-card--merch .shop-card__glyph,
.shop-card--plan .shop-card__glyph {
  width: 76px; height: 76px; border-radius: 18px; box-shadow: none;
}
.shop-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px; }
.shop-card__badge {
  align-self: flex-start; margin-bottom: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); border: 1px solid currentColor; border-radius: var(--pill); padding: 3px 9px;
}
.shop-card__for { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-2); }
.shop-card__name { margin-top: 8px; font-size: 21px; letter-spacing: -0.012em; }
.shop-card__blurb { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.shop-card__foot {
  margin-top: auto; padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.shop-card__price { font-size: 19px; font-weight: 600; letter-spacing: -0.012em; }
.shop-card__per { font-size: 14px; font-weight: 400; color: var(--fg-2); }
.shop-card__add { min-height: 40px; padding: 6px 18px; font-size: 15px; border: 0; font-family: inherit; cursor: pointer; }
.shop-note { margin-top: 28px; text-align: center; font-size: 14px; color: var(--fg-2); }
@media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .shop-grid { grid-template-columns: 1fr; } }

/* The bag button needs no rules of its own, it is a .globalnav__tool like the
   other two, and that is the whole point. The block that used to live here was
   left over from the previous bar: it set the button to 34px against their
   40px, the icon to 19px against their 21px, a different corner radius, and an
   `order: 2` that moved the bag after the three bars below 900px. Being later
   in the file, it won all four. That is why the bag looked wrong and sat in the
   wrong place on a phone. */

/* ---------- The bag ---------- */
.bag { position: fixed; inset: 0; z-index: 90; }
.bag__scrim {
  position: absolute; inset: 0;
  background: var(--paper);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-soft);
}
.bag.is-open .bag__scrim { opacity: 1; }
.bag__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--paper);
  color: var(--ink);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,.28);
  transform: translateX(100%); transition: transform var(--dur-3) var(--ease);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bag.is-open .bag__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bag__panel, .bag__scrim { transition: none; }
}
.bag__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 18px; border-bottom: 1px solid var(--hair-soft);
}
.bag__title { font-size: 22px; letter-spacing: -0.014em; }
.bag__close {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: var(--paper-2); color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
}
.bag__close svg { width: 16px; height: 16px; }
.bag__body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.bag__empty { padding: 48px 0; text-align: center; color: var(--ink-2); font-size: 15px; }
.bag__empty a { display: block; margin-top: 10px; }
.bag-line { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; padding: 18px 0; align-items: start; }
.bag-line + .bag-line { border-top: 1px solid var(--hair-soft); }
.bag-line__art { width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; line-height: 1; }
.bag-line__name { display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.bag-line__meta { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.bag-line__qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 10px; border: 1px solid var(--hair); border-radius: var(--pill); }
.bag-line__qty button {
  width: 28px; height: 26px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ink); line-height: 1;
}
.bag-line__qty button:disabled { opacity: .3; cursor: default; }
.bag-line__qty span { min-width: 20px; text-align: center; font-size: 14px; }
.bag-line__price { font-size: 15px; font-weight: 500; white-space: nowrap; }
.bag-line__remove {
  display: block; margin-top: 8px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--blue); cursor: pointer;
}
.bag__foot { padding: 20px 24px 26px; border-top: 1px solid var(--hair-soft); }
.bag__total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 600; letter-spacing: -0.012em; margin-bottom: 16px; }
.bag__checkout { width: 100%; border: 0; font-family: inherit; cursor: pointer; }
.bag__checkout:disabled { background: var(--paper-2); color: var(--ink-3); cursor: default; }
.bag__note { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2); text-align: center; }

/* A brief confirmation when something lands in the bag. */
.added-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px);
  z-index: 95; padding: 12px 22px; border-radius: var(--pill);
  background: rgba(29,29,31,.94); color: #fff; font-size: 15px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.added-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ---- Bag: the order fields ---- */
/* The fields are below the button, not above it, because they only ever
   appear after it has been pressed once and the server has said it needs one.
   Putting them above would reflow the button out from under the finger. */
.bag__fields { display: grid; gap: 12px; margin-top: 16px; }
.bag__fields-why {
  margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); text-align: center;
}
/* What happens next, said before it happens. A card form arriving unannounced
   is the moment people abandon a bag. */
.bag__reassure {
  margin: 12px 0 0; font-size: 12px; line-height: 1.5;
  color: var(--ink-3); text-align: center;
}
.bag__field { display: grid; gap: 5px; }
.bag__field > span { font-size: 12px; font-weight: 600; color: var(--ink); }
.bag__field > span em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.bag__field input {
  font: inherit; font-size: 16px; /* 16px stops iOS zooming the page on focus */
  padding: 11px 13px; border: 1px solid var(--hair); border-radius: 11px;
  background: var(--paper); color: var(--ink); width: 100%;
}
.bag__field input:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 1px; border-color: transparent; }
.bag__error { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--warn); text-align: center; }
.bag__done { padding: 48px 0; text-align: center; }
.bag__done-title { font-size: 21px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
.bag__done-ref {
  margin-top: 12px; font-family: var(--font-mono); font-size: 20px;
  letter-spacing: .06em; color: var(--blue);
}
.bag__done-note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* =================================================================
   Sign-up
   ================================================================= */
.signup { max-width: 640px; margin-inline: auto; text-align: left; }
.signup__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.signup__field { display: grid; gap: 6px; }
.signup__field > span { font-size: 13px; font-weight: 600; color: var(--fg); }
.signup__field > span em { font-style: normal; font-weight: 400; color: var(--fg-2); }
.signup__field input {
  font: inherit; font-size: 16px; /* 16px keeps iOS from zooming on focus */
  padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--card-line); background: var(--card); color: var(--fg);
  width: 100%;
}
.signup__field input::placeholder { color: var(--fg-2); opacity: .7; }
.signup__field input:focus-visible {
  outline: 2px solid var(--blue-bright); outline-offset: 1px; border-color: transparent;
}
@media (max-width: 560px) { .signup__fields { grid-template-columns: 1fr; } }

/* ---------- A local amount beside the price ----------

   Smaller, quieter, and on its own line so it never competes with the figure
   that is actually charged. The dollar price does not change size, colour or
   position when this appears. */
.price { display: inline-block; }
.price__local {
  display: block;
  font-size: 12px; font-weight: 400; letter-spacing: 0;
  color: var(--fg-2, var(--ink-2));
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.plan__price .price__local, .shop-card__price .price__local { margin-top: 3px; }

/* ---------- The currency control ----------

   A tick box and a picker, in the footer, under a rule. It is a preference
   rather than a part of the page, so it sits where preferences sit and never
   above the thing it is a preference about. */
.fx {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--hair);
  /* The section tokens the combobox is written against are set by .theme-light
     and its siblings, and the footer is not one of those. Without this the
     dropdown inside it has no ground of its own and comes out transparent over
     whatever it covers. Set here, in the footer's own colours, so one control
     reads correctly in a place the section palette does not reach. */
  --card: var(--paper);
  --card-line: var(--hair);
  --fg: var(--ink);
  --fg-2: var(--ink-3);
}
.fx__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 16px;
}
.fx__check {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.fx__box {
  width: 17px; height: 17px; margin: 0;
  accent-color: var(--blue-bright); cursor: pointer; flex: none;
}
/* Wide enough for the longest currency name and no wider. The picker is a
   detail in a footer, not a form field, so it does not take the full line. */
.fx__picker { flex: 1 1 130px; min-width: 0; max-width: 280px; }
.fx__picker .combo__input { font-size: 14px; padding: 8px 34px 8px 11px; border-radius: 9px; }
.fx__picker .combo__clear { width: 24px; height: 24px; right: 5px; }
/* The footer is the bottom of the page, so a list that drops downwards drops
   off the screen. This one goes up. */
.fx__picker .combo__list { top: auto; bottom: calc(100% + 6px); max-height: 230px; }
.fx__picker .combo__option { font-size: 14px; padding: 9px 11px; }
.fx__note {
  margin: 10px 0 0;
  font-size: 12px; line-height: 1.5; color: var(--ink-3);
  max-width: 62ch;
}

/* ---------- The searchable country field ----------

   The input is deliberately identical to the two beside it: somebody filling
   in a form should not have to notice that one of the three boxes is a
   different kind of control. What marks it out is the list, and the list is
   only there while you are using it. */
.combo { position: relative; }
.combo__input {
  font: inherit; font-size: 16px;
  padding: 13px 40px 13px 15px; border-radius: 12px;
  border: 1px solid var(--card-line); background: var(--card); color: var(--fg);
  width: 100%;
}
.combo__input::placeholder { color: var(--fg-2); opacity: .7; }
.combo__input:focus-visible {
  outline: 2px solid var(--blue-bright); outline-offset: 1px; border-color: transparent;
}

.combo__clear {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--fg-2); cursor: pointer;
  display: grid; place-items: center;
}
.combo__clear svg { width: 15px; height: 15px; }

.combo__list {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 5px; list-style: none;
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); color: var(--fg);
  border: 1px solid var(--card-line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}
.combo__option {
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  font-size: 15px; line-height: 1.3;
}
/* is-active is the keyboard cursor, and it has to be visible without a mouse
   anywhere near it, so it is a real background rather than a hover tint. */
.combo__option.is-active { background: var(--blue-bright); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .combo__option:hover { background: var(--hair-soft); }
  .combo__option.is-active:hover { background: var(--blue-bright); }
  .combo__clear:hover { background: var(--hair-soft); color: var(--fg); }
}
.combo__option[aria-selected="true"]::after {
  content: "\2713"; float: right; font-weight: 700; opacity: .8;
}
.combo__none { padding: 12px; font-size: 15px; color: var(--fg-2); }



.signup__interests { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
.signup__interests legend { padding: 0; font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 12px; }
.signup__choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 560px) { .signup__choices { grid-template-columns: 1fr; } }

.signup__choice {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border-radius: 13px; cursor: pointer;
  border: 1px solid var(--card-line); background: var(--card);
  transition: border-color var(--dur-1) var(--ease-soft), background var(--dur-1) var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .signup__choice:hover { border-color: var(--fg-2); }
}
.signup__choice input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.signup__choice-box {
  flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 6px;
  border: 1.5px solid var(--fg-2); position: relative;
  transition: background var(--dur-1) var(--ease-soft), border-color var(--dur-1) var(--ease-soft);
}
.signup__choice-box::after {
  content: ""; position: absolute; left: 5px; top: 4px;
  width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.6); opacity: 0;
  transition: opacity var(--dur-1) var(--ease-soft), transform var(--dur-1) var(--ease);
}
.signup__choice input:checked ~ .signup__choice-box {
  background: var(--blue-bright); border-color: var(--blue-bright);
}
.signup__choice input:checked ~ .signup__choice-box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.signup__choice input:focus-visible ~ .signup__choice-box { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.signup__choice-text { display: grid; gap: 2px; }
.signup__choice-label { font-size: 15px; font-weight: 500; color: var(--fg); letter-spacing: -0.01em; }
.signup__choice-note { font-size: 13px; color: var(--fg-2); }

.signup__action { margin-top: 24px; text-align: center; }
.signup__submit { border: 0; font-family: inherit; cursor: pointer; min-width: 190px; }
.signup__submit:disabled { background: var(--card); color: var(--fg-2); border: 1px solid var(--card-line); cursor: default; }
.signup__small { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.signup__message {
  margin-top: 18px; padding: 15px 18px; border-radius: 13px; text-align: center;
  font-size: 15px; line-height: 1.5;
}
.signup__message.is-ok {
  background: color-mix(in srgb, var(--det) 12%, transparent); color: var(--det);
}
.signup__message.is-error {
  background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn);
}

/* =================================================================
   Blog, posts and podcast, rendered by the Worker, styled here so
   they are the same design system as every built page.
   ================================================================= */

.blog-empty { text-align: center; padding: 60px 0; color: var(--fg-2); font-size: 17px; }

/* ---- Post list ---- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 950px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 18px;
}
.post-card__art { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.post-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { display: flex; gap: 7px; font-size: 13px; color: var(--fg-2); margin-bottom: 10px; }
.post-card__title { font-size: 21px; letter-spacing: -0.012em; line-height: 1.25; }
.post-card__title a { color: var(--fg); }
@media (hover: hover) and (pointer: fine) {
  .post-card__title a:hover { color: var(--blue); text-decoration: none; }
}
.post-card__sub { margin-top: 7px; font-size: 15px; color: var(--fg-2); }
.post-card__excerpt { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.post-card__tags { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.post-card__tags span {
  font-size: 12px; padding: 3px 10px; border-radius: 980px;
  background: var(--line); color: var(--fg-2);
}

.pager {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  margin-top: 46px; font-size: 16px;
}
.pager a { color: var(--blue); }
.pager > :last-child { text-align: right; }
.pager__page { color: var(--fg-2); font-size: 14px; }

/* ---- A single post ---- */
.post__head { text-align: center; }
.post__meta {
  display: flex; gap: 8px; justify-content: center;
  font-size: 14px; color: var(--fg-2); margin-bottom: 18px;
}
.post__title { max-width: 18ch; margin-inline: auto; }
.post__sub { max-width: 44ch; margin-inline: auto; }
.post__author { margin-top: 20px; font-size: 15px; color: var(--fg-2); }

.post__cover {
  max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter);
}
.post__cover img { width: 100%; height: auto; border-radius: 18px; display: block; }

.post__body {
  max-width: 680px; margin-inline: auto; padding-inline: var(--gutter);
  font-size: 19px; line-height: 1.62; letter-spacing: -0.003em; color: var(--ink);
}
.post__body > * + * { margin-top: 1.2em; }
.post__body h2 { font-size: clamp(25px, 3vw, 32px); letter-spacing: -0.016em; margin-top: 1.8em; }
.post__body h3 { font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.012em; margin-top: 1.6em; }
.post__body ul, .post__body ol { padding-left: 1.3em; }
.post__body li + li { margin-top: .5em; }
.post__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.post__body img { max-width: 100%; height: auto; border-radius: 14px; }
.post__body blockquote {
  margin-inline: 0; padding-left: 22px; border-left: 3px solid var(--hair);
  color: var(--ink-2); font-style: normal;
}
.post__body blockquote p { margin: 0; }
.post__body blockquote p + p { margin-top: .8em; }
.post__body code {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--paper-2); padding: 2px 6px; border-radius: 5px;
}
.post__body pre {
  background: #1d1d1f; color: #f5f5f7; padding: 18px 20px;
  border-radius: 12px; overflow-x: auto; font-size: 14px; line-height: 1.5;
}
.post__body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.post__body hr { border: 0; border-top: 1px solid var(--hair); margin-block: 2.2em; }

.post__tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; }
.post__tags span {
  font-size: 13px; padding: 5px 13px; border-radius: 980px;
  background: var(--card); border: 1px solid var(--card-line); color: var(--fg-2);
}
.post__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.post__nav-link {
  display: grid; gap: 4px; padding: 20px;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 16px;
  color: var(--fg);
}
@media (hover: hover) and (pointer: fine) {
  .post__nav-link:hover { text-decoration: none; border-color: var(--fg-2); }
}
.post__nav-link span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.post__nav-link strong { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.post__nav-link--next { text-align: right; }
@media (max-width: 620px) {
  .post__nav { grid-template-columns: 1fr; }
  .post__nav-link--next { text-align: left; }
}

/* ---- Podcast ---- */
.episode-list { display: grid; gap: 16px; max-width: 780px; margin-inline: auto; }
.episode {
  padding: 28px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--card-line);
}
.episode__meta { display: flex; flex-wrap: wrap; gap: 7px; font-size: 13px; color: var(--fg-2); margin-bottom: 10px; }
.episode__title { font-size: clamp(21px, 2.4vw, 26px); letter-spacing: -0.014em; line-height: 1.24; }
.episode__desc { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--fg-2); }
.episode__audio { width: 100%; margin-top: 18px; }
.episode__links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.episode__links a {
  font-size: 14px; padding: 7px 15px; border-radius: 980px;
  border: 1px solid var(--card-line); color: var(--fg);
}
@media (hover: hover) and (pointer: fine) {
  .episode__links a:hover { text-decoration: none; border-color: var(--blue); color: var(--blue); }
}

/* ---- Buy row, on a product page ---- */
.buy-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 900px; margin-inline: auto; }
.buy-card {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 36px); border-radius: 20px;
  background: var(--card); border: 1px solid var(--card-line);
}
.buy-card__for { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-2); }
.buy-card__name { margin-top: 8px; font-size: 24px; letter-spacing: -0.014em; }
.buy-card__blurb { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.buy-card__features { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.buy-card__features li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.buy-card__features li::before {
  content: ""; position: absolute; left: 3px; top: 6px;
  width: 7px; height: 4px; border-left: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue);
  transform: rotate(-45deg);
}
.buy-card__price { margin-top: 22px; font-size: 28px; font-weight: 600; letter-spacing: -0.018em; }
.buy-card__per { font-size: 15px; font-weight: 400; color: var(--fg-2); }
.buy-card__action { margin-top: 18px; }
.buy-card__add { border: 0; font-family: inherit; cursor: pointer; width: 100%; }
.buy-card__soon { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--fg-2); }

/* ================================================================== *
   SHOWCASE, the home page unit.

   One product, one line, two links. The whole point is that the second link
   is a peer of the first rather than something you find at the bottom of a
   paragraph: on this site you either want to read about a thing or you want
   to buy it, and both should be one tap from the name.
   ================================================================== */
.section--pad-none { padding-block: 0; }

.showcase-row {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 10px var(--gutter);
  display: grid;
  gap: 10px;
}
.showcase-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.showcase {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  border-radius: 22px;
  background: var(--bg); color: var(--fg);
  padding: clamp(40px, 5vw, 60px) clamp(20px, 4vw, 44px);
  overflow: hidden;
  isolation: isolate;
  /* A hairline in the card's OWN ink, so it reads as a card on a white ground
     and on a black one without two rules that can drift apart. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 9%, transparent);
}
.showcase--full { min-height: clamp(320px, 34vw, 400px); }
.showcase--half { min-height: clamp(300px, 30vw, 360px); }

.showcase__inner { position: relative; z-index: 1; max-width: 42ch; }

.showcase__kicker {
  font-size: 13px; font-weight: 600; letter-spacing: .055em; text-transform: uppercase;
  color: var(--fg-2, var(--ink-2));
}
.showcase__title {
  margin-top: 10px;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.06; letter-spacing: -0.02em; font-weight: 600;
  text-wrap: balance;
}
.showcase--half .showcase__title { font-size: clamp(30px, 3.4vw, 42px); }

.showcase__sub {
  margin-top: 12px;
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.38; letter-spacing: -0.01em;
  color: var(--fg-2, var(--ink-2));
  text-wrap: pretty;
}

/* The pair. Two links, equal weight, never stacked on a phone unless they
   genuinely cannot fit, a buy link that falls below the fold is a buy link
   that does not exist. */
.showcase__actions {
  margin-top: clamp(20px, 3vw, 30px);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px clamp(22px, 3vw, 34px);
}
.showcase__actions .chevron-link { font-size: clamp(16px, 1.5vw, 19px); }

.showcase__visual {
  position: absolute; inset: auto 0 0 0; z-index: 0;
  pointer-events: none; opacity: .9;
}

@media (max-width: 800px) {
  .showcase-row--2 { grid-template-columns: 1fr; }
  .showcase--full, .showcase--half { min-height: 340px; }
}

/* ---------- Home page ----------------------------------------------------
   The welcome page is the trilogy plus the conversation around it. Everything
   below is used by nothing else, and every colour comes from the theme tokens
   so Day and Midnight both follow without a second rule. */

/* The definition. It is the only bold statement on the page, so it gets the
   room the brief asks for rather than being set as another paragraph. */
.hero__definition {
  margin: clamp(26px, 3.6vw, 40px) auto 0;
  max-width: 24ch;
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1.26; letter-spacing: -0.008em;
  color: var(--fg, var(--ink));
  text-wrap: pretty;
}
.hero__definition strong { font-weight: 600; }
@media (min-width: 700px) { .hero__definition { max-width: 30ch; } }
.hero .hero__definition + .subhead { margin-top: clamp(20px, 2.6vw, 30px); }

/* The three books. The cover leads each card, so on a phone the artwork is the
   first thing in the section and needs no tap to reach. */
.book-cards { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .book-cards { grid-template-columns: 1fr; gap: 16px; } }

.book-card {
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 18px;
}
@media (max-width: 860px) {
  .book-card { flex-direction: row; align-items: flex-start; gap: 20px; }
  .book-card__cover { flex: 0 0 122px; }
  .book-card .cover--sm .cover__img { max-width: 122px; }
}
@media (max-width: 420px) {
  .book-card { flex-direction: column; gap: 18px; }
  .book-card__cover { flex: none; align-self: flex-start; }
  .book-card .cover--sm .cover__img { max-width: 132px; margin-inline: 0; }
}
.book-card__cover { display: block; text-decoration: none; }
.book-card__body { min-width: 0; }
.book-card__order {
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-2);
}
.book-card__title { margin-top: 8px; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.book-card__q {
  margin-top: 12px; font-style: italic;
  font-size: 17px; line-height: 1.35; color: var(--fg);
}
.book-card__line { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.book-card__links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; }

.books-note {
  margin: clamp(26px, 3vw, 36px) auto 0; max-width: 46ch;
  text-align: center; font-size: 15px; line-height: 1.6; color: var(--fg-2);
}

/* The note from Joel. A personal aside, so it is set apart from the section
   copy by a rule and a signature rather than by a card. */
.note-personal { margin: 0 auto; max-width: 60ch; text-align: center; }
.note-personal p {
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45;
  letter-spacing: -0.015em; color: var(--fg);
}
.note-personal blockquote { margin: 0; }
.note-personal p + p { margin-top: 20px; }
/* The signature under the note that introduces the ecosystem. Quieter than the
   note and set apart by a short rule, so it reads as somebody putting their
   name to what they wrote rather than as another line of it. */
.note-personal__sig {
  margin-top: 26px; padding-top: 22px;
  font-size: 15px; color: var(--fg-2);
  border-top: 1px solid var(--line, var(--hair));
  display: inline-block;
}
.note-personal + .card-row { margin-top: clamp(34px, 4.4vw, 54px); }

/* Product cards, in the tools section and the game section. */
.prod-card { display: flex; flex-direction: column; }
.prod-card__price { margin-top: 14px; font-size: 17px; font-weight: 600; color: var(--fg); }
.prod-card__link { margin-top: auto; padding-top: 18px; }

/* The boundary visual, above the two tools it describes. */
.tools-vis { margin-bottom: clamp(34px, 4.4vw, 54px); }

.author-note { margin: 0 auto; max-width: 62ch; text-align: center; }
.author-note p { font-size: 17px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.author-note p + p { margin-top: 20px; }

/* A section whose whole body is one action row: the row is a sibling of the
   centred head rather than inside it, so it does not inherit the centring and
   sat hard left under a centred headline. */
.section__head--center + .actions { justify-content: center; }


/* ══════════════════════════════════════════════════════════════════════════
   THE HOME PAGE'S OWN PIECES

   Four shapes that exist only here, because the home page is an argument and
   the rest of the site is a catalogue. Each one is a step in that argument.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- The two facts ----------

   Numbered, because there are exactly two and the whole page rests on both.
   The numeral is decoration: the heading already reads "One." and "Two." to a
   screen reader through a visually hidden span, so the big grey digit is
   aria-hidden and never read out twice. */
.facts {
  display: grid; gap: 16px;
  max-width: 940px; margin-inline: auto;
  text-align: left;
}
@media (min-width: 760px) { .facts { grid-template-columns: 1fr 1fr; gap: 20px; } }

.fact {
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-lg, 20px);
  padding: clamp(24px, 3vw, 34px);
}
.fact__n {
  margin: 0 0 14px;
  font-size: 34px; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-2); opacity: .45;
  font-variant-numeric: tabular-nums;
}
.fact__title {
  margin: 0 0 12px;
  font-size: clamp(21px, 2.1vw, 26px); font-weight: 600; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--fg);
}
.fact__text {
  margin: 0; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; color: var(--fg-2);
}

/* The question the two facts leave behind. Wider measure than a card, tighter
   than the page, so it reads as the paragraph they were both leading to. */
.facts__close {
  max-width: 760px; margin: clamp(26px, 3vw, 38px) auto 0;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--fg);
}

/* ---------- Three ways to play ----------

   The price goes above the name on these three, because "Free" is the answer
   to the first question anybody has about a row of three ways to do the same
   thing. */
.prod-card--price-top .prod-card__price { margin: 0 0 6px; }
.ways__title {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-size: clamp(19px, 1.8vw, 23px); font-weight: 600;
  letter-spacing: -0.02em; color: var(--fg);
}

/* A fourth card that is not a fourth way to play. Set apart: narrower, no
   card ground of its own, a rule above it instead. Belonaire Go is optional
   and the box is complete without it, and the layout has to say so before the
   words do. */
.aside-card {
  max-width: 700px; margin: clamp(26px, 3vw, 38px) auto 0;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line, var(--hair));
  text-align: left;
}
.aside-card__head {
  margin: 0 0 8px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg);
}
.aside-card__text {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2);
}
.aside-card__link { margin: 12px 0 0; }

/* One line under a row of cards. */
.cards-note {
  max-width: 700px; margin: clamp(22px, 2.5vw, 30px) auto 0;
  font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; color: var(--fg-2);
}

/* ---------- Four ways in ----------

   A statement and a way to act on it, per row. On a phone they stack, because
   two columns at 375px would break both halves across three lines each. */
.ways-in {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 900px; text-align: left;
}
.ways-in__row {
  display: grid; gap: 6px;
  padding: clamp(18px, 2vw, 24px) 0;
  border-top: 1px solid var(--line, var(--hair));
}
.ways-in__row:last-child { border-bottom: 1px solid var(--line, var(--hair)); }
.ways-in__who {
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 600;
  letter-spacing: -0.015em; color: var(--fg);
}
/* Inline, not inline-flex. A chevron-link is a flex row by default, which is
   right for a short label and wrong here: when a long one wraps, the arrow
   stays a flex item beside the whole block and strands itself out on the
   right. Inline puts it back after the last word, where it belongs. */
.ways-in__go { font-size: clamp(16px, 1.4vw, 18px); display: inline; }
@media (min-width: 760px) {
  .ways-in__row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline; gap: 12px 32px;
  }
  .ways-in__go { justify-self: end; text-align: right; }
}

/* ---------- The creed ----------

   One sentence on its own ground, on the two app pages and the home page. It
   is not a heading and not a pull quote: it is the rule the product follows,
   said plainly, at the size of something meant to be read rather than
   admired. */
.creed {
  max-width: 760px; margin: 0 auto;
  font-size: clamp(18px, 1.8vw, 23px); line-height: 1.45;
  letter-spacing: -0.015em; color: var(--fg); text-align: center;
}
.creed--quiet {
  font-size: clamp(16px, 1.4vw, 19px); color: var(--fg-2);
}
.creed a { color: var(--blue); }
@media (hover: hover) and (pointer: fine) { .creed a:hover { text-decoration: underline; } }

/* The kind of question a book is about, above its description. Small, bold and
   in the accent, because it is a label for the three-way split rather than a
   sentence of the argument. */
.book-kind {
  margin: 14px 0 0;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--blue);
}
.theme-dark .book-kind, .theme-ink .book-kind { color: #2997ff; }

/* ══════════════════════════════════════════════════════════════════════════
   THE METHOD'S OWN SHAPES

   The six statuses, the three rules and the Floor's conditions. All three are
   numbered lists of commitments, so they share one skeleton: a numeral in the
   margin, the thing itself, and what follows from it.
   ══════════════════════════════════════════════════════════════════════════ */

/* A block inside a section that is its own thought. Set apart by a rule
   rather than by a card, so it reads as the argument continuing rather than
   as a different kind of content. */
.subblock {
  max-width: 760px; margin: clamp(38px, 4.5vw, 60px) auto 0;
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line, var(--hair));
}
.subblock__title {
  margin: 0 0 18px;
  font-size: clamp(23px, 2.4vw, 31px); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--fg); text-align: center;
}

/* ---------- The six statuses ---------- */
.statuses, .rules, .floor-list {
  list-style: none; margin: clamp(30px, 3.5vw, 44px) auto 0; padding: 0;
  max-width: 820px; text-align: left;
}
.status, .rule, .floor-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px;
  padding: clamp(18px, 2vw, 24px) 0;
  border-top: 1px solid var(--line, var(--hair));
}
.status:last-child, .rule:last-child, .floor-item:last-child {
  border-bottom: 1px solid var(--line, var(--hair));
}
.status__n, .rule__n, .floor-item__n {
  margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5;
  color: var(--fg-2); opacity: .55; font-variant-numeric: tabular-nums;
}
.status__name {
  margin: 0 0 5px;
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 600;
  letter-spacing: -0.015em; color: var(--fg);
}
.status__line, .rule__text, .floor-item__what {
  margin: 0; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; color: var(--fg-2);
}

/* The example only appears on How it works, where a status nobody can picture
   is a status nobody believes. */
.status__eg {
  margin: 12px 0 0; padding: 12px 14px;
  border-radius: 12px; background: var(--hair-soft);
  font-size: 14px; line-height: 1.55; color: var(--fg-2);
}
.status__eg-label {
  display: block; margin-bottom: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg-2); opacity: .8;
}

/* ---------- The three rules ---------- */
.rule__text { display: block; color: var(--fg); }
.rule__text strong { font-weight: 600; }

/* ---------- The Floor's conditions ---------- */
.floor-item__body { display: block; }
.floor-item__what { display: block; font-weight: 500; color: var(--fg); }
.floor-item__against {
  display: block; margin-top: 5px;
  font-size: 14px; line-height: 1.5; color: var(--fg-2);
}

/* ---------- The two movements ----------

   Two cards, because there are exactly two ways a question changes status and
   the symmetry is the point: one moves questions up, the other moves them
   down, and between them they do all the work. */
.two-moves {
  display: grid; gap: 16px;
  max-width: 900px; margin-inline: auto; text-align: left;
}
@media (min-width: 760px) { .two-moves { grid-template-columns: 1fr 1fr; gap: 20px; } }
.move {
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-lg, 20px);
  background: var(--card); border: 1px solid var(--card-line);
}
.move__title {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.8vw, 22px); font-weight: 600;
  letter-spacing: -0.015em; color: var(--fg);
}
.move__text { margin: 0; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; color: var(--fg-2); }