/* ==========================================================================
   Face Rate — Design System "Ivory & Oxblood"
   Light theme. No drop shadows. 1px warm-grey borders. 8px cards. Pill CTAs.
   Type: Inter (UI) / Newsreader (headings) / IBM Plex Mono (numbers).
   ========================================================================== */

:root {
  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --surface-tint: #F5F2EC;
  --ink: #1A1A1D;
  --dark: #17171A;
  --muted: #6B6B73;
  --faint: #5E5E66;
  --line: #E7E3DC;
  --line-strong: #D6D1C7;
  --brand: #BE185D;
  --brand-dark: #9D174D;
  --brand-soft: #FDF2F8;
  --accent: #F472B6;
  --ok: #2F6F4E;
  --warn: #8A5209;
  --err: #B42318;
  --ref: #EFEDE7;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --maxw: var(--shell);
  /* ---- Layout scale (see docs/layout-system.md) ------------------------
     --shell : global chrome only — header, breadcrumb, footer, cookie bar.
     --page  : the single content column every page except the home page uses.
     --read  : the reading column for long-form text, always centred inside
               the page column (articles, report chapters, legal, FAQ).
     --wide  : opt-in escape hatch for genuinely dense tables (admin only).
     One page = one column. No section picks its own width. */
  --shell: 1152px;
  --page: 1152px;
  --read: 700px;
  --wide: 1152px;
  --measure: 62ch;
  /* Self-hosted/system stack: no third-party font request fires before consent.
     If Inter / Newsreader / IBM Plex Mono are installed locally they are used;
     otherwise the serif+sans+mono trio degrades gracefully with the same feel. */
  /* CJK fonts are appended (not prepended) so Latin glyphs still resolve to
     Inter first; they only apply per-glyph to Japanese text, giving consistent
     rendering across macOS / Windows / Linux without bundling a web font. */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --font-head: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sp: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.65;
  font-weight: 400; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--brand-soft); color: var(--brand-dark); }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; letter-spacing: -0.015em; line-height: 1.16; margin: 0 0 .5em; color: var(--ink); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

.container { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
/* Every page body uses ONE content column (--page). Text-heavy sections drop
   to the reading column (--read). Both are centred, so the left and right
   margins are always equal — no more sections hugging the left edge. */
main .container { max-width: var(--page); }
main .container.container--narrow,
main .container.container--read { max-width: var(--read); }
main .container.container--mid { max-width: 840px; }
main .container.container--wide { max-width: var(--wide); }
/* The homepage is the one deliberate exception: full-width marketing shell. */
body.home-page main .container { max-width: var(--shell); }
.center { text-align: center; }
.center > .lede, .center > .h1, .center > .fine { margin-left: auto; margin-right: auto; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--dark); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius) 0; }
.skip-link:focus { left: 0; }

/* ---------- Type scale ---------- */
.h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; font-weight: 500; }
.h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; }
.h3 { font-size: 1.3rem; font-family: var(--font-head); }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); font-weight: 500; margin: 0 0 12px; }
.lede { font-size: 1.075rem; color: var(--muted); max-width: 64ch; line-height: 1.7; }
.lede--section { margin: 0 auto; text-align: center; max-width: 62ch; }
.fine { font-size: 12.5px; color: var(--faint); line-height: 1.6; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }

/* ---------- Trust strip + header ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(180%) blur(8px); background: rgba(250,249,246,.94); }
.site-header__inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.logo { display: inline-flex; align-items: baseline; gap: 9px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.logo:hover { text-decoration: none; color: var(--ink); }
.logo__mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--brand); color: #fff; font-family: var(--font-head); font-size: 19px; line-height: 1; transform: translateY(3px); }
.logo__text { font-family: var(--font-head); font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
/* Header wordmark: drop the F mark, keep "Face Rate" in the brand red. */
.site-header .logo { color: var(--brand); }
.site-header .logo__text { color: var(--brand); }
.site-header .logo:hover { color: var(--brand-dark); text-decoration: none; }
.logo__sub { font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }
.nav { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; align-items: center; }
.nav-link { font-size: 13px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.nav-link:hover { color: var(--brand); text-decoration: none; }
.nav-link--quiet { color: var(--faint); }
.nav-item { position: relative; }
.nav-caret { font-size: 10px; color: var(--faint); margin-left: 4px; }
.nav-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); background: var(--surface-tint); border: 1px solid var(--line); padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }

/* Tools dropdown */
.nav-dropdown { position: absolute; top: calc(100% + 12px); left: 0; min-width: 700px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 16px 40px rgba(23,23,26,.12); padding: 12px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 50; }
.nav-item--dropdown:hover .nav-dropdown, .nav-item--dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown__featured { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 8px 12px; border-bottom: 1px solid var(--line); }
/* Equal-width columns: with one narrow column the long tool names wrapped and
   the menu looked ragged. Tighter rows fit 17 items without a scrollbar. */
.nav-dropdown__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: min(680px, calc(100vh - 175px)); overflow-y: auto; margin-top: 8px; }
.dd-col { display: flex; flex-direction: column; gap: 8px; }
.dd-group { display: flex; flex-direction: column; gap: 1px; padding: 4px; }
.dd-empty { font-size: 12.5px; color: var(--muted); font-style: italic; padding: 8px 10px; }
.dd-group__title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 3px 8px 5px; }
.dd-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--ink); font-size: 13.5px; text-decoration: none; }
.dd-item:hover { background: var(--brand-soft); text-decoration: none; }
.dd-item__label { font-weight: 500; }
.dd-item__note { font-size: 12px; color: var(--muted); display: block; }
.dd-item--featured { flex-direction: column; align-items: flex-start; gap: 2px; }
.dd-item--featured .dd-item__label { color: var(--brand); font-weight: 600; }
.dd-item__tag { flex-shrink: 0; }
.site-header__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

/* ---------- Language switcher ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lang-switch { position: relative; }
.lang-switch__select { appearance: none; -webkit-appearance: none; background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); font-size: 13px; font-weight: 500; padding: 8px 30px 8px 12px; border-radius: var(--radius-pill); cursor: pointer; font-family: inherit; }
.lang-switch__select:hover { border-color: var(--brand); color: var(--brand); }
.lang-switch::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--faint); font-size: 11px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; line-height: 1.2; border: 1px solid transparent; text-align: center; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; white-space: nowrap; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }
.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn--ghost { background: transparent; color: var(--muted); border-color: transparent; }
.btn--ghost:hover { color: var(--brand); background: var(--brand-soft); }
.btn--soft { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); }
.btn--soft:hover { background: #FBE8F1; color: var(--brand-dark); }
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--lg { padding: 15px 30px; font-size: 15px; }
.btn--block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---------- The three-tier ladder (docs/21) ----------
   One component for every "which one?" moment: Free scan / Face Report /
   Dating Report, name on the first line, price on the second. The price is
   the loudest thing in the button on purpose — nobody should have to click
   to find out what a tier costs. */
