/* ---- Landing page: bands, masthead, plate, tiles, closing ------------------
   One rule governs the palette here: **ink is the machine's own voice.** The
   catalog plate, the verbatim artifacts and the second hero slide are dark;
   everything a person wrote is on paper. Nothing is dark for contrast alone.

   Four files, split by what they are for: this one is the page's structure,
   `landing-demo.css` is the two `:checked`-driven sections,
   `landing-motion.css` is every keyframe and every scene colour, and
   `landing-auray.css` is the plate's game and the Auray band.

   Tokens only, canonical names: see `tokens.css`. The type scale, the space
   scale, the radii, the one easing and the three durations are the guide's
   (style guide 5); the two band button modifiers below are size and ground
   only, on top of the four kinds in `buttons.css`. Loaded after `public.css`. */

/* ---- Masthead: a two-slide carousel ---------------------------------------
   Two radios and their labels are the whole mechanism. `hero-carousel.js` adds
   the timer; with no script the dots and the next control still switch. */

.masthead { border-bottom: 1px solid var(--line); }
.hero-radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}
/* Both slides occupy the SAME grid cell, so one can fade into the other
   instead of being swapped out from under the reader. Each carries its own
   ground (paper, then the dark band), which is what makes the background fade
   with the content rather than snapping.

   `visibility` is what keeps the faded-out slide off the keyboard's path. It
   waits the length of the fade on the way out, so the slide leaving is still
   drawn while it fades, and it is immediate on the way in, so the slide
   arriving is reachable at once.

   The shared `min-height` is the reason the track does not jump: with both
   slides in one cell the track is as tall as the taller of them, and centring
   each one's content stops the shorter from sitting high with a gap. */
.hero-track { display: grid; }
.hero-slide {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  min-height: 30rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
}
#hero-slide-1:checked ~ .hero-track .hero-slide--paper,
#hero-slide-2:checked ~ .hero-track .hero-slide--band {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-3) var(--ease);
}
/* The radios are the only focusable part of the carousel, and they are hidden
   above, so without this a keyboard reader sees nothing move when the slides
   change under them. The ring lands on the dot the focused radio drives and on
   the "next" control of the slide that radio shows; `--accent-on-band` is the
   accent that survives the dark slide's ground. */
#hero-slide-1:focus-visible ~ .hero-track .hero-slide--paper .hero-dot:first-child,
#hero-slide-1:focus-visible ~ .hero-track .hero-slide--paper .hero-next,
#hero-slide-2:focus-visible ~ .hero-track .hero-slide--band .hero-dot:nth-child(2),
#hero-slide-2:focus-visible ~ .hero-track .hero-slide--band .hero-next {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Not a second recipe: the radio these rings stand in for is hidden, so
   `base.css`'s rule has nothing to draw on and the ring is drawn here. */
#hero-slide-2:focus-visible ~ .hero-track .hero-slide--band .hero-dot:nth-child(2),
#hero-slide-2:focus-visible ~ .hero-track .hero-slide--band .hero-next {
  outline-color: var(--accent-on-band);
}

.hero-slide--paper { padding-block: var(--sp-48) var(--sp-20); }
.hero-slide--band {
  background: var(--band);
  color: var(--band-text);
  padding-block: var(--sp-32) var(--sp-20);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--sp-48);
  align-items: center;
}
.hero-grid--plate { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.masthead .hero-headline {
  font-size: var(--fs-display);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--sp-20);
  max-width: 16ch;
  text-wrap: balance;
}
/* The premise is set quiet and the consequence at full strength, so the
   headline reads as one sentence that lands on its second half. */
.headline-lead { display: block; color: var(--slate); }
.headline-main { display: block; }
.masthead .lede { margin-bottom: var(--sp-32); max-width: 36rem; }
.hero-slide--band .headline-lead,
.hero-slide--band .lede { color: var(--band-muted); }
.hero-slide--band .eyebrow { color: var(--accent-on-band); }
.hero-slide--band .hero-headline { max-width: 14ch; }

/* The two buttons on the dark slide: the band is dark in both themes, so
   neither can take the theme's own surface. */
