/* Second Shift - site stylesheet, v2
 *
 * Structural rule, the one that fixes v1: the body carries the only
 * background colour. Every section is transparent. Separation comes from
 * bordered panels, gradient hairlines and edge fades, never from alternating
 * coloured bands.
 */

@import url("tokens.css?v=9acd41c146");

@view-transition { navigation: auto; }

/* ------------------------------------------------------------------ reset */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--g0);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--wt-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--wt-display);
  font-stretch: 105%;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-lg);
  color: var(--ink);
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; max-width: 100%; }
figure { margin: 0; }

a { color: inherit; text-decoration: none; }

.link {
  text-decoration: underline;
  text-decoration-color: var(--e4);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--d-1) var(--ease);
}
.link:hover { text-decoration-color: var(--signal); }

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

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

.skip {
  position: fixed; top: var(--s-2); left: var(--s-2); z-index: 90;
  transform: translateY(-400%);
  background: var(--signal); color: var(--signal-ink);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--tr-micro); text-transform: uppercase;
  border-radius: var(--radius);
  transition: transform var(--d-2) var(--ease);
}
.skip:focus { transform: translateY(0); }

/* ------------------------------------------------------------ the stage */
/* One fixed layer behind everything, outliving every section. This is what
 * makes the page one continuous surface instead of a stack of boxes. The
 * gradient underneath is always painted: it is the result when WebGL is
 * unavailable, the script fails, or reduced motion is set. */

.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 50% -12%, var(--stage-light), transparent 68%),
    linear-gradient(in oklab, var(--g-deep) 0%, var(--g0) 42%, var(--g0) 100%);
}

.stage canvas { display: block; width: 100%; height: 100%; }

/* grain, laid on top of the gradient. Static: animating a filter
 * re-rasterises the whole field every frame. */
.stage::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain, none);
  background-size: 128px 128px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.page { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- layout */

.shell {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.band { padding-block: var(--s-9); }
.band--tight { padding-block: var(--s-7); }
.band--tall { padding-block: var(--s-10); }

/* Gradient hairline. Separates sections without changing the ground. */
.rule {
  height: var(--rule); border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--e2) 18%, var(--e2) 82%, transparent);
}

/* --------------------------------------------------------------- type */

/* Mono is for metadata labels, system status, paths and identifiers.
 * Nothing else. Anthropic's entire mono footprint on its homepage is two
 * words. The restraint is the craft. */
.meta {
  font-family: var(--font-data);
  font-weight: var(--wt-data);
  font-size: var(--t-micro);
  font-stretch: 100%;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.fig { color: var(--signal); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: var(--tr-md);
  color: var(--ink);
  max-width: 46ch;
}

.prose { max-width: var(--measure); color: var(--ink-3); }
.prose + .prose { margin-top: var(--s-4); }
.prose strong { color: var(--ink-2); font-weight: 600; }

.h-sec {
  font-size: var(--t-xl);
  letter-spacing: var(--tr-xl);
  max-width: 20ch;
}

.h-sub {
  font-size: var(--t-md);
  letter-spacing: var(--tr-md);
  font-stretch: 100%;
}

.sec-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }

/* ------------------------------------------------------------ utilities */
/* These exist because a Content-Security-Policy of `style-src 'self'` blocks
 * every inline style attribute. The site shipped with 61 of them and every one
 * was silently dropped in production, which changed all type sizes and all
 * spacing at once. Anything positional or dimensional now lives here.
 * check_slop.py gate G25 fails the build if an inline style reappears. */

.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }

/* panel widths, named rather than numbered so the intent survives */
.panel--sm { max-width: 42rem; }
.panel--md { max-width: 46rem; }
.panel--lg { max-width: 52rem; }

.prose--wide { max-width: 62rem; }
.lead--wide { max-width: 56ch; }

/* the page-title pattern: about, contact, privacy, thanks, 404 */
.h-page {
  font-size: var(--t-2xl);
  letter-spacing: var(--tr-display);
  max-width: 18ch;
}

/* one page opens at display scale with the type as the whole composition */
.h-mega {
  font-size: var(--t-mega);
  line-height: 0.90;
  letter-spacing: -0.048em;
  font-weight: var(--wt-display-hi);
  font-stretch: 108%;
  max-width: 13ch;
}

/* the home page statement: one sentence that changes size mid-way, sharing a
 * baseline grid rather than being a headline plus a subtitle */
.statement { max-width: 22ch; }