.plan-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 720px; margin: 0 auto; }
.plan-trio__btn { flex-direction: column; gap: 3px; padding: 13px 14px; white-space: normal; }
.plan-trio__name { font-size: 14px; font-weight: 600; }
.plan-trio__sub { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.btn--secondary .plan-trio__sub { color: var(--ink); }
.btn--primary .plan-trio__sub { opacity: .95; }
.plan-trio [data-tier="free"] .plan-trio__sub { font-weight: 500; color: var(--muted); }
.plan-trio__note { margin-top: 12px; }
.plan-trio + .fine, .plan-trio + p.fine { margin-top: 14px; }
/* Narrow context (a card column, the leverage block): stack, and read as
   name-left / price-right rows instead of two centred lines. */
.plan-trio--compact { grid-template-columns: 1fr; width: 100%; max-width: 340px; margin: 0; gap: 8px; }
.plan-trio--compact .plan-trio__btn { flex-direction: row; justify-content: space-between; gap: 16px; }
@media (max-width: 620px) {
  .plan-trio { grid-template-columns: 1fr; max-width: 100%; gap: 8px; }
}

/* ---------- Sections ---------- */
.section { padding: 76px 0; }
.section--compact { padding: 48px 0; }
.section--tint { background: var(--surface-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--dark { background: var(--dark); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lede, .section--dark .fine { color: rgba(255,255,255,.66); }
/* Section intros are centred on every page; body copy inside stays left-aligned
   for readability. This is the rule that stops "heading left / lede centred". */
.section__head { margin: 0 auto 40px; max-width: 720px; text-align: center; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head .lede { margin-bottom: 0; }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 20px; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: border-color .16s ease, transform .16s ease; }
/* Pricing cards: the CTA sits on the same baseline across the row even when the
   feature lists are different lengths. */
.card--price { display: flex; flex-direction: column; }
.card--price > p:last-child { margin-top: auto; }
.card--tool { display: flex; flex-direction: column; color: var(--ink); min-height: 216px; }
.card--tool:hover { border-color: var(--brand); transform: translateY(-2px); text-decoration: none; color: var(--ink); }
.card__top { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.card__title { font-size: 1.28rem; margin-bottom: 10px; font-family: var(--font-head); }
.card__desc { color: var(--muted); font-size: 14px; margin-bottom: 18px; flex: 1; }
.card__link { font-size: 13px; color: var(--brand); font-weight: 600; }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; }
.tag--neutral { background: var(--surface-tint); color: var(--muted); border: 1px solid var(--line); }
.tag--brand { background: var(--brand-soft); color: var(--brand-dark); }
.tag--ok { background: #EAF3ED; color: var(--ok); }

/* ---------- Hero ---------- */
.hero { padding: 16px 0 14px; }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 32px; align-items: center; }
.hero h1 { font-size: clamp(1.7rem, 2.7vw, 2.2rem); line-height: 1.04; margin-bottom: 10px; }
.hero .lede { font-size: 0.92rem; line-height: 1.48; max-width: 44ch; margin-bottom: 0; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hero-note { margin-top: 8px; font-size: 12px; color: var(--faint); }
.hero-points { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.hero-points li { position: relative; padding-left: 22px; font-size: 12.5px; color: var(--muted); }
.hero-points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 600; }
.hero-upload { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.panel--hero { border: none; padding: 0; }
.panel--hero .upload { padding: 12px 10px; }
.panel--hero .upload__hint { margin-bottom: 8px; font-size: 12.5px; }
.panel--hero .upload__meta { margin-top: 8px; font-size: 11px; }
.panel--hero h2.h3 { font-size: 1.02rem; margin-bottom: 6px; }
.panel--hero .upload__icon { width: 38px; height: 38px; margin-bottom: 9px; }
.panel--hero .upload h3 { font-size: 1.08rem; margin-bottom: 3px; }
.panel--hero .upload p { margin-bottom: 11px; }
.panel--hero .upload__actions { gap: 8px; }
.panel--hero .upload__actions .btn { padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; }
.hero-visual { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.hero-visual__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 20px; display: flex; justify-content: space-between; }
.score-orbit { display: grid; place-items: center; padding: 18px 0 26px; }
.score-big { font-family: var(--font-head); font-size: 5.6rem; line-height: 1; color: var(--brand); letter-spacing: -.04em; }
.score-big small { font-family: var(--font-mono); font-size: .9rem; color: var(--faint); letter-spacing: 0; }
.score-caption { text-align: center; font-size: 12.5px; color: var(--muted); }
.dim-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dim-row:first-child { border-top: 0; }
.dim-row__bar { height: 5px; background: var(--ref); border-radius: 3px; width: 46%; overflow: hidden; }

/* ---------- Hero — premium analysis stage ---------- */
.hero--premium {
  padding: 40px 0 46px;
  color: #f4f2ee;
  background:
    radial-gradient(120% 130% at 82% -10%, #23232c 0%, #141419 46%, #0c0c10 100%);
  position: relative;
  overflow: hidden;
}
.hero--premium::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 18% 50%, rgba(226,62,127,.10), transparent 70%);
  pointer-events: none;
}
.hero--premium .container { position: relative; z-index: 1; }
.hero--premium .hero-grid { grid-template-columns: 1.02fr .98fr; gap: 52px; }
.hero--premium .eyebrow { color: rgba(244,242,238,.72); }
.hero--premium .h1 {
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(2.05rem, 4.2vw, 3.25rem);
  line-height: 1.03;
  letter-spacing: -.012em;
  margin-bottom: 14px;
}
.hero--premium .lede { color: rgba(244,242,238,.8); font-size: 1.02rem; line-height: 1.56; max-width: 46ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-cta .plan-trio { width: 100%; max-width: 560px; margin: 0; }
.hero--premium .btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.hero--premium .btn--secondary:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }
/* On the dark hero the plan-trio price line inherited --ink (near-black) and
   disappeared against the dark band — the "$12.90" on Face Report was invisible
   on both mobile and desktop. Keep the price legible on dark. */
.hero--premium .btn--secondary .plan-trio__sub { color: inherit; opacity: .82; }
.hero--premium .plan-trio [data-tier="free"] .plan-trio__sub { color: rgba(244,242,238,.62); }
/* Brand pink on the near-black hero measured ~3.0:1 — below AA for 12.5px text.
   Lift just this dark-context link to a lighter pink (~5.5:1). */
.hero--premium .hero-note a, .hero--premium .hero-trust a { color: #f472b6; }
.hero-trust { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 18px; }
.hero-trust li { font-size: 12.5px; color: rgba(244,242,238,.62); display: flex; align-items: center; gap: 7px; }
.hero-trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: inline-block; }
.hero--premium .hero-note { color: rgba(244,242,238,.5); }
.hero--premium .hero-note a { color: rgba(244,242,238,.78); }

.hero-stage { display: flex; flex-direction: column; align-items: center; }
.scan-carousel {
  position: relative;
  width: 100%;
  max-width: 384px;
  aspect-ratio: 720 / 998;
  border-radius: 18px;
  overflow: hidden;
  background: #14141a;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 34px 80px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset;
}
.scan-slide {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .8s ease, transform 6s ease;
}
.scan-slide.is-active { opacity: 1; transform: scale(1); }
.scan-carousel__dots {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: flex; gap: 8px;
}
.scan-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.38); cursor: pointer;
  transition: background .25s ease, width .25s ease, border-radius .25s ease;
}
.scan-dot.is-active { background: var(--brand); width: 22px; border-radius: 999px; }
.scan-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02); }
.scan-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .7s ease; }
.scan-slide.is-active .scan-ov { opacity: 1; }
.scan-card__mesh { position: absolute; inset: 0; width: 100%; height: 100%; }
.scan-card__mesh > path { fill: none; stroke: rgba(255,255,255,.42); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s ease; }
.is-scanned .scan-card__mesh > path { stroke-dashoffset: 0; }
.scan-card__mesh > polygon { fill: none; stroke: rgba(255,255,255,.82); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s ease; }
.is-scanned .scan-card__mesh > polygon { stroke-dashoffset: 0; }
.scan-card__mesh circle { fill: #E23E7F; opacity: 0; transition: opacity .45s ease; }
.is-scanned .scan-card__mesh circle { opacity: .55; }
.scan-card__scanline {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  box-shadow: 0 0 14px 2px rgba(226,62,127,.7);
  animation: scanSweep 4.4s linear infinite;
  pointer-events: none;
}
@keyframes scanSweep {
  0% { top: -2px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.scan-card__badge {
  position: absolute; top: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.scan-card__badge--mode { left: 12px; color: #7CF5C0; background: rgba(12,12,16,.62); border: 1px solid rgba(124,245,192,.4); }
.scan-card__badge--count { right: 12px; color: #fff; background: rgba(8,8,11,.8); border: 1px solid rgba(255,255,255,.28); font-weight: 600; }
.scan-card__readout {
  position: absolute; left: 12px; right: auto; bottom: 12px; z-index: 2;
  max-width: calc(100% - 92px);
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 13px; border-radius: 12px;
  background: rgba(12,12,16,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
}
.scan-card__readout-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.7); }
.scan-card__readout-val { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: #fff; margin-left: auto; }
.scan-card__readout-unit { font-size: 11px; color: rgba(255,255,255,.6); }
.scan-card__readout * { transition: opacity .22s ease; }
.scan-card__cap { margin: 14px 0 0; max-width: 384px; text-align: center; font-size: 12px; line-height: 1.5; color: #54545C; }

@media (max-width: 980px) {
  .hero--premium .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero-stage { order: 2; }
  .scan-carousel { max-width: 320px; }
}
@media (max-width: 560px) {
  .hero--premium { padding: 30px 0 34px; }
  .scan-carousel { max-width: 260px; }
  .scan-card__readout-val { font-size: 19px; }
}
.dim-row__bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.dim-row__val { font-family: var(--font-mono); font-size: 12px; color: var(--muted); width: 62px; text-align: right; }

/* ---------- Trust bar ---------- */
.trust-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.trust-bar__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-bar__item { padding: 22px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.trust-bar__item:last-child { border-right: 0; }
.trust-bar__item strong { font-family: var(--font-head); font-size: 17px; font-weight: 600; }
.trust-bar__item span { font-size: 12px; color: var(--muted); }

/* ---------- Steps / feature blocks ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: relative; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: inline-block; font-family: var(--font-mono); font-size: 11px; color: var(--brand); border: 1px solid var(--brand-soft); background: var(--brand-soft); padding: 3px 9px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.step h3 { font-size: 1.2rem; }
.step p { color: var(--muted); font-size: 14px; margin: 0; }

/* ---------- Result / score / upload ---------- */
/* Both columns end on the same line: the grid stretches the row, the left
   panel becomes a flex column, and the drop zone absorbs the leftover height
   instead of leaving a 120px step at the bottom of the page. Scoped to photo
   tools only — a quiz panel has nothing that can grow, so stretching there
   just leaves an empty box under the aside. */
.tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 28px; align-items: start; }
#photo-tool.tool-layout { align-items: stretch; }
#photo-tool.tool-layout > div { display: flex; }
#photo-tool.tool-layout > div > .panel { flex: 1; display: flex; flex-direction: column; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.upload { border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: 44px 20px; text-align: center; transition: border-color .18s ease, background .18s ease; cursor: pointer; background: var(--surface); }
#photo-tool.tool-layout .panel > .upload { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.upload:hover, .upload.is-drag { border-color: var(--brand); background: #FEFBFB; }
.upload__icon { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--brand); }
.upload h3 { margin-bottom: 6px; font-size: 1.35rem; }
.upload p { color: var(--muted); font-size: 13.5px; margin-bottom: 20px; }
.upload__hint { margin-bottom: 18px; }
.upload p.upload__meta { margin: 16px 0 0; font-size: 12px; color: var(--faint); }
.upload__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) { .upload__actions { flex-direction: column; align-items: stretch; } }
.privacy-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px; background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--radius); font-size: 12.5px; color: var(--muted); }
.privacy-note svg { flex-shrink: 0; color: var(--ok); }
.progress { margin-top: 22px; }
.progress__track { height: 6px; background: var(--ref); border-radius: 3px; overflow: hidden; }
.progress__bar { height: 100%; width: 0; background: var(--brand); transition: width .25s ease; }
.progress__label { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.result { margin-top: 24px; }
.result[hidden] { display: none; }
.result__head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.result__score { font-family: var(--font-head); font-size: 4.4rem; line-height: 1; color: var(--brand); letter-spacing: -.04em; }
.result__score small { font-family: var(--font-mono); font-size: .85rem; color: var(--faint); }
.result__band { font-family: var(--font-head); font-size: 1.5rem; }
.result__labels { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px 12px; font-size: 12.5px; }
.pill b { font-weight: 600; }
.dim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0; }
.dim { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.dim--focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.dim--focus .dim__name::after { content: ' · focus'; color: var(--brand); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dim__top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.dim__name { font-weight: 600; }
.dim__band { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.dim__bar { height: 5px; background: var(--ref); border-radius: 3px; overflow: hidden; }
.dim__bar i { display: block; height: 100%; background: var(--accent); }
.dim__note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.dim__verdict { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; margin-left: 8px; white-space: nowrap; vertical-align: middle; }
.dim__verdict--strong { background: rgba(190,24,93,.12); color: var(--brand-dark); }
.dim__verdict--moderate { background: var(--ref); color: var(--muted); }
.dim__verdict--quiet { background: #EDE6DB; color: var(--faint); }
.estimated { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.score-flag { margin-top: 14px; padding: 14px 16px; background: var(--brand-soft); border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; font-size: 13.5px; color: var(--brand-dark); }

/* ---- Free-report view: after a scan the tool page becomes the report ---- */
#photo-tool.is-result .upload,
#photo-tool.is-result .privacy-note,
#photo-tool.is-result #camera-box,
#photo-tool.is-result #tool-error,
#photo-tool.is-result [data-tool-start],
#photo-tool.is-result aside { display: none !important; }
#photo-tool.is-result { grid-template-columns: 1fr; }
#photo-tool.is-result .panel { padding: 0; border: 0; background: transparent; }

.fr-report { max-width: 820px; margin: 0 auto; }
.fr-hero { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: center; padding: 4px 0 24px; border-bottom: 1px solid var(--line); }
.fr-hero__photo { margin: 0; }
.fr-hero__photo img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); display: block; background: #0e0e12; }
.fr-hero__panel { text-align: left; }
.fr-cat { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.fr-score-num { font-family: var(--font-head); font-size: 4.4rem; line-height: 1; color: var(--brand); letter-spacing: -.03em; }
.fr-score-num span { font-family: var(--font-mono); font-size: 1.4rem; color: var(--faint); margin-left: 6px; }
.fr-verdict { font-family: var(--font-head); font-size: 1.5rem; margin: 8px 0 2px; color: var(--ink); }
.fr-band { font-size: 1.05rem; color: var(--muted); margin: 0 0 12px; }
.fr-strong { font-size: .95rem; color: var(--ink); margin: 0 0 16px; }
.fr-strong strong { color: var(--brand); }
.fr-focus { font-size: .9rem; color: var(--muted); margin: -6px 0 16px; }
.fr-focus strong { color: var(--ink); }
.fr-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fr-note { font-size: 12.5px; color: var(--faint); margin: 0; }
.fr-cta-line { margin-top: 14px; }
.fr-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.fr-section { margin-top: 30px; }
.fr-section .h2 { font-size: 1.55rem; margin-bottom: 10px; }
.fr-disclaimer__list { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; max-width: var(--measure); }
.fr-disclaimer__list li { margin-bottom: 8px; }
.fr-cta { margin-top: 32px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--brand-soft); text-align: center; }
.fr-cta .h3 { margin-bottom: 8px; }
.fr-cta p { color: var(--muted); }
.fr-cta .btn { margin: 4px; }
/* Figure block: the photo IS the figure, the measured layer sits on top.
   One tab = one render of the same canvas, so nothing here is a stock diagram. */
.fr-figures { text-align: center; }
.fr-figures > p { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.fr-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 14px; }
.fr-tab { font: inherit; font-size: 13px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.fr-tab:hover { border-color: var(--brand); color: var(--brand); }
.fr-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.fr-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fr-stage { position: relative; max-width: 520px; margin: 0 auto; }
.fr-stage img { width: 100%; display: block; border-radius: var(--radius); border: 1px solid var(--line); background: #F3ECE2; }
.fr-stage__share { position: absolute; right: 12px; bottom: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.fr-fig-cap { max-width: 560px; margin: 14px auto 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 560px) {
  .fr-hero { grid-template-columns: 1fr; gap: 18px; }
  .fr-hero__photo { max-width: 300px; margin: 0 auto; }
  .fr-score-num { font-size: 3.4rem; }
}
/* Share modal + composite card */
.fr-share-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.fr-share-modal[hidden] { display: none; }
.fr-share-modal__backdrop { position: absolute; inset: 0; background: rgba(10,10,14,.72); backdrop-filter: blur(3px); }
.fr-share-modal__panel { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-width: 420px; width: 100%; padding: 18px; text-align: center; max-height: 92vh; overflow: auto; }
.fr-share-modal__close { position: absolute; top: 8px; right: 12px; border: 0; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
.fr-share-card-wrap img { width: 100%; border-radius: 12px; display: block; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.fr-share-modal__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; align-items: center; }
.fr-share-modal__actions .check { font-size: 13px; color: var(--muted); }
/* What's inside the report — ownership shown in the row, not in a footnote */
/* ---------- What's inside: the count strip above the matrix ---------- */
.mx-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0 4px; }
.mx-sum__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 15px 18px; }
/* The count cards sit on the page's own ivory, so a 4% brand wash disappeared
   into the background and inverted the intent: the most complete tier read as
   the faintest one. Solid brand instead — this is the one place on the page
   where the eye should land before it reads a single number. */
.mx-sum__item--brand { border-color: var(--brand); background: var(--brand); }
.mx-sum__item--brand .mx-sum__l { color: rgba(255, 255, 255, .95); }
.mx-sum__n { display: block; font-family: var(--font-head); font-size: 2rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.mx-sum__item--brand .mx-sum__n { color: #fff; }
.mx-sum__l { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.rc-cta { text-align: center; margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rc-cta .btn { margin-bottom: 0; }
.rc-cta .fine { flex: 0 0 100%; margin: 6px 0 0; }

/* ---------- Chapter matrix: one row per chapter, one column per tier ---------- */
.mx-wrap { margin: 14px 0 0; }
.mx-table { table-layout: fixed; min-width: 800px; }
.mx-table th, .mx-table td { padding: 11px 14px; }
.mx-table th.mx-no, .mx-table td.mx-no { width: 56px; }
.mx-table th.mx-ch { width: 210px; }
.mx-table td.mx-no { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.mx-table td.mx-ch { font-weight: 600; color: var(--ink); }
.mx-table td.mx-what { color: var(--muted); font-size: 13px; line-height: 1.55; }
.mx-table th.mx-tier { width: 112px; padding: 10px 8px; text-align: center; vertical-align: bottom; white-space: normal; }
.mx-tier__name { display: block; font-size: 12.5px; color: var(--ink); }
.mx-tier__price { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.mx-tier__note { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--faint); }
.mx-table th.mx-tier--brand { background: color-mix(in srgb, var(--brand) 7%, var(--surface-tint)); }
.mx-table th.mx-tier--brand .mx-tier__name { color: var(--brand); }
.mx-table td.mx-cell { width: 112px; text-align: center; }
.mx-cell--brand { background: color-mix(in srgb, var(--brand) 3.5%, transparent); }
.mx-mark { display: inline-block; font-size: 15px; line-height: 1; }
.mx-mark--yes { color: var(--ink); font-weight: 700; }
.mx-mark--partial { color: var(--faint); font-weight: 400; }
.mx-mark--no { color: var(--faint); font-weight: 400; }
.mx-cell--brand .mx-mark--yes { color: var(--brand); }
/* The rows the Face Report does not contain. This is the difference being sold,
   so it gets the rose wash and the left rule rather than a column of dashes. */
.mx-table tr.mx-row--only td { background: color-mix(in srgb, var(--brand) 4.5%, transparent); }
.mx-table tr.mx-row--only td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.mx-table tr.mx-row--only td.mx-no { color: var(--brand); font-weight: 700; }
.mx-table tr.mx-row--only td.mx-ch { color: var(--brand-dark); }
/* The one chapter only the cheaper report carries. Neutral, not a warning:
   it is an extra, not a gap. */
.mx-table tr.mx-row--face td { background: var(--surface-tint); }
.mx-table tr.mx-row--face td.mx-no { color: var(--muted); }
.mx-tag { display: inline-block; margin-left: 7px; padding: 1px 7px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); vertical-align: 1px; white-space: nowrap; }
.mx-legend { margin: 12px 0 0; font-size: 12px; line-height: 1.9; color: var(--muted); }
.mx-legend__item { display: inline; margin-right: 16px; white-space: nowrap; }
.mx-legend .mx-mark { margin-right: 5px; }
.mx-key { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.mx-key--only { background: color-mix(in srgb, var(--brand) 12%, transparent); box-shadow: inset 3px 0 0 var(--brand); }

/* ---------- Delivery terms: a table on desktop, labelled stacks on a phone ---------- */
.dt-table { table-layout: fixed; }
.dt-table th:nth-child(1) { width: 172px; }
.dt-table td.dt-key { font-weight: 600; color: var(--ink); }

/* ---------- Only in the Dating Report ---------- */
.only-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.only-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius); padding: 24px 26px; }
.only-card__body { flex: 1; }
.only-card__no { display: flex; gap: 9px; align-items: center; margin: 0 0 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.only-card__no span { font-family: var(--font-head); font-size: 21px; line-height: 1; letter-spacing: 0; }
.only-card .h3 { margin: 0 0 10px; font-size: 1.16rem; }
.only-card > p, .only-card__body > p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--muted); }
.only-card__out { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line-strong); font-size: 12.5px; color: var(--ink); }
.only-card__out span { display: block; margin-bottom: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
/* Seven cards in two columns leaves an orphan; the last one spans the row. */
.only-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.only-card--wide .only-card__out { margin-top: 0; padding-top: 0; padding-left: 28px; border-top: 0; border-left: 1px dashed var(--line-strong); }
.only-close { margin-top: 18px; padding: 30px 32px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); text-align: center; }
.only-close__big { font-family: var(--font-head); font-size: 1.32rem; line-height: 1.35; color: var(--ink); margin: 0 auto 10px; max-width: 620px; }
.only-close p { max-width: 660px; margin: 0 auto; font-size: 13.5px; color: var(--muted); }
@media (max-width: 860px) {
  .only-grid { grid-template-columns: 1fr; }
  .only-card--wide { grid-template-columns: 1fr; gap: 0; }
  .only-card--wide .only-card__out { margin-top: auto; padding-top: 14px; padding-left: 0; border-top: 1px dashed var(--line-strong); border-left: 0; }
  .only-close { padding: 24px 20px; }
}
/* Between 761 and 860 the fixed column widths plus a 210px description need
   800px, which the container no longer has at 848. Drop the description there
   — one step earlier than the phone layout — or the table pushes the whole
   document 9px wider than the viewport. */
@media (max-width: 860px) {
  .mx-table { min-width: 0; }
  .mx-table th.mx-ch { width: auto; }
  .mx-table th.mx-what, .mx-table td.mx-what { display: none; }
}

/* On a phone the three tier columns matter more than the one-line summary, so
   the matrix keeps the counts in the header as prices — the shortest possible
   label for "which one am I buying". */
@media (max-width: 760px) {
  .mx-sum { grid-template-columns: 1fr; gap: 8px; }
  .mx-sum__item { display: flex; align-items: baseline; gap: 12px; padding: 11px 15px; }
  .mx-sum__n { font-size: 1.5rem; }
  .mx-sum__l { margin-top: 0; }
  .mx-table th, .mx-table td { padding: 10px 9px; }
  .mx-table th.mx-no, .mx-table td.mx-no { width: 36px; }
  .mx-table th.mx-tier, .mx-table td.mx-cell { width: 58px; padding-left: 3px; padding-right: 3px; }
  .mx-tier__name, .mx-tier__note { display: none; }
  .mx-tier__price { margin-top: 0; font-size: 11.5px; }
  .mx-legend__item { display: block; margin-right: 0; white-space: normal; }
  /* Four columns of prose cannot survive 358px; each row becomes a labelled
     stack instead of forcing a sideways scroll on the pricing page. */
  .dt-wrap { border: 0; background: transparent; overflow: visible; }
  .table.dt-table, .dt-table tbody, .dt-table tr, .dt-table td { display: block; width: 100%; }
  .dt-table { table-layout: auto; }
  .dt-table thead { display: none; }
  .dt-table tr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; margin-bottom: 10px; }
  /* .table td carries a bottom rule; inside a card it reads as a stray line, so
     the specificity has to beat it — .dt-table td alone does not. */
  .table.dt-table td { border: 0; padding: 4px 0; display: flex; gap: 10px; font-size: 13px; line-height: 1.55; }
  .dt-table td.dt-key { display: block; padding: 0 0 6px; font-size: 13.5px; }
  .dt-table td::before { content: attr(data-label); flex: 0 0 84px; padding-top: 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
  .dt-table td.dt-key::before { content: none; }
  .dt-table tr:last-child { margin-bottom: 0; }
}
.retest { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.form--inline { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
/* Email capture: a form the width of a form, not of the column. The input was
   stretching to the full 700px reading measure next to a 220px button, which
   read as a search bar rather than one field and one action. Capped and
   centred, so it sits under the centred section head instead of hanging left. */
.form--capture { max-width: 660px; margin: 0 auto; justify-content: center; }
.form--capture .field--grow { flex: 0 1 360px; min-width: 240px; max-width: 360px; }
.form--capture .btn { flex: 0 0 auto; white-space: nowrap; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--grow { flex: 1; min-width: 220px; }
.label { font-size: 13px; font-weight: 600; }
.input, .select, .textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-size: 14px; transition: border-color .16s ease; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.textarea { min-height: 96px; resize: vertical; }
.input[aria-invalid="true"] { border-color: var(--err); }
.form__note { font-size: 13px; min-height: 20px; margin: 8px 0 0; color: var(--ok); }
.form__note.is-error { color: var(--err); }
/* An optional field still has to say so, or people treat the blank as an error. */
.label__opt { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
.field__hint { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }
/* Upgrade proof, collapsed. Deliberately quiet: a first-time buyer should be
   able to ignore it without noticing, a Face Report owner should find it in
   one line under the price. No animation, no badge, no "limited". */
.upg { max-width: 520px; margin: 18px 0 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.upg__summary { font-size: 13px; color: var(--brand-dark); cursor: pointer; list-style: none; }
.upg__summary::-webkit-details-marker { display: none; }
.upg__summary::before { content: "+"; display: inline-block; width: 14px; color: var(--muted); }
.upg[open] .upg__summary::before { content: "−"; }
.upg__summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.upg__body { display: grid; gap: 8px; margin-top: 12px; max-width: 380px; }
.upg__body .input { width: 100%; }
.upg__note { font-size: 13px; color: var(--ok); margin: 2px 0 0; min-height: 0; line-height: 1.5; }
.upg__note:empty { display: none; }
.upg__note.is-error { color: var(--err); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.check input { margin-top: 3px; accent-color: var(--brand); width: 16px; height: 16px; flex-shrink: 0; }
/* Consent + fine print follow the same 660px measure as the capture form. */
.capture-fine { max-width: 660px; margin: 0 auto; }
.capture-fine .check { margin-top: 16px; }
.capture-fine .fine { margin-top: 6px; }
.form-card { max-width: 560px; }

/* ---------- Quiz ---------- */
.quiz-step { display: none; }
.quiz-step.is-active { display: block; }
.quiz-progress { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-bottom: 18px; }
.quiz-q { font-family: var(--font-head); font-size: 1.6rem; margin-bottom: 20px; }
.options { display: grid; gap: 10px; }
.option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-size: 14px; transition: border-color .15s ease, background .15s ease; }
.option:hover { border-color: var(--brand); background: #FEFBFB; }
.option input { accent-color: var(--brand); width: 17px; height: 17px; }
.quiz-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* ---------- FAQ / table / notice ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.12rem; font-family: var(--font-head); }
.faq__chev { font-family: var(--font-mono); font-size: 20px; color: var(--brand); line-height: 1; }
.faq details[open] .faq__chev { transform: rotate(45deg); }
.faq__body { padding: 0 0 18px; color: var(--muted); font-size: 14px; max-width: 100%; }
.faq__body p:last-child { margin-bottom: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 22px 0; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { background: var(--surface-tint); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.table tr.is-best td { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.table tr.is-best td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.table tr:last-child td { border-bottom: 0; }
.table td code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-tint); padding: 2px 6px; border-radius: var(--radius-sm); }
.notice { padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); margin: 20px 0; font-size: 14px; }
.notice--warn { border-left-color: var(--warn); }
.notice--ok { border-left-color: var(--ok); }
.notice p:last-child { margin-bottom: 0; }

/* ---------- Disclaimer ---------- */
.disclaimer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 24px 0; font-size: 13px; color: var(--muted); }
.disclaimer__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); font-weight: 500; margin-bottom: 10px; }
.disclaimer ul { margin: 0; padding-left: 18px; }
.disclaimer li { margin-bottom: 7px; }
.disclaimer--strong { border-color: var(--brand-soft); background: #FEF9FA; }
.footer-disclaimer { border-top: 1px solid var(--line); margin-top: 46px; padding-top: 26px; font-size: 12.5px; color: var(--muted); }
.footer-disclaimer p { margin-bottom: 8px; }

/* ---------- CTA blocks ---------- */
.report-cta { text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 44px 32px; }
.report-cta .section__head { margin-bottom: 26px; }
.report-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.price-card { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: 30px; max-width: 440px; }
.price-card__amount { font-family: var(--font-head); font-size: 3.4rem; line-height: 1; color: var(--brand); }
.price-card__amount span { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.price-list { list-style: none; padding: 0; margin: 22px 0; }
.price-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; display: flex; gap: 10px; }
.price-list li::before { content: "✓"; color: var(--ok); font-weight: 700; }
.price-list li:last-child { border-bottom: 0; }

/* Pricing hero: the three cards have to be readable in the first screen, not
   half of them. A 1366x768 laptop gives roughly 615px of viewport after the
   browser chrome, so the head block is capped and the cards below are set
   tighter than a generic .card — the same five one-line claims as the home
   page, which is the only way the two pages can agree on what a tier includes. */
.section--plans { padding: 40px 0 56px; }
.plans__head { max-width: 720px; margin: 0 auto 28px; }
.plans__title { font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1.1; margin: 0; }
.plans__lede { margin: 12px auto 0; font-size: 1rem; line-height: 1.6; max-width: 70ch; }
.plans__grid { align-items: start; }
.plans__grid .card { padding: 20px; }
.plans__grid .eyebrow { margin-bottom: 10px; }
.plans__grid .price-card__amount { font-size: 2.5rem; }
.plans__grid .price-list { margin: 14px 0 16px; }
.plans__grid .price-list li { padding: 9px 0; font-size: 13.5px; line-height: 1.45; }
.plans__grid .btn { width: 100%; }

/* 1366x768 laptops leave ~615px of viewport. Five one-line claims plus a
   price, a subtitle and a CTA need 424px, which does not fit under a 353px
   head block — so on short viewports the head tightens and the card drops its
   last claim. Nothing is lost: the matrix below lists all 21 chapters, and the
   three that remain are the ones that differ between tiers. */
@media (min-width: 981px) and (max-height: 740px) {
  .section--plans { padding: 26px 0 36px; }
  .plans__head { margin-bottom: 20px; }
  .plans__title { font-size: clamp(1.9rem, 2.8vw, 2.3rem); }
  .plans__lede { margin-top: 9px; font-size: .95rem; line-height: 1.5; max-width: 76ch; }
  .plans__grid .card { padding: 18px; }
  .plans__grid .price-card__amount { font-size: 2.1rem; }
  .plans__grid .price-list { margin: 12px 0 14px; }
  .plans__grid .price-list li { padding: 6px 0; font-size: 13px; line-height: 1.4; }
  .plans__grid .price-list li { padding: 5px 0; }
  .plans__grid .price-list li:nth-child(n+5) { display: none; }
  .plans__grid .card--price > p:last-child { margin-bottom: 0; }
  .plans__grid .btn { padding-top: 10px; padding-bottom: 10px; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { border-bottom: 1px solid var(--line); background: var(--surface); font-size: 12.5px; }
.breadcrumb ol { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 12px 0; }
.breadcrumb li { color: var(--faint); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }
.breadcrumb a { color: var(--muted); }

/* ---------- Prose (guides / legal) ---------- */
/* The container is the measure now: prose fills it instead of stopping at 62ch
   and leaving a ragged right edge inside a wider box. */
.prose { max-width: 100%; font-size: 15.5px; line-height: 1.78; }
.prose h2 { margin-top: 48px; font-size: 1.85rem; }
.prose h3 { margin-top: 30px; font-size: 1.35rem; }
.prose p, .prose ul, .prose ol { color: #35353C; }
.prose .direct-answer { font-size: 1.12rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 24px; margin: 24px 0; }
.prose blockquote { border-left: 3px solid var(--line-strong); margin: 24px 0; padding: 4px 0 4px 20px; color: var(--muted); font-family: var(--font-head); font-size: 1.15rem; }
.prose .toc { background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; }
.prose .toc ol { margin-bottom: 0; }

/* ---------- Report (12 chapters) ---------- */
.report-body { background: var(--bg); }
.report-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.report-header__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.report-header__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.report-hero { padding: 54px 0 40px; border-bottom: 1px solid var(--line); }
.report-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.report-score { font-family: var(--font-head); font-size: 6rem; line-height: .95; color: var(--brand); letter-spacing: -.05em; }
.report-score small { font-family: var(--font-mono); font-size: 1rem; color: var(--faint); }
.report-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); line-height: 1.9; }
.report-toc { position: sticky; top: 0; z-index: 20; background: rgba(250,249,246,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.report-toc__inner { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; }
.report-toc a { font-size: 12px; color: var(--muted); padding: 5px 10px; border-radius: var(--radius-sm); white-space: nowrap; }
.report-toc a:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }
.report-chapter { padding: 46px 0; border-bottom: 1px solid var(--line); }
.report-chapter__no { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--brand); text-transform: uppercase; }
.report-chapter h2 { font-size: 2rem; margin-top: 8px; }
.report-chapter__body { max-width: 100%; }
.report-chapter .chapter-disclaim { font-size: 12.5px; color: var(--faint); margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); }
.radar { display: grid; gap: 10px; margin: 20px 0; }
.radar__row { display: grid; grid-template-columns: minmax(0, 1.5fr) 1.5fr 48px; gap: 12px; align-items: center; font-size: 13px; }
.radar__track { height: 8px; background: var(--ref); border-radius: 4px; overflow: hidden; }
.radar__fill { height: 100%; background: var(--brand); border-radius: 4px; }
.radar__median { height: 100%; background: var(--line-strong); }
.radar__val { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--muted); }
.radar__word { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.radar__word--strong { background: rgba(190,24,93,.12); color: var(--brand-dark); }
.radar__word--moderate { background: var(--ref); color: var(--muted); }
.radar__word--quiet { background: #EDE6DB; color: var(--faint); }
.plan-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 22px; margin: 16px 0; }
.plan-card__rank { font-family: var(--font-mono); font-size: 11px; color: var(--brand); }
.plan-card h3 { font-size: 1.3rem; margin: 6px 0 10px; }
.plan-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.plan-field { border-top: 1px solid var(--line); padding-top: 10px; font-size: 12.5px; }
.plan-field span { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 4px; }
.week-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.week-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 16px; font-size: 13px; }
.week-card b { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--brand); margin-bottom: 8px; }
.bio-sample { background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 12px 0; font-size: 14px; }

/* ---------- Admin ---------- */
.admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* Six counters read as two ragged rows in a four-column grid. */
.admin-grid--thirds { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .admin-grid--thirds { grid-template-columns: repeat(2, 1fr); } }
.stat { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 18px; }
.stat__label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-family: var(--font-mono); }
.stat__value { font-family: var(--font-head); font-size: 2.1rem; color: var(--ink); margin-top: 8px; }
.funnel { display: grid; gap: 8px; margin-top: 20px; }
.funnel__row { display: grid; grid-template-columns: 200px 1fr 86px; gap: 12px; align-items: center; font-size: 13px; }
.funnel__bar { height: 18px; background: var(--ref); border-radius: 3px; overflow: hidden; }
.funnel__bar i { display: block; height: 100%; background: var(--brand); }
.funnel__val { font-family: var(--font-mono); text-align: right; font-size: 12px; color: var(--muted); }
.admin-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
.admin-tabs a { padding: 10px 14px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; }
.admin-tabs a.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------- Cookie banner / footer ---------- */
.cookie { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--surface); border-top: 1px solid var(--line-strong); }
.cookie[hidden] { display: none; }
.cookie__inner { max-width: var(--shell); margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 24px; justify-content: space-between; flex-wrap: wrap; }
.cookie__text { font-size: 13px; color: var(--muted); max-width: 620px; }
.cookie__text strong { color: var(--ink); }
.cookie__text p { margin: 4px 0 0; }
.cookie__actions { display: flex; gap: 10px; align-items: center; }
.cookie__reject { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cookie__reject:hover { color: var(--ink); }
.footer { background: var(--dark); color: rgba(255,255,255,.72); padding: 60px 0 26px; margin-top: 0; }
.footer--slim { padding: 30px 0 20px; }
/* Six columns and no wrap: brand + five link groups. Free tools is double
   width and holds 24 links in two sub-columns, so it is about as tall as the
   credits column. Dating standards is a sub-group of Report; Trust & legal is
   the last column. The spanning header rule + the hairline between the two
   sub-columns make them read as ONE group rather than an orphan second list. */
.footer__cols { display: grid; grid-template-columns: 1.15fr 2.6fr repeat(4, 1fr); gap: 26px; }
.footer__col--tools { min-width: 0; }
/* CSS multi-column rather than a grid: column-rule draws the divider for any
   number of sub-columns, so the same markup stays a single visible group at
   every breakpoint (2 columns on desktop, 4 on tablet, 2 on phones). */
.footer__col--tools .footer__links {
  columns: 2; column-gap: 26px;
  column-rule: 1px solid rgba(255,255,255,.10);
}
.footer__col--tools .footer__links li { break-inside: avoid; }
.footer__col--tools .footer__links a { font-size: 12.5px; }
/* No header rule and no count badge on the wide group: a horizontal rule under
   only one heading broke the baseline across columns. The vertical column-rule
   above is the single divider that still reads as "one group, two columns". */
.footer__col h3.footer__subhead { margin-top: 24px; }
.footer__brand p { font-size: 13px; max-width: 260px; }
.footer__brand .fine { color: rgba(255,255,255,.5); }
.logo--footer .logo__text { color: var(--brand); }
.footer__col h3 { color: #fff; font-family: var(--font-ui); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: 8px; }
.footer__col a { color: rgba(255,255,255,.68); font-size: 13px; }
.footer__col a:hover { color: #fff; }
.footer .footer-disclaimer { border-top-color: rgba(255,255,255,.14); color: rgba(255,255,255,.6); }
.footer .footer-disclaimer strong { color: rgba(255,255,255,.85); }
/* Inline prose links in the dark footer inherited brand pink (~3:1 on near-black).
   Lift to a lighter pink so body-size links clear AA. */
.footer p a, .footer .footer-disclaimer a, .footer .fine a { color: #f472b6; }
.footer p a:hover, .footer .footer-disclaimer a:hover, .footer .fine a:hover { color: #fbcfe8; }
.footer .fine { color: rgba(255,255,255,.45); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 24px; padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,.5); }
.footer__bottom a { color: rgba(255,255,255,.7); }
.footer__bottom p { margin: 0; }

/* ---------- Mobile bottom bar ---------- */
.mobile-bar { display: none; }

/* ---------- Utilities ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stack { display: grid; gap: 14px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; }
.divider { height: 1px; background: var(--line); margin: 28px 0; }
/* "or with email" between the Google button and the password form. */
.divider--label { position: relative; margin: 22px 0; }
.divider--label span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--bg); padding: 0 12px; font-size: 12px; color: var(--faint); }
.kicker { font-family: var(--font-mono); font-size: 11px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Responsive ---------- */
/* Between a narrow laptop and the nav breakpoint the chrome gets tight in the
   longer locales (German/French). Drop the decorative FREE chip rather than
   letting the nav fold onto a second line. */
@media (max-width: 1200px) {
  .nav-badge { display: none; }
  .site-header__actions { gap: 10px; }
  .site-header__inner { gap: 14px; }
  .nav { gap: 13px; }
}
@media (max-width: 1024px) {
  .nav { display: none; }
  .card-grid--3, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .tool-layout { grid-template-columns: 1fr; }
  /* Tablet: brand and the free-tools band each own a full row; the four
     remaining groups sit in one four-across row. Tools split into four short
     sub-columns so no single 24-item column stretches the whole footer. */
  .footer__cols { grid-template-columns: repeat(4, 1fr); }
  .footer__brand, .footer__col--tools { grid-column: 1 / -1; }
  .footer__col--tools .footer__links { columns: 4; }
  .trust-bar__inner { grid-template-columns: repeat(2, 1fr); }
  .trust-bar__item:nth-child(2n) { border-right: 0; }
  .admin-grid { grid-template-columns: repeat(2, 1fr); }
  .week-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .container { padding: 0 18px; }
  .section { padding: 52px 0; }
  .hero { padding: 52px 0 40px; }
  .card-grid--3, .card-grid--2, .steps, .dim-grid, .plan-fields, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .trust-bar__inner { grid-template-columns: repeat(2, 1fr); }
  .trust-bar__item { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 10px; }
  .site-header__inner { min-height: 58px; gap: 8px; }
  .site-header__actions { gap: 8px; }
  .site-header__actions .btn { padding: 9px 14px; font-size: 12.5px; }
  .lang-switch__select { padding: 7px 26px 7px 10px; font-size: 12px; }
  .site-header__actions .nav-link { display: none; }
  .logo__sub { display: none; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col--tools { grid-column: 1 / -1; }
  .footer__col--tools .footer__links { columns: 2; column-gap: 20px; }
  .report-hero__grid { grid-template-columns: 1fr; }
  .report-score { font-size: 4.4rem; }
  .radar__row { grid-template-columns: 110px 1fr 44px; }
  .funnel__row { grid-template-columns: 120px 1fr 44px; }
  .admin-grid { grid-template-columns: 1fr 1fr; }
  .mobile-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--line-strong); }
  .mobile-bar a { font-size: 10.5px; text-align: center; padding: 10px 2px; color: var(--muted); }
  .mobile-bar a:hover { color: var(--brand); text-decoration: none; }
  body { padding-bottom: 46px; }
  .cookie { bottom: 46px; }
  .form--inline { flex-direction: column; align-items: stretch; }
  .field--grow { width: 100%; }
  .form--capture { max-width: 100%; }
  .form--capture .field--grow { flex: 1 1 auto; max-width: none; min-width: 0; }
  .form--capture .btn { width: 100%; }
}

/* ---------- Free-report extras: 478 mesh + leverage radar + eye example ---------- */
/* 478-point mesh card --------------------------------------------------- */
.mesh-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 18px; margin-top: 20px; }
.mesh-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.mesh-tab { font: inherit; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.mesh-tab:hover { border-color: var(--brand); color: var(--brand); }
.mesh-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.mesh-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mesh-figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.mesh-stage { position: relative; display: flex; justify-content: center; width: 100%; }
.mesh-stage .fx-stage { max-width: 400px; margin: 0 auto; border-radius: 14px; }
.mesh-share { position: absolute; right: max(0px, calc(50% - 215px)); bottom: -14px; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.95); color: var(--ink); cursor: pointer; box-shadow: 0 2px 10px rgba(26,26,29,.10); transition: box-shadow .15s, transform .15s; }
.mesh-share:hover { box-shadow: 0 4px 16px rgba(26,26,29,.16); transform: scale(1.03); }
.mesh-share:disabled { opacity: .7; cursor: progress; }
.mesh-share svg { color: var(--brand); }
.mesh-caption { margin-top: 30px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--brand-soft); max-width: 560px; text-align: left; }
.mesh-caption__eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin: 0 0 6px; }
.mesh-caption__title { font-family: var(--font-head); font-size: 17px; color: var(--ink); margin: 0 0 6px; }
.mesh-caption__body { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.mesh-legend { list-style: none; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; padding: 0; margin: 16px 0 10px; font-size: 12.5px; color: var(--muted); }
.mesh-legend li { display: inline-flex; align-items: center; gap: 7px; }
.mesh-legend__swatch { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }

/* leverage card --------------------------------------------------------- */
.leverage-card { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; margin: 18px auto 0; max-width: 920px; position: relative; }
.leverage-card__viz { display: flex; flex-direction: column; align-items: center; position: relative; }
.leverage-locked { position: absolute; top: 16px; right: 16px; z-index: 2; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 5px 10px; margin: 0; box-shadow: 0 1px 3px rgba(26,26,29,.06); }
.locked-radar { width: 100%; max-width: 300px; height: auto; }
.radar-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.radar-shape { fill: rgba(190,24,93,0.10); stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 4 3; }
.radar-label { font-size: 12px; fill: var(--muted); font-family: var(--font-mono); }
.radar-hidden { font-size: 13px; fill: var(--faint); letter-spacing: .14em; }
.radar-tick { font-size: 9px; fill: var(--faint); font-family: var(--font-mono); }
.radar-lock circle { fill: var(--brand); stroke: none; }
.radar-lock path { fill: #fff; stroke: #fff; stroke-width: 1.5; }
.locked-radar line { stroke: var(--line); }
.leverage-highest { font-size: 12.5px; color: var(--muted); text-align: center; margin: 10px 0 0; max-width: 260px; }
.leverage-highest span { color: var(--faint); }
.leverage-highest b { color: var(--ink); font-weight: 600; }
.leverage-card__copy p { font-size: 15px; color: var(--ink); }
.leverage-card__copy p.fine { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.leverage-card__copy .leverage-cta { display: block; margin: 4px 0 10px; }
.leverage-card__copy .leverage-cta .btn { margin: 0; }
.leverage-list { list-style: none; padding: 0; margin: 14px 0 18px; }
.leverage-list li { position: relative; padding-left: 22px; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.leverage-list li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 11px; height: 6px; border-left: 1.6px solid var(--brand); border-bottom: 1.6px solid var(--brand); transform: rotate(-45deg); }

/* eye example (real landmark geometry) ---------------------------------- */
.ex-eye { display: grid; gap: 20px; margin-top: 18px; }
.ex-eye__fig { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 30px 30px 20px; text-align: center; }
.ex-eye__fig .fx-stage { max-width: 760px; margin: 0 auto; border-radius: 12px; }
.ex-eye__cap { margin-top: 16px; font-size: 12px; color: var(--faint); line-height: 1.55; text-align: left; }
/* No max-width: the copy below must end on the same right edge as the figure
   card above it, or the section reads as two misaligned blocks. */

@media (max-width: 720px) {
  .leverage-card { grid-template-columns: 1fr; }
  .leverage-card__viz { max-width: 340px; margin: 0 auto; }
  .mesh-stage img { max-width: 320px; }
  .mesh-share { right: 4px; bottom: -12px; }
  .ex-eye__fig { padding: 18px 14px 14px; }
}

/* ---------- Photo + measured overlay stage ----------
   A figure is a pair of images stacked in one box: the photograph, then the
   vector layer the measurement draws. Both share a viewBox/aspect ratio, so
   alignment is exact at every width and 1:1 in canvas when shared. */
.fx-stage { position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: #EDE6DB; }
.fx-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-photo { object-fit: cover; }
.fx-ov { object-fit: fill; pointer-events: none; }
.fx-stage.is-maponly { background: #0E0E10; }
.fx-stage.is-maponly .fx-photo { opacity: 0; }

/* ---------- Sample report showcase ---------- */
/* One centred intro, then modules that share the same column. */
.sample-hero { padding: 56px 0 26px; text-align: center; }
.sample-hero .lede { max-width: 62ch; margin-left: auto; margin-right: auto; }
.sample-hero__actions { margin: 24px 0 6px; }
.sample-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 22px 0 0; margin: 20px 0 0; border-top: 1px solid var(--line); justify-content: center; }
.sample-badges li { display: flex; flex-direction: column; }
.sample-badges strong { color: var(--ink); font-size: 15px; }
.sample-badges span { color: var(--muted); font-size: 12.5px; }
.center { text-align: center; }

/* Guide figure: the diagram the article teaches from, plus a caption that says
   what to look at. Lives inside .prose, so it deliberately keeps its own width
   and does not inherit the prose table's full-bleed escape. */
.gfig { margin: 30px 0 32px; }
.gfig__media { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-tint); }
.gfig__media > img { display: block; width: 100%; height: auto; }
.gfig figcaption { margin-top: 13px; font-size: 13px; line-height: 1.62; color: var(--muted); }
.gfig figcaption b { display: block; color: var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; }
.gfig figcaption em { display: block; margin-top: 8px; font-style: normal; font-size: 12px; color: var(--faint); padding-left: 11px; border-left: 2px solid var(--line-strong); }
/* A 1000px-wide diagram shrunk into a 652px reading column loses a third of its
   label size. Borrow the page column the same way the wide tables do — the
   captions are part of the argument, not decoration. */
@media (min-width: 1040px) {
  .gfig--diagram { width: calc(100% + 220px); margin-left: -110px; margin-right: -110px; }
  /* The diagram borrows the page column; its caption does not. At 872px the
     caption ran to ~110 characters a line, which is a wall, not a caption. Pad
     it back to the reading measure so it lines up with the prose above it. */
  .gfig--diagram > figcaption { padding-left: 110px; padding-right: 110px; }
}
/* The headline block closes with a figure, so the article opens on the picture
   rather than a screen and a half of prose. */
.container--narrow > .gfig { margin-top: 26px; margin-bottom: 0; }
/* A 1000px diagram cannot shrink to a 358px phone column without turning its
   labels into lint. Keep it at a legible width and let the frame scroll —
   the same call every charting library makes. */
@media (max-width: 760px) {
  .gfig--diagram .gfig__media { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gfig--diagram .gfig__media > img { min-width: 700px; }
  /* Without a word of explanation a half-visible diagram reads as a broken
     image, not as something to swipe. */
  .gfig--diagram figcaption::before {
    content: "Swipe the diagram to see all of it \2192";
    display: block; margin-bottom: 7px;
    font: 600 10.5px/1 var(--font-mono); letter-spacing: .06em;
    text-transform: uppercase; color: var(--brand);
  }
}
.gfig--tall { max-width: 380px; margin-left: auto; margin-right: auto; }
.gfig--tall .gfig__media { border: 0; background: none; }
/* Guides hub: six dimensions, each with the picture that explains it. The
   resource table below stays for scanning; this is for choosing. */
.figgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; margin: 26px 0 34px; }
.figcard { display: block; color: inherit; text-decoration: none; }
.figcard:hover { text-decoration: none; }
.figcard__media { aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-tint); display: flex; align-items: center; justify-content: center; }
.figcard__media > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.figcard__media .fx-stage { width: 100%; height: 100%; border-radius: 0; }
/* These thumbnails are 4:3 while the portrait is 720x998. Cover would crop the
   chin and crown and — worse — desynchronise the annotation layer, which shares
   the photo's coordinate box. Contain keeps both layers locked together. */
.figcard__media .fx-photo,
.figcard__media .fx-ov { object-fit: contain; }
.figcard span { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.figcard:hover span { color: var(--brand); }
@media (max-width: 760px) { .figgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .figgrid { grid-template-columns: 1fr; } }

/* Photograph for a quiz or generator: the situation, not a measurement. */
.scene-stage { border-radius: 16px; overflow: hidden; background: var(--surface-tint); }
.scene-stage > img { display: block; width: 100%; height: auto; }

.sample-fig__grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px; align-items: center; max-width: 920px; margin-left: auto; margin-right: auto; }
.sample-fig__text { max-width: 54ch; }
.sample-fig__media { position: relative; }
.fig-badge { position: absolute; left: 12px; top: 12px; background: rgba(26,26,29,.82); color: #fff; font-size: 11px; padding: 4px 9px; border-radius: 999px; letter-spacing: .03em; }
.tick { list-style: none; padding: 0; margin: 14px 0 0; }
.tick li { position: relative; padding-left: 26px; margin: 9px 0; color: var(--ink); }
.tick li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }

.mirror-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 560px; margin: 26px auto 0; }
.mirror { position: relative; margin: 0; border-radius: 16px; overflow: hidden; }
.mirror__badge { z-index: 2; position: absolute; left: 12px; top: 12px; background: rgba(26,26,29,.82); color: #fff; font-size: 11px; padding: 4px 9px; border-radius: 999px; }

.skinmap { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 44px; align-items: start; max-width: 920px; margin-left: auto; margin-right: auto; }
.skinmap__card { background: #0E0E10; border-radius: 16px; padding: 14px; }
.skinmap__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
.skinmap__tab { font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: #cfcfd4; background: #1c1c20; border: 1px solid #2c2c32; border-radius: 999px; padding: 7px 11px; cursor: pointer; }
.skinmap__tab.is-active { background: #fff; color: #111; border-color: #fff; }
.skinmap__maponly { margin-left: auto; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: #cfcfd4; background: transparent; border: 1px solid #2c2c32; border-radius: 999px; padding: 7px 11px; cursor: pointer; }
.skinmap__maponly[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); }
.skinmap__media { border-radius: 12px; overflow: hidden; }
.skinmap__media .fx-stage { border-radius: 10px; }
.skinmap.is-maponly .sm-bars, .skinmap.is-maponly .sm-desc, .skinmap.is-maponly .skinmap__panel > .btn, .skinmap.is-maponly .skinmap__panel > .fine { display: none; }
.sm-layer[hidden] { display: none; }
.sm-bars { list-style: none; padding: 0; margin: 18px 0 16px; }
.sm-bars li { display: grid; grid-template-columns: 92px 1fr 38px; align-items: center; gap: 10px; margin: 9px 0; font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.sm-bar__t { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.sm-bar__t i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.sm-bar__v { text-align: right; color: var(--ink); font-weight: 600; }
.sm-desc { color: var(--ink); font-size: 15px; margin: 4px 0 0; }
.skinmap__panel .btn { margin-top: 4px; }

.compare { position: relative; max-width: 360px; margin: 22px auto 0; aspect-ratio: 720 / 998; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, #F3ECE2, #E9DFD2); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.compare__layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .25s ease; }
.compare__layer .fx-stage { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.compare__layer .fx-stage > img { border-radius: 0; }
.compare__b { opacity: 0; }
.compare.is-held .compare__a { opacity: 0; }
.compare.is-held .compare__b { opacity: 1; }
.compare__tag { position: absolute; left: 12px; top: 12px; background: rgba(26,26,29,.82); color: #fff; font-size: 11px; padding: 4px 9px; border-radius: 999px; z-index: 2; }
.compare__hint { position: absolute; right: 12px; bottom: 12px; background: rgba(255,255,255,.92); color: #1A1A1D; font-size: 11px; padding: 5px 10px; border-radius: 999px; z-index: 2; font-weight: 600; }

/* Example artwork: three illustrative subjects, and before/after strips.
   Both are photo+overlay stages in a grid, so they inherit the same 1:1
   stacking behaviour as every other figure on the site. */
.modelrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 920px; margin: 26px auto 0; }
.modelrow figure { margin: 0; }
.modelrow .fx-stage { border-radius: 14px; }
.modelrow figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 12px; color: var(--faint); line-height: 1.5; }
.modelrow figcaption b { color: var(--ink); font-weight: 600; }

.pairgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1000px; margin: 26px auto 0; }
.pairgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 764px; }
.pairgrid--1 { grid-template-columns: minmax(0, 360px); justify-content: center; }
.pair { margin: 0; }
.pair__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 14px; overflow: hidden; background: var(--line); }
.pair__shot { position: relative; }
.pair__shot img { width: 100%; display: block; }
.pair__shot .fx-stage { border-radius: 0; }
.pair__tag { position: absolute; left: 7px; top: 7px; z-index: 2; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; background: rgba(26,26,29,.78); color: #fff; padding: 4px 7px; border-radius: 999px; }
.pair__tag--after { background: rgba(255,255,255,.94); color: #1A1A1D; }
.pair figcaption { margin-top: 11px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.pair figcaption b { display: block; color: var(--ink); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }

.glowup { margin-top: 18px; border-top: 1px solid var(--line); }
.glowup__expand { display: inline-block; margin: 14px 0 4px; font-size: 13px; color: var(--brand); text-decoration: none; }
.glowup__item { border-bottom: 1px solid var(--line); }
.glowup__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 4px; }
.glowup__item summary::-webkit-details-marker { display: none; }
.glowup__title { font-weight: 600; color: var(--ink); flex: 1; }
.glowup__tag { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); border: 1px solid var(--brand); border-radius: 999px; padding: 3px 9px; }
.glowup__chev { color: var(--muted); font-size: 20px; line-height: 1; transition: transform .2s; }
.glowup__item[open] .glowup__chev { transform: rotate(45deg); }
.glowup__body { padding: 0 4px 18px; color: var(--ink); }
.glowup__body p:first-child { color: var(--muted); }

.never { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.never li { position: relative; padding: 16px 16px 16px 48px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; }
.never li::before { content: "\2715"; position: absolute; left: 16px; top: 15px; color: var(--brand); font-weight: 700; }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; max-width: 920px; margin-left: auto; margin-right: auto; }
/* Two-up blocks are cards, so unequal copy still ends on a shared baseline
   instead of one column stopping halfway down the other. */
.twocol > div { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 24px; }
.twocol h3 { margin-top: 0; }
.twocol p:last-child { margin-bottom: 0; }
.twocol .btn, .twocol .chip { margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; text-decoration: none; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.your-turn { border: 1px solid var(--line); background: #FDF2F8; border-radius: 18px; padding: 34px; text-align: center; }

.report-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.report-cta__actions.center { justify-content: center; }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .sample-fig__grid, .skinmap, .twocol { grid-template-columns: 1fr; gap: 24px; }
  .sample-fig__media { max-width: 340px; margin: 0 auto; }
  .mirror-grid { max-width: 440px; }
  .your-turn { padding: 24px; }
  .leverage-card { grid-template-columns: 1fr; }
  .leverage-card__viz { max-width: 360px; margin: 0 auto; }
  .modelrow { grid-template-columns: 1fr 1fr; max-width: 560px; }
  .pairgrid, .pairgrid--2, .pairgrid--1 { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 760px) {
  .sample-fig__media { max-width: 300px; }
  .your-turn { padding: 20px; }
  .twocol > div { padding: 20px; }
  .modelrow { grid-template-columns: 1fr; max-width: 320px; }
}

/* ---------- Tool page: centered layout (hero + section intros) ---------- */
.tool-hero { text-align: center; padding-top: 12px; padding-bottom: 0; }
.tool-hero .h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; margin: 0 0 6px; }
.tool-hero .lede { max-width: 62ch; margin-left: auto; margin-right: auto; font-size: 0.98rem; line-height: 1.42; margin-bottom: 2px; }
.tool-hero .fine { max-width: 62ch; margin-left: auto; margin-right: auto; font-size: 12px; }
/* Pull the two cards right under the hero so hero + cards share the first
   screen instead of the hero eating a third of it. */
#tool { padding: 6px 0 26px; }
.tool-page .panel { padding: 20px; }
.tool-page .upload { padding: 26px 18px; }
.tool-page .upload h3 { font-size: 1.2rem; }
.tool-page .upload p { margin-bottom: 13px; }
.tool-page .upload__meta { margin-top: 12px; }
/* Center each content module's intro (eyebrow, heading, lede) so the page
   reads as a centered marketing layout; long prose stays left-aligned for
   readability inside the already-centered narrow column. */
.tool-page .section > .container > .eyebrow,
.tool-page .section > .container > h2,
.tool-page .section > .container > .lede,
.tool-page .section > .container > .lede--section,
.tool-page .section > .container.container--narrow > .eyebrow,
.tool-page .section > .container.container--narrow > h2,
.tool-page .section > .container.container--narrow > .lede,
.tool-page .section > .container.container--narrow > .lede--section { text-align: center; }
.tool-page .section > .container > .lede,
.tool-page .section > .container > .lede--section { max-width: 64ch; margin-left: auto; margin-right: auto; }
/* Center the SEO-article prose headings too (they sit one level deeper). */
.tool-page .prose > h2,
.tool-page .prose > h3 { text-align: center; }

/* Wide data inside a reading column -------------------------------------
   Body copy keeps the 700px measure; a table may borrow the page column so
   four-column comparisons stop wrapping into confetti. Desktop only — on
   narrow screens the table already scrolls inside .table-wrap. */
@media (min-width: 1000px) {
  .container--read .prose > .table-wrap { width: calc(100% + 200px); margin-left: -100px; margin-right: -100px; }
}

/* ---------- Print (report -> PDF) ---------- */
@media print {
  :root { --bg: #fff; }
  body { background: #fff; font-size: 10.5pt; padding: 0; }
  .site-header, .mobile-bar, .report-toc, .report-header__actions, .cookie, .footer, .skip-link, .btn, .report-cta { display: none !important; }
  .container { max-width: 100%; padding: 0 12mm; }
  .report-hero { padding: 10mm 0 6mm; }
  .report-chapter { padding: 6mm 0; break-inside: avoid-page; }
  .report-chapter h2 { font-size: 16pt; }
  .report-score { font-size: 40pt; }
  .plan-card, .week-card, .bio-sample, .disclaimer, .table-wrap { break-inside: avoid; }
  a { color: var(--ink); text-decoration: none; }
  .footer-disclaimer::after { content: "Entertainment & self-insight only · Not medical advice · Score is a weak geometric signal and does not predict matches · facerate.co"; display: block; font-size: 8pt; color: #555; margin-top: 6mm; }
  @page { margin: 14mm 12mm; }
}

/* ==========================================================================
   Report landing — the "one screen" hero
   The old hero stacked headline, lede, two full-width buttons, an email field
   and a five-item card, so the price card fell below the fold at 900px. This
   one is a 1fr + 340px grid with a clamped headline, one sentence of lede and
   a single row of facts — everything above the fold at 1440x900 and 1280x800.
   ========================================================================== */
.section--slim { padding: 40px 0 32px; }
.hero-slim { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.hero-slim__text .h1 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.08; letter-spacing: -.022em; margin: 8px 0 14px; max-width: 17ch; }
.hero-slim__text .lede { font-size: 16.5px; line-height: 1.55; margin-bottom: 22px; max-width: 54ch; }
.hero-slim .hero-actions { margin-bottom: 16px; }
/* The checkout status line is empty until something happens; the global
   .form__note min-height:20px would otherwise leave a 20px hole under the
   buttons on every visit. */
.hero-slim .form__note { min-height: 0; margin: 0; }
.hero-slim .form__note:not(:empty) { margin: 6px 0 0; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--faint); }
.hero-facts span { display: inline-flex; align-items: center; gap: 6px; }
.hero-facts span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); margin-right: 10px; }
.hero-facts strong { color: var(--ink); }

.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.hero-card .eyebrow { margin-bottom: 10px; }
.hero-card__price { font-family: var(--font-head); font-size: 2.5rem; line-height: 1; color: var(--brand); letter-spacing: -.03em; margin-bottom: 14px; }
.hero-card__price span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--faint); text-transform: uppercase; }
.hero-card__list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 9px; font-size: 13.5px; color: var(--muted); }
.hero-card__list li { position: relative; padding-left: 18px; line-height: 1.45; }
.hero-card__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 700; }
.hero-card .btn { width: 100%; }
.hero-card .fine { margin-top: 12px; font-size: 12px; }

.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.how-step { border-top: 2px solid var(--ink); padding-top: 14px; }
.how-step__no { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--brand); }
.how-step h3 { font-size: 1.05rem; margin: 6px 0 6px; }
.how-step p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
  .hero-slim { grid-template-columns: 1fr; gap: 24px; }
  .hero-slim__text .h1 { max-width: none; }
  .hero-card { order: 2; }
  .how-steps { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================================
   Report page (preview + delivered)
   ========================================================================== */
.rep-hero { padding: 42px 0 34px; border-bottom: 1px solid var(--line); }
.rep-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; }
.rep-hero h1 { font-size: clamp(28px, 2.6vw, 38px); margin: 6px 0 18px; }
.rep-hero__score { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 16px; }
.rep-hero__score .report-score { font-size: 4.2rem; }
.rep-band { font-size: 15px; color: var(--ink); margin: 0 0 2px; font-weight: 600; }
.rep-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rep-chips .pill { font-size: 12px; }
.rep-hero__cta { margin: 18px 0 8px; }
/* The one line that has to survive being skimmed: this URL is the product, and
   nothing will resend it unless the reader knows where to ask. */
.rep-keep { margin: 16px 0 0; padding: 10px 14px; border-left: 3px solid var(--brand);
  background: var(--brand-soft); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px; line-height: 1.55; max-width: 46ch; }
.rep-hero__fig { margin: 0; }
.rep-hero__fig .rep-fig__stage { border-radius: 12px; }
.rep-hero__fig figcaption { margin-top: 10px; }
.rep-fig { margin: 26px 0; }
.rep-fig__stage { width: 100%; max-width: 420px; margin: 0 auto; }
.rep-fig__stage .rep-fig__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rep-fig figcaption { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; text-align: center; max-width: 60ch; margin-left: auto; margin-right: auto; }
.rep-fig__tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); border-radius: 3px; padding: 2px 6px; margin-right: 6px; }
.rep-fig__delete { display: block; margin: 8px auto 0; background: none; border: 0; padding: 0; font-size: 12px; color: var(--faint); text-decoration: underline; cursor: pointer; }
.rep-fig__delete[hidden] { display: none; }

.rep-toc { position: sticky; top: 0; z-index: 20; background: rgba(250,249,246,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.rep-toc__inner { display: flex; gap: 4px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.rep-toc__inner::-webkit-scrollbar { display: none; }
.rep-toc__link { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); padding: 5px 10px; border-radius: 999px; white-space: nowrap; text-decoration: none; }
.rep-toc__link:hover { background: var(--brand-soft); color: var(--brand-dark); }
.rep-toc__no { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
.rep-toc__link.is-locked { color: var(--faint); opacity: .75; }

.rep-ch { padding: 40px 0; border-bottom: 1px solid var(--line); }
.rep-ch__no { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--brand); text-transform: uppercase; }
.rep-ch h2 { font-size: 1.85rem; margin: 8px 0 4px; display: flex; align-items: center; gap: 10px; }
.rep-ch__body { max-width: 100%; }
.rep-ch__body .chapter-disclaim { font-size: 12.5px; color: var(--faint); margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); }
.rep-ch__teaser { color: var(--muted); font-size: 15px; margin: 0 0 16px; max-width: 60ch; }
.rep-lock { color: var(--brand); flex: none; }

/* Locked chapter: a skeleton, never the real text. Locking that ships the
   prose and hides it with CSS is not a lock, it is a speed bump. */
.rep-ch--locked { background: linear-gradient(180deg, transparent, rgba(245,242,236,.55)); }
.rep-ch__veil { display: grid; gap: 10px; margin: 0 0 22px; }
.rep-ch__veil i { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--line), var(--ref), var(--line)); }
.rep-ch__veil i:nth-child(2) { width: 92%; }
.rep-ch__veil i:nth-child(3) { width: 97%; }
.rep-ch__veil i:nth-child(4) { width: 88%; }
.rep-ch__veil i:nth-child(5) { width: 64%; }

.rep-paywall { display: flex; gap: 18px; align-items: flex-start; background: var(--surface); border: 1px solid var(--brand); border-radius: var(--radius); padding: 20px 22px; }
.rep-paywall__mark { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.rep-paywall__body p { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.rep-paywall__price { font-family: var(--font-head); font-size: 1.5rem; color: var(--ink) !important; }
.rep-paywall__price span { font-family: var(--font-body); font-size: 12px; color: var(--faint); }
.rep-paywall__cta { margin: 12px 0 8px !important; }
.rep-paywall .fine { font-size: 11.5px; }
.rep-cta-note.is-error { color: var(--err) !important; }

.rep-upsell { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 26px; align-items: center; background: var(--surface-tint); border-radius: var(--radius); padding: 22px 24px; margin: 26px 0; }
.rep-upsell h3 { margin: 4px 0 8px; font-size: 1.15rem; }
.rep-upsell p { margin: 0; font-size: 13.5px; color: var(--muted); }
.rep-upsell__price { font-family: var(--font-head); font-size: 1.6rem; color: var(--brand); margin-bottom: 8px !important; }
.rep-upsell__price span { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.rep-upsell__act .btn { width: 100%; }

.rep-block { padding: 56px 0; }
.rep-block--tint { background: var(--surface-tint); }
.rep-plans { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; margin-top: 22px; }
.rep-plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.rep-plan--strong { border-color: var(--ink); }
.rep-plan h3 { margin: 8px 0 4px; font-size: 1.3rem; }
.rep-plan__price { font-family: var(--font-head); font-size: 2rem; color: var(--brand); margin: 0 0 14px; }
.rep-plan ul { list-style: none; padding: 0; margin: 0 0 18px; font-size: 13.5px; color: var(--muted); display: grid; gap: 8px; }
.rep-plan li { padding-left: 18px; position: relative; }
.rep-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.rep-plan .btn { width: 100%; }

.rep-email { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.rep-email__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.rep-email__card h3 { font-size: 1.05rem; margin: 0 0 8px; }
.rep-email__form { display: flex; gap: 8px; margin: 14px 0 8px; }
.rep-email__form .input { flex: 1; min-width: 0; }
.rep-email__card .form__note { min-height: 18px; margin: 0; font-size: 12.5px; }

.rep-app { display: grid; grid-template-columns: minmax(0,1fr) 140px; gap: 36px; align-items: center; }
.rep-app__list { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }
.rep-app__list li { padding-left: 18px; position: relative; }
.rep-app__list li::before { content: "·"; position: absolute; left: 6px; color: var(--brand); font-weight: 700; }
.rep-app__qr { justify-self: end; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; line-height: 0; }

.rep-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(23,23,26,.96); color: #fff; transform: translateY(110%); transition: transform .22s ease; }
.rep-buybar.is-on { transform: none; }
.rep-buybar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.rep-buybar p { margin: 0; font-size: 14px; color: #fff; }
.rep-buybar .fine { color: rgba(255,255,255,.7); font-size: 12px; margin-left: 6px; }

@media (max-width: 900px) {
  .rep-hero__grid { grid-template-columns: 1fr; gap: 26px; }
  .rep-hero__fig { order: -1; max-width: 260px; }
  .rep-upsell { grid-template-columns: 1fr; }
  .rep-plans, .rep-email { grid-template-columns: 1fr; }
  .rep-app { grid-template-columns: 1fr; }
  .rep-app__qr { justify-self: start; }
  .rep-ch { padding: 30px 0; }
  .rep-ch h2 { font-size: 1.5rem; }
  .rep-paywall { flex-direction: column; gap: 12px; }
  .rep-buybar__inner { padding: 10px 0; }
  .rep-buybar p { font-size: 13px; }
  .report-body { padding-bottom: 64px; }
}
@media print {
  .rep-toc, .rep-buybar, .rep-paywall, .rep-upsell, .rep-block, .rep-fig__delete, .rep-hero__fig figcaption { display: none !important; }
  .rep-ch--locked { display: none !important; }
}

/* Report reading column -----------------------------------------------------
   A report carries five-column tables and a figure per chapter, so it uses a
   wider measure than an article (840 vs 700) and opts OUT of the "borrow the
   page column" rule below — inside a report the table simply uses its column,
   because the column was already sized for it. */
.container.report-col { width: 100%; max-width: 840px; }
.rep-ch .table-wrap { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.rep-ch__body table, .rep-block table { font-size: 12.8px; }
.rep-ch__body th, .rep-ch__body td { padding: 9px 10px; }
@media (max-width: 900px) {
  .container.report-col { max-width: 100%; }
}

/* Plan cards: equal height, buttons on one baseline. */
.rep-plan { display: flex; flex-direction: column; }
.rep-plan > ul { flex: 1 1 auto; }
/* The sticky bar is fixed, so the page reserves room for it instead of letting
   it sit on top of the last block. */
body:has(.rep-buybar) { padding-bottom: 78px; }
@media print { body:has(.rep-buybar) { padding-bottom: 0; } }

/* ==========================================================================
   /face-report/ — purchase hero + sample-report preview cards
   The page has to do one job the competitor does well: put the price and the
   buy button where the eye lands, and then prove what the money buys with
   cards that look like the report itself. Every number in these cards comes
   from the sample dataset in server/report.mjs, never from hand-typed copy.
   ========================================================================== */

/* ---- Hero purchase card ---------------------------------------------- */
.hero-card__sub { margin: -6px 0 14px; font-size: 12px; color: var(--faint); line-height: 1.5; }
.hero-card--buy .btn { font-size: 15px; padding-left: 14px; padding-right: 14px; margin-top: 2px; }
.hero-sample { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.hero-sample:hover { color: var(--brand); text-decoration-color: currentColor; }
@media (max-width: 760px) { .hero-sample { margin-top: 12px; } }

/* ---- Card shell ------------------------------------------------------- */
.prevstack { display: grid; gap: 18px; }
.prev-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; }
.prev-card__kicker { margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); }
.prev-card__title { margin: 6px 0 18px; font-family: var(--font-head); font-size: 1.6rem; line-height: 1.15;
  letter-spacing: -.01em; }
.prev-card__lede { margin: -8px 0 14px; font-size: 14px; color: var(--muted); max-width: 62ch; }
.prev-card__split { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.prev-card__split--radar { grid-template-columns: 340px minmax(0, 1fr); align-items: center; }
.prev-card__fig { margin: 0; }
.prev-card__fig figcaption { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--faint); }
.prev-card__data > p { font-size: 14px; color: var(--ink); }
.prev-card__radar { max-width: 360px; }

/* ---- Feature readings ------------------------------------------------- */
.readgrid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; }
.readitem { border-top: 1px solid var(--line); padding-top: 10px; }
.readitem__k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); }
.readitem__v { display: block; margin: 4px 0 4px; font-family: var(--font-head); font-size: 1.3rem; line-height: 1.1; }
.readitem__v.is-off { font-family: var(--font-ui); font-size: .95rem; color: var(--faint); }
.readitem__note { display: block; font-size: 11.8px; line-height: 1.5; color: var(--muted); }

/* ---- Ratio bars: shaded band + one dot -------------------------------- */
.bands { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 16px; }
.bandbar__top { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--muted); }
.bandbar__top b { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-weight: 500; }
.bandbar__track { position: relative; height: 6px; margin: 8px 0 6px; border-radius: var(--radius-pill);
  background: var(--ref); }
.bandbar__band { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand) 22%, transparent); }
.bandbar__dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--surface); }
.bandbar__foot { display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: 11px; color: var(--muted); }

/* ---- Harmony radar ---------------------------------------------------- */
/* The SVG is 380 user units wide and renders at 340, so a CSS font-size is
   scaled by 0.895. 15px here is 13.4px on screen — the smallest size that
   still reads at arm's length without crowding the polygon. */
.harmony { display: block; width: 100%; height: auto; }
.hr-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.hr-axis { stroke: var(--line); stroke-width: 1; }
.hr-shape { fill: color-mix(in srgb, var(--brand) 10%, transparent); stroke: var(--brand); stroke-width: 1.6; }
.hr-dot { fill: var(--brand); }
.hr-label { font-family: var(--font-mono); font-size: 15px; fill: var(--muted); }
.hr-val { font-family: var(--font-head); font-size: 18px; fill: var(--ink); }

/* ---- Ranked fixes ----------------------------------------------------- */
.move { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 18px 0;
  border-top: 1px solid var(--line); }
.move__no { font-family: var(--font-head); font-size: 1.55rem; line-height: 1; color: var(--brand); }
.move__title { margin: 0 0 2px; font-family: var(--font-head); font-size: 1.2rem; }
.move__meta { margin: 0 0 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }
.move__body p { margin: 0 0 6px; font-size: 14px; }
.move__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.move__fields div { border-top: 1px solid var(--line); padding-top: 8px; font-size: 13px; }
.move__fields span { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }

/* ---- Style decision card ---------------------------------------------- */
/* 320px, not 300: at 300 the photo column finished 35px short of the text
   column and the bottom-left corner of the card read as a hole. */
.stylecard { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 30px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.stylecard__fig { margin: 0; }
.stylecard__fig figcaption { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--faint); }
.stylecard__body .prev-card__title { margin-bottom: 6px; }
.stylecard__sub { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.stylecard__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 0 0 16px; }
.stylecard__specs dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); }
.stylecard__specs dd { margin: 2px 0 0; font-size: 14px; }
.stylecard__body p { font-size: 14px; }

/* ---- Mid-page price band ---------------------------------------------- */
/* The left column is deliberately narrower than the space available: at full
   width the copy runs short and leaves a hole under the price card. 600px of
   measure makes the steps wrap where they should and lets both columns finish
   on the same baseline. `stretch` + the auto margin pins the fine print to the
   bottom, so leftover height never pools as a gap. */
/* Measured, not guessed: at 708px of measure the copy finishes 96px short of
   the price card, so the eye reads a hole under the steps. 500px makes the
   heading break where it should and the steps wrap naturally, and the whole
   band lands within a few pixels of the card's height. The auto margin on the
   fine print absorbs whatever is left, so the two columns always finish level. */
.buyband { display: grid; grid-template-columns: minmax(0, 500px) minmax(280px, 340px);
  gap: 48px; align-items: stretch; justify-content: space-between; }
main .container.buyband { max-width: 940px; }
.buyband__text { display: flex; flex-direction: column; }
.buyband__text > .fine:last-child { margin-top: auto; padding-top: 18px; }
.buyband__text h2 { margin: 6px 0 18px; }
.buyband__steps { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 18px; }
.buyband__steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: 15px;
  line-height: 1.62; }
.buyband__no { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); font-family: var(--font-mono); font-size: 11px; }
.buyband__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; text-align: center; }
.buyband__card .eyebrow { margin-bottom: 8px; }
.buyband__sub { margin: 0 0 14px; font-size: 12.5px; color: var(--faint); }
.buyband__alt { margin: 12px 0 14px; font-size: 12.5px; color: var(--muted); }
.buyband__alt a { font-weight: 600; }
.buyband__refund { display: flex; gap: 8px; align-items: flex-start; text-align: left; margin: 0 0 16px;
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-tint);
  font-size: 12.2px; line-height: 1.45; color: var(--muted); }
