/* ===========================================================================
   Roosterflyt — design system
   Implements design.md. Dark = "here's what we found". Light = "here's how we work".
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------- */
:root {
  /* Core palette (design.md) */
  --predawn:      #12172A;
  --fog:          #EEF0EC;
  --amber:        #E8A23D;
  --leak:         #C4472F;
  --ink:          #1B2033;
  --slate:        #5B6178;

  /* Contrast-safe surface variants.
     Leak Red and Slate both fail WCAG AA at small sizes on one of the two
     backgrounds, so each has a surface-specific value. Verified in
     docs/contrast.md — do not substitute the base value on the wrong surface. */
  --leak-on-dark:   #E8705A;   /* 5.96:1 on Predawn */
  --leak-on-light:  #A8371F;   /* 5.67:1 on Fog */
  --slate-on-dark:  #9AA2BC;   /* 7.15:1 on Predawn */
  --slate-on-light: #5B6178;   /* 5.34:1 on Fog */

  /* Elevated surfaces */
  --predawn-lift: #191F36;
  --fog-lift:     #E5E8E3;

  /* Hairlines. 1px, no shadow — the whole system is drawn, not floated. */
  --hair-on-dark:  rgba(238, 240, 236, 0.16);
  --hair-on-light: rgba(27, 32, 51, 0.16);
  --hair-strong-dark:  rgba(238, 240, 236, 0.30);
  --hair-strong-light: rgba(27, 32, 51, 0.28);

  /* Interactive boundaries (ghost buttons, inputs). Decorative hairlines sit
     around 1.5:1, which fails WCAG 1.4.11 for a control's edge — these are the
     values that clear 3:1 against each surface. Verified in docs/contrast.md. */
  --edge-on-dark:  rgba(238, 240, 236, 0.45);   /* 4.14:1 on Predawn */
  --edge-on-light: rgba(27, 32, 51, 0.55);      /* 3.57:1 on Fog */

  /* Type */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-display-xl: clamp(2.5rem, 1.35rem + 4.6vw, 4rem);       /* → 64px */
  --t-display-l:  clamp(1.875rem, 1.35rem + 2.1vw, 2.5rem);   /* → 40px */
  --t-display-m:  clamp(1.375rem, 1.13rem + 0.98vw, 1.75rem); /* → 28px */
  --t-body-l:     clamp(1.0625rem, 1.01rem + 0.23vw, 1.1875rem); /* → 19px */
  --t-body:       1.0625rem;                                   /*   17px */
  --t-caption:    0.875rem;                                    /*   14px */

  /* Rhythm */
  --shell:       1140px;
  --gutter:      clamp(1.25rem, 0.6rem + 2.6vw, 5rem);         /* 20 → 80px */
  --marginal:    104px;   /* mono metadata column on desktop */
  --sec-y:       clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --radius:      3px;     /* design.md: never above 4px */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------------------
   2. Reset
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--fog);
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--amber); color: var(--predawn); }

/* ---------------------------------------------------------------------------
   3. Layout primitives
   --------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Left-aligned throughout. Nothing is centred — this reads as a document. */
.measure     { max-width: 62ch; }   /* ~72 chars at body size incl. spacing */
.measure-sm  { max-width: 48ch; }

.band { padding-block: var(--sec-y); }
.band--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

/* Dark bands: claims. Light bands: teaching. */
.band--dark {
  background: var(--predawn);
  color: var(--fog);
  position: relative;
  isolation: isolate;
}

/* Instrument-panel plotting grid. Drawn, not an image. */
.band--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right,  rgba(238,240,236,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(238,240,236,0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  pointer-events: none;
}

.band--light { background: var(--fog); color: var(--ink); }
.band--lift  { background: var(--fog-lift); color: var(--ink); position: relative; isolation: isolate; }

/* The same plotting grid as the dark bands, inverted. Separates Fog from
   Fog-lift by texture rather than by value — no contrast ratio moves. */
.band--lift::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right,  rgba(27, 32, 51, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 32, 51, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  pointer-events: none;
}

.band--dark  { --c-hair: var(--hair-on-dark);  --c-hair-strong: var(--hair-strong-dark);
               --c-edge: var(--edge-on-dark);
               --c-muted: var(--slate-on-dark); --c-leak: var(--leak-on-dark); --c-fg: var(--fog);
               --c-focus: var(--amber); }
.band--light,
.band--lift  { --c-hair: var(--hair-on-light); --c-hair-strong: var(--hair-strong-light);
               --c-edge: var(--edge-on-light);
               --c-muted: var(--slate-on-light); --c-leak: var(--leak-on-light); --c-fg: var(--ink);
               --c-focus: var(--ink); }

/* Ruled top edge — every section starts on a line, like a report */
.band--ruled { border-top: 1px solid var(--c-hair); }

/* The document grid: mono metadata in the margin, content in the measure. */
.doc {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .doc { grid-template-columns: var(--marginal) minmax(0, 1fr); gap: 0 3rem; }
  .doc > .doc-aside { grid-column: 1; }
  .doc > .doc-main  { grid-column: 2; }
}

.doc-aside {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  line-height: 1.5;
  padding-top: 0.55rem;
}
.doc-aside .rule {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--amber);
  margin-bottom: 0.7rem;
}

