/* ==========================================================================
   SORZIA — pages.css  (v5)
   Section layouts for the homepage, question journey and supporting pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero - question in, insight out
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Tight to the toolbar: the opening should read as one screen, not
     header + empty band + content. */
  padding-block: clamp(0.5rem, 1.1vw, 1rem) clamp(1.5rem, 2.8vw, 2.5rem);
  overflow: clip;
}

.hero-grid {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 1.9rem);
  align-items: center;
  /* minmax(0, 1fr), never plain 1fr: a bare 1fr track carries an implicit
     min-width:auto, so the horizontally scrolling chip rail inside would
     force the whole column to its content width on phones. */
  grid-template-columns: minmax(0, 1fr);
}

.hero-grid > * { min-width: 0; }

.hero-copy { position: relative; z-index: 5; }

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--sp-3);
  color: var(--gold-bright);
}

.hero-kicker .spark {
  width: 6px;
  height: 6px;
  flex: none;
  transform: rotate(45deg);
  background: var(--gold-bright);
  box-shadow: 0 0 12px var(--gold-bright);
}

.hero-kicker span { font-size: var(--step--1); letter-spacing: 0.24em; text-transform: uppercase; }

.hero h1 { line-height: 1.08; }
.hero h1 .hl-line { display: block; text-wrap: balance; }
.hero h1 .hl-line + .hl-line { margin-top: 0.05em; }

/* Deliberate negative space: the copy must not compete with the lens. */
.hero-copy .lede { margin-top: var(--sp-3); max-width: 34ch; font-size: var(--step-0); }
.hero-copy .btn-row { margin-top: var(--sp-5); }

.btn-row.btn-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.btn-row.btn-stack .btn { justify-content: flex-start; }

/* The bloom that ties the lens into the page: it sits on the page, not in
   the SVG, so the instrument appears to light the layout around it. */
.hero-stage-wrap { position: relative; z-index: 2; }

.hero-stage-wrap::before {
  content: "";
  position: absolute;
  inset: -14% -11%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side ellipse at 55% 50%,
    rgba(212, 173, 89, 0.11),
    rgba(98, 85, 199, 0.055) 42%,
    transparent 70%);
  animation: heroBloom 12s var(--ease) infinite;
}

@keyframes heroBloom {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.035); }
}

.hero-console { position: relative; z-index: 4; }

@media (min-width: 700px) and (max-width: 1279px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .hero-console { grid-column: 1 / -1; }
  .pillar-strip-wrap { grid-column: 1 / -1; }
}

@media (min-width: 1280px) {
  .hero-grid {
    grid-template-columns: minmax(300px, 0.90fr) minmax(500px, 1.88fr) minmax(250px, 0.68fr);
    gap: clamp(0.6rem, 1.2vw, 1.1rem);
  }

  /* Copy and console start at the top of the row instead of floating in its
     middle. Centring them inside a 660px-tall stage row is what produced the
     ~120px empty band beneath the navigation. */
  .hero-copy { align-self: start; padding-top: clamp(0.5rem, 1.6vw, 1.5rem); }
  .hero-console { align-self: start; padding-top: clamp(0.5rem, 1.6vw, 1.5rem); }
  .hero-console { margin-left: clamp(-2.5rem, -1.8vw, -0.5rem); }
  .pillar-strip-wrap { grid-column: 2 / -1; align-self: start; }
}

/* Chips fall back to a readable wrapped row on small screens. */
@media (max-width: 999px) {
  .chip-column {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--sp-3);
  }
  .chip-column .chip-slot { position: static; transform: none; }
  .chip-column .chip { opacity: 0.85; transform: none; }
  .chip-column .chip.is-active { transform: scale(1.03); }
}

/* --------------------------------------------------------------------------
   1b. Insight Console
   --------------------------------------------------------------------------
   One instrument panel rather than four equal cards. Rows arrive in order and
   the synthesis carries visibly more weight, because it is the answer.
   -------------------------------------------------------------------------- */
