/* ═══════════════════════════════════════════════════════════════════
   SELFYDE — design system
   Reference: tech-noir scan interface. Near-black, mono caps, thin HUD.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* palette — monochrome with a cold blue undertone */
  --bg-0: #06080b;
  --bg-1: #0a0d12;
  --bg-2: #10141b;
  --ink: #e7eaef;
  --ink-dim: #8d95a3;
  --ink-faint: #4d5462;
  --line: rgba(231, 234, 239, 0.09);
  --line-strong: rgba(231, 234, 239, 0.22);
  --glow: #cfe0ff;

  /* type */
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ls-label: 0.22em;
  --ls-head: 0.06em;

  --max-w: 1200px;
  --pad: clamp(20px, 4vw, 48px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Project rule: nothing may be wider than the screen. Two defences applied
   once, globally, instead of chasing each offender after it is spotted.
   1. Media never exceeds its container, whatever its intrinsic size.
   2. Grid and flex children default to min-width:auto, which means they
      refuse to shrink below their own content — that single default is what
      makes a page wider than the phone and clips every line on it, since
      body carries overflow-x:hidden and the excess is cut rather than
      scrolled. */
img, canvas, svg, video { max-width: 100%; }
.scan-grid > *, .wrap > *, .readout__head > *, .progress__head > * { min-width: 0; }

/* A class-level `display` beats the UA `[hidden] { display: none }` rule —
   without this, the scan views stack on top of each other. */
[hidden] { display: none !important; }

/* Visually hidden but still rendered: Safari can refuse to open the file
   picker for a display:none input. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* faint blueprint grid + vignette over the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 140px 140px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 30%, transparent 100%);
  opacity: 0.5;
}

::selection { background: rgba(207, 224, 255, 0.25); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ── primitives ─────────────────────────────────────────────────── */

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  position: relative;
  z-index: 1;
}

.label {
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}

.label--slash::before { content: "/"; margin-right: 2px; color: var(--ink-faint); }

h1, h2, h3 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-head);
  line-height: 1.18;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 34px;
  border: 1px solid var(--line-strong);
  background: rgba(231, 234, 239, 0.03);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.btn::after { content: "→"; transition: transform 0.25s; }
.btn:hover {
  background: var(--ink);
  color: var(--bg-0);
  border-color: var(--ink);
}
.btn:hover::after { transform: translateX(5px); }

.btn--solid { background: var(--ink); color: var(--bg-0); border-color: var(--ink); }
.btn--solid:hover { background: var(--glow); border-color: var(--glow); }

.btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

/* corner brackets, HUD-style */
.corners { position: relative; }
.corners::before, .corners::after,
.corners > .c::before, .corners > .c::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--line-strong);
}
.corners::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.corners::after { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.corners > .c::before { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.corners > .c::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ── nav ────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.nav.is-scrolled {
  background: rgba(8, 10, 14, 0.96);
  border-color: var(--line);
}
.nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* A flex item refuses to shrink below its longest word unless told otherwise.
   Without this the header is as wide as its widest word demands, and on a
   phone that makes the whole page wider than the screen — which clips every
   line on it at the right edge, not just the header. */
.nav__inner > * { min-width: 0; }
.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  font-size: 14px;
}
.nav__logo svg { display: block; }
.nav__links { display: flex; gap: 28px; }
.nav__links .label { transition: color 0.2s; }
.nav__links .label:hover { color: var(--ink); }
.nav__cta {
  padding: 10px 20px;
  font-size: 11px;
}

/* ── hero ───────────────────────────────────────────────────────── */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 65% 40%, #0e1420 0%, var(--bg-0) 65%);
}

