/* ============================================================
   ReportWise AI — site layer (design system v4, dual theme)

   tokens.css is loaded first and owns:
     - :root custom properties (dark defaults + light overrides)
     - base primitives: .rw-display .rw-label .rw-eyebrow .rw-btn
       .rw-input .rw-card .rw-plinth .rw-tag .rw-stat-* .rw-dot
       .rw-ticker .rw-divider + .rw-bg-hero/grid/glow backdrops

   This file adds site-specific patterns (nav, live-card, spec-table,
   pricing, coverage-grid, essay, FAQ, orders-table, etc.) built only
   on semantic tokens — no hard-coded brand hex in components. Back-
   compat aliases at the BOTTOM keep un-migrated legacy templates
   rendering until every template is on .rw-* primitives.
   ============================================================ */

/* ============================================================ Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--rw-bg); color: var(--rw-text); }
body {
  background: var(--rw-bg);
  color: var(--rw-text);
  font-family: var(--rw-font-sans);
  font-size: var(--rw-size-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 2026-04 mobile audit #16: kill the iOS/Android default grey
     tap-highlight flash. Focus-visible rings + :active styles still
     work; we're only suppressing the system-painted rectangle that
     fires on every .pipe-step / .rw-tag / link tap. Desktop never
     paints this — zero visual change above 900 px. */
  -webkit-tap-highlight-color: transparent;
  /* 2026-04-25 Chrome-iOS jitter follow-up: lock text-size-adjust
     to 100% on all platforms. iOS Safari AND Chrome iOS both have
     a heuristic that auto-inflates text it decides is too small
     for the viewport — the computation can re-fire mid-scroll or
     under memory pressure, which manifests as paragraphs changing
     font-size and therefore re-wrapping. Our viewport meta is
     already correctly declared (width=device-width, initial-scale=1)
     so the heuristic never has reason to engage; `100%` makes that
     contract explicit and immune to heuristic second-guessing. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 2026-04 mobile audit #22: removed `overflow-x: hidden` safety
     hack. It papered over any element that overflowed horizontally
     rather than surfacing it during dev. After the input-wrap grid
     refactor (audit #2) there are no known offenders — if a new
     overflow appears we want to SEE the scrollbar, not swallow it. */
  transition: background-color 240ms var(--rw-ease), color 240ms var(--rw-ease);
}
::selection { background: color-mix(in oklab, var(--rw-sage) 35%, transparent); color: var(--rw-text); }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--rw-accent); outline-offset: 2px; border-radius: 2px;
}
img { max-width: 100%; display: block; }
.skip-to-content { position: absolute; left: -9999px; top: auto; }
.skip-to-content:focus {
  left: 16px; top: 16px; padding: 8px 14px;
  background: var(--rw-accent); color: var(--rw-on-accent);
  z-index: 9999;
  font: 500 12px var(--rw-font-mono);
  letter-spacing: var(--rw-track-button);
  text-transform: uppercase;
}

/* SPA view toggling — app.js toggles `.active` on the matching view wrapper */
.view { display: none; }
.view.active, .view.view--active { display: block; }

/* ============================================================ Container / layout */
.rw-container { max-width: var(--rw-max-w); margin: 0 auto; padding-left: var(--rw-gutter); padding-right: var(--rw-gutter); }

/* rw-root compatibility: when the body is the rw-root, inherit palette */
body.rw-root { background: var(--rw-bg); color: var(--rw-text); }

/* ============================================================ Typography extensions */
.rw-h1 { font-family: var(--rw-font-sans); font-weight: 400; font-size: var(--rw-size-h1); line-height: 1.04; letter-spacing: var(--rw-track-heading); margin: 0; color: var(--rw-text); }
.rw-h1 em { font-family: var(--rw-font-serif); font-style: italic; font-weight: 400; color: var(--rw-accent); }
.rw-h2 { font-family: var(--rw-font-sans); font-weight: 500; font-size: var(--rw-size-h2); letter-spacing: var(--rw-track-heading); line-height: 1.08; margin: 0; color: var(--rw-text); }
.rw-h2 em { font-family: var(--rw-font-serif); font-style: italic; font-weight: 400; color: var(--rw-accent); }

/* Size variants on the primary button (tokens.css owns base + --lg) */
.rw-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.rw-btn .arr { transition: transform var(--rw-dur-base) var(--rw-ease); }
.rw-btn:hover .arr { transform: translate(2px, -2px); }
.rw-btn--sm { padding: 10px 18px; min-height: 36px; font-size: 12px; }

/* Light-theme primary button per spec:
     "Light theme: ink fill, paper text. Subtle lift shadow on hover."
   Default tokens already flip bg/fg; this just softens the hover so the
   button lifts gently on paper instead of pulsing a sage halo. */
:root[data-theme="light"] .rw-btn:hover {
  box-shadow: 0 8px 24px -10px rgba(20, 26, 24, 0.35), 0 2px 4px rgba(20, 26, 24, 0.08);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rw-btn:hover {
    box-shadow: 0 8px 24px -10px rgba(20, 26, 24, 0.35), 0 2px 4px rgba(20, 26, 24, 0.08);
  }
}
/* Nav "Get started" button — on light theme, the ink-filled pill should
   sit comfortably in the nav, not look like a hero CTA. Tighten the nav
   variant so it reads as a small, confident action. */
.nav .rw-btn--sm { font-size: 11.5px; padding: 9px 16px; min-height: 34px; border-radius: var(--rw-radius-sm); }

/* Nav context override — `.nav__links a` sets color to --rw-text-muted on
   every anchor for the text links, but the `.rw-btn` + `.rw-btn--ghost`
   children need to keep their own button colors. Without this, the
   Get Started CTA renders with muted text (sage-gray on light theme),
   which looks broken against the ink-filled background. */
.nav__links a.rw-btn        { color: var(--rw-btn-fg) !important; }
.nav__links a.rw-btn:hover  { color: var(--rw-btn-fg) !important; }
.nav__links a.rw-btn--ghost,
.nav__links a.rw-btn--ghost:hover,
.nav__links a.rw-btn.rw-btn--ghost {
  color: var(--rw-text) !important;
  background: transparent;
}
.nav__links a.rw-btn--ghost:hover { color: var(--rw-accent) !important; }

/* Input wrapper (URL-bar style with sage glyph + suffix). Both themes.
   2026-04 mobile audit #2: refactored from flex to grid. The flex
   variant let the typewriter (see site-anim.js startUrlbarTypewriter)
   renegotiate item widths on every character typed/erased, which on
   narrow phones produced visible horizontal jitter of the suffix pill
   as the typed text grew and shrank. Grid with explicit tracks pins
   each cell's position; the typed text can grow into its clipped
   track without ever moving its siblings. Visual output on desktop
   is pixel-identical to the old flex layout. */
.rw-input-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  width: 100%;
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line-strong);
  border-radius: var(--rw-radius-md);
  padding: 0 18px;
  min-height: 56px;
  transition: border-color var(--rw-dur-fast), box-shadow var(--rw-dur-base);
}
.rw-input-wrap:focus-within {
  border-color: var(--rw-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--rw-accent) 25%, transparent);
}
.rw-input-wrap .glyph { color: var(--rw-accent); font-family: var(--rw-font-mono); font-size: 14px; margin-right: 12px; user-select: none; }
/* .text holds either an <input> (form use) or a <span> (the typewriter
   affordance on the home hero). Both variants share typography. The
   min-width:0 is load-bearing: without it the text track would grow
   to fit its intrinsic width, defeating the grid-clipping that keeps
   the typewriter stable. */
.rw-input-wrap .text {
  font-family: var(--rw-font-mono); font-size: var(--rw-size-small); font-weight: 500;
  color: var(--rw-text); background: transparent; border: none; outline: none;
  padding: 14px 0;
  min-width: 0; width: 100%;
  white-space: nowrap; overflow: hidden;
}
.rw-input-wrap .text::placeholder { color: var(--rw-text-dim); }
/* Blinking caret for the hero URL-bar typewriter. Sized to match the
   mono text metrics (~16px cap height). Sits immediately after the
   typed <span> so it hugs the last character as the text grows. */
.rw-input-wrap .caret {
  display: inline-block;
  width: 2px; height: 16px;
  background: var(--rw-accent);
  margin-left: 2px;
  animation: rw-cursor 1s ease-in-out infinite;
  vertical-align: text-bottom;
}
/* Suffix pill sits in its own grid track — position is now pinned by
   the grid template, so removing the flex `margin-left:auto` trick. */
.rw-input-wrap .suffix {
  font-family: var(--rw-font-mono); font-size: var(--rw-size-micro);
  font-weight: 500; letter-spacing: var(--rw-track-label); text-transform: uppercase;
  color: var(--rw-text-dim);
  padding-left: 12px; border-left: 1px solid var(--rw-line); margin-left: 12px;
}

/* Stat block vertical grouping — tokens.css owns .rw-stat-num/.rw-stat-label */
.rw-stat { display: flex; flex-direction: column; gap: 6px; }

/* textarea + select as .rw-input variants */
textarea.rw-input { font-family: var(--rw-font-sans); font-size: 14.5px; resize: vertical; min-height: 96px; line-height: 1.5; }
select.rw-input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--rw-accent) 50%),
    linear-gradient(135deg, var(--rw-accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* ============================================================ Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--rw-bg) 72%, transparent);
  border-bottom: 1px solid var(--rw-line);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; max-width: var(--rw-max-w); margin: 0 auto;
  padding: 0 var(--rw-gutter);
}
.nav__logo {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--rw-font-sans); font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--rw-text);
}
.nav__logo img { max-height: 28px; width: auto; }
.nav__logo span { font-family: var(--rw-font-serif); font-style: italic; font-weight: 400; color: var(--rw-accent); }
.nav__right { display: inline-flex; align-items: center; gap: 20px; }
.nav__links { display: none; align-items: center; gap: 24px; }
.nav__links a {
  font-family: var(--rw-font-mono); font-size: var(--rw-size-label);
  font-weight: 500; letter-spacing: var(--rw-track-button);
  text-transform: uppercase; color: var(--rw-text-muted);
  transition: color var(--rw-dur-fast);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--rw-text); }
@media (min-width: 900px) { .nav__links { display: inline-flex; } }

.nav__hamburger {
  display: inline-flex; background: transparent; border: 1px solid var(--rw-line);
  color: var(--rw-text); border-radius: var(--rw-radius-sm); padding: 8px;
  cursor: pointer; align-items: center; justify-content: center;
}
@media (min-width: 900px) { .nav__hamburger { display: none; } }
.nav__mobile {
  display: none; position: absolute; top: 64px; left: 0; right: 0;
  background: var(--rw-bg-raised); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rw-line);
  padding: 16px var(--rw-gutter); flex-direction: column; gap: 12px;
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a {
  font-family: var(--rw-font-mono); font-size: var(--rw-size-label);
  font-weight: 500; letter-spacing: var(--rw-track-button);
  text-transform: uppercase; color: var(--rw-text);
  padding: 10px 0; border-bottom: 1px dashed var(--rw-line);
}
/* 2026-04-25: the "Get started" CTA in the mobile menu uses .rw-btn
   (sage background) but was inheriting the plain .nav__mobile a
   color rule above (var(--rw-text) — cream on dark, ink on light),
   which gave cream-on-sage contrast that was unreadable on mobile.
   Force white and strip the inherited bottom dashed border so the
   button reads as a button, not as a link row. */
.nav__mobile a.rw-btn {
  color: #ffffff;
  border-bottom: none;
}

