/* ==========================================================================
   PLATFORM.CSS · page layer for /platform and /compare only.
   Loads after brand.css. Uses existing tokens exclusively; no new colours,
   no new type sizes, no new radii. Every scroll-driven animation is
   double-gated (@supports + prefers-reduced-motion) and the final state is
   the default, so unsupported browsers and reduced motion get a finished,
   fully visible page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE HERO ADDITIONS · CTA pair + micro line inside .page-hero__grid.
   Children inherit grid-column 1/-1 from brand.css; only widths differ.
   -------------------------------------------------------------------------- */
.page-actions { display: grid; gap: var(--sp-3); max-width: 26rem; margin-top: var(--sp-2); }
@media (min-width: 480px) { .page-actions { grid-auto-flow: column; grid-auto-columns: max-content; max-width: none; } }
.page-micro { margin-top: calc(var(--sp-3) * -1); }

/* --------------------------------------------------------------------------
   2. SECTION SCAFFOLD · same rhythm grammar as brand.css: density varies,
   tinted bands carry the hairline.
   -------------------------------------------------------------------------- */
.pf-sec { padding-block: var(--sp-12) var(--sp-16); }
@media (min-width: 900px) { .pf-sec { padding-block: var(--sp-16) var(--sp-20); } }
.pf-sec--tint { background: var(--surface); border-top: var(--rule) solid var(--border); }
.pf-sec--line { border-top: var(--rule) solid var(--border); }

.pf-sec .grid-12 { align-items: start; }
@media (min-width: 900px) { .pf-stick { position: sticky; top: calc(var(--header-h) + var(--sp-6)); } }

/* Figure caption, same voice as the homepage story caption */
.fig-cap {
  margin-top: var(--sp-3);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline;
  color: var(--muted); font-size: var(--t-sm);
}
.fig-cap .tag { display: inline; }

/* Bulleted metrics · the tier__list grammar, generalised */
.plus-list { border-top: var(--rule) solid var(--border); }
.plus-list li {
  display: flex; gap: var(--sp-3); align-items: baseline;
  font-size: var(--t-sm); color: var(--fg);
  padding-block: var(--sp-3);
  border-bottom: var(--rule) solid var(--border);
}
.plus-list li::before { content: "+"; font-family: var(--font-mono); color: var(--accent-text); flex: none; }
.plus-list li.minus::before { content: "\2212"; color: var(--muted); }
.plus-list .small { display: block; margin-top: 2px; }

/* Mid-page CTA band · one line, two buttons, hairline above */
.band-cta { border-top: var(--rule) solid var(--border); padding-block: var(--sp-10); }
.band-cta__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
.band-cta__lead { flex: 1 1 16rem; display: grid; gap: var(--sp-2); }
.band-cta__lead strong { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); letter-spacing: var(--tr-h3); line-height: var(--lh-h3); }
.band-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   3. /platform · RULE CARD. Semantic HTML pretending to be nothing:
   a routing rule in plain fields, with its own proof line inside the card.
   -------------------------------------------------------------------------- */
.rule {
  margin: 0;
  border: var(--rule) solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.rule__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--rule) solid var(--border);
  background: var(--surface);
}
.rule__name { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; }
.rule__state { margin-left: auto; }
.rule__grid { margin: 0; }
.rule__grid > div {
  display: grid; grid-template-columns: 5.25rem minmax(0, 1fr);
  column-gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: var(--rule) solid var(--border);
}
.rule__grid dd { color: var(--fg); }
.rule__grid dd .mono { font-size: 0.75rem; }
.rule__then { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
.rule__proof {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--t-sm); color: var(--muted);
}
.rule__proof .mono { color: var(--fg); }

/* --------------------------------------------------------------------------
   4. /platform · RESOLUTION THREAD. One shipment, six timestamped entries,
   a rail that draws itself on scroll (transform-only, double-gated).
   -------------------------------------------------------------------------- */