.statement__lead {
  display: block;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: var(--wt-display-hi);
  font-stretch: 112%;
}

.statement__tail {
  display: block;
  margin-top: var(--s-4);
  font-size: var(--t-md);
  line-height: 1.35;
  letter-spacing: var(--tr-md);
  font-weight: 400;
  font-stretch: 100%;
  color: var(--ink-3);
  max-width: 34ch;
}

.panel__body--divided { border-top: var(--rule) solid var(--e1); }

.diagram { width: 100%; height: auto; }

/* the short dense strip between tall sections */
.strip { display: grid; gap: var(--s-4); max-width: 62rem; }

/* a fieldset that should not look like one */
.fieldset-bare { border: 0; padding: 0; margin: 0; }
.fieldset-bare > legend { padding: 0; }

/* --------------------------------------------------------------- panel */
/* The core depth component. Ground, then surface, then an edge at the next
 * rung, then the bevel, then a multi-layer shadow. */

.panel {
  position: relative;
  background: var(--g1);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--bevel),
    inset 0 0 0 1px var(--e1),
    0 0 0 1px var(--ring-dark),
    var(--shadow-mid);
}

.panel--flat {
  background: var(--g1-t);
  box-shadow: inset 0 0 0 1px var(--e1), var(--shadow-low);
}

.panel--live {
  background: var(--signal-wash);
  box-shadow: var(--bevel), inset 0 0 0 1px var(--signal-edge), var(--shadow-low);
}

.panel__head {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  justify-content: space-between; align-items: baseline;
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--rule) solid var(--e1);
}

.panel__body { padding: var(--s-4); }

/* Dot grid, masked so it never reaches a hard edge.
 * On a pseudo-element, NOT on the container. Masking the container also masks
 * its contents, which faded the diagram's own outer boxes to near-invisible. */
.grid-tex { position: relative; isolation: isolate; }

.grid-tex::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--e3) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 35%, transparent 78%);
}

/* ------------------------------------------------------------- masthead */
/* Grid-aligned to the page columns, and short. Not
 * wordmark-left / links-centre / CTA-right. */

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--veil);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: var(--rule) solid var(--e1);
}

.masthead__in {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: var(--s-5);
  height: var(--nav-h);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--wt-display-hi);
  font-stretch: 112%;
  font-size: 0.9375rem;
  letter-spacing: -0.028em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark b { font-weight: inherit; color: var(--signal); }

.nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); align-items: center; }

.nav a {
  font-size: var(--t-small);
  letter-spacing: var(--tr-small);
  color: var(--ink-3);
  padding-block: var(--s-1);
  border-bottom: 1px solid transparent;
  transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--signal); }

/* -------------------------------------------------------------- controls */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-data);
  font-weight: 600;
  font-size: var(--t-micro);
  font-stretch: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: var(--s-3) var(--s-5);
  border: 0;
  border-radius: var(--radius);
  background: var(--signal);
  color: var(--signal-ink);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 0 var(--btn-lift),
    inset 0 -1px 1px 0 var(--btn-shade),
    var(--shadow-low);
  transition: filter var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--quiet {
  background: var(--g2-t);
  color: var(--ink);
  box-shadow: var(--bevel), inset 0 0 0 1px var(--e2);
}
.btn--quiet:hover { filter: none; background: var(--g3-t); }

/* magnetic inner span. The interactive box never moves, so the hit region
 * and focus ring stay where they appear. */
.btn > span { display: inline-block; will-change: auto; }

/* ------------------------------------------------------------ status bar */
/* The live element. Reads the visitor's own clock, so it is true, different
 * for every visitor, and impossible to fabricate. */

.status {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-3) var(--s-4);
}

.status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-wash);
  flex: none;
}

.status__val { color: var(--ink-2); }

/* --------------------------------------------------------- status board */
/* The hero on several pages is a definition list, not a headline stack. */

.board { display: grid; }

.board__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border-top: var(--rule) solid var(--e1);
}
.board__row:first-child { border-top: 0; }

.board__row dt { color: var(--ink-4); }
.board__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 500;
  font-size: var(--t-body);
  color: var(--ink);
  letter-spacing: var(--tr-small);
}

/* ------------------------------------------------------------ the trace */
/* A recorded run of one of our own agents, replayed. The step that goes
 * wrong and gets corrected is deliberate: it is what makes this evidence
 * rather than marketing. */

.trace { display: grid; }

.trace__step {
  display: grid;
  grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-top: var(--rule) solid var(--e1);
  align-items: start;
}
.trace__step:first-child { border-top: 0; }