/* ---------------------------------------------------------------------------
   4. Type
   --------------------------------------------------------------------------- */
.display-xl, .display-l, .display-m, .display-s {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.display-xl { font-size: var(--t-display-xl); line-height: 1.05; letter-spacing: -0.032em; }
.display-l  { font-size: var(--t-display-l);  line-height: 1.1; }
.display-m  { font-size: var(--t-display-m);  line-height: 1.2; letter-spacing: -0.018em; }
.display-s  { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.012em; }

.lede { font-size: var(--t-body-l); line-height: 1.5; color: var(--c-fg); }
.prose p { margin-block: 0 1.15em; }
.prose p:last-child { margin-bottom: 0; }
.muted { color: var(--c-muted); }

/* Section label: caption size, sentence case, slate — never tracked-out caps. */
.sec-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--c-muted);
  margin-bottom: 1.4rem;
}
.sec-label::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--amber);
  flex: none;
}

/* Mono is reserved for real measured values. */
.figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.caption { font-size: var(--t-caption); line-height: 1.4; color: var(--c-muted); }

a { color: inherit; }

.link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 1px;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.link:hover { background: var(--amber); color: var(--predawn); }

/* ---------------------------------------------------------------------------
   5. Buttons — one shape, two sizes, no arrow glyph
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  padding: 0.95rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn--lg { font-size: 1.0625rem; padding: 1.15rem 1.9rem; }

.btn--primary { background: var(--amber); color: var(--predawn); }
.btn--primary:hover { background: #F2B054; transform: translateY(-1px); }

.band--light .btn--primary,
.band--lift  .btn--primary { background: var(--ink); color: var(--fog); }
.band--light .btn--primary:hover,
.band--lift  .btn--primary:hover { background: #2A3150; }

.btn--ghost { background: transparent; color: var(--c-fg); border-color: var(--c-edge); }
.btn--ghost:hover { border-color: var(--amber); color: var(--amber); }
.band--light .btn--ghost:hover, .band--lift .btn--ghost:hover { color: var(--ink); background: rgba(232,162,61,0.16); border-color: var(--amber); }

/* Styled focus, never the browser default */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus, var(--amber));
  outline-offset: 3px;
  border-radius: 2px;
}
/* On Fog, Amber alone is 1.89:1 against the background — invisible as a ring.
   Ink carries the contrast; Amber stays present as the halo outside it. */
.band--light :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.band--lift  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: 0 0 0 7px rgba(232, 162, 61, 0.45);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--amber);
  color: var(--predawn);
  padding: 0.75rem 1.1rem;
  font-weight: 500;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------------------------------------------------------------------------
   6. Nav
   --------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--predawn);
  color: var(--fog);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--hair-on-dark);
  background: rgba(18, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}
/* The logotype is one outlined SVG: the two o's of "Roosterflyt" are the mark,
   a pair of interlocked rings. Letters take currentColor. The rings carry their
   own gradients, so there are two versions: bright amber for Predawn, and a
   deeper amber for Fog, where the bright one measures under 2:1 and would wash out. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--fog);
}
.brand__logo {
  height: 28px;
  width: auto;
  display: block;
  fill: currentColor;
  overflow: visible;
  /* Optical centring. The box is tight to the ink: the fl ascender (714 units
     above the baseline) down to the y descender (180 below), 894 tall. Centring
     that box centres the descender too, which leaves the word sitting high.
     The eye centres on the word's body, cap top (660) to baseline, whose
     midpoint is 330 above the baseline: (714.3 - 330) / 894.1 = 0.4298 of the
     way down the box against a box centre of 0.5, so 7.0% of the logo's height.
     A percentage, not pixels, so it holds at every size. */
  transform: translateY(7%);
}
.brand__m--light { display: none; }
.band--light .brand, .band--lift .brand { color: var(--ink); }
.band--light .brand .brand__m--dark, .band--lift .brand .brand__m--dark { display: none; }
.band--light .brand .brand__m--light, .band--lift .brand .brand__m--light { display: inline; }
.brand--footer .brand__logo { height: 22px; }

