/*
 * Nocturne Aube Sauge — the landing charter.
 *
 * Every palette value here reads the platform tokens (src/styles/tokens.css,
 * loaded on this page through global.css): the charter's colours ARE the
 * platform's colours, stated once. This sheet keeps only the landing's own
 * structure — its class vocabulary, spacing rhythm and literal radii.
 *
 * It lives in public/ and loads *unlayered*, so it wins over the app's
 * layered Tailwind rules — which is why the universal reset below is scoped
 * away from `.demo`, the island's wrapper: an unlayered `* { padding: 0 }`
 * would strip every Tailwind padding inside the board.
 */
:root {

  --bg: var(--app-paper-soft);
  --bg-2: var(--app-paper-alt);
  --panel: var(--app-panel);
  --panel-2: var(--app-panel-alt);
  --ink: var(--app-ink);
  --ink-2: var(--app-ink-muted);
  --ink-3: var(--app-ink-faint);
  --line: var(--app-hairline);
  --line-2: var(--app-hairline-soft);
  --cta: var(--app-accent);
  --cta-ink: var(--app-accent-ink);
  --cta-hover-shadow: var(--app-shadow-lift);
  --hi: var(--app-accent);
  --hi-soft: var(--app-accent-soft);
  --mark: var(--app-mark);
  /* The serif accents ran a muted gold (#96742f) and read as a third voice;
     they now share the forest green so every display accent is one ink. */
  --serif-accent: var(--app-accent);
  --rose: var(--app-rose);
  --rose-soft: var(--app-rose-soft);
  --board-l: var(--app-board-light);
  --board-d: var(--app-board-dark);
  --nav-bg: var(--app-nav-veil);
  --card-shadow: var(--app-shadow-card);
  --board-shadow: var(--app-shadow-board);
  --glow-a: transparent;
  --glow-b: transparent;
  --chart-fill-o: .22;
  --dot: var(--app-accent);
  --display: var(--app-font-sans);
  --serif: var(--app-font-serif);
  --mono: var(--app-font-mono);
}
/* Scoped away from the island (`.demo`): see the note at the top. `:where()`
   keeps the reset at zero specificity — bare `:not(.demo *)` carries a class's
   worth and silently beat every element rule below (`section` lost its
   padding to it). */
:where(*:not(.demo, .demo *)) { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--display); font-variation-settings: 'opsz' 14; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) { .wrap { padding: 0 40px; } }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.mark { background: linear-gradient(120deg, transparent 2%, var(--mark) 4%, var(--mark) 96%, transparent 98%); padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 12px; border: 0; background: var(--cta); color: var(--cta-ink); font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--cta-hover-shadow); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.btn.lg { min-height: 56px; padding: 0 28px; font-size: 16px; border-radius: 14px; }

/* CTA group: username + button */
.cta-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.cta-group input { flex: 1 1 260px; min-height: 56px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-family: var(--mono); font-size: 14px; outline: none; transition: border-color .2s; }
.cta-group input::placeholder { color: var(--ink-3); }
@media (max-width: 720px) { .cta-group input { font-size: 12px; } }
.cta-group input:focus { border-color: var(--hi); }

/* Nav */
header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: var(--nav-bg); border-bottom: 1px solid var(--line-2); }
header .row { display: flex; align-items: center; justify-content: space-between; min-height: 66px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 24px; letter-spacing: -0.03em; font-variation-settings: 'opsz' 96; }
.brand img { height: 26px; }
nav a:not(.btn) { font-size: 14px; color: var(--ink-2); margin-right: 26px; }
nav a:not(.btn):hover { color: var(--ink); }
nav .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 840px) { nav a:not(.btn) { display: none; } }

/* Hero */
.hero { position: relative; padding: 40px 0 48px; }
@media (min-width: 980px) { .hero { padding: 64px 0 64px; } }
.hero::before { content: ''; position: absolute; inset: -160px 0 auto; height: 820px; pointer-events: none; z-index: -1;
  background:
    radial-gradient(600px 420px at 78% 40%, var(--glow-a), transparent 60%),
    radial-gradient(420px 320px at 70% 55%, var(--glow-b), transparent 60%);
  animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .8 } to { opacity: 1 } }
