/* ==========================================================================
   REELNINJA — page
   Every value comes from tokens.css. Nothing here invents a colour or a size.
   ========================================================================== */

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--paper-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
ul, ol { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: var(--r-sm); }
/* A paper button on ink (or ink on paper) would draw its ring in its own text
   colour, which is the colour of the ground behind it: an invisible ring. */
.btn--paper:focus-visible { outline-color: var(--paper-100); }
.btn--ink:focus-visible { outline-color: var(--ink-900); }

/* The parts the browser draws still belong to the page. */
::selection { background: var(--ink-900); color: var(--paper-100); }
.band--ink ::selection, .site-head ::selection, footer ::selection { background: var(--paper-100); color: var(--ink-900); }
html { accent-color: var(--ink-900); scrollbar-color: var(--ink-600) var(--paper-200); }
.band--ink { accent-color: var(--paper-100); }
p, li, dd { text-wrap: pretty; }
/* Geist closes up at 13-14px until "rn" reads as "m" ("burned", "turn"). A
   hair of tracking on the small sizes keeps the pairs apart. */
.small, .hero__note, .layer__body, .faq__a, .ladder__desc, .calc__sub,
.field__hint, .site-foot { letter-spacing: 0.012em; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--paper-100); color: var(--text);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-sm);
}
.skip:focus { left: var(--s-4); top: var(--s-4); }

/* ---------- shell + bands ---------- */
.shell {
  width: 100%; max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-x);
}
.band { padding-block: var(--band-y); }
.band--paper { background: var(--paper-100); }
.band--paper-alt { background: var(--paper-200); }
.band--ink { background: var(--ink-900); color: var(--text-invert); }

/* ---------- type ---------- */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  font-weight: 400;
}
.eyebrow { color: var(--text-muted); display: block; margin-bottom: var(--s-6); }
.band--ink .eyebrow { color: var(--text-invert-muted); }

.display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 500;
  text-wrap: balance;
}
.h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  font-weight: 500;
  text-wrap: balance;
}
.h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  font-weight: 500;
  text-wrap: balance;
}
.h3 {
  font-size: var(--t-h3);
  line-height: 1.28;
  letter-spacing: -0.014em;
  font-weight: 500;
}
.lead {
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--text-muted);
  max-width: 46ch;
}
.band--ink .lead { color: var(--text-invert-muted); }
.h1 + .lead, .h2 + .lead, .display + .lead { margin-top: var(--s-5); }
.measure { max-width: 62ch; }
.small { font-size: var(--t-small); line-height: 1.6; }
.muted { color: var(--text-muted); }
.band--ink .muted { color: var(--text-invert-muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  font-weight: 500;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn--paper { background: var(--paper-100); color: var(--ink-900); }
.btn--paper:hover { background: var(--paper-300); }
.btn--ink { background: var(--ink-900); color: var(--paper-100); }
.btn--ink:hover { background: var(--ink-700); }
.btn--ghost { border-color: var(--line-strong); }
.band--ink .btn--ghost { border-color: var(--line-invert-strong); color: var(--text-invert); }
.band--ink .btn--ghost:hover { background: var(--ink-800); }
.link-u {
  border-bottom: 1px solid var(--line-strong); padding-bottom: 1px;
  transition: border-color var(--dur-fast) var(--ease);
}
.link-u:hover { border-color: currentColor; }
.band--ink .link-u { border-color: var(--line-invert-strong); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink-900); color: var(--text-invert);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.site-head.is-stuck { border-bottom-color: var(--line-invert); }
.site-head .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); min-height: 68px;
}
.wordmark {
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em;
  display: inline-flex; align-items: baseline; gap: var(--s-3);
}
.wordmark span {
  font-size: 0.6875rem; letter-spacing: var(--tr-mono);
  color: var(--text-invert-muted); text-transform: uppercase;
}
.site-nav { display: flex; align-items: center; gap: var(--s-8); }
.nav-links { display: flex; align-items: center; gap: var(--s-8); }
.nav-toggle { display: none; }
.site-nav a:not(.btn) {
  font-size: var(--t-small); color: var(--text-invert-muted);
  transition: color var(--dur-fast) var(--ease);
}
.site-nav a:not(.btn):hover { color: var(--text-invert); }
@media (max-width: 860px) {
  .site-nav { gap: var(--s-3); }
  .nav-links { display: none; }
  /* Phones and portrait tablets: the sections open from a Menu button as
     full-width rows, each well over a thumb's height. Without script the
     button never shows and the header stays as it was. */
  .js .nav-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4);
    background: none; color: var(--text-invert); cursor: pointer;
    border: 1px solid var(--line-invert-strong); border-radius: var(--r-sm);
    font-size: 0.6875rem; letter-spacing: 0.12em;
  }
  .site-head.is-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 0 var(--shell-x) var(--s-6);
    background: var(--ink-900); border-bottom: 1px solid var(--line-invert);
    animation: menu-in var(--dur-fast) var(--ease) both;
  }
  .site-head.is-open .nav-link {
    display: flex; align-items: center; min-height: 56px;
    border-top: 1px solid var(--line-invert);
    font-size: 1.0625rem; color: var(--text-invert);
  }
  .site-head.is-open .nav-link[aria-current="page"] { color: var(--text-invert-muted); }
  /* keep the CTA on one line: "Book a 20-minute / call" reads broken */
  .site-head .btn { white-space: nowrap; padding: var(--s-3) var(--s-4); font-size: 0.8125rem; }
}
/* Below ~520px the full label cannot fit beside the wordmark, so it shortens
   rather than wrapping or pushing the header into horizontal overflow. */