.console { padding: 0.9rem 0.95rem 1rem; }

.console-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.35rem 0.7rem;
  border-bottom: 1px solid var(--hairline);
}

.console-pip {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 10px rgba(212, 173, 89, 0.9);
  animation: pipBlink 3s var(--ease) infinite;
}

.console-title {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.console-status {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  transition: color 400ms var(--ease);
}

.console-status.is-live { color: var(--gold-mid); }

.console-rows { display: grid; gap: 0.15rem; padding-top: 0.4rem; }

.console-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.4rem;
  border-radius: var(--r-sm);
  opacity: 0.32;
  transform: translateX(-8px);
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out),
    background 620ms var(--ease);
}

.console-row.is-shown {
  opacity: 1;
  transform: none;
  background: rgba(212, 173, 89, 0.055);
}

.row-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  font-size: 15px;
  color: var(--gold-mid);
  border: 1px solid rgba(212, 173, 89, 0.26);
  background: rgba(255, 255, 255, 0.02);
}

.console-row.is-shown .row-mark {
  color: var(--gold-bright);
  border-color: rgba(231, 201, 125, 0.55);
  box-shadow: 0 0 16px -6px rgba(212, 173, 89, 0.9);
}

.row-text { display: grid; gap: 0.05rem; min-width: 0; }
.row-text strong { font-size: var(--step-0); font-weight: 600; line-height: 1.3; color: var(--ivory); }
.row-text span { font-size: 0.74rem; line-height: 1.35; color: var(--text-dim); }

.row-tick {
  color: var(--gold-bright);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease-out);
}

.row-tick .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.console-row.is-shown .row-tick { opacity: 1; transform: none; }

/* The answer. Deliberately heavier than the stages above it. */
.console-synthesis {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  margin-top: 0.7rem;
  padding: 0.9rem 0.85rem;
  border-radius: var(--r-md);
  opacity: 0.3;
  transform: translateY(10px);
  background: linear-gradient(168deg, rgba(231, 201, 125, 0.10), rgba(156, 116, 40, 0.03));
  border: 1px solid rgba(212, 173, 89, 0.22);
  transition:
    opacity 760ms var(--ease-out),
    transform 760ms var(--ease-out),
    border-color 760ms var(--ease),
    box-shadow 760ms var(--ease);
}

.console-synthesis.is-shown {
  opacity: 1;
  transform: none;
  border-color: rgba(231, 201, 125, 0.55);
  box-shadow:
    var(--edge-strong),
    0 0 38px -12px rgba(212, 173, 89, 0.75),
    0 16px 34px -22px rgba(0, 0, 0, 0.95);
}

.syn-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  font-size: 19px;
  color: #241A08;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.syn-body { display: grid; gap: 0.2rem; min-width: 0; }

.syn-label {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.syn-text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.32;
  color: var(--ivory);
}


/* --------------------------------------------------------------------------
   1c. Three-system strip + trust band
   -------------------------------------------------------------------------- */
.pillar-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0.85rem 0.5rem;
}

.pillar-strip li + li { border-left: 1px solid var(--hairline); }

.pillar-mini {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0.9rem;
  border-radius: var(--r-md);
  transition: background var(--dur-2) var(--ease);
}

.pillar-mini:hover { background: rgba(212, 173, 89, 0.055); }
.pillar-mini-text { display: grid; gap: 0.05rem; min-width: 0; }
.pillar-mini .medallion { width: 40px; height: 40px; font-size: 18px; }

/* Tight leading: these are labels, not prose. At body leading both lines
   wrap and the strip grows to nearly the height of a card. */
.pillar-mini strong {
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ivory);
}

