/* Tokens first. Every page in the funnel also <link>s tokens.css ahead of this
   file, which is faster; the @import is the safety net for consumers that link
   styles.css alone. Already-published private report artifacts are exactly
   that: their HTML is immutable in R2 and names only /styles.css, so without
   this every one of them would render with undefined custom properties. */
@import url("/tokens.css");

/* Self-hosted, the same faces landing.css already ships. Replaces the Google
   Fonts Inter request that used to load on submit, privacy, and 404: a
   third-party, render-blocking dependency, including on the data-policy page. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/archivo-400.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/archivo-500.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/archivo-700.woff2) format("woff2")}
@font-face{font-family:"Spline Sans Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/spline-mono-400.woff2) format("woff2")}
@font-face{font-family:"Spline Sans Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/spline-mono-500.woff2) format("woff2")}

/* This block used to carry a full dark palette. Everything in it that names a
   colour now comes from tokens.css, so only the names tokens.css does not
   already define are declared here, derived rather than restated. */
:root {
  --surface: var(--card);
  --surface-raised: var(--bg-2);
  --paper-muted: color-mix(in srgb, var(--paper) 84%, var(--paper-ink));
  --amber: var(--warn);
  --rose: var(--neg);
  --radius: 18px;
  --max: 1180px;
  --reading: 720px;
}

/* The report is a document and stays paper in both themes: inverting it would
   cost the print parity the Save/print path depends on. Rather than special-case
   every rule inside the sheet, the sheet redeclares the page tokens as their
   paper equivalents. A rule that says var(--muted) is then page-muted in the
   chrome and paper-muted in the report, without knowing which it is in. */
.public-preview, .report-document {
  --ink: var(--paper-ink);
  /* Three text tiers, all AA against the darkest paper surface (--bg-2). The
     previous values failed: --muted read 3.93:1 and --faint 2.73:1, which is
     what made the report's metric labels, captions and provenance lines hard to
     parse. Paper-scoped only, so the landing palette is untouched. */
  --ink-soft: #3b4048;   /* 8.36:1 */
  --muted: #525b55;      /* 5.63:1 */
  --faint: #5e6762;      /* 4.68:1 */
  /* FOUR body sizes, not ten. tokens.css defines a ten-step ramp from 9.5px to
     17px, six of those steps inside a four-pixel band (11 / 11.5 / 12.5 / 13.5
     / 14.5 / 15). Half a pixel is not a hierarchy a reader can perceive, so the
     ramp did not signal rank; it just made the page look unsettled, with the
     same component landing on two sizes in two scopes.

     Collapsed here rather than in tokens.css, the same way this block already
     re-tiers colour: the report is a document and wants a document's small type
     scale, while the app surfaces that share these tokens are dense UI and want
     the fine gradations.

     Four steps, 2px apart, because 2px is about where a size difference starts
     reading as rank rather than as noise. --fs-nano (9.5) is left alone: it
     labels chart axis ticks and is not body copy. The large display numerals
     (the KPI figures at 21 and 26px) are left alone for the same reason. */
  --fs-micro: 11px;   /* kickers, eyebrows, uppercase micro-labels */
  --fs-tag: 11px;
  --fs-caption: 11px;
  --fs-note: 13px;    /* provenance, annotations, fine print */
  --fs-fine: 13px;
  --fs-body-2: 15px;  /* secondary body copy and dense UI copy */
  --fs-ui: 15px;
  --fs-body: 17px;    /* body copy */
  --fs-lead: 17px;
  --line: rgba(22, 23, 30, .14);
  --line-strong: rgba(22, 23, 30, .26);
  --bg: var(--paper);
  --bg-2: #e9e6dd;
  --card: #f6f4ee;
  --surface: #f6f4ee;
  --surface-raised: #e9e6dd;
  --raise: rgba(22, 23, 30, .035);
  --raise-strong: rgba(22, 23, 30, .06);
  --accent: #3547a8;
  --accent-text: #2f3f9c;
  --accent-deep: #1c2867;
  --accent-soft: rgba(53, 71, 168, .1);
  --shadow: 0 22px 60px rgba(20, 30, 60, .16);
  /* The data layer's one mark colour on paper: trend lines, theme bars, the
     lighter chart accents. Deliberately lighter than --accent so a data mark
     never outweighs an interactive control. One declaration; the nine sites
     that used to restate it consume this. */
  --trend: #5f6fcd;
  /* Paper's own negative, tuned against the sheet rather than the page. */
  --neg: #a8574f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Matches the landing. There was no font-size here at all, so the funnel ran
     at the 16px default while the landing ran 17px. */
  font-size: var(--fs-lead);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 3px; }
