/* ============================================================
   Homepage landing + validation page.
   ------------------------------------------------------------
   The portfolio entry itself lives in portfolio-chips.css,
   shared with the retail and accredited analyzers. What remains
   here is what only these two pages have: the example chips, the
   bot challenge slot, the demo result panel, the proof note and
   FAQ blocks, and the hero's own typography and motion rules.

   Named for the hero demo it was born in; kept because the file
   is referenced from deployed markup and renaming it would buy
   nothing.
   ============================================================ */

/* ── Hint chips ──────────────────────────────────────────── */

/* One centred line: a quiet "Or try" and the examples beside it. The
   input box stays the only bright object in the hero, so the chips read
   as a lighter option rather than a second box to fill in. */
.demo-hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  margin-top: 18px;
}

/* hero-demo.js hides this row by setting `hidden` when no chip resolves.
   A display rule beats the attribute's UA style, so it has to be restored
   explicitly - here and in the mobile block below. */
.demo-hints[hidden] { display: none; }

.demo-hints__label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.demo-hints__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.demo-hint {
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}

.demo-hint:hover {
  border-color: var(--color-cyan);
  background: rgba(13, 206, 227, 0.10);
  color: #FFFFFF;
}

.demo-hint--manager {
  color: #FFFFFF;
  font-weight: 600;
}

/* ── Turnstile ───────────────────────────────────────────── */

.demo-turnstile { margin-top: 12px; min-height: 0; }

/* ── Result panel ────────────────────────────────────────── */

.demo-result {
  margin-top: 26px;
  padding: clamp(18px, 3vw, 30px);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  text-align: left;
  transition: opacity var(--transition-base);
}

.demo-result--dimmed { opacity: 0.55; }

.demo-result__modified {
  margin-bottom: 14px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: rgba(217, 119, 6, 0.09);
  color: #92400E;
  font-size: 14px;
}

.demo-result__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }

.demo-result__source {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.demo-result__score { display: flex; align-items: baseline; gap: 10px; }

.demo-result__number {
  font-family: var(--font-heading);
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 800;
  line-height: 1;
}

.demo-result__tier { font-size: 16px; font-weight: 700; }

.demo-result__payoff {
  margin: 2px 0 0;
  font-size: 15px;
  color: var(--color-text-secondary);
}

.demo-result__grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
}

.demo-result__radar { position: relative; height: 260px; }

.demo-result__dims { display: flex; flex-direction: column; gap: 7px; }

.demo-dim {
  display: grid;
  grid-template-columns: 130px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.demo-dim__label { color: var(--color-text-secondary); }

.demo-dim__bar {
  height: 7px;
  border-radius: 4px;
  background: var(--color-bg-tinted);
  overflow: hidden;
}

.demo-dim__fill { display: block; height: 100%; border-radius: 4px; }

.demo-dim__score { font-weight: 700; text-align: right; }

.demo-dim__na { color: var(--color-text-muted); grid-column: 2 / 4; }

.demo-result__regimes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
}

.demo-regime { display: flex; align-items: baseline; gap: 6px; }
.demo-regime__label { font-size: 13px; color: var(--color-text-secondary); }
.demo-regime__beta { font-size: 16px; font-weight: 700; }
.demo-regime__hint { font-size: 12px; color: var(--color-text-muted); margin-left: auto; }