/* `.hgrid`, not `.hero .grid`: the island's own board renders a Tailwind
   `.grid` inside this section, and a descendant selector on the bare class
   would pour this gap between the ranks. */
.hgrid { display: grid; gap: 52px; }
@media (min-width: 980px) { .hgrid { grid-template-columns: 1.12fr 1fr; align-items: center; gap: 64px; } }
.hero h1 { margin-top: 24px; font-size: clamp(42px, 6.6vw, 84px); font-weight: 700; line-height: .98; letter-spacing: -0.045em; font-variation-settings: 'opsz' 96; text-wrap: balance; }
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--hi); font-size: 1.06em; }
.hero .sub { margin-top: 24px; font-size: clamp(17px, 1.5vw, 19px); color: var(--ink-2); max-width: 33em; }
.hero .sub strong { color: var(--ink); font-weight: 600; }
.hero .cta-group { margin-top: 30px; max-width: 560px; }

/* Hero board */
.stage { position: relative; }
.board { position: relative; width: 100%; max-width: 470px; margin: 0 auto; aspect-ratio: 1; border-radius: 10px; overflow: hidden; box-shadow: var(--board-shadow); }
.sq-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); width: 100%; aspect-ratio: 1; }
.sq { position: relative; min-width: 0; min-height: 0; }
.sq.l { background: var(--board-l); } .sq.d { background: var(--board-d); }
.sq img { position: absolute; inset: 0; width: 100%; height: 100%; }
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.play-chip { position: relative; z-index: 2; margin: -24px auto 0; width: fit-content; display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 12px 18px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--card-shadow); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.play-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--hi); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.5); opacity: .55 } }

/* The real board, mounted as an island. The wrapper sizes it like the static
   `.board` it replaced; everything inside is the app's own component.
   420px because that is the Board's own `full` cap — a wider wrapper left the
   board left-aligned with dead space beside it, and the carousel bar above it
   running wider than the board it pages.
   `isolation` keeps the island's internal z-indexes (arrows at z-20, drag
   ghost at z-50) inside their own stacking context, so they can never paint
   over the sticky header (z-index 20). */
.demo { max-width: 420px; margin: 0 auto; isolation: isolate; }
.demo [data-fen] { max-width: 420px; border-radius: 10px; box-shadow: var(--board-shadow); border: 0; }

.reveal { opacity: 0; transform: translateY(18px); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: .05s } .d2 { animation-delay: .15s } .d3 { animation-delay: .28s } .d4 { animation-delay: .4s } .d5 { animation-delay: .55s }
@keyframes rise { to { opacity: 1; transform: none } }
/* The board's stage fades in without the 18px rise: an ancestor with a
   transform animation — even fill-forwards ending at `none` — becomes the
   containing block for `position: fixed`, and the drag ghost (fixed at the
   pointer's coordinates) rendered hundreds of pixels off the cursor. */
.stage.reveal { transform: none; animation-name: rise-fade; }
@keyframes rise-fade { to { opacity: 1 } }

/* 48/64: enough that distinct sections read apart, without the page going airy.
   Most sections zero their own top padding, so this bottom value alone is the
   gap a reader sees between two of them. */
section { padding: 48px 0; }
@media (min-width: 980px) { section { padding: 64px 0; } }
.sec-head { max-width: 42em; margin-bottom: 28px; }
.sec-head .mono { margin-bottom: 14px; display: block; }
.sec-head h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; font-variation-settings: 'opsz' 96; text-wrap: balance; }
.sec-head h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--serif-accent); font-size: 1.06em; }
.sec-head p { margin-top: 14px; color: var(--ink-2); font-size: 17px; }

/* What Tempo is, in three points — each one shown rather than argued.
   This replaced a two-column "analyseur vs coach" comparison: a reader who has
   not used the product does not need it ranked against another one, they need
   to see what they are being offered. */
.prod-grid { display: grid; gap: 20px; }
@media (min-width: 860px) { .prod-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.prod-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--panel); box-shadow: var(--card-shadow); }
/* The screenshot is a real capture of the product, zoomed into its most telling
   corner rather than scaled down whole. Fitting a 1600px-wide report page into
   a 357px card divides every glyph by four and produces a grey rectangle that
   proves nothing — so the image is drawn wider than its frame and the frame
   clips it, which shows less of the page at a size a reader can actually read.
   `--shot-zoom` is per card, because how far in to go depends on how dense the
   capture is: a table of small type needs less than a page of body text. */