.pillar-mini span {
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

@media (max-width: 620px) {
  .pillar-strip { grid-template-columns: 1fr; }
  .pillar-strip li + li { border-left: 0; border-top: 1px solid var(--hairline); }
}

.hero-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(1.25rem, 2.6vw, 2rem);
  padding: clamp(1rem, 2vw, 1.6rem) 0.5rem;
}

.hero-trust li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.4rem clamp(1rem, 2.4vw, 2rem);
}

.hero-trust li + li { border-left: 1px solid var(--hairline); }
.hero-trust-text { display: grid; gap: 0.2rem; min-width: 0; }

.hero-trust strong {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ivory);
}

.hero-trust span { font-size: var(--step--1); line-height: 1.45; color: var(--text-dim); }

@media (max-width: 780px) {
  .hero-trust { grid-template-columns: 1fr; gap: 0.25rem; }
  .hero-trust li + li { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* --------------------------------------------------------------------------
   2. Three pillars
   -------------------------------------------------------------------------- */
.pillar-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.pillar-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.pillar-emblem {
  display: block;
  width: 92px;
  height: 92px;
  flex: none;
  border: 0;
  background: none;
}

.pillar-card h3 { font-size: var(--step-2); }
.pillar-card .pillar-sub { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); }
.pillar-card p { margin-top: 0.4rem; }
.pillar-card .btn-text { margin-top: auto; padding-top: var(--sp-2); }

@media (max-width: 520px) {
  .pillar-card { grid-template-columns: 1fr; }
  .pillar-emblem { width: 76px; height: 76px; }
}

/* --------------------------------------------------------------------------
   3. Four-step process
   -------------------------------------------------------------------------- */
.process-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
  align-items: stretch;
}

.process-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.35rem 0.85rem;
  padding: 1.1rem 1.15rem;
}

.process-num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  align-self: start;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-bright);
  border: 1px solid rgba(208, 169, 74, 0.38);
  background: rgba(208, 169, 74, 0.07);
}

.process-step h3 { font-size: var(--step-1); }
.process-step p { font-size: var(--step--1); line-height: 1.5; color: var(--text-muted); }

.process-step .process-arrow {
  position: absolute;
  top: 50%;
  right: calc(-1 * clamp(0.7rem, 1.6vw, 1.1rem));
  width: clamp(0.7rem, 1.6vw, 1.1rem);
  transform: translate(0, -50%);
  display: grid;
  place-items: center;
  color: rgba(208, 169, 74, 0.58);
}

.process-step:last-child .process-arrow { display: none; }

@media (max-width: 980px) {
  .process-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-step:nth-child(2n) .process-arrow { display: none; }
}

@media (max-width: 520px) {
  .process-track { grid-template-columns: 1fr; }
  .process-step .process-arrow { display: none; }
}

/* --------------------------------------------------------------------------
   4. Sample insight summary
   -------------------------------------------------------------------------- */
.summary-panel { padding: clamp(1.1rem, 2.4vw, 1.9rem); }

.summary-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: stretch;
}

@media (max-width: 900px) { .summary-grid { grid-template-columns: 1fr; } }

.summary-left { display: grid; gap: var(--sp-3); align-content: start; }

.summary-figure {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  border: 0;
  background: none;
}

.profile-title,
.insight-title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  padding-bottom: 0.7rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--hairline);
}

.profile-list { display: grid; }

.profile-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.72rem 0.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-list li:last-child { border-bottom: 0; }
.profile-list .icon { color: var(--gold-mid); width: 20px; height: 20px; }
.profile-list .k { font-size: var(--step-0); color: var(--gold-bright); font-weight: 500; }
.profile-list .v { font-size: var(--step-0); color: var(--ivory); text-align: right; }

.insight-list { display: grid; gap: 0.7rem; }

.insight-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--text-muted);
}

.insight-list .icon { color: var(--gold-mid); margin-top: 0.28em; width: 18px; height: 18px; }

.guidance-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(208, 169, 74, 0.2);
  font-size: var(--step-0);
  color: var(--gold-bright);
}