.demo-result__meta {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.demo-result__stale { color: #B45309; }

.demo-result__convert {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* Particles canvas: hiding it drops it out of the intersection
   observer inside hero-particles.js, which stops the animation. */
.hero--result .hero__particles { display: none; }

/* ── Next-landing sections (proof note + FAQ) ────────────── */

.stats-row__note {
  max-width: 760px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.stats-row__link { color: var(--color-blue); text-decoration: underline; }

.next-faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.next-faq__item { padding: 0; overflow: hidden; }

.next-faq__q {
  padding: 18px 22px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  position: relative;
}

.next-faq__q::-webkit-details-marker { display: none; }

.next-faq__q::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text-muted);
  transition: transform var(--transition-base);
}

.next-faq__item[open] .next-faq__q::after { content: '\2212'; }

.next-faq__a {
  margin: 0;
  padding: 0 22px 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ── Mobile ──────────────────────────────────────────────── */

@media (max-width: 640px) {
  .demo-box { padding: 10px 12px; }
  .demo-box__input { font-size: 15px; }
  /* Full-width action block: the button spans the box with the total
     centred above it. `stretch` is what widens the button in a column -
     flex-grow would only give it height. */
  .demo-box__actions {
    flex: 1 1 100%;
    margin-left: 0;
    align-items: stretch;
  }
  .demo-box__total { align-self: center; }

  /* The label sits above a single scrolling row of examples: on a phone
     the row is wider than the screen, and a wrapped label beside it
     would break the swipe affordance. */
  .demo-hints {
    display: block;
    text-align: center;
  }
  .demo-hints[hidden] { display: none; }
  .demo-hints__label { display: block; margin-bottom: 8px; }
  .demo-hints__chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .demo-hints__chips::-webkit-scrollbar { display: none; }
  .demo-hint { flex: 0 0 auto; }

  .demo-result__grid { grid-template-columns: 1fr; }
  .demo-result__radar { height: 230px; max-width: 300px; margin: 0 auto; }
  .demo-dim { grid-template-columns: 108px 1fr 36px; font-size: 12px; }
  .demo-result__convert .btn { flex: 1 1 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   Staged next-version landing only (public/next/index.php).
   Nothing here is loaded by the live homepage.
   ═══════════════════════════════════════════════════════════ */

/* ── Reduced motion ───────────────────────────────────────
   hero-particles.js already draws a still frame for visitors
   who ask for reduced motion; the CSS half of the page did
   not. Scroll reveals start at opacity 0, so without this a
   reduced-motion visitor still gets every section sliding in.
   Lives here, not in styles.css, which stays untouched until
   the switch (website_principles.md par. 5). */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__circle { animation: none; }
  .demo-result, .demo-box, .demo-hint { transition: none; }
}

/* ── Hero: a calmer stage ─────────────────────────────────
   The hero carries four things - headline, the pain-and-value
   line, the input and one row of examples. The moving
   constellation and the blurred colour circles were competing
   with all four, so they drop back to a suggestion of depth. */

.hero .hero__particles { opacity: 0.32; }
.hero .hero__circle { opacity: 0.18; }

/* A shade under the viewport, so the next section's edge shows on a
   laptop. A full 100vh hero ends exactly at the fold and reads as the
   whole page - the sliver of the section below is the cue that it isn't. */
.hero { min-height: 90vh; }

/* One sentence per line, no orphan. At the shared 80px the first
   sentence overflowed a 1200px container and wrapped, stranding
   "breaks." alone on its own line - three ragged lines where the
   headline is written as two. 64px is the largest size that keeps
   the longer sentence whole at the container width; `balance` is
   the safety net for narrower windows and for a future edit. */
.hero .hero__title {
  font-size: clamp(38px, 5vw, 64px);
  text-wrap: balance;
  margin-bottom: 20px;
}

/* The pain, on its own. One line now that the mechanism has moved down to
   the box, so it needs less air under it than a paragraph would. */
.hero .hero__subtitle {
  max-width: 740px;
  margin-bottom: 30px;
  text-wrap: balance;
}

/* ── The 8 dimensions ─────────────────────────────────────
   A plain two-column list, not another card grid: the page
   already carries cards for the steps, the access doors and
   the FAQ, and the dimensions read faster as text. The index
   sits in its own column with the label and description in
   the column beside it, so a wrapped description aligns under
   the text and never under the number. */

.dimensions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 48px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.dimension {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--card-border);
}

.dimension__num {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-cyan);
}

.dimension__body { display: block; }

.dimension__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}

.dimension__desc {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.dimensions__note {
  max-width: 760px;
  margin: 34px auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

@media (max-width: 800px) {
  .dimensions__grid { grid-template-columns: 1fr; gap: 0; }
}

/* ── Access: lede under the section title ─────────────────── */

.audience .section__subtitle { margin-top: 18px; }

/* ── Trust: the company's stance, not a personal profile ──── */

.trust__stance {
  margin: 22px 0 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--color-cyan);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.trust__stance p { margin: 0; }

.trust__credit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--card-border);
}
.trust__credit .partners__logos { margin: 0; }

@media (max-width: 640px) {
  .trust__credit { justify-content: flex-start; }
}