/* ============================================================ Hero */
.hero {
  position: relative;
  /* Top padding reduced ~25% (120 -> 88 desktop, 56 -> 40 mobile) per
     2026-04 content-consistency direction: the gap between the nav and
     the hero headline was calling too much attention to dead space.
     Bottom padding stays full-height so the hero still feels airy. */
  padding: clamp(40px, 6vw, 88px) 0 clamp(80px, 10vw, 160px);
  background: var(--rw-bg-page); overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--rw-grid-stroke) 1px, transparent 1px),
    linear-gradient(90deg, var(--rw-grid-stroke) 1px, transparent 1px);
  background-size: 64px 64px; opacity: 0.5;
  mask-image: radial-gradient(ellipse at 30% 25%, black 0%, black 45%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 25%, black 0%, black 45%, transparent 80%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--rw-bg-glow);
}
.hero__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--rw-space-6); z-index: 1; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(420px, 1fr); align-items: center; } }
.hero__copy { max-width: 640px; }
.hero__copy h1 { max-width: 12ch; margin-bottom: var(--rw-space-4); }
.hero__lead { max-width: var(--rw-measure); font-size: clamp(15px, 1.15vw, 17px); color: var(--rw-text-muted); line-height: 1.55; margin: 0 0 var(--rw-space-4); }
.hero__lead strong { color: var(--rw-text); font-weight: 500; }
/* The home-hero H1 carries a longer two-sentence headline ("Simplify the
   complex. Enhance your understanding.") than the base .rw-display
   clamp assumes. Scope it down so the copy fits on 1-2 lines without
   wrapping mid-sentence on common breakpoints. Keeps the design-system
   Fraunces italic accent on `<em>` intact. */
#home-hero-title.rw-display {
  /* 2026-04 mobile audit #19: floor bumped 32→36 so the headline
     keeps presence on small phones. Desktop uses the 5vw branch
     (which is ≥36 at any viewport ≥720px), so desktop rendering is
     unchanged. */
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
/* 2026-04 mobile audit #5: reserve the exact height the URL-bar
   occupies (min-height 56 on .rw-input-wrap + 0 margin here) so the
   typewriter cycle can't change the hero's vertical rhythm while
   it types empty→full. Desktop rendering is unchanged because the
   wrap was already 56px tall; this just makes the reservation
   explicit so nothing downstream shifts on empty→populated. */
.hero__input { max-width: 560px; min-height: 56px; margin-bottom: var(--rw-space-3); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--rw-space-5); }
.hero__trust { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); font-weight: 500; letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); }
.hero__trust .rw-dot { width: 6px; height: 6px; box-shadow: 0 0 8px var(--rw-accent); }
/* 2026-04 mobile audit #21: stabilise the live-queue digit so the
   eyebrow pill width doesn't nudge when the count crosses single →
   double digit (every 30s paint in site-anim.js rwPaintLiveQueue).
   tabular-nums + min-width:1.25ch reserves space for a two-digit
   figure; single-digit values centre in that slot. Pill outer
   width is stable regardless of count. Desktop effect is ~6px of
   extra pill width when the count is single-digit; visually
   imperceptible. */
.rw-eyebrow [data-live-queue] .n {
  display: inline-block;
  min-width: 1.25ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ============================================================ Live analysis card */
.live-card {
  position: relative;
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  border-radius: 8px;
  padding: var(--rw-space-3);
  overflow: hidden;
  box-shadow: var(--rw-shadow-card);
}
.live-card::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in oklab, var(--rw-accent) 35%, transparent) 30deg, transparent 60deg, transparent 360deg);
  animation: rw-sweep 6s linear infinite;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px; border-radius: 8px; opacity: 0.55;
}
/* 2026-04 mobile audit #6: conic-gradient + mask-composite is
   genuinely expensive on phone GPUs — it re-rasterises at ~60fps
   for the 6s sweep animation, warming the compositor the whole
   time the home page is visible. Below 900px we drop the sweep
   and render a static opacity=0.25 sage edge instead. Desktop
   keeps the full sweep. */
@media (max-width: 899px) {
  .live-card::before {
    animation: none;
    background: linear-gradient(135deg, color-mix(in oklab, var(--rw-accent) 20%, transparent), transparent 60%);
    opacity: 0.25;
  }
}
.live-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--rw-space-3); gap: 16px; flex-wrap: wrap; }
.live-card__title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--rw-font-mono); font-size: var(--rw-size-label); font-weight: 500; letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-muted); }
.live-card__meta { font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); }
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: var(--rw-space-3); }
/* 2026-04 mobile audit #7: replaced `transition: all` with a
   property whitelist. `all` forces the compositor to watch every
   animatable property on every .is-active / .is-done class flip
   (one every 1.8s from site-anim.js startPipelineAnim). Scoping
   to the three properties that actually change eliminates a pile
   of phantom property-change checks per tick. Desktop output is
   visually identical. */
.pipe-step { border: 1px solid var(--rw-line); border-radius: var(--rw-radius-sm); padding: 10px 8px; font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); text-align: center; position: relative; transition: color var(--rw-dur-base), border-color var(--rw-dur-base), box-shadow var(--rw-dur-base); }
.pipe-step .num { display: block; font-size: 9px; color: var(--rw-text-dim); opacity: 0.7; margin-bottom: 4px; }
.pipe-step.is-done { color: var(--rw-text); border-color: color-mix(in oklab, var(--rw-accent) 45%, transparent); }
.pipe-step.is-done::after { content: '✓'; position: absolute; top: 4px; right: 6px; color: var(--rw-accent); font-size: 10px; }
.pipe-step.is-active { color: var(--rw-accent-fg); border-color: var(--rw-accent); box-shadow: 0 0 18px -6px var(--rw-accent); }
.pipe-step.is-active::after { content: ''; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 2px; background: var(--rw-accent-fg); box-shadow: 0 0 10px var(--rw-accent); animation: rw-pulse 1.4s ease-in-out infinite; }
.findings { display: flex; flex-direction: column; gap: 0; }
.finding { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--rw-line); }
.finding:last-child { border-bottom: 0; }
.finding .sev { font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.finding .desc { font-family: var(--rw-font-sans); font-size: 13.5px; color: var(--rw-text); line-height: 1.4; }
.finding .desc .tech { color: var(--rw-text-muted); }
.finding .cost { font-family: var(--rw-font-mono); font-size: var(--rw-size-small); color: var(--rw-text); white-space: nowrap; }
.sev--alert { color: var(--rw-alert); }
.sev--amber { color: var(--rw-amber); }
.sev--sage  { color: var(--rw-accent-fg); }
:root[data-theme="light"] .sev--alert { color: var(--rw-alert-deep); }
:root[data-theme="light"] .sev--amber { color: var(--rw-amber-deep); }
.live-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--rw-space-3); padding-top: var(--rw-space-2); border-top: 1px solid var(--rw-line); font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); gap: 12px; flex-wrap: wrap; }
.live-card__foot strong { color: var(--rw-text); font-weight: 500; }

/* ============================================================ Ticker (report types, trust signals) */
.ticker {
  border-top: 1px solid var(--rw-line);
  border-bottom: 1px solid var(--rw-line);
  overflow: hidden; padding: 14px 0;
  background: var(--rw-bg-sunken);
}
.ticker__track { display: flex; gap: 36px; white-space: nowrap; animation: rw-scroll 44s linear infinite; }
.ticker__track > span {
  font-family: var(--rw-font-mono); font-size: var(--rw-size-label);
  font-weight: 500;
  letter-spacing: var(--rw-track-label); text-transform: uppercase;
  color: var(--rw-text-muted);
  display: inline-flex; align-items: center; gap: 36px; flex-shrink: 0;
}
.ticker__track > span::after { content: '◆'; color: var(--rw-accent); opacity: 0.6; }

/* ============================================================ Section base */
.section { padding: clamp(72px, 10vw, 120px) 0; position: relative; }
/* First-under-nav top-padding reduction (~25%). Pages that start with
   `.section` (pricing / about / contact / guides / etc.) or `.rw-crumbs`
   (per-type report pages) had 72-120 px of dead space between the nav
   and the first heading. Scoped to `main > :first-child` so only the
   leading block shrinks; mid-page section rhythm stays untouched. */
main > .section:first-child,
main > section.section:first-of-type:not(.hero) {
  padding-top: clamp(52px, 7vw, 88px);
}
main > .rw-crumbs:first-child {
  padding-top: calc(var(--rw-nav-h, 64px) + 8px);
}
.section__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--rw-space-5); max-width: 720px; }
.section__head .rw-eyebrow { align-self: flex-start; }
.section__head p { color: var(--rw-text-muted); max-width: 58ch; margin: 0; }

/* Steps (method 3-stage) */
.steps { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rw-line); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); border-top: 0; } }
.step { padding: var(--rw-space-4) 0; border-bottom: 1px solid var(--rw-line); }
@media (min-width: 900px) {
  .step { border-bottom: 0; border-top: 1px solid var(--rw-line); padding: var(--rw-space-4) var(--rw-space-3); }
  .step + .step { border-left: 1px solid var(--rw-line); }
  .step:first-child { padding-left: 0; } .step:last-child { padding-right: 0; }
}
.step__num { font-family: var(--rw-font-mono); font-size: var(--rw-size-label); font-weight: 500; letter-spacing: var(--rw-track-label); color: var(--rw-accent); display: inline-block; margin-bottom: 18px; }
.step h3 { font-family: var(--rw-font-sans); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--rw-text); }
.step p { color: var(--rw-text-muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; max-width: 38ch; }
.step ul { list-style: none; padding: 0; margin: 0; font-family: var(--rw-font-mono); font-size: var(--rw-size-small); color: var(--rw-text-muted); }
.step ul li { padding: 4px 0; border-top: 1px dashed var(--rw-line); display: flex; justify-content: space-between; gap: 12px; }
.step ul li:first-child { border-top: 0; }
.step ul li span:last-child { color: var(--rw-text); }

/* ============================================================ Spec table (reports catalog, orders, blog index) */
.spec-table { width: 100%; border-collapse: collapse; font-family: var(--rw-font-mono); font-size: var(--rw-size-small); color: var(--rw-text); }
.spec-table thead th { text-align: left; font-weight: 500; font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); padding: 14px 16px; border-bottom: 1px solid var(--rw-line); }
.spec-table tbody td { padding: 16px; border-bottom: 1px solid var(--rw-line); color: var(--rw-text); vertical-align: top; }
.spec-table tbody tr { transition: background var(--rw-dur-fast); }
.spec-table tbody tr:hover { background: color-mix(in oklab, var(--rw-accent) 6%, transparent); }
.spec-table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--rw-accent); }
.spec-table .col-num { width: 44px; color: var(--rw-text-dim); }
.spec-table .col-type { font-family: var(--rw-font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; }
.spec-table .col-findings { color: var(--rw-text-muted); font-family: var(--rw-font-sans); font-size: 13.5px; max-width: 38ch; }
.spec-table .col-std, .spec-table .col-pages { white-space: nowrap; }
.spec-table .arr-col { width: 30px; color: var(--rw-text-dim); text-align: right; }
/* Linked-row variant: the type cell carries a full-row-spanning anchor.
   Used on /reports so each row deep-links to /reports/<slug>. */
.spec-table--linked .col-type a { color: var(--rw-text); text-decoration: none; }
.spec-table--linked tbody tr:hover .col-type a { color: var(--rw-accent); }
.spec-table--linked tbody tr:hover .arr-col { color: var(--rw-accent); }

.spec-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--rw-space-4); padding-bottom: var(--rw-space-3); border-bottom: 1px solid var(--rw-line); }
.filter-chip { font-family: var(--rw-font-mono); font-size: var(--rw-size-label); font-weight: 500; letter-spacing: var(--rw-track-button); text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--rw-line); border-radius: var(--rw-radius-sm); color: var(--rw-text-muted); background: transparent; cursor: pointer; transition: all var(--rw-dur-fast); }
.filter-chip:hover { color: var(--rw-text); border-color: var(--rw-line-strong); }
.filter-chip.is-on { color: var(--rw-on-accent); background: var(--rw-accent); border-color: var(--rw-accent); }