.trace__t {
  font-family: var(--font-data);
  font-size: var(--t-micro);
  font-stretch: 100%;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15em;
}

.trace__kind {
  display: inline-block;
  font-family: var(--font-data);
  font-size: var(--t-micro);
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-1);
}

.trace__step[data-kind="correction"] .trace__kind { color: var(--signal); }
.trace__step[data-kind="correction"] { background: var(--signal-wash); }

.trace__text { color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.trace__text code {
  font-family: var(--font-data);
  font-size: 0.92em;
  font-stretch: 100%;
  color: var(--ink);
  background: var(--g3-t);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}

/* ---------------------------------------------------------- the offers */

.offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-top: var(--rule) solid var(--e1);
}

.offer__rail { display: grid; gap: var(--s-1); align-content: start; }
.offer__from { color: var(--signal); font-variant-numeric: tabular-nums; }
.offer__body { display: grid; gap: var(--s-3); max-width: var(--measure); }

.ticks { display: grid; gap: var(--s-2); }
.ticks li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: 1.5;
}
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: var(--s-3); height: 1px;
  background: var(--signal);
  opacity: 0.75;
}

/* --------------------------------------------------------------- stages */

.stage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-top: var(--rule) solid var(--e1);
}
.stage-row__when { color: var(--signal); }
.stage-row__body { display: grid; gap: var(--s-3); max-width: var(--measure); }

/* --------------------------------------------------------------- limits */

.limit {
  display: grid; gap: var(--s-2);
  padding-left: var(--s-5);
  border-left: 2px solid var(--signal-edge);
  max-width: var(--measure);
}
.limits { display: grid; gap: var(--s-6); }

/* ------------------------------------------------------------------ faq */

.faq { display: grid; }

.faq details {
  border-top: var(--rule) solid var(--e1);
  padding-block: var(--s-4);
}
.faq details:last-of-type { border-bottom: var(--rule) solid var(--e1); }

.faq summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--s-4);
  align-items: baseline;
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: var(--tr-small);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-4); font-family: var(--font-data); }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { margin-bottom: var(--s-3); }

/* ----------------------------------------------------------------- form */

.form { display: grid; gap: var(--s-5); max-width: 44rem; }
.field { display: grid; gap: var(--s-2); }

/* Two short fields share a row above 34rem so the form stays compact enough
 * to read as one object rather than a column of boxes. */
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 34rem) {
  .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.form__send { display: grid; gap: var(--s-3); justify-items: start; }
.field > label { color: var(--ink-3); }

.field input, .field textarea {
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--g-deep);
  border: 0;
  border-radius: var(--radius);
  padding: var(--s-3);
  width: 100%;
  min-height: 2.75rem;
  box-shadow: inset 0 0 0 1px var(--e2);
  transition: box-shadow var(--d-1) var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.field input:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px var(--e3); }
.field input:focus, .field textarea:focus { box-shadow: inset 0 0 0 1px var(--signal); }
.field__help { font-size: var(--t-micro); color: var(--ink-4); min-height: 1lh; }

/* Invalid fields are marked by more than colour: the ring thickens and the
 * help text changes weight, so the state survives a colour-blind reader and
 * a monochrome display. */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--signal);
}

[data-form-status] { transition: color var(--d-1) var(--ease); }
[data-form-status][data-state="error"] { color: var(--signal); font-weight: 600; }
[data-form-status][data-state="pending"] { color: var(--ink-2); }
[data-form-status][data-state="ok"] { color: var(--ink); font-weight: 600; }

.seed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  align-items: center;
}
@media (min-width: 34rem) {
  .seed { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
}

.choices { display: grid; gap: var(--s-2); }
.choice {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--s-3); align-items: baseline;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  background: var(--g1-t);
  box-shadow: inset 0 0 0 1px var(--e1);
  cursor: pointer;
  font-size: var(--t-small);
  transition: box-shadow var(--d-1) var(--ease);
}
.choice:hover { box-shadow: inset 0 0 0 1px var(--e3); }
.choice:has(input:checked) { box-shadow: inset 0 0 0 1px var(--signal-edge); background: var(--signal-wash); }
.choice input { width: auto; min-height: auto; accent-color: var(--signal); }

/* --------------------------------------------------------------- footer */

.footer { padding-block: var(--s-9) var(--s-6); }

.footer__stmt {
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-stretch: 108%;
  font-size: var(--t-2xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--ink);
  max-width: 16ch;
  margin-bottom: var(--s-6);
}

