/* ──────────────────────────────────────────────────────────────
 * AVA Ready — light-mode rebrand 2026-05-09
 *
 * White editorial aesthetic to match ava.company. Black text, thin
 * hairline dividers, bold typography, no patterns or atmospheric
 * gradients. The orb panel (`.visual-panel-inner`) intentionally
 * STAYS DARK — it's the slab the colorful brand-color orb lives on,
 * matching AVA's pattern of using black breaker sections inside
 * otherwise-white pages.
 *
 * `visual.js` and the orb's brand-color extraction are NOT touched
 * by this rebrand — only the chrome around the canvas changes.
 * ──────────────────────────────────────────────────────────────── */

:root {
  /* Page surfaces */
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-strong: #fafafa;
  --panel-tinted: #f5f5f7;

  /* Text */
  --text: #0a0a0c;            /* primary ink */
  --body: #3f3f43;            /* body copy on white */
  --muted: #6b6b70;           /* helper / secondary */
  --quiet: #8d8d92;           /* weakest text */

  /* Lines + hairlines */
  --line: #e6e6e6;
  --line-strong: #d1d1d4;

  /* Action color = black (AVA's button + emphasis color) */
  --accent: #0a0a0c;
  --accent-2: #2a2a2e;        /* button hover */
  --accent-soft: rgba(10, 10, 12, 0.08);

  /* State semantic colors, tuned for legibility on white */
  --strong: #0e7c5a;
  --strong-bg: rgba(14, 124, 90, 0.08);
  --strong-line: rgba(14, 124, 90, 0.22);
  --mixed: #a17710;
  --mixed-bg: rgba(176, 138, 19, 0.10);
  --mixed-line: rgba(176, 138, 19, 0.22);
  --weak: #b3293c;
  --weak-bg: rgba(196, 52, 72, 0.08);
  --weak-line: rgba(196, 52, 72, 0.22);

  /* Dark slab (orb's home) */
  --slab: #0c0e15;
  --slab-text: #ffffff;
  --slab-muted: rgba(255, 255, 255, 0.65);
  --slab-faint: rgba(255, 255, 255, 0.18);

  /* Shadow restraint — AVA pages are flat. No "glassy" lift. */
  --shadow: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: inherit; }

.page-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 120px;
}

.subpage-shell { max-width: 980px; }

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
  margin: 0 calc(-1 * (50vw - 50%)) 32px;
  padding: 0 calc(50vw - 50%);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--text);
}

.nav-brand-mark {
  /* Orb mark (square-ish) replaced the wide wordmark 2026-06-12.
     Nick's pick: 96px. To try the bigger look, change to 160px. */
  height: 96px;
  width: auto;
  display: block;
}

.nav-brand-divider {
  width: 1px;
  height: 26px;
  background: var(--line-strong);
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.nav-brand-name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--text);
}

.nav-brand-tagline {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 500;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.nav-links a {
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.15s ease;
}

.nav-links a:hover,
.nav-links a.is-active { background: var(--accent-soft); }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--slab);
  color: var(--slab-text);
  padding: 56px 0;
  margin-top: 0; /* page-shell already has 120px bottom padding above this */
}

.footer-inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-brand-mark {
  /* Dedicated white orb asset — no more invert filter. */
  height: 96px;
  width: auto;
  display: block;
}

.footer-brand-divider {
  width: 1px;
  height: 28px;
  background: var(--slab-faint);
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.footer-brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--slab-text);
}

.footer-brand-tagline {
  font-size: 0.7rem;
  color: var(--slab-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 5px;
  font-weight: 500;
}

.footer-meta {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}

.footer-link {
  color: var(--slab-text);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}

.footer-link:hover {
  border-bottom-color: var(--slab-text);
}

/* ── Policy / subpage list styling ──────────────────────────── */
.policy-list {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--body);
}

.policy-list li {
  margin: 0 0 10px;
  line-height: 1.6;
}