.btn-short { display: none; }
@media (max-width: 520px) {
  .site-head .btn .btn-full { display: none; }
  .site-head .btn .btn-short { display: inline; }
}
/* The smallest phones: the wordmark drops "Studio" so the logo, Menu and the
   CTA share 280px. With very large text settings the row may still not fit,
   so it wraps onto a second line instead of pushing the page sideways. */
@media (max-width: 400px) {
  .wordmark span { display: none; }
  .site-head .shell { gap: var(--s-3); }
}
.site-head .shell { flex-wrap: wrap; row-gap: var(--s-2); }

/* ---------- hero ---------- */
/* The strip below is the same ink, so the hero ends on the strip's rhythm
   rather than a full band gap: the rule between them sits centred. */
.hero { padding-block: clamp(3rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem); }
.hero__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  /* minmax(0, …) not 1fr: the strip below scrolls horizontally on phones, and
     without an explicit zero minimum the track inherits its full min-content
     width and drags the whole page sideways. */
  grid-template-columns: minmax(0, 1fr);
}
.hero__grid > * { min-width: 0; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
}
.hero .display { max-width: 16ch; }
.hero__sub { margin-top: var(--s-6); max-width: 40em; }
.hero__acts { margin-top: var(--s-10); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.hero__note { margin-top: var(--s-5); font-size: var(--t-small); color: var(--text-invert-muted); max-width: 46ch; }
.hero__note .link-u { color: var(--text-invert); }
/* cascade: four kinds of input, one style system, six kinds of output.
   The default state is the finished one: every input lit, every format drawn.
   The entrance plays that state in once, inputs first, then each format in
   turn, and stops. Nothing loops, so there is nothing to pause. */
.cascade { --t0: 300ms; --step: 260ms; --out0: 1500ms; --outstep: 340ms; }

.ins { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ins__label { color: var(--text-invert-muted); margin-right: var(--s-2); }
.ins__chip {
  font-size: 0.6875rem; letter-spacing: 0.1em;
  padding: 6px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line-invert-strong); color: var(--text-invert);
  animation: chip-on var(--dur) var(--ease) both;
  animation-delay: calc(var(--t0) + var(--i) * var(--step));
}
@keyframes chip-on { from { color: var(--text-invert-muted); border-color: var(--line-invert); } }

.sys { display: flex; align-items: center; gap: var(--s-3); margin-block: var(--s-4); }
.sys__line {
  flex: 1; height: 1px; background: var(--line-invert-strong);
  transform-origin: 0 50%;
  animation: line-draw 600ms var(--ease) both; animation-delay: calc(var(--t0) + 4 * var(--step));
}
.sys__line:last-child { transform-origin: 100% 50%; }
@keyframes line-draw { from { transform: scaleX(0); } }
.sys__name {
  color: var(--paper-100); padding: 6px 12px; border-radius: var(--r-sm);
  background: var(--ink-700); border: 1px solid var(--paper-100);
  font-size: 0.6875rem; letter-spacing: 0.12em; white-space: nowrap;
  animation: chip-on var(--dur) var(--ease) both; animation-delay: calc(var(--t0) + 4 * var(--step));
}

/* Six formats in their real proportions: three verticals and a square on one
   baseline, two widescreens under them. */
.outs {
  display: grid; gap: var(--s-3); min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}
.tile {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-invert-strong); border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--ink-700), var(--ink-800) 75%);
  animation: clip-render var(--dur-slow) var(--ease) both;
  animation-delay: calc(var(--out0) + var(--i) * var(--outstep));
}
.tile--v  { aspect-ratio: 9 / 16; }
.tile--sq { aspect-ratio: 1 / 1; }
.tile--w  { aspect-ratio: 16 / 9; grid-column: span 2; }
@keyframes clip-render {
  from { background: var(--ink-800); border-color: var(--line-invert); clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0); }
}
.tile__tag {
  position: absolute; top: 7px; left: 8px; right: 8px; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 4px;
  font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--text-invert-muted);
  white-space: nowrap;
}
.tile__tag b { font-weight: 400; color: var(--text-invert); }