[hidden] { display: none !important; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold, 700);
  letter-spacing: -.03em;
}
.brand:hover { color: var(--ink); }
.brand img { width: 30px; height: 30px; border-radius: 9px; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 74px;
  padding: 0 max(24px, calc((100vw - var(--max)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.site-header nav { display: flex; align-items: center; gap: 28px; }
.site-header nav > a:not(.button) { color: var(--muted); font-size: var(--fs-ui); font-weight: var(--fw-bold, 700); }
.site-header nav > a:not(.button):hover { color: var(--ink); }

.button {
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 12px 32px rgb(var(--shade) / .18);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold, 700);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.button:hover { color: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 18px 40px rgb(var(--shade) / .28); }
.button:active { transform: translateY(0); }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.button-small { min-height: 40px; padding: 0 17px; font-size: var(--fs-body-2); }
.button-light { background: var(--paper); border-color: var(--paper); color: #10121f; }
.button-light:hover { color: #10121f; }
.button-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); box-shadow: none; }
.button-secondary:hover { background: var(--raise); color: var(--ink); box-shadow: none; }
.button-block { width: 100%; }

.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: var(--fs-fine);
  font-weight: var(--fw-bold, 700);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  min-height: 820px;
  height: min(920px, 100svh);
  padding: 132px max(24px, calc((100vw - var(--max)) / 2)) 70px;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(510px, 1.18fr);
  align-items: center;
  gap: clamp(42px, 6vw, 94px);
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 12%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 32%),
    linear-gradient(150deg, color-mix(in srgb, var(--accent) 16%, transparent) 0%, var(--bg) 54%, var(--bg-deep) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}
.hero-noise {
  position: absolute;
  inset: 0;
  opacity: .2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
.hero-copy { position: relative; z-index: 2; max-width: 560px; }
.hero h1 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(54px, 6.6vw, 96px);
  line-height: .95;
  letter-spacing: -.065em;
  font-weight: var(--fw-bold, 700);
}
.hero-sub { max-width: 540px; margin: 30px 0 0; color: #b8c4bf; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; }
.hero-actions { margin-top: 36px; display: flex; align-items: center; gap: 26px; }
.text-link { color: var(--ink); font-size: var(--fs-ui); font-weight: var(--fw-bold, 700); border-bottom: 1px solid var(--line-strong); padding: 10px 0 7px; }
.text-link:hover { color: var(--ink); border-color: var(--accent); }
.hero-trust { margin: 30px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--faint); font-size: var(--fs-fine); }
.hero-trust span { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }

.hero-document {
  --doc-y: 0px;
  position: relative;
  z-index: 3;
  width: min(760px, 58vw);
  padding: 30px 34px 24px;
  transform: translateY(var(--doc-y)) rotate(1.2deg);
  background: var(--paper);
  color: #14151c;
  border-radius: 3px;
  box-shadow: var(--shadow);
  transition: transform .14s linear;
}
.document-topline, .document-footer { display: flex; justify-content: space-between; gap: 20px; color: #67706b; font: 650 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.document-topline { padding-bottom: 20px; border-bottom: 1px solid #d5d4ce; }
.document-title { padding: 28px 0 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.document-title p, .sheet-heading p, .opportunity-summary > p { margin: 0 0 5px; color: #68716c; font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: .08em; text-transform: uppercase; }
.document-title h2 { max-width: 520px; margin: 0; font-size: clamp(25px, 3vw, 42px); line-height: 1.04; letter-spacing: -.045em; }
.document-reason { max-width: 610px; margin: 8px 0 25px; color: #4e5853; font-size: var(--fs-body-2); }
.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #cbcfc9; border-bottom: 1px solid #cbcfc9; }
.metric-row > div { padding: 18px 15px; border-right: 1px solid #d5d7d1; }
.metric-row > div:first-child { padding-left: 0; }
.metric-row > div:last-child { border-right: 0; }
.metric-row span, .metric-row small { display: block; color: #727a76; font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .06em; }
.metric-row strong { display: block; margin: 6px 0 4px; font-size: 23px; line-height: 1; }
.metric-row .signal-bad { color: #a3303d; }
.document-decision { padding: 24px 0; display: grid; grid-template-columns: 42px 1fr; gap: 14px; }
.decision-index { color: var(--trend); font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.document-decision p { margin: 0; color: #657069; font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .08em; }
.document-decision h3 { margin: 7px 0; font-size: 18px; line-height: 1.3; }
.document-decision small { color: #68716c; font-size: var(--fs-fine); }
.document-footer { padding-top: 18px; border-top: 1px solid #d5d4ce; }

.hero-enter { opacity: 0; transform: translateY(18px); animation: hero-in .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-enter:nth-child(2) { animation-delay: .08s; }
.hero-enter:nth-child(3) { animation-delay: .16s; }
.hero-enter:nth-child(4) { animation-delay: .24s; }
.hero-enter:nth-child(5) { animation-delay: .32s; }
.hero-document { opacity: 0; animation: document-in .9s .18s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes hero-in { to { opacity: 1; transform: none; } }
@keyframes document-in { from { opacity: 0; transform: translateY(38px) rotate(2.4deg); } to { opacity: 1; transform: translateY(var(--doc-y)) rotate(1.2deg); } }

.report-section, .paths-section, .evidence-section, .trust-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 130px 24px;
}
.section-intro { max-width: 710px; margin-bottom: 64px; }
.section-intro.compact { margin-bottom: 44px; }
.section-intro h2, .trust-copy h2, .final-cta h2 {
  margin: 0;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -.055em;
}
.section-intro > p:last-child, .trust-copy > p { max-width: 640px; margin: 24px 0 0; color: var(--muted); font-size: var(--fs-lead); }

.report-spread { display: grid; grid-template-columns: 230px 1fr; gap: 54px; align-items: start; }
.spread-sidebar { position: sticky; top: 30px; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.spread-sidebar span { padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--faint); font-size: var(--fs-fine); }
.spread-sidebar span.active { color: var(--accent); }
.coverage-sheet { padding: 42px 44px; background: var(--paper); color: #14151c; box-shadow: 0 28px 80px rgba(0, 0, 0, .3); }
.sheet-heading { padding-bottom: 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; border-bottom: 1px solid #cfd2cc; }
.sheet-heading h3 { margin: 0; font-size: clamp(27px, 3.5vw, 44px); letter-spacing: -.045em; line-height: 1.05; }
.sheet-heading > span { padding: 6px 9px; background: #e5e2da; color: #5c655f; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); white-space: nowrap; }
.history-line { padding: 23px 0; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 22px; align-items: start; border-bottom: 1px solid #d6d7d1; }
.history-line time { color: #657069; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.history-line strong { display: block; font-size: var(--fs-ui); }
.history-line p { margin: 5px 0 0; color: #626b66; font-size: var(--fs-fine); line-height: 1.45; }
.coverage { padding: 5px 8px; border-radius: var(--r-pill); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); white-space: nowrap; }
.coverage.tried { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.coverage.partial { color: var(--accent); background: var(--bg-2); }
.coverage.recent { color: var(--accent); background: var(--bg-2); }
.opportunity-summary { margin-top: 30px; }
.opportunity-summary > div { padding: 13px 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #d6d7d1; font-size: var(--fs-fine); }
.opportunity-summary strong { color: #4354b3; }
.illustrative-note { margin: 20px 0 0 284px; color: var(--faint); font-size: var(--fs-note); }

.paths-section { border-top: 1px solid var(--line); }
.decision-paths { border-top: 1px solid var(--line-strong); }
.decision-paths article { min-height: 190px; padding: 35px 0; display: grid; grid-template-columns: 100px 1fr 1.2fr; gap: 30px; align-items: start; border-bottom: 1px solid var(--line-strong); }
.decision-paths article > span { color: var(--accent); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .09em; }
.decision-paths h3 { margin: 0; max-width: 400px; font-size: clamp(25px, 3vw, 38px); line-height: 1.08; letter-spacing: -.04em; }
.decision-paths p { max-width: 440px; margin: 0; color: var(--muted); }

.evidence-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; border-top: 1px solid var(--line); }
.evidence-section .section-intro { position: sticky; top: 34px; margin: 0; }
.evidence-ladder { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.evidence-ladder li { padding: 27px 0; display: grid; grid-template-columns: 48px 1fr auto; gap: 20px; align-items: start; border-bottom: 1px solid var(--line-strong); }
.evidence-ladder li > span { color: var(--accent); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.evidence-ladder strong { display: block; font-size: var(--fs-lead); }
.evidence-ladder p { margin: 5px 0 0; color: var(--muted); font-size: var(--fs-body-2); }
.evidence-ladder em { color: var(--faint); font-size: var(--fs-note); font-style: normal; white-space: nowrap; }

.trust-section { display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; border-top: 1px solid var(--line); }
.trust-links { margin-top: 30px; display: flex; gap: 26px; }
.trust-links a { color: var(--accent); font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); }
.trust-facts { margin: 0; border-top: 1px solid var(--line-strong); }
.trust-facts > div { padding: 20px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line-strong); }
.trust-facts dt { color: var(--muted); font-size: var(--fs-body-2); }
.trust-facts dd { margin: 0; font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); }

.final-cta { min-height: 580px; padding: 110px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--accent); color: var(--accent-ink); }
.final-cta .eyebrow { color: #4155c9; }
.final-cta h2 { max-width: 850px; }
.final-cta .button { margin-top: 40px; }

.site-footer { max-width: var(--max); margin: 0 auto; padding: 35px 24px 46px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-top: 1px solid var(--line); color: var(--faint); font-size: var(--fs-body-2); }
.site-footer p { text-align: center; }
.site-footer nav { display: flex; justify-content: flex-end; gap: 20px; }
.site-footer .brand { color: var(--ink); }

.reveal { opacity: 1; transform: none; transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Intake */
.intake-body { min-height: 100vh; background: var(--bg-deep); }
.intake-header { height: 72px; padding: 0 max(22px, calc((100vw - 1040px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
/* One lockup for the whole funnel: the landing header's dot + mono wordmark,
   ported here declaration for declaration (landing.css .brand / .dot-mark) so
   arriving at /submit does not look like arriving at a different product. The
   favicon-tile + bold-sans variant stays on .site-header pages that still use
   it; this is scoped to the intake header on purpose. */
.intake-header .brand { gap: 0; font-family: var(--mono); font-size: 1rem; font-weight: var(--fw-medium, 500); letter-spacing: -.01em; white-space: nowrap; }
.intake-header .brand em { font-style: normal; color: var(--accent-text); }
.intake-header .brand .dot-mark { width: 9px; height: 9px; margin-right: 10px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
/* The old selector was `.intake-header > a:last-child`, which stopped matching
   the moment the theme toggle became the last child. The links are wrapped in a
   nav now, so target that instead. */
.intake-nav { display: flex; align-items: center; gap: 16px; }
.intake-nav > a { color: var(--muted); font-size: var(--fs-body-2); }
.intake-nav > a:hover { color: var(--ink); }

/* Moved out of index.html's inline styles so the funnel pages get it too. */
.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-soft); cursor: pointer; transition: color .15s ease; }
.theme-toggle:hover { color: var(--ink); }
.theme-toggle svg { grid-area: 1/1; width: 17px; height: 17px; display: none; }
.theme-toggle svg.is-shown { display: block; }
.intake-shell { width: min(1040px, calc(100% - 36px)); margin: 0 auto; padding: 68px 0 100px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 70px; }
.intake-shell > section, #connect-root, .scan-stage, .public-preview { min-width: 0; }
.intake-aside { position: sticky; top: 40px; align-self: start; }
.intake-aside h1 { margin: 0; font-size: clamp(38px, 5vw, 56px); line-height: 1; letter-spacing: -.055em; }
.intake-aside > p:not(.eyebrow) { color: var(--muted); font-size: var(--fs-ui); }
.intake-promise { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.intake-promise div { padding: 10px 0; display: flex; align-items: center; gap: 10px; color: #bfc1cc; font-size: var(--fs-body-2); }
.intake-promise span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.connect { min-width: 0; }
.form-section { padding: 0 0 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.form-section:last-of-type { border-bottom: 0; }
.form-heading { margin-bottom: 24px; display: grid; grid-template-columns: 32px 1fr; gap: 14px; }
.form-heading--inline { grid-template-columns: 1fr; }
.form-heading > span { color: var(--accent); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; padding-top: 5px; }
.form-heading h2 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.form-heading p { margin: 5px 0 0; color: var(--muted); font-size: var(--fs-ui); }
.field { display: block; margin-top: 18px; }
.field > span, .field-label { display: block; margin-bottom: 8px; color: var(--ink); font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); }
.field small { color: var(--faint); font-weight: var(--fw-medium, 500); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--raise);
  color: var(--ink);
  font-size: var(--fs-ui);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--raise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* The connect step: the two connectable sources, for real. These rows used to be
   a preview whose credential forms rendered server-side after email verification;
   sources are connected here now, before the email, and each row expands in place.
   The markup comes from /api/connectors (functions/_lib/connect_form.mjs), which
   is why the form rules below duplicate report_shell.mjs: the shell cannot link a
   stylesheet, this page cannot import one from a Worker, and both draw the same
   token names out of tokens.css. Keep them token-only — workspace_ui.test.mjs
   fails on a literal colour in any .connector-preview rule. */
.connector-preview { margin-top: 20px; display: grid; gap: 10px; }
.connector-preview-row { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-4); background: var(--raise); }
.connector-preview-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.connector-preview-row > summary::-webkit-details-marker { display: none; }
.connector-preview-row strong { display: block; font-size: var(--fs-ui); }
.connector-preview-row small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-body-2); line-height: 1.45; }
.connector-preview-row em { flex: none; color: var(--accent-text); font-size: var(--fs-caption); font-style: normal; font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .06em; }
/* The state is the affordance. Closed it reads "Connect"; connected it names the
   app Apple confirmed, which is the only proof the visitor gets that the key
   reached the right listing. */
.connector-state { flex: none; padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--accent-text); font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); white-space: nowrap; }
.connector-preview-row[data-connected] { border-color: var(--accent-text); }
.connector-preview-row[data-connected] .connector-state { border-color: var(--accent-text); }
.connector-preview-row[data-connected] .connector-body { display: none; }
.connector-body { margin-top: 4px; }
.connector-error { margin: 12px 0 0; padding: 11px 13px; border: 1px solid var(--neg); border-left-width: 4px; border-radius: var(--r-4); color: var(--ink); font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); }
.connector-loading { margin: 0; padding: 14px 16px; color: var(--muted); font-size: var(--fs-body-2); }
/* Ported from report_shell.mjs so the served connector markup lands on the same
   shapes here as it does on the report's own pages. */
.connector-preview .connect-source, .connector-preview .optional-source { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.connector-preview h2 { margin: 4px 0 7px; font-size: var(--fs-ui); }
.connector-preview .kicker { margin: 0 0 4px; color: var(--accent-text); font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); letter-spacing: .1em; text-transform: uppercase; }
.connector-preview p { color: var(--muted); font-size: var(--fs-body-2); line-height: 1.5; }
.connector-preview .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.connector-preview label { display: block; margin: 14px 0; color: var(--ink); font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); }
.connector-preview input { display: block; width: 100%; margin-top: 7px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--r-4); background: var(--bg); color: var(--ink); font: inherit; }
.connector-preview input[type="file"] { padding: 10px; }
.connector-preview .consent { display: flex; align-items: flex-start; gap: 10px; padding: 14px; background: var(--raise); border-radius: var(--r-4); }
.connector-preview .consent input { width: auto; margin: 4px 0 0; flex: none; }
.connector-preview button { margin-top: 8px; padding: 12px 16px; border: 0; border-radius: var(--r-4); background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-bold, 700); cursor: pointer; }
.connector-preview button:disabled { opacity: .55; cursor: not-allowed; }
.connector-preview button.quiet { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); }
.connector-preview .walkthrough { margin: 14px 0; }
.connector-preview .walkthrough summary { padding: 7px 0; font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); cursor: pointer; }
.connector-preview .walkthrough ol { margin: 6px 0 0; padding-left: 20px; }
.connector-preview .walkthrough li { margin: 7px 0; color: var(--muted); }
.connector-preview a { color: var(--accent-text); }
/* fs-body, not the field-label recipe: the lead is a section question, and at
   label size it read as a caption on the wrong field (the name input). */
.connector-preview-lead { margin: 26px 0 0; color: var(--ink); font-size: var(--fs-body); font-weight: var(--fw-bold, 700); }
.intent-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.intent-option, .evidence-option { position: relative; display: block; cursor: pointer; }
.intent-option input, .evidence-option input { position: absolute; opacity: 0; pointer-events: none; }
.intent-option > span { min-height: 92px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--r-4); background: rgba(255, 255, 255, .025); transition: border-color .18s ease, background .18s ease; }
.intent-option strong { font-size: var(--fs-body); }
.intent-option small { color: var(--faint); font-size: var(--fs-fine); }
.intent-option input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.intent-option input:focus-visible + span, .evidence-option input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.optional-trigger { margin-top: 18px; padding: 0; border: 0; background: none; color: var(--accent); font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); cursor: pointer; }
.history-panel { margin-top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-5); background: rgba(255, 255, 255, .025); }
.history-value { margin: 8px 0 16px; color: var(--muted); font-size: var(--fs-body-2); }
.evidence-options { display: grid; gap: 10px; }
.evidence-option > span { padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; border: 1px solid var(--line); border-radius: var(--r-4); background: rgba(255, 255, 255, .025); transition: border-color .18s ease, background .18s ease; }
.evidence-option strong { font-size: var(--fs-ui); }
.evidence-option small { color: var(--muted); font-size: var(--fs-body-2); }
.evidence-option em { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); font-size: var(--fs-caption); font-style: normal; font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .06em; }
.evidence-option input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.method-detail { margin: 12px 0 0; padding: 16px 18px; border-left: 2px solid var(--accent); background: rgba(199, 206, 244, .055); color: #c2c4cd; font-size: var(--fs-body-2); }
.method-detail ol { margin: 10px 0 0; padding-left: 18px; }
.method-detail li { margin: 5px 0; }
.copy-row { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.copy-row code { color: var(--ink); }
.copy-row button { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-2); background: transparent; color: var(--muted); cursor: pointer; }
.consent { margin-top: 24px; padding: 17px 0 0; display: flex; align-items: flex-start; gap: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-fine); }
.consent input { margin-top: 2px; accent-color: var(--accent); }
.submit-note { margin: 13px 0 0; color: var(--faint); text-align: center; font-size: var(--fs-fine); }
.form-error { margin: 12px 0 0; color: var(--neg); font-size: var(--fs-fine); }
.ok-state { padding: 70px 0; text-align: center; }
.ok-state .ok-mark { width: 48px; height: 48px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-bold, 700); }
.ok-state h2 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.ok-state p { max-width: 500px; margin: 14px auto 0; color: var(--muted); }
/* Quiet recovery for a stranded private-report link. Lives below the workspace
   so it never competes with the scan. */
.report-resume { max-width: 520px; margin: 36px auto 0; padding: 16px 0 8px; border-top: 1px solid var(--line); }
.report-resume > summary { color: var(--ink-soft); font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); cursor: pointer; }
.report-resume > p { margin: 10px 0 0; color: var(--muted); font-size: var(--fs-body-2); line-height: 1.45; }
.report-resume form { margin-top: 14px; display: grid; gap: 12px; }
.report-resume .resume-ok { margin: 0; color: var(--pos); font-size: var(--fs-body-2); }

/* Simple legal/support pages */
.wrap { width: min(var(--max), calc(100% - 44px)); margin: 0 auto; }
.page-hero { padding: 70px 0 30px; text-align: center; }
.page-hero h1 { margin: 0; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.05em; }
.page-hero p { max-width: 660px; margin: 15px auto 0; color: var(--muted); }
.legal { max-width: 760px; margin: 0 auto; padding: 50px 22px 100px; }
.legal h1, .legal h2 { letter-spacing: -.03em; }
.legal p, .legal li { color: var(--muted); }
header:not(.site-header):not(.intake-header) { border-bottom: 1px solid var(--line); }
header:not(.site-header):not(.intake-header) .wrap { height: 68px; display: flex; align-items: center; justify-content: space-between; }
footer:not(.site-footer) { padding: 34px 0; border-top: 1px solid var(--line); color: var(--faint); font-size: var(--fs-fine); }
footer:not(.site-footer) .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.btn {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-body-2);
  font-weight: var(--fw-bold, 700);
}
.btn.ghost { border-color: var(--line-strong); background: transparent; color: var(--ink); }

/* Landing: working-report interactions */
.has-js .reveal { opacity: 0; transform: translateY(26px); }
.has-js .reveal.in-view { opacity: 1; transform: none; }

.report-mode-tabs {
  display: flex;
  gap: 5px;
  padding: 15px 0 3px;
  border-bottom: 1px solid #d5d4ce;
}
.report-mode-tabs button {
  padding: 7px 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #747c77;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold, 700);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.report-mode-tabs button[aria-selected="true"] { border-bottom-color: #5061c3; color: #3547a8; }
.report-deck { display: grid; }
.report-slide {
  min-height: 420px;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  pointer-events: none;
  transition: opacity .46s ease, transform .46s cubic-bezier(.2,.7,.2,1), visibility 0s linear .46s;
  will-change: opacity, transform;
}
.report-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  transition-delay: .08s, .08s, 0s;
}

.decision-section, .quick-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 130px 24px;
  border-top: 1px solid var(--line);
}
.decision-timeline { min-width: 0; display: grid; grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); gap: 56px; align-items: start; }
.timeline-events { border-top: 1px solid var(--line-strong); }
.timeline-events button {
  width: 100%;
  padding: 21px 4px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: color .18s ease, padding-left .18s ease, background .18s ease;
}
.timeline-events button:hover, .timeline-events button.is-active { padding-left: 12px; color: var(--accent); background: rgba(255, 255, 255, .025); }
.timeline-events time { padding-top: 2px; color: var(--faint); font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }
.timeline-events strong, .timeline-events small { display: block; }
.timeline-events strong { font-size: var(--fs-ui); }
.timeline-events small { margin-top: 3px; color: var(--faint); font-size: var(--fs-note); }
.timeline-detail { min-width: 0; overflow: hidden; padding: 38px 42px 34px; background: var(--paper); color: #15171f; box-shadow: 0 26px 80px rgba(0, 0, 0, .26); }
.timeline-detail.timeline-refresh { animation: timeline-refresh .34s ease; }
@keyframes timeline-refresh { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.timeline-detail-head { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; }
.timeline-detail-head p { margin: 0 0 7px; color: #657069; font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); letter-spacing: .08em; text-transform: uppercase; }
.timeline-detail-head h3 { max-width: 560px; margin: 0; font-size: clamp(25px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -.045em; }
.timeline-chart { min-width: 0; max-width: 100%; margin-top: 31px; padding-top: 17px; border-top: 1px solid #cfd2cc; }
.timeline-chart-head { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
.timeline-chart-head span { color: #707973; font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .07em; text-transform: uppercase; }
.timeline-chart-head strong { font-size: var(--fs-note); }
.timeline-chart-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #a8b3aa transparent; }
.timeline-chart svg { width: 100%; min-width: 610px; height: auto; display: block; margin-top: 9px; overflow: visible; }
.chart-grid line { stroke: #d4d8d2; stroke-width: 1; }
.chart-axis text, .chart-dates text { fill: #78817c; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.trend-area { fill: rgba(95, 111, 205, .10); }
.trend-line { fill: none; stroke: var(--trend); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trend-points circle { fill: var(--paper); stroke: var(--trend); stroke-width: 2; }
.chart-event line { stroke: #aeb8b1; stroke-width: 1; stroke-dasharray: 4 4; }
.chart-event circle { fill: #aeb8b1; }
.chart-event text { fill: #747d77; text-anchor: middle; font: 800 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.chart-event .chart-event-name { font-size: var(--fs-fine); }
.chart-event.is-active line { stroke: var(--trend); stroke-width: 2; }
.chart-event.is-active circle { fill: var(--trend); }
.chart-event.is-active text { fill: #3e52c7; }
.timeline-chart.chart-refresh .trend-line { animation: chart-draw .55s ease both; }
.timeline-chart.chart-refresh .trend-area, .timeline-chart.chart-refresh .trend-points { animation: chart-fade .42s ease both; }
@keyframes chart-draw { from { stroke-dasharray: 900; stroke-dashoffset: 900; } to { stroke-dasharray: 900; stroke-dashoffset: 0; } }
@keyframes chart-fade { from { opacity: 0; } to { opacity: 1; } }
.timeline-windows { margin-top: 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid #cfd2cc; border-bottom: 1px solid #cfd2cc; }
.timeline-windows > div:not(.timeline-arrow) { padding: 20px 0; }
.timeline-windows span, .timeline-windows small { display: block; color: #717a75; font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .05em; text-transform: uppercase; }
.timeline-windows strong { display: block; margin: 7px 0 5px; font-size: 29px; line-height: 1; }
.timeline-arrow { padding: 0 28px; color: var(--trend); font-size: 24px; }
.timeline-reading { margin: 25px 0; color: #424e48; font-size: var(--fs-ui); }
.timeline-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 20px; border-top: 1px solid #d6d7d1; }
.timeline-foot p { margin: 0; }
.timeline-foot span, .timeline-foot strong { display: block; }
.timeline-foot span { margin-bottom: 5px; color: #707973; font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .07em; text-transform: uppercase; }
.timeline-foot strong { font-size: var(--fs-note); line-height: 1.45; }

.quick-section { padding-top: 90px; }
.quick-list { border-top: 1px solid var(--line-strong); }
.quick-list article { padding: 30px 0; display: grid; grid-template-columns: 125px minmax(250px, 1fr) minmax(320px, .9fr); gap: 36px; align-items: start; border-bottom: 1px solid var(--line-strong); }
.quick-list article > span { padding-top: 5px; color: var(--accent); font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.quick-list h3 { max-width: 480px; margin: 0; font-size: clamp(21px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.035em; }
.quick-list dl { margin: 0; }
.quick-list dl > div { padding: 7px 0; display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); font-size: var(--fs-note); }
.quick-list dl > div:last-child { border-bottom: 0; }
.quick-list dt { color: var(--faint); }
.quick-list dd { margin: 0; font-weight: var(--fw-bold, 700); text-align: right; }
.decision-paths article { grid-template-columns: 100px minmax(220px, .9fr) minmax(260px, 1.1fr) auto; }
.decision-paths article > a { align-self: center; color: var(--accent); font-size: var(--fs-fine); font-weight: var(--fw-bold, 700); white-space: nowrap; }

/* Intake: no-email public scan */
.scan-stage { padding-bottom: 42px; margin-bottom: 42px; border-bottom: 1px solid var(--line); }
.scan-stage > .form-heading { margin-bottom: 20px; }
.scan-candidates { margin-top: 18px; border-top: 1px solid var(--line); }
.scan-error-out { margin: 10px 0 0; font-size: var(--fs-body-2); }
.scan-candidates > p { margin: 17px 0 8px; color: var(--muted); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase; }
.scan-candidates button { width: 100%; padding: 12px 0; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.scan-candidates img, .scan-candidates .app-icon-blank { width: 44px; height: 44px; border-radius: var(--r-3); }
.scan-candidates .app-icon-blank { display: block; border: 1px solid var(--line); background: var(--raise-strong); }
.scan-candidates strong, .scan-candidates small { display: block; }
.scan-candidates small { color: var(--faint); font-size: var(--fs-note); }
.scan-candidates em { color: var(--accent); font-size: var(--fs-note); font-style: normal; }
/* The report stays paper in both themes: it is a document, and inverting it
   would cost the print parity the Save/print path depends on. In light mode
   paper-on-page needs a hairline or the sheet has no edge. */
.public-preview { max-width: 100%; margin-top: 24px; padding: 27px; background: var(--paper); color: var(--paper-ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.public-app-head { display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line-strong); }
.public-app-head > img, .public-app-head > svg { width: 58px; height: 58px; border-radius: 13px; }
.public-app-head > div { min-width: 0; }
.public-app-head p, .public-app-head h3, .public-app-head span { margin: 0; }
.public-app-head p { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .07em; text-transform: uppercase; }
.public-app-head h3 { margin-top: 2px; font-size: 20px; letter-spacing: -.025em; }
.public-app-head span { display: block; color: var(--muted); font-size: var(--fs-note); }
.public-app-head .public-app-meta { display: grid; gap: 2px; justify-items: end; text-align: right; align-self: start; }
.public-app-head .public-app-meta span { color: var(--muted); font-size: var(--fs-note); }
.public-signal-row { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line-strong); }
.public-signal-row > div { padding: 20px 14px; border-right: 1px solid var(--line-strong); }
.public-signal-row > div:first-child { padding-left: 0; }
.public-signal-row > div:last-child { padding-right: 0; border-right: 0; }
.public-signal-row span, .public-signal-row small { display: block; color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .05em; text-transform: uppercase; }
.public-signal-row strong { display: block; margin: 7px 0 4px; font-size: 21px; }
.public-review-themes { margin: 18px 0 0; color: #4e5853; font-size: var(--fs-fine); }
.public-review-themes span { display: block; margin-bottom: 3px; color: #727a76; font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase; }
.public-screenshots { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; overflow: hidden; }
.public-screenshots img { width: 100%; aspect-ratio: .54; object-fit: cover; object-position: top; border: 1px solid var(--line-strong); }
.public-limit { margin-top: 21px; padding-top: 20px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; border-top: 1px solid #d1d3cd; }
.public-limit span { color: #6d7671; font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .07em; text-transform: uppercase; }
.public-limit p { max-width: 440px; margin: 4px 0 0; color: #59635e; font-size: var(--fs-note); }
.public-limit .button { min-height: 44px; padding: 0 16px; font-size: var(--fs-note); }
.selected-app { margin-bottom: 27px; padding: 13px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 13px; background: var(--raise); }
.selected-app img { width: 46px; height: 46px; border-radius: var(--r-3); }
.selected-app > div { min-width: 0; }
.selected-app span, .selected-app strong, .selected-app small { display: block; }
.selected-app span { color: var(--accent); font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .07em; text-transform: uppercase; }
.selected-app strong { font-size: var(--fs-ui); }
.selected-app small { max-width: 460px; overflow: hidden; color: var(--faint); font-size: var(--fs-note); text-overflow: ellipsis; white-space: nowrap; }
.targeted-questions { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.question-heading { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
.question-heading span { color: var(--accent); font-size: var(--fs-fine); font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase; }
.question-heading p { max-width: 360px; margin: 0; color: var(--faint); font-size: var(--fs-fine); text-align: right; }

@media (max-width: 980px) {
  .hero { height: auto; min-height: 960px; padding-top: 124px; grid-template-columns: 1fr; align-content: start; }
  .hero-copy { max-width: 690px; }
  .hero h1 { max-width: 760px; }
  .hero-document { width: min(760px, 92vw); margin-left: 10vw; }
  .evidence-section { grid-template-columns: 1fr; gap: 45px; }
  .evidence-section .section-intro { position: static; }
  .trust-section { gap: 45px; }
  .intake-shell { grid-template-columns: 240px minmax(0, 1fr); gap: 42px; }
  .decision-paths article { grid-template-columns: 70px minmax(180px, .8fr) minmax(230px, 1fr); }
  .decision-paths article > a { grid-column: 2 / -1; justify-self: start; }
  .quick-list article { grid-template-columns: 100px 1fr; }
  .quick-list dl { grid-column: 2; }
}

@media (max-width: 760px) {
  .site-header { height: 66px; padding: 0 18px; }
  .site-header nav > a:not(.button) { display: none; }
  .site-header .button-small { min-height: 38px; padding: 0 14px; }
  .hero { min-height: 930px; padding: 112px 20px 50px; gap: 54px; }
  .hero h1 { font-size: clamp(48px, 15vw, 68px); }
  .hero-sub { font-size: var(--fs-lead); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
  .hero-document { width: 100%; max-width: 100%; margin-left: 0; padding: 22px 20px; }
  .document-topline, .document-footer { gap: 9px; font-size: var(--fs-nano); }
  .document-title { padding-top: 22px; flex-direction: column; gap: 12px; }
  .document-title h2 { font-size: 27px; }
  .document-reason { margin-bottom: 18px; }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .metric-row > div { padding: 14px 12px; border-bottom: 1px solid #d5d7d1; }
  .metric-row > div:nth-child(2) { border-right: 0; }
  .metric-row > div:nth-child(3), .metric-row > div:nth-child(4) { border-bottom: 0; }
  .metric-row > div:nth-child(3) { padding-left: 0; }
  .metric-row strong { font-size: 20px; }
  .document-decision { grid-template-columns: 30px 1fr; padding: 20px 0; }
  .document-decision h3 { font-size: var(--fs-body); }
  .document-footer { align-items: flex-start; flex-direction: column; }
  .report-mode-tabs { overflow-x: auto; }
  .report-slide { min-height: 470px; }
  .report-section, .paths-section, .evidence-section, .trust-section, .decision-section, .quick-section { padding: 90px 20px; }
  .section-intro { margin-bottom: 42px; }
  .section-intro h2, .trust-copy h2, .final-cta h2 { font-size: clamp(38px, 12vw, 52px); }
  .report-spread { grid-template-columns: 1fr; gap: 22px; }
  .spread-sidebar { position: static; display: grid; grid-template-columns: repeat(5, 160px); overflow-x: auto; scrollbar-width: none; }
  .spread-sidebar span { padding-right: 20px; }
  .coverage-sheet { padding: 28px 22px; }
  .sheet-heading, .history-line { grid-template-columns: 1fr; gap: 10px; }
  .sheet-heading { display: grid; }
  .sheet-heading > span, .history-line .coverage { justify-self: start; }
  .history-line time { margin-top: 6px; }
  .opportunity-summary > div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .illustrative-note { margin-left: 0; }
  .decision-paths article { min-height: 0; grid-template-columns: 50px 1fr; }
  .decision-paths article p { grid-column: 2; }
  .decision-paths article > a { grid-column: 2; }
  .decision-timeline { grid-template-columns: 1fr; gap: 25px; }
  .timeline-events { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .timeline-events button { min-width: 190px; }
  .timeline-detail { padding: 28px 23px; }
  .timeline-detail-head { flex-direction: column; gap: 15px; }
  .timeline-windows strong { font-size: 24px; }
  .timeline-arrow { padding: 0 14px; }
  .timeline-foot { grid-template-columns: 1fr; gap: 18px; }
  .quick-list article { grid-template-columns: 1fr; gap: 12px; }
  .quick-list dl { grid-column: 1; margin-top: 10px; }
  .evidence-ladder li { grid-template-columns: 38px 1fr; }
  .evidence-ladder em { grid-column: 2; margin-top: 5px; }
  .trust-section { grid-template-columns: 1fr; }
  .final-cta { min-height: 520px; }
  .site-footer { grid-template-columns: 1fr; gap: 16px; text-align: left; }
  .site-footer p { text-align: left; }
  .site-footer nav { justify-content: flex-start; flex-wrap: wrap; }
  .intake-shell { width: min(100% - 32px, 680px); padding-top: 42px; grid-template-columns: 1fr; gap: 40px; }
  .intake-aside { position: static; }
  .intake-promise { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .field-grid, .intent-options { grid-template-columns: 1fr; }
  .intent-option > span { min-height: 72px; }
  .public-preview { margin-right: -4px; margin-left: -4px; padding: 22px 18px; }
  .public-app-head { grid-template-columns: 50px 1fr; }
  .public-app-head > img, .public-app-head > svg { width: 50px; height: 50px; }
  .public-app-head .public-app-meta { grid-column: 2; justify-items: start; text-align: left; }
  .public-signal-row { grid-template-columns: 1fr 1fr; }
  .public-signal-row > div { border-bottom: 1px solid var(--line-strong); }
  .public-signal-row > div:nth-child(2) { padding-right: 0; border-right: 0; }
  .public-signal-row > div:nth-child(3) { padding-left: 0; border-bottom: 0; }
  .public-screenshots { display: flex; max-width: 100%; overflow-x: auto; }
  .public-screenshots img { flex: 0 0 105px; }
  .public-limit { grid-template-columns: 1fr; align-items: start; }
  .public-limit .button { width: 100%; }
  .question-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .question-heading p { text-align: left; }
  footer:not(.site-footer) .wrap { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
  .hero { min-height: 1060px; }
  .hero-trust { max-width: 310px; }
  .intake-promise { grid-template-columns: 1fr; }
  .evidence-option > span { grid-template-columns: 1fr; }
  .evidence-option em { grid-column: 1; grid-row: auto; justify-self: start; }
  .connector-preview-row > summary { flex-direction: column; align-items: flex-start; gap: 8px; }
  .connector-preview .grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-enter, .hero-document, .reveal { opacity: 1; transform: none; }
}

/* Public scan v2 — useful even before private evidence */
.public-read { margin: 25px 0 0; padding: 25px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; background: var(--bg-2); border-left: 4px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--r-3); }
.public-read--sparse { border-left-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.public-read-copy > span, .public-read-action > span, .public-reasons > div > span { color: var(--accent); font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .07em; text-transform: uppercase; }
.public-read--sparse .public-read-copy > span, .public-read--sparse .public-read-action > span { color: var(--muted); }
.public-read h4 { margin: 7px 0 0; font-size: clamp(22px, 3vw, 31px); line-height: 1.05; letter-spacing: -.035em; }
.public-read-copy p { margin: 12px 0 0; color: var(--ink-soft); font-size: var(--fs-fine); }
.public-read-action { padding-left: 23px; border-left: 1px solid var(--line-strong); }
.public-read-action strong { display: block; margin-top: 7px; font-size: var(--fs-body-2); line-height: 1.45; }
.public-read-action dl { margin: 15px 0 0; }
.public-read-action dl > div { padding: 7px 0; display: grid; grid-template-columns: 105px 1fr; gap: 12px; border-top: 1px solid var(--line); font-size: var(--fs-caption); }
.public-read-action dt { color: var(--muted); }
.public-read-action dd { margin: 0; font-weight: var(--fw-bold, 700); }
/* Two labeled cells (what the read rests on / what it cannot claim), each with
   its own hairline and micro-label, instead of two cramped inline-bold lines. */
.public-read footer { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.public-read footer > div { padding-top: 12px; border-top: 1px solid var(--line-strong); }
.public-read footer span { display: block; color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .07em; text-transform: uppercase; }
.public-read footer p { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-note); line-height: 1.5; max-width: 52ch; }
.public-reasons { padding: 23px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; border-bottom: 1px solid var(--line-strong); }
.public-reasons > div p { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-caption); }
.public-reasons ul { margin: 0; padding: 0; list-style: none; }
.public-reasons li { padding: 7px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; border-top: 1px solid var(--line); font-size: var(--fs-caption); }
.public-reasons li span { font-weight: var(--fw-bold, 700); }
.public-reasons li strong { color: var(--accent-text); }
.public-reasons li small { grid-column: 1 / -1; color: var(--faint); }
.read-block-head span { color: var(--accent); font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); letter-spacing: .07em; text-transform: uppercase; }
.read-block-head p { max-width: 560px; margin: 5px 0 0; color: var(--muted); font-size: var(--fs-fine); }
/* Report IA redesign: dynamic findings moved out of the right-aligned caption into
   an in-body note; peer loading status; ratings mounts; recoverable error state. */
.block-note { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-fine); line-height: 1.5; max-width: 640px; }
.peer-read-status { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-fine); min-height: 1em; }
.peer-read-status:empty { display: none; }
#ratingsPeers, #ratingsTrend { margin-top: 4px; }
#ratingsQuadrant:empty { display: none; }
.report-footer { max-width: 900px; margin: 8px auto 0; padding: 0 24px; }
.report-unavailable { max-width: 720px; margin: 8vh auto; padding: 40px 28px; text-align: center; background: var(--card); border-radius: var(--r-5); color: var(--accent); }
.report-unavailable h2 { margin: 0 0 8px; font: 650 24px/1.1 var(--sans); }
.report-unavailable p { margin: 0 0 18px; color: var(--ink-soft); }
.read-themes, .read-months, .read-promise { padding: 20px 0 6px; border-top: 1px solid #d8d9d2; }
.read-themes ul, .read-months ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.read-theme-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-fine); }
.read-theme-head span { color: #1c1f31; font-weight: var(--fw-bold, 700); }
.read-theme-head strong { color: #5d6762; font-size: var(--fs-note); font-weight: var(--fw-bold, 700); white-space: nowrap; }
.read-theme-bar { display: block; height: 8px; margin-top: 7px; border-radius: var(--r-pill); background: #e4e6df; }
.read-theme-bar b { display: block; height: 100%; border-radius: inherit; background: var(--trend); }
.read-themes blockquote { margin: 9px 0 0; padding: 8px 11px; border-left: 2px solid #c9cec4; background: #f2f3ec; color: #4e5853; font-size: var(--fs-fine); line-height: 1.45; }
.read-themes blockquote span { margin-right: 7px; color: var(--warn); font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); }
.read-themes > small { display: block; margin-top: 12px; color: #78817c; font-size: var(--fs-caption); }
.read-months li { display: grid; grid-template-columns: 62px minmax(0, 1fr) 40px auto; gap: 10px; align-items: center; font-size: var(--fs-note); }
.read-months li span { color: #5d6762; font-weight: var(--fw-bold, 700); }
.read-months li i { display: block; height: 7px; border-radius: var(--r-pill); background: #e4e6df; }
.read-months li b { display: block; height: 100%; border-radius: inherit; background: var(--trend); }
.read-months li.is-tiny b { background: #a9b3a8; }
.read-months li strong { color: #1c1f31; font-size: var(--fs-fine); }
.read-months li small { color: #78817c; }
.read-promise article { margin-top: 11px; padding: 11px 13px; border: 1px solid #d8d9d2; border-radius: 9px; background: #fbfbf6; }
.read-promise strong { display: block; color: #1c1f31; font-size: var(--fs-body-2); line-height: 1.4; }
.read-promise small { display: block; margin-top: 6px; color: #6a746e; font-size: var(--fs-note); }
.read-feedback { margin-top: 16px; padding: 12px 0; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line-strong); color: var(--ink-soft); font-size: var(--fs-fine); }
.read-feedback button { padding: 6px 15px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--accent-ink); color: var(--accent); font-size: var(--fs-fine); font-weight: var(--fw-bold, 700); cursor: pointer; }
.read-feedback button:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.read-feedback.is-done span { color: var(--accent); font-weight: var(--fw-bold, 700); }
.peer-compare { margin-top: 22px; border-top: 1px solid #ced1ca; border-bottom: 1px solid #ced1ca; }
.peer-compare summary { padding: 16px 0; display: flex; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; }
.peer-compare summary::-webkit-details-marker { display: none; }
.peer-compare summary span { color: #66706b; font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .07em; text-transform: uppercase; }
.peer-compare summary b { font-size: var(--fs-note); }
.peer-compare summary b::after { content: " +"; color: var(--accent-text); }
.peer-compare[open] summary b::after { content: " −"; }
.peer-compare-body { padding: 4px 0 23px; }
.peer-suggestions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.peer-suggestions label { position: relative; cursor: pointer; }
.peer-suggestions input { position: absolute; opacity: 0; pointer-events: none; }
.peer-suggestions label > span { min-height: 60px; padding: 9px; display: grid; grid-template-columns: 38px 1fr; align-items: center; column-gap: 9px; border: 1px solid #c9cdc7; }
.peer-suggestions input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.peer-suggestions img { width: 38px; height: 38px; grid-row: span 2; border-radius: 9px; }
.peer-suggestions b, .peer-suggestions small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peer-suggestions b { font-size: var(--fs-caption); }
.peer-suggestions small { color: #737d77; font-size: var(--fs-nano); }
.peer-empty { margin: 0; color: var(--muted); font-size: var(--fs-note); }
.peer-quadrant { padding: 30px 0 10px; }
.peer-quadrant > span { display: block; margin-bottom: 10px; color: var(--accent); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: .08em; text-transform: uppercase; }
.quad-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.quad-head span { display: block; margin-bottom: 5px; color: var(--accent); font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .12em; text-transform: uppercase; }
.quad-head h3 { margin: 0; color: var(--ink); font-family: var(--sans); font-size: clamp(20px, 2.5vw, 28px); font-weight: var(--fw-bold, 700); letter-spacing: -.025em; line-height: 1.05; }
.quad-head p { flex: 0 0 auto; margin: 0 2px 1px 0; color: var(--muted); font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); line-height: 1.55; text-align: right; text-transform: uppercase; letter-spacing: .055em; }
.quad-head p b { color: var(--accent); font-size: var(--fs-fine); }
.peer-quadrant svg { display: block; width: 100%; height: auto; overflow: visible; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-5); box-shadow: 0 14px 34px rgb(var(--shade) / .055); }
.quad-zones rect { animation: quad-zone-in .65s ease both; }
.quad-zones .is-high-small { fill: var(--bg-2); }
.quad-zones .is-high-large { fill: var(--bg-2); }
.quad-zones .is-low-small { fill: var(--bg-2); }
.quad-zones .is-low-large { fill: var(--bg-2); }
.quad-grid { stroke: var(--muted); stroke-dasharray: 3 6; stroke-width: 1; animation: quad-line-in .7s .12s ease both; }
.quad-corner { fill: var(--muted); font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); letter-spacing: .055em; text-transform: uppercase; }
.quad-point { cursor: default; animation: quad-point-in .45s cubic-bezier(.2,.8,.2,1) both; transform-box: fill-box; transform-origin: center; }
.quad-point:nth-of-type(2) { animation-delay: .05s; }
.quad-point:nth-of-type(3) { animation-delay: .1s; }
.quad-point:nth-of-type(4) { animation-delay: .15s; }
.quad-point:nth-of-type(5) { animation-delay: .2s; }
.quad-point:nth-of-type(6) { animation-delay: .25s; }
.quad-dot { fill: var(--muted); stroke: var(--card); stroke-width: 1.5; transition: transform .18s ease, fill .18s ease; }
.quad-point:hover .quad-dot, .quad-point.is-hot .quad-dot { fill: var(--accent); transform: scale(1.18); }
.quad-index { fill: var(--bg-2); font-size: 8.5px; font-weight: var(--fw-bold, 700); pointer-events: none; }
.quad-point.is-target .quad-dot { fill: var(--accent); stroke-width: 2; }
.quad-point.is-target .quad-halo { fill: var(--accent); opacity: .16; animation: quad-halo 2.6s ease-in-out infinite; }
.quad-point.is-target .quad-index { font-size: var(--fs-nano); }
.quad-note { display: block; margin-top: 9px; color: var(--muted); font-size: var(--fs-note); line-height: 1.45; }
@keyframes quad-zone-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes quad-line-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes quad-point-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes quad-halo { 0%, 100% { opacity: .12; transform: scale(.92); } 50% { opacity: .22; transform: scale(1.08); } }
@media (max-width: 620px) {
  .quad-head { align-items: start; }
  .quad-head p { display: none; }
  .quad-corner { font-size: var(--fs-micro); }
}
@media (prefers-reduced-motion: reduce) {
  .quad-zones rect, .quad-grid, .quad-point, .quad-point.is-target .quad-halo { animation: none; }
  .quad-dot, .peer-list li { transition: none; }
}
.peer-list .peer-recent { display: block; margin-top: 2px; font-size: var(--fs-note); font-weight: var(--fw-bold, 700); color: var(--accent); }
.peer-suggest-label { margin: 12px 0 0; color: var(--ink-soft); font-size: var(--fs-body-2); }
.peer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.peer-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid #c5c9c0; border-radius: var(--r-pill); background: #efece3; font-size: var(--fs-body-2); }
.peer-chip label { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold, 700); cursor: pointer; }
.peer-chip input { accent-color: var(--accent); margin: 0; }
.peer-chip .peer-scan { border: 0; background: none; padding: 0; color: var(--accent-text); font-size: var(--fs-fine); font-weight: var(--fw-bold, 700); cursor: pointer; }
.peer-chip .peer-scan:hover { text-decoration: underline; }
.peer-custom { margin-top: 15px; display: block; }
.peer-custom > span { display: block; margin-bottom: 6px; color: #5e6963; font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); }
.peer-custom textarea { width: 100%; padding: 10px; border: 1px solid #c9cdc7; background: #f6f3eb; color: #1d1f28; resize: vertical; }
.peer-actions { margin-top: 10px; display: flex; align-items: center; gap: 15px; }
.peer-actions button { min-height: 40px; padding: 0 14px; border: 0; background: #1d202d; color: #f4f5f0; font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); cursor: pointer; }
.peer-actions button:disabled { opacity: .55; cursor: wait; }
/* Editable peer set — removable current chips + App Store search-to-add.
   This is a context bar under the report header, not a control inside the
   Ratings chapter: the peer set drives the quadrant, the peer table, the
   pricing matrix and the release cadence. The selected set is always visible;
   only the search collapses. */
.report-controls { margin: 18px 0 8px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-4); background: color-mix(in srgb, var(--bg-2) 80%, var(--card)); }
.report-controls .peer-bar { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.report-controls .peer-bar[data-peer-tone] { border-left: 0; }
/* The scope row: what the report reads (store) next to what it reads it about
   (the app), with the storefront picker anchored to this row. */
.report-scope { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.report-scope #changeApp { margin-left: auto; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--ink-soft); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); cursor: pointer; }
.report-scope #changeApp:hover { color: var(--ink); border-color: var(--ink-3); }
.peer-bar { margin: 18px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-2); }
.public-app-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.storefront-trigger { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--accent-text); font: inherit; font-weight: var(--fw-bold, 700); cursor: pointer; text-decoration: none; }
.storefront-trigger:hover { color: var(--ink); }
.storefront-picker { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(360px, calc(100vw - 48px)); padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--r-4); background: var(--card); box-shadow: var(--shadow); }
.storefront-picker-head { margin-bottom: 10px; }
.storefront-picker-head strong { display: block; font-size: var(--fs-body-2); }
.storefront-picker-head span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-note); }
.storefront-filter { width: 100%; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg-2); color: var(--ink); font: inherit; }
.storefront-picker-list { max-height: 280px; overflow: auto; display: grid; gap: 2px; }
.storefront-option { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-2); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.storefront-option:hover, .storefront-option.is-active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.storefront-flag { font-size: 18px; line-height: 1; }
.storefront-option strong { display: block; font-size: var(--fs-body-2); }
.storefront-option small { display: block; color: var(--muted); font-size: 12px; }
.storefront-suggested { color: var(--accent-text); font-size: var(--fs-tag); font-style: normal; font-weight: var(--fw-bold, 700); letter-spacing: .04em; text-transform: uppercase; }
.peer-bar-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.peer-bar-label { color: var(--muted); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: .05em; text-transform: uppercase; }
/* When peers aren't clearly comparable, the bar becomes a prompt that leads
   the owner to add their own competitors. */
.peer-bar[data-peer-tone="empty"], .peer-bar[data-peer-tone="loose"] { border-color: var(--line-strong); border-left: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.peer-editor { margin-top: 12px; }
.peer-editor > summary { color: var(--accent-text); font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); cursor: pointer; list-style: none; }
.peer-editor > summary::-webkit-details-marker { display: none; }
.peer-bar[data-peer-tone="set"] .peer-editor { margin-top: 10px; }
.peer-bar[data-peer-tone="set"] .peer-editor > summary { color: var(--ink-soft); font-size: var(--fs-fine); font-weight: var(--fw-bold, 700); }
.peer-current { display: flex; flex-wrap: wrap; gap: 8px; }
.peer-current-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg-2); font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); color: var(--ink); }
.peer-current-chip .peer-remove { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-soft); font-size: var(--fs-body); line-height: 1; cursor: pointer; }
.peer-current-chip .peer-remove:hover { background: color-mix(in srgb, var(--neg) 16%, transparent); color: var(--neg); }
.peer-empty { margin: 0; color: var(--muted); font-size: var(--fs-body-2); }
.peer-add { margin-top: 14px; }
.peer-add .field > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .08em; text-transform: uppercase; }
.peer-add .scan-query-wrap { position: relative; }
.peer-add #peerSearch { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--card); color: var(--ink); font: inherit; }
.peer-actions p, .peer-error { margin: 0; color: var(--muted); font-size: var(--fs-note); }
.peer-error { margin-top: 10px; color: var(--neg); }
.peer-findings article { margin-top: 15px; padding: 17px; background: #e5e2d9; }
.peer-findings span { color: var(--accent-text); font-size: var(--fs-nano); font-weight: var(--fw-bold, 700); text-transform: uppercase; }
.peer-findings h5 { margin: 5px 0 0; font-size: var(--fs-body); }
.peer-findings p { margin: 6px 0 0; color: #5e6963; font-size: var(--fs-caption); }
.peer-findings small { display: block; margin-top: 9px; color: #78817c; font-size: var(--fs-nano); }

@media (max-width: 760px) {
  .public-read { padding: 21px 17px; grid-template-columns: 1fr; gap: 22px; }
  .public-read-action { padding: 20px 0 0; border-top: 1px solid var(--line-strong); border-left: 0; }
  .public-read footer { grid-template-columns: 1fr; }
  .public-reasons { grid-template-columns: 1fr; gap: 14px; }
  .peer-suggestions { grid-template-columns: 1fr 1fr; }
  .peer-actions { align-items: stretch; flex-direction: column; }
  .peer-actions button { width: 100%; }
  .public-limit { grid-template-columns: 1fr; }
  .public-limit .button { width: 100%; }
}

@media (max-width: 380px) {
  .public-app-head { grid-template-columns: 50px 1fr; }
  .public-app-head > img, .public-app-head > svg { width: 50px; height: 50px; }
  .public-app-head .public-app-meta { grid-column: 2; justify-items: start; text-align: left; }
  .public-signal-row { grid-template-columns: 1fr; }
  .public-signal-row > div, .public-signal-row > div:nth-child(2), .public-signal-row > div:nth-child(3) { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .peer-suggestions { grid-template-columns: 1fr; }
}

/* Public analysis workspace v2 */
.intake-workspace {
  width: min(1120px, calc(100% - 40px));
  padding: 56px 0 110px;
  display: block;
}
.intake-header { padding-right: max(20px, calc((100vw - 1120px) / 2)); padding-left: max(20px, calc((100vw - 1120px) / 2)); }
.scan-stage { margin: 0; padding: 0; border: 0; }
.scan-preamble { max-width: 760px; animation: workspace-enter .55s cubic-bezier(.2,.75,.2,1) both; }
.scan-preamble .eyebrow { margin: 0 0 16px; }
.scan-preamble h1 { max-width: 690px; margin: 0; font-size: clamp(44px, 7vw, 76px); line-height: .96; letter-spacing: -.06em; }
.scan-preamble > p:last-child { max-width: 620px; margin: 20px 0 0; color: var(--muted); font-size: var(--fs-body); }
/* The intro stays; its copy crossfades to result framing once the report lands. */
.scan-preamble h1, .scan-preamble > p:last-child { transition: opacity .28s ease, transform .28s ease; }
.scan-preamble.is-fading h1, .scan-preamble.is-fading > p:last-child { opacity: 0; transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .scan-preamble h1, .scan-preamble > p:last-child { transition: none; } }
.scan-progress { margin-top: 15px; display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: var(--fs-body-2); }
.scan-progress i { width: 42px; height: 2px; overflow: hidden; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.scan-progress i::after { content: ""; width: 55%; height: 100%; display: block; background: var(--accent); animation: scan-sweep 1s ease-in-out infinite alternate; }
.scan-progress[hidden] { display: none; }
.scan-candidates { max-width: 800px; }
.scan-query-wrap { position: relative; }
.scan-suggestions { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; left: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--r-4); background: var(--card); box-shadow: 0 24px 64px rgb(var(--shade) / .2); }
.scan-suggestions[hidden] { display: none; }
.scan-suggestions button { width: 100%; padding: 10px 12px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.scan-suggestions button:last-child { border-bottom: 0; }
.scan-suggestions button:hover, .scan-suggestions button.is-active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.scan-suggestions img, .scan-suggestions .app-icon-blank { width: 40px; height: 40px; border-radius: 9px; }
.scan-suggestions .app-icon-blank { display: block; border: 1px solid var(--line); background: var(--raise-strong); }
.scan-suggestions strong, .scan-suggestions small { display: block; }
.scan-suggestions strong { font-size: var(--fs-ui); }
.scan-suggestions small { color: var(--faint); font-size: var(--fs-note); }
.scan-suggestions em { color: var(--accent); font-size: var(--fs-note); font-style: normal; }
.public-preview { width: 100%; margin-top: 0; padding: clamp(26px, 4vw, 48px); animation: report-in .45s cubic-bezier(.2,.75,.2,1) both; }
.scan-preamble:not([hidden]) ~ .public-preview { margin-top: 46px; }
.public-app-head { grid-template-columns: 66px 1fr auto; padding-bottom: 26px; }
.public-app-head > img, .public-app-head > svg { width: 66px; height: 66px; border-radius: 15px; }
.public-app-head h2 { margin: 3px 0 2px; font-size: 26px; letter-spacing: -.035em; }
/* Scoped to the head and resetting the kicker treatment: the bare class loses to
   `.public-app-head p`, which would render this sentence uppercase at weight 800. */
.public-app-head .storefront-autonote { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: 0; line-height: 1.45; text-transform: none; }
.public-app-head p { font-size: var(--fs-note); }
.public-app-head span { font-size: var(--fs-body-2); }
.public-app-head .public-app-meta span { font-size: var(--fs-note); }
.public-signal-row > div { padding-top: 24px; padding-bottom: 24px; }
.public-signal-row span, .public-signal-row small { font-size: var(--fs-note); }
.public-signal-row strong { font-size: 26px; }
.public-read { margin-top: 30px; padding: clamp(24px, 3vw, 34px); gap: 34px; }
.public-read-copy > span, .public-read-action > span { font-size: var(--fs-note); }
.public-read h3 { margin: 8px 0 0; font-size: clamp(27px, 4vw, 42px); line-height: 1.02; letter-spacing: -.045em; }
.public-read-copy p { font-size: var(--fs-ui); line-height: 1.55; }
.public-read-action { padding-left: 30px; }
.public-read-action strong { font-size: var(--fs-body); line-height: 1.5; }
.public-read-action dl > div { grid-template-columns: 82px 1fr; padding: 9px 0; font-size: var(--fs-fine); }
/* "Does not tell us" is the most honest line in the report and it was set two
   steps below the observation it qualifies. It reads at body size now. */
.public-read footer p { font-size: var(--fs-ui); line-height: 1.55; color: var(--ink-soft); }
.version-context > span, .visual-read .read-block-head span, .peer-auto .read-block-head span { color: var(--accent); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: .08em; text-transform: uppercase; }
.version-context { padding: 25px 0; border-bottom: 1px solid var(--line-strong); }
.version-context strong { display: block; margin-top: 7px; font-size: var(--fs-lead); }
.version-context p { max-width: 760px; margin: 6px 0 0; color: var(--muted); font-size: var(--fs-body-2); }
.visual-read, .peer-auto { padding: 32px 0; border-bottom: 1px solid var(--line-strong); }
.visual-read .read-block-head, .peer-auto .read-block-head { display: flex; justify-content: space-between; gap: 30px; align-items: baseline; }
.visual-read .read-block-head p, .peer-auto .read-block-head p { max-width: 620px; margin: 0; font-size: var(--fs-body-2); text-align: right; }
.public-screenshots { grid-template-columns: repeat(3, minmax(0, 180px)); gap: 12px; }
.visual-read #visualReadResult { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.visual-read #visualReadResult article { padding-top: 16px; border-top: 2px solid var(--line-strong); }
.visual-read #visualReadResult article span, .peer-auto article span { color: var(--muted); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); text-transform: uppercase; }
.visual-read #visualReadResult article strong, .peer-auto article strong { display: block; margin-top: 6px; font-size: var(--fs-lead); }
.visual-read #visualReadResult article p, .peer-auto article p { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-body-2); }
.visual-read #visualReadResult > small { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-fine); }
.peer-auto #peerResult { margin-top: 18px; display: grid; gap: 12px; }
.peer-auto article { padding: 19px; background: var(--bg-2); }
.peer-auto article small { display: block; margin-top: 10px; color: var(--muted); font-size: var(--fs-fine); }
.peer-auto details, .public-detail { margin-top: 17px; }
.peer-auto summary, .public-detail summary { color: var(--ink-soft); font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); cursor: pointer; }
.peer-auto details button { margin-top: 10px; padding: 10px 14px; border: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-weight: var(--fw-bold, 700); cursor: pointer; }
.public-detail p { color: #606c65; font-size: var(--fs-body-2); }
.read-feedback { font-size: var(--fs-body-2); }
.read-feedback button { min-height: 38px; font-size: var(--fs-fine); }
.result-action { margin-top: 24px; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line-strong); }
.result-action > div > span { color: var(--accent); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: .08em; text-transform: uppercase; }
.result-action p { margin: 3px 0 0; color: var(--muted); font-size: var(--fs-body-2); }
.result-action .button { flex: 0 0 auto; }
/* The report action bar is gone. It gave the page two buttons for one decision:
   an ask inside the report's closing block and a second ask directly beneath
   the card. Both actions now live in `.unlock-actions` inside that block. */
/* Lead line for "Questions worth answering next" */
.area-intro { margin: 4px 0 14px; color: var(--muted); font-size: var(--fs-body-2); line-height: 1.5; max-width: 640px; }
.context-form { max-width: 760px; margin: 48px auto 0; }
.context-more { margin-top: 26px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.context-more summary { display: flex; justify-content: space-between; gap: 20px; color: var(--ink); font-size: var(--fs-ui); font-weight: var(--fw-bold, 700); cursor: pointer; }
.context-more summary span { color: var(--faint); font-size: var(--fs-fine); font-weight: var(--fw-bold, 700); }
.context-more #targetedQuestions { padding-bottom: 14px; }
.context-form #c_submit { margin-top: 28px; }
.field-error { display: block; margin-top: 6px; color: var(--neg) !important; font-size: var(--fs-fine) !important; }
.field-error[hidden] { display: none; }

/* Post-scan reveal. Namespaced .scan-reveal — the landing page owns
   .reveal/.in-view. */
/* visibility (not just opacity) so unrevealed controls cannot take focus. */
.scan-reveal { visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.scan-reveal.is-in { visibility: visible; opacity: 1; transform: none; }
/* Immutable private artifacts have no script to add .is-in. Keep chapters visible. */
.report-artifact .scan-reveal { visibility: visible; opacity: 1; transform: none; transition: none; }
.market-read { padding: 32px 0; border-bottom: 1px solid var(--line-strong); }
.market-read .read-block-head { display: flex; justify-content: space-between; gap: 30px; align-items: baseline; }
.market-read .read-block-head span { color: var(--accent); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: .08em; text-transform: uppercase; }
.market-read .read-block-head p { max-width: 620px; margin: 0; font-size: var(--fs-body-2); text-align: right; }
.market-read #marketReadResult { margin-top: 18px; display: grid; gap: 12px; }
/* The peer articles are stacked inside #peerSample, not directly in the grid
   above, so without their own gap their borders sat flush against each other. */
.market-read #peerSample { display: grid; gap: 12px; }
.market-read article { padding: 19px 19px 19px 22px; border: 1px solid var(--line-strong); border-left: 4px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--r-3); background: color-mix(in srgb, var(--bg-2) 70%, var(--card)); }
.market-read article span { color: var(--accent-text); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); text-transform: uppercase; }
.market-read article strong { display: block; margin-top: 6px; font-size: var(--fs-lead); }
.market-read article p { margin: 6px 0 0; color: var(--ink-soft); font-size: var(--fs-body-2); }
.market-read article small { display: block; margin-top: 10px; color: var(--muted); font-size: var(--fs-fine); }
.market-read .market-guardrail { color: var(--muted); font-size: var(--fs-fine); }
.market-read .market-empty { margin: 0; color: #68736d; font-size: var(--fs-body-2); }
.market-read details { margin-top: 17px; }
.market-read summary { color: var(--ink-soft); font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); cursor: pointer; }
.market-read details button { margin-top: 10px; padding: 10px 14px; border: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-weight: var(--fw-bold, 700); cursor: pointer; }
.market-skeleton { display: grid; gap: 10px; }
.market-skeleton i { height: 44px; display: block; background: linear-gradient(100deg, var(--bg-2) 35%, var(--bg-2) 48%, var(--bg-2) 61%); background-size: 220% 100%; animation: market-shimmer 1.3s ease-in-out infinite; }
.public-read-action .next-step-body { margin: 8px 0 14px; color: var(--ink-soft); font-size: var(--fs-body-2); line-height: 1.5; }
.result-action--primary { padding: 20px; border-top: 1px solid var(--line-strong); border-left: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); background: var(--bg-2); }
.result-action--primary .button { min-height: 48px; }
.result-action--next { margin-top: 30px; padding: 24px 26px; border: 0; border-radius: var(--r-5); background: var(--bg-2); box-shadow: 0 16px 34px rgb(var(--shade) / .07); }
.result-action--next > div { max-width: 560px; }
.result-action--next > div > span { font-size: var(--fs-note); letter-spacing: .13em; }
.result-action--next strong { display: block; margin-top: 6px; color: var(--ink); font-family: var(--sans); font-size: clamp(19px, 2.2vw, 24px); font-weight: var(--fw-bold, 700); letter-spacing: -.025em; line-height: 1.08; }
.result-action--next p { max-width: 520px; margin-top: 7px; line-height: 1.45; }
.result-action--next .button { box-shadow: 0 8px 18px rgb(var(--shade) / .13); transition: transform .18s ease, box-shadow .18s ease; }
.result-action--next .button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgb(var(--shade) / .18); }

@keyframes market-shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* Numbered report chapters. Prominent breaks: a strong rule above each chapter,
   a bigger head with a short accent bar under it, and generous air, so a reader
   scrolling the report sees where one theme ends and the next begins. Replaces
   the faint alternating tonal bands, which did not read as section breaks at
   all (Calm feedback round). */
/* A CHAPTER BREAK HAS TO OUTWEIGH A BLOCK BREAK, and it did not.
   Measured: two chapters were separated by 22px + rule + 44px = 66px, while two
   sub-blocks inside one chapter (`.store-footprint`, `.pricing-read` and their
   siblings, all `padding: 30px 0`) were separated by 61px. An 8% difference is
   not a difference anyone perceives, so the only thing distinguishing "new
   chapter" from "next block" was a 2px rule against a 1px one. That is why the
   report scans as one undifferentiated column: the vertical rhythm carried no
   hierarchy at all.

   96px against 61px is about 1.6x, which reads as a level change. The bottom
   padding grows too, so the rule that opens a chapter does not sit almost
   against the last line of the one before it. Pinned by a ratio test, because
   this collapsed once by drift and would again. */
.report-part { padding: 64px 0 30px; margin: 0; border-top: 2px solid var(--line-strong); border-radius: 0; background: transparent; }
.report-part:first-of-type { border-top: 0; padding-top: 20px; }
/* The report's contents list. Reads as apparatus, not as a chapter: small,
   quiet, rules above and below, and it never competes with the first heading
   it points at. */
.report-index { margin: 26px 0 34px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.report-index > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: var(--fs-tag); font-weight: var(--fw-bold, 700); letter-spacing: .07em; text-transform: uppercase; }
.report-index ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; counter-reset: chapter; }
.report-index li { counter-increment: chapter; }
.report-index li::before { content: counter(chapter) ". "; color: var(--muted); font-variant-numeric: tabular-nums; }
.report-index a { color: var(--ink-soft); font-size: var(--fs-body-2); text-decoration: none; border-bottom: 1px solid transparent; }
.report-index a:hover { color: var(--ink); border-bottom-color: var(--accent); }
@media print { .report-index { break-inside: avoid; } }

.report-part-head { margin-bottom: 22px; }
.report-part-head h3 { margin: 0; font-size: clamp(23px, 3vw, 30px); letter-spacing: -.035em; }
.report-part-head h3::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--accent); }
.report-part-head p { margin: 10px 0 0; color: var(--muted); font-size: var(--fs-body-2); max-width: 72ch; }
/* ONE rule at a chapter boundary, not two.
   This `:last-child` line existed to stop a chapter's last block painting a
   divider right where the next chapter paints its own. It was defeated two
   different ways, both measured on a live report:

     Pricing   `.pricing-read` sits inside a mount `<div>`, so the zeroing hit
               the wrapper (which has no border) while the block kept its own.
     Ratings   the chapter ends on a borderless `.version-context`, so the
               bordered `.review-timeline` before it is not `:last-child`.

   Either way a 1px block rule landed 30px above the 2px chapter rule, and the
   break read as a doubled line rather than a level change, which undercuts the
   whole point of separating chapters more than blocks. The two additions cover
   nesting and a trailing annotation; verified by injecting them into a live
   report and re-measuring every boundary. */
.report-part-body > :last-child,
.report-part-body > :last-child > :last-child,
.report-part-body > :has(+ .version-context) { border-bottom: 0; margin-bottom: 0; }
.report-part .read-block-head span, .report-part .version-context > span { color: var(--muted); font-size: var(--fs-note); }
/* A chapter that came back empty states it in one quiet line, in the same
   register as .chart-sentence and .public-limit: below the chapter head,
   not dressed up as a finding of its own. */
.chapter-empty { max-width: 62ch; margin: 14px 0 0; color: var(--muted); font-size: var(--fs-fine); line-height: 1.55; }

/* Universal + depth blocks: footprint, theme donut, sentiment timeline,
   peer table, messaging card, area strip. All in the intake namespace. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.store-footprint, .review-timeline, .area-strip { padding: 30px 0; border-bottom: 1px solid var(--line-strong); }
.store-footprint .read-block-head span, .review-timeline .read-block-head span, .area-strip .read-block-head span { color: var(--accent); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: .08em; text-transform: uppercase; }
.store-footprint .read-block-head, .review-timeline .read-block-head, .area-strip .read-block-head { display: flex; justify-content: space-between; gap: 30px; align-items: baseline; }
.store-footprint .read-block-head p, .review-timeline .read-block-head p, .area-strip .read-block-head p { max-width: 620px; margin: 0; font-size: var(--fs-body-2); text-align: right; }
.store-footprint > p { max-width: 760px; margin: 14px 0 0; color: var(--ink-soft); font-size: var(--fs-ui); line-height: 1.55; }
.store-footprint .footprint-tip { padding: 12px 14px; border-left: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); background: var(--bg-2); color: var(--ink-soft); }
.store-footprint a { color: var(--accent); font-weight: var(--fw-bold, 700); }
.tl-legend { margin-top: 18px; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); }
.tl-chip { width: 10px; height: 10px; display: inline-block; border-radius: 3px; }
.tl-chip--pos { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tl-chip--neg { margin-left: 10px; background: color-mix(in srgb, var(--neg) 16%, transparent); }
.tl-chart { margin-top: 10px; display: flex; gap: 6px; align-items: stretch; }
.tl-month { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.tl-up { height: 56px; display: flex; align-items: flex-end; }
.tl-down { height: 56px; border-top: 1px solid var(--line-strong); display: flex; align-items: flex-start; }
.tl-pos { width: 14px; display: block; background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 2px 2px 0 0; }
.tl-neg { width: 14px; display: block; background: color-mix(in srgb, var(--neg) 16%, transparent); border-radius: 0 0 2px 2px; }
.tl-label { margin-top: 6px; color: var(--warn); font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); letter-spacing: .04em; text-transform: uppercase; }
.tl-version { margin-top: 3px; padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--warn); font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: var(--fs-note); font-style: normal; white-space: nowrap; }
.tl-version--exact { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.tl-note { margin: 16px 0 0; color: var(--muted); font-size: var(--fs-fine); }
/* The quadrant's legend and its facts table, merged. The leading cell is the
   plot number, so a row and its dot read as one thing. */
.peer-list { margin: 14px 0 0; padding: 0; list-style: none; }
.peer-list .scan-peer-row { padding: 10px 0; display: grid; grid-template-columns: 26px 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; border-top: 1px solid var(--line-strong); transition: padding-left .18s ease, background .18s ease; }
.peer-list .scan-peer-row:first-child { border-top: 0; }
.peer-list .scan-peer-row:hover, .peer-list .scan-peer-row.is-hot { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.peer-list .scan-peer-row.is-target { padding-left: 10px; border-left: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); background: var(--bg-2); }
.peer-num { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--muted); color: var(--accent-ink); font-size: var(--fs-note); font-style: normal; font-weight: var(--fw-bold, 700); }
.peer-num.is-blank { background: transparent; }
.peer-list .scan-peer-row.is-target .peer-num { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
.peer-list img, .peer-list .peer-initial { width: 40px; height: 40px; border-radius: 9px; }
.peer-list .peer-initial { display: grid; place-items: center; background: var(--bg-2); color: var(--ink-soft); font-size: var(--fs-body); font-style: normal; font-weight: var(--fw-bold, 700); }
.peer-list .peer-name { min-width: 0; }
.peer-list strong { display: block; font-size: var(--fs-ui); }
.peer-list strong a { color: inherit; }
.peer-list small { display: block; color: var(--muted); font-size: var(--fs-note); }
.peer-list em { color: var(--ink-soft); font-size: var(--fs-body-2); font-style: normal; font-weight: var(--fw-bold, 700); }
.peer-list-note { display: block; margin-top: 9px; color: var(--muted); font-size: var(--fs-note); }
.peer-vol { width: 72px; height: 4px; margin-top: 4px; display: block; border-radius: 2px; background: var(--bg-2); overflow: hidden; }
.peer-vol b { height: 100%; display: block; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.peer-lowbar { width: 72px; height: 4px; margin: 3px 0 2px; display: block; border-radius: 2px; background: var(--bg-2); overflow: hidden; }
.peer-lowbar b { height: 100%; display: block; background: color-mix(in srgb, var(--neg) 16%, transparent); }
.rating-trend { margin-top: 18px; }
.rating-trend-wrap { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }
.rating-trend-svg { flex: 1; height: 84px; display: block; min-width: 0; }
.rating-trend-scale { display: flex; flex-direction: column; justify-content: space-between; padding: 6px 0; color: var(--muted); font-size: var(--fs-caption); }
/* Pricing chapter: authoritative IAP roster and factual market map */
.pricing-loading { min-height: 92px; display: flex; gap: 16px; align-items: center; color: var(--ink-soft); }
.pricing-loading > i { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: color-mix(in srgb, var(--accent) 40%, transparent); animation: pricing-spin .9s linear infinite; }
.pricing-loading strong, .pricing-loading small { display: block; }
.pricing-loading small { margin-top: 4px; color: var(--muted); font-size: var(--fs-fine); }
/* Cadence pricing matrix: rows = cadence (+ Upfront), columns = this app + peers. */
/* Scroll shadows are the affordance the bare overflow never had: they appear
   only on the overflowing side, from the classic background-attachment pair
   (the surface-coloured covers scroll with the content; the shaded edges do
   not), so a matrix that fits shows nothing. */
.pricing-matrix {
  margin-top: 16px; overflow-x: auto;
  background:
    linear-gradient(90deg, var(--bg) 30%, transparent) 0 0,
    linear-gradient(270deg, var(--bg) 30%, transparent) 100% 0,
    linear-gradient(90deg, rgb(var(--shade) / .16), transparent) 0 0,
    linear-gradient(270deg, rgb(var(--shade) / .16), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}
.pricing-matrix .pm-row { display: grid; grid-template-columns: minmax(78px, .55fr) repeat(var(--pm-cols, 3), minmax(96px, 1fr)); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-strong); align-items: start; }
.pricing-matrix .pm-head { border-top: 0; align-items: end; }
/* Phase 1.2 uplifted the matrix off 11/13px, but the owner still flagged the
   table as hard to read. One more step on the matrix only — structure stays. */
.pricing-matrix .pm-rowlabel { align-self: center; color: var(--ink-soft); font-size: var(--fs-fine); font-weight: var(--fw-bold, 700); letter-spacing: .04em; text-transform: uppercase; }
.pricing-matrix .pm-col { display: flex; flex-direction: column; gap: 4px; }
.pricing-matrix .pm-col .peer-icon img, .pricing-matrix .pm-col .peer-initial { width: 28px; height: 28px; border-radius: 7px; }
.pricing-matrix .pm-col .peer-initial { display: grid; place-items: center; background: var(--bg-2); color: var(--ink-soft); font-size: var(--fs-fine); font-style: normal; font-weight: var(--fw-bold, 700); }
.pricing-matrix .pm-col strong { font-size: var(--fs-ui); line-height: 1.2; }
.pricing-matrix .pm-col strong a { color: inherit; }
.pricing-matrix .pm-state { color: var(--muted); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); }
.pricing-matrix .pm-cell { font-size: var(--fs-ui); color: var(--ink); }
.pricing-matrix .pm-cell.pm-empty { color: var(--faint); }
.pricing-matrix .pm-cell.pm-empty.is-free {
  color: var(--ink-soft);
  font-size: var(--fs-fine);
  font-weight: var(--fw-bold, 700);
  letter-spacing: .02em;
}
.pricing-matrix .pm-plan { display: block; }
.pricing-matrix .pm-plan + .pm-plan { margin-top: 8px; }
.pricing-matrix .pm-plan b { font-size: var(--fs-ui); font-weight: var(--fw-bold, 700); }
.pricing-matrix .pm-plan em { display: block; margin-top: 2px; color: var(--muted); font-style: normal; font-size: var(--fs-fine); }
/* Trial is a packaging fact, not a caption. Was a bare muted <small>. */
.pricing-matrix .pm-trial { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: .01em; vertical-align: 1px; }
.pricing-trial-lead { margin: 0 0 14px; max-width: 62ch; color: var(--ink-soft); font-size: var(--fs-ui); line-height: 1.45; }
/* Highlight the scanned app's column (always the first app column after the label). */
.pricing-matrix .pm-row > *:nth-child(2) {
  background: var(--bg-2);
  border-radius: var(--r-3);
  margin: -10px -6px;
  padding: 14px 12px;
}
.pricing-matrix .scan-pricing-note { display: block; margin-top: 12px; }
.scan-pricing-note { display: block; margin-top: 10px; color: var(--muted); font-size: var(--fs-note); }
/* The peer price band (wired in the IA round). The .pb-* rules that styled an
   SVG variant nothing ever emitted are gone; the band is the CSS axis below.
   The <u> mark is this app's own price — the one accented mark on the line. */
.price-band { padding: 24px 0 8px; }
.price-band-line { position: relative; height: 4px; margin: 25px 8px 18px; background: var(--bg-2); }
.price-band-line i, .price-band-line b { position: absolute; top: -6px; width: 2px; height: 16px; background: var(--muted); transform: translateX(-1px); }
.price-band-line b { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.price-band-line u { position: absolute; top: -8px; width: 4px; height: 20px; background: var(--accent); transform: translateX(-2px); border-radius: 2px; text-decoration: none; }
.price-band > small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-note); }
.pricing-intent-note { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-strong); color: var(--ink-soft); font-size: var(--fs-body-2); }
.pricing-intent-note b { color: var(--ink); }
.positioning { margin-top: 18px; padding: 17px 19px; background: var(--bg-2); }
.positioning > span { color: var(--muted); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); text-transform: uppercase; }
.positioning p { margin: 9px 0 0; color: var(--ink-soft); font-size: var(--fs-body-2); }
.positioning ul { margin: 9px 0 0; padding: 0; list-style: none; }
.positioning li { margin-top: 5px; color: var(--ink-soft); font-size: var(--fs-body-2); }
.positioning b { display: inline-block; margin: 1px 2px; padding: 1px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg-2); font-weight: var(--fw-bold, 700); }
.positioning small { display: block; margin-top: 11px; color: var(--muted); font-size: var(--fs-fine); }
.area-strip #areaItems { margin-top: 14px; }
.area-ask { border-top: 1px solid var(--line-strong); }
.area-ask summary { padding: 13px 0; display: flex; justify-content: space-between; gap: 18px; align-items: baseline; color: var(--ink); font-size: var(--fs-ui); font-weight: var(--fw-bold, 700); cursor: pointer; list-style: none; }
.area-ask summary::-webkit-details-marker { display: none; }
.area-ask summary span::before { content: "+ "; color: var(--accent); }
.area-ask[open] summary span::before { content: "− "; }
.area-ask summary em { display: inline-flex; gap: 6px; align-items: center; color: var(--accent); font-size: var(--fs-caption); font-style: normal; font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase; }
.area-ask summary em::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.area-ask.is-mention summary em::before { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.area-ask.is-mention summary em { color: var(--warn); }
.area-panel { padding: 0 0 16px; }
.area-panel p { max-width: 720px; margin: 0 0 8px; color: var(--ink-soft); font-size: var(--fs-body-2); line-height: 1.5; }
.area-unlocks b { color: var(--accent); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: .05em; text-transform: uppercase; }
.area-continue { margin-top: 4px; padding: 9px 14px; border: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-size: var(--fs-fine); font-weight: var(--fw-bold, 700); cursor: pointer; }
/* The Working / Fix split (IA round): what the listing shows beside what to
   change, as parallel columns that stack on narrow screens. Either column is
   absent when its list is empty. */
.visual-split { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px 26px; align-items: start; }
.visual-shows > span { color: var(--muted); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); text-transform: uppercase; }
.visual-tips { margin-top: 0; }
.visual-tips > span { color: var(--muted); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); text-transform: uppercase; }
.visual-tips ul { margin: 8px 0 0; padding: 0; list-style: none; }
.visual-tips li { padding: 8px 0; border-top: 1px solid var(--line-strong); }
.visual-tips li strong { display: block; font-size: var(--fs-body-2); }
.visual-tips li small { color: var(--muted); font-size: var(--fs-fine); }

/* Public decision sheet v3 — one claim, then only evidence that clears a
   usefulness floor. Async modules stay absent when their source returns no
   meaningful result. */
.public-signal-row--1 { grid-template-columns: 1fr; }
.public-signal-row--2 { grid-template-columns: repeat(2, 1fr); }
.sample-scope-note {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: var(--fs-fine);
  line-height: 1.5;
}
.public-read { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); }
.public-read-copy > span, .public-read-action > span { color: var(--accent); }
.public-read footer b { color: var(--ink-soft); font-weight: var(--fw-bold, 700); }
.scan-method { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.scan-method summary { color: var(--ink-soft); font-size: var(--fs-fine); font-weight: var(--fw-bold, 700); cursor: pointer; }
.scan-method p { max-width: 820px; margin: 9px 0 0; color: var(--muted); font-size: var(--fs-fine); line-height: 1.55; }

.review-themes, .release-cadence, .pricing-read {
  padding: 30px 0;
  border-bottom: 1px solid var(--line-strong);
}
.review-themes .read-block-head, .release-cadence .read-block-head, .pricing-read > .read-block-head, .price-ladder .read-block-head {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: baseline;
}
.review-themes .read-block-head span, .release-cadence .read-block-head span, .pricing-read > .read-block-head span, .price-ladder .read-block-head span {
  color: var(--accent);
  font-size: var(--fs-note);
  font-weight: var(--fw-bold, 700);
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* A MEASURE CEILING for running prose.
   The report column is up to 1120px wide and the card takes 48px of padding a
   side, so text with no max-width sets about 128 characters to the line. The
   comfortable range is 45 to 75. Most prose here already caps itself, but
   eighteen rules did not, and they included the ones that matter most: the read
   card's observation (the most-read sentence in the report), the closing
   argument's list, and "Why it works" inside an initiative.

   68ch, in ch rather than px, so the cap tracks the font size instead of
   drifting every time the type scale moves. The px caps already in the file
   (560/620/640/760px) are that drift: 760px is 95 characters at 15px and was
   set when the surrounding copy was a different size.

   Listed explicitly rather than applied to every p and li in the report,
   because a broad rule would also override the deliberately NARROWER caps
   (52ch on the read card footer, 62ch on the empty-chapter line) and widen
   them. tests/workspace_ui.test.mjs fails if a new prose rule ships with a
   font-size and no cap. */
.public-read-copy p,
.visual-read #visualReadResult article p, .peer-auto article p,
.visual-read #visualReadResult > small,
.market-read article p, .market-read article small,
.positioning p, .positioning li, .positioning small,
.positioning-peers li, .positioning-citations li,
.mi-detail p, .mi-copy small, .mi-figure small,
.unlock-list li,
.review-flow p,
.theme-group > div small, .theme-group li > small,
.release-cadence-cell small,
.release-note, .price-ladder > small { max-width: 68ch; }

/* ONE kicker size inside the report.
   `.read-block-head span` is a single component that had accumulated six
   declarations across six scopes, landing on --fs-caption in one and --fs-note
   in the others. The reader sees the same uppercase label at two sizes
   depending which chapter it is in, which is the "too many text sizes" problem
   in its purest form: not a hierarchy, just drift.

   Deliberately one late rule at equal specificity rather than six edits. Every
   declaration above is (0,2,1) and so is this, so source order settles it, and
   a future block that adds a seventh scope inherits the right size by sitting
   under .public-preview like all the others. The sibling micro-labels are
   folded in for the same reason: they are the same thing wearing a different
   class name. */
.public-preview .read-block-head span,
.report-document .read-block-head span,
.public-preview .unlock-group-head,
.report-document .unlock-group-head,
.public-preview .mi-head,
.report-document .mi-head,
.public-preview .review-flow-head,
.report-document .review-flow-head { font-size: var(--fs-micro); }

.review-themes .read-block-head p, .release-cadence .read-block-head p, .pricing-read > .read-block-head p, .price-ladder .read-block-head p {
  max-width: 610px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body-2);
  text-align: right;
}
.theme-groups { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.theme-group:only-child { grid-column: 1 / -1; max-width: 720px; }
.theme-group > div { padding-bottom: 11px; border-bottom: 2px solid var(--line-strong); }

/* Written-review flow: a change worth explaining, not a verdict. Tinted rail
   rather than a badge, because the block is a question the reader answers with
   data this report cannot see. */
.review-flow { margin: 22px 0 0; padding: 14px 0 2px 15px; border-left: 3px solid var(--line-strong); }

/* Initiatives behind a move: the figure is the payload, so it gets its own
   column and the qualifier sits under it, never beside the claim. */
.move-initiatives { margin: 14px 0 0; padding: 13px 0 0; border-top: 1px solid var(--line-strong); }
.mi-head { display: block; margin-bottom: 9px; font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase; color: #727a76; }
.move-initiatives ul { margin: 0; padding: 0; list-style: none; }
.move-initiatives li { padding: 0; border-bottom: 1px solid var(--line); }
.move-initiatives li:last-of-type { border-bottom: 0; }
/* The row is the summary, so the flex layout moves onto it. The marker is a
   plain caret at the end: a disclosure the reader can miss is a disclosure
   that does not exist. */
/* Both columns start at the top. It was `baseline`, which aligned the figure to
   the title's first line; that worked while the result column held one number,
   and misaligns the moment it holds a stack. */
.mi-item > details > summary, .mi-item:not(:has(details)) { display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; padding: 9px 0; cursor: pointer; list-style: none; }
.mi-item > details > summary::-webkit-details-marker { display: none; }
.mi-item > details > summary::after { content: "+"; flex: 0 0 auto; align-self: center; color: #8b938e; font-weight: var(--fw-bold, 700); }
.mi-item > details[open] > summary::after { content: "\2212"; }
.mi-item > details > summary:hover .mi-copy strong { color: var(--accent-text, #2f3ba8); }
.mi-item > details > summary:focus-visible { outline: 2px solid var(--accent, #2f3ba8); outline-offset: 2px; }
.mi-detail { padding: 2px 0 14px; }
.mi-detail p { margin: 0 0 9px; font-size: var(--fs-fine); line-height: 1.6; color: #3f4945; }
.mi-detail p:last-child { margin-bottom: 0; }
.mi-detail b { color: #23302b; }
.mi-feasibility, .mi-source { font-size: var(--fs-micro); color: #6b746f; }
.mi-claim { padding-left: 12px; border-left: 2px solid var(--line-strong); }
.mi-detail .mi-note { font-size: var(--fs-micro); color: #6b746f; }
.mi-source a { color: var(--accent-text, #2f3ba8); }
.mi-copy strong { display: block; font-size: var(--fs-fine); font-weight: var(--fw-bold, 700); color: #23302b; }
.mi-copy small { display: block; margin-top: 2px; font-size: var(--fs-micro); color: #6b746f; }
.mi-fits { margin-top: 5px; line-height: 1.45; }
.mi-fits b { color: #4e5853; font-weight: var(--fw-bold, 700); }

/* THE RESULT COLUMN, and it reads top to bottom in one order on every row:
   what moved (Watch), by how much (the figure), who measured it (provenance).

   The metric used to close the LEFT column while the figure opened the right
   one, so a reader had to carry "Customer to paying conversion" across the row
   to reach "~20% to ~30%" and work out that the two were about each other. A
   figure is meaningless until you know what it moved, so the label now sits
   directly above the number it names.

   Fixed slot order is what makes a list of these scannable: the eye learns the
   shape once on the first row and reuses it. The `+` control stays vertically
   centred rather than joining the stack, so the top right corner belongs to the
   metric and not to a disclosure affordance. */
/* One column edge for every row. `flex: 0 0 auto` sized this to its contents,
   so the result column began at a different x on each row (measured live: 900,
   921, 975) and the eye had to find it again every time. A fixed basis is what
   makes the list scannable, which is the whole point of a shared layout.

   Left-aligned, not right. Right alignment gave the three lines three ragged
   left edges, and the metric, the figure and the provenance are a stack that
   reads top to bottom, so they should share the edge the eye returns to. */
.mi-copy { flex: 1 1 auto; min-width: 0; }
.mi-figure { flex: 0 0 min(260px, 34%); min-width: 0; text-align: left; }
.mi-figure .mi-metric { display: block; margin: 0 0 3px; line-height: 1.4; }
.mi-figure .mi-metric b { color: var(--accent-text, #2f3ba8); font-weight: var(--fw-bold, 700); }
/* DIRECT child only. `.mi-figure b` was written when the only `b` in this
   column was the figure itself; the metric label moved in carrying a `<b>Watch`
   of its own, which the rule then turned into a block at the figure's size and
   colour. So "Watch" broke onto a line by itself above its own metric, on every
   row, and read as a stray word. Nothing in the markup was wrong: the selector
   was over-broad and had simply never had a second `b` to hit. */
.mi-figure > b { display: block; font-size: var(--fs-fine); color: var(--trend, #2f5d8a); }
.mi-figure .mi-provenance { display: block; margin-top: 3px; line-height: 1.4; }
.mi-figure small { display: block; margin-top: 2px; font-size: var(--fs-micro); color: #6b746f; }
/* Below the two-column threshold the result column would be ~120px, which sets
   the provenance line four words to a row. Stack instead. */
@media (max-width: 760px) {
  .mi-item > details > summary, .mi-item:not(:has(details)) { flex-wrap: wrap; }
  .mi-figure { flex: 1 0 100%; margin-top: 6px; }
}
.mi-note { display: block; margin-top: 10px; font-size: var(--fs-micro); line-height: 1.5; color: #6b746f; }
/* Says what the list is before the reader reads it as a prescription. Set at
   the list's own body size rather than the footnote size of .mi-note: it is a
   qualifier the reader has to actually take in, not fine print. */
.mi-lead { display: block; margin: 0 0 12px; max-width: 62ch; font-size: var(--fs-fine); line-height: 1.55; color: var(--ink-soft); }
.mi-lead b { color: var(--ink); }

/* What public data could not answer: deliberately quiet. It is the honest edge
   of the free report and the reason to connect, not an error state. */
/* The closing argument. It is the last thing in the report and the only place
   the report asks for anything, so it is set as a destination rather than a
   footnote: its own ground, real body type, and one button. */
.unlock-block { margin: 8px 0 0; padding: 28px; background: color-mix(in srgb, var(--accent) 5%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 4px; }
.unlock-group + .unlock-group { margin-top: 20px; }
.unlock-group-head { display: block; margin-bottom: 8px; color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .07em; text-transform: uppercase; }
.unlock-list { margin: 0; padding: 0; list-style: none; }
.unlock-list li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; font-size: var(--fs-ui); color: var(--ink-soft); }
.unlock-list i { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.unlock-cta { margin: 20px 0 0; max-width: 62ch; font-size: var(--fs-ui); line-height: 1.6; color: var(--ink-soft); }
/* Both report actions, in the one block that closes the report. The ask leads
   and the download sits beside it as a compact icon: the report itself is the
   printable surface, so downloading is the other thing a reader might want,
   never a second call to action competing with the first. */
.unlock-actions { margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.unlock-actions .unlock-download { min-width: 48px; padding: 0; gap: 0; border-color: var(--line-strong); color: var(--ink); }
.unlock-actions .unlock-download:hover { background: var(--raise-strong); color: var(--ink); }
.unlock-actions svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 520px) { .unlock-actions .unlock-button { flex: 1 1 auto; } }
/* The action bar used to live outside the report card precisely so it would
   never print. These live inside it, so the print rule is what keeps the
   printed report free of any call to action. */
@media print { .unlock-actions { display: none; } }

.review-flow.is-slowed { border-left-color: var(--neg, #a8442f); }
.review-flow.is-accelerated { border-left-color: var(--trend, #2f5d8a); }
.review-flow-head { display: block; margin-bottom: 6px; font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase; color: #727a76; }
.review-flow p { margin: 0 0 8px; font-size: var(--fs-fine); line-height: 1.55; color: #3f4945; }
.review-flow p:last-child { margin-bottom: 0; }
.review-flow-why b, .review-flow-do b { color: #23302b; }

.theme-group--friction > div { border-color: var(--line-strong); }
.theme-group > div span, .theme-group > div small { display: block; }
.theme-group > div span { color: var(--ink); font-size: var(--fs-ui); font-weight: var(--fw-bold, 700); }
.theme-group > div small { margin-top: 3px; color: var(--muted); font-size: var(--fs-note); }
.theme-group ol { margin: 0; padding: 0; list-style: none; }
.theme-group li { padding: 14px 0; border-bottom: 1px solid var(--line-strong); }
.theme-bar-copy { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.theme-bar-copy strong { color: var(--ink); font-size: var(--fs-body-2); }
.theme-bar-copy span { color: var(--muted); font-size: var(--fs-note); text-align: right; }
.theme-bar { height: 5px; margin-top: 8px; display: block; overflow: hidden; background: var(--bg-2); }
.theme-bar b { height: 100%; display: block; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.theme-group--friction .theme-bar b { background: color-mix(in srgb, var(--neg) 16%, transparent); }
.theme-group li > small { margin-top: 7px; display: block; color: var(--muted); font-size: var(--fs-note); line-height: 1.45; }

.peer-list .scan-peer-row {
  grid-template-columns: 26px 40px minmax(0, 1fr) minmax(90px, 120px) minmax(112px, 145px);
}
.peer-list .scan-peer-row:first-of-type { border-top: 0; }
.peer-list .scan-peer-row > em, .peer-list .scan-peer-row > small { min-width: 0; }

.visual-read { padding-top: 30px; }
.visual-read .public-screenshots { grid-template-columns: repeat(3, minmax(0, 180px)); }
.visual-read .public-screenshots figure { position: relative; margin: 0; min-width: 0; }
.visual-read .public-screenshots figure > span {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 7px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text);
  font-size: var(--fs-note);
  font-weight: var(--fw-bold, 700);
  box-shadow: 0 2px 8px rgb(var(--shade) / .18);
}
.visual-read .public-screenshots img { aspect-ratio: .54; display: block; }
.visual-summary { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--bg-2); border: 1px solid var(--line-strong); }
.visual-summary > div { padding: 18px; background: var(--bg-2); }
.visual-summary span, .visual-summary strong { display: block; }
.visual-summary span { color: var(--muted); font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase; }
.visual-summary strong { margin-top: 5px; color: var(--ink); font-size: var(--fs-body); }
.visual-summary p { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-fine); line-height: 1.5; }
.visual-observations { margin: 8px 0 0; padding: 0; list-style: none; }
.visual-observations li { padding: 11px 0; display: grid; grid-template-columns: 110px 1fr; gap: 15px; border-top: 1px solid var(--line-strong); }
.visual-observations b { color: var(--accent); font-size: var(--fs-note); }
.visual-observations span { color: var(--ink-soft); font-size: var(--fs-body-2); line-height: 1.5; }
.visual-caveat { margin-top: 14px; display: block; color: var(--muted); font-size: var(--fs-note); }

.release-insight { margin: 17px 0 0; padding: 13px 15px; border-left: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); background: var(--bg-2); color: var(--ink-soft); font-size: var(--fs-body-2); line-height: 1.5; }
/* Name, track, cadence: one three-column grid, shared by the axis header so the
   window labels bracket the track exactly and "Cadence" heads its own column. */
.release-axis { margin: 20px 0 4px; display: grid; grid-template-columns: 150px minmax(180px, 1fr) 200px; column-gap: 16px; color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .04em; text-transform: uppercase; }
.release-axis-window { display: flex; justify-content: space-between; }
.release-row { min-height: 54px; padding: 8px 0; display: grid; grid-template-columns: 150px minmax(180px, 1fr) 200px; column-gap: 16px; align-items: center; border-top: 1px solid var(--line-strong); }
.release-row > strong { color: var(--ink-soft); font-size: var(--fs-fine); }
.release-row.is-target > strong { color: var(--accent); }
.release-track { position: relative; height: 2px; margin: 0; background: var(--bg-2); }
.release-track i { position: absolute; top: 50%; width: 9px; height: 9px; border: 2px solid var(--line); border-radius: 50%; background: var(--muted); transform: translate(-50%, -50%); }
.release-row.is-target .release-track i { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.release-track i span { position: absolute; bottom: 12px; left: 50%; width: max-content; max-width: 180px; padding: 4px 6px; display: none; transform: translateX(-50%); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-size: var(--fs-micro); white-space: nowrap; }
.release-track i:first-child span { right: -5px; left: auto; transform: none; }
.release-track i:last-child:not(:first-child) span { right: auto; left: -5px; transform: none; }
.release-track i:hover span { display: block; }
.release-cadence-cell small { display: block; color: var(--muted); font-size: var(--fs-note); line-height: 1.45; }
.release-note, .price-ladder > small { margin-top: 11px; display: block; color: var(--muted); font-size: var(--fs-note); }

.pricing-read { margin-top: 0; }
.price-ladder { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.price-ladder ol { margin: 16px 0 0; padding: 0; list-style: none; }
.price-ladder li { min-height: 38px; display: grid; grid-template-columns: minmax(110px, .4fr) minmax(160px, 1fr) 88px; gap: 14px; align-items: center; }
.price-ladder li strong { color: var(--ink-soft); font-size: var(--fs-fine); }
.price-ladder li > i { height: 7px; display: block; background: var(--bg-2); }
.price-ladder li > i b { height: 100%; display: block; background: var(--muted); }
.price-ladder li.is-target strong, .price-ladder li.is-target span { color: var(--accent); font-weight: var(--fw-bold, 700); }
.price-ladder li.is-target > i b { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.price-ladder li > span { color: var(--ink-soft); font-size: var(--fs-note); text-align: right; }
.pricing-intent-note { line-height: 1.5; }

@keyframes workspace-enter { from { opacity: 0; transform: translateY(12px); } }
@keyframes report-in { from { opacity: 0; transform: translateY(18px) scale(.992); } }
@keyframes scan-sweep { from { transform: translateX(-30%); } to { transform: translateX(110%); } }
@keyframes pricing-spin { to { transform: rotate(360deg); } }
@keyframes pricing-arrive { from { opacity: 0; transform: translateY(5px); } }

@media (max-width: 760px) {
  .intake-header { height: 62px; }
  .intake-workspace { width: min(100% - 32px, 680px); padding: 36px 0 80px; }
  .scan-preamble h1 { max-width: 560px; font-size: clamp(42px, 12vw, 58px); }
  .scan-preamble > p:last-child { margin-top: 14px; font-size: var(--fs-ui); }
  .public-preview { margin-top: 0; margin-right: 0; margin-left: 0; padding: 24px 20px 20px; }
  .scan-preamble:not([hidden]) ~ .public-preview { margin-top: 30px; }
  .public-app-head { grid-template-columns: 52px 1fr; }
  .public-app-head > img, .public-app-head > svg { width: 52px; height: 52px; }
  .public-app-head h2 { font-size: 21px; }
  .public-app-head button { grid-column: 2; justify-self: start; }
  .public-signal-row { grid-template-columns: 1fr 1fr; }
  .public-signal-row > div:nth-child(3) { grid-column: 1 / -1; }
  .public-read { grid-template-columns: 1fr; gap: 24px; }
  .public-read-action { padding: 22px 0 0; border-top: 1px solid var(--line-strong); border-left: 0; }
  .public-read footer { grid-template-columns: 1fr; }
  .visual-read .read-block-head, .peer-auto .read-block-head, .market-read .read-block-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .visual-read .read-block-head p, .peer-auto .read-block-head p, .market-read .read-block-head p { text-align: left; }
  /* Same ratio at the narrow width, where the blocks keep their 30px and the
     chapter break otherwise disappears entirely (32 + 8 = 40 against 61). */
  .report-part { padding: 48px 0 20px; }
  .sample-scope-note { margin-top: 10px; }
  .review-themes .read-block-head, .release-cadence .read-block-head, .pricing-read > .read-block-head, .price-ladder .read-block-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .review-themes .read-block-head p, .release-cadence .read-block-head p, .pricing-read > .read-block-head p, .price-ladder .read-block-head p { text-align: left; }
  .theme-groups { grid-template-columns: 1fr; gap: 24px; }
  .theme-bar-copy { align-items: flex-start; flex-direction: column; gap: 3px; }
  .theme-bar-copy span { text-align: left; }
  .tl-chart { overflow-x: auto; padding-bottom: 6px; }
  .tl-month { min-width: 34px; }
  .peer-list .scan-peer-row { grid-template-columns: 22px 34px minmax(0, 1fr) auto; }
  .peer-list .scan-peer-row > small { grid-column: 3 / -1; margin-top: -4px; }
  .store-footprint .read-block-head, .review-timeline .read-block-head, .area-strip .read-block-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .store-footprint .read-block-head p, .review-timeline .read-block-head p, .area-strip .read-block-head p { text-align: left; }
  .public-screenshots { display: flex; overflow-x: auto; }
  .visual-read .public-screenshots figure { flex: 0 0 126px; }
  .public-screenshots img { flex: 0 0 112px; }
  .visual-read .public-screenshots img { width: 100%; }
  .visual-summary { grid-template-columns: 1fr; }
  .visual-observations li { grid-template-columns: 1fr; gap: 4px; }
  .visual-read #visualReadResult { grid-template-columns: 1fr; gap: 18px; }
  .visual-read #visualReadResult > small { grid-column: 1; }
  .result-action { align-items: flex-start; flex-direction: column; gap: 12px; }
  .result-action .button { min-height: 44px; padding: 0 14px; }
  .field-grid { grid-template-columns: 1fr; }
  .context-more summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  /* One column on mobile: the spacer and the "Cadence" label have nothing to
     head, and the cadence cell stacks under the track. */
  .release-axis { grid-template-columns: 1fr; }
  .release-axis > span:first-child, .release-axis > span:last-child { display: none; }
  .release-row { grid-template-columns: 1fr; grid-template-rows: auto; padding: 12px 0; }
  .release-row > strong { grid-row: auto; }
  .release-track { margin-top: 14px; }
  .release-cadence-cell { margin-top: 8px; }
  .price-ladder li { grid-template-columns: minmax(90px, .55fr) minmax(110px, 1fr); gap: 10px; padding: 5px 0; }
  .price-ladder li > span { grid-column: 2; text-align: left; }
}

@media (max-width: 390px) {
  .intake-workspace { width: calc(100% - 28px); padding-top: 20px; }
  .scan-preamble h1 { font-size: 43px; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-preamble, .public-preview, .scan-progress i::after { animation: none; }
  .public-preview, .result-action { scroll-behavior: auto; }
  .scan-reveal { transition: none; }
  .scan-reveal { visibility: visible; opacity: 1; transform: none; }
  .market-skeleton i, .pricing-loading > i { animation: none; }
}

/* ---- Report v2 (report_presentation_v1) ---- */
/* The public report carries no ranked-move action column, so the evidence-only
   read card collapses to a single column across breakpoints. */
.public-read--evidence { grid-template-columns: 1fr; }
/* With the next move leading the report, this card is supporting evidence
   rather than the headline, so it gives back the vertical weight it was
   claiming. Scoped to --evidence on purpose: on the live scan page the same
   card still leads and keeps its full size. */
.public-read--evidence { margin-top: 24px; padding: clamp(20px, 2.2vw, 26px); gap: 20px; }
.public-read--evidence h3, .public-read--evidence h4 { margin-top: 6px; font-size: clamp(19px, 2.3vw, 25px); line-height: 1.14; }
.public-read--evidence .public-read-copy p { margin-top: 9px; max-width: 68ch; font-size: var(--fs-ui); line-height: 1.55; }
.public-read--evidence footer { gap: 14px; }
.result-action-buttons { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.result-action--next .result-action-buttons .button { min-height: 46px; }
@media (max-width: 640px) {
  .result-action-buttons { width: 100%; flex-wrap: wrap; }
  .result-action-buttons .button { flex: 1 1 auto; }
}

/* Google Ads presence. Namespaced .gsig- because the .pm-* rules live under
   .pricing-matrix and inherit nothing outside it. Tokens only: there is no
   dark block in this file, dark mode is entirely tokens.css. */
.growth-signals { margin-top: 26px; }
.gsig-lead { margin: 0; max-width: 62ch; color: var(--ink-soft); font-size: var(--fs-ui); line-height: 1.45; }
.gsig-list { margin: 14px 0 10px; padding: 0; list-style: none; }
.gsig-row {
  display: grid;
  grid-template-columns: minmax(90px, 1.1fr) minmax(84px, auto) minmax(0, 1.6fr);
  gap: 10px 14px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--line-strong);
}
.gsig-row strong { font-size: var(--fs-ui); font-weight: var(--fw-bold, 700); line-height: 1.25; }
.gsig-state { font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: .02em; }
.gsig-state.is-yes { color: var(--accent-text); }
.gsig-state.is-none { color: var(--ink-soft); }
.gsig-state.is-unsure, .gsig-state.is-wait { color: var(--faint); }
.gsig-detail { color: var(--muted); font-size: var(--fs-fine); line-height: 1.45; }
.gsig-detail a { color: inherit; text-decoration: underline; }
.growth-signals small { display: block; margin-top: 4px; color: var(--faint); font-size: var(--fs-fine); line-height: 1.5; }
@media (max-width: 560px) {
  .gsig-row { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
}

/* Print / Save as PDF: drop the workspace chrome and interactive-only controls,
   let every chapter expand, and keep the editorial paper surface. */
@media print {
  .intake-header, .scan-preamble, .scan-progress, .scan-error-out, .scan-candidates,
  .report-controls, #changeApp, .result-action-buttons, .read-feedback,
  .peer-chip .peer-scan, .area-continue, details.area-ask > summary,
  #connectForm, .ok-state, .report-resume { display: none !important; }
  body, .intake-body, .intake-shell, .intake-workspace { background: var(--card) !important; }
  .public-preview { display: block !important; box-shadow: none !important; }
  .scan-reveal { visibility: visible !important; opacity: 1 !important; transform: none !important; }
  .report-part { break-inside: avoid; page-break-inside: avoid; }
  .public-read, .review-themes, .review-timeline, .peer-list li, .area-strip { break-inside: avoid; }
  .growth-signals, .gsig-row { break-inside: avoid; page-break-inside: avoid; }
  /* The move leads the report; splitting it across a page break buries it again. */
  .ranked-moves > li { break-inside: avoid; page-break-inside: avoid; }
  details.area-ask, details.area-ask[open] { display: block; }
  details.area-ask .area-panel { display: block !important; }
  a[href]::after { content: ""; }
}

/* ---- Report v2 Phase B: private report blocks ---- */
.report-document { margin: 0 auto; }
.private-read { margin: 22px 0 0; padding: 24px; display: grid; grid-template-columns: 1fr; gap: 14px; background: var(--bg-2); border-left: 4px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.private-read-copy > span { color: var(--accent); font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .07em; text-transform: uppercase; }
.private-read h3 { margin: 7px 0 0; font-size: clamp(22px, 3vw, 31px); line-height: 1.05; letter-spacing: -.035em; }
.private-read-copy p { margin: 10px 0 0; color: var(--ink-soft); font-size: var(--fs-body-2); line-height: 1.55; }
.private-read .direction { margin: 0; padding-top: 12px; border-top: 1px solid var(--line-strong); font-size: var(--fs-note); color: var(--ink-soft); }
.private-read .direction b { color: var(--accent); margin-right: 6px; text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: .06em; }
.direction--conflicted b { color: var(--neg); }
.metric-cards { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.metric-card { padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-3); }
.metric-card span { display: block; color: var(--muted); font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .05em; }
.metric-card strong { display: block; margin-top: 4px; font-size: 21px; letter-spacing: -.02em; }
.metric-card small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-note); }
/* This is the recommendation the whole report exists to deliver, so it is set as
   the lead statement rather than as one more evidence card. It used to run at
   16px with the rationale at 14.5px in --muted, which put the one sentence the
   reader is meant to act on below the weight of the evidence supporting it. */
.ranked-moves { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.ranked-moves > li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 22px; background: var(--bg-2); border-radius: var(--r-3); }
/* The badge carried --accent-ink (white) on a 16% wash of the accent, which is
   near-invisible on either surface. The wash stays; the numeral takes the
   readable accent instead. */
.ranked-moves .rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-weight: var(--fw-bold, 700); }
/* The hypothesis card's category tag (IA round): the move's taxonomy area in
   reader words, set as a quiet chip above the title. */
.ranked-moves .move-category { display: inline-block; margin: 0 0 7px; padding: 3px 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: var(--r-pill); color: var(--accent-text); font-size: var(--fs-tag); font-style: normal; font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase; }
.ranked-moves strong { display: block; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.18; letter-spacing: -.02em; }
/* The labeled expected-impact slot: the D-038 bump, or the honest unsized
   statement. Overrides .ranked-moves p on purpose — this is a labeled row,
   not the mechanism paragraph. */
.ranked-moves .move-impact { margin: 13px 0 0; padding: 10px 12px; max-width: none; background: var(--raise); border-radius: var(--r-2); color: var(--ink-soft); font-size: var(--fs-fine); line-height: 1.5; }
.ranked-moves .move-impact b { margin-right: 6px; color: var(--accent-text); font-size: var(--fs-tag); letter-spacing: .06em; text-transform: uppercase; }
.ranked-moves .move-impact--unsized b { color: var(--muted); }
.ranked-moves p { margin: 9px 0 0; max-width: 62ch; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.55; }
.ranked-moves dl { margin: 16px 0 0; padding-top: 13px; display: flex; flex-wrap: wrap; gap: 10px 28px; border-top: 1px solid var(--line); }
.ranked-moves dl > div { display: flex; align-items: baseline; gap: 8px; }
.ranked-moves dt { color: var(--muted); font-size: var(--fs-note); font-weight: var(--fw-bold, 700); letter-spacing: .05em; text-transform: uppercase; }
.ranked-moves dd { margin: 0; font-size: var(--fs-ui); font-weight: var(--fw-bold, 700); }
/* Provenance, not headline: the arithmetic and the detectable-effect note. */
.ranked-moves small { display: block; margin-top: 7px; color: var(--muted); font-size: var(--fs-note); line-height: 1.45; }
.ranked-moves small:first-of-type { margin-top: 13px; }
.provenance .coverage-notes { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: var(--fs-fine); }
.provenance .definitions { margin-top: 12px; width: 100%; border-collapse: collapse; font-size: var(--fs-fine); }
.provenance .definitions th, .provenance .definitions td { padding: 6px 8px; border-top: 1px solid var(--line-strong); text-align: left; vertical-align: top; }
.provenance .definitions th { color: var(--muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em; }
.provenance .definitions em { color: var(--neg); font-style: normal; }
@media (max-width: 640px) {
  .ranked-moves > li { padding: 17px; }
  .ranked-moves dl { flex-direction: column; gap: 8px; }
}

/* ---- Report v2 Phase C: cross-source (ASC × RevenueCat) ---- */
.cross-source { margin: 22px 0 0; padding: 22px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-4); }
.xsrc-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.xsrc { padding: 14px 16px; border-radius: var(--r-3); border-left: 4px solid var(--line-strong); background: var(--card); }
.xsrc--contradiction { border-left-color: var(--neg); }
.xsrc--confirmation { border-left-color: var(--accent-text); }
.xsrc--filled_gap { border-left-color: var(--trend); }
.xsrc--unresolved { border-left-color: #8d7a4f; }
.xsrc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.xsrc-head em { font-style: normal; font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.xsrc--contradiction .xsrc-head em { color: var(--neg); }
.xsrc--confirmation .xsrc-head em, .xsrc--filled_gap .xsrc-head em { color: var(--accent-text); }
.xsrc-head strong { font-size: var(--fs-ui); }
.xsrc p { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-body-2); line-height: 1.5; }
.xsrc small { display: block; margin-top: 6px; color: var(--muted); font-size: var(--fs-note); }

/* ---- Report v2 Phase D: store-conversion funnel ---- */
.funnel { margin: 22px 0 0; padding: 22px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-4); }
/* Stages carry a proportional bar (the ladder's idiom): each stage's length
   against the widest stage makes the drop visible, which the bare numbers
   never did. The grid keeps label, bar, and value on one readable line. */
.funnel-stages { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.funnel-stages > li { display: grid; grid-template-columns: minmax(130px, .38fr) minmax(120px, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border-left: 4px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--r-2); }
.funnel-stages span { color: var(--muted); font-size: var(--fs-fine); }
.funnel-stages li > i { height: 7px; display: block; background: var(--bg-2); }
.funnel-stages li > i b { height: 100%; display: block; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.funnel-stages strong { font-size: 18px; letter-spacing: -.02em; text-align: right; }
@media (max-width: 620px) { .funnel-stages > li { grid-template-columns: 1fr auto; } .funnel-stages li > i { grid-column: 1 / -1; order: 3; } }
.funnel-rates { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.funnel-rates > div { padding: 12px 14px; background: var(--card); border-radius: var(--r-2); }
.funnel-rates span { display: block; color: var(--muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em; }
.funnel-rates strong { font-size: 20px; }
.funnel-quality { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.funnel-quality > li { display: flex; gap: 6px; align-items: baseline; font-size: var(--fs-fine); color: var(--muted); }
.funnel-quality strong { font-size: var(--fs-ui); color: var(--ink); }

/* ---- Chart primitives (Stream C1) ----------------------------------------
   charts.mjs has emitted <figure class="metric-figure">, <details
   class="chart-data">, .axlab / .axval SVG text, .scrollx and table.grid since
   report-v2, and no stylesheet ever defined any of them. That is the whole
   reason the private report's funnel rendered as black bars on an unstyled
   table: the fills named tokens that did not exist and the labels inherited
   nothing. This block is the missing half.

   It is appended, and touches nothing above it, because the private report's
   layout and visual identity belong to a separate stream. Everything here is
   plumbing: sizes, alignment, and the ink tiers already declared in tokens.css
   and in the paper scope near the top of this file. */

/* --good / --crit derive from --pos / --neg, which are the only chart aliases
   the paper scope does not already redeclare. The report sheet is a light
   surface in BOTH themes (see --paper in tokens.css), so it pins the light
   values of those two tokens rather than letting the dark-theme pair land on
   cream. Same brand colours, correct surface. */
.public-preview, .report-document { --good: #1f7a53; --crit: #8a4b46; }

.chart-card { margin: 18px 0 0; }
.chart-card + .chart-card { margin-top: 26px; }
.chart-heading { margin: 0 0 8px; font-size: var(--fs-fine); font-weight: var(--fw-bold, 700); letter-spacing: .01em; color: var(--ink-soft); }

/* The figure contract's block (Stream G, adopted 2026-08-08). The CLAIM is the
   biggest text in the block because it is the finding; the MEASURE SUBTITLE is
   the smaller, greyer description that makes the figure safe to lift out of the
   report on its own. This inverts the old hierarchy, where a descriptive title
   led and the finding sat below the chart in caption type. */
.report-figure { margin: 26px 0 0; }
.report-figure:first-child { margin-top: 18px; }
.figure-head { margin: 0 0 10px; padding: 0; }
.figure-claim { margin: 0; max-width: 62ch; color: var(--ink); font-size: var(--fs-body); font-weight: var(--fw-bold, 700); line-height: 1.35; letter-spacing: -.005em; }
.figure-claim b { color: var(--muted); font-weight: var(--fw-bold, 700); }
.figure-measure { margin: 3px 0 0; max-width: 72ch; color: var(--muted); font-size: var(--fs-fine); line-height: 1.45; }
/* Slot 5 sits inside the figure element, between the chart and its data table.
   The source name is emphasised only enough to separate it from the method
   caveat that follows it on the same line. */
.metric-figure figcaption b { color: var(--ink-soft); font-weight: var(--fw-bold, 700); }
/* Interpretation past the claim's first sentence, as body prose under the
   block rather than more headline. */
.figure-detail { margin: 10px 0 0; max-width: 72ch; color: var(--ink-soft); font-size: var(--fs-body-2); line-height: 1.55; }
.chart-sentence { margin: 10px 0 0; color: var(--muted); font-size: var(--fs-fine); line-height: 1.5; }

.metric-figure { margin: 0 0 14px; padding: 0; }
.metric-figure + .metric-figure { margin-top: 18px; }
.metric-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.metric-figure figcaption { margin-top: 8px; color: var(--muted); font-size: var(--fs-note); line-height: 1.5; }

/* Axis text. Two tiers so a category label never competes with its value. */
.metric-figure .axlab { fill: var(--muted); font-size: var(--fs-caption); font-family: var(--sans); }
.metric-figure .axval { fill: var(--ink-soft); font-size: 12px; font-weight: var(--fw-bold, 700); font-family: var(--mono); }
.metric-figure .ax { stroke: var(--rule-2); }

/* The numbers behind every chart, one click away. Charts summarize; this is the
   evidence, and it is why a low-contrast ramp step is still readable. */
.chart-data { margin-top: 8px; }
.chart-data > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .06em; }
.chart-data > summary::marker { color: var(--line-strong); }
.chart-data table { margin-top: 8px; width: 100%; border-collapse: collapse; font-size: var(--fs-note); }
.chart-data th, .chart-data td { padding: 5px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.chart-data th { color: var(--muted); font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: .05em; }
.chart-data td { font-family: var(--mono); }

/* The sparse fallback: labelled raw counts, no geometry to over-read. */
.counts-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.counts-item { flex: 1 1 118px; min-width: 118px; padding: 10px 12px; background: var(--raise); border-left: 3px solid var(--s1); border-radius: 0 8px 8px 0; }
.counts-item span { display: block; color: var(--muted); font-size: var(--fs-tag); font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .05em; }
.counts-item strong { display: block; margin-top: 3px; font-size: 19px; letter-spacing: -.02em; font-family: var(--mono); }
.counts-item small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-caption); }

/* Wide marks scroll inside their own figure; the page never scrolls sideways. */
.scrollx { max-width: 100%; overflow-x: auto; }
.metric-figure table.grid { border-collapse: collapse; font-size: var(--fs-note); }
.metric-figure table.grid th, .metric-figure table.grid td { padding: 5px 8px; border: 1px solid var(--line); text-align: left; white-space: nowrap; }
.metric-figure table.grid thead th { color: var(--muted); font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: .05em; }
.metric-figure table.grid td.thin { color: var(--muted); font-family: var(--mono); }

@media (max-width: 640px) {
  .counts-item { flex: 1 1 100%; }
}
@media print {
  /* The evidence prints with the chart it belongs to, rather than collapsing
     into a control the reader cannot open on paper. */
  .chart-data { display: block; }
  .chart-data > summary { list-style: none; }
  .chart-data table { display: table; }
  .metric-figure, .chart-card { break-inside: avoid; page-break-inside: avoid; }
}

/* ---- Private report dashboard (Stream C2) --------------------------------
   The private report is the public scan's sibling, so this block adds LAYOUT
   and nothing else. Every colour, type size, border, radius and weight below is
   lifted from a rule that already exists in this file for the public report;
   the counterpart is named in the comment above each group. If a rule here has
   no counterpart, it is a mistake and should be deleted.

   Appended after the Stream C1 chart primitives, touching nothing above. */

/* THE KPI BAND. Counterpart: .public-signal-row --1 / --2 (line ~2216). The
   private band is the same divided row the public scan already uses; these are
   the two counts it did not yet have. The wrap variant reuses the auto-fit
   track from .metric-cards (line ~2475) so a report with several currencies
   flows instead of crushing. */
.public-signal-row--4 { grid-template-columns: repeat(4, 1fr); }
.public-signal-row--wrap { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.public-signal-row--wrap > div { border-bottom: 1px solid var(--line-strong); }

/* The state badge. Counterpart: .coverage / .coverage.partial (line ~262) —
   same pill, same weight, same size, same accent-on-bg-2 treatment. It used to
   be a bare <em> that ran into the label beside it. */
.metric-state {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--muted);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: var(--fw-bold, 700);
  letter-spacing: .04em;
  white-space: nowrap;
}
.metric-state--estimated { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }

/* The dominant read. Counterpart: .public-read--evidence h4 (line ~2436) — the
   statement now sits at the same rank as the public read's, one step below the
   chapter heading that contains it, which is the collision this fixes. */
.private-read h4 { margin: 0; font-size: clamp(19px, 2.3vw, 25px); line-height: 1.14; letter-spacing: -.03em; }

/* Ranked moves with nothing in them. Counterpart: .read-block-head (line ~1276)
   for the head, .provenance .coverage-notes (line ~2499) for the list. */
.moves-empty { margin-top: 6px; }
.moves-empty ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: var(--fs-fine); line-height: 1.55; }

/* The verdict's own next step, when no move ranked. It leads the chapter and
   has to read as the answer, so it takes the .move-impact treatment (line
   ~1550) rather than the muted tone of the missing-evidence list below it. It
   deliberately does NOT take .ranked-moves' rank number or measurement rows:
   it is a direction, not a ranked recommendation. */
.moves-empty .move-next-step { margin: 0 0 18px; padding: 12px 14px; background: var(--raise); border-left: 2px solid var(--accent); border-radius: var(--r-2); color: var(--ink-soft); }
.moves-empty .move-next-step b { display: block; margin-bottom: 5px; color: var(--accent-text); font-size: var(--fs-tag); letter-spacing: .06em; text-transform: uppercase; }
.moves-empty .move-next-step p { margin: 0; font-size: var(--fs-body); line-height: 1.55; }

/* Public evidence, demoted. Counterpart: .report-part (line ~2045) for the rule
   and rhythm, .funnel-stages strong (line ~2530) for the 18px heading step. The
   evidence keeps its chapters; it just stops competing with the private read. */
.report-document--dashboard .report-evidence { margin-top: 12px; padding-top: 30px; border-top: 1px solid var(--line-strong); }
.report-document--dashboard .report-evidence > .read-block-head { margin-bottom: 4px; }
.report-document--dashboard .report-evidence .report-part-head h3 { font-size: 18px; letter-spacing: -.02em; }
/* Demoted evidence keeps quiet heads: no accent bar, hairline chapter rules. */
.report-document--dashboard .report-evidence .report-part-head h3::after { display: none; }
.report-document--dashboard .report-evidence .report-part { border-top-width: 1px; padding-top: 30px; }

/* Methodology. Counterpart: .scan-method (line ~2227), which is the public
   report's own collapsed method note. Only the top margin changes, to the
   chapter rhythm (.report-part, line ~2045). */
.report-document--dashboard .report-method { margin-top: 30px; }
.report-method[open] > summary { margin-bottom: 4px; }
.evidence-ledger { margin-top: 22px; }
/* Counterpart: .provenance .definitions (line ~2500) — same table, same rules,
   same header treatment. .scrollx (Stream C1) keeps a wide ledger inside its own
   box so the page never scrolls sideways. */
.evidence-ledger table { margin-top: 12px; width: 100%; border-collapse: collapse; font-size: var(--fs-fine); }
.evidence-ledger th, .evidence-ledger td { padding: 6px 8px; border-top: 1px solid var(--line-strong); text-align: left; vertical-align: top; white-space: nowrap; }
.evidence-ledger th { color: var(--muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em; }

/* The served action bar, for the PRIVATE artifact. It has no counterpart on the
   live scan page any more: that page's actions moved inside the report's
   closing block (.unlock-actions). This one still lives outside the <article>,
   so it never prints. */
.report-actionbar { width: min(1120px, calc(100% - 40px)); margin: 20px auto 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.report-actionbar form { margin: 0; }
.report-actionbar button, .report-actionbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--fs-fine);
  font-weight: var(--fw-bold, 700);
  cursor: pointer;
}
.report-actionbar button:hover, .report-actionbar a:hover { background: var(--raise-strong); color: var(--ink); }
.report-actionbar svg { width: 16px; height: 16px; flex: none; }
.report-actionbar p { flex: 1 1 100%; margin: 8px 0 0; color: var(--muted); font-size: var(--fs-fine); text-align: right; }

/* The band collapses on the public report's own breakpoints: two columns at
   760px (line ~1465), one at 380px (line ~1476). The variants have to restate
   them, because a later unconditional rule would otherwise keep four columns
   alive below 760px. */
@media (max-width: 760px) {
  .public-signal-row--4, .public-signal-row--wrap { grid-template-columns: 1fr 1fr; }
  .public-signal-row--4 > div, .public-signal-row--wrap > div { border-bottom: 1px solid var(--line-strong); }
  .public-signal-row--4 > div:nth-child(2n), .public-signal-row--wrap > div:nth-child(2n) { padding-right: 0; border-right: 0; }
  .public-signal-row--4 > div:nth-child(2n+1), .public-signal-row--wrap > div:nth-child(2n+1) { padding-left: 0; }
  .report-actionbar { justify-content: flex-start; }
  .report-actionbar p { text-align: left; }
}
@media (max-width: 380px) {
  .public-signal-row--4, .public-signal-row--wrap { grid-template-columns: 1fr; }
  .public-signal-row--4 > div, .public-signal-row--wrap > div { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--line-strong); }
}
@media print {
  /* The served bar is a control, not report content, and goes the same way as
     every other control on the page. */
  /* The methodology <details> is deliberately NOT forced open here: CSS cannot
     expand a closed <details> on a page with no JavaScript, and browser print
     keeps whatever the reader left open. The downloadable variant sets `open`
     server-side instead, which is the only honest way to guarantee it. */
  .report-actionbar, #manage-sources, .report-loop { display: none !important; }
  .report-evidence, .public-signal-row, .moves-empty { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- chart furniture ---------- */
/* Quiet interior structure for the dated SVG primitives: hairline gridlines
   with muted tick values (the axval extremes stay the loud pair), interior
   date ticks, dashed guide lines for a labelled reference value, and the
   muted context span for a preceding period. All recessive by construction:
   the data marks are the only saturated ink. */

/* The --s ramp re-derived inside the paper scope. tokens.css declares the ramp
   on :root, and a custom property substitutes its var() references where it is
   DECLARED, not where it is used — so on a dark theme the :root ramp bakes in
   the dark accent and background, and the paper scope's own --accent/--bg
   redeclarations never reach it. The charts then draw dark-theme mixes on a
   paper sheet. Redeclaring the ramp on the paper scope forces substitution
   against the paper values, in both themes, which is what the tokens.css
   comment always claimed happened. */
.public-preview, .report-document {
  --s1: var(--accent);
  --s2: color-mix(in srgb, var(--accent) 62%, var(--bg));
  --s3: color-mix(in srgb, var(--accent) 40%, var(--bg));
  --s4: color-mix(in srgb, var(--accent) 24%, var(--bg));
  --ghost: color-mix(in srgb, var(--accent) 12%, transparent);
}
.metric-figure .gl { stroke: var(--line); }
.metric-figure .tickval { fill: var(--faint); font-size: var(--fs-micro); font-family: var(--mono); }
.metric-figure .guide { stroke: var(--ink-3); stroke-dasharray: 4 3; }
.metric-figure .guide-lab { fill: var(--muted); font-size: var(--fs-micro); font-family: var(--sans); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.metric-figure .spanlab { fill: var(--faint); font-size: 10px; font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase; font-family: var(--sans); }

/* A sentence standing in for a chart is a finding, not a failure. Card it so
   the fallback reads deliberate instead of like a missing figure. */
.chart-sentence { padding: 10px 14px; background: var(--raise); border-left: 3px solid var(--s3); border-radius: 0 8px 8px 0; color: var(--ink-soft); }

/* ---------- report story ---------- */
/* The diagnosis badge above the private read: label loud, everything else
   quiet. The --quiet variant is the coverage-limited route, where a diagnosis
   is really a measurement note and should not shout. */
.advisory-read { margin: 0 0 14px; padding: 12px 16px; background: var(--raise); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; }
.advisory-read span { display: block; color: var(--muted); font-size: var(--fs-tag); font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .06em; }
.advisory-read strong { display: block; margin-top: 2px; font-size: var(--fs-lead); letter-spacing: -.01em; }
.advisory-read p { margin: 6px 0 0; color: var(--ink-soft); font-size: var(--fs-fine); line-height: 1.55; }
.advisory-read--quiet { border-left-color: var(--line-strong); }
.advisory-read--quiet strong { font-size: var(--fs-body-2); }
/* The funnel's decisive gap, promoted beside the diagnosis (IA round). */
.advisory-read .funnel-gap { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-strong); color: var(--ink); font-weight: var(--fw-bold, 700); }

/* The reader's own words, quoted back under the private read. */
.private-read .stated-quote { margin: 10px 0 0; color: var(--muted); font-size: var(--fs-fine); font-style: italic; }

/* What the owner already tried, above the ranked moves. */
.context-echo { margin: 0 0 12px; padding: 10px 14px; background: var(--raise); border-radius: var(--r-2); color: var(--ink-soft); font-size: var(--fs-fine); line-height: 1.55; }
.context-echo b { display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--fs-tag); font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- report annotations (the classes that rendered bare) ---------- */
/* These blocks shipped for weeks as default browser output: full-size insight
   paragraphs shouting over 13px chart headings, unstyled lists running words
   together, a naked band-window line. Everything below is annotation tier:
   quieter than a heading, clearer than a caption. */

/* The reporting window, once, above the KPI band. Same register as the chart
   span labels so "window" reads as one voice everywhere. */
.band-window { margin: 0 0 8px; color: var(--faint); font-family: var(--mono); font-size: var(--fs-micro); font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .07em; }

/* The mandatory chart insight: one sentence tied to its figure. Annotation, not
   body copy; it sits between the figure and the caption in weight. */
.chart-insight { margin: 10px 0 0; max-width: 72ch; color: var(--ink-soft); font-size: var(--fs-fine); line-height: 1.5; }

/* Cancellations, closer look. The head line owns the fact; the lists are data,
   not prose, so they read as rows rather than as numbered paragraphs. */
.signal-deep-dive { margin-top: 18px; }
.signal-deep-dive .read-block-head { display: block; margin: 0 0 10px; }
.signal-deep-dive .read-block-head p { margin: 0; color: var(--ink-soft); font-size: var(--fs-body-2); line-height: 1.5; }
.deep-dive-products { margin: 12px 0 0; padding: 0; list-style: none; }
.deep-dive-products li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 2px; border-top: 1px solid var(--line); font-size: var(--fs-fine); }
.deep-dive-products li:first-child { border-top: 0; }
.deep-dive-products li span { color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.deep-dive-products li strong { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.deep-dive-recommendations { margin: 14px 0 0; padding-left: 20px; }
.deep-dive-recommendations li { margin: 8px 0 0; max-width: 72ch; color: var(--ink-soft); font-size: var(--fs-fine); line-height: 1.55; }
.deep-dive-recommendations li::marker { color: var(--muted); font-weight: var(--fw-bold, 700); }

/* Measurement priorities: label-then-action rows, same rhythm as the moves. */
.measurement-gaps { margin: 10px 0 0; padding-left: 20px; }
.measurement-gaps li { margin: 10px 0 0; font-size: var(--fs-fine); line-height: 1.55; }
.measurement-gaps li::marker { color: var(--muted); font-weight: var(--fw-bold, 700); }
.measurement-gaps strong { letter-spacing: -.005em; }
.measurement-gaps p { margin: 2px 0 0; max-width: 72ch; color: var(--ink-soft); }

/* Store-funnel quality counts: small facts, worn as chips so they scan as a
   set rather than as a wrapped sentence. */
.funnel-quality-rates { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.funnel-quality-rates > * { padding: 5px 10px; background: var(--raise); border-radius: var(--r-pill); color: var(--ink-soft); font-size: var(--fs-note); line-height: 1.3; }

/* Positioning provenance: the same quiet disclosure the chart data tables use. */
/* The side-by-side comparison the chapter's title promises: the reader's own
   measured figure and the published one on one row, each labelled with its own
   source. A grid rather than prose so neither number can read as the verdict;
   the generic `.positioning b` pill and `.positioning small` block rules are
   overridden here because this row needs them inline and paired. */
.positioning-compare { margin: 12px 0 0; padding: 0; list-style: none; }
.positioning-compare li { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-end; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.positioning-compare li:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pc-metric { color: var(--ink-soft); font-size: var(--fs-body-2); }
.pc-metric small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-fine); }
.pc-figs { display: flex; gap: 22px; align-items: flex-end; }
/* The reader's own figure reads first and heaviest; the published ones are
   context beside it, never a rank it has been placed in. */
.pc-fig { text-align: right; }
.pc-fig b { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: var(--fs-body-2); font-weight: var(--fw-bold, 700); font-variant-numeric: tabular-nums; }
.pc-fig small { display: block; margin: 2px 0 0; color: var(--muted); font-size: var(--fs-fine); }
.pc-fig--own b { color: var(--ink); font-size: var(--fs-body); }
.pc-fig--own small { color: var(--accent-text); }
.pc-fig--own small em { font-style: normal; color: var(--warn); }

.positioning-peers, .positioning-citations { margin-top: 8px; }
.positioning-peers > summary, .positioning-citations > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-caption); font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .06em; }
.positioning-peers > summary::marker, .positioning-citations > summary::marker { color: var(--line-strong); }
.positioning-peers ul, .positioning-citations ul { margin: 8px 0 0; padding-left: 18px; }
.positioning-peers li, .positioning-citations li { margin: 4px 0 0; color: var(--ink-soft); font-size: var(--fs-note); line-height: 1.5; }