/* The mark on its own, wherever a square lockup is needed. */
.rf-mark { height: 1em; width: auto; display: inline-block; }
.nav__links { display: flex; align-items: center; gap: 1.9rem; }
.nav__link {
  position: relative;
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--slate-on-dark);
  padding-block: 0.35rem;
  transition: color 0.18s var(--ease);
}
.nav__link:hover { color: var(--fog); }
.nav__link[aria-current='page'] { color: var(--fog); }
.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--amber);
}
.nav__cta { margin-left: 0.4rem; }

.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--hair-on-dark);
  border-radius: var(--radius);
  color: var(--fog);
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; align-items: center; gap: 0.5rem; }
  .nav__links {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--predawn);
    border-top: 1px solid var(--hair-on-dark);
    border-bottom: 1px solid var(--hair-on-dark);
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .nav__links.is-open { display: flex; }
  .nav__link { padding-block: 0.85rem; border-bottom: 1px solid var(--hair-on-dark); font-size: 1rem; }
  .nav__link[aria-current='page']::after { display: none; }
  .nav__link[aria-current='page'] { color: var(--amber); }
  .nav__cta { margin: 1rem 0 0; }
}

/* ---------------------------------------------------------------------------
   7. Hero
   --------------------------------------------------------------------------- */
.hero { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem) clamp(4rem, 2.5rem + 6vw, 6.5rem); }
.hero__head { max-width: 21ch; }
.hero__sub { margin-top: 1.6rem; max-width: 56ch; color: var(--slate-on-dark); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 2.4rem;
}
.hero__note { font-size: var(--t-caption); color: var(--slate-on-dark); }

/* The readout sits below the CTA, as a panel, at document width — not beside
   the headline. Wide enough for the dotted leaders to do their work. */
.hero__readout { margin-top: clamp(2.75rem, 2rem + 3vw, 4rem); max-width: 47rem; }

/* ---------------------------------------------------------------------------
   8. Readout module — the signature object
   --------------------------------------------------------------------------- */
.readout {
  border: 1px solid var(--c-hair);
  border-radius: var(--radius);
  background: rgba(238, 240, 236, 0.022);
  overflow: hidden;
}
.band--light .readout, .band--lift .readout { background: rgba(27, 32, 51, 0.022); }

.readout__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.35rem;
  border-bottom: 1px solid var(--c-hair);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}
.readout__status { display: inline-flex; align-items: center; gap: 0.45rem; }
.readout__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
  box-shadow: 0 0 0 0 rgba(232,162,61,0.55);
  animation: rf-pulse 2.6s var(--ease) infinite;
}
@keyframes rf-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,162,61,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(232,162,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,162,61,0); }
}

.readout__body { padding: 0.5rem 1.35rem 1rem; }

/* Dotted-leader rows: an invoice/index device, not a SaaS list. */
.ro-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.95rem;
  border-bottom: 1px dashed var(--c-hair);
}
.ro-row:last-child { border-bottom: 0; }
.ro-row__i {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--c-muted);
  flex: none;
  width: 1.8em;
}
.ro-row__k {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  flex: none;
}
.ro-row__lead {
  flex: 1 1 auto;
  min-width: 2rem;
  border-bottom: 1px dotted var(--c-edge);
  transform: translateY(-0.3em);
}
.ro-row__v {
  font-size: 0.975rem;
  color: var(--c-muted);
  text-align: right;
  flex: none;
  max-width: 55%;
}
.ro-row__v--figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-leak);
  font-size: 1rem;
}

.readout__foot {
  border-top: 1px solid var(--c-hair);
  padding: 1.1rem 1.35rem;
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--c-fg);
}
.readout__foot strong { color: var(--amber); font-weight: 500; }
.band--light .readout__foot strong,
.band--lift  .readout__foot strong { color: var(--ink); font-weight: 600; }

@media (max-width: 560px) {
  .ro-row { flex-wrap: wrap; gap: 0.35rem 0.6rem; }
  .ro-row__lead { display: none; }
  .ro-row__v { text-align: left; max-width: 100%; flex: 1 0 100%; padding-left: 2.55em; }
}

/* Orchestrated reveal — the one moment of motion on the site. */
.js .readout[data-reveal] .ro-row,
.js .readout[data-reveal] .readout__foot {
  opacity: 0;
  transform: translateY(5px);
}
.js .readout[data-reveal].is-revealed .ro-row,
.js .readout[data-reveal].is-revealed .readout__foot {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}

