/* ─────────────────────────────────────────────────────────────────────────
   Lola: landing page
   Tokens → base → layout → components → responsive → motion
   Values from the v2 handoff (parchment / editorial), unchanged where the
   design was final; departures are commented at the point they happen.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --ground:   #efede7;
  --surface:  #fcfbf7;
  --raised:   #ffffff;
  --sunken:   #f5f2eb;
  --ink:      #201a2f;
  --body:     #443e4f;
  --body-2:   #575061;
  --muted:    #777080;
  --hair:     #ded9e5;
  --paper:    #e5d5c3;
  --brand:    #7563cf;
  --brand-deep: #5746ad;
  --brand-soft: #e8e2f8;
  --brand-pale: #f4f1fb;
  --blue:     var(--brand);
  --orange:   #ff3e00;
  --amber:    #d48f00;
  --green:    #17b865;
  --wa-out:   #D9FDD3;
  --wa-bg:    #EFEAE2;
  --wa-hd:    #F6F5F3;
  --sev-red:  #ff2b3a;
  --sev-amb:  #ffbb26;
  --pdf-red:  #E5453B;

  --display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --col: 1200px;
  --shell: min(1440px, calc(100% - 32px));
  --pad: clamp(20px, 5vw, 88px);
  --radius-shell: clamp(22px, 2.5vw, 36px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
main { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }
a { color: var(--blue); text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; color: var(--ink); margin: 0; }
h1, h2 { text-wrap: balance; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; left: 20px; top: 12px; z-index: 30; padding: 9px 14px;
  border-radius: 10px; background: var(--ink); color: #fff; transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.wrap { max-width: var(--col); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.sub  { color: var(--body); text-wrap: pretty; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 32px; border: 0;
  font-size: 14px; font-weight: 600; letter-spacing: -0.009em; line-height: 1.2;
  white-space: nowrap; transition: transform .15s ease, opacity .15s ease;
}
.btn:hover  { opacity: .88; }
.btn:active { transform: translateY(1px); }
.btn--ink   { background: var(--ink); color: var(--surface); }
.btn--soft  { background: var(--sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.btn--paper { background: var(--surface); color: var(--ink); }
/* The one action on the page, in one colour everywhere it appears. White text
   was the call; it measures ~2.2:1 on this green, so the weight stays heavy. */