.footer__row {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  justify-content: space-between; align-items: baseline;
  padding-top: var(--s-5);
  border-top: var(--rule) solid var(--e1);
}

/* -------------------------------------------------------------- diagram */

/* Wires are declared before the rects in the markup, so the boxes paint over
 * them and a wire reads as passing behind a node. */
.wire { stroke: var(--e4); stroke-width: 1; fill: none; }
.wire-live { stroke: var(--signal); stroke-width: 1.5; fill: none; stroke-linecap: round; }

.node-box { fill: var(--g2); stroke: var(--e4); stroke-width: 1; }
.node-box--alt { stroke: var(--signal-edge); }

.node-label {
  fill: var(--ink); font-family: var(--font-data); font-weight: 600;
  font-size: 10px; letter-spacing: 0.06em;
}
.node-label--alt { fill: var(--signal); }
.node-sub { fill: var(--ink-3); font-family: var(--font-data); font-size: 8.5px; }

/* ------------------------------------------------------------- reveals */
/* Base state is the FINAL state. The hidden start exists only inside
 * @supports, where no script is involved and the browser guarantees the
 * animation completes. There is no code path that leaves content at
 * opacity 0. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    .rise-2 { animation-range: entry 8% cover 30%; }
    .rise-3 { animation-range: entry 12% cover 34%; }

    .draw path[data-draw] {
      stroke-dashoffset: 1;
      animation: draw-in linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 55%;
    }
  }
}

/* Transform only, and this is deliberate. `fill-mode: both` holds the `from`
 * frame whenever the timeline is applied but not progressing: an off-screen
 * frame, a print render, a context where view() never advances. If that frame
 * contained `opacity: 0` the copy would be invisible there. A stalled
 * translate is merely fourteen pixels low, which is a degraded state worth
 * having. This rule was learned once already and reintroduced by accident. */
@keyframes rise-in {
  from { transform: translateY(14px); }
}

@media print {
  .rise, .rise-2, .rise-3 { animation: none !important; transform: none !important; }
  .stage, .progress { display: none !important; }
}

@keyframes draw-in {
  to { stroke-dashoffset: 0; }
}

path[data-draw] { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* the packet travelling the wire */
.flow {
  stroke-dasharray: 6 84;
  stroke-dashoffset: 0;
}
.flow--exception { stroke-dasharray: 4 56; opacity: 0.85; }

@media (prefers-reduced-motion: no-preference) {
  .flow { animation: flow 3.4s linear infinite; }
  .flow--exception { animation: flow-exception 5.6s linear infinite; }
}
@keyframes flow { to { stroke-dashoffset: -90; } }
@keyframes flow-exception { to { stroke-dashoffset: -60; } }

/* scroll progress, zero JS */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 50;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--signal-edge), var(--signal));
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: grow linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes grow { to { transform: scaleX(1); } }

/* ----------------------------------------------------------- responsive */

/* Below 40rem the masthead cannot hold wordmark, nav and CTA on one row
 * without clipping the CTA label, so it wraps to two rows. */
@media (max-width: 39.999rem) {
  .masthead__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    height: auto;
    padding-block: var(--s-3);
    gap: var(--s-3) var(--s-4);
  }
  /* wordmark and CTA share row one; the nav takes row two on its own.
     Without explicit placement the CTA lands in a 1fr track and stretches
     to the full page width, which reads as a banner rather than a button. */
  .masthead__in > .wordmark { grid-column: 1; grid-row: 1; }
  .masthead__in > .btn { grid-column: 2; grid-row: 1; justify-self: end; }
  .masthead__in > .nav { grid-column: 1 / -1; grid-row: 2; }
}

/* At 320px the wordmark and the CTA cannot share a row at full size, and the
 * wordmark is nowrap so it clipped rather than wrapping. Tightening the
 * button buys back the ~50px needed. */
@media (max-width: 24rem) {
  .shell { padding-inline: var(--s-4); }
  .masthead__in > .btn { padding-inline: var(--s-3); letter-spacing: 0.04em; }
}

@media (min-width: 40rem) {
  .board__row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; }
}

@media (min-width: 48rem) {
  .shell { padding-inline: var(--s-6); }
  .offer { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--s-6); }
  .stage-row { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--s-6); }
  .h-sec { font-size: var(--t-2xl); }
}

@media (min-width: 64rem) {
  .shell { padding-inline: var(--s-7); }
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}