.spec-footer { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; margin-top: var(--rw-space-4); padding-top: var(--rw-space-3); border-top: 1px solid var(--rw-line); font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); }
.spec-footer a { color: var(--rw-accent); }

/* ============================================================ Coverage grid (landing pages) */
.coverage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--rw-line); border-bottom: 1px solid var(--rw-line); }
.coverage-row { padding: var(--rw-space-3); border-top: 1px dashed var(--rw-line); }
.coverage-row:first-child, .coverage-row:nth-child(2), .coverage-row:nth-child(3), .coverage-row:nth-child(4) { border-top: 0; }
@media (min-width: 1000px) { .coverage-row:not(:first-child):not(:nth-child(4n+1)) { border-left: 1px solid var(--rw-line); } }
.coverage-row .num { font-family: var(--rw-font-mono); font-size: var(--rw-size-label); letter-spacing: var(--rw-track-label); color: var(--rw-accent); margin-bottom: 10px; display: block; }
.coverage-row h3 { font-family: var(--rw-font-sans); font-weight: 500; font-size: 18px; letter-spacing: -0.005em; margin: 0 0 8px; color: var(--rw-text); }
.coverage-row p { font-family: var(--rw-font-sans); font-size: 13.5px; color: var(--rw-text-muted); margin: 0; line-height: 1.5; max-width: 32ch; }
.coverage-row .spec { margin-top: 10px; font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-accent); }

/* ============================================================ Stats strip (use .rw-plinth wrapper per spec) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; }
.stats .rw-stat { padding: var(--rw-space-3) var(--rw-space-4); border-right: 1px solid var(--rw-line); }
.stats .rw-stat:last-child { border-right: 0; }
@media (max-width: 720px) { .stats .rw-stat { border-right: 0; border-bottom: 1px solid var(--rw-line); } .stats .rw-stat:last-child { border-bottom: 0; } }
.stats .rw-stat-num { font-size: clamp(32px, 3.5vw, 48px); }

/* ============================================================ Pricing */
.price-grid { display: grid; grid-template-columns: 1fr; gap: var(--rw-space-2); }
@media (min-width: 820px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 820px) { .price-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.price-card {
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-radius-md);
  padding: var(--rw-space-4);
  display: flex; flex-direction: column; gap: var(--rw-space-2);
  position: relative;
  box-shadow: var(--rw-shadow-card);
}
.price-card--featured { border-top: 2px solid var(--rw-accent); }
.price-card .plan { font-family: var(--rw-font-mono); font-size: var(--rw-size-label); font-weight: 500; letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-muted); }
.price-card .price { font-family: var(--rw-font-serif); font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: var(--rw-track-heading); color: var(--rw-text); }
.price-card .price sup { font-family: var(--rw-font-mono); font-size: 13px; color: var(--rw-text-dim); letter-spacing: var(--rw-track-label); vertical-align: 24px; margin-left: 6px; }
.price-card .note { font-family: var(--rw-font-sans); font-size: 14px; color: var(--rw-text-muted); margin: 0 0 var(--rw-space-2); line-height: 1.5; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 var(--rw-space-3); font-family: var(--rw-font-mono); font-size: var(--rw-size-small); color: var(--rw-text); }
.price-card ul li { padding: 8px 0; border-top: 1px dashed var(--rw-line); display: flex; justify-content: space-between; gap: 12px; }
.price-card ul li:first-child { border-top: 0; }
.price-card ul li .k { color: var(--rw-text-muted); }
.price-card .rw-btn { margin-top: auto; justify-content: center; }
/* Subscription checkout status message (beneath the Agent plan button) */
.price-card .subs-msg { margin: 12px 0 0; min-height: 1.2em; font-family: var(--rw-font-mono); font-size: 12px; letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-muted); text-align: center; }
.price-card .subs-msg:empty { display: none; }
.price-card--featured::after {
  content: 'MOST SHIPPED';
  position: absolute; top: -10px; right: 16px;
  background: var(--rw-accent); color: var(--rw-on-accent);
  font-family: var(--rw-font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: var(--rw-track-label); text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--rw-radius-sm);
}

/* ============================================================ FAQ */
.faq { border-top: 1px solid var(--rw-line); }
.faq details { border-bottom: 1px solid var(--rw-line); padding: 22px 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-family: var(--rw-font-sans); font-size: 17px; font-weight: 500; letter-spacing: -0.005em; color: var(--rw-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--rw-font-mono); font-size: 22px; color: var(--rw-accent); line-height: 1; flex-shrink: 0; transition: transform var(--rw-dur-fast); }
.faq details[open] summary::after { content: '–'; }
.faq .q-num { font-family: var(--rw-font-mono); font-size: var(--rw-size-label); font-weight: 500; letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-accent); margin-right: 18px; }
.faq .answer { margin-top: 14px; color: var(--rw-text-muted); font-size: 15px; line-height: 1.65; max-width: 60ch; }
.faq .answer .tech { font-family: var(--rw-font-mono); font-size: 13px; color: var(--rw-accent-fg); }

/* ============================================================ Essay (method / blog post) */
.essay { display: grid; grid-template-columns: 1fr; gap: var(--rw-space-4); }
@media (min-width: 1000px) { .essay { grid-template-columns: 140px minmax(0, 680px); gap: var(--rw-space-5); } }
.essay__nav { font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); }
.essay__nav ol { list-style: none; padding: 0; margin: 0; position: sticky; top: 120px; }
.essay__nav li { padding: 8px 0; border-top: 1px dashed var(--rw-line); }
.essay__nav li:first-child { border-top: 0; }
.essay__nav a { color: inherit; display: flex; justify-content: space-between; gap: 8px; }
.essay__nav a:hover, .essay__nav a.is-active { color: var(--rw-accent); }
.essay__body { max-width: 680px; font-size: 17px; line-height: 1.7; color: var(--rw-text); }
.essay__body > *:first-child { margin-top: 0; }
.essay__body .dropcap::first-letter { font-family: var(--rw-font-serif); font-weight: 400; font-style: italic; font-size: 3.4em; line-height: 0.9; float: left; margin: 6px 10px 0 -2px; color: var(--rw-accent); }
.essay__body h3 { font-family: var(--rw-font-sans); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; margin: 48px 0 14px; color: var(--rw-text); }
.essay__body h3 .sec-num { font-family: var(--rw-font-mono); font-weight: 500; font-size: 12px; letter-spacing: var(--rw-track-label); color: var(--rw-accent); margin-right: 14px; }
.essay__body p { margin: 0 0 22px; color: var(--rw-text-muted); }
.essay__body .tech { font-family: var(--rw-font-mono); font-size: 14px; color: var(--rw-accent); }
.pullquote { border-left: 2px solid var(--rw-accent); padding: 8px 20px; margin: 40px 0; font-family: var(--rw-font-serif); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.35; color: var(--rw-text); }
.pullquote cite { display: block; margin-top: 14px; font-family: var(--rw-font-mono); font-style: normal; font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); }

/* ============================================================ Upload form */
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--rw-space-4); }
@media (min-width: 900px) { .form-grid { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); } }
.form-group { margin-bottom: var(--rw-space-3); }
.form-group label.rw-label { display: block; margin-bottom: 8px; }
.drop-zone { border: 1.5px dashed var(--rw-line); border-radius: var(--rw-radius-md); padding: var(--rw-space-4); text-align: center; transition: all var(--rw-dur-fast); cursor: pointer; background: var(--rw-bg-raised); }
.drop-zone:hover, .drop-zone.is-drag { border-color: var(--rw-accent); background: color-mix(in oklab, var(--rw-accent) 6%, var(--rw-bg-raised)); }
.drop-zone .icn { width: 36px; height: 36px; color: var(--rw-accent); margin: 0 auto 14px; display: block; }
.drop-zone .head { font-family: var(--rw-font-sans); font-size: 17px; font-weight: 500; margin: 0 0 6px; color: var(--rw-text); }
.drop-zone .sub { font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); margin: 0; }
.tier-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tier-tile { border: 1px solid var(--rw-line); border-radius: var(--rw-radius-md); padding: 18px; cursor: pointer; position: relative; background: var(--rw-bg-raised); transition: all var(--rw-dur-fast); }
.tier-tile:hover { border-color: color-mix(in oklab, var(--rw-accent) 50%, var(--rw-line)); }
.tier-tile.is-on { border-color: var(--rw-accent); box-shadow: 0 0 18px -6px var(--rw-accent); }
.tier-tile .label { font-family: var(--rw-font-mono); font-size: var(--rw-size-label); font-weight: 500; letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-muted); }
.tier-tile .cost { font-family: var(--rw-font-serif); font-size: 32px; letter-spacing: var(--rw-track-heading); margin: 8px 0 4px; line-height: 1; color: var(--rw-text); }
.tier-tile .cost sup { font-family: var(--rw-font-mono); font-size: 11px; color: var(--rw-text-dim); letter-spacing: var(--rw-track-label); vertical-align: 14px; margin-left: 4px; }
.tier-tile .sla { font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); }
.tier-tile.is-on .sla { color: var(--rw-accent-fg); }
.form-summary { background: var(--rw-bg-raised); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-md); padding: var(--rw-space-3); position: sticky; top: 140px; }
.form-summary h4 { font-family: var(--rw-font-mono); font-size: var(--rw-size-label); font-weight: 500; letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-muted); margin: 0 0 var(--rw-space-2); }
.form-summary ul { list-style: none; padding: 0; margin: 0 0 var(--rw-space-2); font-family: var(--rw-font-mono); font-size: var(--rw-size-small); color: var(--rw-text); }
.form-summary ul li { padding: 8px 0; border-top: 1px dashed var(--rw-line); display: flex; justify-content: space-between; gap: 12px; }
.form-summary ul li:first-child { border-top: 0; }
.form-summary ul li .k { color: var(--rw-text-muted); }
.form-summary .total-row { margin-top: var(--rw-space-2); padding-top: var(--rw-space-2); border-top: 1px solid var(--rw-line); display: flex; justify-content: space-between; align-items: baseline; font-family: var(--rw-font-mono); }
.form-summary .total-row .k { font-size: var(--rw-size-label); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-muted); }
.form-summary .total-row .v { font-family: var(--rw-font-serif); font-size: 32px; color: var(--rw-text); }
.form-summary .total-row .v sup { font-family: var(--rw-font-mono); font-size: 11px; color: var(--rw-text-dim); letter-spacing: var(--rw-track-label); vertical-align: 14px; margin-left: 4px; }