.btn-on-band { background: var(--band-text); color: var(--band); }
.btn-on-band:hover, .btn-on-band:active { background: var(--accent-on-band); color: var(--band); }
.btn-ghost-band {
  background: transparent;
  color: var(--band-text);
  border-color: var(--band-line);
}
.btn-ghost-band:hover, .btn-ghost-band:active { background: var(--band-raised); color: var(--band-text); }

/* ---- The hero's scene frame and its controls ------------------------------ */

.scene-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-20) var(--sp-20) var(--sp-8);
}
.scene-caption {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-12);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--slate);
  margin: 0 0 var(--sp-12);
}
.hero-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-20);
  margin: var(--sp-20) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--slate);
}
.hero-dots { display: inline-flex; gap: var(--sp-8); align-items: center; }
.hero-dot {
  display: block;
  width: var(--sp-8);
  height: var(--sp-8);
  border-radius: var(--radius-pill);
  background: var(--neutral);
  cursor: pointer;
  transition: width var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
/* The current dot is a bar rather than a dot: derived from the dot so the
   two can never drift apart. */
.hero-dot.is-on { background: var(--accent); width: calc(var(--sp-8) * 2.75); }
.hero-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
}
/* The sprite's chevron, turned a quarter turn: one drawn shape for the whole
   product, never a second arrow typed or drawn here (style guide 5.8). */
.hero-next svg { width: 1.25rem; height: 1.25rem; transform: rotate(-90deg); }
.hero-slide--band .hero-nav { color: var(--band-muted); }
.hero-slide--band .hero-dot { background: var(--band-line); }
.hero-slide--band .hero-dot.is-on { background: var(--accent-on-band); }
.hero-slide--band .hero-next {
  border-color: var(--band-line);
  background: var(--band-raised);
  color: var(--accent-on-band);
}

/* ---- The hero's plate: the catalog, lighting up --------------------------- */

.hero-plate { display: grid; gap: var(--sp-4); }
.hero-plate__row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
}
.hero-plate__code {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--accent-on-band);
  padding-top: var(--sp-4);
}
.hero-plate__cells { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.hero-cell {
  font-family: var(--font-mono);
  /* The whole 79-item catalog has to fit one hero column, so its cells are the
     one place on the site below the scale's smallest size. Derived from it
     rather than typed, so the scale still governs. */
  font-size: calc(var(--fs-micro) * 0.8);
  line-height: var(--lh-body);
  color: var(--band-muted);
  border: 1px solid var(--band-line);
  border-radius: var(--radius-cell);
  padding: 0 var(--sp-4);
  white-space: nowrap;
}
.hero-cell--lit { background: var(--ok); color: var(--on-ok); border-color: var(--ok); }
.hero-counter {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-12) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--band-muted);
}

/* ---- The journey: four cards, each with its own scene --------------------- */

.steps {
  list-style: none;
  padding: 0;
  margin: var(--sp-32) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-20);
}
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-20);
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
/* Hover is a ground change, never a lift (style guide 5.4): the card used to
   rise and take a shadow, which is the one thing a panel never does. */
.step:hover { border-color: var(--line-strong); background: var(--surface-sunk); }
.scene { margin: calc(var(--sp-4) * -1) calc(var(--sp-8) * -1) var(--sp-12); }
.step-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-12);
}
.step-num { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--accent); font-weight: var(--fw-semibold); }
.step-id {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--accent-deep);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--sp-4) var(--sp-8);
}
.step h3 { margin: 0 0 var(--sp-8); }
.step p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }

/* ---- The catalog plate ---------------------------------------------------- */