.buyband__refund span { color: var(--ok); font-weight: 700; }
.buyband__card .btn { width: 100%; font-size: 14.5px; }
.buyband__card .fine { margin-top: 12px; }

/* Between 1060 and 861 there is still room for two columns — just narrower
   ones. Dropping straight to one column here turned the sample portrait into
   a 922x1300 banner and pushed every word below the fold, so the photo column
   shrinks instead and the stack only happens when a phone-width column is all
   that is left. */
@media (max-width: 1060px) {
  .buyband { grid-template-columns: 1fr; gap: 28px; }
  .prev-card__split { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
  /* `.prev-card__split` above also matches the radar card (both classes), so
     the 340px column has to be re-declared here or the chart shrinks to 220
     and its labels render at 8px. */
  .prev-card__split--radar { grid-template-columns: 340px minmax(0, 1fr); }
  .stylecard { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 860px) {
  .prev-card__split, .prev-card__split--radar, .stylecard { grid-template-columns: 1fr; }
  .prev-card__fig, .stylecard__fig { max-width: 340px; }
  /* The radar column shrink-wraps to the SVG's 300px default rather than
     stretching, so give it a width instead of relying on `max-width`. */
  .prev-card__radar { width: 100%; max-width: 380px; margin: 0 auto; }
}
@media (max-width: 620px) {
  .prev-card { padding: 18px; }
  .readgrid { grid-template-columns: 1fr; gap: 14px; }
  .move { grid-template-columns: 28px minmax(0, 1fr); }
  .move__fields { grid-template-columns: 1fr 1fr; }
  .stylecard { padding: 18px; }
  .stylecard__specs { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
}

/* The Face Report headline is long by design; 17ch would break it into four
   short lines and leave the column looking half-empty beside the buy card.
   Capped at 720px so the longer Face Report headline still wraps to the same
   two lines as the Dating Report headline — keeps the hero CTA on both report
   pages at the identical vertical position (docs: report-landing parity). */
.hero-slim__text .h1.h1--hero-wide { max-width: 720px; }

/* ---------- Prepaid AI image credits (docs/14) ----------
   Tool pages (/tools/<slug>/), the /credits/ landing and /account/credits/.
   The whole layer follows the site's layout system: no custom max-widths,
   grids sized by their real item count, chips as buttons not links. */

/* Selectable option chips (buttons, unlike the link-chips further up). */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip-row .chip { cursor: pointer; background: var(--surface); font: inherit; }
.chip-row .chip.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); font-weight: 600; }
.chip-row .chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.credit-ctrl { margin: 14px 0; }
.credit-ctrl__label { font-weight: 600; margin: 0; font-size: 14px; }
.credit-ctrl__hint { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

/* Photo preview + the generate bar. */
.credit-preview { margin-top: 16px; position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.credit-preview img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: var(--surface-tint); }
.credit-preview__x { position: absolute; top: 10px; right: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; cursor: pointer; }
.credit-preview__x:hover { border-color: var(--brand); color: var(--brand); }

.credit-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.credit-balance-chip { font-family: var(--font-mono); font-size: 12px; color: var(--ink); background: var(--surface-tint); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; }
.credit-balance-chip.is-empty { color: var(--warn); border-color: var(--warn); }

.credit-auth { margin-top: 16px; background: var(--surface-tint); }
.credit-done .chip-row { margin-top: 14px; }

.notice--info { border-left-color: var(--brand); }

/* Result gallery. */
.gen-gallery { margin-top: 22px; }
.gen-head__title { font-family: var(--font-head); font-size: 1.15rem; margin: 0; }
.gen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 14px; }
.gen-figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.gen-figure img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-tint); }
.gen-figure figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; font-size: 13px; }