#hud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.9;
  /* The mesh is centred right of the copy; without this fade its lines and
     telemetry labels run through the headline and make it unreadable. */
  -webkit-mask-image: linear-gradient(to right, transparent 32%, #000 58%);
  mask-image: linear-gradient(to right, transparent 32%, #000 58%);
}

/* No room to sit beside the copy — the mesh gets its own band above it,
   so the animation stays visible and the headline stays readable. */
@media (max-width: 900px) {
  #hud {
    inset: 0 0 auto 0;
    height: 300px;
    opacity: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
}

.hero__meta-l, .hero__meta-r {
  position: absolute;
  top: 104px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__meta-l { left: var(--pad); }
.hero__meta-r { right: var(--pad); text-align: right; }

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 210px var(--pad) 90px;
  width: 100%;
}

.hero h1 {
  font-size: clamp(28px, 4.6vw, 62px);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (max-width: 640px) { .hero h1 { white-space: normal; } }
.hero h1 .dim { color: var(--ink-dim); }

.hero__sub {
  margin-top: 28px;
  max-width: 52ch;
  color: var(--ink-dim);
  font-size: 15px;
}

.hero__actions {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.hero__actions .ghost {
  font-size: 12px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  transition: color 0.2s;
}
.hero__actions .ghost:hover { color: var(--ink); }

.hero__trust {
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.hero__ticker {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: rgba(8, 10, 14, 0.9);
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.hero__ticker span { display: inline-block; padding-right: 64px; }
.hero__ticker .row { display: inline-block; animation: ticker 40s linear infinite; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── sections ───────────────────────────────────────────────────── */

.section {
  padding: clamp(80px, 12vh, 140px) 0;
  border-top: 1px solid var(--line);
  position: relative;
}

.section__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.section__num {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: var(--ls-label);
}
.section h2 { font-size: clamp(22px, 3vw, 34px); }

/* method cards */
.method {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.method__card {
  background: var(--bg-1);
  padding: 40px 32px 48px;
  position: relative;
  transition: background 0.3s;
}
.method__card:hover { background: var(--bg-2); }
.method__card .idx {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: var(--ls-label);
}
.method__card h3 {
  margin: 18px 0 14px;
  font-size: 17px;
  letter-spacing: 0.14em;
}
.method__card p { color: var(--ink-dim); font-size: 14px; }

/* report index */
.report {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.report__list { border-top: 1px solid var(--line); }
.report__row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.report__row .num { color: var(--ink-faint); font-size: 11px; min-width: 24px; }
.report__row .name { flex: 1; }
.report__row .tag {
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
}
.report__row .tag--free { color: var(--glow); border-color: rgba(207, 224, 255, 0.4); }
.report__row--locked { color: var(--ink-dim); }

.report__panel {
  position: sticky;
  top: 100px;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  padding: 36px 32px;
}
.report__panel .price {
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 10px 0 4px;
}
.report__panel .price small { font-size: 14px; color: var(--ink-dim); letter-spacing: 0.14em; }
.report__panel ul {
  list-style: none;
  margin: 24px 0 30px;
  display: grid;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-dim);
}
.report__panel li::before { content: "— "; color: var(--ink-faint); }
.report__panel .btn { width: 100%; justify-content: center; }

/* sample excerpt terminal */
.excerpt {
  margin-top: clamp(48px, 7vh, 80px);
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 36px clamp(24px, 4vw, 48px);
  position: relative;
}
.excerpt .label { margin-bottom: 20px; display: block; }
.excerpt blockquote {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.75;
  color: var(--ink);
  max-width: 68ch;
}
.excerpt blockquote em { color: var(--ink-dim); font-style: normal; }

/* proof */
.proof__intro {
  max-width: 56ch;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 44px;
}
.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.proof__card {
  background: var(--bg-1);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.proof__q {
  font-size: 42px;
  line-height: 1;
  color: var(--glow);
  opacity: 0.32;
  margin-bottom: 10px;
}
.proof__card p { font-size: 14px; color: var(--ink); line-height: 1.7; }
.proof__card .who {
  margin-top: auto;
  padding-top: 22px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.proof__card .who::before { content: "/ "; color: var(--ink-faint); }

/* research */
.research__intro {
  max-width: 68ch;
  color: var(--ink-dim);
  font-size: 14px;
  margin: -28px 0 44px;
}
.research__list { border-top: 1px solid var(--line); }
.research__row {
  display: grid;
  grid-template-columns: 178px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s;
}
.research__row:hover { background: var(--bg-1); }

/* institution mark — HUD seal, same language as the hero scan rings */
.research__mark {
  display: flex;
  align-items: center;
  gap: 13px;
}
.seal {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  color: var(--ink-dim);
  transition: color 0.3s;
}
.seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.seal .arc {
  fill: none;
  stroke: var(--glow);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 26 200;
  transform-origin: 24px 24px;
  opacity: 0;
  transition: opacity 0.3s;
}
.seal b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding-left: 0.04em;
}
.research__row:hover .seal { color: var(--ink); }
.research__row:hover .seal .arc {
  opacity: 1;
  animation: sealSpin 2.6s linear infinite;
}
@keyframes sealSpin { to { transform: rotate(360deg); } }

.research__row .inst {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.2em;
  color: var(--glow);
  text-transform: uppercase;
}
.research__row .finding { font-size: 14px; line-height: 1.6; }
.research__row .src {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.research__row .view {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color 0.2s;
}
.research__row .view:hover { color: var(--ink); }
.research__note {
  margin-top: 28px;
  font-size: 11px;
  color: var(--ink-faint);
  max-width: 78ch;
  line-height: 1.8;
}
@media (max-width: 900px) {
  .research__row { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .research__row .view { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .research__row:hover .seal .arc { animation: none; }
}

/* faq */
.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-faint); font-size: 18px; }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 4px 26px; color: var(--ink-dim); font-size: 14px; max-width: 64ch; }

/* final cta */
.final {
  text-align: center;
  padding: clamp(90px, 14vh, 160px) 0;
}
.final h2 { font-size: clamp(26px, 4vw, 46px); max-width: 20ch; margin: 0 auto 36px; }

/* footer */
.footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 56px;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.footer .disclaimer { max-width: 62ch; line-height: 1.8; }
.footer nav { display: flex; gap: 22px; }
.footer nav a:hover { color: var(--ink-dim); }
.footer__links { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
@media (max-width: 900px) {
  .footer__links { align-items: flex-start; }
}

/* ── scan page ──────────────────────────────────────────────────── */

.scan-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 0 80px;
}
.scan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* Desktop keeps the two-column look: copy and form on the left, picker on the
   right spanning both rows. On a phone the same three blocks simply stack in
   the order they are written — heading, picker, form — so the first thing on
   screen is the thing to do. */
.scan-intro { grid-column: 1; grid-row: 1; }
.scan-form  { grid-column: 1; grid-row: 2; }
.scan-drop  { grid-column: 2; grid-row: 1 / 3; }
.dropzone {
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--line-strong);
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, background 0.25s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--glow); background: var(--bg-2); }
.dropzone .cross { font-size: 26px; color: var(--ink-faint); }
.dropzone img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) contrast(1.05);
}
.dropzone .scanline {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--glow), transparent);
  opacity: 0;
  box-shadow: 0 0 24px 4px rgba(207, 224, 255, 0.4);
}
.dropzone.has-img .scanline { opacity: 1; animation: sweep 2.8s ease-in-out infinite; }
@keyframes sweep { 0%,100% { top: 4%; } 50% { top: 96%; } }

/* Once the face crop exists the preview stops being decoration: it is the
   picture that gets uploaded, so it is shown whole and untreated — no cover
   cropping, no grayscale. */
.dropzone.is-crop img {
  object-fit: contain;
  filter: none;
  background: var(--bg-0);
}
.crop-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-dim);
}
.crop-note--error { color: var(--ink); }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 26px 0;
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.7;
}
/* The one checkbox on the site, and the gate in front of the whole product.
 *
 * It used to be a native box with accent-color, which on this dark page draws a
 * pale filled square when unchecked and the same pale square with a small tick
 * when checked: at 13px the two states are indistinguishable, so people could
 * not tell whether they had agreed. The box is drawn here instead, at exactly
 * the 13px the native control measured, so nothing around it moves. Unchecked
 * is a dark well with a visible edge; checked is a filled accent square with a
 * dark tick, which is the same accent the selected pricing card and the badges
 * already use. */
