/* LAYER: page — the FRAME every claim band shares.
 *
 * Four bands sit between the hero and the closing call to action, and each makes
 * one claim: a figure, the statement it supports, and the evidence for it. This
 * file owns what they have in common — the two grounds, the head, and the
 * two-column body. What is INSIDE each one is styled in claims.css, scoped to
 * that band's id, because the four interiors are four different objects: a
 * receipt, a ledger, a console, a tray.
 *
 * THEY ARE LIGHT, AND THAT IS THE BRAND RATHER THAN A PREFERENCE. BRAND.html:
 * "no rounded corners, no gradients, no blur, no dark mode on user-facing
 * surfaces — code blocks are the one dark surface." These were one ink slab
 * hanging off the hero, which is defensible for a panel that reads as the inside
 * of the machine and is not defensible for a third of the front page.
 *
 * THE GROUNDS ALTERNATE BY POSITION. The first band under the hero is panel
 * white and every band after it takes the other ground in turn, closing band
 * included: white, desk, white, desk, white. It IS a stripe, deliberately, and
 * it is the one thing on this page decided by sequence rather than by content.
 *
 * THAT REPLACES A CONTENT RULE, and the cost is worth stating. The grounds were
 * once chosen by what a band held — a card is a white cutout that needs the
 * desk to sit on, so a band of cards took the desk and a band of prose took the
 * white. Under the stripe a band can sit on the ground that rule would not have
 * given it, and then whatever it holds has to earn its edges some other way.
 *
 * WHO IS PAYING THAT TODAY: #free, whose tray is a --bg patch on a --bg band,
 * so its 2px ink frame is the only thing saying where the tray stops. That
 * frame is load-bearing rather than trim and must not be softened to a
 * hairline. #primitives no longer pays it at all — its readout used to be a
 * white sheet on a white band and is now a plate and a grid of desk-filled
 * cards with no container, so there is nothing left needing a frame to be
 * visible. #europe pays it deliberately and makes the payment the point: its
 * record is a white plate on the desk whose edge the reader draws.
 *
 * SO A NEW BAND INHERITS ITS GROUND FROM ITS POSITION, not from its contents,
 * and adding, removing or reordering a band means re-checking every one after
 * it. Both have now happened: taking out the bill moved the ground under
 * everything below it, and adding #europe moved all of it back. */