/* Price card emphasis for the best-value pack. */
.card--price-best { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

/* Tools dropdown: the credits marker inside an AI tool label, and the group
   title that links to /credits/. */
.dd-credit { display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); border: 1px solid var(--brand); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.dd-group__link { color: var(--faint); text-decoration: underline; text-underline-offset: 2px; }
.dd-group__link:hover { color: var(--brand); }

/* ---- Credit tool first screen: a compact workbench (2026-11-05) ----
   Goal: photo + options + the red Generate button all inside the first
   viewport. The old stack pushed the button to y≈1100–1600. Everything here
   is scoped to .credit-page so the 22 free tools keep their roomier layout. */
/* A flex/grid declaration outranks the UA [hidden] rule, so state-driven
   hiding (upload after a photo is picked, camera box, gallery) must win here. */
.credit-page [hidden] { display: none !important; }

/* `ch` here resolves to ~5.1px, so the old 62ch/100ch caps both clamp to
   ~508px and wrap the lede into 3 lines. A pixel cap lets the short hero copy
   sit in 2 lines (and the fine print in 1) without changing the copy itself. */
.credit-page .tool-hero { padding-top: 10px; padding-bottom: 12px; }
.credit-page .tool-hero .eyebrow { margin-bottom: 6px; }
.credit-page .tool-hero .h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 6px; }
.credit-page .tool-hero .lede { max-width: 1050px; font-size: 1rem; line-height: 1.45; margin-bottom: 3px; }