/* ============================================================ Account dashboard */
.dash-head { display: grid; grid-template-columns: 1fr auto; gap: var(--rw-space-3); align-items: start; padding-bottom: var(--rw-space-4); border-bottom: 1px solid var(--rw-line); flex-wrap: wrap; }
@media (max-width: 640px) { .dash-head { grid-template-columns: 1fr; } }
.dash-head h2 { font-family: var(--rw-font-sans); font-weight: 500; font-size: 32px; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--rw-text); }
.dash-head h2 em { font-family: var(--rw-font-serif); font-style: italic; font-weight: 400; color: var(--rw-accent); }
.dash-head .email { font-family: var(--rw-font-mono); font-size: var(--rw-size-small); color: var(--rw-text-muted); }
.sub-banner { background: var(--rw-bg-raised); border: 1px solid color-mix(in oklab, var(--rw-accent) 35%, transparent); border-radius: var(--rw-radius-md); padding: var(--rw-space-3); display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin: var(--rw-space-4) 0; }
@media (max-width: 640px) { .sub-banner { grid-template-columns: 1fr; } }
.sub-banner .plan { display: inline-flex; align-items: center; gap: 10px; font-family: var(--rw-font-mono); font-size: var(--rw-size-label); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-accent-fg); margin-bottom: 6px; }
.sub-banner h3 { margin: 0 0 6px; font-family: var(--rw-font-sans); font-weight: 500; font-size: 20px; color: var(--rw-text); }
.sub-banner .meta { font-family: var(--rw-font-mono); font-size: var(--rw-size-small); color: var(--rw-text-muted); }
.sub-banner .meta strong { color: var(--rw-text); font-weight: 500; }
.sub-banner .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.orders-table { width: 100%; border-collapse: collapse; font-family: var(--rw-font-mono); font-size: var(--rw-size-small); margin-top: var(--rw-space-4); color: var(--rw-text); }
.orders-table thead th { text-align: left; font-weight: 500; font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); padding: 14px; border-bottom: 1px solid var(--rw-line); }
.orders-table tbody td { padding: 16px 14px; border-bottom: 1px solid var(--rw-line); vertical-align: middle; }
.orders-table tbody tr { transition: background var(--rw-dur-fast); }
.orders-table tbody tr:hover { background: color-mix(in oklab, var(--rw-accent) 6%, transparent); }
.orders-table .col-ref { color: var(--rw-text); }
.orders-table .col-addr { font-family: var(--rw-font-sans); font-size: 13.5px; color: var(--rw-text); max-width: 32ch; }
.orders-table .col-addr small { display: block; color: var(--rw-text-muted); font-size: 11px; margin-top: 2px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; border-radius: var(--rw-radius-pill); border: 1px solid var(--rw-line); color: var(--rw-text-muted); }
.status-pill--delivered, .status-pill--analysing, .status-pill--queued, .status-pill--paid { color: var(--rw-accent-fg); border-color: color-mix(in oklab, var(--rw-accent) 45%, transparent); }
.status-pill--review { color: var(--rw-amber); border-color: color-mix(in oklab, var(--rw-amber) 45%, transparent); }
.status-pill--failed, .status-pill--analysis_failed { color: var(--rw-alert); border-color: color-mix(in oklab, var(--rw-alert) 45%, transparent); }
:root[data-theme="light"] .status-pill--review { color: var(--rw-amber-deep); }
:root[data-theme="light"] .status-pill--failed, :root[data-theme="light"] .status-pill--analysis_failed { color: var(--rw-alert-deep); }

/* ============================================================ Testimonials (landing) */
.testimonials { display: grid; grid-template-columns: 1fr; gap: var(--rw-space-3); }
@media (min-width: 900px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.quote-card {
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-radius-md);
  padding: var(--rw-space-3);
  display: flex; flex-direction: column; gap: var(--rw-space-2);
  box-shadow: var(--rw-shadow-card);
}
.quote-card .quote-num { font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); color: var(--rw-accent); }
.quote-card .quote { font-family: var(--rw-font-serif); font-style: italic; font-size: 19px; line-height: 1.45; color: var(--rw-text); margin: 0; }
.quote-card .q-savings { font-family: var(--rw-font-mono); font-size: var(--rw-size-small); color: var(--rw-accent); font-weight: 500; }
.quote-card cite { font-style: normal; font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-muted); border-top: 1px solid var(--rw-line); padding-top: var(--rw-space-2); }

/* ============================================================ CTA band (landing final) */
.cta-band {
  background: var(--rw-bg-page);
  border-top: 1px solid var(--rw-line);
  border-bottom: 1px solid var(--rw-line);
  padding: var(--rw-space-6) 0;
  text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--rw-bg-glow);
}
.cta-band__inner { position: relative; z-index: 1; max-width: var(--rw-max-w); margin: 0 auto; padding: 0 var(--rw-gutter); }
.cta-band h2 { max-width: 18ch; margin: 0 auto var(--rw-space-2); color: var(--rw-text); }
.cta-band p { max-width: 48ch; margin: 0 auto var(--rw-space-4); color: var(--rw-text-muted); }
.cta-band .ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ============================================================ Site footer */
.site-footer {
  padding: var(--rw-space-5) 0 var(--rw-space-3);
  border-top: 1px solid var(--rw-line);
  background: var(--rw-bg);
}
.site-footer .container, .site-footer .rw-container { max-width: var(--rw-max-w); margin: 0 auto; padding: 0 var(--rw-gutter); }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--rw-space-3); margin-bottom: var(--rw-space-4); }
/* 2026-04: was 4-column (brand + Product + Company + Resources). The
   Resources column held crawler-facing links (sitemap/robots/llms.txt)
   that added zero human value; removed and regrid at 3 columns so the
   brand column breathes. */
@media (min-width: 800px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__brand { max-width: 36ch; }
.site-footer__logo { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--rw-font-sans); font-size: 18px; font-weight: 500; color: var(--rw-text); margin-bottom: 14px; }
.site-footer__logo span { color: var(--rw-accent); font-family: var(--rw-font-serif); font-style: italic; font-weight: 400; }
.site-footer__tagline { color: var(--rw-text-muted); font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.site-footer__meta { font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); margin: 0; }
.site-footer h4 { font-family: var(--rw-font-mono); font-size: var(--rw-size-label); font-weight: 500; letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-muted); margin: 0 0 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; font-family: var(--rw-font-mono); font-size: var(--rw-size-small); }
.site-footer ul li { padding: 4px 0; }
.site-footer ul li a { color: var(--rw-text-muted); transition: color var(--rw-dur-fast); }
.site-footer ul li a:hover { color: var(--rw-text); }
.site-footer__legal { padding-top: var(--rw-space-3); border-top: 1px solid var(--rw-line); font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); }
.site-footer__legal p { margin: 0 0 8px; }
.site-footer__disclaimer { text-transform: none; letter-spacing: 0; font-family: var(--rw-font-sans); font-size: 12px; color: var(--rw-text-dim); max-width: 80ch; line-height: 1.55; }

/* ============================================================
   Admin console — dual-theme, design-system-aligned.
   ------------------------------------------------------------
   The admin surface has three pages: /admin (login), /admin/*
   (console shell with sidebar), and /admin/order/<id> (detail
   with same shell). Most of the content is injected by app.js
   (loadAdminSection / loadOrderDetail) — this block styles the
   shell chrome AND the common JS-emitted primitives (.stat-card,
   .detail-section, .settings-section, .sample-grid, etc.) so the
   whole console sits inside the token system.
   ============================================================ */

/* ---- Login card ---------------------------------------------- */
.admin-login {
  min-height: calc(100vh - 200px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--rw-space-5) var(--rw-gutter);
  background: var(--rw-bg-page);
}
.admin-login__card {
  width: 100%; max-width: 440px;
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  border-left: 3px solid var(--rw-accent);
  border-radius: var(--rw-radius-md);
  padding: var(--rw-space-4);
  box-shadow: var(--rw-shadow-card);
}
.admin-login__lead { font-family: var(--rw-font-sans); font-size: 14.5px; color: var(--rw-text-muted); line-height: 1.55; margin: 0 0 var(--rw-space-3); }
.admin-login__submit { width: 100%; justify-content: center; margin-top: var(--rw-space-2); }
.admin-login__foot { font-family: var(--rw-font-mono); font-size: 11px; letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); margin: var(--rw-space-3) 0 0; text-align: center; }

/* ---- Shell (legacy sidebar layout, kept for back-compat) ----
   The admin nav moved into the top header in 2026-04; admin.html +
   admin-detail.html no longer emit `.admin-shell`. This rule is kept
   only in case an older admin template re-introduces the sidebar. */
.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  min-height: calc(100vh - 140px);
  background: var(--rw-bg-page);
}
@media (max-width: 860px) {
  .admin-shell { grid-template-columns: 1fr; }
}

/* ---- Admin nav in top header (nav--admin class on .nav) -----
   When _applyAdminNav() swaps the public links for the admin menu,
   it adds `nav--admin` to the <nav>. We restyle `.nav__links a`
   within that scope: more spacing, smaller emoji glyph, active
   item in sage. */
.nav--admin .nav__links { gap: 14px; }
.nav--admin .nav__links a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--rw-text-muted);
  font-family: var(--rw-font-mono); font-size: 12px;
  letter-spacing: var(--rw-track-button); text-transform: uppercase;
  padding: 8px 10px; border-radius: var(--rw-radius-sm);
  transition: color var(--rw-dur-fast), background var(--rw-dur-fast);
}
.nav--admin .nav__links a:hover {
  color: var(--rw-text);
  background: color-mix(in oklab, var(--rw-accent) 7%, transparent);
}
.nav--admin .nav__links a.is-active {
  color: var(--rw-accent-fg);
  background: color-mix(in oklab, var(--rw-accent) 12%, transparent);
}
.nav--admin .nav__links a.admin-logout-link {
  color: var(--rw-text-dim);
  margin-left: 6px;
  border-left: 1px solid var(--rw-line);
  padding-left: 14px;
}
.nav--admin .nav__links a.admin-logout-link:hover { color: var(--rw-alert); background: transparent; }
/* Mobile admin menu — same emoji + label, stacked */
.nav--admin .nav__mobile a {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--rw-font-mono); font-size: 13px;
  letter-spacing: var(--rw-track-button); text-transform: uppercase;
  color: var(--rw-text-muted);
}
.nav--admin .nav__mobile a.is-active { color: var(--rw-accent-fg); }
.nav--admin .nav__mobile a.admin-logout-link { color: var(--rw-text-dim); border-top: 1px solid var(--rw-line); margin-top: 6px; padding-top: 12px; }

/* ---- Sidebar ------------------------------------------------- */
.admin-sidebar {
  display: flex; flex-direction: column;
  padding: var(--rw-space-3) 0;
  background: var(--rw-bg-raised);
  border-right: 1px solid var(--rw-line);
  min-height: 100%;
}
@media (max-width: 860px) {
  .admin-sidebar {
    flex-direction: row; flex-wrap: wrap; overflow-x: auto;
    border-right: none; border-bottom: 1px solid var(--rw-line);
    padding: var(--rw-space-2);
  }
}
.admin-sidebar__brand {
  display: block; padding: 4px var(--rw-space-3) var(--rw-space-3);
  font-family: var(--rw-font-mono); font-size: var(--rw-size-micro);
  letter-spacing: var(--rw-track-label); text-transform: uppercase;
  color: var(--rw-text-dim); border-bottom: 1px solid var(--rw-line);
  margin-bottom: var(--rw-space-2);
}
@media (max-width: 860px) { .admin-sidebar__brand { display: none; } }
.admin-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 860px) {
  .admin-sidebar__nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
}
.admin-sidebar__link,
.admin-sidebar__logout {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px var(--rw-space-3);
  font-family: var(--rw-font-mono); font-size: 12.5px;
  font-weight: 500; letter-spacing: var(--rw-track-label);
  text-transform: uppercase; color: var(--rw-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--rw-dur-fast), color var(--rw-dur-fast), border-color var(--rw-dur-fast);
}
.admin-sidebar__link:hover,
.admin-sidebar__logout:hover {
  color: var(--rw-text);
  background: color-mix(in oklab, var(--rw-accent) 6%, transparent);
}
.admin-sidebar__link.active {
  color: var(--rw-accent-fg);
  background: color-mix(in oklab, var(--rw-accent) 10%, transparent);
  border-left-color: var(--rw-accent);
}
.admin-sidebar__logout {
  margin-top: auto;
  color: var(--rw-text-dim);
  border-top: 1px solid var(--rw-line);
  padding-top: var(--rw-space-3);
}
.admin-sidebar__logout:hover { color: var(--rw-alert); }
.admin-sidebar__glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; font-size: 14px; color: var(--rw-text-dim);
  font-family: var(--rw-font-mono);
}
.admin-sidebar__link.active .admin-sidebar__glyph { color: var(--rw-accent); }

