/* Reflow — www.projectreflow.com
   Visual world inherited from the app (Geist, amber-500, zinc) per ~/reflow-private/brand/README.md */

@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../assets/fonts/geist-mono-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
/* Source Serif 4 — the companion voice. Geist has no italic at all, so anything
   set in italic here is a real drawn italic rather than a skewed roman. */
@font-face {
  font-family: 'Source Serif';
  src: url('../assets/fonts/source-serif-var-italic.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
  font-style: italic;
}

:root {
  --paper: #FBFAF7;
  --paper-sunk: #F5F3EE;
  --ink: #09090B;
  --ink-2: #18181B;
  --ink-3: #52525B;
  --ink-4: #6B6B73;
  --rule: #E7E5E0;
  --rule-firm: #D3D0C9;
  --amber: #F59E0B;
  --amber-deep: #B45309;
  --amber-text: #92400E;
  --amber-pale: #FFFBEB;
  --amber-mid: #FEF3C7;

  --sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Source Serif', Georgia, 'Times New Roman', serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;
  --shell: 1240px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
[id] { scroll-margin-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Browser surfaces themed from the palette rather than left at defaults */
::selection { background: var(--amber-mid); color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--amber-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
html { scrollbar-color: var(--rule-firm) var(--paper); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: var(--rule-firm);
  border: 3px solid var(--paper);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

img, svg { max-width: 100%; height: auto; }

a {
  color: var(--amber-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.18s var(--ease);
}
a:hover { color: var(--ink); }

h1, h2, h3 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

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

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

.band { padding-block: clamp(4rem, 9vw, 8rem); }
.band--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.band + .band { border-top: 1px solid var(--rule); }

/* Panels alternate warm beige and off-white down the page and close on ink, so the
   scroll has tonal rhythm rather than one flat ground behind every section. */
.tone-a { background: var(--paper-sunk); }
.tone-b { background: var(--paper); }

/* Sections alternate between opening one-column (the heading alone, content
   full measure) and two-column (the heading inside the grid, beside its content),
   so no two neighbours are built the same way. */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .split--wide { grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr); }
  .split > .caps,
  .split > .next { margin-top: 0.4rem; }
  .split .h-section { max-width: none; }
  /* In a narrower column the capability rows read better stacked than split. */
  .split .cap { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .split .cap__body { max-width: 62ch; }
}

.lede {
  font-size: clamp(1.2rem, 1.04rem + 0.7vw, 1.6rem);
  line-height: 1.4;
  font-weight: 350;
  color: var(--ink-2);
  letter-spacing: -0.022em;
  text-wrap: pretty;
  max-width: 36ch;
  margin: 0;
}

.prose {
  max-width: var(--measure);
  color: var(--ink-3);
}
.prose p { margin: 0 0 1.1em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 550; }

.h-section {
  font-size: clamp(1.85rem, 1.45rem + 1.7vw, 3rem);
  max-width: 20ch;
}
@media (min-width: 56rem) {
  .h-section--right { max-width: 26ch; margin-left: auto; text-align: right; }
}
/* A two-sentence heading breaks on its full stop, never mid-clause. Each
   sentence then balances on its own instead of borrowing the next one's words. */
.h-section--split { max-width: 26ch; }
/* Each sentence is its own block, so balance has to be declared on the spans —
   on the h2 it applies to inline content the h2 no longer has, and the text was
   breaking with a single word stranded on the first line. */
.h-section--split span {
  display: block;
  text-wrap: balance;
  font-weight: 600;
  color: var(--ink);
}
.h-section--split span + span {
  margin-top: 0.2em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--amber-deep);
}

/* ---------- header ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper-sunk) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.masthead[data-stuck='true'] {
  border-bottom-color: var(--rule-firm);
  background: color-mix(in srgb, var(--paper-sunk) 94%, transparent);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 78px;
}
.masthead__logo { display: inline-flex; align-items: center; }
.masthead__logo svg { display: block; height: 34px; width: auto; }
@media (max-width: 30rem) {
  .masthead__inner { min-height: 66px; }
  .masthead__logo svg { height: 28px; }
}
.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}
.masthead__link {
  color: var(--ink-3);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 450;
}
.masthead__link:hover { color: var(--ink); }
@media (max-width: 26rem) {
  .masthead__link { display: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  padding: 0.62em 1.05em;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn__arrow { transition: transform 0.24s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.16), 0 6px 16px -8px rgba(9, 9, 11, 0.4);
}
.btn--primary:hover {
  background: var(--ink-2);
  color: #fff;
  box-shadow: 0 2px 4px rgba(9, 9, 11, 0.18), 0 10px 24px -10px rgba(9, 9, 11, 0.45);
}

.btn--amber {
  background: var(--amber);
  color: #2A1A02;
  box-shadow: 0 1px 2px rgba(120, 70, 5, 0.2), 0 8px 22px -10px rgba(245, 158, 11, 0.7);
}
.btn--amber:hover { background: #FBB01F; color: #2A1A02; }

.btn--ghost {
  border-color: var(--rule-firm);
  color: var(--ink-2);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--ink-4); background: rgba(9, 9, 11, 0.03); color: var(--ink); }

.btn--lg { font-size: 1rem; padding: 0.78em 1.35em; }
@media (max-width: 30rem) {
  .hero__actions { display: grid; grid-template-columns: 1fr; }
  .hero__actions .btn { justify-content: center; }
}

/* ---------- hero ---------- */

.hero {
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--rule);
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; }
}

.hero h1 {
  font-size: clamp(2.6rem, 1.55rem + 4.4vw, 5rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
  max-width: 13ch;
}
.hero__lede { margin-top: clamp(1.25rem, 2vw, 1.75rem); max-width: 40ch; }
.hero__actions {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
}
.hero__note {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  color: var(--ink-4);
  letter-spacing: -0.005em;
}

/* ---------- the revision object: the page's signature ---------- */

.rev {
  margin: 0;
  border: 1px solid var(--rule-firm);
  border-radius: 8px;
  background: #FEFDFB;
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 18px 40px -24px rgba(9, 9, 11, 0.28);
  overflow: hidden;
}
.rev__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.1rem;
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule);
}
.rev__body { padding: clamp(1.1rem, 2.4vw, 1.75rem) clamp(1.1rem, 2.4vw, 1.75rem) 0; }

.rev__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rev__id {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--amber-text);
  background: var(--amber-mid);
  padding: 0.2em 0.6em;
  border-radius: 999px;
}
.rev__example {
  margin-left: 0.55rem;
  font-size: 0.75rem;
  color: var(--ink-4);
  letter-spacing: -0.005em;
}
.rev__title {
  margin: 0.85rem 0 0;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 550;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.rev__values {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35em 0.75em;
  margin-top: 0.65rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  letter-spacing: -0.02em;
}
.rev__old {
  position: relative;
  color: var(--ink-4);
  white-space: nowrap;
}
/* the strike is drawn, not a text-decoration, so it can be animated */
.rev__old::after {
  content: '';
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 52%;
  height: 2px;
  background: var(--amber-deep);
  transform-origin: left center;
  border-radius: 2px;
}
.rev__to { color: var(--ink-4); font-size: 0.8em; }
.rev__new { color: var(--ink); font-weight: 550; white-space: nowrap; }

.rev__why {
  margin-top: 1.05rem;
  padding: 0.85rem 0 1.15rem;
  border-top: 1px dashed var(--rule-firm);
}
.rev__whyhead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.rev__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  flex: none;
}
/* Labels and sentences stay in Geist — mono is reserved for the data itself. */
.rev__note {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rev__whytext {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.rev__chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink-4);
}
.rev__node { color: var(--ink-3); }
.rev__node strong { color: var(--amber-text); font-weight: 600; }
.rev__arrow { color: var(--ink-4); }