@layer page {

.claim--desk  { background: var(--bg); }
.claim--panel { background: var(--panel); }

/* ---- The claim head: ONE OBJECT, worn by every band -------------------------
 * A stat on the left, the statement and its sentence on the right. Every band
 * opens with one and with nothing above it: the 11px signpost that used to sit
 * over the figure is gone, because the stat already names the band and a label
 * above a number was the same fact twice at two sizes.
 *
 * IT IS DELIBERATELY NOT IN cloud/shared's components/. That is "chrome that
 * more than one surface wears", and this is content, on one surface, five times
 * over. It is built to a component's SHAPE anyway — one block, every property
 * that affects its box stated, nothing inherited from the band around it — so
 * the day a second surface wants one, promoting it is a move rather than a
 * rewrite.
 *
 * THE CONTRACT, for a band that adds itself later:
 *
 *   <header class="claim-head">
 *     <p class="claim-stat"><span class="claim-figure">15+</span>
 *                           <span class="claim-unit">blocks</span></p>
 *     <div class="claim-says"><h2>…</h2><p class="claim-lead">…</p></div>
 *   </header>
 */
.claim-head {
  display: grid;
  grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ---- The mirrored head ------------------------------------------------------
   The stat changes sides band to band — left, right, left, right — and the copy
   turns to face it, so the page reads as a column that shifts its weight rather
   than four headers stamped the same way.

   A MODIFIER IN THE MARKUP, not :nth-of-type. The grounds already alternate by
   position and are still declared per band for the same reason: a band that
   moves must be able to say what it now is, and a positional selector would
   silently re-sort every band after it. Two declarations per band is the price
   of being able to reorder them at all.

   The flip happens to land on the two desk bands, because both alternations
   start from the same band. That is two independent sequences agreeing, not one
   driving the other — change either and the other is unaffected.

   THE STAT STAYS FIRST IN THE DOM in both variants, placed by grid rather than
   reordered. So a screen reader always meets the figure before the statement it
   supports, whichever side the figure is drawn on, and the one-column layout
   below needs no special case to get the same sequence. */
.claim-head--right { grid-template-columns: minmax(0, 1fr) minmax(0, 20ch); }
.claim-head--right .claim-stat { grid-column: 2; grid-row: 1; }
.claim-head--right .claim-says { grid-column: 1; grid-row: 1; text-align: right; }
/* The lead is capped at a measure, so right-aligning its TEXT is not enough —
   the box itself has to move to the end of the track, or the copy sets flush
   against 62ch of nothing. */
.claim-head--right .claim-lead { margin-left: auto; }

@media (max-width: 900px) {
  .claim-head,
  .claim-head--right { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  /* One column: the stat sits above the copy in both variants, so there is no
     side to face and nothing to mirror. The alignment goes back to flush left,
     because a ragged left edge on three lines of a phone-width paragraph is
     only harder to read. */
  .claim-head--right .claim-stat,
  .claim-head--right .claim-says { grid-column: 1; grid-row: auto; }
  .claim-head--right .claim-says { text-align: left; }
  .claim-head--right .claim-lead { margin-left: 0; }
}

/* ---- The stat: a tag, not a number with a rule under it ---------------------
   A white plate carrying the figure, closed by a filled ink lip carrying the
   unit. That anatomy is not invented here: it is #price's receipt, whose bottom
   lip is filled ink and carries the label, and #primitives' sheet plate — the
   same object at the size of one figure.

   IT REPLACES A 4px RULE, and the rule was itself deliberate: the mark the hero
   puts under a headline word, spent in ink rather than triad because the triad
   names the three pillars and a price is not one. The box keeps that reasoning
   and states it with an edge instead of an underline, so the figure reads as an
   object standing on the band rather than as the first line of a column.

   The tag FILLS the 20ch track, so all five are the same width and the head has
   one left edge and one right edge down the page. Below 900px that track becomes
   the whole column, and the cap is what stops a tag from crossing a phone. */
.claim-stat {
  width: 100%;
  max-width: 20ch;
  margin: 0;
  box-sizing: border-box;
  background: var(--panel);
  border: 2px solid var(--ink);
  /* The lip is square to the box's own corners: without this its fill paints
     over them, and a 2px border with a filled strip behind it reads as a
     misprint rather than as a closed edge. */
  overflow: hidden;
}
.claim-figure {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--ink);
  text-align: center;
  padding: 0.9rem 0.75rem 1rem;
}
/* The unit, on the lip. The brand's structural signpost — 11px, 600, uppercase,
   0.08em, every value taken from .section-label in brand.css rather than
   approximated — reading on ink rather than on the band, so it takes --panel
   the way every other filled label on this page does. */
.claim-unit {
  display: block;
  background: var(--ink);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--panel);
  padding: 8px 10px;
}

/* The right-hand half. Nudged down by the difference between a heading's box and
   its first cap: with both halves flush at the top, the tag's edge is a hard
   line and the h2's is a few pixels of leading, so the two read as out of step
   when they are not. Measured against the h2's own clamp rather than guessed at
   one size — it is the same fraction at every width. */
.claim-says { padding-top: 0.3rem; }

.claim h2 { margin: 0 0 0.75rem; }
/* The sentence under the statement. Body weight on the band's own ground, capped
   at a comfortable measure. */
.claim-lead {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--ink);
  max-width: 62ch;
  margin: 0;
}
.claim-lead strong { font-weight: 600; }

/* ---- Prose, on either ground ----------------------------------------------- */
.claim p { max-width: 70ch; margin: 0 0 1rem; }
.claim p:last-child { margin-bottom: 0; }
/* Ink at 600, not orange. Orange text on either light ground measures about
   1.66:1 — the same reason the hero's headline moved its triad onto the rule
   underneath the word instead of colouring the word. */
.claim b { font-weight: 600; color: var(--ink); }
.claim em { font-style: italic; }
/* No `code` rule here on purpose. brand.css already styles inline code as a
   desk-coloured chip with an --ink-subtle ring, which is exactly right on both
   of these grounds — an override would only be a second opinion about it. */

/* Optional two-column body: prose on the left, the evidence on the right. */
.claim-cols {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  /* minmax(0, 1fr), NOT 1fr. `1fr` is shorthand for minmax(auto, 1fr) and that
     `auto` floor is the track's MIN-CONTENT — so a column holding a table whose
     min-content is 345px cannot shrink below it, and the grid overflows while
     every declaration still reads as "one full-width column". */
  .claim-cols { grid-template-columns: minmax(0, 1fr); }
}

} /* @layer page */