.guidance-line strong { color: var(--gold-lift); font-weight: 600; }
.guidance-line .icon { width: 20px; height: 20px; margin-top: 0.2em; }

/* --------------------------------------------------------------------------
   5. Insight / article cards
   -------------------------------------------------------------------------- */
.article-row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.article-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--sp-3);
  padding: 0.85rem;
  align-items: start;
}

.article-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  border: 0;
  background: none;
}

.article-card h3 { font-size: var(--step-1); }
.article-card p { font-size: var(--step--1); line-height: 1.5; }
.article-body { display: grid; gap: 0.35rem; padding: 0.35rem 0.5rem 0.5rem 0; }

.article-card.stacked { grid-template-columns: 1fr; padding: 0; overflow: hidden; }
.article-card.stacked .article-thumb { border-radius: 0; border: 0; border-bottom: 1px solid rgba(208, 169, 74, 0.15); aspect-ratio: 16 / 10; }
.article-card.stacked .article-body { padding: 1rem 1.15rem 1.25rem; gap: 0.45rem; }

@media (max-width: 420px) {
  .article-card { grid-template-columns: 1fr; }
  .article-card .article-body { padding: 0 0.5rem 0.5rem; }
}

.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-4); }

.filter-btn {
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--line);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.filter-btn:hover { color: var(--ivory); border-color: var(--line-strong); }

.filter-btn[aria-pressed="true"] {
  color: #1E1608;
  font-weight: 600;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: rgba(255, 240, 205, 0.5);
}

.empty-note { padding: var(--sp-5); text-align: center; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   6. Journey page layout
   -------------------------------------------------------------------------- */
.journey-hero { padding-block: clamp(1.5rem, 3vw, 2.75rem); position: relative; overflow: clip; }

.journey-frame {
  position: relative;
  padding: clamp(1.1rem, 2.6vw, 2.25rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(66% 88% at 50% 46%, rgba(120, 96, 220, 0.17), transparent 68%),
    radial-gradient(40% 58% at 50% 50%, rgba(208, 169, 74, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(9, 16, 32, 0.88), rgba(3, 6, 14, 0.94));
  border: 1px solid var(--line);
  box-shadow: var(--edge), var(--shadow-3);
}

/* Chamber walls hinted at the frame edges, matching the homepage chamber. */
.journey-frame::before,
.journey-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26%;
  pointer-events: none;
}

.journey-frame::before {
  left: 0;
  background: radial-gradient(120% 80% at 0% 50%, rgba(185, 139, 47, 0.13), transparent 62%),
              linear-gradient(90deg, rgba(2, 4, 11, 0.94), transparent);
}

.journey-frame::after {
  right: 0;
  background: radial-gradient(120% 80% at 100% 50%, rgba(185, 139, 47, 0.13), transparent 62%),
              linear-gradient(270deg, rgba(2, 4, 11, 0.94), transparent);
}

.journey-inner { position: relative; z-index: 2; }

.journey-grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 1100px) {
  .journey-grid { grid-template-columns: minmax(220px, 0.85fr) minmax(440px, 2fr) minmax(230px, 0.9fr); }
}

.journey-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: var(--sp-4);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.journey-label .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.rail-label {
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-align: center;
  margin-bottom: 0.65rem;
}

.engine-column { display: grid; gap: var(--sp-4); }

.crystal-bridge {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 1099px) {
  .crystal-bridge { grid-template-columns: 1fr; justify-items: center; }
  .crystal-bridge .icon-arrow-right { display: none; }
}

/* --------------------------------------------------------------------------
   7. Systems page
   -------------------------------------------------------------------------- */
.system-block {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(1.25rem, 2.6vw, 2rem);
}

@media (min-width: 900px) {
  .system-block { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .system-block.flip .system-visual { order: 2; }
}

.system-visual {
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  border: 0;
  background: none;
}

/* The instrument fades into the card: light falloff plus an edge mask, so
   there is no rectangle anywhere. */
.system-visual::before {
  content: "";
  position: absolute;
  /* Vertical bleed only. Bleeding horizontally pushed the page 23px wide at
     768px, where this block is full width. */
  inset: -14% 0;
  pointer-events: none;
  background:
    radial-gradient(58% 58% at 50% 50%, rgba(98, 85, 199, 0.14), transparent 72%),
    radial-gradient(40% 40% at 50% 50%, rgba(212, 173, 89, 0.10), transparent 74%);
}

.system-visual .viz {
  position: relative;
  width: min(100%, 280px);
  aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(74% 74% at 50% 50%, #000 52%, transparent 100%);
  mask-image: radial-gradient(74% 74% at 50% 50%, #000 52%, transparent 100%);
}

.feature-list { display: grid; gap: 0.6rem; margin-top: var(--sp-3); }

.feature-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: var(--step-0);
  color: var(--text-muted);
}

.feature-list .icon { color: var(--gold-mid); width: 18px; height: 18px; margin-top: 0.3em; }

.matrix-table { margin-top: var(--sp-3); font-size: var(--step-0); }

.matrix-table th,
.matrix-table td {
  padding: 0.8rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}

.matrix-table thead th {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  border-bottom-color: rgba(208, 169, 74, 0.26);
}

.matrix-table tbody th { color: var(--ivory); font-weight: 550; }
.matrix-table td { color: var(--text-muted); }
.matrix-table tbody tr:last-child th,
.matrix-table tbody tr:last-child td { border-bottom: 0; }

.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   8. Page header (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  overflow: clip;
}

/* Interior pages get the same warm bloom as the hero, so the whole site
   shares one light source. */
.page-head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(900px, 110%);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side ellipse,
    rgba(208, 169, 74, 0.09), rgba(90, 79, 232, 0.045) 44%, transparent 70%);
}

.page-head .lede { margin-inline: auto; }

.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-dim);
}

