/*
 * Landing page — "Cortex Command Console" (2026-07 v2).
 *
 * Structure follows the researched conversion pattern: centered headline,
 * the product (audit console) directly below it, dual CTA, primary CTA
 * repeated down the page. Craft follows the owner's signature: the cortex
 * canvas as a living backdrop, diagnostic status lines, bracketed commands,
 * HUD sub-lines — with restraint on the selling sections.
 *
 * Motion rules: copy is never inside choreography; the ONE pinned scroll
 * section scrubs visuals only and collapses to a static 3-step on mobile
 * and under prefers-reduced-motion (JS opts IN via .story--scrub — the
 * default, no-JS state is fully static and readable).
 */

/* style.css pins html/body to overflow:hidden for the legacy splash layout.
   The landing page must scroll the WINDOW (sticky pinning + the scroll-story
   listener depend on real window scroll events), so both elements are
   released here. */
html:has(> body.landing) {
  /* Split axes: y scrolls, x is CLIPPED — the shorthand `overflow: auto`
     out-specified chrome.css's html{overflow-x:clip} and kept the
     full-bleed chrome's scrollbar-width overflow scrollable on wide
     monitors. */
  overflow-y: auto;
  overflow-x: clip;
  height: auto;
}

body.landing {
  overflow: visible;
  height: auto;
  background: var(--qc-bg, #0a1016);
  color: var(--qc-fg, #eee);
}

/* One viewport-fixed cyan wash behind the whole page. A fixed pseudo-element,
   NOT background-attachment: fixed — gradients repeat by default (which
   rendered as a tiled pattern down tall pages), and attachment: fixed
   disables composited scrolling and produces stale frames in some renderers. */
body.landing::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(90% 55% at 85% -5%, rgba(47, 233, 255, 0.07), transparent 60%);
}

body.landing main {
  position: relative;
  z-index: 1;
}

body.landing section {
  max-width: 1100px;
  margin: 2.4rem auto;
  padding: 0 1.25rem;
}

/* style.css carries a legacy global `p { text-align: center; max-width: 40rem;
   margin: auto }` from the splash era. Terminal output, story cards, and FAQ
   answers are left-reading contexts — re-anchor them explicitly. */
.console__body p,
.story__step p,
.faq details p {
  text-align: left;
  max-width: none;
}

.proof__link {
  text-align: left; /* body content sits under the left-anchored numbered heading */
}

/* Numbered Swiss-offset section headings — now actually offset: the display
   face, left-anchored, with the mono index number riding above the baseline.
   (The first Cortex pass declared this intent in a comment but centered the
   text; 2.5.1 realizes it.) */
.section-heading {
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--qc-text-strong, #f1fbff);
  margin: 0 0 1.2rem;
  text-align: left;
}

.section-heading__no {
  font-family: var(--font, monospace);
  font-weight: 400;
  color: var(--qc-accent, #2fe9ff);
  font-size: 0.55em;
  vertical-align: 0.55em;
  margin-right: 0.65rem;
  letter-spacing: 0.14em;
  text-shadow: 0 0 12px var(--qc-accent-glow, rgba(47, 233, 255, 0.38));
}

/* ─────────────────────── status strip ─────────────────────── */

/* The status strip reads as one continuous band with the sticky chrome
   header. chrome.css gives every chromed header a 1.25rem bottom margin for
   content breathing room, which opened a visible gap above the strip here.
   Collapse it on the landing page only (narrow selector — the strip is a
   landing-only element), so the strip sits flush against the header. */
body.landing .qc-chrome-header {
  margin-bottom: 0;
}

.status-strip {
  /* Above the now page-wide fixed cortex canvas (main is z-index:1; the
     strip is a sibling BEFORE main and would otherwise paint beneath it). */
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  padding: 0.4rem 1rem;
  font-family: var(--font, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--qc-text-dim, #adcdda);
  background: rgba(4, 16, 22, 0.85);
  border-bottom: 1px solid rgba(47, 233, 255, 0.12);
}

.status-strip span { white-space: nowrap; }

/* On phones the four-truth strip wraps into a stack that collides with the
   floating account pill — keep the two highest-signal truths and let the
   rest live on desktop. */
@media (max-width: 640px) {
  .status-strip span:nth-child(3),
  .status-strip span:nth-child(4) {
    display: none;
  }
}

/* Same stacking need as the strip: the chrome footer is a static body
   sibling AFTER main, and the viewport-fixed canvas lives INSIDE main's
   stacking context (z-index: 1) — without a positive z the field paints
   over the footer. */
body.landing .qc-chrome-footer {
  position: relative;
  z-index: 2;
}
.status-strip span::first-letter { color: var(--qc-accent, #2fe9ff); }

/* The floating account pill docks below the sticky header (chrome.css);
   on the landing page the status strip occupies that band, so drop the
   pill one more step. (:has keeps specificity above the chrome rule.) */
body.landing:has(.qc-chrome-header) .qc-account-pill {
  top: 96px;
}

/* ─────────────────────── CTA styles ─────────────────────── */

.cta-bracket {
  font-family: var(--font, monospace);
  letter-spacing: 0.05em;
}

.cta-ghost {
  color: var(--qc-accent, #2fe9ff);
  text-decoration: none;
  font-weight: 700;
}

.cta-ghost:hover { text-decoration: underline; }

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

.cortex-hero {
  position: relative;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: min(96vh, 1020px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The cortex field is the AMBIENT BACKGROUND OF THE WHOLE LANDING PAGE, not
   a hero-scoped tile: fixed to the viewport so it sits behind every section
   for the entire scroll (and behind the header/status strip — no band of
   bare page background between the header and the field). Width/height are
   100% of the fixed positioning box, never 100vw (100vw includes a classic
   scrollbar and horizontally overflows the page). */
.cortex-hero #cortex {
  position: fixed !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  /* NEGATIVE z within main's stacking context: at z-index 0 a positioned
     canvas paints AFTER (over) every non-positioned sibling's text — the
     field's opaque backdrop swallowed the proof/FAQ/final-CTA sections.
     At -1 it sits behind all of main's content while main's transparent
     background keeps it visible. */
  z-index: -1;
  pointer-events: none;
}

/* Readability scrim between the field and the copy. */
.cortex-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(80% 45% at 50% 18%, rgba(3, 10, 16, 0.78), transparent 75%),
    linear-gradient(180deg, rgba(3, 10, 16, 0.35), transparent 35%, transparent 70%, rgba(6, 11, 16, 0.9) 100%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 5rem) 1.25rem 1.5rem;
  /* style.css carries a splash-era .hero-copy with backdrop-filter: blur(6px);
     the landing hero copy sits over the living cortex field and must NOT
     frost it. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-copy h1 {
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: -0.022em;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 0.9rem;
  color: var(--qc-text-strong, #f1fbff);
  text-shadow: 0 0 26px rgba(47, 233, 255, 0.4), 0 2px 18px rgba(0, 0, 0, 0.85);
}

.hero-copy h1 em {
  font-style: normal;
  color: var(--qc-accent, #2fe9ff);
}

.hero-copy__sub {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--qc-text-mid, #d4e9f4);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
  margin: 0 0 1.3rem;
}

.hero-copy__ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-bottom: 0.7rem;
}

.hero-copy__trust {
  font-size: 0.82rem;
  color: var(--qc-text-dim, #adcdda);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  margin: 0;
}

/* ─────────────────────── the audit console ─────────────────────── */

.console {
  position: relative;
  z-index: 2;
  width: min(960px, 94vw);
  margin: auto auto clamp(1.5rem, 4vh, 3rem);
  border: 1px solid rgba(47, 233, 255, 0.35);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(47, 233, 255, 0.06), transparent 55%),
    rgba(3, 12, 18, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 46px rgba(47, 233, 255, 0.2),
    inset 0 0 90px rgba(47, 233, 255, 0.04);
}

.console::after { /* scanlines */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px);
}

.console__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  background: rgba(7, 32, 42, 0.95);
  border-bottom: 1px solid rgba(47, 233, 255, 0.25);
}

.console__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(47, 233, 255, 0.4); }
.console__dot:first-child { background: rgba(255, 107, 107, 0.55); }
.console__dot:nth-child(2) { background: rgba(255, 211, 105, 0.55); }

.console__title {
  margin-left: 0.55rem;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--qc-text-dim, #adcdda);
  text-transform: uppercase;
}

.console__body {
  position: relative;
  z-index: 1;
  padding: 1.1rem 1.5rem 1.3rem;
  font-size: 0.94rem;
}

.console__prompt {
  color: var(--qc-text-faint, #9bc2ce);
  font-size: 0.82rem;
  margin: 0 0 0.75rem;
}

.console__prompt b { color: #46d39a; }
.console__file { color: var(--qc-text-strong, #f1fbff); }

.hero-demo__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Contain the child rows' margins (block formatting context). The last
     row's margin-bottom otherwise collapsed THROUGH the list only while it
     held full content — so the summary below shifted ~11px every replay step
     even with the list's height reserved. flow-root makes the reserved height
     exact and the layout below it stationary. */
  display: flow-root;
}

.hero-demo__line { margin-bottom: 0.7rem; }

.hero-demo__desc {
  display: block;
  color: var(--qc-text-strong, #f1fbff);
  white-space: pre-wrap;
}

.hero-demo__verdict {
  display: block;
  margin-top: 0.15rem;
  padding-left: 1.3rem;
  font-size: 0.8rem;
}

.hero-demo__line[data-flag='bad'] .hero-demo__verdict { color: #ff8a8a; text-shadow: 0 0 10px rgba(255, 138, 138, 0.35); }
.hero-demo__line[data-flag='warn'] .hero-demo__verdict { color: #ffd369; text-shadow: 0 0 10px rgba(255, 211, 105, 0.35); }
.hero-demo__line[data-flag='good'] .hero-demo__verdict { color: #46d39a; text-shadow: 0 0 10px rgba(70, 211, 154, 0.35); }

.hero-demo__summary {
  display: inline-block;
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(47, 233, 255, 0.4);
  border-radius: 8px;
  color: var(--qc-accent, #2fe9ff);
  font-weight: 700;
  font-size: 0.85rem;
  background: rgba(47, 233, 255, 0.06);
  box-shadow: 0 0 18px rgba(47, 233, 255, 0.22);
}

/* Demo replay states (lib/hero-audit-demo.js) */
[data-qc-hero-demo].is-animating .hero-demo__line,
[data-qc-hero-demo].is-animating .hero-demo__summary {
  visibility: hidden;
}

[data-qc-hero-demo].is-animating .hero-demo__line.is-typed,
[data-qc-hero-demo].is-animating .hero-demo__summary.is-typed {
  visibility: visible;
}

[data-qc-hero-demo].is-animating .hero-demo__line.is-typed .hero-demo__verdict {
  animation: qc-stamp 0.28s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes qc-stamp {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* try-it, styled as the console's live prompt */
.console__try {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(47, 233, 255, 0.25);
}

.console__try-label { display: block; }
.console__try-label strong { color: var(--qc-accent, #2fe9ff); }

.console__try-row { display: flex; gap: 0.5rem; }

.console__input {
  flex: 1;
  min-width: 0;
  background: #04101a;
  border: 1px solid rgba(47, 233, 255, 0.25);
  border-radius: 6px;
  color: var(--qc-fg, #eee);
  font-family: var(--font, monospace);
  font-size: 0.88rem;
  padding: 0.5rem 0.7rem;
}

.console__input:focus-visible {
  outline: 2px solid var(--qc-focus, #f6fcff);
  outline-offset: 1px;
}

.console__btn {
  background: var(--qc-accent, #2fe9ff);
  color: var(--qc-text-inverse, #04131a);
  font-family: var(--font, monospace);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.console__btn:hover { background: var(--qc-accent-strong, #12d2ff); }
.console__btn:disabled { opacity: 0.6; cursor: wait; }

.console__verdict {
  margin: 0.55rem 0 0;
  font-size: 0.84rem;
  color: var(--qc-text-mid, #d4e9f4);
  min-height: 1.1em;
}

.console__cta {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--qc-accent, #2fe9ff);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.console__cta:hover { text-decoration: underline; }
.console__cta[hidden] { display: none; }

/* ─────────────────────── command picker ─────────────────────── */

.cmds__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1rem;
}

.cmd {
  --hue: var(--qc-accent, #2fe9ff);
  display: block;
  text-decoration: none;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(47, 233, 255, 0.16);
  border-radius: 10px;
  background: rgba(4, 16, 22, 0.75);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cmd--auto { --hue: #ffd369; }
.cmd--solar { --hue: #46d39a; }
.cmd--medical { --hue: #ff9ecf; }

.cmd:hover,
.cmd:focus-visible {
  border-color: var(--hue);
  transform: translateX(4px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4), 0 0 18px color-mix(in srgb, var(--hue) 30%, transparent);
}

.cmd:focus-visible {
  outline: 2px solid var(--qc-focus, #f6fcff);
  outline-offset: 2px;
}

.cmd__arrow { color: var(--hue); font-weight: 700; }

.cmd__name {
  color: var(--qc-text-strong, #f1fbff);
  font-weight: 700;
  font-size: 1rem;
}

.cmd__hud {
  display: block;
  margin-top: 0.3rem;
  padding-left: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--qc-text-dim, #adcdda);
}

/* ─────────────────────── stat band ─────────────────────── */

.statband {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 0.8rem;
  text-align: center;
  border: 1px solid rgba(47, 233, 255, 0.18);
  border-radius: 12px;
  padding: 1rem 0.8rem;
  background:
    linear-gradient(90deg, transparent, rgba(47, 233, 255, 0.05), transparent),
    rgba(4, 16, 22, 0.8);
}

.statband__stat b {
  display: block;
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
  color: var(--qc-accent, #2fe9ff);
  text-shadow: 0 0 18px rgba(47, 233, 255, 0.5);
  font-variant-numeric: tabular-nums;
}

.statband__stat span {
  color: var(--qc-text-dim, #adcdda);
  font-size: 0.8rem;
}

/* ─────────────────────── scroll story ─────────────────────── */

.story {
  --sp: 1; /* JS-off / static default: everything fully revealed */
}

.story--scrub {
  height: 320vh;
  margin-bottom: 0 !important;
}

.story--scrub .story__sticky {
  position: sticky;
  top: 60px;
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story__stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.story__step {
  border: 1px solid rgba(47, 233, 255, 0.16);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  background: rgba(4, 16, 22, 0.8);
}

.story__step h3 {
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  margin: 0 0 0.4rem;
  color: var(--qc-text-strong, #f1fbff);
  font-size: 1.05rem;
}

.story__step p {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  margin: 0 0 0.8rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--qc-text-mid, #d4e9f4);
}

.story__visual {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--qc-text-dim, #adcdda);
}

/* Scrubbed reveals — VISUALS only; copy above stays readable at every
   scroll position. Opacity math self-clamps to [0,1]. */
.story--scrub .story__visual--paste span { opacity: calc(var(--sp) * 4 - var(--i, 0)); }
.story__visual--paste span:nth-child(1) { --i: 0; }
.story__visual--paste span:nth-child(2) { --i: 0.4; }
.story__visual--paste span:nth-child(3) { --i: 0.8; }
.story__visual--paste span:nth-child(4) { --i: 1.2; }

.story__flag {
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
}

.story__flag--bad { color: #ff8a8a; border-color: rgba(255, 138, 138, 0.3); }
.story__flag--good { color: #46d39a; border-color: rgba(70, 211, 154, 0.3); }

.story--scrub .story__flag { opacity: calc((var(--sp) - 0.35) * 5 - var(--i, 0)); }
.story__step[data-story-step='2'] .story__flag:nth-child(1) { --i: 0; }
.story__step[data-story-step='2'] .story__flag:nth-child(2) { --i: 0.5; }
.story__step[data-story-step='2'] .story__flag:nth-child(3) { --i: 1; }

.story__bar {
  position: relative;
  height: 1.5rem;
  border: 1px solid rgba(47, 233, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.story__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 52%; /* quoted price bar (widths live here — CSP forbids style attrs) */
  background: rgba(255, 138, 138, 0.5);
  transform-origin: left center;
}

.story__bar--avg i {
  width: 38%; /* metro average bar */
  background: rgba(70, 211, 154, 0.5);
}

.story--scrub .story__bar i {
  transform: scaleX(clamp(0, (var(--sp) - 0.7) * 3.4, 1));
}

.story__bar em {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
  font-style: normal;
  font-size: 0.72rem;
  color: var(--qc-text-strong, #f1fbff);
}

.story__progress {
  height: 2px;
  margin-top: 1.2rem;
  background: rgba(47, 233, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  display: none;
}

.story--scrub .story__progress { display: block; }

.story__progress i {
  display: block;
  height: 100%;
  background: var(--qc-accent, #2fe9ff);
  box-shadow: 0 0 10px rgba(47, 233, 255, 0.7);
  transform: scaleX(var(--sp));
  transform-origin: left center;
}

/* ─────────────────────── proof ─────────────────────── */

.proof__wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0.4rem 0 1rem;
}

/* Wall highlights as terminal log entries: left rule instead of a full card
   frame, flag prefix + title as the log line, the benchmark delta as the
   verdict line — the same language as the hero console's audit output. */
.proof__wall-card {
  display: block;
  text-decoration: none;
  border: 0;
  border-left: 2px solid var(--qc-flag-bad, #ff8a8a);
  border-radius: 0 8px 8px 0;
  padding: 0.7rem 0.95rem;
  background: rgba(4, 16, 22, 0.75);
  font-size: 0.84rem;
  color: var(--qc-text-mid, #d4e9f4);
  transition: background 0.2s ease, transform 0.2s ease;
}

.proof__wall-card:hover,
.proof__wall-card:focus-visible {
  background: rgba(8, 26, 35, 0.9);
  transform: translateX(3px);
}

.proof__wall-card:focus-visible {
  outline: 2px solid var(--qc-focus, #f6fcff);
  outline-offset: 2px;
}

.proof__log-line {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.proof__log-prefix {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-flag-bad, #ff8a8a);
}

.proof__log-title {
  color: var(--qc-text-strong, #f1fbff);
  font-weight: 700;
}

.proof__wall-card .over {
  margin-top: 0.25rem;
  padding-left: 0.05rem;
  color: var(--qc-flag-bad, #ff8a8a);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.proof__link a {
  color: var(--qc-accent, #2fe9ff);
  font-weight: 700;
  text-decoration: none;
}

.proof__link a:hover { text-decoration: underline; }

.proof__testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.proof__testimonial {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  border: 1px solid rgba(47, 233, 255, 0.16);
  border-radius: 10px;
  padding: 0.9rem;
  margin: 0;
  background: rgba(4, 16, 22, 0.75);
  font-size: 0.88rem;
  line-height: 1.55;
}

.proof__testimonial cite {
  display: block;
  margin-top: 0.45rem;
  color: var(--qc-text-dim, #adcdda);
  font-style: normal;
  font-size: 0.78rem;
}

.proof__cta { margin-top: 1.4rem; text-align: center; }

/* ─────────────────────── pro pitch (restraint) ─────────────────────── */

.pro-pitch {
  border: 1px solid rgba(47, 233, 255, 0.18);
  border-radius: 14px;
  padding: 1.6rem 1.5rem !important;
  background: rgba(4, 16, 22, 0.8);
}

.pro-pitch__accent { color: var(--qc-accent, #2fe9ff); }

.pro-pitch__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
}

/* Spec-sheet: capability rows read like a hardware datasheet — module name
   in accent mono (fixed column), capability in body type. */
.pro-pitch__spec {
  margin: 0;
}

.pro-pitch__row {
  display: grid;
  grid-template-columns: minmax(9.5rem, max-content) minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(47, 233, 255, 0.12);
}

.pro-pitch__row:last-child { border-bottom: 0; }

.pro-pitch__row dt {
  font-family: var(--font, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-accent, #2fe9ff);
  padding-top: 0.15rem;
}

.pro-pitch__row dt::before {
  content: '› ';
  opacity: 0.7;
}

.pro-pitch__row dd {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  margin: 0;
  line-height: 1.55;
  color: var(--qc-text-mid, #d4e9f4);
  font-size: 0.92rem;
}

.pro-pitch__pricing { text-align: center; }

.pro-pitch__price {
  font-size: 1.05rem;
  color: var(--qc-text-strong, #f1fbff);
  margin: 0 0 0.2rem;
}

.pro-pitch__price strong {
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-size: 2rem;
  letter-spacing: -0.01em;
  color: var(--qc-accent, #2fe9ff);
}

.pro-pitch__note {
  font-size: 0.78rem;
  color: var(--qc-text-dim, #adcdda);
  margin: 0 0 0.9rem;
}

/* ─────────────────────── FAQ + final CTA ─────────────────────── */

.faq details {
  border: 1px solid rgba(47, 233, 255, 0.16);
  border-radius: 8px;
  background: rgba(4, 16, 22, 0.6);
  margin-top: 0.6rem;
  padding: 0.7rem 1rem;
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--qc-text-strong, #f1fbff);
}

.faq summary:focus-visible {
  outline: 2px solid var(--qc-focus, #f6fcff);
  outline-offset: 2px;
}

.faq details p {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  margin: 0.55rem 0 0.15rem;
  color: var(--qc-text-mid, #d4e9f4);
  line-height: 1.6;
  font-size: 0.92rem;
}

.final-cta {
  text-align: center;
  padding: 2.2rem 1.25rem 1rem !important;
  border-top: 1px solid rgba(47, 233, 255, 0.14);
}

.final-cta h2 {
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.015em;
  color: var(--qc-text-strong, #f1fbff);
  margin: 0 0 0.3rem;
}

.final-cta p {
  color: var(--qc-text-dim, #adcdda);
  margin: 0 auto 1.2rem;
}

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

@media (max-width: 880px) {
  .cmds__grid { grid-template-columns: 1fr; }
  .story__stage { grid-template-columns: 1fr; }
  .proof__wall { grid-template-columns: 1fr; }
  .pro-pitch__grid { grid-template-columns: 1fr; }
  .cortex-hero { min-height: 0; }
  .hero-copy { padding-top: 3.6rem; }
  .console { margin-top: 0.8rem; }
}

@media (max-width: 520px) {
  .console__try-row { flex-direction: column; }
  .statband { justify-content: flex-start; text-align: left; }

  /* Legibility floor: the smallest HUD copy (11.5–12.8px at default root)
     steps up to ≥13px on phones, where viewing distance is shortest. */
  .status-strip,
  .console__title,
  .console__prompt,
  .cmd__hud,
  .statband__stat span,
  .story__visual,
  .story__bar em,
  .hero-copy__trust,
  .proof__log-prefix {
    font-size: 0.82rem;
  }
}

/* ─────────────────────── entrance choreography ───────────────────────
   Applied by lib/reveal.js (progressive enhancement — with JS off the class
   is never added and everything below the fold is simply visible). One
   motion voice: rise + fade on the shared tokens, staggered per group via
   --qc-reveal-delay. */
.qc-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--qc-dur-slow, 0.6s) var(--qc-ease-out, ease-out),
    transform var(--qc-dur-slow, 0.6s) var(--qc-ease-out, ease-out);
  transition-delay: var(--qc-reveal-delay, 0s);
}

.qc-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .cmd,
  [data-qc-hero-demo].is-animating .hero-demo__line.is-typed .hero-demo__verdict {
    transition: none;
    animation: none;
  }

  .qc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Readability over the live backdrop.

   The page is set on an animated circuit canvas with the product's magnifier
   watermarked at its centre, and in several places the copy was being read
   THROUGH that: the reassurance line under the hero CTA, the Deep Analysis
   capability rows, and the FAQ answers all sat over moving detail with nothing
   between them and it.

   Two changes, in the order that actually fixed it. The watermark itself is now
   drawn faint in ambient mode (canvas.js drawLogo) — it is a backdrop, not the
   subject, and that removed most of the problem at the source. What remains
   here is the second half: a dark halo on the prose that sits directly on the
   canvas, and a slightly denser plane under the one panel the watermark lands
   inside.

   A halo rather than an outline: an outline at body sizes thickens the glyph
   and costs more legibility than it buys, while a soft dark shadow separates
   the letterform from whatever is behind it without changing its weight. It
   costs nothing on a solid background, so it is safe on every viewport.
   ═══════════════════════════════════════════════════════════════════════ */

/* The watermark is centred on the viewport, which is exactly where this panel
   sits when the section scrolls into view. */
.pro-pitch {
  background: rgba(4, 16, 22, 0.92);
}

.pro-pitch__row dd,
.pro-pitch__note,
.hero-demo__desc,
.faq details p,
.faq summary,
.section-lede,
.steps__copy {
  text-shadow: 0 1px 10px rgba(2, 8, 14, 0.92), 0 0 3px rgba(2, 8, 14, 0.7);
}

/* Headings carry more weight already, so they need less — but they are also
   the largest targets for the canvas's bright traces. */
.section-heading {
  text-shadow: 0 2px 14px rgba(2, 8, 14, 0.9);
}

/* Already carried a shadow; deepened, because this is the line the watermark's
   lens ring was crossing. */
.hero-copy__trust {
  text-shadow: 0 1px 10px rgba(2, 8, 14, 0.95), 0 0 4px rgba(2, 8, 14, 0.8);
}