.prod-shot { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line-2); background: var(--panel-2); }
.prod-shot img { width: var(--shot-zoom, 100%); max-width: none; }
.prod-body { padding: 22px 24px 26px; }
.prod-card .n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--hi-soft); color: var(--hi); font-family: var(--mono); font-size: 13px; }
.prod-card h3 { margin-top: 14px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; }
.prod-card p { margin-top: 10px; color: var(--ink-2); font-size: 15px; }

/* The report, chapter by chapter.
 *
 * The table of contents and the excerpt used to be two sections: a list of the
 * four chapters, then a fixed set of extracts underneath. A reader had to hold
 * the first in their head to know what the second was an extract *of*. Now the
 * contents list is the control — pick a chapter, read that chapter.
 *
 * Radio inputs and sibling selectors, so it pages with no JavaScript: the
 * landing page's budget is the three boards and nothing else, and a tab strip
 * is not worth breaking that for. Radio groups also give arrow-key navigation
 * for free, which a div-and-click implementation would have to rebuild.
 */
.rp-tabs > input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rp-tablist { display: grid; gap: 12px; }
@media (min-width: 860px) { .rp-tablist { grid-template-columns: repeat(4, 1fr); } }
.rp-tab { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); cursor: pointer; transition: border-color .15s, background .15s; }
/* The "these are clickable" nudge, on the second tab only. Hidden by default
   and revealed while the first chapter is the one showing — that is exactly
   "the reader has not picked a chapter yet", and it costs no JavaScript to
   know. Absolutely positioned so appearing and disappearing never changes the
   tab's height and shunts the row. */
.rp-tab-nudge { display: none; align-items: center; gap: 5px; width: fit-content; margin-top: 8px; grid-column: 2; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--hi-soft); color: var(--hi); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; opacity: .78; animation: nudge 2.4s ease-in-out infinite; }
.rp-tab-nudge svg { width: 12px; height: 12px; }
/* In the flow on a phone, where the tabs are stacked full width and growing one
   by a line costs nothing. Lifted out of the flow once they sit side by side,
   because there the badge appearing and disappearing would change the height of
   one card in a row of four and shunt the other three. */
@media (min-width: 860px) {
  .rp-tab-nudge { position: absolute; right: 12px; bottom: 10px; margin-top: 0; }
}
#rc-1:checked ~ .rp-tablist .rp-tab:nth-child(2) .rp-tab-nudge { display: inline-flex; }
@keyframes nudge { 0%, 100% { opacity: .55; transform: translateY(0) } 50% { opacity: .95; transform: translateY(-2px) } }
@media (prefers-reduced-motion: reduce) { .rp-tab-nudge { animation: none; opacity: .8 } }
.rp-tab:hover { border-color: var(--hi); }
.rp-tab .n { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: .9; color: var(--serif-accent); }
.rp-tab h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.rp-tab p { margin-top: 4px; color: var(--ink-2); font-size: 14px; }
/* The checked tab and its panel. Written out per index rather than generated:
   the input is a sibling of both the list and the panels, so each pairing needs
   its own selector, and four of them is shorter than any machinery. */
#rc-1:checked ~ .rp-tablist .rp-tab:nth-child(1),
#rc-2:checked ~ .rp-tablist .rp-tab:nth-child(2),
#rc-3:checked ~ .rp-tablist .rp-tab:nth-child(3),
#rc-4:checked ~ .rp-tablist .rp-tab:nth-child(4) {
  border-color: var(--hi);
  background: linear-gradient(160deg, var(--hi-soft), transparent 70%), var(--panel);
}
/* Focus lands on the input, which is off-screen, so the label wears the ring —
   without this the tab strip is invisible to a keyboard. */
#rc-1:focus-visible ~ .rp-tablist .rp-tab:nth-child(1),
#rc-2:focus-visible ~ .rp-tablist .rp-tab:nth-child(2),
#rc-3:focus-visible ~ .rp-tablist .rp-tab:nth-child(3),
#rc-4:focus-visible ~ .rp-tablist .rp-tab:nth-child(4) {
  outline: 2px solid var(--hi);
  outline-offset: 2px;
}
/* Tight on a phone: the panel holds the report's board, and every pixel of
   padding here comes straight off the squares. 26px a side left it 191px wide
   at 375 — a board you cannot aim a piece at. */