.consent input {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  margin: 4px 0 0;
  position: relative;
  border: 1.5px solid var(--ink-dim);
  border-radius: 3px;
  background: var(--bg-2);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.consent input:hover { border-color: var(--ink); }
.consent input:checked {
  background: var(--glow);
  border-color: var(--glow);
}
/* The tick: two borders of a rotated box. Drawn rather than shipped as an
   image so it stays crisp at any pixel density. */
.consent input:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 3.5px;
  height: 7px;
  border: solid var(--bg-0);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.consent input:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}

.scan-status {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  min-height: 18px;
}

/* ── scan theater ───────────────────────────────────────────────── */

.scan-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.scan-stage img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.08) brightness(0.85);
}
.scan-stage canvas { position: absolute; inset: 0; }

.progress { margin-bottom: 22px; }
.progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
}
.progress__pct {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--glow);
}
.progress__track {
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 0;
  background: var(--glow);
  box-shadow: 0 0 12px rgba(207, 224, 255, 0.6);
  transition: width 0.4s linear;
}
.scan-log {
  font-size: 11px;
  line-height: 2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  min-height: 110px;
}
.scan-log div:first-child { color: var(--ink-dim); }
.scan-note {
  margin-top: 22px;
  font-size: 12px;
  color: var(--ink-faint);
  max-width: 44ch;
  line-height: 1.8;
}