.breadcrumb a:hover { color: var(--gold-bright); }

/* --------------------------------------------------------------------------
   9. Early access page
   -------------------------------------------------------------------------- */
.access-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 940px) {
  .access-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.access-form { display: grid; gap: var(--sp-3); padding: clamp(1.25rem, 2.6vw, 2rem); }
.access-form .field-pair { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.benefit-list { display: grid; gap: var(--sp-3); }

.benefit-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
}

.benefit-list strong { display: block; font-size: var(--step-0); color: var(--ivory); }
.benefit-list span { font-size: var(--step--1); line-height: 1.5; color: var(--text-muted); }

.queue-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--r-md);
  font-size: var(--step--1);
  color: var(--text-muted);
  background: rgba(126, 200, 255, 0.06);
  border: 1px solid rgba(126, 200, 255, 0.18);
}

/* --------------------------------------------------------------------------
   10. Prose
   -------------------------------------------------------------------------- */
.prose { max-width: 74ch; }
.prose > * + * { margin-top: var(--sp-3); }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-6); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-5); }
.prose p, .prose li { color: var(--text-muted); }

.prose ul { display: grid; gap: 0.5rem; padding-left: 1.1rem; list-style: disc; }
.prose ul li::marker { color: var(--gold-mid); }
.prose ol { display: grid; gap: 0.5rem; padding-left: 1.3rem; list-style: decimal; }
.prose ol li::marker { color: var(--gold-mid); }
.prose a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ivory); font-weight: 600; }

.legal-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
}

.toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.toc h4 { font-family: var(--font-ui); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: var(--sp-2); }
.toc li + li { margin-top: 0.4rem; }
.toc a { font-size: var(--step--1); color: var(--text-muted); }
.toc a:hover { color: var(--ivory); }