.rp-panel { display: none; margin-top: 18px; border: 1px solid var(--line); border-radius: 20px; padding: 16px 12px; background: var(--panel); box-shadow: var(--card-shadow); }
@media (min-width: 640px) { .rp-panel { padding: 26px; } }
#rc-1:checked ~ .rp-panel[data-chapter='1'],
#rc-2:checked ~ .rp-panel[data-chapter='2'],
#rc-3:checked ~ .rp-panel[data-chapter='3'],
#rc-4:checked ~ .rp-panel[data-chapter='4'] { display: block; }
.rp-ch { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--serif-accent); }
/* Chapter 1's figures. */
.rp-stats { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 640px) { .rp-stats { grid-template-columns: repeat(3, 1fr); } }
.rp-stat { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; background: var(--bg-2); }
.rp-stat .k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rp-stat .v { display: block; margin-top: 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rp-stat .v i { font-style: normal; font-size: 14px; font-weight: 600; margin-left: 6px; color: var(--hi); }
/* The second error of chapter 3, without a board — two diagnoses is what makes
   the point that the chapter is a list, and two boards is what makes the panel
   twice as tall as every other one. */
.rp-err2 { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-2); }

/* Chapter 2: the repertoire table, and one row's games under it.
   The report opens those games in a modal, which needs a script; the same
   radio trick puts them under the table instead. The table itself scrolls
   inside its own box rather than widening the page — seven columns do not fit
   a phone, and the page must never scroll sideways. */
.rp-sub { margin-top: 18px; font-family: var(--serif); font-size: 16px; font-weight: 700; }
.rp-scroll { overflow-x: auto; }
.op-tabs > input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.op-tabs .rp-table { min-width: 640px; }
/* `min-height` rather than more padding: the row is the tap target and it has
   to clear 44px, but the cell's own padding already sets the table's rhythm. */