/* ── result / report ────────────────────────────────────────────── */

.result-page { padding-top: 120px; }

.result-head {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-bottom: 34px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.result-head__photo {
  width: 92px; height: 92px;
  flex: none;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  filter: grayscale(0.5) contrast(1.05);
}
.result-head__title {
  font-size: clamp(20px, 2.6vw, 30px);
  margin: 10px 0 8px;
}
.result-head__sub { font-size: 12px; color: var(--ink-dim); letter-spacing: 0.08em; }

.rsec { margin-bottom: 40px; max-width: 74ch; }
.rsec h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 15px;
  letter-spacing: 0.16em;
  margin-bottom: 16px;
}
.rsec__n { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.2em; }
.rsec p { margin-bottom: 14px; color: var(--ink-dim); }
.rsec p strong { color: var(--ink); font-weight: 700; }
.rsec--hero p { color: var(--ink); font-size: 16px; line-height: 1.8; }

.frag-head { display: block; margin: 6px 0 18px; }
.frag {
  border-left: 1px solid var(--line-strong);
  padding: 4px 0 4px 22px;
  margin-bottom: 22px;
  max-width: 70ch;
}
.frag p { font-size: 15px; line-height: 1.8; color: var(--ink); }
.frag__src { display: block; margin-top: 10px; }

/* paywall */
.paywall {
  margin-top: 44px;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  padding: 32px clamp(20px, 3vw, 40px) 34px;
}
.lock-list { margin: 20px 0 30px; border-top: 1px solid var(--line); }
.lock {
  display: grid;
  grid-template-columns: 30px minmax(0, auto) 1fr 20px;
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lock__n { font-size: 11px; color: var(--ink-faint); }
.lock__blur {
  height: 8px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(231, 234, 239, 0.16) 0 38px,
    transparent 38px 46px
  );
  filter: blur(2.5px);
  opacity: 0.65;
}
.lock__icon { font-size: 11px; opacity: 0.45; text-align: right; }

/* pricing tiers — product-plan.md §5 */
.pricing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 22px 0 26px;
}
/* A card for a tier the engine did not describe is hidden by scan.js, and
   display:flex below would otherwise win against the hidden attribute. */
.pricing__tier[hidden] { display: none; }
.pricing__tier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: inherit;
  padding: 18px 16px 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.pricing__tier:hover { border-color: var(--glow); }
.pricing__tier.is-selected {
  border-color: var(--glow);
  background: rgba(207, 224, 255, 0.07);
  box-shadow: 0 0 0 1px var(--glow) inset;
}
.pricing__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg-0);
  background: var(--glow);
  padding: 3px 7px;
  margin-bottom: 2px;
}
.pricing__name {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.pricing__price { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: 0.02em; }
.pricing__per { font-size: 12px; color: var(--ink-faint); }
/* What the tier contains, in words. The audience reads this before it reads
   the price, so it is set at body size rather than as fine print. */
.pricing__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.pricing__li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-dim);
  padding-left: 14px;
  position: relative;
  /* Long section names must wrap rather than push the card past the screen. */
  overflow-wrap: anywhere;
}
.pricing__li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--glow);
}
/* The rows the dearer tier adds. Marked so switching cards shows the list
   growing rather than merely claiming that it does. */
.lock--extra .lock__t { color: var(--ink); }
.lock--extra .lock__n { color: var(--glow); }

/* ── nothing may be wider than the screen ───────────────────────────
   Project rule. body carries overflow-x:hidden, so an element that exceeds
   the viewport does not become scrollable — it is cut off, and the reader
   loses the end of every line on the page, not just that element's. Three
   patterns cause it, and all three are neutralised here rather than one at
   a time as they are noticed: decorative `nowrap` labels, fixed-width grid
   columns sitting beside text, and flex items that refuse to shrink below
   their longest word. */