.credit-page .credit-workbench-sec { padding-top: 6px; padding-bottom: 16px; }
.credit-page .credit-panel { padding: 11px 13px; }

/* One-line numbered header instead of a tall stacked heading. */
.credit-stepbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.credit-stepbar__n { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.credit-stepbar .h3 { margin: 0; font-size: 1rem; }
.credit-stepbar__hint { margin-left: auto; font-size: 11.5px; color: var(--faint); }
@media (max-width: 620px) { .credit-stepbar__hint { flex-basis: 100%; margin-left: 0; } }

/* Horizontal upload strip: icon + label + two buttons on one line. */
.credit-page .credit-panel .upload--compact { display: flex; align-items: center; gap: 14px; text-align: left; padding: 9px 12px; margin-top: 8px; }
.credit-page .upload--compact .upload__icon { width: 38px; height: 38px; margin: 0; flex: none; }
.credit-page .upload--compact .upload__copy { flex: 1 1 auto; min-width: 0; }
.credit-page .upload--compact .upload__copy h3 { font-size: 1rem; margin: 0 0 2px; }
.credit-page .upload--compact .upload__hint { margin: 0; font-size: 11.5px; }
.credit-page .upload--compact .upload__actions { display: flex; gap: 8px; margin: 0; flex: none; }
@media (max-width: 620px) {
  .credit-page .credit-panel .upload--compact { flex-wrap: wrap; }
  .credit-page .upload--compact .upload__actions { width: 100%; }
  .credit-page .upload--compact .upload__actions .btn { flex: 1; }
}

/* Privacy reassurance as one compact line, not a padded callout box. */
.credit-page .credit-privacy { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; font-size: 11px; line-height: 1.4; color: var(--muted); }
.credit-page .credit-privacy svg { flex: none; color: var(--ok); margin-top: 1px; }

/* Options: tight chips; tools with several groups use a 2-column workbench.
   `hidden` must always win — a grid declaration would otherwise override it. */
.credit-page .credit-options { margin-top: 8px; }
.credit-page .credit-options[hidden] { display: none !important; }
.credit-page .credit-options--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
.credit-page .credit-ctrl { margin: 2px 0; min-width: 0; }
/* Label + hint share one line inside a multi-group workbench; each group then
   costs one text row instead of two, which is what keeps the CTA in view. */
.credit-page .credit-ctrl__label { display: inline; font-size: 12px; margin: 0; }
.credit-page .credit-ctrl__hint { display: inline; font-size: 10.5px; margin: 0 0 0 5px; color: var(--faint); }
.credit-page .credit-ctrl__hint::before { content: "· "; }
.credit-page .credit-options--grid .chip-row { display: block; margin-top: 3px; }
.credit-page .chip-row { gap: 4px; margin-top: 4px; }
.credit-page .chip-row .chip { font-size: 11px; padding: 3px 8px; }
@media (max-width: 620px) { .credit-page .credit-options--grid { grid-template-columns: 1fr; } }

/* Generate action: balance on one compact line, full-width brand-red button. */
.credit-cta { display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin-top: 6px; }
.credit-cta .btn { width: 100%; }
.credit-page .credit-cta__balance { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.credit-page .credit-cta .credit-balance-chip { align-self: auto; width: auto; padding: 3px 10px; font-size: 11px; }
.credit-page .credit-cta #credit-balance-sub { margin: 0; font-size: 11px; text-align: center; }

/* Standing alone: the sign-in card is its own full-width section, never a
   card nested inside the upload panel (that card-in-card read as a mistake). */
.credit-page .credit-auth-sec[hidden] { display: none !important; }
.credit-page .credit-auth-sec { padding: 28px 0; }
.credit-page .credit-auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; text-align: center; }
.credit-page .credit-auth-card .eyebrow { margin-bottom: 8px; }
.credit-page .credit-auth-card .h2 { margin: 0 0 8px; }
.credit-page .credit-auth-card .fine { max-width: 62ch; margin-left: auto; margin-right: auto; }
.credit-page .credit-auth-card .btn { min-width: 240px; }

/* The right-hand column is supporting copy — keep it tight so it never
   visually outweighs the workbench. */
.credit-page .credit-aside { padding: 13px; }
.credit-page .credit-aside__list { display: grid; gap: 12px; list-style: none; padding: 0; }
.credit-page .credit-aside__list li { display: flex; flex-direction: column; gap: 2px; }
.credit-page .credit-aside__list li strong { font-size: 14.5px; color: var(--ink); }
.credit-page .credit-aside__list li span { font-size: 13px; line-height: 1.45; color: var(--muted); }
.credit-page .credit-aside .divider { margin: 16px 0; }
.credit-page .credit-aside .fine { font-size: 12.5px; line-height: 1.5; }

/* Req4 (photo-audit / decision tools): equal-height two-panel workbench so the
   left upload and right "What you get" align at the bottom instead of the
   right running long; the upload slot grows to fill, reading as a taller drop
   zone; the right copy is tightened so the whole module stays on the first
   screen and never visually outweighs the workbench. */
.credit-page .tool-layout { align-items: stretch; }
.credit-page .tool-layout > div { display: flex; }
.credit-page .tool-layout > div > .panel { flex: 1; display: flex; flex-direction: column; }
.credit-page #decision-slots { flex: 1 1 auto; min-height: 236px; margin-top: 10px; }
.credit-page .credit-aside__list { gap: 7px; }
.credit-page .credit-aside__list li strong { font-size: 13.5px; }
.credit-page .credit-aside__list li span { font-size: 12px; line-height: 1.26; }
.credit-page .credit-aside .divider { margin: 9px 0; }

/* Bottom match: both columns are stretched to the same height, so pin each
   column's action button to its own bottom edge and give both the same height
   and the same bottom padding. The two buttons then share one baseline no
   matter how much copy each column carries. */
.credit-page .credit-aside { display: flex; flex-direction: column; padding: 13px 13px 11px; }
.credit-page .credit-aside .btn { margin-top: auto; width: 100%; min-height: 50px; }
.credit-page .credit-cta { margin-top: auto; }
/* An empty status line must not reserve height under the workbench; it sits
   above the CTA now, so any message grows upward and never shifts the button. */
.credit-page #decision-note { margin: 0; min-height: 0; }
.credit-page #decision-note:not(:empty) { margin: 6px 0 0; }

/* Three short "what else you get" lines fill the supporting column so it does
   not read as a half-empty box next to the workbench. */
.credit-page .credit-aside__inc { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.credit-page .credit-aside__inc li { position: relative; padding-left: 15px; font-size: 11.5px; line-height: 1.36; color: var(--muted); }
.credit-page .credit-aside__inc li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-size: 11px; }

/* The single most important pre-purchase fact — the credit cost — lives in a
   full-width banner above the workbench so it is impossible to miss. */
.credit-page .decision-cost-banner { display: flex; align-items: center; gap: 18px; background: var(--brand-soft); border: 1.5px solid var(--brand); border-radius: var(--radius); padding: 10px 16px; margin-bottom: 8px; }
.credit-page .decision-cost-banner__num { flex: none; font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; line-height: 1; color: #fff; background: var(--brand); border-radius: var(--radius-sm); padding: 7px 14px; letter-spacing: -.01em; }
.credit-page .decision-cost-banner__txt { margin: 0; font-size: 14px; line-height: 1.34; color: var(--ink); }
.credit-page .decision-cost-banner__txt strong { color: var(--brand-dark); }
.credit-page .decision-cost-banner__txt a { color: var(--brand); font-weight: 700; white-space: nowrap; }
@media (max-width: 620px) {
  .credit-page .decision-cost-banner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .credit-page .decision-cost-banner__num { font-size: 1.4rem; }
}

/* Privacy reassurance moved to the bottom of the module — a small supporting
   line, never a prime-position callout. */
.credit-page .credit-privacy--bottom { display: flex; align-items: flex-start; gap: 8px; margin: 20px auto 0; max-width: 820px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.credit-page .credit-privacy--bottom svg { flex: none; color: var(--ok); margin-top: 1px; }
.credit-page .credit-privacy--bottom strong { color: var(--ink); }

/* Four-step "How it works": one row of four on desktop. Scoped with three
   classes so no later/older .steps rule can strand step 4 on its own row. */
.credit-page .steps.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.credit-page .steps.steps--4 .step { padding: 18px; }
.credit-page .steps.steps--4 .step::before { margin-bottom: 10px; }
.credit-page .steps.steps--4 .step h3 { font-size: 1.05rem; }
.credit-page .steps.steps--4 .step p { font-size: 12.5px; line-height: 1.45; }
@media (max-width: 900px) { .credit-page .steps.steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .credit-page .steps.steps--4 { grid-template-columns: minmax(0, 1fr); } }
/* Keep the shared modifier working for any non-.credit-page consumer. */
.steps.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Mid-page recharge card — sits between the tool and the bottom strip. */
.credit-upsell { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 28px; }
.credit-upsell .eyebrow { color: var(--brand); }
.credit-upsell .lede { max-width: 56ch; margin-left: auto; margin-right: auto; }
.credit-upsell__actions { max-width: 420px; margin: 18px auto 0; }
.credit-upsell__actions .btn { width: 100%; }

/* Admin / account small-print values. */
.stat__value--sm { font-size: 1.05rem; word-break: break-all; }

/* ==========================================================================
   Accounts + post-purchase "keep your report" (docs/30)
   ========================================================================== */
/* Two equal choices, neither of them a wall: email the links, or create an
   optional account. The bookmark line stays the loudest sentence. */
.rep-save { margin-top: 18px; padding: 18px; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--radius); }
.rep-save .rep-keep { margin: 0 0 10px; max-width: none; background: none;
  border-left: 0; padding: 0; font-size: 13.5px; }
.rep-save__lede { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 14px; }
.rep-save__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rep-save__opt { display: flex; flex-direction: column; background: var(--surface-tint);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.rep-save__opt h3 { font-family: var(--font-ui); font-size: 14px; font-weight: 650; margin: 0 0 6px; }
.rep-save__opt .fine { margin: 0 0 12px; line-height: 1.5; }
/* Equal-height cards should also put their buttons on the same baseline. */
.rep-save__opt .btn { width: 100%; margin-top: auto; }
.rep-save__opt .form__note { margin: 8px 0 0; font-size: 12px; }
@media (max-width: 620px) { .rep-save__grid { grid-template-columns: 1fr; } }

/* Sign-in / sign-up: hkzhuna-style two-mode form. The honeypot is off-screen,
   never display:none (some bots skip hidden fields). */
.auth-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth-links { font-size: 13.5px; color: var(--muted); }
.auth-links a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.auth-fallback { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; background: var(--surface); }
.auth-fallback summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.auth-fallback[open] summary { margin-bottom: 10px; }
.auth-fallback .form--capture { margin: 12px 0 0; }
.btn-link { border: 0; background: none; padding: 0; font: inherit; color: var(--brand);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.btn-link:hover { color: var(--brand-dark); }
/* Auth card: constrain the Google button + email form to one equal, centered
   column so the two CTAs are the same width and never over-long. */
.auth-shell { max-width: 440px; margin: 0 auto; }
.auth-card { margin: 0; }
.g-ico { width: 18px; height: 18px; flex: 0 0 auto; display: block; }
.g-btn { font-weight: 500; }

/* ==========================================================================
   Measurement tools: pupillary distance + eyebrow mapping (docs/32)
   They show a measured line, not a Score — so they get their own result
   rather than borrowing .fr-* score panels.
   ========================================================================== */
.geo-result { padding-top: 4px; }
.geo-head h2 { margin: 6px 0 8px; }
.geo-head .lede { font-size: 15px; line-height: 1.6; color: var(--muted); }
.geo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px; align-items: start; margin-top: 22px; }
.geo-figure { margin: 0; min-width: 0; }
.geo-figure img { width: 100%; display: block; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--ref); }
.geo-figure figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.geo-panel { min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; }
.geo-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); font-weight: 650; margin: 0 0 6px; }
.geo-big { font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-variant-numeric: tabular-nums; font-size: 2.35rem; line-height: 1.1;
  font-weight: 650; color: var(--ink); margin: 0 0 8px; }