/* ---- Main content area --------------------------------------
   Default padding assumes the admin sidebar is present. The
   `--standalone` modifier is used when the sidebar is gone and the
   content spans the full viewport (admin.html + admin-detail.html
   as of 2026-04). It applies a ~5% horizontal gutter so data tables
   and forms don't hug the edges. */
.admin-main {
  padding: var(--rw-space-4);
  min-width: 0; /* so children (tables) can overflow-x */
  background: var(--rw-bg-page);
}
.admin-main--standalone {
  padding: var(--rw-space-4) clamp(24px, 5vw, 80px);
  min-height: calc(100vh - 140px);
}
@media (max-width: 860px) {
  .admin-main { padding: var(--rw-space-3); }
  .admin-main--standalone { padding: var(--rw-space-3) clamp(16px, 4vw, 32px); }
}

/* All headings inside admin pages: sans, tight leading, single weight */
.admin-main h1, .admin-main h2, .admin-main h3, .admin-main h4 {
  font-family: var(--rw-font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--rw-text);
  margin: 0 0 16px;
  line-height: 1.2;
}
.admin-main h1 { font-size: 28px; margin-top: 0; }
.admin-main h2 { font-size: 22px; margin-top: var(--rw-space-4); }
.admin-main h3 { font-size: 18px; margin-top: var(--rw-space-3); }
.admin-main h4 { font-size: 15px; text-transform: uppercase; letter-spacing: var(--rw-track-label); font-family: var(--rw-font-mono); color: var(--rw-text-dim); }
.admin-main p  { font-family: var(--rw-font-sans); color: var(--rw-text-muted); line-height: 1.55; margin: 0 0 14px; }

/* ---- Form controls inside admin ----------------------------- */
.admin-main input[type="text"],
.admin-main input[type="email"],
.admin-main input[type="password"],
.admin-main input[type="number"],
.admin-main input[type="url"],
.admin-main input[type="search"],
.admin-main input[type="date"],
.admin-main input[type="time"],
.admin-main textarea,
.admin-main select {
  width: 100%;
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  color: var(--rw-text);
  padding: 10px 14px;
  border-radius: var(--rw-radius-sm);
  font-family: var(--rw-font-mono);
  font-size: 13px;
  transition: border-color var(--rw-dur-fast), box-shadow var(--rw-dur-fast);
}
.admin-main textarea { font-family: var(--rw-font-sans); font-size: 14px; min-height: 96px; resize: vertical; line-height: 1.5; }
.admin-main input:focus, .admin-main textarea:focus, .admin-main select:focus {
  outline: none;
  border-color: var(--rw-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rw-accent) 22%, transparent);
}
.admin-main .form-group { margin-bottom: var(--rw-space-3); }
.admin-main .form-group label {
  display: block;
  font-family: var(--rw-font-mono);
  font-size: var(--rw-size-label);
  font-weight: 500;
  letter-spacing: var(--rw-track-label);
  text-transform: uppercase;
  color: var(--rw-text-muted);
  margin-bottom: 8px;
}

/* ---- Admin page header (dashboard / orders / settings) ------
   Eyebrow + H1 on the left, optional auxiliary control group on
   the right (e.g. auto-refresh toggle, range picker). Wraps on
   narrow viewports so controls drop below the heading. */
.admin-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto var(--rw-space-4);
  max-width: 1280px;
}
.admin-page-head__title .rw-eyebrow { margin-bottom: 6px; display: inline-block; }
.admin-page-head__title h1 {
  font-family: var(--rw-font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  color: var(--rw-text);
}
.admin-page-head__aux { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---- Stat / KPI grid ----------------------------------------
   Used on the admin dashboard (6 tiles: Total Orders / Paid /
   Analysing / Need Review / Delivered / Revenue) and reused by
   funnel + any future KPI dashboards.

   Compact treatment (2026-04 sizing pass): ~75% smaller than the
   previous pass. Dashboard scans should fit every KPI in one line
   of peripheral vision, not force a scroll. min-width 140px so
   six tiles line up at typical admin breakpoint; reduced padding,
   smaller serif value, smaller mono label. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: var(--rw-space-2) auto var(--rw-space-3);
  max-width: 1100px;
  width: 100%;
}
.stat-card {
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  border-top: 2px solid var(--rw-accent);
  border-radius: var(--rw-radius-sm);
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-height: 56px;
  text-align: center;
  transition: transform var(--rw-dur-fast) var(--rw-ease),
              box-shadow var(--rw-dur-base) var(--rw-ease),
              border-color var(--rw-dur-fast);
  box-shadow: var(--rw-shadow-card);
  position: relative;
  overflow: hidden;
}
.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -6px color-mix(in oklab, var(--rw-accent) 35%, transparent),
              0 1px 2px rgba(0, 0, 0, 0.04);
  border-top-color: var(--rw-accent-fg);
}
/* Subtle sage radial glow in the top-left corner. Kept at low
   opacity so it doesn't dominate the compact tile. */
.stat-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 0%,
              color-mix(in oklab, var(--rw-accent) 8%, transparent) 0%,
              transparent 60%);
  pointer-events: none;
  opacity: 0.9;
}
.stat-card > * { position: relative; }
.stat-card__value {
  font-family: var(--rw-font-serif);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 400;
  color: var(--rw-text);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.stat-card__label {
  font-family: var(--rw-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--rw-track-label);
  text-transform: uppercase;
  color: var(--rw-text-dim);
}

/* ---- Detail rows (order detail screen) ---------------------- */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px var(--rw-space-3);
  margin: var(--rw-space-2) 0;
}
@media (max-width: 720px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-radius-sm);
}
.detail-row > strong,
.detail-row > :first-child {
  font-family: var(--rw-font-mono);
  font-size: var(--rw-size-micro);
  letter-spacing: var(--rw-track-label);
  text-transform: uppercase;
  color: var(--rw-text-dim);
  font-weight: 500;
}
.detail-row > :nth-child(2),
.detail-row > span:not(:first-child) {
  font-family: var(--rw-font-mono);
  font-size: 13.5px;
  color: var(--rw-text);
}

/* ---- Detail section dividers (order screen) ----------------- */
.detail-section {
  border-top: 1px solid var(--rw-line);
  padding: var(--rw-space-3) 0;
  margin-top: var(--rw-space-3);
}
.detail-section:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* ---- Settings page form layout ------------------------------ */
.settings-form {
  display: flex; flex-direction: column;
  gap: var(--rw-space-4);
  max-width: 820px;
}
.settings-section {
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-radius-md);
  padding: var(--rw-space-3) var(--rw-space-4);
}
.settings-section > h2,
.settings-section > h3 {
  margin-top: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rw-line);
  margin-bottom: var(--rw-space-3);
}

/* ---- Edit Analysis Approach Prompts -----------------------
   Per-approach row + lazy-loaded inline editor. Rows hover
   to signal clickability; the editor sits underneath the row
   that was opened and shares the admin form-control styles
   from .admin-main above — no per-field CSS is needed.
   ----------------------------------------------------------- */
.approach-row { transition: background 120ms ease, border-color 120ms ease; }
.approach-row:hover { background: var(--rw-bg-subtle, rgba(0,0,0,0.02)); border-color: var(--rw-accent, var(--sage)); }
.approach-editor .approach-field { transition: border-color 120ms ease; }
.approach-editor .approach-field:focus-within { border-color: var(--rw-accent, var(--sage)); }
.approach-editor textarea { min-height: 120px; }
.approach-editor textarea[rows="10"] { min-height: 220px; }

/* ---- Sample grid (before / after comparisons in settings) --- */
.sample-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--rw-space-3);
  margin: var(--rw-space-3) 0;
}
@media (max-width: 720px) { .sample-grid { grid-template-columns: 1fr; } }
.sample-box {
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-radius-sm);
  padding: var(--rw-space-3);
  font-family: var(--rw-font-mono);
  font-size: 12.5px;
  color: var(--rw-text);
  line-height: 1.55;
}
.sample-box--before { border-left: 2px solid var(--rw-alert); }
.sample-box--after  { border-left: 2px solid var(--rw-accent); }

/* ---- AI output / review textarea ---------------------------- */
.ai-output,
.review-textarea {
  background: var(--rw-bg-sunken);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-radius-sm);
  padding: var(--rw-space-3);
  font-family: var(--rw-font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--rw-text);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}
.review-textarea { min-height: 180px; }

.analysis-progress {
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-radius-sm);
  padding: var(--rw-space-3);
  font-family: var(--rw-font-mono);
  font-size: 12.5px;
  color: var(--rw-text-muted);
}

/* ---- Model-select row (settings → AI config) ---------------- */
.model-select-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.model-select-row label { flex: 0 0 140px; margin-bottom: 0 !important; }
.model-select-row select { flex: 1; }

/* ---- Pricing card price (admin preview blocks) -------------- */
.pricing-card__price {
  font-family: var(--rw-font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--rw-text);
  letter-spacing: -0.01em;
}

/* ---- Alerts: add warning variant (used in admin-only flows) - */
.alert--warning {
  border-color: color-mix(in oklab, var(--rw-amber) 45%, transparent);
  color: var(--rw-amber);
  background: color-mix(in oklab, var(--rw-amber) 6%, transparent);
}
.alert--info {
  border-color: color-mix(in oklab, var(--rw-accent) 35%, transparent);
  color: var(--rw-text);
  background: color-mix(in oklab, var(--rw-accent) 5%, transparent);
}