.legal-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 960px) { .legal-grid { grid-template-columns: 230px minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   11. About page
   -------------------------------------------------------------------------- */
.value-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.timeline { display: grid; gap: 0; margin-top: var(--sp-4); }

.timeline li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
}

.timeline .marker { display: grid; justify-items: center; gap: 0.35rem; }

.timeline .marker .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 16px rgba(208, 169, 74, 0.85);
}

.timeline .marker .stem { width: 1px; flex: 1; min-height: 100%; background: linear-gradient(180deg, rgba(208, 169, 74, 0.42), transparent); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child .stem { display: none; }
.timeline h3 { font-size: var(--step-1); }
.timeline p { font-size: var(--step-0); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   12. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  overflow: hidden;
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(90, 79, 232, 0.19), transparent 66%),
    radial-gradient(62% 120% at 50% 112%, rgba(185, 139, 47, 0.17), transparent 66%),
    linear-gradient(180deg, rgba(11, 24, 48, 0.8), rgba(4, 7, 15, 0.92));
  border: 1px solid var(--line);
  box-shadow: var(--edge), var(--shadow-3);
}

.cta-band h2 { max-width: 22ch; }
.cta-band p { max-width: 56ch; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   13. 404
   -------------------------------------------------------------------------- */
.notfound {
  display: grid;
  place-items: center;
  min-height: 68vh;
  text-align: center;
  padding-block: var(--sp-7);
}

.notfound-code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 16vw, 9rem);
  line-height: 1;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, var(--gold-lift), rgba(140, 106, 31, 0.22));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ==========================================================================
   14. Phone composition
   --------------------------------------------------------------------------
   Not a shrunken desktop. The hero is re-ordered so the story still reads in
   sequence, only vertically:

       headline -> copy -> CTAs -> question chips -> LENS -> insight console

   The chips become a single scrollable rail instead of seven stacked
   buttons, and the lens crops to a square viewBox (set by scene.js) so the
   instrument fills the screen instead of floating in dead side margin.
   ========================================================================== */