.geo-big span { font-family: var(--font-ui); font-size: .82rem; font-weight: 500;
  color: var(--muted); margin-left: 8px; }
.geo-panel .table { font-size: 12.5px; }
.geo-panel .table th { text-align: left; }
.geo-panel .notice { margin-top: 14px; }
.geo-scale { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.geo-scale h3 { font-size: 15px; margin: 0 0 6px; }
.geo-scale .field { margin-top: 12px; }
.geo-scale input[type="range"] { width: 100%; accent-color: var(--brand); }
.geo-scale .check { font-size: 13.5px; }
.geo-scale .mono { font-size: 12px; color: var(--muted); }
.geo-mm { display: flex; flex-direction: column; gap: 2px; margin-top: 14px;
  background: var(--brand-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; }
.geo-mm__num { font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 1.5rem; font-weight: 650; color: var(--brand-dark); }
.geo-notes { margin-top: 26px; background: var(--surface-tint);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.geo-notes h3 { font-size: 15px; margin: 0 0 10px; }
.geo-notes ul { margin: 0; padding-left: 20px; font-size: 13px;
  color: var(--muted); line-height: 1.6; }
.geo-notes li + li { margin-top: 6px; }
@media (max-width: 860px) { .geo-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   AI decision tools + free Dating Profile & Progress board (docs/14 §4.7).
   Decision pages carry .credit-page too, so they inherit the compact hero,
   standalone sign-in card, red CTA, four-step row and the [hidden] guard.
   Only N-photo slots, the structured result and the score curve are new.
   ========================================================================== */
.decision-page .decision-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.decision-page .decision-slots[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.decision-slot { position: relative; cursor: pointer; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--surface); transition: border-color .15s, background .15s; display: flex; flex-direction: column; min-height: 160px; }
.decision-slot:hover, .decision-slot.is-drag { border-color: var(--brand); background: var(--brand-soft); }
.decision-slot.has-photo { border-style: solid; }
.decision-slot input[type="file"] { display: none; }
.decision-slot__head { display: flex; align-items: center; gap: 9px; }
.decision-slot__n { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.decision-slot__label { margin: 0; font-size: 13.5px; font-weight: 700; }
.decision-slot__hint { margin: 0; font-size: 10.5px; color: var(--faint); }
.decision-slot__preview { margin-top: 10px; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.decision-slot__preview img { display: block; max-height: 150px; max-width: 100%; border-radius: var(--radius-sm); object-fit: contain; }
.decision-slot__state { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; color: var(--faint); text-align: center; padding: 4px 6px; line-height: 1.4; }
.decision-slot__icon { width: 28px; height: 28px; color: var(--brand); opacity: .65; }
.decision-slot.has-photo .decision-slot__state { position: absolute; bottom: 8px; left: 12px; font-size: 10px; background: var(--surface); padding: 2px 6px; border-radius: 4px; flex-direction: row; gap: 4px; }
.decision-slot.has-photo .decision-slot__icon { display: none; }

/* Two-slot tools (Photo Duel, Progress Check) get a centre divider */
.decision-page .decision-slots--dual { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.decision-slots__vs { display: grid; place-items: center; }
.decision-slots__vs span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 12px; box-shadow: 0 2px 6px rgba(190,24,93,.25); }
.decision-page .decision-options { margin-top: 10px; }

/* Structured analysis result */
.decision-result { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); }
.decision-result h3 { font-size: 1rem; margin: 16px 0 8px; }
.decision-result .gen-head { margin-bottom: 12px; }
.decision-result .notice { margin: 10px 0; }
.decision-bars { display: grid; gap: 12px; }
.decision-bar__head { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; }
.decision-bar__head b { font-family: var(--font-mono); color: var(--brand-dark); }
.decision-bar__track { height: 7px; border-radius: 999px; background: var(--surface-tint); border: 1px solid var(--line); overflow: hidden; margin-top: 4px; }
.decision-bar__track i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.decision-note { margin: 5px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.decision-note strong { color: var(--ink); }
.decision-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 6px; }
.decision-result ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.decision-fixes { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.decision-fixes li { margin-bottom: 8px; }
.decision-fixes strong { display: block; color: var(--ink); }
.decision-fixes span, .decision-fixes em { display: block; color: var(--muted); font-size: 11.5px; }
.decision-verdict { text-align: center; padding: 14px; background: var(--brand-soft); border-radius: var(--radius-sm); margin-bottom: 14px; }
.decision-verdict .eyebrow { margin-bottom: 4px; }
.decision-verdict h3 { margin: 0; font-size: 1.35rem; }
.decision-delta { font-family: var(--font-mono); font-size: 2.2rem; line-height: 1; color: var(--brand-dark); }
.decision-delta.is-down { color: var(--muted); }
.decision-details { margin-top: 14px; font-size: 12.5px; }
.decision-details summary { cursor: pointer; color: var(--brand-dark); }
.decision-details .decision-bars { margin-top: 12px; }
.decision-writes { display: grid; gap: 10px; }
.decision-write { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.decision-write .eyebrow { margin-bottom: 5px; }
.decision-write__text { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; }
.decision-write .btn { margin-top: 6px; }
.decision-summary { margin-top: 14px; border-left: 3px solid var(--brand); padding: 8px 12px; background: var(--surface-tint); font-size: 12.5px; line-height: 1.5; }
.decision-summary p { margin: 0; }
.decision-caution { margin-top: 12px; }
.decision-saved { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--brand-soft); font-size: 12.5px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Photo Duel head-to-head result: both photos, a winner badge, a VS divider */
.duel-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 6px; }
.duel-side { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-tint); aspect-ratio: 1 / 1; }
.duel-side img { display: block; width: 100%; height: 100%; object-fit: cover; }
.duel-side__empty { display: grid; place-items: center; height: 100%; font-size: 11px; color: var(--faint); }
.duel-side figcaption { position: absolute; top: 8px; left: 8px; background: rgba(20,20,25,.62); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.duel-side.is-loser { opacity: .8; }
.duel-side.is-winner { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.duel-badge { position: absolute; bottom: 8px; right: 8px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 999px; letter-spacing: .02em; }
.duel-badge--tie { background: var(--muted); }
.duel-vs { font-family: var(--font-mono); font-weight: 800; color: var(--brand-dark); font-size: 14px; }

/* Free progress board */
.progress-dashboard { margin-top: 8px; }
.progress-chart { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--surface); }
.progress-chart__svg { display: block; width: 100%; height: auto; }
.progress-chart__grid { stroke: var(--line); stroke-width: 1; }
.progress-chart__tick { fill: var(--faint); font-size: 11px; font-family: var(--font-mono), ui-monospace, monospace; }
.progress-chart__legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.progress-chart__key { display: inline-flex; align-items: center; gap: 5px; }
.progress-chart__key i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.progress-timeline { list-style: none; padding: 0; margin: 0; }
.progress-timeline li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.progress-timeline__date { flex: none; width: 96px; font-size: 11.5px; color: var(--faint); }
.progress-timeline__body { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.progress-timeline__body .fine { margin: 2px 0 0; }
.progress-timeline__score { flex: none; text-align: right; min-width: 78px; }
.progress-timeline__score b { display: block; font-family: var(--font-mono); font-size: 1.25rem; color: var(--brand-dark); }
.progress-timeline__delta { font-size: 11px; color: var(--muted); }
.progress-timeline__delta.is-up { color: var(--ok); }
.progress-timeline__delta.is-down { color: var(--muted); }
@media (max-width: 620px) {
  .decision-page .decision-slots, .decision-cols { grid-template-columns: minmax(0, 1fr); }
  .decision-cols { gap: 8px; }
  .decision-slots__vs { padding: 4px 0; }
  .duel-head { grid-template-columns: 1fr; }
  .duel-vs { padding: 4px 0; text-align: center; }
  .progress-timeline li { flex-wrap: wrap; gap: 6px; }
  .progress-timeline__date { width: 100%; }
}

/* ==========================================================================
   CH-01 at-a-glance, reference-band placement, included visuals, palettes
   and hairstyle decision cards (docs/33 / docs/34 / docs/35).
   All widths come from the container they sit in — no new max-width values.
   ========================================================================== */
.rep-glance { padding: 40px 0 8px; border-bottom: 1px solid var(--line); background: var(--surface); }
.rep-glance .rep-ch__no { margin-bottom: 6px; }
.rep-glance h2 { margin: 0 0 18px; }
.glance__lede { font-size: 1.02rem; color: var(--muted); margin: 0 0 22px; }
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 18px; }
.glance__item { display: flex; flex-direction: column; gap: 5px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.glance__item--brand { border-color: var(--brand); background: var(--brand-soft); }
/* Seven facts, three columns: the last card is the only instruction in the
   block, so it takes the row it would otherwise sit alone in. */
.glance__item--wide { grid-column: 1 / -1; }
.glance__item--wide .glance__note { max-width: 64ch; }
.glance__label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.glance__value { font-family: var(--font-head); font-size: 1.18rem; line-height: 1.25; color: var(--ink); }
.glance__item--brand .glance__value { color: var(--brand-dark); }
.glance__note { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* One to three concepts: a cap of 300px keeps a single Face concept from
   becoming a full-width poster, and lets three sit on one row inside the
   report's 840 measure instead of leaving an orphan on row two. */
.vis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); justify-items: center; gap: 14px; margin: 0 0 20px; }
.vis-card { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); width: 100%; max-width: 300px; }
.vis-card__frame { position: relative; background: var(--surface-tint); aspect-ratio: 4 / 5; display: flex; }
.vis-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vis-card img[hidden] { display: none; }
/* The frame states its own status instead of rendering a broken image while
   the concept does not exist yet. Same 4:5 box, so nothing jumps on load. */
.vis-ph { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; width: 100%; padding: 24px; text-align: center; color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(23,23,26,.022) 14px 28px); }
.vis-ph b { font-family: var(--font-head); font-size: .98rem; font-weight: 600; color: var(--ink); }
.vis-ph small { font-size: 12px; line-height: 1.55; max-width: 26ch; }
.vis-ph[hidden] { display: none; }
.vis-card figcaption { padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.vis-card figcaption strong { color: var(--ink); }
.vis-consent { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-tint); margin: 0 0 18px; }
.vis-consent__check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--ink); cursor: pointer; }
.vis-consent__check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.vis-consent .btn { justify-self: start; }
.vis-consent .form__note { margin: 0; }

.sw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 18px; }
.sw { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12.5px; background: var(--surface); }
.sw__chip { flex: none; width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08); }
.sw span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw .mono { flex: none; font-size: 11px; color: var(--faint); }