/* ---------------------------------------------------------------------------
   9. Service ladder — numbering is earned here, it is a real sequence
   --------------------------------------------------------------------------- */
.ladder { border-top: 1px solid var(--c-hair); }

.rung {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--c-hair);
  position: relative;
  text-decoration: none;
  color: inherit;
}
@media (min-width: 820px) {
  .rung {
    grid-template-columns: 2.6rem minmax(0, 13.5rem) minmax(0, 1fr) 13.5rem;
    align-items: baseline;
    gap: 0 1.75rem;
  }
}
.rung__i {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.rung__name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.018em;
}
.rung__out { color: var(--c-muted); font-size: 0.9875rem; line-height: 1.5; text-wrap: pretty; }
.rung__meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--c-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 820px) { .rung__meta { text-align: right; } }
/* The tick: a hairline that runs the full rung, amber on the entry point. */
.rung::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 1px;
  background: var(--amber);
  transition: width 0.4s var(--ease);
}
a.rung:hover::before { width: 100%; }
.rung--primary::before { width: 2.6rem; }
.rung--primary .rung__i { color: var(--amber); }
.band--light .rung--primary .rung__i,
.band--lift  .rung--primary .rung__i { color: var(--ink); font-weight: 500; }
/* The tick is thickened on light instead, since colour can't carry it there. */
.band--light .rung--primary::before,
.band--lift  .rung--primary::before { height: 2px; top: -1px; }
a.rung:hover .rung__name { color: var(--amber); }
.band--light a.rung:hover .rung__name, .band--lift a.rung:hover .rung__name { color: var(--leak-on-light); }

@media (max-width: 819px) {
  .rung__meta { order: 4; padding-top: 0.35rem; }
  .rung__i { position: absolute; top: 1.6rem; left: 0; }
  .rung__name, .rung__out, .rung__meta { padding-left: 2.6rem; }
}

/* Expanded rung, /method */
.rung-full { padding-block: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem); border-top: 1px solid var(--c-hair); }
.rung-full:first-of-type { border-top: 0; }
.rung-full__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.2rem; margin-bottom: 0.4rem; }
.rung-full__price {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.band--light .rung-full__price, .band--lift .rung-full__price { color: var(--ink); }
.rung-full__dur { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-muted); }

.spec { display: grid; gap: 0.1rem 2rem; margin-top: 1.75rem; }
@media (min-width: 760px) { .spec { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.spec__k {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--c-muted);
  padding-top: 0.3rem;
}
.spec__v { padding-bottom: 1.15rem; max-width: 62ch; }
.spec__v:last-child { padding-bottom: 0; }
.spec__v--not { color: var(--c-muted); }

/* ---------------------------------------------------------------------------
   10. Three-beat reveal — case studies / teardowns
   --------------------------------------------------------------------------- */
.beats { display: grid; gap: 0; margin-top: 2rem; }
@media (min-width: 900px) {
  .beats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; }
}
.beat { padding-top: 1.4rem; border-top: 1px solid var(--c-hair); }
.beat + .beat { margin-top: 1.9rem; }
@media (min-width: 900px) { .beat + .beat { margin-top: 0; } }

.beat__k {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--c-muted);
  margin-bottom: 0.9rem;
}
.beat__k::before { content: ''; width: 5px; height: 5px; background: var(--c-hair-strong); flex: none; }
.beat--leak   .beat__k::before { background: var(--c-leak); }
.beat--result .beat__k::before { background: var(--amber); }
.beat__v { font-size: 1.0625rem; line-height: 1.55; }
.beat__v--figure {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.band--light .beat__v--figure, .band--lift .beat__v--figure { color: var(--ink); }

.case { border-top: 1px solid var(--c-hair); }
.case__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  border: 1px solid var(--c-hair);
  border-radius: var(--radius);
  padding: 0.25rem 0.55rem;
}

/* ---------------------------------------------------------------------------
   11. Teardown cards (/work, honest variant)
   --------------------------------------------------------------------------- */
.teardown { padding-block: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); border-top: 1px solid var(--c-hair); }
.teardown__i { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-muted); }
.teardown__grid { display: grid; gap: 1.5rem 2.5rem; margin-top: 1.6rem; }
@media (min-width: 880px) { .teardown__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.teardown__block { border-left: 1px solid var(--c-hair); padding-left: 1.25rem; }
.teardown__block h3 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--c-muted);
  margin-bottom: 0.6rem;
}
.teardown__block p { font-size: 1rem; line-height: 1.55; }
.teardown__block--leak { border-left-color: var(--c-leak); }