@media (max-width: 640px) {
  /* The scan log and its note are written in uppercase with wide tracking;
     nothing in them may hold a line open. */
  .scan-log, .scan-log *, .scan-note {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .scan-note { max-width: none; }

  .readout__stamp { white-space: normal; }
  .readout__head { flex-wrap: wrap; gap: 4px 12px; }
  .readout__head > *,
  .result-head > *,
  .paywall__cta > * { min-width: 0; }

  /* The verdict: label above the profession instead of beside it. */
  .vrow { grid-template-columns: 1fr; gap: 4px; }
  .vrow__k { grid-row: auto; padding-top: 0; }
  .vrow__t { overflow-wrap: anywhere; }

  .readout__row { grid-template-columns: 44px 1fr; gap: 10px; }
  .verdict, .gauges { max-width: none; }

  .pricing { grid-template-columns: 1fr; }

  /* "Facial personality mapping" set in uppercase with wide tracking needs
     more room than a phone has left once the logo is beside it. The wordmark
     has to stay; the tagline is decoration and goes. */
  .nav__inner > .label { display: none; }

  /* Belt and braces for the long uppercase strings elsewhere on the scan
     screen — they are allowed to break rather than push the page sideways. */
  .scan-log,
  .progress__head { overflow-wrap: anywhere; }
  .scan-note { max-width: none; }
}

.paywall__cta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}
.paywall__note { font-size: 13px; color: var(--ink-dim); margin-top: 8px; max-width: 38ch; }
.paywall__email-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.paywall__email {
  display: block;
  width: 100%;
  max-width: 260px;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  margin-bottom: 14px;
  box-sizing: border-box;
}
.paywall__email:focus { outline: none; border-color: var(--glow); }
.paywall__test {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.paywall__err { margin-top: 8px; font-size: 12px; color: #e0a0a0; }

.result-actions {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.credits-banner { text-align: center; }
.credits-banner__n {
  display: block;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: var(--glow);
}
.credits-banner__label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

@media (max-width: 900px) {
  .result-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .lock { grid-template-columns: 26px 1fr 20px; }
  .lock__blur { display: none; }
}

/* ── reveal on scroll ───────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__ticker .row { animation: none; }
  .dropzone .scanline { animation: none; opacity: 0; }
}

/* ── responsive ─────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .proof { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .method, .proof { grid-template-columns: 1fr; }
  .report { grid-template-columns: 1fr; }
  .report__panel { position: static; }
  /* One column, and the explicit desktop placement has to be released or the
     three blocks keep their rows and the picker stays pinned beside the copy.
     minmax(0,1fr) rather than 1fr: a plain `1fr` track will not shrink below
     the min-content of what is inside it, so one wide child silently widens
     the whole column — and with overflow-x hidden on body, every line in that
     column is then cut at the screen edge instead of wrapping. */
  .scan-grid { grid-template-columns: minmax(0, 1fr); }
  .scan-intro, .scan-drop, .scan-form { grid-column: 1; grid-row: auto; }
  .nav__links { display: none; }
  .hero__meta-r { display: none; }
  /* The four slash-labels are desktop chrome; on a phone they read as
     clutter stacked above the headline. */
  .hero__meta-l { display: none; }
  /* Clear the HUD band so nothing overlaps the mesh. */
  .hero__content { padding-top: 330px; }
  .hero__sub { font-size: 14px; margin-top: 20px; }
  .hero__actions { margin-top: 32px; gap: 20px; }
}

/* ── first-impression scales (teaser preview) ─────────────────────
   The paid report's scales are .gauge in public/css/report.css — that file
   is shared verbatim with the standalone report generator, and this one is
   the site around it. Nothing here should grow a second copy of a report
   component. */

.scales { margin: 4px 0 18px; max-width: 62ch; }
.scale {
  display: grid;
  grid-template-columns: 17ch 1fr 4ch;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
}
.scale__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.scale__track {
  position: relative;
  height: 6px;
  background: rgba(231, 234, 239, 0.07);
  border: 1px solid var(--line);
}
.scale__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(207, 224, 255, 0.35), var(--glow));
  transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* the 50 = average-face marker */
.scale__mid {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 1px;
  background: var(--line-strong);
}
.scale__score {
  font-size: 12px;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.scale__reading {
  grid-column: 1 / -1;
  margin: -2px 0 8px;
  padding-left: calc(17 * 0.6em * (15 / 13) + 14px);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-dim);
}
.scales--locked .scale__fill {
  filter: blur(4px);
  opacity: 0.5;
  background: rgba(231, 234, 239, 0.3);
}
.scales--locked .scale__score { color: var(--ink-faint); }

/* Tablets and phones: no label column is wide enough for "Trustworthiness"
   beside a usable track, so stack instead of letting the word hit the bar. */
@media (max-width: 900px) {
  .scale {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    padding: 11px 0;
  }
  /* Explicit placement: auto-flow would push the score below the track,
     stranding the number two rows away from the label it belongs to. */
  .scale__label { grid-area: 1 / 1; }
  .scale__score { grid-area: 1 / 2; }
  .scale__track { grid-area: 2 / 1 / 3 / -1; }
  .scale__reading { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scale__fill { transition: none; }
}

/* ── teaser: observation readout ─────────────────────────────────── */

.readout { max-width: 74ch; margin-bottom: 40px; border-top: 1px solid var(--line); }
.readout__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px 12px;
  border-bottom: 1px solid var(--line);
}
.readout__stamp {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--glow);
  white-space: nowrap;
}
.readout__list { list-style: none; }
.readout__row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 16px;
  align-items: start;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
}
.readout__ch {
  padding-top: 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.readout__ch::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin-right: 7px;
  vertical-align: 1px;
  background: var(--glow);
  box-shadow: 0 0 7px rgba(207, 224, 255, 0.65);
}
.readout__txt { font-size: 15px; line-height: 1.7; color: var(--ink); }
.readout__foot {
  padding: 13px 2px 0;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ── teaser: archetype stamp ─────────────────────────────────────── */

.stamp {
  max-width: 74ch;
  margin-bottom: 40px;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  padding: 22px clamp(18px, 3vw, 32px) 24px;
}
.stamp__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.stamp__id {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stamp__name {
  margin: 16px 0 18px;
  font-size: clamp(20px, 3.2vw, 30px);
  letter-spacing: 0.08em;
  overflow-wrap: break-word;
}
.stamp__essence {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.stamp__key {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* Deliberately NOT .lock__blur — that class is display:none under 900px,
   which would silently blank the redaction on every phone. */
.stamp__redact {
  height: 9px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(231, 234, 239, 0.2) 0 42px,
    transparent 42px 52px
  );
  filter: blur(2.5px);
  opacity: 0.7;
}
.stamp__lock { font-size: 11px; opacity: 0.45; }

/* ── teaser: the verdict ─────────────────────────────────────────── */
/* Two professions, each with its mechanism. Built on the same grid as the
   observation readout so the page still reads as one instrument, with one
   deliberate difference: the title is set large, because it is the single
   line on this page a reader repeats to someone else. */

.verdict { max-width: 74ch; margin-bottom: 40px; border-top: 1px solid var(--line); }
.vrow {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 6px 16px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
}
.vrow__k {
  grid-row: 1 / 3;
  padding-top: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.vrow__t {
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.vrow__r { font-size: 14px; line-height: 1.75; color: var(--ink-dim); }
/* The fit is the good news and gets the accent mark; the misfit is stated
   plainly rather than in a warning colour — it is a mismatch, not a fault. */
.vrow--fit .vrow__k { color: var(--glow); }
.vrow--fit .vrow__k::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin-right: 7px;
  vertical-align: 1px;
  background: var(--glow);
  box-shadow: 0 0 7px rgba(207, 224, 255, 0.65);
}
/* The misfit keeps full-strength ink: it is half the verdict, and greying it
   out turns the honest half of the answer into a footnote. */
.verdict__foot {
  padding: 13px 2px 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-dim);
  max-width: 62ch;
}

/* The single line that says what the rest of the report is, right above the
   price. Sized between body copy and the fragment so it is read, not skipped. */
.promise {
  max-width: 62ch;
  margin: 0 0 34px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-dim);
}

/* ── teaser: gauges wrapper ──────────────────────────────────────── */

.gauges { max-width: 74ch; margin-bottom: 40px; border-top: 1px solid var(--line); }
.gauges #teaser-scales { padding-top: 14px; }
.gauges__foot {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.85;
  color: var(--ink-dim);
  max-width: 62ch;
}

@media (max-width: 900px) {
  .readout__row { grid-template-columns: 52px 1fr; gap: 12px; }
  .readout__txt { font-size: 14px; }
  .stamp__essence { grid-template-columns: 1fr auto; }
  .stamp__key { grid-column: 1 / -1; }
  /* One column on a phone: 92px of label beside a two-line profession title
     leaves the title in a gutter. The key becomes a caption above it. */
  .vrow { grid-template-columns: 1fr; gap: 4px; }
  .vrow__k { grid-row: auto; padding-top: 0; }
}