/* glyphs: each format drawn by its most recognisable mark */
.g-cap { display: block; height: 4px; width: 78%; margin-inline: auto; border-radius: 1px; background: var(--paper-100); }
.g-cap--s { width: 52%; opacity: .7; margin-top: 4px; }
.g-clip, .g-caps { position: absolute; left: 0; right: 0; bottom: 14%; }
.g-wave {
  display: block; height: 14px; width: 78%; margin: 0 auto 10px;
  background: radial-gradient(circle at 50% 50%, var(--paper-100) 0 1px, transparent 1.5px) 0 50% / 5px 100% repeat-x;
  -webkit-mask: linear-gradient(90deg, #000 0 8%, transparent 8% 12%, #000 12% 30%, transparent 30% 34%, #000 34% 70%, transparent 70% 74%, #000 74%);
  mask: linear-gradient(90deg, #000 0 8%, transparent 8% 12%, #000 12% 30%, transparent 30% 34%, #000 34% 70%, transparent 70% 74%, #000 74%);
  opacity: .55;
}
.g-head { position: absolute; left: 50%; bottom: 0; width: 64%; height: 58%; transform: translateX(-50%); }
.g-head__h {
  position: absolute; left: 50%; top: 0; width: 42%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: var(--ink-600); border: 1px solid rgba(250,250,250,.28);
}
.g-head__b {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
  border-radius: 48% 48% 0 0 / 60% 60% 0 0;
  background: var(--ink-600); border: 1px solid rgba(250,250,250,.28); border-bottom: 0;
}
/* The avatar is the same figure drawn as a dashed outline: synthetic, not filmed. */
.g-head--avatar .g-head__h, .g-head--avatar .g-head__b {
  background: transparent; border: 1px dashed rgba(250,250,250,.55);
}
.g-head--avatar .g-head__b { border-bottom: 0; }
.tile .g-caps { bottom: 12%; z-index: 1; }

.g-motion { position: absolute; inset: 26% 14% 14%; display: flex; align-items: center; justify-content: space-around; }
.g-m { display: block; background: var(--paper-100); animation: m-pop 700ms var(--ease) both; }
.g-m--o { width: 26%; aspect-ratio: 1; border-radius: 50%; animation-delay: calc(var(--out0) + 3 * var(--outstep) + 200ms); }
.g-m--s { width: 22%; aspect-ratio: 1; transform: rotate(45deg); background: transparent; border: 2px solid var(--paper-100); animation-delay: calc(var(--out0) + 3 * var(--outstep) + 320ms); }
.g-m--b { width: 10%; height: 54%; border-radius: 1px; opacity: .7; animation-delay: calc(var(--out0) + 3 * var(--outstep) + 440ms); }
@keyframes m-pop { from { opacity: 0; translate: 0 40%; } }

.g-app {
  position: absolute; inset: 26% 9% 12%;
  border: 1px solid rgba(250,250,250,.35); border-radius: 3px; overflow: hidden;
  display: grid; grid-template-columns: 22% 1fr; grid-template-rows: 14% 1fr;
}
.g-app__bar { grid-column: 1 / -1; border-bottom: 1px solid rgba(250,250,250,.25);
  background: radial-gradient(circle, rgba(250,250,250,.5) 0 1.5px, transparent 2px) 4px 50% / 7px 100% repeat-x; background-size: 7px 100%; -webkit-mask: linear-gradient(90deg, #000 0 26px, transparent 26px); mask: linear-gradient(90deg, #000 0 26px, transparent 26px); }
.g-app__side { border-right: 1px solid rgba(250,250,250,.2); background: rgba(250,250,250,.05); }
.g-app__main { padding: 8% 10%; display: flex; flex-direction: column; gap: 9%; }
.g-app__main span { display: block; height: 14%; border-radius: 1px; background: rgba(250,250,250,.22); }
.g-app__main span:first-child { width: 60%; background: var(--paper-100); }
.g-app__main span:nth-child(2) { width: 85%; }
.g-app__main span:nth-child(3) { width: 45%; height: 24%; border: 1px solid var(--paper-100); background: transparent; }
.g-app__cursor {
  position: absolute; left: 58%; top: 62%; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 11px solid var(--paper-100);
  transform: rotate(-28deg);
  animation: cursor-in 900ms var(--ease) both; animation-delay: calc(var(--out0) + 4 * var(--outstep) + 300ms);
}
@keyframes cursor-in { from { translate: 60% 80%; opacity: 0; } }

.g-launch { position: absolute; inset: 22% 12% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8%; }
.g-launch__t { display: block; width: 72%; height: 15%; border-radius: 1px; background: var(--paper-100); }
.g-launch__t--s { width: 46%; height: 8%; opacity: .55; }
.g-launch__cta { display: block; width: 28%; height: 16%; margin-top: 4%; border-radius: 2px; border: 1px solid var(--paper-100); }

@media (max-width: 620px) {
  .outs { gap: var(--s-2); }
  .tile__tag { font-size: 0.625rem; letter-spacing: 0.04em; top: 5px; left: 5px; right: 5px; white-space: normal; line-height: 1.2; }
  .tile--v .tile__tag b, .tile--sq .tile__tag b { display: none; }
  .ins__chip { font-size: 0.625rem; padding: 5px 8px; }
}
.cascade__cap {
  margin-top: var(--s-5); display: flex; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; color: var(--text-invert-muted);
}

/* ---------- the system: three layers ---------- */
.layers {
  margin-top: var(--s-12);
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 900px) { .layers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.layer {
  background: var(--paper-100);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.layer__idx { color: var(--text-faint); }
.layer__name { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.015em; }
.layer__body { font-size: var(--t-small); line-height: 1.62; color: var(--text-muted); }

.pipe {
  margin-top: var(--s-12); padding-top: var(--s-8);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
}
.pipe__step { color: var(--text-muted); }
.pipe__step--you { color: var(--text); }
.pipe__sep { color: var(--text-faint); }

/* ---------- calculator ---------- */
.calc {
  margin-top: var(--s-12);
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
}
.calc > * { min-width: 0; }
@media (min-width: 980px) {
  .calc { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
}
.field { padding-block: var(--s-6); border-top: 1px solid var(--line-invert); }
.field:last-of-type { border-bottom: 1px solid var(--line-invert); }
.field__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-5); margin-bottom: var(--s-5);
}
.field__label { font-size: var(--t-small); color: var(--text-invert-muted); }
.field__val {
  font-size: 1.125rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-invert); white-space: nowrap;
}
.field__hint { margin-top: var(--s-4); font-size: 0.75rem; color: var(--text-invert-muted); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: grab;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--line-invert-strong); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--line-invert-strong); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -9px;
  border-radius: 3px; background: var(--paper-100); border: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 3px;
  background: var(--paper-100); border: 0;
}
.calc__label { color: var(--text-invert-muted); }
.calc__big {
  margin-top: var(--s-3);
  font-size: var(--t-reading);
  line-height: 1.02; font-weight: 500; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.calc__sub { margin-top: var(--s-4); font-size: var(--t-small); color: var(--text-invert-muted); }

/* Two bars on one scale: the gap between them is the saving, drawn. */
.bars { margin-top: var(--s-10); display: grid; gap: var(--s-6); }
.bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-4); align-items: baseline;
}
.bar__name { font-size: var(--t-small); color: var(--text-invert-muted); }
.bar__val { font-size: 1.125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.bar__track { grid-column: 1 / -1; height: 10px; border-radius: 2px; background: var(--ink-700); overflow: hidden; }
.bar__fill {
  display: block; height: 100%; border-radius: 2px;
  background: var(--text-invert-muted);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease);
}
.bar--us .bar__name, .bar--us .bar__val { color: var(--text-invert); }
.bar--us .bar__fill { background: var(--paper-100); }
.calc__go {
  margin-top: var(--s-8);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6);
}
/* ---------- pricing ladder ---------- */
.ladder {
  margin-top: var(--s-12);
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
}
.ladder > * { min-width: 0; }
@media (min-width: 900px) {
  .ladder { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
}
.ladder__setup {
  position: relative;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--paper-200);
}
.ladder__amt {
  margin-top: var(--s-5);
  font-size: clamp(1.625rem, 3.4vw, 2.375rem);
  line-height: 1.05; font-weight: 500; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ladder__desc { margin-top: var(--s-5); font-size: var(--t-small); line-height: 1.62; color: var(--text-muted); }
.ladder__table caption { text-align: left; color: var(--text-muted); padding-bottom: var(--s-5); }
.ladder__table th, .ladder__table td {
  padding-block: var(--s-4); border-bottom: 1px solid var(--line); text-align: left;
}
.ladder__table thead th {
  color: var(--text-faint); font-weight: 400;
  font-size: var(--t-mono); font-family: var(--font-mono);
  letter-spacing: var(--tr-mono); text-transform: uppercase; padding-bottom: var(--s-3);
}
.ladder__table { width: 100%; }
.ladder__table th + th, .ladder__table td + td {
  text-align: right; font-variant-numeric: tabular-nums; padding-left: var(--s-3);
}
.ladder__table th:first-child, .ladder__table td:first-child { padding-left: var(--s-3); }
.ladder__table th:last-child, .ladder__table td:last-child { padding-right: var(--s-3); }
.ladder__table td:first-child { color: var(--text-muted); font-size: var(--t-small); }
.ladder__table td:last-child { font-size: 1.0625rem; font-weight: 500; }
.ladder__table tr.is-best td { background: var(--paper-300); }
.ladder__table tr.is-best td:first-child { color: var(--text); }
/* The narrowest phones: tighter cells so four columns fit in 280px. */
@media (max-width: 420px) {
  .ladder__table thead th { letter-spacing: 0.06em; }
  .ladder__table th + th, .ladder__table td + td,
  .ladder__table th:first-child, .ladder__table td:first-child { padding-left: var(--s-2); }
  .ladder__table th:last-child, .ladder__table td:last-child { padding-right: var(--s-2); }
  .ladder__table td { font-size: 0.9375rem; }
  .ladder__table td:last-child { font-size: 1rem; }
}
/* Safety net for very large text settings: the table scrolls inside its own
   column instead of pushing the whole page sideways. */
.ladder__pkgs { overflow-x: auto; }
.ladder__note {
  margin-top: var(--s-8); max-width: 62ch;
  font-size: var(--t-small); line-height: 1.65; color: var(--text-muted);
}
/* The terms a buyer checks before signing, one per row, so each can be found
   at a glance instead of read out of a paragraph. */
.terms { margin-top: var(--s-8); border-top: 1px solid var(--line); }
.terms__row {
  display: grid; gap: var(--s-1) var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--s-4); border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) { .terms__row { grid-template-columns: 9.5rem minmax(0, 1fr); } }