@media (max-width: 899px) {
  .hero { padding-block: 0.5rem 2rem; }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .hero-copy       { order: 1; }
  .hero-stage-wrap { order: 2; }
  .hero-console    { order: 3; margin-left: 0; }
  .pillar-strip-wrap { order: 4; }

  .hero-copy .lede { max-width: 38ch; font-size: var(--step-0); }
  .hero-copy .btn-row { margin-top: var(--sp-4); }

  /* CTAs sit side by side so they do not push the lens below the fold. */
  .btn-row.btn-stack { flex-direction: row; flex-wrap: wrap; gap: 0.6rem; }
  .btn-row.btn-stack .btn { flex: 1 1 auto; justify-content: center; min-height: 46px; }

  /* The stage becomes a vertical flow: chips, connector, lens. */
  .optic-stage {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    min-width: 0;
  }

  .optic-svg {
    position: relative;
    order: 0;
    width: 100%;
    height: auto;
    /* matches the cropped viewBox, so the box has no empty margin */
    aspect-ratio: 750 / 584;
    transform: none;
  }

  /* Horizontal threads would fight a vertical layout, so they stand down and
     the .flow-down connectors carry the signal instead. */
  .thread-in, .thread-out { display: none; }

  /* One scrollable rail of questions, bled to the screen edges. */
  .chip-column {
    order: -2;
    position: relative;
    inset: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.2rem 1.25rem 0.7rem;
    margin-inline: -1.25rem;
    min-width: 0;
    max-width: calc(100% + 2.5rem);
  }

  .chip-column::-webkit-scrollbar { display: none; }

  .chip-column .chip-slot {
    position: static;
    transform: none;
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  /* Opacity depth is owned by scene.css. Setting it here too silently won
     the cascade (pages.css loads last) and flattened every chip to one
     weight, so no active question ever looked active. */
  .chip-column .chip {
    transform: none;
    min-height: 44px;
  }

  .chip-column .chip.is-warm   { transform: none; }
  .chip-column .chip.is-active { transform: scale(1.03); }

  .flow-down-in { order: -1; }
}

/* The vertical signal itself. */
.flow-down { display: none; }

@media (max-width: 899px) {
  .flow-down {
    display: block;
    position: relative;
    width: 2px;
    height: 30px;
    margin: 0.1rem auto 0.35rem;
    border-radius: 2px;
    overflow: hidden;
    background: linear-gradient(180deg,
      rgba(212, 173, 89, 0.04),
      rgba(212, 173, 89, 0.32),
      rgba(212, 173, 89, 0.04));
  }

  .flow-down::after {
    content: "";
    position: absolute;
    left: -1px;
    top: -16px;
    width: 4px;
    height: 16px;
    border-radius: 3px;
    background: var(--gold-lift);
    box-shadow: 0 0 12px 2px rgba(242, 222, 172, 0.75);
    opacity: 0;
  }

  [data-phase="transmit"] .flow-down-in::after { animation: flowDown 1.7s var(--ease-premium) 1; }
  [data-phase="emit"] .flow-down-out::after,
  [data-phase="reveal"] .flow-down-out::after { animation: flowDown 1.4s var(--ease-premium) 1; }

  @keyframes flowDown {
    0%   { top: -16px;  opacity: 0; }
    14%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { top: 100%;   opacity: 0; }
  }

  /* Phones keep the main instrument and drop decorative extras. */
  .lens-dust circle:nth-child(n + 9) { display: none; }

  .console { padding: 0.85rem 0.85rem 0.95rem; }
  .console-row { padding: 0.6rem 0.35rem; }
  .syn-text { font-size: var(--step-0); }

  .hero-trust { margin-top: var(--sp-4); }
  .pillar-mini { padding: 0.45rem 0.7rem; }
}

/* Very small phones: keep everything reachable and unclipped. */
@media (max-width: 380px) {
  .hero-copy .lede { max-width: 32ch; }
  .btn-row.btn-stack .btn { flex: 1 1 100%; }
  .chip-column { padding-inline: 1rem; margin-inline: -1rem; }
}


/* ==========================================================================
   15. Phone refinements
   ========================================================================== */
@media (max-width: 899px) {
  /* Interior page headers were as tall as the content they introduced. */
  .page-head { padding-block: clamp(1.25rem, 5vw, 2rem) clamp(1rem, 3vw, 1.5rem); }
  .page-head .lede { font-size: var(--step-0); max-width: 40ch; }
  .breadcrumb { margin-bottom: var(--sp-2); }

  .filter-row { gap: 0.4rem; }
  .filter-btn { padding-inline: 0.85rem; }

  /* The visual half of an editorial card, sized so the card still shows its
     title without scrolling. */
  .article-card.stacked .article-thumb { aspect-ratio: 16 / 9; }
  .article-card.stacked .article-body { padding: 0.9rem 1rem 1.1rem; }

  .system-block { gap: var(--sp-3); padding: clamp(1rem, 3vw, 1.4rem); }

  /* The engine label was breaking into two ragged columns. */
  .journey-label { flex-direction: column; gap: 0.15rem; line-height: 1.35; }
  .journey-label .dot { display: none; }
  .journey-frame { padding: clamp(0.9rem, 3vw, 1.4rem); }
  .system-visual .viz { width: min(100%, 220px); }
}

@media (max-width: 430px) {
  /* One line, always: the eyebrow wrapped to two at 320px. */
  .hero-kicker span { letter-spacing: 0.14em; font-size: 0.66rem; }

  /* A slimmer secondary keeps the lens closer to the fold. */
  .btn-row.btn-stack .btn-ghost {
    padding-block: 0.62rem;
    font-size: var(--step-0);
    min-height: 44px;
  }

  .hero-copy .btn-row { margin-top: var(--sp-3); gap: 0.5rem; }
  .hero-copy .lede { margin-top: 0.7rem; }
}