.policy-meta {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── Subpage hero (used by ops/faq style pages) ─────────────── */
.subpage-hero { position: relative; }

.subpage-hero h1 {
  max-width: 18ch;
  position: relative;
  z-index: 1;
}

.subpage-intro {
  max-width: 62ch;
  color: var(--body);
  line-height: 1.7;
  font-size: 1.04rem;
}

/* ── Lists used in long-form text ───────────────────────────── */
.clean-list {
  margin: 0;
  padding-left: 20px;
  color: var(--body);
  line-height: 1.8;
}

.compact-list {
  margin-top: 12px;
  line-height: 1.65;
}

.emphasis-note { color: var(--text); }

.closing-panel { margin-bottom: 20px; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  margin-top: 32px;
  padding: 22px 24px;
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 20px;
  align-items: start;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.footer-note {
  color: var(--muted);
  line-height: 1.7;
}

.footer-cta-row { margin-top: 18px; }

/* ── Hero grid (text left, orb panel right) ─────────────────── */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: 36px;
  align-items: stretch;
  margin-top: 24px;
}

/* The hero copy isn't a card on AVA-style pages — it's text on the
   page. Only sections that benefit from visual containment get
   bordered cards. */
.hero-copy {
  padding: 12px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eyebrow,
.section-label,
.result-label,
.offer-step,
.overlay-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 24px;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin-bottom: 22px;
  max-width: 13ch;
}

.subhead {
  color: var(--body);
  font-size: 1.12rem;
  line-height: 1.55;
  max-width: 58ch;
  margin-bottom: 18px;
}

.subhead-secondary {
  font-size: 0.98rem;
  max-width: 62ch;
  color: var(--body);
  margin-bottom: 18px;
}

.hero-reassurance {
  font-size: 0.96rem;
  max-width: 64ch;
  line-height: 1.7;
  color: var(--body);
  margin-bottom: 22px;
}

/* ── Inputs / buttons (light mode) ──────────────────────────── */
.scan-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.input-row {
  display: flex;
  gap: 12px;
}

input, button, a { font: inherit; }

input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  transition: border-color 0.15s ease;
}

input::placeholder { color: #b3b3b6; }

input:focus {
  outline: none;
  border-color: var(--text);
}

button,
.primary-cta,
.secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  padding: 14px 22px;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  font-weight: 600;
}