/* The terms list runs longer than the setup card beside it; the card stays in
   view while the terms scroll past instead of leaving a dead column. */
@media (min-width: 900px) { .ladder__setup { position: sticky; top: 6rem; } }
.terms dt { font-size: var(--t-small); font-weight: 500; color: var(--text); }
.terms dd { font-size: var(--t-small); line-height: 1.6; color: var(--text-muted); max-width: 58ch; }
.terms__row--key dd { color: var(--text); font-weight: 500; }

/* ---------- formats: what we make ----------
   No publishable reel, so each format is shown at the proportions it ships in. */
.spec__shapes { display: inline-flex; align-items: flex-end; gap: 6px; width: 64px; height: 40px; flex: 0 0 auto; }
.ar { display: block; border: 1px solid var(--paper-100); border-radius: 2px; background: var(--ink-700); }
.ar--9x16 { height: 40px; width: 22.5px; }
.ar--1x1  { height: 26px; width: 26px; }
.ar--4x5  { height: 32px; width: 25.6px; }
.ar--16x9 { height: 18px; width: 32px; }
.kinds { margin-top: var(--s-12); }
.kinds__head { color: var(--text-invert-muted); margin-bottom: var(--s-4); }
.kinds__head + .kinds__list + .kinds__head { margin-top: var(--s-12); }
.kinds__list {
  display: grid; gap: 0 var(--s-8);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .kinds__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kinds__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kind {
  padding-block: var(--s-6); border-top: 1px solid var(--line-invert);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: var(--s-1) var(--s-5);
}
.kind .spec__shapes { grid-row: span 2; }
.kind__name { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.012em; line-height: 1.3; }
.kind__tag { font-size: var(--t-small); color: var(--text-invert-muted); }
.kinds__list--project .ar { background: transparent; }

/* ---------- faq ---------- */
.faq { margin-top: var(--s-10); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding-block: var(--s-5);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-6); cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.012em;
  transition: color var(--dur-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 0.875rem;
  color: var(--text-faint); flex: 0 0 auto; display: inline-block;
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--text); }
.faq summary:hover { color: var(--text-muted); }
.faq__a {
  padding-bottom: var(--s-6); padding-right: var(--s-8);
  max-width: 64ch; font-size: var(--t-small); line-height: 1.68; color: var(--text-muted);
}