/* ---- Legacy admin-wrap + admin-table (keep for back-compat) - */
.admin-wrap { min-height: 100vh; padding: var(--rw-space-4); }
.admin-wrap input, .admin-wrap textarea, .admin-wrap select {
  background: var(--rw-bg-raised); border: 1px solid var(--rw-line);
  color: var(--rw-text); padding: 10px 14px; border-radius: var(--rw-radius-sm);
  font-family: var(--rw-font-mono); font-size: 13px;
}
.admin-wrap table, .admin-table,
.admin-main table {
  border-collapse: collapse; width: 100%;
  font-family: var(--rw-font-mono); font-size: 13px;
  color: var(--rw-text);
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-radius-sm);
  overflow: hidden;
}
.admin-wrap table th, .admin-wrap table td,
.admin-table th, .admin-table td,
.admin-main table th, .admin-main table td {
  padding: 10px 14px; border-bottom: 1px solid var(--rw-line);
  text-align: left; vertical-align: top;
}
.admin-wrap table tbody tr:last-child td,
.admin-table tbody tr:last-child td,
.admin-main table tbody tr:last-child td { border-bottom: none; }
.admin-wrap table th, .admin-table th,
.admin-main table th {
  color: var(--rw-text-dim); font-weight: 500; font-size: 11px;
  letter-spacing: var(--rw-track-label); text-transform: uppercase;
  background: var(--rw-bg-sunken);
}
.admin-main table tbody tr { transition: background var(--rw-dur-fast); }
.admin-main table tbody tr:hover { background: color-mix(in oklab, var(--rw-accent) 5%, transparent); }
.detail-section { border-top: 1px solid var(--rw-line); padding: var(--rw-space-3) 0; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-family: var(--rw-font-mono); font-size: 10px; letter-spacing: var(--rw-track-label); text-transform: uppercase; border: 1px solid var(--rw-line); border-radius: var(--rw-radius-pill); color: var(--rw-text-muted); }
.badge--delivered, .badge--paid { color: var(--rw-accent-fg); border-color: color-mix(in oklab, var(--rw-accent) 45%, transparent); }
.badge--error { color: var(--rw-alert); border-color: color-mix(in oklab, var(--rw-alert) 45%, transparent); }
.badge--pending { color: var(--rw-amber); border-color: color-mix(in oklab, var(--rw-amber) 45%, transparent); }
.alert { padding: 12px 16px; border: 1px solid var(--rw-line); border-radius: var(--rw-radius-sm); font-size: 14px; font-family: var(--rw-font-sans); color: var(--rw-text); }
.alert--error { border-color: color-mix(in oklab, var(--rw-alert) 45%, transparent); color: var(--rw-alert); background: color-mix(in oklab, var(--rw-alert) 6%, transparent); }
.alert--success { border-color: color-mix(in oklab, var(--rw-accent) 45%, transparent); color: var(--rw-accent-fg); background: color-mix(in oklab, var(--rw-accent) 6%, transparent); }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-family: var(--rw-font-mono); font-size: 10px; letter-spacing: var(--rw-track-label); text-transform: uppercase; border-radius: var(--rw-radius-pill); border: 1px solid var(--rw-line); color: var(--rw-text-muted); }
.status-badge--delivered { color: var(--rw-accent-fg); border-color: color-mix(in oklab, var(--rw-accent) 45%, transparent); }
.status-badge--paid, .status-badge--analysing, .status-badge--queued, .status-badge--review, .status-badge--reviewed { color: var(--rw-accent-fg); border-color: color-mix(in oklab, var(--rw-accent) 35%, transparent); }
.status-badge--pending_payment { color: var(--rw-amber); border-color: color-mix(in oklab, var(--rw-amber) 45%, transparent); }
.status-badge--analysis_failed, .status-badge--expired, .status-badge--abandoned, .status-badge--cancelled { color: var(--rw-alert); border-color: color-mix(in oklab, var(--rw-alert) 45%, transparent); }

/* ============================================================ Motion (extends tokens.css keyframes) */
@keyframes rw-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rw-sweep  { to { transform: rotate(360deg); } }

.rw-delay-1 { animation-delay: 120ms; }
.rw-delay-2 { animation-delay: 240ms; }
.rw-delay-3 { animation-delay: 360ms; }

/* Extend the tokens.css reduced-motion block with site-specific killers */
@media (prefers-reduced-motion: reduce) {
  .pipe-step.is-active::after { animation: none !important; }
  .ticker__track { animation: none !important; }
  .live-card::before { animation: none !important; opacity: 0.2 !important; }
}

/* ============================================================
   Back-compat token aliases — legacy names that templates still
   reference inline. Mapped to the v4 semantic tokens so both
   themes resolve them correctly. Retire these once every
   template is migrated. ----------------------------------------- */
:root {
  --rw-cream: var(--rw-text);
  --rw-muted: var(--rw-text-muted);
  --rw-muted-soft: var(--rw-text-dim);
  --rw-line-dark: var(--rw-line);
  --rw-line-strong-dark: var(--rw-line-strong);
  --sage: var(--rw-accent);
  --sage-light: color-mix(in oklab, var(--rw-accent) 14%, transparent);
  --sage-deep: var(--rw-accent-fg);
  --grey-100: var(--rw-bg-sunken);
  --grey-300: var(--rw-line-strong);
  --grey-400: var(--rw-text-dim);
  --text-muted: var(--rw-text-muted);
  --red: var(--rw-alert);
  /* Glass tokens — superseded by raised surfaces, kept for orphan markup */
  --glass-bg-strong: color-mix(in oklab, var(--rw-bg-raised) 82%, transparent);
  --glass-border: var(--rw-line);
  --glass-blur: 14px;
}

/* ============================================================
   Back-compat aliases — legacy class names → semantic tokens.
   Retire these once every template is on .rw-* primitives.
   ============================================================ */
.container { max-width: var(--rw-max-w); margin: 0 auto; padding: 0 var(--rw-gutter); }
.btn { font-family: var(--rw-font-mono); font-weight: 600; font-size: var(--rw-size-small); letter-spacing: var(--rw-track-button); text-transform: uppercase; padding: 14px 24px; border-radius: var(--rw-radius-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: transform var(--rw-dur-fast) var(--rw-ease), box-shadow var(--rw-dur-base) var(--rw-ease); min-height: 44px; text-decoration: none; border: none; }
.btn--primary { background: var(--rw-btn-bg); color: var(--rw-btn-fg); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--rw-glow-accent); }
.btn--outline, .btn--ghost { background: transparent; color: var(--rw-text); border: 1px solid var(--rw-line-strong); }
.btn--outline:hover, .btn--ghost:hover { border-color: var(--rw-accent); color: var(--rw-accent); }
.btn--small { padding: 10px 18px; min-height: 36px; }
.btn--large, .btn--lg { padding: 18px 28px; font-size: 14px; }
.btn--danger { background: var(--rw-alert); color: var(--rw-text); }
.card { background: var(--rw-bg-raised); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-md); padding: var(--rw-space-3); box-shadow: var(--rw-shadow-card); }
.footer__text { display: none; } /* superseded by _footer.html shell */
.site-footer__col { display: block; }
/* Paper export surface — always light, independent of theme */
.paper-surface { background: #fbf8f1; color: #141a18; }

/* ============================================================
   /reports/<slug> — per-type landing page primitives
   ============================================================ */
/* Breadcrumb */
.rw-crumbs { padding: calc(var(--rw-nav-h, 64px) + 16px) 0 0; border-bottom: 1px solid var(--rw-line); }
.rw-crumbs ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); }
.rw-crumbs ol li { display: inline-flex; align-items: center; gap: 8px; }
.rw-crumbs ol li + li::before { content: "›"; color: var(--rw-text-dim); }
.rw-crumbs ol a { color: var(--rw-text-muted); transition: color var(--rw-dur-fast); }
.rw-crumbs ol a:hover { color: var(--rw-accent); }
.rw-crumbs ol [aria-current="page"] { color: var(--rw-text); }

/* Type hero — same visual language as the home hero, simpler layout */
.rw-type-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); }
.rw-type-hero .rw-h1 { max-width: 22ch; margin: 18px 0 var(--rw-space-3); }
.rw-lead { font-family: var(--rw-font-sans); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; color: var(--rw-text-muted); max-width: 70ch; margin: 0 0 var(--rw-space-3); }
.rw-type-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--rw-space-3); }

/* Content measure — single column, reading width */
.rw-measure { max-width: 720px; }

/* Findings table variant — stacks vertically on mobile, wider desc column */
.findings--type .finding { grid-template-columns: 140px 1fr 140px; }
@media (max-width: 640px) {
  .findings--type .finding { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }
  .findings--type .finding .cost { text-align: left; }
}
.findings--type .sev--crit     { color: var(--rw-alert); }
.findings--type .sev--major    { color: var(--rw-amber); }
.findings--type .sev--moderate { color: var(--rw-accent-fg); }
.findings--type .sev--minor    { color: var(--rw-text-muted); }

/* Two-column red-flags / questions layout */
.rw-twocol { display: grid; grid-template-columns: 1fr; gap: var(--rw-space-3); }
@media (min-width: 820px) { .rw-twocol { grid-template-columns: 1fr 1fr; } }
.rw-twocol .rw-card h3 { font-family: var(--rw-font-sans); font-weight: 500; font-size: 18px; margin: 0 0 12px; color: var(--rw-text); }

/* Checklist — red-flags use alert bullets, questions use sage bullets */
.rw-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-family: var(--rw-font-sans); color: var(--rw-text-muted); font-size: 14.5px; line-height: 1.55; }
.rw-checklist li { position: relative; padding-left: 26px; }
.rw-checklist li::before { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--rw-font-mono); font-size: 10px; font-weight: 600; }
.rw-checklist--alert li::before { content: "!"; background: color-mix(in oklab, var(--rw-alert) 18%, transparent); color: var(--rw-alert); }
.rw-checklist--question li::before { content: "?"; background: color-mix(in oklab, var(--rw-accent) 18%, transparent); color: var(--rw-accent-fg); }

/* ============================================================
   /guides index — article grid
   ============================================================ */
.guides-grid { display: grid; grid-template-columns: 1fr; gap: var(--rw-space-3); margin-top: var(--rw-space-4); }
@media (min-width: 720px) { .guides-grid { grid-template-columns: 1fr 1fr; } }
.guide-card {
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  border-left: 3px solid var(--rw-accent);
  border-radius: var(--rw-radius-md);
  transition: border-color var(--rw-dur-fast), box-shadow var(--rw-dur-fast), transform var(--rw-dur-fast);
}
.guide-card:hover { border-color: var(--rw-accent); box-shadow: var(--rw-shadow-card); transform: translateY(-1px); }
.guide-card__link { display: block; padding: 22px 24px; text-decoration: none; color: var(--rw-text); }
.guide-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--rw-font-mono); font-size: var(--rw-size-micro); letter-spacing: var(--rw-track-label); text-transform: uppercase; color: var(--rw-text-dim); margin-bottom: 12px; }
.guide-card__date, .guide-card__time, .guide-card__cat { white-space: nowrap; }
.guide-card__dot { color: var(--rw-line-strong); }
.guide-card__title { font-family: var(--rw-font-sans); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--rw-text); }
.guide-card__excerpt { font-family: var(--rw-font-sans); font-size: 14.5px; line-height: 1.55; color: var(--rw-text-muted); margin: 0 0 14px; }
.guide-card__cta { font-family: var(--rw-font-mono); font-size: 12px; letter-spacing: var(--rw-track-button); text-transform: uppercase; color: var(--rw-accent); font-weight: 600; }

/* /guides index table — follows the same .spec-table--linked pattern
   as the /reports catalog. Both the SSR (blog.html) and the JS
   hydration (loadBlogList in app.js) produce this exact structure
   so there's no post-load repaint. */
.guides-table-wrap { overflow-x: auto; margin: var(--rw-space-4) calc(var(--rw-gutter) * -1) 0; padding: 0 var(--rw-gutter); }
.guides-table .col-cat { width: 128px; white-space: nowrap; }
.guides-table .col-title { min-width: 0; }
.guides-table .col-title a {
  font-family: var(--rw-font-sans); font-weight: 500; font-size: 15.5px;
  letter-spacing: -0.005em; line-height: 1.3; color: var(--rw-text);
  text-decoration: none; display: block;
}
.spec-table--linked.guides-table tbody tr:hover .col-title a { color: var(--rw-accent); }
.guides-table__excerpt {
  margin: 6px 0 0; font-family: var(--rw-font-sans); font-size: 13px;
  line-height: 1.5; color: var(--rw-text-muted); max-width: 70ch;
}