.cut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 0 0 18px; }
.cut-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cut-card h3 { margin: 6px 0 8px; font-size: 1.1rem; }
.cut-card > p { font-size: 13px; color: var(--muted); }
.cut-card .plan-fields { margin-top: 12px; }
@media (max-width: 620px) {
  .glance, .vis-grid, .sw-grid, .cut-grid { grid-template-columns: minmax(0, 1fr); }
  .rep-glance { padding-top: 28px; }
}

/* ---- Homepage: hero paid-entry band ---- */
.hero-upload__foot { margin: 10px 0 0; font-size: 11.5px; text-align: center; color: var(--faint); }
.hero-upload__foot a { color: var(--muted); }
.hero-band { background: var(--brand-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; }
.hero-band .eyebrow { text-align: center; }
.hero-band .h2 { text-align: center; margin-bottom: 6px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.hero-band .lede--section { text-align: center; max-width: 660px; margin-left: auto; margin-right: auto; font-size: 0.95rem; line-height: 1.45; }
.hero-band__trio { margin-top: 14px; }

/* ---- Homepage: "what the report gives you" preview ---- */
.rp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rp-card { display: flex; flex-direction: column; }
.rp-card__media { margin: 14px 0 16px; border-radius: 12px; background: #EDE6DB; padding: 14px; display: grid; place-items: center; height: 340px; }
.rp-radar { width: 100%; height: 100%; max-width: none; }
.rp-radar__grid polygon { fill: none; stroke: var(--line); stroke-width: 1; }
.rp-radar__grid line { stroke: var(--line); stroke-width: 1; }
.rp-radar__data { fill: rgba(190,24,93,.16); stroke: var(--brand); stroke-width: 2; }
.rp-radar__labels text { font: 600 9px var(--font-mono); fill: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rp-radar__val { font: 700 9.5px var(--font-head); fill: var(--brand-dark); }
.rp-card h3 { margin-bottom: 8px; }
.rp-plan { list-style: none; padding: 0; margin: 0 0 8px; flex: 1 1 auto; }
.rp-plan li { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.rp-plan li:last-child { border-bottom: 0; }
.rp-plan b { color: var(--ink); font-family: var(--font-head); }
.rp-plan span { color: var(--muted); font-size: 13px; }
.rp-sample { display: inline-block; margin-top: 4px; font: 600 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-dark); background: var(--brand-soft); padding: 3px 8px; border-radius: 999px; }

/* ---- Card media (AI transform before/after) ---- */
.card__media { position: relative; margin: -24px -24px 16px; aspect-ratio: 2 / 3; overflow: hidden; background: #EDE6DB; border-radius: var(--radius) var(--radius) 0 0; }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__media .pair__tag { left: 9px; top: 9px; }
.card__media .pair__tag--after { left: auto; right: 9px; }
.card__media--pair { padding: 0; }
.card__media--pair .pair__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 100%; border-radius: 0; background: var(--line); }
.card__media--pair .pair__imgs img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* In the 2-up AI tool cards the image area must stay short (near-square
   before/after halves), otherwise the 2:3 base ratio makes it ~810px tall. */
.card--tool .card__media { aspect-ratio: 2 / 1; }
/* 5th AI tool: horizontal "premium" card — text left, symmetric pair right. */
.tool-card--premium.card--tool { display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: stretch; background: #15151A; border: none; color: #fff; padding: 0; overflow: hidden; }
.tool-card--premium.card--tool:hover { border: none; transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,.30); }
.tool-card--premium .tool-premium__text { padding: 32px 34px; display: flex; flex-direction: column; justify-content: center; }
.tool-card--premium .card__title { color: #fff; font-size: 1.5rem; margin-bottom: 12px; }
.tool-card--premium .card__desc { color: rgba(255,255,255,.76); margin-bottom: 22px; flex: 0 0 auto; }
.tool-card--premium .card__link { color: #FF8FBB; }
.tool-card--premium .tool-premium__media { position: relative; min-height: 280px; }
.tool-card--premium .card__media--pair { margin: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
.tool-card--premium .card__media--pair .pair__imgs { height: 100%; }
@media (max-width: 760px) {
  .tool-card--premium.card--tool { grid-template-columns: 1fr; }
  .tool-card--premium .tool-premium__media { min-height: 220px; }
}
/* In the report-preview trio the visual sits below the heading (not bleeding
   to the card's top corners) so all three card titles align on one line. */
.rp-card .card__media { margin: 14px 0 16px; border-radius: 12px; height: 340px; }

@media (max-width: 900px) { .rp-grid { grid-template-columns: minmax(0, 1fr); } }