/* A stated limit, not a disclaimer buried in the footer. */
.notice {
  border: 1px solid var(--c-hair);
  border-left: 2px solid var(--amber);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  max-width: 68ch;
}
.notice p { font-size: 1rem; line-height: 1.55; }
.notice p + p { margin-top: 0.7rem; }

/* ---------------------------------------------------------------------------
   12. Capability list (/team)
   --------------------------------------------------------------------------- */
.caps { display: grid; gap: 0; border-top: 1px solid var(--c-hair); }
@media (min-width: 760px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
.cap { padding-block: 1.5rem; border-bottom: 1px solid var(--c-hair); }
.cap__k { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.014em; margin-bottom: 0.4rem; }
.cap__v { font-size: 0.9875rem; line-height: 1.55; color: var(--c-muted); }

.facts { border-top: 1px solid var(--c-hair); margin-top: 2.5rem; }
.fact {
  display: grid;
  gap: 0.2rem 2rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--c-hair);
}
@media (min-width: 760px) { .fact { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; } }
.fact__k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--c-muted); }
.fact__v { font-size: 1rem; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   13. Form (/book)
   --------------------------------------------------------------------------- */
.form { max-width: 34rem; }
.field { margin-bottom: 1.5rem; }
.field__label { display: block; font-size: 0.9375rem; font-weight: 500; margin-bottom: 0.45rem; }
.field__hint { display: block; font-size: var(--t-caption); color: var(--c-muted); margin-bottom: 0.55rem; font-weight: 400; }

.input, .select, .textarea {
  width: 100%;
  background: transparent;
  color: var(--c-fg);
  border: 1px solid var(--c-edge);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate-on-dark); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--amber); background: rgba(232,162,61,0.05); }
/* Amber is 1.89:1 on Fog — invisible as a control edge. The Ink focus ring
   carries the state on light surfaces; the border deepens rather than fades. */
.band--light :is(.input, .select, .textarea):focus,
.band--lift  :is(.input, .select, .textarea):focus { border-color: var(--ink); background: rgba(232,162,61,0.10); }
.textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.select option { background: var(--predawn); color: var(--fog); }
.band--light .select option, .band--lift .select option { background: var(--fog); color: var(--ink); }

.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--c-leak); }
.field__error { display: block; font-size: var(--t-caption); color: var(--c-leak); margin-top: 0.4rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { margin-top: 1.9rem; }
.form__note { margin-top: 1.25rem; max-width: 46ch; font-size: 0.9375rem; line-height: 1.5; color: var(--c-muted); }

.alert {
  border: 1px solid var(--c-hair);
  border-left: 2px solid var(--c-leak);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
  font-size: 0.9875rem;
  max-width: 34rem;
}
.alert--ok { border-left-color: var(--amber); }

/* ---------------------------------------------------------------------------
   14. CTA band + footer
   --------------------------------------------------------------------------- */
.cta-band__head { max-width: 22ch; }
.cta-band__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.footer { background: var(--predawn); color: var(--fog); padding-block: 3.25rem; border-top: 1px solid var(--hair-on-dark); }
/* The logotype and the link row sit on a shared baseline: both columns start
   at the same top edge, and the optical shift above lands the logo's baseline
   on the links' first baseline. Nothing here needs a nudge of its own. */
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem 2.5rem; align-items: flex-start; }
.footer__links { padding-block: 0; }
.footer__tag { margin-top: 0.85rem; font-size: 0.9375rem; color: var(--slate-on-dark); max-width: 44ch; text-wrap: pretty; }
.footer__tag .figure { white-space: nowrap; }
.footer__links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; }
.footer__links a { text-decoration: none; font-size: 0.9375rem; color: var(--slate-on-dark); transition: color 0.18s var(--ease); }
.footer__links a:hover { color: var(--fog); }
.footer__bottom {
  margin-top: 2.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hair-on-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: var(--t-caption);
  color: var(--slate-on-dark);
}

/* ---------------------------------------------------------------------------
   15. Motion preference
   --------------------------------------------------------------------------- */
@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;
    transition-delay: 0ms !important;
  }
  .js .readout[data-reveal] .ro-row,
  .js .readout[data-reveal] .readout__foot { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   16. Print — the site is a document; let it behave like one
   --------------------------------------------------------------------------- */
@media print {
  .nav, .cta-band, .footer, .skip { display: none; }
  body { background: #fff; color: #000; }
  .band--dark { background: #fff; color: #000; }
  .band--dark::before { display: none; }
}