button,
.primary-cta {
  border: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

button:hover,
.primary-cta:hover { background: var(--accent-2); }

.secondary-cta {
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: #fff;
}

.secondary-cta:hover { background: var(--accent-soft); }

/* ── Helper text family ─────────────────────────────────────── */
.helper-text,
.hero-links a,
.result-domain-line,
.dimension-helper,
.text-link,
.section-copy p,
.offer-card p {
  color: var(--body);
}

.saved-report-line {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

.saved-report-line .saved-report-link {
  color: var(--text);
  text-decoration: underline;
  margin-left: 8px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-style: normal;
  font-weight: 600;
}

.helper-text {
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ── Scan form layout ───────────────────────────────────────── */
.scan-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.field-group { display: grid; }

.field-group input { width: 100%; }

.scan-button-wrap {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.subtle-helper {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Refund promise under the checkout button — the strongest trust asset
   on the page, surfaced at the exact moment of purchase hesitation. */
.refund-promise {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.refund-promise a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.refund-promise a:hover {
  color: var(--accent-2);
}

.checkout-message-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* "Want a hand with these fixes?" — the implementation-help section at
   the end of the report. Deliberately quiet: same card chrome as the
   rest of the report, no accent stripe, no urgency styling. The report
   is advice; this is an offer, clearly separated and easily ignored. */
.impl-help-card {
  margin-top: 18px;
}

.impl-help-body {
  color: var(--body);
  line-height: 1.6;
  max-width: 720px;
}

.impl-help-card .interest-form {
  margin-top: 14px;
  max-width: 560px;
}

.impl-help-note {
  width: 100%;
  margin-top: 10px;
}

/* "See a real sample report" — the answer to "what am I actually
   buying?" before the $23.50 ask. */
.sample-report-line {
  margin: 14px 0 0;
}

.sample-report-link {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sample-report-link:hover {
  color: var(--accent-2);
}

.launch-pricing-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
}

.checkout-message {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  line-height: 1.55;
}

.checkout-message-info {
  background: var(--panel-strong);
  color: var(--text);
}

.checkout-message-success {
  background: var(--strong-bg);
  border-color: var(--strong-line);
  color: var(--strong);
}

.checkout-message-error {
  background: var(--weak-bg);
  border-color: var(--weak-line);
  color: var(--weak);
}

.scan-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  width: fit-content;
  transition: opacity 180ms ease, transform 180ms ease;
}

.scan-status.is-live {
  opacity: 1;
  transform: translateY(0);
}

.status-pill {
  color: #fff;
  background: var(--accent);
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-links { margin-top: 18px; }

.hero-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-signal-strip {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-links a,
.text-link,
.top-nav a { text-decoration: none; }

/* ── Visual panel — WHITE EXPERIMENT ────────────────────────────
 * Trying the orb on a white canvas so Nick can compare against the
 * dark-slab version. The orb's brand-color extraction is unchanged
 * (server.py + visual.js untouched); only the canvas it draws on
 * flipped from near-black to white. Expect colored brand lines to
 * read paler on white than they did on dark — that's the trade-off
 * we're evaluating. */
.visual-panel {
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.scan-panel {
  margin-top: 0;
  padding: 22px 22px 22px;
  border: 0;
  background: #fff;
  border-top: 1px solid var(--line);
}

.visual-panel-inner {
  position: relative;
  min-height: 660px;
  padding-bottom: 150px;
  background:
    radial-gradient(circle at 50% 75%, rgba(220, 230, 255, 0.55), transparent 38%),
    radial-gradient(circle at 50% 95%, rgba(214, 240, 230, 0.4), transparent 32%),
    #ffffff;
}

.visual-host,
.visual-host canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Soft glow blur on the orb canvas. Done at the CSS layer (composited
   on the GPU) instead of inside p5 via pg.filter(BLUR, ...), because
   iOS WebKit applies canvas-level filters per render tile and the tile
   boundaries become visible as rectangular seam artifacts on the orb.
   CSS filter has no tiling, no seams, and is GPU-accelerated. */
.visual-host canvas {
  filter: blur(2px);
}

/* Resolved mode (post-scan) tightens the blur slightly so the orb
   reads as more defined once the report is on screen. */
.visual-panel.is-resolved .visual-host canvas {
  filter: blur(1px);
}

.visual-host {
  position: absolute;
  inset: 0;
}

.visual-overlay {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.minimal-overlay {
  justify-content: flex-start;
  padding: 8px 0 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}

.visual-panel.is-scanning {
  box-shadow: 0 24px 80px rgba(74, 123, 255, 0.16);
}

.visual-panel.is-resolved {
  box-shadow: 0 24px 80px rgba(94, 218, 193, 0.10);
}

.overlay-domain {
  margin: 0;
  color: var(--body);
  font-weight: 500;
  font-size: 0.95rem;
}

.visual-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--slab-faint);
  border: 1px solid var(--slab-faint);
  color: var(--slab-text);
  font-size: 0.78rem;
}

/* ── Result section ─────────────────────────────────────────── */
.result-section { margin-top: 56px; }

.result-section.reveal .result-card {
  animation: resultRise 520ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.result-card {
  padding: 0;
  border-top: 1px solid var(--line);
  padding-top: 36px;
}

.result-header-row,
.dimension-topline,
.cta-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.two-column {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: start;
}

.result-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--body);
  font-size: 0.84rem;
  background: #fff;
}

.result-chip-stack {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.result-chip-accent {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.result-summary {
  margin: 18px 0 26px;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.4;
  max-width: 48ch;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.result-grid,
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.offer-grid-spacious { margin-top: 18px; }

.sequence-note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.sequence-note p {
  color: var(--body);
  line-height: 1.7;
}

.audit-unlock-panel {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
}

.unlock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.request-actions { align-items: center; }

.preview-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.preview-note p {
  color: var(--body);
  line-height: 1.7;
}

.premium-scan-shell,
.premium-report-shell {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  background: #fff;
}

.premium-stage-list {
  display: grid;
  gap: 14px;
}

.premium-stage {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
}

.premium-stage.is-active {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.premium-stage-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 700;
}

.premium-stage h3,
.premium-report-card h3 {
  margin-bottom: 8px;
}

.premium-stage p,
.premium-report-card p {
  color: var(--body);
  line-height: 1.7;
}

.premium-report-lead { margin-bottom: 18px; }

.premium-actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.unlock-simulator,
.premium-unlocked {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  background: #fff;
}

.unlock-simulator-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.unlock-simulator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 16px;
}

.single-preview-grid { grid-template-columns: 1fr; }

.unlock-checkout-card,
.unlock-preview-card {
  padding: 20px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
}

.unlock-offer-line {
  margin-top: 16px;
  display: grid;
  gap: 6px;
  color: var(--body);
  line-height: 1.6;
}

.pricing-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
}

.pricing-label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.pricing-value {
  margin: 0;
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.pricing-meta {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.88rem;
}

.deliverable-grid { margin-top: 18px; }

.premium-offer-grid { align-items: stretch; }

.emphasis-card {
  background: var(--panel-strong);
  border-color: var(--line-strong);
}

/* Cards: pillar / dimension / offer all share the same flat,
   bordered, AVA-style container. No drop shadows, no inset
   highlights — that was dark-mode polish. */
.dimension-card,
.offer-card,
.pillar-card {
  position: relative;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
}

.premium-summary-card,
.premium-package-card { padding: 24px; }

.offer-note {
  margin-top: 14px;
  color: var(--body);
  font-size: 0.94rem;
}

.dimension-card h3,
.offer-card h3,
.interpretation-block h3,
.pillar-card h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--text);
}

.state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.state-badge.strong {
  background: var(--strong-bg);
  color: var(--strong);
  border-color: var(--strong-line);
}

.state-badge.mixed {
  background: var(--mixed-bg);
  color: var(--mixed);
  border-color: var(--mixed-line);
}

.state-badge.weak {
  background: var(--weak-bg);
  color: var(--weak);
  border-color: var(--weak-line);
}

.dimension-helper,
.dimension-copy,
.section-copy p,
.offer-card p,
.interpretation-block p {
  line-height: 1.65;
  color: var(--body);
}

.interpretation-block {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.signal-evidence {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.signal-evidence .evidence-pill,
.promise-links .evidence-pill,
.hero-signal-strip .evidence-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel-strong);
  color: var(--text);
  font-size: 0.82rem;
}

/* Score ring: black on light gray track. Inner is white. */
.score-ring-wrap {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  margin: 18px 0 36px;
}

.score-ring {
  --score: 68%;
  width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--text) var(--score), var(--line) 0);
  display: grid;
  place-items: center;
  padding: 12px;
}

.score-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
}

.score-kicker {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.overall-score {
  margin: 0;
  font-size: 3.6rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}

.overall-score-label {
  margin: 8px 0 0;
  color: var(--body);
  font-size: 0.9rem;
}

.compact-summary {
  margin: 0;
  max-width: 44ch;
  color: var(--body);
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.report-detail-grid {
  margin-top: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-list-card { min-height: 100%; }

.agent-eye-card,
.task-questions-card {
  margin-top: 24px;
  padding: 26px;
}

.task-questions-header h3 { margin: 0 0 6px; }

.task-questions-subtitle {
  margin: 0 0 22px;
  color: var(--body);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 70ch;
}

.whats-coming-card {
  margin-top: 24px;
  padding: 26px;
  border-left: 3px solid var(--text);
}

.whats-coming-header h3 { margin: 0 0 6px; }

.whats-coming-subtitle {
  margin: 0 0 22px;
  color: var(--body);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 70ch;
}

.task-questions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.task-question {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  padding: 16px 18px;
}

.task-question-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.task-question-q {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  line-height: 1.45;
  flex: 1;
}

.task-question-a {
  margin: 0 0 8px;
  color: var(--body);
  line-height: 1.6;
}

.task-question-missing {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.task-question-missing strong { color: var(--text); }

.task-confidence {
  flex-shrink: 0;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.task-confidence-high {
  background: var(--strong-bg);
  color: var(--strong);
  border: 1px solid var(--strong-line);
}

.task-confidence-medium {
  background: var(--mixed-bg);
  color: var(--mixed);
  border: 1px solid var(--mixed-line);
}

.task-confidence-low {
  background: var(--weak-bg);
  color: var(--weak);
  border: 1px solid var(--weak-line);
}

.task-confidence-cannot_answer {
  background: rgba(141, 141, 146, 0.10);
  color: var(--muted);
  border: 1px solid rgba(141, 141, 146, 0.25);
}

.agent-eye-header h3 { margin: 0 0 6px; }

.agent-eye-subtitle {
  margin: 0 0 22px;
  color: var(--body);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 70ch;
}

.agent-eye-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .agent-eye-grid { grid-template-columns: 1fr 1fr; }
  .agent-eye-block:last-child { grid-column: 1 / -1; }
}

/* "What the agent actually read" panel. Styled to LOOK different from
   the LLM-narrated report blocks — this is RAW DATA, the static-HTML
   text the scanner pulled. Mono font, terminal-ish frame, max-height
   on the body so a long page doesn't dominate the report. The whole
   section's job is to be visceral: customers see at a glance that
   what an agent reads is dramatically less than what they see. */
.agent-view-card { padding-top: 28px; }

.agent-view-header { margin-bottom: 16px; }

.agent-view-subtitle {
  margin: 6px 0 0;
  color: var(--body);
  font-size: 0.92rem;
  max-width: 64ch;
}

.agent-view-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .agent-view-grid { grid-template-columns: 1fr 1fr; }
  .agent-view-block-wide { grid-column: 1 / -1; }
}

.agent-view-block {
  background: #f7f7f8;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}

.agent-view-label {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.agent-view-word-count {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.agent-view-body {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.55;
}

.agent-view-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.85rem;
  word-break: break-word;
}

.agent-view-pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
  margin: 0;
}

.agent-eye-block {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  padding: 16px 18px;
}

.agent-eye-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.agent-eye-body {
  margin: 0;
  color: var(--body);
  line-height: 1.6;
}

.report-list { padding-left: 18px; }

.report-item { margin-bottom: 14px; }

.report-item:last-child { margin-bottom: 0; }

.report-item p {
  margin: 0 0 6px;
  color: var(--text);
}

.report-refs {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.report-ref-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  text-underline-offset: 2px;
}

.report-ref-link:hover,
.report-ref-link:focus {
  color: var(--text);
  text-decoration-color: rgba(0, 0, 0, 0.6);
}

.implementation-note {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

.interest-form { margin-top: 18px; }

.interest-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 600;
}

.interest-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.interest-row input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  font-size: 0.95rem;
}

.interest-row input[type="email"]:focus {
  outline: none;
  border-color: var(--text);
}

.interest-button {
  padding: 11px 18px;
  border-radius: 4px;
  border: 1px solid var(--text);
  background: #fff;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.interest-button:hover:not(:disabled) {
  background: var(--text);
  color: #fff;
}

.interest-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.interest-message {
  margin-top: 10px;
  font-size: 0.9rem;
}

.interest-message.is-success { color: var(--strong); }
.interest-message.is-error { color: var(--weak); }

/* ── Ops view ───────────────────────────────────────────────── */
.ops-shell { display: grid; gap: 24px; }

.ops-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ops-card,
.ops-list-card {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
}

.ops-label {
  margin-bottom: 6px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 600;
}

.ops-value {
  margin: 0;
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.ops-list { display: grid; gap: 12px; }

.ops-list-item {
  padding: 14px 16px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
}

.ops-list-item p,
.ops-list-item span { margin: 0; }

.ops-meta {
  margin-top: 6px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.88rem;
}

.ops-scan-id code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.82rem;
  color: var(--text);
}

.ops-actions {
  gap: 14px;
  margin-top: 10px;
}

.ops-actions a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.ops-actions a:hover {
  border-bottom-color: var(--text);
}

/* ── Meter ──────────────────────────────────────────────────── */
.meter {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin: 14px 0 10px;
}

.meter span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--text);
}

.pillar-score-line {
  margin-bottom: 10px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
}

.agent-json-card { margin-top: 22px; }

.promise-strip {
  padding-top: 18px;
  padding-bottom: 18px;
}

.promise-links { gap: 10px; }

.cta-row {
  margin-top: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.result-cta-row { justify-content: flex-start; }

.info-section {
  margin-top: 28px;
  padding: 28px 0;
}

.compact-section { padding: 24px 0; }

.compact-actions {
  margin-top: 18px;
  justify-content: flex-start;
}

.premium-price-note {
  margin-top: -4px;
  margin-bottom: 18px;
  color: var(--body);
  font-size: 1rem;
}

.package-detail-list {
  display: grid;
  gap: 14px;
}

.package-detail-label {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

.section-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 22px;
  align-items: start;
}

.side-note {
  padding: 20px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
}

.side-note h3 { margin-bottom: 10px; }

.side-note p,
.side-note li {
  color: var(--body);
  line-height: 1.7;
}

.faq-list {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.faq-item {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
}

.faq-item h3 { margin-bottom: 10px; }

.faq-item p {
  color: var(--body);
  line-height: 1.65;
}

.template-card {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  overflow-x: auto;
}

.template-card pre {
  margin: 0;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.92rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

.narrow { max-width: 70ch; }

.section-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text);
}

.offer-grid { flex: 1; }

.is-hidden { display: none !important; }

@keyframes resultRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .hero-grid,
  .two-column,
  .result-header-row,
  .top-nav,
  .section-split,
  .footer-grid,
  .audit-unlock-panel,
  .unlock-simulator-grid,
  .pricing-row,
  .launch-pricing-row,
  .score-ring-wrap,
  .pillar-grid,
  .ops-grid,
  .scan-form-grid,
  .report-detail-grid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .page-shell {
    width: min(100% - 24px, 1180px);
    padding-top: 20px;
  }

  .visual-panel-inner { min-height: 480px; }
}

@media (max-width: 720px) {
  .input-row,
  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .result-grid,
  .offer-grid,
  .faq-list {
    grid-template-columns: 1fr;
  }

  h1 { max-width: none; }

  .nav-links { display: none; }

  /* ───────────────────────────────────────────────────────────────
     Mobile hero compression (A+B+C — added 2026-05-30).
     Goal: fit the entire scan-form panel + orb on one mobile
     viewport without scrolling. Three coordinated changes:
       A — orb panel shrinks from 660/480px to ~220px
       B — form padding and launch-special card tighten up
       C — optional business name field is hidden on mobile
            (always visible on desktop; field is genuinely optional)
     Desktop layout (>720px) is untouched.
     ─────────────────────────────────────────────────────────────── */

  /* A — Smaller orb on mobile. min-height drops from 480 to 260
     (slightly taller than the original 220 tweak so the orb has
     breathing room top and bottom now that visual.js centers it
     at 0.5 instead of 0.42). The heavy bottom padding goes away
     since there's no longer a tall canvas to reserve space for. */
  .visual-panel-inner {
    min-height: 260px;
    padding-bottom: 0;
  }

  /* The "Awaiting domain input" overlay is contextual filler that
     adds vertical clutter without information. Hide on mobile. */
  .visual-overlay { display: none; }

  /* B — Tighter form. Less padding around the form panel itself,
     less gap between fields, smaller launch-special card, and a
     shorter Start checkout button. None of these change the visual
     identity, just trim breathing room. */
  .scan-panel { padding: 14px 16px 16px; }
  .scan-form-grid { gap: 10px; }
  .field-group { gap: 4px; }
  .field-group input { padding: 10px 12px; font-size: 0.95rem; }
  .field-group label { font-size: 0.72rem; }

  .launch-pricing-row {
    padding: 12px 14px;
    gap: 4px;
  }
  .pricing-label { font-size: 0.65rem; }
  .pricing-value { font-size: 1.5rem; }
  .pricing-meta { font-size: 0.78rem; }

  .scan-button-wrap { gap: 8px; }
  #scan-button { padding: 14px 16px; font-size: 0.98rem; }
  .subtle-helper { font-size: 0.78rem; }

  /* C — Hide the optional Business Name field on mobile. Users
     almost always skip optional fields on phones anyway, and
     removing it saves ~80px of vertical space. The desktop layout
     still shows it (no rule outside this media query). */
  .field-group-optional { display: none; }
}

/* ── Scan-in-progress states ────────────────────────────────── */
#scan-button {
  position: relative;
  overflow: hidden;
}

#scan-button.is-scanning {
  background: var(--accent-2);
  cursor: progress;
  opacity: 0.95;
}

#scan-button.is-scanning::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-110%);
  animation: scan-button-sweep 1500ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes scan-button-sweep {
  0%   { transform: translateX(-110%); }
  60%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}

.scan-status.is-live .status-pill {
  animation: scan-pill-pulse 1600ms ease-in-out infinite;
}

@keyframes scan-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10, 10, 12, 0.32); }
  50%      { box-shadow: 0 0 0 6px rgba(10, 10, 12, 0); }
}

/* WCAG 2.3.3 — users who ask the OS for reduced motion get it:
   no button sweep, no pill pulse, no report-rise animation, no
   smooth scrolling. The orb's own freeze logic lives in visual.js
   (canvas animation can't be stopped from CSS). */
@media (prefers-reduced-motion: reduce) {
  #scan-button.is-scanning::after,
  .scan-status.is-live .status-pill {
    animation: none;
  }

  .result-section,
  .result-card {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  html {
    scroll-behavior: auto;
  }
}