/* ---------- close + footer ---------- */
.close__inner { max-width: 46rem; }
.close__acts { margin-top: var(--s-10); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); }
/* The rule is drawn inside the shell's padding so it lines up with every
   other hairline on the page instead of starting at the viewport edge. */
.site-foot {
  position: relative;
  padding-block: var(--s-8);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8);
  justify-content: space-between; align-items: baseline;
  color: var(--text-invert-muted); font-size: 0.8125rem;
}

/* ---------- section divider inside one band ---------- */

/* ---------- reveal: one system, used everywhere, fails open ----------
   Hidden start state is scoped under .js, and .js is added only by the inline
   script in <head>. With no JS the attributes are inert and everything is
   simply visible. */
.js [data-reveal] { opacity: 0; transform: translateY(12px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The fade stays and the slide goes: reduced motion removes displacement, not
     feedback. Forcing opacity 1 here deleted the entrance entirely. */
  .js [data-reveal], .js [data-reveal].is-in { transform: none; }
}

/* ---------- booking page ---------- */
.site-foot::before {
  content: ""; position: absolute; top: 0;
  left: var(--shell-x); right: var(--shell-x);
  border-top: 1px solid var(--line-invert);
}
.site-foot .link-u { display: inline-block; padding-block: var(--s-3); }
.site-foot__contact { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.book {
  margin-top: var(--s-10);
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
}
/* On a phone the calendar is the action, so it comes first. */
@media (max-width: 899px) { .book > :last-child { order: -1; } }
.book__fallback .link-u { display: inline-block; padding-block: var(--s-3); }
.book > * { min-width: 0; }
@media (min-width: 980px) {
  .book { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
}
.book__slot {
  min-height: 32rem;
  border: 1px solid var(--line-invert); border-radius: var(--r-lg);
  padding: var(--s-6); background: var(--ink-800);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.book__slot.is-ready { padding: 0; overflow: hidden; background: var(--ink-900); }
.book__loading { color: var(--text-invert-muted); }
.book__slot iframe, .book__slot .cal-inline-container { min-height: 30rem; width: 100%; border: 0; }
.book__fallback { font-size: var(--t-small); }
.book__slot.is-ready .book__fallback { padding: var(--s-5) var(--s-6); }
.book__offline {
  padding: var(--s-5); border: 1px solid var(--line-invert-strong);
  border-radius: var(--r-sm); font-size: var(--t-small); line-height: 1.6;
  color: var(--text-invert-muted);
}
.book__have { margin-top: var(--s-10); border-top: 1px solid var(--line-invert); }
.book__have li {
  padding-block: var(--s-4); border-bottom: 1px solid var(--line-invert);
  display: flex; gap: var(--s-4); align-items: baseline;
  font-size: var(--t-small); color: var(--text-invert-muted);
}
.book__have li::before { content: "\2014"; flex: 0 0 auto; }

/* ==========================================================================
   ANIMATION LAYER
   Additive by construction: with scripting off or reduced motion on, every
   element here is static and complete. Nothing is animated *into* existence.
   ========================================================================== */

/* Reading progress. It is drawn on the header's own black, so unlike a
   tone-on-tone bar it keeps its contrast over both the paper and ink bands. */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--paper-100);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* CTA arrow, which leans toward the booking page on hover. */
.btn--go::after {
  content: "\2192"; display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
}
.btn--go:hover::after { transform: translateX(4px); }

/* Hover feedback on the structural surfaces. Border and background only, never
   a transform, so nothing jumps while a filter animation is still settling. */
.layer { transition: background var(--dur-fast) var(--ease); }
.layer:hover { background: var(--paper-200); }
.ladder__table tbody tr td { transition: background var(--dur-fast) var(--ease); }
.ladder__table tbody tr:hover td { background: var(--paper-200); }

/* ---------- the strip: every platform the output has to live on ---------- */
.strip { padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--line-invert); }
.marquee {
  margin-top: var(--s-8);
  overflow: hidden;
  /* The mask is what stops a full-bleed row from reading as clipped. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__track {
  display: flex; align-items: center;
  width: max-content;
  gap: clamp(2.5rem, 6vw, 5rem);
  /* The track holds its content twice and travels exactly half its width, so
     the loop is seamless. */
  animation: marquee-slide var(--mq, 70s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.mk {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--text-invert-muted); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.mk svg { width: 22px; height: 22px; flex: 0 0 auto; }
.mk span { font-size: 0.8125rem; }
.marquee:hover .mk { color: var(--text-invert); }

.strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.mqpause {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 1px solid var(--line-invert); border-radius: var(--r-sm);
  color: var(--text-invert-muted); padding: var(--s-2) var(--s-4); min-height: 44px; min-width: 64px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.mqpause:hover, .mqpause:focus-visible { color: var(--text-invert); border-color: var(--line-invert-strong); }
/* A real, visible pause mechanism for the running tickers -- not hover-only, so
   WCAG 2.2.2 holds for touch and keyboard as well. */
.strip.is-paused .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  /* The ticker keeps running, at half speed. Killing it turned the strip into a
     frozen row of logos with raw scrollbars -- which reads as broken, not as
     considerate, and is exactly what a visitor with the OS setting on saw. Speed
     is what changes. The pause control and hover/focus stay as the WCAG 2.2.2
     mechanism, so the motion is still fully stoppable. */
  .marquee__track { animation-duration: calc(var(--mq, 70s) * 2); }
  /* Formats fade in, with no wipe and nothing travelling. */
  .tile { animation-name: clip-fade; }
  .g-m, .g-app__cursor, .sys__line { animation: none; }
}
@keyframes clip-fade { from { opacity: .25; } to { opacity: 1; } }


/* ==========================================================================
   Motion and the viewfinder
   The page sells editing to a reference, so its one recurring mark is the
   frame a camera draws when it has found its subject: four corner brackets.
   They hunt and lock as each framed block arrives, and the hero's frame
   carries a REC light and a running timecode. Everything else moves only to
   show order (lists, the pipeline) or cause and effect (the calculator).
   Every hidden start state is scoped under .js, so nothing depends on script.
   ========================================================================== */

/* hero: the headline rises line by line, then the rest of the column follows */
.display .ln { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.display .ln > span { display: block; }
.js .display .ln > span { animation: ln-rise 900ms var(--ease) both; animation-delay: calc(120ms + var(--n, 0) * 110ms); }
@keyframes ln-rise { from { transform: translateY(110%); } }
.js .rise { animation: rise var(--dur-slow) var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade-in { from { opacity: 0; } }

/* lists arrive one item at a time; the total wait is capped */
.js [data-stagger] > * { opacity: 0; transform: translateY(10px); }
.js [data-stagger].is-in > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: min(calc(var(--i, 0) * 70ms), 490ms);
}

/* the pipeline: a playhead runs the rule and each step lights as it passes */
.pipe { position: relative; }
.pipe::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--text); transform: scaleX(0); transform-origin: 0 50%;
}
.js .pipe.is-in::after { animation: playhead 1.7s linear 120ms both; }
@keyframes playhead {
  0%   { transform: scaleX(0); opacity: 1; }
  85%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.js .pipe[data-stagger] > * { transform: none; opacity: 0.18; }
.js .pipe[data-stagger].is-in > * {
  opacity: 1; transition: opacity 360ms var(--ease);
  transition-delay: calc(160ms + var(--i, 0) * 115ms);
}

/* the viewfinder */
.vf { --vf-pad: clamp(10px, 1.6vw, 22px); --vf-len: 16px; --vf-w: 1.5px; }
.cascade.vf, .close__inner.vf { position: relative; }
.close__inner.vf { --vf-pad: clamp(12px, 3vw, 40px); --vf-len: 22px; }
.vf::before, .reel__open::after {
  content: ""; position: absolute; inset: calc(var(--vf-pad) * -1);
  pointer-events: none; color: var(--vf-color, var(--text-invert-muted));
  background:
    linear-gradient(currentColor, currentColor) top left / var(--vf-len) var(--vf-w),
    linear-gradient(currentColor, currentColor) top left / var(--vf-w) var(--vf-len),
    linear-gradient(currentColor, currentColor) top right / var(--vf-len) var(--vf-w),
    linear-gradient(currentColor, currentColor) top right / var(--vf-w) var(--vf-len),
    linear-gradient(currentColor, currentColor) bottom left / var(--vf-len) var(--vf-w),
    linear-gradient(currentColor, currentColor) bottom left / var(--vf-w) var(--vf-len),
    linear-gradient(currentColor, currentColor) bottom right / var(--vf-len) var(--vf-w),
    linear-gradient(currentColor, currentColor) bottom right / var(--vf-w) var(--vf-len);
  background-repeat: no-repeat;
}
.vf--paper { --vf-color: var(--text-faint); }
.js .vf::before { opacity: 0; }
/* Autofocus: overshoot inward, settle, lock. Not a bounce for its own sake;
   it is the one gesture every camera makes before it records. */
.js .vf.is-in::before { animation: vf-lock 950ms var(--ease) both; animation-delay: var(--vf-delay, 0ms); }
@keyframes vf-lock {
  0%   { opacity: 0; transform: scale(1.08); }
  45%  { opacity: 1; transform: scale(0.982); }
  72%  { transform: scale(1.006); }
  100% { opacity: 1; transform: scale(1); }
}

.vf__hud {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-5); font-size: 0.6875rem; letter-spacing: 0.14em;
  color: var(--text-invert-muted); font-variant-numeric: tabular-nums;
}
.vf__rec { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-invert); }
.vf__rec::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--paper-100); animation: rec-blink 1.2s steps(1) infinite;
}
.vf.is-off .vf__rec::before { animation-play-state: paused; }
@keyframes rec-blink { 50% { opacity: 0.15; } }