.rev__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-top: 1px solid var(--rule);
  background: var(--amber-pale);
}
.rev__foot .rev__note { color: var(--amber-text); }
.rev__foot .mono { font-family: var(--mono); font-size: 0.95em; }

/* hero load sequence — plays from the finished state, never hides content */
@media (prefers-reduced-motion: no-preference) {
  .js .rev__old::after { transform: scaleX(0); }
  .js .rev[data-played='true'] .rev__old::after {
    transform: scaleX(1);
    transition: transform 0.5s var(--ease) 0.15s;
  }
  .js .rev__new,
  .js .rev__why,
  .js .rev__foot { opacity: 0; transform: translateY(6px); }
  .js .rev[data-played='true'] .rev__new,
  .js .rev[data-played='true'] .rev__why,
  .js .rev[data-played='true'] .rev__foot {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .js .rev[data-played='true'] .rev__new { transition-delay: 0.5s; }
  .js .rev[data-played='true'] .rev__why { transition-delay: 0.72s; }
  .js .rev[data-played='true'] .rev__foot { transition-delay: 0.92s; }
}

/* ---------- the problem: the same block, with the why column missing ---------- */

.gap-head {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 60rem) {
  /* The heading column carries display type at up to 3rem, so an even split left
     it too narrow for "Hardware programs rarely" to fit on one line — forcing a
     three-line break with a single word stranded at the top. */
  .gap-head { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
}

.losses-head {
  display: none;
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
  padding-bottom: 0.55rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (min-width: 48rem) {
  .losses-head {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    gap: 1.75rem;
  }
  .losses-head span:last-child { justify-self: end; padding-right: 0.6rem; }
}
.losses-head + .losses { margin-top: 0; }
.losses {
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.loss {
  display: grid;
  gap: 0.35rem 2rem;
  padding: clamp(1rem, 2vw, 1.35rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
@media (min-width: 48rem) {
  .loss { grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1.75rem; }
}
.loss__when {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.loss__what { color: var(--ink); font-weight: 450; letter-spacing: -0.015em; }
/* Values stay sans in running prose. Mono gives the period and the degree sign
   a full character cell each, which renders "2.4mm" as "2 . 4mm" and puts a
   space back into "-20°C" that the markup does not contain — the exact artifact
   this is meant to avoid. Weight and tabular figures carry the "spec value"
   signal instead; the mono voice survives in the chips, where it sits as a
   block rather than inside a sentence. */
.loss__what .val {
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* The chip is uppercased for the record-like voice, but a unit symbol is not
   free text: "mm" uppercased to "MM" is a different unit (M is the mega-
   prefix), and an engineer reads it as a typo. Exempt the values. */
.loss__why .val { text-transform: none; letter-spacing: -0.02em; }
.loss__why {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px dashed var(--rule-firm);
  border-radius: 5px;
  padding: 0.3rem 0.6rem;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 5px,
    rgba(9, 9, 11, 0.028) 5px, rgba(9, 9, 11, 0.028) 10px
  );
}
/* Same measure as the emphasised line above it, so the ragged edge does not jump. */
.prose--match { max-width: 52rem; }
.prose--note {
  max-width: 52rem;
  font-size: 0.9375rem;
  color: var(--ink-4);
}
.losses__claim {
  /* Carries the separation from the log itself now that the paragraph that used
     to sit between them is gone. */
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  max-width: 52rem;
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.45rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--amber-deep);
  text-wrap: balance;
}

/* ---------- workspace shot ---------- */

.shot { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.shot img,
.shot picture {
  display: block;
  width: 100%;
  border-radius: 10px;
}
.shot picture img { border-radius: 10px; }
.shot figcaption {
  margin-top: 0.9rem;
  font-size: 0.875rem;
  color: var(--ink-4);
  /* Proportional to the figure rather than a character count, so the caption's
     rag stays in a fixed relationship to the screenshot above it. */
  max-width: 75%;
  text-wrap: pretty;
}

/* The desktop screenshots carry 3.08% transparent padding plus a soft shadow on
   each side, so a width:100% image sits visibly inset from the heading above it.
   Widen by the reciprocal (100 / 93.83) and pull left by that same inset, which
   lands the browser mockup's own edges on the shell gutters. The bleed is ~3.3%
   of the content width and stays inside --gutter at every viewport in range.
   Scoped above 46rem on purpose: proof-mobile.png has no padding to compensate
   for, and shifting it would push it off-centre. */
@media (min-width: 46.01rem) {
  .shot picture {
    width: 106.57%;
    margin-inline-start: -3.28%;
  }
}

/* ---------- capability rows ---------- */

.caps {
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
  border-top: 1px solid var(--rule);
}
.cap {
  display: grid;
  gap: 0.3rem 3rem;
  padding: clamp(1.35rem, 2.6vw, 1.9rem) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 52rem) {
  .cap { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); align-items: baseline; }
}
.cap__name {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  font-weight: 550;
  color: var(--ink);
  letter-spacing: -0.028em;
  margin: 0;
}
.cap__body { margin: 0; color: var(--ink-3); max-width: 58ch; }

/* ---------- quotes ---------- */

.quotes {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 56rem) {
  .quotes { grid-template-columns: 1fr 1fr; }
}
.quote { margin: 0; padding-left: 1.35rem; border-left: 1px solid var(--amber); }
.quote p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 1.08rem + 1.45vw, 2.15rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ink);
  font-weight: 380;
  text-wrap: balance;
}
.quote figcaption .num {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.quote figcaption {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--ink-3);
  max-width: 44ch;
}

/* ---------- comparison ---------- */

.compare-wrap { margin-top: clamp(2.25rem, 4vw, 3rem); }
.compare {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
@media (min-width: 46rem) {
  .compare { table-layout: fixed; }
  .compare thead th:first-child { width: 34%; }
}
/* Below the table's comfortable width the rows restack rather than scroll —
   the outcome column carries the whole argument and must never be off-screen. */
@media (min-width: 46rem) {
  .compare-wrap { overflow-x: auto; }
  .compare { min-width: 40rem; }
}
.compare caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.compare th, .compare td {
  padding: clamp(0.9rem, 1.8vw, 1.25rem) 1rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.compare thead th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--rule-firm);
  padding-block: 0.65rem;
}
.compare th:first-child, .compare td:first-child { padding-left: 0; }
.compare th:last-child, .compare td:last-child { padding-right: 0; }

@media (min-width: 46rem) {
  .compare th:first-child, .compare td:first-child { padding-left: 1.15rem; }
  .compare th:last-child, .compare td:last-child { padding-right: 1.15rem; }
}
.outcome {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.verdict {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.14em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
}
.verdict svg { width: 0.875rem; height: 0.875rem; display: block; }

.verdict--no   { color: var(--ink-3); background: rgba(9, 9, 11, 0.04); }
/* The caution carries its own rounded-triangle silhouette, so it drops the
   circular chrome the other two badges use. */
.verdict--part {
  color: var(--amber-deep);
  background: none;
  border: 0;
}
/* The triangle renders larger than its 1.375rem box and overflows it, centred.
   The box has to stay the same width as the circular badges or the text in these
   two rows would start further right than the rest of the column. */
.verdict--part { overflow: visible; }
.verdict--part svg {
  width: 2rem;
  height: 2rem;
  margin-top: -0.28em;
}
/* The only saturated, filled mark on the page — the eye lands on Reflow's row. */
.verdict--yes {
  color: #fff;
  background: #166534;
  border-color: #166534;
}

.compare tbody th {
  font-weight: 450;
  color: var(--ink-2);
  letter-spacing: -0.015em;
  padding-right: 1.5rem;
}
.compare td { color: var(--ink-3); }

.compare tr[data-row='reflow'] th,
.compare tr[data-row='reflow'] td {
  background: var(--amber-pale);
  border-bottom-color: transparent;
  color: var(--ink);
}
.compare tr[data-row='reflow'] th { font-weight: 600; color: var(--ink); }
.compare tr[data-row='reflow'] td strong { font-weight: 550; }
/* The field spans the row and stays aligned with the columns above it. */
.compare tr[data-row='reflow'] th:first-child { border-radius: 7px 0 0 7px; }
.compare tr[data-row='reflow'] td:last-child { border-radius: 0 7px 7px 0; }

@media (max-width: 45.999rem) {
  .compare thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .compare tbody tr {
    display: block;
    padding: clamp(1rem, 3vw, 1.25rem) 0;
    border-bottom: 1px solid var(--rule);
  }
  .compare tbody th,
  .compare tbody td {
    padding: 0;
    border-bottom: 0;
  }
  .compare tbody th {
    display: block;
    width: auto;
    padding-right: 0;
    margin-bottom: 0.4rem;
    font-size: 1.0625rem;
    font-weight: 550;
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  .compare tbody td { display: block; }
  /* The amber field belongs to the whole stacked row, so the desktop
     edge-painting shadows are switched off rather than left half-applied. */
  .compare tr[data-row='reflow'] {
    background: var(--amber-pale);
    border-bottom-color: transparent;
    border-radius: 8px;
    padding-inline: 1rem;
    margin-inline: -1rem;
    margin-block: 0.35rem;
  }
}

/* ---------- what's next: a real sequence, so it is numbered ---------- */

.next {
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}
.stage {
  display: grid;
  gap: 0.55rem 1.5rem;
  grid-template-columns: 2.15rem minmax(0, 1fr);
  padding-bottom: clamp(2rem, 3.5vw, 2.75rem);
  position: relative;
}
.stage:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0.7rem;
  top: 2.1rem;
  bottom: 0.35rem;
  width: 1px;
  background: linear-gradient(var(--rule-firm) 55%, transparent);
}
.stage__num {
  counter-increment: stage;
  grid-row: span 2;
  width: 1.45rem;
  height: 1.45rem;
  margin-top: 0.22rem;
  border-radius: 50%;
  border: 1px solid var(--rule-firm);
  background: #FEFDFB;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.stage__num::before { content: counter(stage); }
.stage[data-state='now'] .stage__num {
  border-color: var(--amber);
  background: var(--amber);
  color: #2A1A02;
}
.stage__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.stage__title {
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
  font-weight: 550;
  color: var(--ink);
  letter-spacing: -0.028em;
  margin: 0;
}
.tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.24em 0.6em;
  border-radius: 4px;
  white-space: nowrap;
}
.tag--now { background: var(--amber-mid); color: var(--amber-text); }
.tag--soon { background: #FEFDFB; color: var(--ink-3); border: 1px solid var(--rule-firm); }
.stage__body { margin: 0; color: var(--ink-3); max-width: 62ch; }

.spine-block { margin-top: clamp(0.75rem, 2vw, 1.5rem); }
.spine {
  padding: clamp(1rem, 2.5vw, 1.75rem) 0 0.75rem;
  overflow-x: auto;
}
.spine svg { min-width: 44rem; display: block; }
.spine:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 4px; border-radius: 4px; }
/* Named, focusable scroll region: the chain is wider than a phone, so say so
   rather than letting the trace stop mid-argument with no affordance. */
.spine__hint {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
@media (max-width: 48rem) {
  .spine__hint { display: flex; }
  .spine[data-scrollable='true'] {
    mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
  }
}
.js .spine__hint { display: none; }
.js .spine[data-scrollable='true'] ~ .spine__hint { display: flex; }
.spine__cap {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-4);
  /* Matches .shot figcaption: proportional to the figure, not a character count,
     so both captions on the page keep the same relationship to the graphic above. */
  max-width: 75%;
  text-wrap: pretty;
}

/* ---------- close ---------- */

.close {
  background: var(--ink);
  color: #E8E6E1;
  border-top: 0;
  padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 5vw, 4.5rem);
}
.close h2 { color: #fff; }
.close .prose { color: #B4B0A8; }
.close__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: end;
}
@media (min-width: 58rem) {
  .close__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.close__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.close__mail {
  font-size: 0.9375rem;
  color: #A8A39A;
}
.close__mail a { font-family: var(--mono); font-size: 0.9em; letter-spacing: 0.01em; }
.close__mail a { color: var(--amber); text-decoration-color: rgba(245, 158, 11, 0.4); }
.close__mail a:hover { color: #FBB01F; }

/* ---------- footer, carrying the page's own revision block ---------- */

.foot { background: var(--ink); color: #9C978E; padding-block: 0 2.5rem; }
.foot__rule { border: 0; border-top: 1px solid #2A2A2E; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); }
.foot__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 3rem;
  align-items: flex-start;
  justify-content: space-between;
}
.foot__logo svg { height: 24px; width: auto; display: block; }
.foot__logo .wordmark { fill: #F5F3EE; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.85rem 1.6rem; font-size: 0.9375rem; }
.foot__links a { color: #B4B0A8; text-decoration: none; }
.foot__links a:hover { color: #fff; }

.foot__fine {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  font-size: 0.8125rem;
  color: #9C978E;
}

/* ---------- scroll reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(14px); }
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
  }
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  transform: translateY(-120%);
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  font-size: 0.9375rem;
}
.skip:focus { transform: translateY(0); color: var(--paper); }