.plate__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-20) var(--sp-32);
  align-items: end;
  margin-bottom: var(--sp-32);
}
.plate__head h2 { color: var(--band-text); }
.catalog-map { display: grid; }
.phase-row {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: var(--sp-8) var(--sp-20);
  padding: var(--sp-12) var(--sp-8);
  border-top: 1px solid var(--band-line);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-1) var(--ease);
}
.phase-row:hover { background: var(--band-raised); }
.phase-row:last-child { border-bottom: 1px solid var(--band-line); }
.phase-label { margin: 0; line-height: var(--lh-h3); }
.phase-code {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--accent-on-band);
  display: block;
}
.phase-name { display: block; font-size: var(--fs-small); color: var(--band-text); }
.phase-count {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--band-muted);
}
.id-run {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}
.id-cell {
  /* An identifier is never abbreviated to fit: the cell keeps its width and
     the run wraps instead. */
  flex: 0 0 auto;
  font-family: var(--font-mono);
  /* Same reason as `.hero-cell`: 79 identifiers on one plate. Derived from the
     scale's smallest size rather than typed. */
  font-size: calc(var(--fs-micro) * 0.925);
  line-height: var(--lh-small);
  color: var(--band-text);
  border: 1px solid var(--band-line);
  border-radius: var(--radius-cell);
  padding: var(--sp-4) var(--sp-4);
  white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.phase-row:hover .id-cell { border-color: var(--band-muted); }
/* Risk-gated enhancements are the items a product's risk determination
   switches on; they are the only cells that differ, because they are the only
   ones that may not apply. */
.id-cell--gated { color: var(--accent-on-band); border-color: var(--accent-on-band); }
.plate-legend {
  margin: var(--sp-20) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--band-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-20);
}
.plate-legend b { color: var(--band-text); font-weight: var(--fw-semibold); }

/* ---- How it holds up: four tiles ------------------------------------------ */

.claims {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-20);
  margin-top: var(--sp-32);
}
.claim {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.claim-icon {
  /* The mark's plate: 24 of icon (style guide 5.8) inside a panel radius. */
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.claim-icon svg { width: 1.5rem; height: 1.5rem; }
.claim h3 { margin: 0; }
.claim p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }

/* Literal product output. Never paraphrased, so it is set as what it is. */
.artifact {
  margin-top: auto;
  background: var(--band);
  color: var(--band-text);
  border-radius: var(--radius-md);
  padding: var(--sp-12);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-body);
  overflow-x: auto;
}
/* Machine output inside a tile, where a whole CSAF line has to fit a quarter
   of the row: derived from the smallest size, not typed. */
.claim .artifact { font-size: calc(var(--fs-micro) * 0.925); color: var(--band-text); }
.artifact b { color: var(--accent-on-band); font-weight: var(--fw-regular); }
.artifact-caption {
  display: block;
  color: var(--band-muted);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-4);
}

/* ---- Closing call --------------------------------------------------------- */

.closing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-20) var(--sp-48);
  align-items: center;
}
.closing h2 { margin-bottom: var(--sp-8); }
/* The measure belongs to the prose column only. `.action-row` is a <p> too,
   and 46ch of it is narrower than the three buttons: the last one dropped to
   a second line at 1440, in a band with room to spare beside it. */
.closing__grid > div p {
  margin: 0;
  color: var(--slate);
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.closing .action-row { margin: 0; }

/* ---- Narrow viewports -----------------------------------------------------
   The hero stacks first, then the four-up rows halve, then everything is one
   column. Each step is a different question, so each gets its own query. */

@media (max-width: 80rem) {
  .steps, .claims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 64rem) {
  .hero-grid,
  .hero-grid--plate,
  .plate__head,
  .closing__grid { grid-template-columns: minmax(0, 1fr); }
  .hero-slide--paper { padding-block: var(--sp-32) var(--sp-20); }
  .masthead .hero-headline, .hero-slide--band .hero-headline { max-width: 20ch; }
  .scene-frame { padding: var(--sp-12) var(--sp-12) var(--sp-4); }
}

@media (max-width: 48rem) {
  .steps, .claims { grid-template-columns: minmax(0, 1fr); }
  .phase-row { grid-template-columns: minmax(0, 1fr); }
  .masthead .action-row .btn { flex: 1 1 100%; }
  /* One column: the dark slide's plate is very tall here, and centring the
     paper slide inside a cell that tall would open a screenful of nothing
     above the headline. It starts at the top instead, and the floor a
     two-column hero needed is dropped. */
  .hero-slide { min-height: 0; align-content: start; }
  .closing__grid { align-items: start; }
}