.thread-card {
  margin: 0;
  border: var(--rule) solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  view-timeline-name: --thread;
}
.thread {
  --t-col: 3.25rem;   /* timestamp column */
  --t-dot: 13px;      /* marker square */
  position: relative;
  padding: var(--sp-5);
  display: grid; gap: var(--sp-5);
  font-size: 0.8125rem; line-height: 1.5;
}
/* The rail: a resting hairline, and an accent line that draws over it */
.thread::before, .thread::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-5) + var(--t-col) + var(--sp-3) + (var(--t-dot) / 2) - 1px);
  top: calc(var(--sp-5) + 6px);
  bottom: calc(var(--sp-5) + 6px);
  width: 2px;
  border-radius: var(--r-xs);
}
.thread::before { background: var(--border); }
.thread::after { background: var(--accent); transform-origin: top; transform: none; }
@supports (animation-timeline: view()) and (animation-range: 0% 100%) {
  @media (prefers-reduced-motion: no-preference) {
    .thread::after {
      animation: pf-drawline linear both;
      animation-duration: 1ms;
      animation-timeline: --thread;
      animation-range: entry 25% cover 75%;
    }
  }
}
@keyframes pf-drawline { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.thread li {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: var(--t-col) var(--t-dot) minmax(0, 1fr);
  column-gap: var(--sp-3);
}
.thread li::before {
  content: "";
  grid-column: 2; grid-row: 1;
  width: var(--t-dot); height: var(--t-dot);
  margin-top: 4px;
  border: var(--rule) solid var(--border-strong);
  border-radius: var(--r-xs);
  background: var(--bg);
}
.thread li.is-close::before { background: var(--accent); border-color: var(--accent); }
.thread__t { grid-column: 1; grid-row: 1; font-size: 0.75rem; color: var(--muted); padding-top: 2px; }
.thread__body { grid-column: 3; grid-row: 1; }
.thread__body b { color: var(--fg); }
.thread__body p { color: var(--muted); }
.thread__body .chip { margin-left: var(--sp-1); }
.thread__foot {
  padding: var(--sp-4) var(--sp-5);
  border-top: var(--rule) solid var(--border);
  background: var(--bg);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--muted);
}
.thread__foot b { color: var(--accent-text); font-weight: 500; }
.thread-card .fig-cap { margin-top: 0; padding: var(--sp-3) var(--sp-5) var(--sp-4); background: var(--bg); }

/* --------------------------------------------------------------------------
   5. STAT GRID · 2-up on mobile (each cell one short phrase), 4-up from 900.
   Hairline grid, no shadows, numerals mono.
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--rule);
  background: var(--border);
  border: var(--rule) solid var(--border);
}
@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--bg); padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; }
.stat__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.stat__num small { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.stat .tag { order: -1; }

/* --------------------------------------------------------------------------
   6. /compare · THE GAP. One huge buyer-side numeral against its counterpart.
   -------------------------------------------------------------------------- */
.gap-lead .huge { margin-top: var(--sp-4); }
.gap-lead .huge__num { color: var(--fg); }
.gap-lead .tag + .huge { margin-top: var(--sp-4); }
.gap-vs { margin-top: var(--sp-6); display: grid; gap: var(--sp-2); }
.gap-vs b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent-text);
}
.gap-note { margin-top: var(--sp-5); }

/* Failure modes · full-width rows, no cards, no icons */
.fmodes { border-top: var(--rule) solid var(--border); }
.fmodes li { padding-block: var(--sp-5); border-bottom: var(--rule) solid var(--border); }
.fmodes h3 { margin-bottom: var(--sp-2); }
.fmodes p { font-size: var(--t-sm); color: var(--muted); max-width: 58ch; }
.fmodes .mono { color: var(--fg); }

/* --------------------------------------------------------------------------
   7. /compare · THE OTHER ALTERNATIVES. Ranked rows; each names what the
   alternative is genuinely good at before saying where it loses.
   -------------------------------------------------------------------------- */
.alts { display: grid; }
.alts > li { padding-block: var(--sp-6); border-top: var(--rule) solid var(--border); }
.alts > li:first-child { border-top: none; padding-top: 0; }
.alts h3 { margin-block: var(--sp-2) var(--sp-4); }
.alt-cols { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .alt-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); } }
.alt-cols .tag { margin-bottom: var(--sp-2); }
.alt-cols p:not(.tag) { font-size: var(--t-sm); color: var(--muted); }
.alt-cols a { color: var(--fg); text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: text-decoration-color var(--duration-fast) var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .alt-cols a:hover { text-decoration-color: var(--accent); } }
.alts .tag--foot { margin-top: var(--sp-3); }

/* Comparison table page variant: room to breathe, note line under */
.cmp-note { margin-top: var(--sp-4); }
.cmp td .mono { font-size: 0.8125rem; }

/* Honesty line under the switching list */
.plain-word {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: var(--rule) dashed var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--muted);
  max-width: 56ch;
}
.plain-word b { color: var(--fg); font-weight: 500; }

/* Links inside ledes/lists on these pages */
.pf-sec .plus-list a, .pf-sec .lede a, .thread-note a {
  color: var(--fg);
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color var(--duration-fast) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .pf-sec .plus-list a:hover, .pf-sec .lede a:hover, .thread-note a:hover { text-decoration-color: var(--accent); }
}

/* --------------------------------------------------------------------------
   8. REDUCED MOTION · final states only; the rail is fully drawn.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .thread::after { animation: none !important; transform: none !important; }
}