/* Category chip used in the guides table (.rw-tag + small mono tweak). */
.rw-tag--cat {
  font-family: var(--rw-font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: var(--rw-track-label); text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--rw-radius-pill);
  color: var(--rw-accent-fg); background: color-mix(in oklab, var(--rw-accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--rw-accent) 30%, transparent);
  display: inline-block; white-space: nowrap;
}

/* Essay body styling (used on /guides/<slug>) */
.essay__body { font-family: var(--rw-font-sans); color: var(--rw-text); line-height: 1.7; font-size: 16.5px; }
.essay__body h1 { font-family: var(--rw-font-sans); font-weight: 500; font-size: clamp(30px, 4.5vw, 44px); line-height: 1.1; letter-spacing: -0.02em; margin: var(--rw-space-4) 0 var(--rw-space-3); color: var(--rw-text); }
.essay__body h2 { font-family: var(--rw-font-sans); font-weight: 500; font-size: clamp(22px, 2.5vw, 28px); line-height: 1.2; letter-spacing: -0.01em; margin: var(--rw-space-4) 0 16px; color: var(--rw-text); }
.essay__body h3 { font-family: var(--rw-font-sans); font-weight: 500; font-size: 18px; margin: var(--rw-space-3) 0 10px; color: var(--rw-text); }
.essay__body p { margin: 0 0 16px; color: var(--rw-text-muted); max-width: 68ch; }
.essay__body p.lead { font-size: 18px; color: var(--rw-text); }
.essay__body ul, .essay__body ol { margin: 0 0 20px; padding-left: 22px; color: var(--rw-text-muted); }
.essay__body li { margin-bottom: 8px; max-width: 66ch; }
.essay__body a { color: var(--rw-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.essay__body a:hover { color: var(--rw-accent-fg); }
.essay__body strong { color: var(--rw-text); font-weight: 600; }
.essay__body .rw-btn { margin-top: var(--rw-space-3); }
/* Author + date line under the article H1 */
.essay__body .guide-meta {
  font-family: var(--rw-font-mono);
  font-size: var(--rw-size-micro);
  letter-spacing: var(--rw-track-label);
  text-transform: uppercase;
  color: var(--rw-text-dim);
  margin: 0 0 var(--rw-space-4);
  padding-bottom: var(--rw-space-3);
  border-bottom: 1px solid var(--rw-line);
}
/* Article wrapper spacing — breathing room between the meta and body */
.essay__body article { display: block; }
.essay__body article > *:first-child { margin-top: 0; }

/* ============================================================
   Upload / checkout form (#view-upload)
   Scoped selectors so the form layout doesn't leak into other
   views. All colour values come from semantic tokens so both
   themes render correctly.
   ============================================================ */
#view-upload .upload-section { background: transparent; padding: 0; max-width: 100%; }
#view-upload .form-group { margin-bottom: var(--rw-space-3); }
#view-upload .form-group label {
  display: block;
  font-family: var(--rw-font-mono); font-size: var(--rw-size-label);
  font-weight: 500; letter-spacing: var(--rw-track-label);
  text-transform: uppercase; color: var(--rw-text-muted);
  margin-bottom: 8px;
}
#view-upload .form-label__meta { font-weight: 400; color: var(--rw-text-dim); }
#view-upload .form-hint { font-size: 12.5px; color: var(--rw-text-muted); margin: -8px 0 16px; padding-left: 2px; font-family: var(--rw-font-sans); display: block; }
#view-upload .tier-detail { text-align: center; margin-bottom: 24px; color: var(--rw-text-muted); font-size: 14px; font-family: var(--rw-font-mono); }

#view-upload input[type="text"],
#view-upload input[type="email"],
#view-upload select,
#view-upload textarea {
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line);
  color: var(--rw-text);
  padding: 14px 18px;
  border-radius: var(--rw-radius-sm);
  font-family: var(--rw-font-mono); font-size: var(--rw-size-small);
  width: 100%;
  transition: border-color var(--rw-dur-fast), box-shadow var(--rw-dur-fast);
}
#view-upload input[type="text"]:focus,
#view-upload input[type="email"]:focus,
#view-upload select:focus,
#view-upload textarea:focus {
  outline: none;
  border-color: var(--rw-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rw-accent) 22%, transparent);
}
#view-upload textarea { font-family: var(--rw-font-sans); font-size: 14.5px; min-height: 96px; resize: vertical; }

/* Dropzone — dashed border turns sage on hover / drag-over */
#view-upload .dropzone {
  position: relative;
  border: 1.5px dashed var(--rw-line-strong);
  border-radius: var(--rw-radius-md);
  padding: var(--rw-space-4);
  text-align: center;
  transition: border-color var(--rw-dur-fast), background var(--rw-dur-fast);
  cursor: pointer;
  background: color-mix(in oklab, var(--rw-accent) 3%, transparent);
}
#view-upload .dropzone:hover,
#view-upload .dropzone.is-dragover {
  border-color: var(--rw-accent);
  background: color-mix(in oklab, var(--rw-accent) 8%, transparent);
}
#view-upload .dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#view-upload .dropzone__icon { color: var(--rw-accent); margin-bottom: 12px; }
#view-upload .dropzone__text { font-family: var(--rw-font-sans); color: var(--rw-text); font-size: 15px; }
#view-upload .dropzone__hint { color: var(--rw-text-dim); font-family: var(--rw-font-mono); font-size: 11.5px; letter-spacing: var(--rw-track-label); text-transform: uppercase; }
#view-upload .dropzone__file { margin-top: 10px; font-family: var(--rw-font-mono); font-size: 12px; color: var(--rw-accent-fg); }
#view-upload .mobile-upload-btn { display: none; margin-top: 12px; }
@media (max-width: 768px) { #view-upload .mobile-upload-btn { display: inline-flex; } }

/* Tier pills — each pill is a selectable card (role=radio). Default state
   uses hairline border on raised surface; active state gets the sage
   top-accent treatment from the design spec ("Featured plan gets a sage
   top border, not a filled background") plus a sage halo. */
#view-upload .tier-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 18px 0 14px;
}
#view-upload .tier-pill {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 64px;
  padding: 16px 20px;
  background: var(--rw-bg-raised);
  border: 1px solid var(--rw-line-strong);
  border-top: 3px solid var(--rw-line-strong);
  border-radius: var(--rw-radius-sm);
  color: var(--rw-text);
  font-family: var(--rw-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--rw-track-button);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--rw-dur-fast),
              color var(--rw-dur-fast),
              box-shadow var(--rw-dur-fast),
              background var(--rw-dur-fast);
  box-shadow: var(--rw-shadow-card);
}
#view-upload .tier-pill:hover {
  border-color: var(--rw-accent);
  color: var(--rw-accent);
}
#view-upload .tier-pill:focus-visible {
  outline: 2px solid var(--rw-accent);
  outline-offset: 2px;
}
#view-upload .tier-pill.active {
  border-color: color-mix(in oklab, var(--rw-accent) 55%, var(--rw-line-strong));
  border-top-color: var(--rw-accent);
  background: color-mix(in oklab, var(--rw-accent) 7%, var(--rw-bg-raised));
  color: var(--rw-accent-fg);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--rw-accent) 18%, transparent);
}
#view-upload .tier-pill.active::before {
  content: "";
  position: absolute; top: 8px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rw-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rw-accent) 22%, transparent);
}

/* Expandable advanced options */
#view-upload .upload-details {
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-radius-md);
  padding: 16px 18px;
  margin-bottom: var(--rw-space-3);
  background: color-mix(in oklab, var(--rw-bg-raised) 60%, transparent);
}
#view-upload .upload-details__toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--rw-font-mono); font-size: var(--rw-size-label);
  letter-spacing: var(--rw-track-label); text-transform: uppercase;
  color: var(--rw-text-muted);
  list-style: none;
}
#view-upload .upload-details__toggle::-webkit-details-marker { display: none; }
#view-upload .upload-details[open] .upload-details__toggle { color: var(--rw-text); }
#view-upload .upload-details__hint { color: var(--rw-text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; font-family: var(--rw-font-sans); font-size: 12.5px; }
#view-upload .upload-details__content { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rw-line); }

/* Custom checkbox row */
#view-upload .upload-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; font-family: var(--rw-font-sans); color: var(--rw-text); }
#view-upload .upload-check input[type="checkbox"] { accent-color: var(--rw-accent); width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
#view-upload .upload-check strong { font-weight: 600; }
#view-upload .upload-check small { display: block; color: var(--rw-text-muted); font-size: 13px; margin-top: 4px; }
#view-upload .rw-tag--sage { background: var(--rw-accent); color: var(--rw-on-accent); border-color: var(--rw-accent); font-size: 10px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; font-weight: 600; }

/* Note card used for the "upgrade to premium" inline hint */
.rw-card--note { font-size: 13.5px; padding: 10px 14px; margin: -4px 0 16px; }

/* Coupon row */
#view-upload .coupon-row { display: flex; gap: 8px; }
#view-upload .coupon-row__input { text-transform: uppercase; flex: 1; }
#view-upload .coupon-msg { margin-top: 6px; font-size: 13px; font-family: var(--rw-font-mono); color: var(--rw-text-muted); }

/* Submit button — full-width, 14px vertical padding */
#view-upload .upload-submit { width: 100%; justify-content: center; font-size: 15px; padding: 16px 24px; margin-top: 8px; }
#view-upload .upload-submit[disabled] { opacity: 0.55; pointer-events: none; }
#view-upload .upload-foot {
  text-align: center; margin-top: 12px;
  font-size: 12.5px; color: var(--rw-text-dim); font-family: var(--rw-font-mono);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
#view-upload .upload-foot .icon-inline { width: 14px; height: 14px; vertical-align: -3px; }

/* Step 2 — uploading spinner block */
.upload-step-alt { text-align: center; padding: 40px 0; }
.upload-step-alt__msg { margin-top: 16px; color: var(--rw-text-muted); font-family: var(--rw-font-mono); font-size: 13px; }
.upload-step-alt__skel { max-width: 400px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 8px; }
.upload-step-alt__skel .skeleton-pulse { height: 16px; }
.upload-step-alt__skel .skeleton-pulse:nth-child(1) { width: 80%; }
.upload-step-alt__skel .skeleton-pulse:nth-child(2) { width: 100%; }
.upload-step-alt__skel .skeleton-pulse:nth-child(3) { width: 60%; }
.skeleton-pulse {
  background: color-mix(in oklab, var(--rw-line-strong) 40%, transparent);
  border-radius: var(--rw-radius-sm);
  animation: rw-skel 1.4s ease-in-out infinite;
}
@keyframes rw-skel {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Step 3 — embedded payment */
.upload-pay { padding: 20px 0; }
.upload-pay__head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.upload-pay__head h3 { margin: 0; flex: 1; font-family: var(--rw-font-sans); font-weight: 500; color: var(--rw-text); font-size: 18px; }
.upload-pay__summary { padding: 16px; margin-bottom: 24px; font-size: 14px; font-family: var(--rw-font-mono); color: var(--rw-text-muted); }
.upload-pay__wallet { margin-bottom: 16px; }
.upload-pay__or { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.upload-pay__or hr { flex: 1; border: none; border-top: 1px solid var(--rw-line); }
.upload-pay__or span { color: var(--rw-text-dim); font-size: 13px; font-family: var(--rw-font-mono); }
.upload-pay__card { min-height: 60px; }
.upload-pay__card .spinner { margin: 20px auto; }

/* Progress bar */
.progress-bar { position: relative; background: var(--rw-bg-sunken); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-pill); height: 22px; margin-top: 12px; overflow: hidden; }
.progress-bar__fill { height: 100%; background: var(--rw-accent); transition: width var(--rw-dur-base) var(--rw-ease); width: 0%; }
.progress-bar__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--rw-font-mono); font-size: 11px; color: var(--rw-text); letter-spacing: var(--rw-track-label); }