.op-pick { display: flex; align-items: baseline; gap: 8px; min-height: 44px; padding-top: 2px; cursor: pointer; }
.op-caret { color: var(--ink-3); font-size: 10px; transition: rotate .15s, color .15s; }
.op-pick b { display: block; font-weight: 500; }
.op-pick small { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-3); }
.op-row td.muted { color: var(--ink-2); }
.op-row td.strong { font-weight: 600; }
.op-row td.faint, .op-row td .faint { font-size: 12px; color: var(--ink-3); }
.op-row td.warn { font-size: 12px; color: var(--rose); }
.op-badge { display: inline-block; border-radius: 999px; padding: 2px 8px; font-family: var(--mono); font-size: 11px; }
.op-badge.up { background: var(--hi-soft); color: var(--hi); }
.op-badge.down { background: var(--rose-soft); color: var(--rose); }
#or-1:checked ~ .rp-scroll .op-row[data-row='1'],
#or-2:checked ~ .rp-scroll .op-row[data-row='2'],
#or-3:checked ~ .rp-scroll .op-row[data-row='3'] { background: var(--hi-soft); }
#or-1:checked ~ .rp-scroll .op-row[data-row='1'] .op-caret,
#or-2:checked ~ .rp-scroll .op-row[data-row='2'] .op-caret,
#or-3:checked ~ .rp-scroll .op-row[data-row='3'] .op-caret { rotate: 90deg; color: var(--hi); }
#or-1:focus-visible ~ .rp-scroll .op-row[data-row='1'] .op-pick,
#or-2:focus-visible ~ .rp-scroll .op-row[data-row='2'] .op-pick,
#or-3:focus-visible ~ .rp-scroll .op-row[data-row='3'] .op-pick { outline: 2px solid var(--hi); outline-offset: 3px; }
.op-panel { display: none; margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--bg-2); }
#or-1:checked ~ .op-panel[data-opening='1'],
#or-2:checked ~ .op-panel[data-opening='2'],
#or-3:checked ~ .op-panel[data-opening='3'] { display: block; }
.op-panel-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.op-panel-count { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
/* The games of one opening, one at a time.
   Written by *index* rather than by opening: each slider is its own radio
   group inside its own `.op-boards`, so `input:nth-of-type(n)` means "the nth
   input of this slider" and three rules cover all three openings. The chapter
   tabs above are spelled out one id at a time because their inputs and panels
   are siblings of the whole section; these are not. */
.op-boards { margin-top: 14px; }
.op-boards > input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.op-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.op-dot { display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; transition: border-color .15s, background .15s; }
.op-dot:hover { border-color: var(--hi); }
.op-dot .k { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.op-dot .v { font-size: 13px; }
.op-boards > input:nth-of-type(1):checked ~ .op-dots > .op-dot:nth-child(1),
.op-boards > input:nth-of-type(2):checked ~ .op-dots > .op-dot:nth-child(2),
.op-boards > input:nth-of-type(3):checked ~ .op-dots > .op-dot:nth-child(3) {
  border-color: var(--hi);
  background: var(--hi-soft);
}
.op-boards > input:nth-of-type(1):checked ~ .op-dots > .op-dot:nth-child(1) .k,
.op-boards > input:nth-of-type(2):checked ~ .op-dots > .op-dot:nth-child(2) .k,
.op-boards > input:nth-of-type(3):checked ~ .op-dots > .op-dot:nth-child(3) .k { color: var(--hi); }
.op-boards > input:nth-of-type(1):focus-visible ~ .op-dots > .op-dot:nth-child(1),
.op-boards > input:nth-of-type(2):focus-visible ~ .op-dots > .op-dot:nth-child(2),
.op-boards > input:nth-of-type(3):focus-visible ~ .op-dots > .op-dot:nth-child(3) { outline: 2px solid var(--hi); outline-offset: 2px; }
.op-slide { display: none; }
.op-boards > input:nth-of-type(1):checked ~ .op-slides > .op-slide:nth-child(1),
.op-boards > input:nth-of-type(2):checked ~ .op-slides > .op-slide:nth-child(2),
.op-boards > input:nth-of-type(3):checked ~ .op-slides > .op-slide:nth-child(3) { display: block; }

/* Chapter 3: the share of games the error touches, and its occurrences. */
.err-share { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.err-share .k { display: block; font-size: 14px; font-weight: 600; }
.err-share .s { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); max-width: 34em; }
.err-share .pct { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.err-share .pct small { display: block; text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); }
.occ > input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.occ-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.occ-dot { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); cursor: pointer; transition: border-color .15s, background .15s; }
.occ-dot:hover { border-color: var(--hi); }
.occ-n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.occ-vs { font-size: 13px; }
#eo-1:checked ~ .occ-bar [data-occ='1'],
#eo-2:checked ~ .occ-bar [data-occ='2'],
#eo-3:checked ~ .occ-bar [data-occ='3'] { border-color: var(--hi); background: var(--hi-soft); }
#eo-1:checked ~ .occ-bar [data-occ='1'] .occ-n,
#eo-2:checked ~ .occ-bar [data-occ='2'] .occ-n,
#eo-3:checked ~ .occ-bar [data-occ='3'] .occ-n { color: var(--hi); }
#eo-1:focus-visible ~ .occ-bar [data-occ='1'],
#eo-2:focus-visible ~ .occ-bar [data-occ='2'],
#eo-3:focus-visible ~ .occ-bar [data-occ='3'] { outline: 2px solid var(--hi); outline-offset: 2px; }
.occ-panel { display: none; margin-top: 16px; }
#eo-1:checked ~ .occ-panel[data-occ='1'],
#eo-2:checked ~ .occ-panel[data-occ='2'],
#eo-3:checked ~ .occ-panel[data-occ='3'] { display: block; }
.occ-count { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.occ-title { margin-top: 6px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }

/* Chapter 7's objectives, in the report's own layout: an accent rail down the
   left so the eye lands on the objective before anything around it, a serif
   numeral for the position in the list, then the two figures with the distance
   between them, then the action. Rebuilt here in the landing's vocabulary
   rather than imported — `ReportView` is Tailwind inside an island, and the
   objectives are static text that has no business shipping as JavaScript. */
.goals { display: grid; gap: 12px; margin-top: 18px; list-style: none; }
.goal { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.goal-rail { position: absolute; inset-block: 0; left: 0; width: 3px; background: var(--hi); }
.goal-body { padding: 14px 16px 15px 19px; }
/* Title on the left, figures on the right, on one line where there is room.
   The track used to be a full-width rule with the two numbers pushed to
   opposite edges of the card, which drew a metre-long arrow between two small
   figures and made the distance look like the subject. It is not: the two
   numbers are, and they read better beside each other. */
.goal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.goal-who { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 15em; }
.goal-n { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; background: var(--hi-soft); color: var(--hi); font-family: var(--serif); font-style: italic; font-size: 16px; }
.goal-head h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.goal-from { margin-top: 2px; font-size: 11px; color: var(--ink-3); }
.goal-track { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.goal-end .k { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.goal-end .v { display: block; margin-top: 2px; font-family: var(--mono); font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.goal-end.target { text-align: right; }
.goal-end.target .k, .goal-end.target .v { color: var(--hi); }
/* A fixed, short span — 46px is enough to read as "from here to there" and
   short enough that the two figures stay one glance apart. */
.goal-rule { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 46px; flex-shrink: 0; }
.goal-gap { white-space: nowrap; font-family: var(--mono); font-size: 9px; color: var(--ink-2); }
.goal-line { display: flex; align-items: center; width: 100%; }
.goal-line span { flex: 1; height: 1px; background: linear-gradient(to right, var(--line), var(--hi)); }
.goal-line svg { width: 7px; height: 7px; flex-shrink: 0; fill: var(--hi); }
.goal-action { margin-top: 12px; border-radius: 9px; background: var(--hi-soft); padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.goal-action .mono { display: inline; margin-right: 7px; color: var(--hi); font-size: 9px; letter-spacing: .1em; }
.rp-tags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tag-rose { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); padding: 5px 12px; border-radius: 999px; background: var(--rose-soft); }
.tag-rose::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.rp-freq { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rp-panel > h3, .rp-panel .rp-diag h3 { margin-top: 14px; font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.rp-body { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
.reflex { margin-top: 20px; padding: 16px 18px; border-radius: 12px; background: var(--hi-soft); border: 1px solid var(--hi); }
.reflex p { margin-top: 6px; font-size: 15px; }
/* The report's board brings its own layout — board, evaluation bar, legend,
   navigator, buttons — and it is built to fill the column it is given. It is
   deliberately NOT width-capped here: the previous cap squeezed the board into
   340px and the arrows lost their heads to the clipping. Give it the panel. */
.op-demo, .occ-demo { margin-top: 16px; }
.rp-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.rp-table th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rp-table td { padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.rp-table td + td, .rp-table th + th { text-align: right; font-variant-numeric: tabular-nums; }
.rp-table tr.bad td { color: var(--ink); font-weight: 600; }
.rp-table td.hot { color: var(--rose); font-weight: 700; }
.rp-note { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.goalrow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.goalrow:last-of-type { border-bottom: 0; }
.goalrow b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.goalrow small { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.gnum { font-family: var(--mono); font-size: 15px; white-space: nowrap; }
.gnum i { font-style: normal; color: var(--hi); }

/* Problem */
.problem { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--bg-2); }
.problem .inner { display: grid; gap: 40px; }
@media (min-width: 980px) { .problem .inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; } }
.problem .q { font-family: var(--serif); font-style: italic; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -0.02em; }
.problem .q strong { color: var(--rose); font-weight: 400; }
.problem p { margin-top: 20px; color: var(--ink-2); font-size: 17px; }
.chart { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: var(--panel); }
.chart svg { width: 100%; height: auto; display: block; margin-top: 10px; }
.chart .cap { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.chart .cap .after { color: var(--hi); }

/* Steps */
.steps { display: grid; gap: 14px; counter-reset: s; list-style: none; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: var(--panel); transition: border-color .2s, transform .2s; }
.step:hover { border-color: var(--hi); transform: translateY(-3px); }
.step::before { counter-increment: s; content: '0' counter(s); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--hi); }
.step h3 { margin-top: 40px; font-size: 21px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.step p { margin-top: 10px; color: var(--ink-2); font-size: 15px; }

/* Exercises — one large card, tinted in the accent, so the section reads apart
   from the report TOC directly above it instead of blending in.
   The board column sets the card's height on a wide screen, so its track width
   is the dial that matters there; the giant numeral is the one that matters on
   a phone, where the two columns stack. */
.ex-card { border: 1px solid var(--hi); border-radius: 26px; padding: 24px 20px; background: linear-gradient(160deg, var(--hi-soft), transparent 65%), var(--panel); box-shadow: var(--card-shadow); }
@media (min-width: 980px) { .ex-card { padding: 36px 48px; } }
.ex { display: grid; gap: 28px; }
@media (min-width: 980px) { .ex { grid-template-columns: 1fr 340px; gap: 48px; align-items: center; } }
.ex .n { font-size: clamp(72px, 11vw, 132px); font-weight: 800; letter-spacing: -0.07em; line-height: .8; font-variation-settings: 'opsz' 96; color: var(--hi); }
.ex h2 { margin-top: 8px; font-size: clamp(25px, 3.2vw, 38px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; max-width: 14em; }
.ex p { margin-top: 14px; color: var(--ink-2); font-size: 17px; max-width: 32em; }

/* Compare */
.cmp { display: grid; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
@media (min-width: 760px) { .cmp { grid-template-columns: 1fr 1fr; } }
.col { padding: 26px; }
.col.a { background: var(--bg-2); }
.col.b { background: linear-gradient(180deg, var(--hi-soft), transparent 80%), var(--panel); border-top: 1px solid var(--line); }
@media (min-width: 760px) { .col.b { border-top: 0; border-left: 1px solid var(--line); } }
.col h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.col.b h3 { color: var(--hi); }
.col ul { list-style: none; margin-top: 16px; }
.col li { padding: 13px 0; border-top: 1px solid var(--line-2); display: flex; gap: 12px; font-size: 16px; }
.col.a li { color: var(--ink-3); }
.col.a li::before { content: '×'; color: var(--rose); font-weight: 700; }
.col.b li { font-weight: 600; letter-spacing: -0.01em; }
.col.b li::before { content: '✓'; color: var(--hi); font-weight: 700; }

/* Quotes */
.quotes { display: grid; gap: 14px; }
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: var(--panel); }
.quote p { font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 1.2; }
.quote cite { display: block; margin-top: 16px; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* Pricing */
.price { display: grid; gap: 40px; }
@media (min-width: 980px) { .price { grid-template-columns: 1fr 420px; gap: 80px; align-items: center; } }
.price h2 .serif { color: var(--serif-accent); }
.pcard { border-radius: 22px; padding: 32px; background: var(--panel-2); border: 1px solid var(--hi); box-shadow: var(--card-shadow); }
.pcard .amount { font-size: 72px; font-weight: 800; letter-spacing: -0.06em; line-height: 1; font-variation-settings: 'opsz' 96; }
.pcard .amount small { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-left: 10px; }
/* The cents drop the display cut: at 72px the amount runs opsz 96 and
   -0.06em tracking, and a 32px ",99" inheriting both sets its glyphs
   crashing into each other. Normal tracking, optical size left to the
   browser, and a hair of space either side. */
.pcard .amount .cents { font-size: .45em; letter-spacing: 0; margin: 0 .1em 0 .04em; font-variation-settings: normal; font-optical-sizing: auto; }
.pcard ul { list-style: none; margin-top: 22px; }
.pcard li { padding: 10px 0; border-top: 1px solid var(--line-2); color: var(--ink-2); font-size: 15px; }
.pcard li::before { content: '→'; margin-right: 10px; color: var(--hi); }
.pcard .btn { margin-top: 24px; width: 100%; }

/* FAQ */
.faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--hi); font-size: 26px; line-height: 1; font-weight: 300; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin-top: 12px; color: var(--ink-2); max-width: 50em; }

/* Closing */
.closing { text-align: center; position: relative; overflow: hidden; }
.closing::before { content: ''; position: absolute; inset: 0; background: radial-gradient(700px 300px at 50% 120%, var(--glow-b), transparent 70%); pointer-events: none; }
.closing h2 { position: relative; font-size: clamp(34px, 5.6vw, 74px); font-weight: 700; letter-spacing: -0.045em; line-height: .98; max-width: 15em; margin: 0 auto; text-wrap: balance; }
.closing h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--hi); }
.closing .cta-group { position: relative; max-width: 560px; margin: 36px auto 0; justify-content: center; }

footer { border-top: 1px solid var(--line-2); padding: 30px 0 44px; }
footer .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hero::before { display: none; } .closing::before { display: none; }