.btn--wa    { background: var(--green); color: #fff; font-weight: 700; }
.btn--wa:hover { opacity: 1; filter: brightness(1.06); }
.btn--lg    { padding: 12px 22px; font-size: 15px; }

/* ── Nav ─────────────────────────────────────────────────────────────── */
/* Pinned, as a floating capsule: the brand, the language and the one action
   ride along in a rounded container inset from the edges, with the page
   scrolling underneath. The sticky strip itself is transparent. */
.nav { position: sticky; top: 0; z-index: 20; padding: 16px; pointer-events: none; }
.nav__in {
  max-width: 1408px; margin: 0 auto; padding: 0 10px; pointer-events: auto;
  height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: 999px; background: rgba(252,251,247,.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(87,70,173,.10), 0 16px 40px -24px rgba(50,39,83,.35);
}
.nav__brand {
  display: inline-flex; align-items: center; flex: none; padding: 5px 9px;
  border-radius: 999px; background: var(--brand-soft); color: var(--ink);
}
.nav__wordmark { display: block; width: 64px; height: auto; }
.wordmark { font-family: var(--display); font-size: 25px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; transform: translateY(-1px); }
.nav__right { display: flex; align-items: center; gap: 16px; }

.langtoggle { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--brand-pale); }
.langtoggle button {
  border: 0; background: transparent; color: var(--body);
  font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
}
.langtoggle button.is-on { background: var(--ink); color: #fff; }

/* ── Hero ────────────────────────────────────────────────────────────── */
/* The first large content shell establishes the page system immediately:
   rounded, inset from the canvas, and built from the brand's palest tint. */
.hero {
  position: relative; width: var(--shell); margin: 0 auto; overflow: hidden;
  border-radius: var(--radius-shell); background: var(--brand-soft);
  /* The top padding sits under a sticky nav that already costs 80px of flow.
     Fixed at 116 it put the first word 196px down a 812px phone -- a quarter of
     the screen before anything is said. It scales now, and only reaches 116 on
     the wide layouts it was drawn for. */
  padding: clamp(64px, 10vw, 112px) var(--pad) clamp(56px, 7vw, 88px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
}
.hero::before {
  content: ""; position: absolute; width: min(58vw, 760px); aspect-ratio: 1;
  left: 50%; top: 55%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.72) 0, rgba(255,255,255,0) 68%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
}
.hero h1 {
  font-size: clamp(40px, 6.2vw, 74px); line-height: 1.07; letter-spacing: -0.034em;
  max-width: 1120px; margin-top: -4px; padding-bottom: .08em;   /* room for descenders under the tight leading */
}
/* One sentence per line, by design. Each is its own block so it balances on
   its own when it has to wrap, instead of dropping one word to a third line. */
.hero h1 .l { display: block; text-wrap: balance; }
.hero .sub { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.5; max-width: 620px; }
.ctarow { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.note { font-size: 12px; color: var(--muted); }

/* ── Sources ticker ──────────────────────────────────────────────────── */
/* The compact source strip uses the warm neutral between the white product
   demo and the lavender process shell. The institutional marks already carry
   several colors, so this surface stays quiet. */
:root { --evidence: var(--brand-soft); }

.sources {
  width: var(--shell); margin: 0 auto; overflow: hidden;
  border-radius: var(--radius-shell); background: var(--sunken);
  border: 1px solid rgba(87,70,173,.10);
  padding: 40px 0 46px; text-align: center;
}
.sources__pill {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--raised);
  border-radius: 999px; padding: 6px 14px; margin-bottom: 22px;
  box-shadow: inset 0 0 0 1px var(--hair), 0 6px 18px -14px rgba(18, 18, 18, .5);
}
.ticker {
  overflow: hidden; max-width: var(--col); margin: 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Fast enough that the whole register set reads as active evidence rather
   than a static logo row. One set crosses in ten seconds, while the duplicated
   track keeps the loop continuous. */
.ticker__track { display: flex; width: max-content; animation: ticker 10s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__set { display: flex; align-items: center; gap: 72px; padding-right: 72px; }
.ticker__set img { height: 40px; width: auto; flex: none; opacity: .92; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 900px) { .ticker__set { gap: 44px; padding-right: 44px; } .ticker__set img { height: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .says__row { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .says__set[aria-hidden] { display: none; }
  .ticker__track { animation: none; }
  .ticker__set[aria-hidden] { display: none; }
}

/* ── Hero stage ──────────────────────────────────────────────────────── */
.stage {
  width: var(--shell); margin: 0 auto; overflow: hidden;
  border-radius: var(--radius-shell); background: var(--surface); padding: 28px 0;
  box-shadow: inset 0 0 0 1px rgba(87,70,173,.08);
}
.stage__label {
  max-width: var(--col); margin: 0 auto 8px; padding: 0 var(--pad);
  text-align: center; font-size: 11.5px; letter-spacing: .04em; color: var(--muted);
}
.stage__in {
  /* Lola's width is the one number to change. The render is 1.0234 as tall as
     it is wide and her body base sits 0.6527 down it, so --mascot-base is the
     drop from the top of the stage to the underside of her body. The phone's
     padding-top is exactly that, which puts the bezel's top edge under her and
     leaves her sitting on it rather than floating above or sinking into the
     screen. Re-render her and those two constants move with her: 1.0234 is
     524/512, and 0.6527 is row 342 of 524 -- the last row of the render where
     the wide central mass is still there, one row above where the silhouette
     drops from 475 px to 177 px and only the arms carry on. Measure it, do not
     eyeball it: 0.5802 was eyeballed, landed 38 render-rows up inside the
     widest part of her body, and sank her 18 px into the bezel. Absolutely
     positioned children resolve against the padding box, so the findings stay
     put while the phone moves down; the height carries the same 802px of room
     the phone had before she needed headroom above it. */
  --mascot-w: 244px;
  --mascot-base: calc(var(--mascot-w) * 1.0234 * 0.6527);
  position: relative; max-width: var(--col); margin: 0 auto;
  height: calc(802px + var(--mascot-base));
  overflow: hidden; display: flex; justify-content: center; align-items: flex-start;
  padding-top: var(--mascot-base);
}

/* Findings. Depth is expressed with opacity in tiers: keep it. Departure
   from the mock: the per-card mascot is gone; seven identical avatars were
   the "random places" problem. */
.cards { position: absolute; top: 0; width: 100%; height: 100%; pointer-events: none; }
.cards--l .card { left: 32px; }
.cards--r .card { right: 32px; }
/* Each finding is a notification from Lola: which register it came from, in
   the severity colour, with a coloured edge. Non-focal cards carry a degree
   of tilt so the composition reads as placed rather than stacked; the two
   focal ones stay square. Nothing here moves. */
.card {
  position: absolute; top: var(--t); opacity: var(--o);
  width: 372px; background: var(--raised); border-radius: 12px; padding: 14px 18px 15px 20px;
  box-shadow: inset 3px 0 0 var(--sev), inset 0 0 0 1px rgba(87,70,173,.10), 0 16px 36px -26px rgba(50,39,83,.38);
  transform: rotate(var(--r, 0deg)); pointer-events: auto;
}
.card[data-tier="focal"] { box-shadow: inset 3px 0 0 var(--sev), inset 0 0 0 1px var(--hair), 0 18px 40px -22px rgba(18,18,18,.45); }
.card[data-sev="red"]   { --sev: var(--sev-red); }
.card[data-sev="amber"] { --sev: var(--sev-amb); }
.card[data-sev="blue"]  { --sev: var(--blue); }
.card[data-sev="ok"]    { --sev: var(--green); }
.card__src {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sev); margin: 0 0 6px;
}
.card h3 { font-family: var(--text); font-size: 15px; font-weight: 600; line-height: 1.35; }
.card p:not(.card__src) { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 3px; }


/* Phone: 340×736 screen inside a 12px titanium bezel (geometry from ios-frame.jsx) */
/* The one mascot in the hero: perched on the phone's top edge, one arm resting
   on the bezel, the other pointing down into the thread: she indicates the
   conversation rather than just watching it. Above the phone in z-order
   (z-index 3 beats the phone's 2) so both arms fall in front of the case.
   The stage's padding-top is her headroom. No aspect-ratio: the render is
   trimmed to its own ink and sets its own height. The motion is frames inside
   an animated WebP, not CSS: only her pointing arm moves, and nothing here
   should animate the whole figure. */
.mascot {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: var(--mascot-w); z-index: 3; pointer-events: none;
}
.mascot picture { display: block; }
.mascot__still { display: block; width: 100%; height: auto; }

.phone { position: relative; z-index: 2; }
/* Full black case. The mock's titanium gradient fought the cream ground. */
.phone__bezel {
  position: relative; padding: 12px; border-radius: 66px;
  background: #0b0b0b;
  box-shadow: inset 0 0 0 2px #1c1c1c, 0 1px 6px rgba(0,0,0,.06), 0 24px 48px -28px rgba(0,0,0,.45);
}
.phone__bezel::before, .phone__bezel::after {
  content: ""; position: absolute; width: 4px; background: #1a1a1a;
}
.phone__bezel::before { left: -3px; top: 196px; height: 64px; border-radius: 3px 0 0 3px; box-shadow: 0 76px 0 0 #1a1a1a; }
.phone__bezel::after  { right: -3px; top: 222px; height: 104px; border-radius: 0 3px 3px 0; }
.phone__ring { position: absolute; inset: 12px; border-radius: 54px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; z-index: 3; }
.phone__screen { width: 340px; height: 736px; border-radius: 54px; overflow: hidden; background: var(--wa-bg); }

/* WhatsApp, iOS. Flat wallpaper colour rather than the doodle pattern; the
   rest is drawn to the real thing: status bar, circular back button, business
   subtitle, timestamps and read ticks in every bubble, the quoted message
   above a reply (the bot replies in context: client.send_text(reply_to=)),
   the composer, the home indicator. The thread is pinned to its bottom, so it
   reads as a chat scrolled to the latest message. */
.wa { height: 100%; display: flex; flex-direction: column; position: relative; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.wa__status { height: 50px; padding: 18px 26px 0 30px; display: flex; justify-content: space-between; align-items: center; background: var(--wa-hd); font-size: 14px; font-weight: 600; color: #111; }
.wa__sys { display: inline-flex; align-items: center; gap: 5px; }
.wa__sys .sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.wa__sys .sig b { display: block; width: 3px; background: #111; border-radius: 1px; }
.wa__sys .sig b:nth-child(1) { height: 4px; } .wa__sys .sig b:nth-child(2) { height: 6px; }
.wa__sys .sig b:nth-child(3) { height: 8px; } .wa__sys .sig b:nth-child(4) { height: 10px; }
.wa__sys .wifi { fill: #111; }
.wa__sys .bat { display: inline-block; width: 25px; height: 12px; border: 1.5px solid #111; border-radius: 4px; padding: 1.5px; position: relative; }
.wa__sys .bat b { display: block; width: 78%; height: 100%; background: #111; border-radius: 2px; }
.wa__sys .bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: #111; border-radius: 0 1px 1px 0; }
.wa__hd { padding: 6px 14px 10px; background: var(--wa-hd); border-bottom: 1px solid rgba(0,0,0,.08); display: flex; align-items: center; gap: 10px; }
.wa__back { width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); position: relative; flex: none; }
.wa__back::before { content: ""; position: absolute; left: 13px; top: 11px; width: 9px; height: 9px; border-left: 2.2px solid #111; border-bottom: 2.2px solid #111; transform: rotate(45deg); }
.wa__hd img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.wa__hd div { display: flex; flex-direction: column; line-height: 1.2; }
.wa__hd strong { font-size: 16px; font-weight: 600; color: #111; }
.wa__hd span { font-size: 12.5px; color: #6b6b6b; margin-top: 1px; }
.wa__msgs {
  flex: 1; min-height: 0; overflow: hidden; padding: 10px 12px 8px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  font-size: 12.5px; line-height: 1.35; color: #111;
}
.bub { position: relative; padding: 7px 10px 6px; box-shadow: 0 1px 0 rgba(0,0,0,.06); white-space: pre-line; }
.bub--out { align-self: flex-end; max-width: 84%; background: var(--wa-out); border-radius: 12px 12px 2px 12px; }
.bub--in  { align-self: flex-start; max-width: 88%; background: #fff; border-radius: 12px 12px 12px 2px; }
.bub .link { border-left: 3px solid #25D366; padding-left: 8px; display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.bub .meta { display: block; text-align: right; font-size: 10px; color: #7a7a7a; margin: 3px -2px -2px 10px; white-space: nowrap; }
.bub .meta .tick { font-style: normal; color: #53BDEB; letter-spacing: -.12em; margin-left: 2px; }
.bub .quote { display: flex; flex-direction: column; gap: 1px; background: #f3f2f0; border-left: 4px solid #e6672a; border-radius: 6px; padding: 5px 8px; margin: -1px 0 6px -2px; white-space: normal; }
.bub .quote b { color: #e6672a; font-size: 12px; font-weight: 600; }
.bub .quote span { color: #555; font-size: 12px; }
.bub--file { display: flex; gap: 10px; align-items: center; white-space: normal; padding-right: 54px; }
.bub--file div { display: flex; flex-direction: column; }
.bub--file b { font-weight: 600; }
.bub--file div span { font-size: 11px; color: #777; }
.bub--file .meta { position: absolute; right: 10px; bottom: 4px; margin: 0; }
.pdf {
  display: inline-flex; align-items: flex-end; justify-content: center; flex: none;
  width: 30px; height: 38px; border-radius: 4px; background: var(--pdf-red);
  color: #fff; font-size: 9px; font-weight: 700; padding-bottom: 4px;
}
.pdf--sm { width: 16px; height: 20px; font-size: 6px; padding-bottom: 2px; border-radius: 2px; }
.wa__compose { height: 54px; padding: 6px 12px 0; margin-bottom: 34px; background: var(--wa-hd); border-top: 1px solid rgba(0,0,0,.06); display: flex; align-items: center; gap: 10px; }
/* the 34px below the composer is the home-indicator strip: empty, like the real one */
.wa::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: var(--wa-hd); }
.wa__compose .plus { width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; color: #111; flex: none; }
.wa__compose .field { flex: 1; height: 34px; border-radius: 17px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.wa__compose svg { fill: #111; flex: none; }
.wa__home { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: #111; }

/* ── Capability pair ─────────────────────────────────────────────────── */
/* One dark shell, not a dark card floating in an otherwise empty band. The
   section used to split the conversation into what goes in and what comes
   back; the sending half is already said in step 1 below. */
.pair {
  display: grid; grid-template-columns: 1fr; gap: 12px; width: var(--shell); max-width: none;
  padding: clamp(54px, 6vw, 76px) var(--pad); background: var(--ink);
  border-radius: var(--radius-shell);
}
.tier { padding: 32px; border-radius: 10px; }
.tier--light { background: var(--raised); box-shadow: inset 0 0 0 1px var(--hair); }
.tier--dark  { background: transparent; color: rgba(255,255,255,.78); border-radius: 0; box-shadow: none; padding: 0; }
/* Ten items down one 1200px column left most of each row empty. Two columns
   keep the list as dense as it reads on a phone. */
@media (min-width: 901px) { .tier--dark ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; } }
.tier--dark h2 { color: #fff; }
.tier__tag { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.tier--dark .tier__tag { color: #b9aaf1; }
.tier h2 { font-size: 30px; letter-spacing: -0.02em; margin: 8px 0 18px; }
.tier ul { list-style: none; margin: 0; padding: 0; }
.tier li {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 0;
  border-top: 1px solid var(--hair); font-size: 15.5px; line-height: 1.45;
}
.tier--dark li { border-top-color: rgba(255,255,255,.12); font-size: 15px; }
.tier li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: #00c978; }
.tier--dark li::before { background: #a993ff; }

/* ── How it works ────────────────────────────────────────────────────── */
.how {
  width: var(--shell); margin: 0 auto; overflow: hidden; border-radius: var(--radius-shell);
  background:
    radial-gradient(circle at 82% 14%, rgba(255,255,255,.82), transparent 26%),
    var(--brand-soft);
  padding: 82px 0 112px;
}
.how__in { display: flex; flex-direction: column; gap: 12px; }
.how__head { max-width: 560px; }
.how__eyebrow {
  margin-bottom: 12px; color: var(--brand-deep); font-family: var(--mono);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.how h2 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.02em; }
.how__head .sub { margin-top: 8px; }
.how__grid {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  width: 100%; margin-top: 28px; text-align: left; align-items: start;
}
.how__grid::before {
  content: ""; position: absolute; z-index: 0; top: 39px; left: 10%; right: 10%;
  border-top: 2px dashed rgba(87,70,173,.22);
}
.how__card {
  position: relative; z-index: 1; overflow: hidden; min-height: 360px;
  background: var(--surface); border-radius: 24px; padding: 30px 30px 148px;
  box-shadow: inset 0 0 0 1px rgba(87,70,173,.10), 0 26px 55px -38px rgba(50,39,83,.68);
  transition: transform .24s ease, box-shadow .24s ease;
}
.how__card:nth-child(2) { margin-top: 32px; background: var(--brand-pale); }
.how__card:nth-child(3) { min-height: 390px; margin-top: 64px; background: var(--ink); }
.how__card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgba(87,70,173,.16), 0 30px 60px -36px rgba(50,39,83,.78); }
.how__n {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep);
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 18px;
}
.how__n span { margin-right: .55em; }
.how__card h3 { font-family: var(--display); font-size: 24px; letter-spacing: -0.02em; line-height: 1.12; }
.how__card p:not(.how__n) { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-top: 10px; max-width: 34ch; }
.how__card:nth-child(3) h3 { color: var(--surface); }
.how__card:nth-child(3) p:not(.how__n) { color: rgba(255,255,255,.66); }
.how__card:nth-child(3) .how__n { background: rgba(201,188,255,.14); color: #c9bcff; }
/* Lola performs the step instead of illustrating it with a generic icon.
   Each crop follows the pose's silhouette, while the text stays above the art
   so the cards remain readable before the lazy-loaded images arrive. */
.how__card > :not(.how__art) { position: relative; z-index: 2; }
.how__art {
  position: absolute; z-index: 1; max-width: none; height: auto; pointer-events: none;
  filter: drop-shadow(0 18px 18px rgba(50,39,83,.16));
  transition: transform .28s ease;
}
.how__card:hover .how__art { transform: translateY(-4px); }
.how__art--walking { width: 47%; right: 5%; bottom: -24px; }
.how__art--inspecting { width: 66%; right: -5%; bottom: -14px; }
.how__art--peeking { width: 76%; right: -4%; bottom: -14px; }

/* ── Report preview ──────────────────────────────────────────────────────
   Three sheets of the real document rather than a drawing of one. Geometry,
   type and colour are lifted from lola/templates/report.html and left in the
   units that file uses: A4 at 210×297mm, a 16mm rail, sizes in pt. `--k`
   scales each sheet as a whole and nothing inside it is resized, so what is
   on screen is the object the buyer receives, smaller. Body copy lands
   around 6px and is meant to read as texture; the headline, the figures and
   the provenance line are the parts that have to carry.

   Square corners and no shadow on the page itself are the document's rule,
   not an oversight. The shadow belongs to the sheet of paper, so it sits on
   the wrapper. If the document's look changes, this block has to follow it. */
.report {
  width: var(--shell); margin: 0 auto; overflow: hidden; border-radius: var(--radius-shell);
  background: var(--brand-soft); padding: 80px 0 72px;
}
.report__hd { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.report h2 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.02em; line-height: 1.1; max-width: 720px; }
.report .sub { max-width: 660px; }
.report .stage__label { margin-top: 6px; }

/* The fan scrolls rather than centring past the viewport: with five sheets and
   the edges of the other nine it outgrows a laptop, and `justify-content:
   center` on an overflowing flex row puts the cover where nobody can reach it.
   A max-content row with auto margins centres while it fits and starts at the
   left when it does not. */
.fan { --k: .44; margin: 40px auto 0; padding: 0 var(--pad); overflow-x: auto; }
.fan__in { display: flex; align-items: flex-start; width: max-content; margin: 0 auto; }
.leaf { flex: none; margin: 0; }
.leaf figcaption { display: none; }
.paper {
  flex: none; position: relative; overflow: hidden;
  width: calc(210mm * var(--k)); height: calc(297mm * var(--k));
  background: #f7f7f5;
  box-shadow: 0 1px 1px rgba(18,18,18,.10), 0 18px 40px -22px rgba(18,18,18,.45);
}
/* Overlap rather than tilt: paper stacks, cards fan. The offset is a share
   of the sheet so it holds at every scale. */
.leaf + .leaf { margin-left: calc(var(--k) * -430px); }

/* Opened, the stack becomes the whole file laid out: no overlap, every sheet
   captioned with the rail it carries, and the cut edges gone because the
   sheets they stood for are now on the page. */
.report.is-open .fan { --k: .295; overflow-x: visible; }
.report.is-open .fan__in {
  display: grid; grid-template-columns: repeat(auto-fit, calc(210mm * var(--k)));
  gap: 30px 18px; justify-content: center; width: auto;
}
.report.is-open .leaf + .leaf { margin-left: 0; }
.report.is-open .edges { display: none; }
.report.is-open .leaf figcaption {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px;
  margin-top: 10px; align-items: baseline;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.report.is-open .leaf figcaption .n { color: var(--ink); font-weight: 600; }
.report.is-open .leaf figcaption span:nth-child(2) { color: var(--ink); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.opennote { display: none; }
.report.is-open .opennote { display: block; margin: 26px auto 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.paper > .page { transform: scale(var(--k)); transform-origin: top left; }

/* Eight of the document's class names are already taken on this page: `foot` is
   the site footer, `sub` the section subheads, `eyebrow` the hero's, `note` the
   line under the CTA, `wordmark` the nav's, `card` a hero finding, `pair` the
   two-up grid and `meta` the timestamp in a chat bubble. Naming the properties
   to undo was not enough twice over: the site's `.foot` sets `flex-direction:
   column`, and its `.card` is `position: absolute` with a width and a rotation,
   so a card meant to sit under a table landed on top of the page's headline.
   `all: unset` undoes whatever is there now and whatever gets added later.
   Inherited properties still come from the sheet, `display: revert` puts back
   the element's own, and the rules below dress them from scratch. Source order
   does the rest, so this stays first.

   To find a new collision: take every class inside an `<article class="paper">`
   and intersect it with every class this file styles in a selector that does
   not mention `.paper`. Anything in both belongs on the line below. */
.paper .foot, .paper .sub, .paper .eyebrow, .paper .wordmark, .paper .note,
.paper .card, .paper .pair, .paper .meta {
  all: unset; display: revert; box-sizing: border-box;
}

/* Nine sheets nobody is being asked to read: the paper edge, thinning as it
   goes back. The line under the fan says what is on them. */
.edges { display: flex; align-items: stretch; height: calc(297mm * var(--k)); flex: none; }
.edges i {
  display: block; width: calc(var(--k) * 13px); background: #f7f7f5;
  box-shadow: inset -1px 0 0 #e5e4e0, 0 1px 1px rgba(18,18,18,.10),
              0 18px 40px -22px rgba(18,18,18,.45);
}
.edges i:nth-child(n+5) { opacity: .82; }
.edges i:nth-child(n+8) { opacity: .64; }

.more {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  margin: 26px auto 0; padding: 8px 16px 8px 8px; border: 0;
  background: none; font: inherit; font-size: 14px; color: var(--body);
  border-radius: 999px; box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow .15s ease, color .15s ease;
}
.more:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--paper); }
.more__n {
  flex: none; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; color: var(--ink); background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--paper); padding: 3px 8px; border-radius: 999px;
}
.more__shut { display: none; }
.report.is-open .more__open { display: none; }
.report.is-open .more__shut { display: inline; }

/* ── The document's own tokens ── */
.paper {
  --paper: #f7f7f5;  --card: #ffffff;  --rule: #e5e4e0;  --track: #eceae5;
  --ink: #14150f;    --body: #4b5563;  --muted: #6b7480; --numeral: #a8a7a0;
  --cover: #5f4bb0;  --cover-label: #c5bce6; --cover-panel-label: #e4dff5;
  --ok: #2f7d51;     --warn: #a8660a;  --warn-fill: #c8871a; --bad: #b3402f;
  --brand: #12b76a;  --dash: #cfcec8;  --sun: #f0a318; --sun-face: #7a4a02;
  --ok-band: #cfe0cb; --warn-band: #f6e0c1; --bad-band: #efcfc8;
  --doc: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --geist: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-family: var(--doc); color: var(--ink);
}

/* ── Page shell ── */
.paper .page {
  width: 210mm; height: 297mm; background: var(--paper);
  display: grid; grid-template-columns: 16mm minmax(0, 1fr);
  overflow: hidden; position: relative; font-size: 10.5pt; line-height: 1.5;
}
.paper .rail {
  border-right: 1px solid var(--rule); padding: 15mm 0 12mm;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.paper .rail .num { font-weight: 800; letter-spacing: -.03em; font-size: 19pt; color: var(--numeral); }
.paper .rail .name {
  font-family: var(--geist); font-size: 8pt; color: var(--muted);
  writing-mode: vertical-rl; letter-spacing: .14em; text-transform: uppercase;
}
.paper .rail .sheet { font-family: var(--geist); font-size: 8pt; color: var(--muted); }
.paper .body { padding: 15mm 15mm 12mm 11mm; display: flex; flex-direction: column; }
.paper .eyebrow {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--geist); font-size: 8.5pt; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.paper .eyebrow .plain { color: var(--ink); }
.paper h2 {
  font-family: var(--doc); margin: 9mm 0 0; font-size: 28pt; font-weight: 800;
  letter-spacing: -.035em; line-height: 1.08; max-width: 150mm; color: var(--ink);
}
.paper .lede { margin: 12px 0 0; max-width: 150mm; color: var(--body); }
.paper .foot {
  margin-top: auto; display: flex; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--rule);
  font-family: var(--geist); font-size: 8pt; color: var(--muted);
}
.paper .foot .no { white-space: nowrap; margin-left: 16px; }

/* ── Cover ── */
.paper .page.cover {
  grid-template-columns: minmax(0, 1fr); background: var(--cover); color: #fff;
  padding: 16mm; display: flex; flex-direction: column;
}
.paper .cover .top {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--geist); font-size: 8.5pt; color: var(--cover-label);
  text-transform: uppercase; letter-spacing: .06em;
}
.paper .cover .wordmark {
  font-family: var(--doc); font-weight: 700; font-size: 16pt; color: #fff;
  letter-spacing: -.02em; line-height: 1;
}
.paper .cover .confetti { position: absolute; border-radius: 50%; display: block; }
.paper .cover__mid { margin-top: 24mm; }
.paper .cover .kicker {
  font-family: var(--geist); font-size: 8.5pt; color: var(--cover-label);
  letter-spacing: .08em; text-transform: uppercase;
}
.paper .cover h1 {
  font-family: var(--doc); margin: 10px 0 0; font-size: 40pt; font-weight: 600;
  line-height: 1.04; letter-spacing: -.03em; color: #fff;
}
.paper .cover .sub { margin: 12px 0 0; font-size: 12.5pt; color: var(--cover-label); }
.paper .cover .figures {
  margin-top: 14mm; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22);
}
.paper .cover .figures > div { padding: 16px 18px; border-left: 1px solid rgba(255,255,255,.22); }
.paper .cover .figures > div:first-child { padding-left: 0; border-left: 0; }
.paper .cover .figures > div:last-child { padding-right: 0; }
.paper .cover .figures .k {
  font-family: var(--geist); font-size: 8pt; color: var(--cover-label); text-transform: uppercase;
}
.paper .cover .figures .v {
  font-weight: 800; letter-spacing: -.03em; font-size: 22pt; line-height: 1.1; white-space: nowrap;
}
.paper .cover__first { margin-top: 12mm; }
.paper .cover .lede { margin: 10px 0 0; max-width: none; color: #fff; font-weight: 500; font-size: 18pt; line-height: 1.35; }
.paper .cover .panels {
  margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: rgba(255,255,255,.14);
}
.paper .cover .panels > div { background: rgba(255,255,255,.10); padding: 16px 18px; }
.paper .cover .panels .k {
  font-family: var(--geist); font-size: 8pt; color: var(--cover-panel-label); text-transform: uppercase;
}
.paper .cover .panels .v { margin-top: 4px; font-size: 11pt; }
.paper .cover .cfoot { margin-top: 14mm; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.paper .cover .stamp {
  font-family: var(--geist); font-size: 8pt; color: var(--cover-label);
  text-transform: uppercase; line-height: 1.9;
}
.paper .cover .disclaim { font-size: 9pt; color: var(--cover-label); text-align: right; max-width: 80mm; }

/* ── Pills ── */
.paper .pill {
  display: inline-block; font-family: var(--geist); font-size: 8pt;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; color: #fff;
}
.paper .pill.warn  { background: var(--warn); }
.paper .pill.brand { background: var(--brand); color: var(--ink); letter-spacing: .1em; }

/* ── Summary ── */
.paper .semcards { margin-top: 9mm; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.paper .semcards > div { color: #fff; padding: 14px 16px; }
.paper .semcards .t { font-weight: 600; font-size: 15pt; letter-spacing: -.01em; }
.paper .semcards .s { font-weight: 600; font-size: 10.5pt; margin-top: 2px; }
.paper .semcards .n { font-family: var(--geist); font-size: 8pt; margin-top: 6px; opacity: .85; text-transform: uppercase; }
.paper .section-label {
  font-family: var(--geist); font-size: 8.5pt; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
}
/* The document puts the gap on the block, not on the label: 10mm before the
   alerts, 8mm before the metres. */
.paper .alerts__hd { margin-top: 10mm; }
.paper .alerts { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.paper .alerts > div {
  background: var(--card); border: 1px solid var(--rule); padding: 14px 16px;
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px;
}
.paper .alerts b { font-weight: 600; }
.paper .alerts .where {
  margin-top: 6px; font-family: var(--geist); font-size: 8pt;
  color: var(--muted); letter-spacing: .04em; text-transform: uppercase;
}
.paper .alerts .badge {
  font-family: var(--geist); font-weight: 500; font-size: 9pt; color: #fff;
  line-height: 1; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
}

/* ── Price: bars, the metres, the three figures ── */
.paper .bars { margin-top: 9mm; display: flex; flex-direction: column; gap: 14px; }
.paper .bar .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.paper .bar .top span { font-weight: 600; }
.paper .bar .top b { font-weight: 800; letter-spacing: -.03em; font-size: 19pt; }
.paper .bar .fill { height: 30px; }
.paper .axis { display: flex; justify-content: space-between; font-family: var(--geist); font-size: 8pt; color: var(--muted); }
.paper .metres { margin-top: 8mm; }
.paper .split { margin-top: 10px; display: grid; gap: 4px; height: 76px; }
.paper .split > div { display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; }
/* The unaccounted-for column is narrower here than in the document, where it
   is the wall area: a figure may not break away from its unit. */
.paper .split .v { font-weight: 800; letter-spacing: -.03em; font-size: 19pt; line-height: 1; white-space: nowrap; }
.paper .split .n { font-size: 9pt; margin-top: 2px; }
.paper .split .useful { background: var(--ok); color: var(--paper); }
.paper .split .walls { background: var(--track); }
.paper .split .walls .n { color: var(--muted); }
/* A countable area: one square per five metres, filled for what the cadastre
   has and outlined for what only the advert claims. */
.paper .units { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.paper .units i { width: 15px; height: 15px; background: var(--ok); flex: none; }
.paper .units i.off { background: none; border: 1.5px solid var(--dash); }
.paper .unitkey {
  display: flex; gap: 14px; margin-top: 10px; font-family: var(--geist);
  font-size: 8pt; color: var(--muted); text-transform: uppercase; flex-wrap: wrap;
}
.paper .unitkey span { display: flex; align-items: center; gap: 6px; }
.paper .unitkey b { width: 11px; height: 11px; background: var(--ok); display: block; flex: none; }
.paper .unitkey b.off { background: none; border: 1.5px solid var(--dash); }
.paper .unitkey em { font-style: normal; }
.paper .axis--units { margin-top: 8px; }
.paper .tri {
  margin-top: 7mm; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.paper .tri > div { background: var(--card); padding: 14px 16px; }
.paper .tri .k { font-family: var(--geist); font-size: 8pt; color: var(--muted); text-transform: uppercase; }
.paper .tri .v { font-weight: 800; letter-spacing: -.03em; font-size: 19pt; line-height: 1.15; white-space: nowrap; }
.paper .tri .n { font-size: 9.5pt; color: var(--muted); }
.paper .notes {
  margin-top: 7mm; border-top: 1px solid var(--rule); padding-top: 12px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.paper .notes .k { font-family: var(--geist); font-size: 8.5pt; color: var(--muted); text-transform: uppercase; }
.paper .notes p { margin: 6px 0 0; color: var(--body); }

.chip {
  display: inline-flex; align-items: center; gap: 10px; margin: 36px auto 0;
  position: relative; left: 50%; transform: translateX(-50%);
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--hair);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--muted);
}

/* ── Light and noise ──────────────────────────────────────────────────────
   Both halves draw the whole scale and then place the reading on it, which is
   the only way a lone figure means anything: 52 dB is nothing on its own, and
   52 dB just inside a green band whose night line is eight decibels to the
   left is the answer to the question the buyer asked. */
.paper h2.long { font-size: 26pt; line-height: 1.1; margin-top: 8mm; }
.paper .note { margin: 10px 0 0; font-size: 10pt; color: var(--body); max-width: 155mm; }
.paper .note.wide { margin-top: 7mm; font-size: 10.5pt; }
/* A section label with its legend on the same line. */
.paper .blockhead { margin-top: 6mm; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.paper .blockhead .unitkey { margin-top: 0; }
.paper .unitkey b.warn { background: var(--warn-fill); }
.paper .unitkey b.bad  { background: var(--bad); }

/* Hours of sun as a heat matrix. The fill is the reading; the figure in the
   cell is there so nobody has to judge a colour to the nearest half hour. */
.paper .suns { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.paper .suns .head, .paper .suns .r { display: grid; grid-template-columns: 34mm repeat(3, minmax(0, 1fr)); gap: 6px; }
.paper .suns .head { font-family: var(--geist); font-size: 8pt; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; align-items: end; }
.paper .suns .head span + span { text-align: center; }
.paper .suns .lab { display: flex; flex-direction: column; justify-content: center; }
.paper .suns .face { font-weight: 600; font-size: 11.5pt; line-height: 1.2; }
.paper .suns .who, .paper .suns .sectors { font-family: var(--geist); font-size: 8pt; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.paper .suns .cell { height: 13mm; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--track); }
.paper .suns .cell .z { font-family: var(--geist); font-size: 9pt; color: var(--muted); }
.paper .suns .cell .n { font-weight: 800; letter-spacing: -.03em; font-size: 19pt; line-height: 1; color: var(--ink); }
.paper .suns .cell .u { font-family: var(--geist); font-size: 7.5pt; color: var(--sun-face); letter-spacing: .06em; text-transform: uppercase; }
/* One ramp, five steps. Fixed here because it must not move between reports:
   the step a cell lands on is what makes two documents comparable, and it is
   picked against eight hours a day, never against the brightest cell here. */
.paper .suns .cell.s1 { background: #f9d99c; }
.paper .suns .cell.s2 { background: #f7cc7b; }
.paper .suns .cell.s3 { background: #f5be5a; }
.paper .suns .cell.s4 { background: #f2b139; }
.paper .suns .cell.s5 { background: var(--sun); }

/* Decibels: the bands, and a dot where the reading falls. A bar filled from
   the left said "this much", which is the wrong question. What a buyer needs
   is which side of the line they are on, and the line is not in the same
   place at three in the morning as at noon. */
.paper .rows { display: flex; flex-direction: column; }
.paper .rows .r { display: grid; gap: 12px; }
.paper .rows.noise { margin-top: 10px; background: var(--card); border: 1px solid var(--rule); padding: 0 14px; }
.paper .rows.noise .r { grid-template-columns: 50mm minmax(0, 1fr) 18mm; gap: 16px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule); }
.paper .rows.noise .r:first-child { border-top: none; }
.paper .rows.noise .lab { display: flex; flex-direction: column; }
.paper .rows.noise .face { font-weight: 600; }
.paper .rows.noise .who { font-family: var(--geist); font-size: 8pt; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.paper .rows.noise .v { font-weight: 800; letter-spacing: -.03em; font-size: 19pt; line-height: 1; text-align: right; color: var(--warn-fill); }
.paper .rows.noise .v.ok  { color: var(--ok); }
.paper .rows.noise .v.bad { color: var(--bad); }
.paper .dbtrack { position: relative; height: 20px; }
.paper .dbtrack .band { position: absolute; left: 0; right: 0; top: 7px; height: 7px; border-radius: 4px; }
.paper .dbtrack .dot { position: absolute; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 3px solid var(--card); background: var(--warn-fill); }
.paper .dbtrack .dot.ok  { background: var(--ok); }
.paper .dbtrack .dot.bad { background: var(--bad); }
/* The axis borrows the row grid so its labels sit on the track's own
   coordinates rather than being spread across the column. */
.paper .dbaxis { display: grid; grid-template-columns: 50mm minmax(0, 1fr) 18mm; gap: 16px; border-top: 1px solid var(--rule); padding: 7px 0 9px; }
.paper .dbaxis > div { position: relative; height: 11px; }
.paper .dbaxis span[style] { position: absolute; top: 0; white-space: nowrap; font-family: var(--geist); font-size: 8pt; color: var(--muted); }

/* ── The nine sheets the fan only named ───────────────────────────────────
   Every idiom below is the document's, at the document's own sizes. They are
   here because the sheets that use them are: the index, the causes table, the
   council-tax block, the walk rows, the yield equation, the register list and
   the checklist. Same rule as the rest: track report.html or they drift. */
.paper .toc { margin-top: 9mm; display: flex; flex-direction: column; }
.paper .toc a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.paper .toc a:last-child { border-bottom: 1px solid var(--rule); }
.paper .toc .n { font-weight: 600; font-size: 12pt; color: var(--numeral); }
.paper .toc .t { font-weight: 600; }
.paper .toc .d { color: var(--muted); font-weight: 400; }
.paper .toc .p { font-family: var(--geist); font-size: 8.5pt; color: var(--muted); }
.paper .key { margin-top: 12mm; background: var(--card); border: 1px solid var(--rule); padding: 18px 20px; }
.paper .key .k { font-family: var(--geist); font-size: 8.5pt; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.paper .key .three { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; font-size: 10pt; }
.paper .key .three > div { color: #fff; padding: 12px 14px; }
.paper .key .three .d { opacity: .9; }

/* One row grammar, six column layouts. */
.paper .rows .head { font-family: var(--geist); font-size: 8pt; color: var(--muted); padding-bottom: 8px; text-transform: uppercase; }
.paper .rows .head, .paper .rows .r { display: grid; gap: 12px; }
.paper .rows:not(.noise) .r { padding: 10px 0; border-top: 1px solid var(--rule); align-items: start; }
.paper .rows:not(.noise) .r:last-child { border-bottom: 1px solid var(--rule); }
.paper .rows b { font-weight: 600; }
.paper .rows .what { color: var(--body); }
.paper .rows .when { font-family: var(--geist); font-size: 8.5pt; color: var(--muted); }
.paper .sq { width: 10px; height: 10px; margin-top: 5px; }
.paper .sq.ok { background: var(--ok); }
.paper .sq.warn { background: var(--warn); }
.paper .sq.bad { background: var(--bad); }
.paper .rows.causes .head, .paper .rows.causes .r { grid-template-columns: 10px 46mm minmax(0, 1fr) 26mm; }
.paper .rows.state .head, .paper .rows.state .r { grid-template-columns: 10px 46mm minmax(0, 1fr) 24mm; }
.paper .rows.state .r { padding: 5px 0; }
.paper .rows.registers .head, .paper .rows.registers .r { grid-template-columns: 10px 44mm minmax(0, 1fr) 24mm; }
.paper .rows.registers .r { padding: 8px 0; }
.paper .rows.costs .head, .paper .rows.costs .r { grid-template-columns: 46mm minmax(0, 1fr) 30mm; gap: 14px; }
.paper .rows.drag .head, .paper .rows.drag .r { grid-template-columns: 52mm minmax(0, 1fr) 30mm; gap: 14px; }
.paper .rows.drag .r { padding: 11px 0; }
.paper .rows.gaps .head, .paper .rows.gaps .r { grid-template-columns: 52mm minmax(0, 1fr); gap: 14px; }
.paper .rows.gaps .r { padding: 12px 0; }
.paper .rows.walk .head, .paper .rows.walk .r { grid-template-columns: 40mm minmax(0, 1fr) 20mm; gap: 14px; align-items: center; }
.paper .rows.walk .r { padding: 12px 0; }
.paper .rows.walk .v { font-weight: 600; font-size: 15pt; text-align: right; }
/* A small solid action pill inside a table cell. */
.paper .tag { justify-self: start; background: var(--bad); color: #fff; font-family: var(--geist); font-size: 8pt; letter-spacing: .06em; padding: 3px 9px; text-transform: uppercase; white-space: nowrap; }
.paper .legend { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.paper .pill.ok { background: var(--ok); }
.paper .pill.bad { background: var(--bad); }

.paper .card { background: var(--card); border: 1px solid var(--rule); padding: 16px 18px; }
.paper .card.alert { border-left: 3px solid var(--bad); }
.paper .card .k { font-family: var(--geist); font-size: 8.5pt; color: var(--muted); text-transform: uppercase; }
.paper .card .t { font-weight: 600; margin-top: 2px; }
.paper .card p { margin: 6px 0 0; color: var(--body); }
.paper .card.gaps p { font-size: 9.5pt; margin-top: 5px; }
.paper .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.paper .pair--notes { margin-top: 7mm; }
.paper .card + .card { margin-top: 8px; }
.paper .pair .card + .card { margin-top: 0; }
.paper .bigcard .k { font-family: var(--geist); font-size: 8.5pt; color: var(--muted); text-transform: uppercase; }
.paper .bigcard .figure { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; }
.paper .bigcard .figure b { font-weight: 800; letter-spacing: -.04em; font-size: 28pt; line-height: 1.1; }
.paper .bigcard .figure span { font-family: var(--geist); font-size: 10pt; color: var(--muted); }
.paper .bigcard .figure span.good { color: var(--ok); }
.paper .bigcard p { margin: 8px 0 0; color: var(--body); }

/* Quantities are counted, not just measured: a row of ticks says how many and
   the eye adds them up. The dim ticks are the rest of the scale, so a figure
   is never shown without its context, and the faded ones are the uncertain
   part of a range: present, and visibly less certain. */
.paper .comb { display: flex; gap: 2px; align-items: stretch; height: 22px; margin-top: 16px; }
.paper .comb i { flex: 1; background: var(--track); border-radius: 2px; }
.paper .comb i.on { background: var(--ok); }
.paper .comb i.on.warn { background: var(--warn-fill); }
.paper .comb i.on.bad { background: var(--bad); }
.paper .comb i.on.ink { background: var(--ink); }
.paper .comb i.on.soft { opacity: .38; }
.paper .comb.tall { height: 30px; }
.paper .comb.thin { height: 14px; margin-top: 0; }
.paper .comb + .axis { margin-top: 8px; }
.paper .axis--walk { margin-top: 10px; }

.paper .money { margin-top: 9mm; background: var(--card); border: 1px solid var(--rule); padding: 20px 22px; }
.paper .money .head { display: flex; justify-content: space-between; align-items: baseline; }
.paper .money .k { font-family: var(--geist); font-size: 8.5pt; color: var(--muted); text-transform: uppercase; }
.paper .money .est { color: var(--warn-fill); }
.paper .money .v { font-weight: 800; letter-spacing: -.04em; font-size: 31pt; line-height: 1.05; margin-top: 6px; }
.paper .money .meta { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--rule); padding-top: 14px; font-size: 10pt; }
.paper .money .meta .k { font-size: 8pt; }
.paper .money .meta .v { font-weight: 600; font-size: 10pt; letter-spacing: 0; margin-top: 0; }
.paper .costblock, .paper .dragblock, .paper .workblock { margin-top: 8mm; }
.paper .v.big { font-weight: 800; letter-spacing: -.03em; font-size: 24pt; line-height: 1.1; }

.paper .equation { margin-top: 9mm; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.paper .equation .op { font-weight: 500; font-size: 17pt; color: var(--numeral); align-self: center; }
.paper .equation .k { font-family: var(--geist); font-size: 8pt; color: var(--muted); text-transform: uppercase; }
.paper .equation .v { font-weight: 800; letter-spacing: -.03em; font-size: 20pt; line-height: 1.15; white-space: nowrap; }
.paper .equation .n { font-size: 9.5pt; color: var(--muted); }
.paper .equation .result { background: var(--ok); color: #fff; padding: 16px 18px; }
.paper .equation .result .k { color: #fff; opacity: .85; }
.paper .equation .result .n { color: rgba(255,255,255,.75); }

.paper .checks { margin-top: 8mm; display: flex; flex-direction: column; }
.paper .checks .r { display: grid; grid-template-columns: 26px 18px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--rule); }
.paper .checks .r:last-child { border-bottom: 1px solid var(--rule); }
.paper .checks .n { font-weight: 600; font-size: 13pt; color: var(--numeral); line-height: 1.3; }
.paper .checks .box { width: 15px; height: 15px; border: 1.5px solid var(--ink); margin-top: 4px; }
.paper .closing { margin-top: 8mm; background: var(--ok); color: #fff; padding: 18px 20px; }
.paper .closing .k { font-family: var(--geist); font-size: 8.5pt; color: #fff; opacity: .85; text-transform: uppercase; }
.paper .closing p { margin: 6px 0 0; font-weight: 500; font-size: 14pt; line-height: 1.4; }

/* Page nine is too tall for a footer pinned to the foot of the box, so a flex
   spacer absorbs the slack instead and the footer sits where content leaves it. */
.paper .spacer { flex: 1 1 auto; min-height: 4mm; }
.paper .body.tight .foot { margin-top: 0; }

/* ── The annex ── */
.paper .rail .dot { font-size: 14pt; color: #b0afa8; }
.paper .meta4 { margin-top: 9mm; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.paper .meta4 > div { background: var(--card); padding: 14px 16px; }
.paper .meta4 .k { font-family: var(--geist); font-size: 8pt; color: var(--muted); text-transform: uppercase; }
.paper .meta4 .v { font-size: 10pt; font-weight: 600; margin-top: 2px; }
.paper .meta4 .v.mono { font-family: var(--geist); font-weight: 500; }
.paper .plates { margin-top: 8mm; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.paper .plates > * { flex: 1; min-height: 0; }
.paper .plate { background: var(--card); border: 1px solid var(--rule); padding: 10px; display: flex; flex-direction: column; min-height: 0; }
.paper .plate .cap { font-family: var(--geist); font-size: 7.5pt; color: var(--muted); padding-top: 6px; text-transform: uppercase; }
/* The plate is a letterbox: the drawing takes a definite height from the flex
   row rather than growing to its own geometry and pushing the footer off. */
.paper .plate .art { flex: 1; min-height: 0; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.paper .plate .art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.paper .footprint { fill: rgba(179,64,47,.18); stroke: #b3402f; stroke-width: 2; vector-effect: non-scaling-stroke; }
.paper .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 1; min-height: 0; }
.paper .scope { margin-top: 7mm; border-top: 1px solid var(--rule); padding-top: 14px; }
.paper .scope .k { font-family: var(--geist); font-size: 8.5pt; color: var(--muted); text-transform: uppercase; }
.paper .scope p { margin: 6px 0 0; max-width: 155mm; color: var(--body); }
.paper .scope + .foot { margin-top: 16px; }
.paper .sign { display: flex; align-items: center; gap: 8px; }
.paper .sign b { font-weight: 700; font-size: 11pt; color: var(--ink); }

/* ── Coverage ────────────────────────────────────────────────────────── */
.cov {
  width: var(--shell); max-width: none; padding: 76px var(--pad) 84px; border-radius: var(--radius-shell);
  background: var(--brand-soft); overflow: hidden;
}
.cov h2 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.02em; }
.cov__intro {
  max-width: 980px; margin: 0 auto;
}
.cov__copy { max-width: 650px; }
.cov .sub { max-width: 650px; margin-top: 14px; }
.cov__grid {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; max-width: 980px; margin: 28px auto 0; text-align: left;
}
.cov__grid article {
  position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center;
  min-height: 142px; padding: 24px 34px 24px 22px; border-radius: 22px;
  background: rgba(252,251,247,.94); box-shadow: inset 0 0 0 1px rgba(87,70,173,.12), 0 18px 38px -32px rgba(50,39,83,.55);
  transition: transform .24s ease, background .24s ease;
}
.cov__grid article + article { margin-top: -8px; }
.cov__grid article:nth-child(1) { width: 86%; z-index: 1; }
.cov__grid article:nth-child(2) { width: 89.5%; margin-left: 3.5%; z-index: 2; background: rgba(247,244,252,.98); }
.cov__grid article:nth-child(3) { width: 93%; margin-left: 7%; z-index: 3; background: var(--surface); }
.cov__grid article:hover { transform: translateX(5px); background: var(--raised); }
.cov__icon { width: 78px; height: 78px; object-fit: contain; }
.cov__grid h3 { font-size: 23px; letter-spacing: -0.02em; }
.cov__grid p  { color: var(--muted); font-size: 14.5px; line-height: 1.45; margin-top: 8px; }
.cov > .note { max-width: 760px; margin: 24px auto 0; text-align: left; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq {
  width: var(--shell); margin: 0 auto; overflow: hidden; border-radius: var(--radius-shell);
  background: var(--surface); padding: 88px 0 96px;
}
.faq__in { max-width: 860px; }
.faq h2 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.02em; }
.faq .sub { margin: 12px 0 28px; }
.faq__item { border-top: 1px solid var(--rule, #dedbd4); }
.faq__item:last-of-type { border-bottom: 1px solid var(--rule, #dedbd4); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 18px 0; font-family: var(--display); font-size: 20px; letter-spacing: -0.015em; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); transition: transform .2s ease; margin-right: 4px;
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item p { padding: 0 44px 20px 0; font-size: 16px; line-height: 1.55; color: var(--body); max-width: 62ch; }

/* ── Footer ──────────────────────────────────────────────────────────── */
/* Departure from the mock: the 104px mascot + speech bubble that sat on the
   footer's top edge is gone. It was the weakest moment on the page. The
   footer is now the clean dark close the copy deserves. */
.foot {
  width: var(--shell); margin: 0 auto 16px; border-radius: var(--radius-shell);
  background: var(--ink); color: var(--surface); text-align: center;
  padding: 84px var(--pad) 92px; display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.foot h2 { color: var(--surface); font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.02em; line-height: 1.1; max-width: 820px; }
.foot__note { font-size: 12.5px; color: rgba(255,255,255,.55); }


/* Four figures, each counted off a public register on a stated date. One
   number and one sentence per card keeps this a sharp proof point instead of
   a second explanation of the product. The dark ink cards and lavender
   figures use the same pair as the capability shell and the hero. */
:root { --report-cover: var(--brand-deep); }

.nums {
  width: var(--shell); margin: 0 auto; overflow: hidden; border-radius: var(--radius-shell);
  padding: 58px 0 62px; text-align: center; background: var(--surface);
}
/* One line, and centred. It was capped at 18ch, which broke a 43-character
   sentence over two lines and left it ragged against a left edge nothing
   else on the page shares. */
.nums h2 { font-size: clamp(26px, 3.1vw, 40px); letter-spacing: -0.022em; line-height: 1.1; text-wrap: balance; }
.nums__src { margin-top: 10px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.nums__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; text-align: left; }
.nums__grid article {
  background: var(--ink); border-radius: 20px; padding: 24px 24px 25px;
  box-shadow: 0 20px 44px -30px rgba(50, 39, 83, .70);
  display: flex; flex-direction: column; gap: 7px;
}
.nums__grid b {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: .95;
  font-size: clamp(30px, 3vw, 42px); color: #c9bcff; font-variant-numeric: tabular-nums;
}
.nums__grid strong {
  margin-top: 7px; color: var(--surface); font-family: var(--display); font-size: 17px;
  font-weight: 600; line-height: 1.1; letter-spacing: -.012em; text-wrap: balance;
}
/* Scoped to the grid, not to .nums. As `.nums p` this also caught
   .nums__src, which is a <p> too, and painted the provenance line white at
   78% on a stone ground: invisible, and invisible in the one place the page
   says where the figures came from. */
.nums__grid p { font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .58); margin: 0; text-wrap: pretty; }

/* ── Testimonials ────────────────────────────────────────────────────────
   Two rows travelling opposite ways. Each row's set is duplicated once and
   the track moves exactly -50%, which is the register ticker's trick two
   sections up and the reason neither loop has a seam. The duplicate keeps
   its data-i18n keys, so applyLang updates both copies and a language
   switch cannot leave half the rail in Spanish.

   No portraits and no star ratings. There is nothing here to score out of
   five, and a stock face would be the only invented thing on a page whose
   entire claim is that nothing on it is invented. The thumb uses the brand
   color, keeping WhatsApp green reserved for the actual WhatsApp action. */
.says {
  width: var(--shell); margin: 0 auto; overflow: hidden; border-radius: var(--radius-shell);
  background: var(--surface); padding: 76px 0 84px;
}
.says__hd { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.says__tag { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.says__hd h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.02em; line-height: 1.1; max-width: 20ch; }
.says__hd .sub { max-width: 520px; }
/* The rail lives inside the page's column like everything else. It used to be
   a direct child of the section with no width of its own, so on a wide screen
   it ran the full viewport while every other section stopped at --col, and
   the quotes drifted out past the edge of the page they belong to.

   The fade sits on the ROW rather than the rail, because the rail now carries
   --pad and a mask on the outer box would start fading inside that padding
   instead of at the edge the reader sees. */
.says__rail {
  max-width: var(--col); margin: 34px auto 0; padding: 0 var(--pad);
  display: flex; flex-direction: column; gap: 14px;
}
.says__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.says__track { display: flex; width: max-content; }
.says__row--a .says__track { animation: says-l 64s linear infinite; }
.says__row--b .says__track { animation: says-r 58s linear infinite; }
.says__rail:hover .says__track { animation-play-state: paused; }
.says__set { display: flex; gap: 14px; padding-right: 14px; }
@keyframes says-l { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes says-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.say {
  flex: none; width: 320px; margin: 0;
  background: var(--brand-pale); border-radius: 18px; padding: 20px 22px 18px;
  box-shadow: inset 0 0 0 1px rgba(87,70,173,.08);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .24s ease, box-shadow .24s ease;
}
.say:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(87,70,173,.12), 0 20px 42px -34px rgba(50,39,83,.5); }
.say__up {
  --thumb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 21h4V9H2v12zm20-11a2 2 0 0 0-2-2h-6.31l.95-4.57.03-.32a1.5 1.5 0 0 0-.44-1.06L13.17 1 6.59 7.59A2 2 0 0 0 6 9v10a2 2 0 0 0 2 2h9a2 2 0 0 0 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/%3E%3C/svg%3E");
  width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--brand);
  -webkit-mask: var(--thumb) center / 16px 16px no-repeat;
  mask: var(--thumb) center / 16px 16px no-repeat;
}
.say blockquote { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--body); text-wrap: pretty; }
.say figcaption { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.say figcaption b { font-size: 14px; font-weight: 600; color: var(--ink); }
.say figcaption span { font-size: 12.5px; color: var(--muted); }

/* ── The sample report's own button ──────────────────────────────────────
   This replaced a chip reading "A4 · PDF · español o inglés", which was the
   one place on the page where somebody not ready to message a stranger
   could have seen what they would get, and it did nothing. */
.repdl { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 34px; }
.repdl .btn { gap: 12px; }
.pdf--btn {
  background: var(--pdf-red); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; border-radius: 4px; padding: 3px 5px; line-height: 1;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1140px) {
  /* below lg: only the two focal findings survive beside the phone */
  .card[data-tier="far"], .card[data-tier="mid"] { display: none; }
  .cards--l .card { left: 12px; }
  .cards--r .card { right: 12px; }
  .card { width: 300px; }
}
/* The findings stop fitting beside the phone well before the rest of the page
   needs its mobile layout, so the stage stacks on its own breakpoint. A 300px
   card at left:12px ends at 312px, and the phone's left edge is at
   (stage - 364) / 2, which only clears it from about 990px up. Between 900 and
   1140 the two survivors were sliding under the case -- 14px at 960, 34px at
   920 -- while the other eight were still display:none from the rule above, so
   the whole section read as the mascot and the phone and nothing else. Stack
   before that happens and every finding comes back. */
@media (max-width: 1040px) {
  .stage__in { --mascot-w: 156px; height: auto; flex-direction: column; align-items: center; overflow: visible; padding-top: 0; padding-bottom: 24px; }
  .cards { position: static; height: auto; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 480px; padding: 0 var(--pad); margin-top: 18px; order: 1; }
  /* The findings do not come to the phone. Beside the mock they are a
     composition: ten notes pinned around a conversation. Stacked into one
     column they are ten register findings about a flat nobody has been
     introduced to, and they arrive BEFORE the line that says what they
     are. The conversation is the thing this section is about, so on a
     narrow screen it is the thing that is left. */
  .cards { display: none; }
  /* Stacked, there is no phone edge to sit on, so she leads instead: first in
     the column, still pointing down at everything below her. The phone follows
     her, and the findings follow it -- order:1 on .cards. The conversation is
     what the section is about, and it used to open 586px of cards further down
     the page than the mascot, which is a long way on a phone. */
  /* Same relationship as the wide layout, same two constants: her body base
     lands on the phone's top edge and her arms carry on over the front. The
     -6px this used to be only pulled her in far enough for the fingertip to
     graze the bezel, so she read as hovering above the phone rather than
     sitting on it. The pull is her height minus her base -- the arms. */
  .mascot {
    position: static; order: -1; width: var(--mascot-w);
    /* The wide layout centres her with left:50% and a -50% translate. Going
       static drops the left, but the transform survives and kept shifting her
       half her own width to the left -- 78px of 156, which is why she sat off
       to one side of the phone. Auto margins do the centring here. */
    transform: none;
    margin: 0 auto calc(var(--mascot-base) - var(--mascot-w) * 1.0234);
  }
  .phone { transform: scale(.88); transform-origin: top center; margin-bottom: -88px; }
}
/* Five sheets and nine edges outgrow a laptop before they outgrow the layout,
   so the sheet shrinks a step before the row starts scrolling. */
@media (max-width: 1180px) { .fan { --k: .38; } }
@media (max-width: 1040px) { .nums__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  /* .pair is one column at every width now; the list inside it is what folds. */
  .tier--dark ul { display: block; }
  .how__grid { grid-template-columns: 1fr; }
  .how__grid::before { display: none; }
  .how__card:nth-child(2), .how__card:nth-child(3) { margin-top: 0; }
  .tier--dark { border-radius: 24px 24px 10px 10px; }
  /* A stack you cannot see behind is no use on a phone: the sheets separate,
     shrink and scroll one at a time. The edges of the rest go with the stack;
     the line under the fan is what says there are nine more. */
  .fan { --k: .40; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .fan__in { gap: 14px; margin: 0; }
  .paper { scroll-snap-align: center; }
  .paper + .paper { margin-left: 0; }
  .edges { display: none; }
  .hero h1 { font-size: clamp(36px, 9vw, 44px); }
  .nums { padding: 52px 0 56px; }
  .nums h2 { max-width: none; }
  .nums__grid { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .nums__grid article { padding: 18px 18px 20px; gap: 7px; }
  .says { padding: 56px 0 62px; }
  .says__rail { margin-top: 24px; gap: 10px; }
  .say { width: 268px; padding: 17px 18px 16px; }
  .say blockquote { font-size: 13.5px; }
  .sources { padding: 32px 0 36px; }
  .how { padding: 56px 0 62px; }
  .how__card { min-height: 330px; padding: 24px 24px 132px; }
  .how__art--walking { width: min(45%, 180px); }
  .how__art--inspecting { width: min(62%, 250px); }
  .how__art--peeking { width: min(76%, 300px); }
}
@media (max-width: 560px) {
  .nav__brand { padding: 5px 8px; }
  .nav__wordmark { width: 58px; }
  .nav__in { gap: 10px; }
  .cov { padding-top: 54px; padding-bottom: 58px; }
  .cov .sub { font-size: 15px; }
  .cov__grid { margin-top: 22px; }
  .cov__grid article {
    grid-template-columns: 74px minmax(0, 1fr); min-height: 0;
    padding: 18px 18px 18px 12px; border-radius: 18px;
  }
  .cov__grid article:nth-child(1) { width: 94%; }
  .cov__grid article:nth-child(2) { width: 95%; margin-left: 2%; }
  .cov__grid article:nth-child(3) { width: 96%; margin-left: 4%; }
  .cov__icon { width: 62px; height: 62px; }
  .cov__grid h3 { font-size: 21px; }
  .cov__grid p { font-size: 13.5px; }
  .cov > .note { margin-top: 20px; font-size: 12.5px; }
}
@media (max-width: 420px) {
  .phone { transform: scale(.82); margin-bottom: -132px; }
  .nav__in { height: 64px; }
  .nav__right { gap: 8px; }
  .langtoggle button { padding: 5px 8px; }
  .nav .btn { padding-left: 13px; padding-right: 13px; }
}

/* ── Motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}