/* Spinner (shared) */
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--rw-line-strong);
  border-top-color: var(--rw-accent);
  animation: rw-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes rw-spin { to { transform: rotate(360deg); } }

/* ============================================================
   2026-04 MOBILE OPTIMISATION OVERRIDES
   ------------------------------------------------------------
   Consolidated block for the 2026-04 mobile audit. Every rule
   here is gated on a viewport width so desktop rendering is
   untouched. Grouped by concern:

   #3  hide .suffix pill below 480px
   #15 raise .btn--small touch target to 44px on mobile
   #17 pipeline: 5 cramped cols → horizontal scroll-snap strip
   #18 .finding: stacked layout below 480px
   #20 second hero lead hidden below 720px (dense copy)

   Keep mobile-specific tweaks here rather than sprinkling them
   through the main stylesheet — easier to audit and easier to
   remove if any of these need to be rolled back.
   ============================================================ */

/* #3 — suffix pill gets nudged by the URL-bar typewriter on narrow
   phones. Hiding it below 480px removes the ONLY element that
   visibly moves during the cycle. Desktop keeps the full pill. */
@media (max-width: 479px) {
  .rw-input-wrap .suffix { display: none; }
  /* With only 3 tracks now, remove the 4th column. */
  .rw-input-wrap { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* #15 — Apple HIG / Material both recommend ≥44px touch targets.
   The .btn--small variant is 36px which is cramped on phones. */
@media (max-width: 719px) {
  .btn--small, .rw-btn--small { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
}

/* #17 — .pipeline at repeat(5, 1fr) on narrow phones leaves each
   step ~52px wide, clipping the mono labels. Switch to a
   horizontally scrollable strip with scroll-snap so every step
   is legible without truncation. Desktop retains the 5-col
   fit-and-justify grid. */
@media (max-width: 719px) {
  .pipeline {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    /* hide the default scrollbar so the strip blends visually */
    scrollbar-width: none;
  }
  .pipeline::-webkit-scrollbar { display: none; }
  .pipe-step {
    flex: 0 0 auto;
    min-width: 92px;
    scroll-snap-align: start;
  }
}

/* #18 — .finding rows on the home-hero live-card use
   `grid-template-columns: 84px 1fr auto` which wedges the cost
   against the description on narrow phones. Stack vertically
   below 480px, matching the same pattern .findings--type already
   uses on the per-type report pages. */
@media (max-width: 479px) {
  .finding { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .finding .cost { text-align: left; }
}

/* #20 — The home hero currently carries TWO .hero__lead paragraphs
   totalling ~117 words. Above-the-fold on mobile that's a wall of
   text. Hide the second paragraph (the long-tail "Upload your
   Australian property report…" sentence — tagged via
   .hero__lead--secondary in home.html) on every viewport below the
   hero's single-column breakpoint. The content is still in the DOM
   for SEO crawlers; only visual presentation is suppressed. Desktop
   reads both paragraphs as designed.

   2026-04-25 Chrome-iOS follow-up: threshold raised from 720 → 1000
   to cover landscape phones (iPhone 16 Pro landscape is 874 px, ie
   above the old 720 threshold) where the reporter is seeing the
   paragraph wrap/unwrap. Same breakpoint as the hero's single-column
   stack — if the hero is stacking, the secondary paragraph is
   hidden. `!important` guards against an older stylesheet version
   winning the cascade if a service worker / CDN serves a mix. */
@media (max-width: 999px) {
  .hero__lead.hero__lead--secondary { display: none !important; }
}

/* 2026-04-25 Chrome-iOS jitter follow-up — lock hero lead font-size.
   -------------------------------------------------------------
   The `.hero__lead` base rule uses `font-size: clamp(15px, 1.15vw, 17px)`.
   On any mobile viewport the 1.15vw branch evaluates below the 15px
   floor, so the clamp resolves to a constant 15px — in theory stable.
   In practice, Chrome iOS re-evaluates `vw` against the VISUAL
   viewport during the address-bar/toolbar slide, which can nudge the
   computed value across the clamp boundary and force a font-size
   recompute. Pin the mobile size to a hard px value so no viewport
   arithmetic is involved. Desktop keeps the clamp (unchanged path). */
@media (max-width: 999px) {
  .hero__lead { font-size: 15px; }
  /* Same guarantee for the H1 — its clamp floor is now 36px (audit #19),
     and `5vw` only exceeds 36 above 720px. Pin 36px below that. */
  #home-hero-title.rw-display { font-size: 36px; }
}

/* 2026-04-25 Chrome-iOS jitter nuclear-option follow-up:
   -------------------------------------------------------------
   Reporter narrowed the issue down to Chrome iOS only (not Safari
   iOS) on iPhone 16 Pro. Both browsers share WebKit on iOS, so
   the rendering engine is identical — but Chrome iOS has more
   aggressive memory pressure and its bottom toolbar + font glyph
   cache handling differ from Safari. Under that pressure, any
   element re-painting on a timer can trigger cascading font
   re-rasterisation, which manifests as neighbouring text
   re-wrapping.

   The earlier targeted fix (.rw-eyebrow::before → absolute,
   pulse/sweep/cursor disabled selectively) didn't fully resolve
   it. This rule is the blanket version: below the hero's
   single-column breakpoint (1000px) we disable EVERY continuous
   (infinite) CSS animation on the page. Desktop keeps every
   animation as-is.

   We scope by name rather than by a universal `*` selector so
   one-shot `rw-fade-in` entrances and legitimate loaders
   (`rw-skel`, `rw-spin` — used for actual loading states) still
   run. The four named here are the DECORATIVE always-on loops
   that add zero information but do add repeated paints. */
@media (max-width: 999px) {
  .rw-eyebrow::before,
  .rw-dot--live,
  .pipe-step.is-active::after,
  .rw-input-wrap .caret,
  .ticker__track,
  .live-card::before {
    animation: none !important;
  }
  /* Make the static caret visible without blinking. */
  .rw-input-wrap .caret { opacity: 1; }
}

/* ============================================================
   Admin — sticky table headers + mobile responsive rules
   (2026-04-26 admin-improvement Batch B/D, items #14 + mobile).

   On desktop:
     * `.admin-table` headers stay pinned to the top of any
       overflow:auto wrapper so admins can scroll long lists
       (Orders / Customers / Reports tabs) without losing the
       column labels. We use `position: sticky` because the
       tables are rendered inside a `<div>` whose `overflow:
       auto` is the scroll context — sticky works inside the
       scroll container, fixed would float over the rest of the
       page and misalign.
     * Bulk-checkbox columns get a tight width so they don't
       eat layout space.

   On phones (<640px):
     * Tables collapse to one card per row using `data-label`
       attributes. Columns become labelled rows inside each
       card. Pure CSS — JS still emits a normal <table> for
       a11y/CSV-export consistency.
     * The standalone `.admin-main--standalone` gutter shrinks
       so we don't waste 10% of width on padding when we're
       starved for room.
     * Filter rows wrap to single column.
   ============================================================ */
.admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Override the parent `overflow:hidden` border-radius for the sticky
     header cells; modern browsers handle this fine but the explicit
     background-color is needed so rows scrolling underneath don't bleed
     through the semi-transparent default thead bg. */
  background: var(--rw-bg-sunken);
  /* The 1px border-bottom is on `td/th`; sticky leaves a hairline gap
     where the cell meets the next row, so we add a box-shadow to fake a
     hard separator that follows the cell on scroll. */
  box-shadow: inset 0 -1px 0 var(--rw-line);
}
.admin-table .orders-bulk-col {
  width: 36px;
  text-align: center;
  padding-left: 8px; padding-right: 4px;
}
.admin-table .orders-bulk-col input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: 16px; height: 16px;
}
.admin-table--orders tbody tr.is-selected {
  background: color-mix(in oklab, var(--rw-accent) 8%, transparent);
}

/* Mobile card-collapse for admin tables.
   F-046 (2026-04-26): generalised from `.admin-table--orders` to a
   `.admin-table--cards` modifier that any admin table can opt into.
   The original `--orders` variant inherits from `--cards` so the
   Orders page keeps its layout unchanged.
   data-label is emitted per <td>; the ::before pseudo prepends it as
   a small column label inside the card row. */
@media (max-width: 640px) {
  .admin-main, .admin-main--standalone {
    padding: var(--rw-space-3) var(--rw-space-2);
  }
  .admin-table--cards,
  .admin-table--orders,
  .admin-table--cards thead,
  .admin-table--orders thead,
  .admin-table--cards tbody,
  .admin-table--orders tbody,
  .admin-table--cards tr,
  .admin-table--orders tr,
  .admin-table--cards th,
  .admin-table--orders th,
  .admin-table--cards td,
  .admin-table--orders td {
    display: block;
    width: 100%;
  }
  .admin-table--cards thead,
  .admin-table--orders thead {
    /* Hide the desktop header row entirely; data-label::before takes over. */
    position: absolute;
    left: -10000px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
  }
  .admin-table--cards tr,
  .admin-table--orders tr {
    margin-bottom: 12px;
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius-sm);
    background: var(--rw-bg-raised);
    padding: 8px 4px;
  }
  .admin-table--cards td,
  .admin-table--orders td {
    border-bottom: 1px dashed color-mix(in oklab, var(--rw-line) 60%, transparent);
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 8px;
    align-items: start;
  }
  .admin-table--cards td:last-child,
  .admin-table--orders td:last-child { border-bottom: none; }
  .admin-table--cards td[data-label]::before,
  .admin-table--orders td[data-label]::before {
    content: attr(data-label);
    font-family: var(--rw-font-mono);
    font-size: 10px;
    letter-spacing: var(--rw-track-label);
    text-transform: uppercase;
    color: var(--rw-text-dim);
    padding-top: 2px;
  }
  /* The bulk-select cell has no label; it sits inline-left with no grid. */
  .admin-table--orders td.orders-bulk-col {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .admin-table--orders td.orders-bulk-col::before { content: none; }
  .orders-row-actions { flex-wrap: wrap; }
  /* Filter row stacks to single column on phones. */
  .orders-filter-row { grid-template-columns: 1fr 1fr !important; }
  /* Bulk action bar — wrap action buttons cleanly. */
  #ordersBulkBar { flex-direction: column; align-items: stretch !important; }
  #ordersBulkBar .btn { width: 100%; }
  /* Settings two-pane layout collapses to a single column with the
     left rail above the body — admins scroll-jump from the rail. */
  .settings-grid,
  .settings-rail-grid { grid-template-columns: 1fr !important; }
  .settings-rail { position: static !important; max-height: none !important; }
  /* Reports tab bar — let it scroll horizontally instead of wrapping
     into a 4-line stack on a 360px viewport. */
  .reports-tab-bar { flex-wrap: nowrap !important; overflow-x: auto !important; }
}

/* Tighter phone breakpoint (<420px) — drop the data-label column to a
   single-line stack so the value can use the full width. */
@media (max-width: 420px) {
  .admin-table--orders td {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .admin-table--orders td[data-label]::before { padding-top: 0; }
}