/* ==========================================================================
   Portfolio: tiles, filters and the player
   Tiles keep each video's real shape. Hovering one draws the viewfinder
   inside it, the same frame the hero carries, so "watch this" reads as
   "look through the camera".
   ========================================================================== */
.proof { padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--line-invert); }
.proof__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4) var(--s-6); flex-wrap: wrap; }

.reels {
  margin-top: var(--s-8);
  display: grid; gap: var(--s-8) var(--s-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { .reels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .reels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.reels--wide { grid-template-columns: minmax(0, 1fr); }
/* The home page row is always four: two by two on a phone, one row from a
   portrait tablet up, never three and an orphan. */
@media (min-width: 700px) { .proof .reels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) { .reels--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reels-group { margin-top: var(--s-12); }
.reels-group[hidden] { display: none; }
.reels-group .reels { margin-top: 0; }

.reel { display: flex; flex-direction: column; gap: var(--s-3); }
.reel[hidden] { display: none; }
.reel__open {
  position: relative; display: block; aspect-ratio: 9 / 16;
  border-radius: var(--r-lg); overflow: hidden; background: var(--ink-800);
  --vf-pad: -12px; --vf-color: var(--paper-100);
}
.reel--w .reel__open { aspect-ratio: 16 / 9; }
.reel__vid {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.reel__open::after {
  z-index: 1; opacity: 0; transform: scale(1.06);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.reel__open:hover .reel__vid, .reel__open:focus-visible .reel__vid { transform: scale(1.03); }
.reel__open:hover::after, .reel__open:focus-visible::after { opacity: 1; transform: scale(1); }
.reel__play {
  position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 10, 11, 0.55); border: 1px solid var(--line-invert-strong);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.reel__play::before {
  content: ""; margin-left: 3px;
  border-left: 12px solid var(--paper-100);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.reel__open:hover .reel__play, .reel__open:focus-visible .reel__play { background: var(--paper-100); border-color: var(--paper-100); }
.reel__open:hover .reel__play::before, .reel__open:focus-visible .reel__play::before { border-left-color: var(--ink-900); }
.reel__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-3);
  font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--text-invert-muted);
}
.reel__meta b { font-weight: 400; color: var(--text-invert); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .reel__meta { letter-spacing: 0.03em; } }

.work .lead { margin-top: var(--s-5); }
.filters { margin-top: var(--s-10); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.filter {
  min-height: 44px; padding: var(--s-2) var(--s-5);
  border: 1px solid var(--line-invert-strong); border-radius: 999px;
  background: none; color: var(--text-invert-muted);
  font-family: var(--font-sans); font-size: var(--t-small); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.filter:hover { color: var(--text-invert); border-color: var(--text-invert-muted); }
.filter[aria-pressed="true"] { background: var(--paper-100); border-color: var(--paper-100); color: var(--ink-900); }

/* The dialog covers the whole screen and centres the video itself, so a
   click anywhere outside the video lands on the dialog and closes it. */
.player {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  background: transparent; color: var(--text-invert); overflow: hidden;
}
.player[open] { display: grid; place-items: center; }
.player::backdrop { background: rgba(10, 10, 11, 0.94); }
.player__frame { position: relative; --vf-pad: 14px; --vf-color: var(--paper-100); }
.player__vid {
  display: block; width: auto; height: auto;
  max-width: calc(100vw - 4rem); max-height: calc(100vh - 7rem);
  border-radius: var(--r-sm); background: #000;
}
.player__close {
  position: fixed; top: var(--s-4); right: var(--s-4);
  min-height: 44px; padding: var(--s-2) var(--s-5);
  background: none; color: var(--text-invert);
  border: 1px solid var(--line-invert-strong); border-radius: var(--r-sm);
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.player__close:hover, .player__close:focus-visible { background: var(--paper-100); color: var(--ink-900); }

@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

/* Small standalone links get a 44px tap target without changing how they
   look: an invisible hit area centred on the text. */
.wordmark, .nav-link, .proof__head .link-u, .close__acts .link-u { position: relative; }
.wordmark::after, .nav-link::after, .proof__head .link-u::after, .close__acts .link-u::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: 50%;
  height: 44px; transform: translateY(-50%);
}

/* FAQ answers open and close instead of snapping, where the browser can */
:root { interpolate-size: allow-keywords; }
@supports selector(::details-content) {
  .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing travels; things still arrive, by opacity alone. */
  .js .display .ln > span, .js .rise { animation-name: fade-in; }
  .js [data-stagger] > * { transform: none; }
  .js .vf.is-in::before { animation-name: fade-in; }
  .js .pipe.is-in::after { animation: none; }
  .vf__rec::before { animation: none; }
  .reel__vid, .reel__open::after { transition: none; }
  .site-head.is-open .nav-links { animation-name: fade-in; }
  .reel__open:hover .reel__vid, .reel__open:focus-visible .reel__vid { transform: none; }
}

/* ---------- guide pages: one question each, answered first ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-8); color: var(--text-invert-muted); }
.crumbs a { color: var(--text-invert-muted); text-decoration: none; border-bottom: 1px solid var(--line-invert); }
.crumbs a:hover { color: var(--text-invert); }
.crumbs [aria-current] { color: var(--text-invert); }
.answer {
  position: relative; max-width: 52rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--paper-200);
}
.answer__text { margin-top: var(--s-4); font-size: 1.125rem; line-height: 1.6; color: var(--text); max-width: 62ch; }
.guide__sec { margin-top: clamp(4rem, 8vw, 6rem); }
.guide__sec .terms { max-width: 52rem; }
.guide__sec .ladder { margin-top: var(--s-10); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .guide__sec .layers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare-wrap { margin-top: var(--s-10); overflow-x: auto; }
.compare { width: 100%; min-width: 40rem; border-collapse: collapse; }
.compare caption { text-align: left; color: var(--text-muted); padding-bottom: var(--s-5); }
.compare th, .compare td {
  text-align: left; vertical-align: top; padding: var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line); font-size: var(--t-small); line-height: 1.6;
}
.compare thead th {
  color: var(--text-faint); font-weight: 400; font-size: var(--t-mono); font-family: var(--font-mono);
  letter-spacing: var(--tr-mono); text-transform: uppercase; padding-bottom: var(--s-3);
}
.compare tbody th { font-weight: 500; color: var(--text); width: 26%; }
.compare td { color: var(--text-muted); }
.compare tr.is-us th, .compare tr.is-us td { background: var(--paper-300); color: var(--text); }
.site-foot__guides { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); flex-basis: 100%; }
@media (max-width: 620px) {
  /* On a phone the comparison reads as one card per approach, not a sideways table. */
  .compare { min-width: 0; }
  .compare thead { display: none; }
  .compare tr { display: block; padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
  .compare tr.is-us { padding-inline: var(--s-4); }
  .compare th, .compare td { display: block; width: auto; border: 0; padding: var(--s-2) 0; }
  .compare tbody th { width: auto; font-size: 1rem; }
  .compare td::before {
    content: attr(data-label); display: block; color: var(--text-faint);
    font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); text-transform: uppercase;
  }
}

/* ---------- blog ---------- */
.post__meta { color: var(--text-invert-muted); margin-bottom: var(--s-5); }
.hero .display.post__title { font-size: clamp(2.1rem, 5.2vw, 3.75rem); max-width: 22ch; line-height: 1.04; }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s-5); }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.72; color: var(--text); }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin-top: var(--s-12); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--s-3); }
.prose li::marker { color: var(--text-faint); }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--text); }
.prose strong { font-weight: 600; }
.post__by { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.post-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.post-card { background: var(--paper-100); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: var(--s-3); transition: background var(--dur-fast) var(--ease); }
.post-card:hover { background: var(--paper-200); }
.post-card__kicker { color: var(--text-faint); }
.post-card__title { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
.post-card__title a { color: var(--text); text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare--wide { min-width: 52rem; }
.compare-note { margin-top: var(--s-6); }
.sources { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
@media (max-width: 620px) { .compare--wide { min-width: 0; } }
.prose .post__summary {
  padding: var(--s-6); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--paper-200); font-size: 1rem; line-height: 1.7;
}
.author { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line); display: grid; gap: var(--s-2); }
.author__name { font-size: 1rem; }
/* The calculator is styled for ink; on a paper page it gets its own ink panel. */
.calc-page .calc {
  background: var(--ink-900); color: var(--text-invert);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 3rem); margin-top: var(--s-8);
}
.guide__sec > .h2 + .prose, .guide__sec > .h2 + p { margin-top: var(--s-6); }

/* ---------- glossary ---------- */
.glossary__index { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); max-width: 60rem; }
.glossary { margin-top: var(--s-8); border-top: 1px solid var(--line); max-width: 52rem; }
.glossary__item { padding-block: var(--s-6); border-bottom: 1px solid var(--line); scroll-margin-top: 6rem; }
.glossary__item dt { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.015em; }
.glossary__item dd { margin-top: var(--s-3); font-size: 1rem; line-height: 1.7; color: var(--text-muted); max-width: 64ch; }
.glossary__item:target { background: var(--paper-200); }
@media (min-width: 900px) { .guides-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }