:root {
  --bg: #08080c;
  --bg-card: #131320;
  --text: #f5f4f7;
  --text-dim: #9b98a8;
  --accent: #e6007e;
  --accent-2: #22d3ee;
  --border: #26243a;
  /* PREMIUM CARD REFINEMENT (2026-09-14): shared radius scale so card
     geometry stops being a different, arbitrary value per component
     (8/10/14/16/18/20/22/26px all coexisted with no reason for the
     differences) — only applied to the components actually touched by
     this pass, never a blind find/replace across already-good ones. */
  --radius-md: 14px;   /* normal cards */
  --radius-lg: 18px;   /* major feature containers, ceiling */
}

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

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

html { overflow-x: hidden; }

/* ================================================================
   PHASE 5 — GLOBAL AMBIENT BACKGROUND (2026-08-31 visual-production pass)
   Fixed, full-viewport, behind every screen (not just the intro/hero —
   see the HTML comment on .ambient-bg for why it lives outside .app).
   Three large, independently-drifting blurred blobs in the existing
   cyan/purple/pink palette, blended with `screen` so they glow additively
   against the near-black background instead of looking like flat shapes.
   Deliberately bright/large enough to read clearly at a glance, not just
   "technically present" — GPU-cheap (opacity + transform only).
   ================================================================ */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
  isolation: isolate;
}
.ambient-glow {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.42;
  will-change: transform;
}
.ambient-glow-1 {
  top: -20vmax;
  left: -15vmax;
  /* 2026-09-01 tuning: peak alpha dialed down from 0.9 — cyan was reading
     brighter/more saturated than the purple/pink blobs and competing with
     the result card. */
  background: radial-gradient(circle, rgba(34,211,238,0.72) 0%, rgba(34,211,238,0) 68%);
  animation: ambientDrift1 34s ease-in-out infinite;
}
.ambient-glow-2 {
  bottom: -25vmax;
  right: -20vmax;
  background: radial-gradient(circle, rgba(139,92,246,0.85) 0%, rgba(139,92,246,0) 68%);
  animation: ambientDrift2 42s ease-in-out infinite;
}
.ambient-glow-3 {
  top: 30vh;
  left: 20vw;
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(circle, rgba(230,0,126,0.7) 0%, rgba(230,0,126,0) 68%);
  animation: ambientDrift3 38s ease-in-out infinite;
}
@keyframes ambientDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vw, 10vh) scale(1.15); }
}
@keyframes ambientDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-9vw, -8vh) scale(1.1); }
}
@keyframes ambientDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-6vw, 8vh) scale(0.92); }
  66% { transform: translate(7vw, -4vh) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  /* Stays visible as a static glow field — only the drift stops, per the
     rest of this file's "disable decorative ANIMATION, keep the visual"
     convention (see the mind-scan-orb/sparkle/etc. rule above). */
  .ambient-glow { animation: none; }
}
@media (max-width: 600px) {
  /* GPU-conscious: a 90px blur on a 70vmax blob is comfortably cheap on
     desktop but noticeably less so on lower-end mobile GPUs — smaller
     blobs with a lighter blur read almost identically at phone viewport
     sizes anyway. */
  .ambient-glow { width: 60vmax; height: 60vmax; filter: blur(60px); }
  .ambient-glow-3 { width: 48vmax; height: 48vmax; }
}

/* TRIAL (2026-09-04): shader-based replacement for .ambient-bg above —
   same fixed/full-viewport slot, same z-index, so swapping back is just
   re-enabling .ambient-bg and deleting the #mindtype-shader-bg div/script
   in index.html. Mounted via mindtype-shader-bg.js (vanilla, no React). */
.mindtype-shader-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #05070A; /* VARIANT A fallback color, matches the shader's own deep-navy base -- 2026-09-21 */
}

.app {
  min-height: 100vh;
  display: flex;
  align-items: center;
  align-items: safe center;
  justify-content: center;
  position: relative;
  animation: sceneIntro 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes sceneIntro {
  from { opacity: 0; filter: blur(8px); transform: scale(1.05); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

.screen {
  display: none;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  padding: 20px 24px;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  position: relative;
}
.screen.active { display: flex; }

/* ---------- INTRO / HERO ("Mind Scan" redesign, 2026-08-17) ----------
   Compact top spacing + reduced gap so Q1 and as many answers as possible
   land above the fold on mobile — see mind-scan-* below for the decorative
   background layer that makes the quiz feel like part of the hero instead
   of a bolted-on form. */
#screen-intro { align-items: center; text-align: center; overflow: hidden; gap: 16px; padding-top: 18px; padding-bottom: 32px; }

/* Bounds the decorative bg + overlay to the hero copy block's own height
   (2026-09-17, "REMOVE THE CENTRAL OVERLAY BAND") -- .mind-scan-bg used to
   size itself to #screen-intro's full height (hero+panels+coach+quiz+
   everything below), so its radial gradients bled through the translucent
   panels lower on the page as an unintended vertical band. overflow:hidden
   here clips the orb/sweep/overlay to exactly this wrapper's height (i.e.
   .intro-content's natural height), so they can never reach the panels. */
.mind-scan-hero-wrap { position: relative; overflow: hidden; border-radius: 28px; box-shadow: 0 0 40px rgba(34,211,238,0.18); transition: box-shadow 0.25s ease; }
.mind-scan-hero-wrap:hover { box-shadow: 0 0 80px rgba(34,211,238,0.55), 0 0 40px rgba(139,92,246,0.35); }

/* Decorative-only layer (aria-hidden) behind the hero. Never intercepts
   taps (pointer-events:none) and sits below .intro-content (z-index:1). */
.mind-scan-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* 2026-09-11 visual-identity pass: the magenta middle stop (rgba(230,0,
   126,...), = --accent) is replaced with a deep blue — this decorative
   layer sits directly behind the hero headline/CTA, so it's the one place
   worth correcting precisely: blue/cyan/teal dominant, violet restrained
   to a thin outer accent, no magenta. --accent itself is left untouched
   (used site-wide, out of scope for a hero-only visual fix). */
/* ATMOSPHERIC DEPTH LAYER (2026-09-21, "HERO BACKGROUND + COMPOSITION
   REFINEMENT" -- replaces the rejected flowing-curve/wave-band approach).
   Two large, heavily-blurred, softly-breathing light fields rather than
   one defined "orb" shape or any directional band/curve -- at this size/
   blur they read as ambient atmosphere (soft depth, gentle motion), not
   a distinct decorative ornament. No translation/rotation, opacity+scale
   only, very slow (18-22s) and low-amplitude ("slightly alive", not
   breathing) -- paired with the shader's own low-distortion/near-zero-
   swirl drift and grain (mindtype-shader-bg.js) for the actual cloudy/
   diffused texture. */
.mind-scan-orb {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 720px;
  height: 640px;
  margin-left: -360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,0.19) 0%, rgba(99,102,241,0.11) 40%, rgba(124,58,237,0.07) 62%, transparent 76%);
  filter: blur(110px);
  animation: mindOrbPulse 20s ease-in-out infinite;
}
.mind-scan-orb-2 {
  top: auto;
  bottom: -220px;
  left: 42%;
  width: 560px;
  height: 480px;
  margin-left: -280px;
  background: radial-gradient(circle, rgba(34,211,238,0.10) 0%, rgba(59,130,246,0.08) 45%, transparent 72%);
  filter: blur(100px);
  animation: mindOrbPulse 26s ease-in-out infinite reverse;
}
@keyframes mindOrbPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.62; transform: scale(1.015); }
}

/* VARIANT A: hidden -- the circuit-board-style grid line texture read as
   "tech/crypto", not premium. Element left in the DOM (decorative,
   aria-hidden, no functional role) so this is reversible via one line. */
.mind-scan-grid {
  display: none;
  position: absolute;
  inset: -10% -10%;
  /* 2026-09-11: second axis recolored from magenta to a deep blue, same
     visual-identity fix as .mind-scan-orb above. */
  background-image:
    repeating-linear-gradient(0deg, rgba(34,211,238,0.13) 0px, rgba(34,211,238,0.13) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(90deg, rgba(59,130,246,0.13) 0px, rgba(59,130,246,0.13) 1px, transparent 1px, transparent 42px);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 22%, #000 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 22%, #000 0%, transparent 80%);
}

/* VARIANT A: hidden -- the moving light sweep read as a "scanning/loading"
   gaming effect. Same reversibility note as .mind-scan-grid above. */
.mind-scan-sweep {
  display: none;
  position: absolute;
  left: -10%;
  right: -10%;
  height: 140px;
  top: -140px;
  background: linear-gradient(180deg, transparent 0%, rgba(34,211,238,0.10) 45%, rgba(139,92,246,0.10) 55%, transparent 100%);
  animation: mindSweep 5.5s linear infinite;
}

/* HERO CONTRAST OVERLAY (2026-09-15, hero refinement pass) — sits above the
   orb/grid/sweep decorative layers (still below .intro-content, z-index:1)
   and darkens the area directly behind the headline/CTA so the brighter
   cyan/violet orb glow never fights with text legibility. Radial rather
   than flat so the very center (where the orb is brightest) gets the most
   correction while the outer decorative glow stays visible. */
/* CONTRAST PASS (2026-09-15, "HERO — CONTRAST PASS ONLY"): ~20% stronger
   darkness at every stop (0.55->0.66, 0.25->0.30) and the ellipse widened/
   lowered (70%->72% / 55%->60%, center 18%->22%) so the dark zone actually
   reaches down far enough to sit behind both CTA buttons, not just the
   headline — previously the coverage thinned out before the Coach button,
   which is exactly why it read as blending into the ambient background.
   Still a controlled, centered radial fade back to transparent by 85%, so
   the outer blue/cyan/violet ambience is untouched and the page never goes
   flat black. */
.mind-scan-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 72% 60% at 50% 22%, rgba(8,8,12,0.66) 0%, rgba(8,8,12,0.30) 55%, transparent 85%);
}
@keyframes mindSweep {
  0% { transform: translateY(0); }
  100% { transform: translateY(720px); }
}

@media (prefers-reduced-motion: reduce) {
  /* 2026-08-31 motion-polish pass: widened from just the mind-scan
     background to every pre-existing CONTINUOUS decorative loop site-wide
     (sparkles, CTA float/pulse, result-card glow, scan-dot pulse) — none
     of these carry information, so disabling them loses no functionality
     or hierarchy. One-shot entrance transitions (fadeInUp, the new card
     reveal/panel-open animations below) are separately guarded at
     `no-preference` at their own definitions, so they simply never play
     here rather than needing an override in both places. */
  .mind-scan-orb, .mind-scan-orb-2, .mind-scan-sweep, .sparkle, .btn-primary, .btn-primary::before,
  .result-card, .scan-dot {
    animation: none;
  }
}

.sparkles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  animation: sparkleFloat 3.5s ease-in-out infinite;
}
.sparkle.s1 { top: 18%; left: 15%; animation-delay: 0s; }
.sparkle.s2 { top: 30%; left: 82%; animation-delay: 0.8s; width: 3px; height: 3px; }
.sparkle.s3 { top: 55%; left: 8%; animation-delay: 1.6s; }
.sparkle.s4 { top: 68%; left: 88%; animation-delay: 2.4s; width: 5px; height: 5px; }
.sparkle.s5 { top: 12%; left: 55%; animation-delay: 3.2s; width: 3px; height: 3px; }
.sparkle.s6 { top: 80%; left: 45%; animation-delay: 4s; }

@keyframes sparkleFloat {
  0%, 100% { opacity: 0; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-22px) scale(1.4); }
}

.intro-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.intro-content > * { opacity: 0; animation: fadeInUp 0.6s ease forwards; }
.intro-content > *:nth-child(1) { animation-delay: 0.05s; }
.intro-content > *:nth-child(2) { animation-delay: 0.12s; }
.intro-content > *:nth-child(3) { animation-delay: 0.19s; }
.intro-content > *:nth-child(4) { animation-delay: 0.26s; }
.intro-content > *:nth-child(5) { animation-delay: 0.33s; }
.intro-content > *:nth-child(6) { animation-delay: 0.4s; }
.intro-content > *:nth-child(7) { animation-delay: 0.47s; }
.intro-content > *:nth-child(8) { animation-delay: 0.54s; }

/* ---------- HERO — product-first AI coach sell (2026-08-20 hierarchy fix)
   Replaces the old quiz-first hero (logo + one-line headline). Mobile is
   the design target: compact, vertically stacked, no wide layout, no
   empty space — see #screen-intro below for the tightened section
   spacing that keeps price+CTA reachable without a long scroll. Desktop
   gets the same stack for free since .screen already caps at 480px,
   centered by .app — no separate desktop rule needed here. */
.hero-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
}

/* HERO HEADLINE — Direction A, 3-clause (2026-09-11 system repositioning).
   Three stacked short lines rather than one dense sentence, per the
   explicit implementation rule: a 3-clause headline needs a typographic
   treatment where each clause is its own visual line/weight, not body
   text. Only the final line (the aspirational payoff) gets the
   gradient/emphasis treatment inherited from the old single-line hero —
   the first two stay plain white, so the eye lands on "become who you
   want to be" as the resolution, same hierarchy principle the old
   contrast/main split used, just applied across 3 lines instead of 2. */
.hero-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(26px, 8vw, 34px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: 340px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-headline-line { color: var(--text); }

.hero-headline-line--emphasis {
  background: linear-gradient(100deg, #fff 0%, var(--accent-2) 55%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(34,211,238,0.22));
}

/* Secondary headline (2026-09-14 hero hierarchy lock) — the mechanism/
   action promise, distinct from the primary aspirational H1 above and
   stronger than the muted .hero-support copy below: own visual weight,
   not merged into either. */
.hero-headline-secondary {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-2);
  line-height: 1.35;
  max-width: 320px;
  margin-top: 8px;
}

.hero-support {
  font-size: 13.5px;
  font-weight: 600;
  /* CONTRAST PASS (2026-09-15): var(--text-dim) (#9b98a8) read as faded
     against the darkened hero zone above — swapped for a lighter, higher-
     opacity neutral so it's instantly readable, while staying visibly
     dimmer than the cyan .hero-headline-secondary above it (still gray,
     not accent-2), preserving the existing headline -> support hierarchy. */
  color: rgba(224,223,232,0.86);
  line-height: 1.45;
  max-width: 310px;
  margin-top: 2px;
}

.hero-support--secondary {
  max-width: 340px;
  margin-top: 6px;
}

.hero-benefits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 2px 0;
  list-style: none;
}
.hero-benefits li {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.hero-benefits li::before {
  content: "✓";
  display: inline-block;
  color: var(--accent-2);
  font-weight: 800;
  margin-right: 7px;
}

.hero-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.3);
  border-radius: 999px;
  padding: 6px 16px;
  margin-top: 2px;
}



/* Trial/pricing line is PRESENTATION ONLY (2026-08-22, iteration 2) — no
   Stripe trial/quota mechanics exist yet behind this copy. */
.hero-trial-note { font-size: 11px; color: var(--text-dim); margin-top: -2px; }

.compare-label {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.compare-label--generic { color: var(--text-dim); background: rgba(155,152,168,0.12); }
.compare-label--mindtype { color: var(--accent-2); background: rgba(34,211,238,0.12); }

.compare-answer { font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.compare-answer--mindtype { color: var(--text); font-weight: 600; }

.compare-disclaimer {
  font-size: 10.5px;
  color: var(--text-dim);
  opacity: 0.75;
  text-align: center;
  margin-top: 2px;
}

/* Harmless defensive override, kept after the 2026-09-14 premium-card
   pass removed .btn-primary's own perpetual ctaFloat/ctaPulse animation:
   that animation used to win the `animation` shorthand over .intro-
   content > *'s fadeInUp entrance (same specificity, declared later),
   which skipped fadeInUp's opacity:0->1 and needed this explicit
   opacity:1 to avoid the button staying invisible. With no competing
   animation on .btn-primary anymore, fadeInUp now actually plays on the
   CTA too (consistent with every other .intro-content child) and its
   own forwards fill already lands on opacity:1 -- this rule is simply
   never wrong to keep as a safeguard. */
.intro-content > .hero-cta { opacity: 1; }

.btn-primary {
  position: relative;
  isolation: isolate;
  margin-top: 12px;
  width: 100%;
  max-width: 320px;
  padding: 17px 24px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(120deg, var(--accent), #8b5cf6 45%, var(--accent-2));
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(230,0,126,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-primary:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(230,0,126,0.3); }

/* PREMIUM CARD REFINEMENT (2026-09-14): the CTA previously ran an
   infinite floating blurred halo (ctaFloat, on the ::before glow layer)
   plus an infinite growing pulse ring (ctaPulse, on the button's own
   box-shadow) — the clearest "arcade/neon" signal on the whole site.
   Replaced with a single static, still-obviously-primary shadow; the CTA
   stays unmistakable through size/color/position, not a perpetual
   animation loop. Hover/focus get one deliberate, sharper state instead
   (brighter, not bigger) — matches "hover states can become slightly
   brighter/sharper," never oversized/pill-fluffy. The 2026-08-31 mobile
   hit-target-stability fix this replaced is preserved by construction:
   there is no transform-based float anywhere, so the tap target still
   never moves. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 28px rgba(230,0,126,0.42); }
}

.btn-ghost {
  width: 100%;
  max-width: 320px;
  padding: 12px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.microcopy { font-size: 12px; color: var(--text-dim); margin-top: 2px; opacity: 0.8; }

/* .quiz-intro-line ("Answer 10 quick questions...") removed 2026-09-18
   ("CLEAN UP PAGE FLOW / REMOVE DUPLICATION") -- it duplicated the
   personalization pitch already made in .quiz-teaser-section above the
   Coach block, right before the quiz begins. */

/* ---------- "Meet the 8 MindTypes" (intro screen) ----------
   Interactive tiles — start as a gradient chip (colors[] pair), then swap to
   the real card artwork as a cover background once it's confirmed loaded
   (see the has-art preload pattern in index.html's inline script). Tapping a
   tile opens the explore modal below. */
.mindtype-explore-section {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  text-align: center;
}

.mindtype-explore-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 6px;
}

.mindtype-explore-sub {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 18px;
}

/* Card-density pass (2026-09-02, revised): fixed 2 columns x 4 rows at
   EVERY breakpoint — explicit product decision (never 3, never 4, never a
   mobile-only carousel) even though the tall 1122:1402 aspect-ratio means a
   2-col mobile card is fairly narrow. Aspect-ratio is identical everywhere
   so the baked-in artwork is never cropped/stretched; only the column
   width and gap scale by breakpoint. (2026-09-14 archetype rebrand: ratio
   updated from 941:1672 to match the new approved card art's actual
   proportions — same discipline, new source images.) */
.mindtype-explore-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  gap: 14px;
  /* Scale-discipline pass (2026-09-02, AuraType-benchmarked): a mild trim
     vs. 100% width — enough for visible side margins/a cleaner gap without
     shrinking the already-narrow mobile card enough to hurt the baked-in
     artwork's readability (see the much larger cuts at 681px+ below, where
     there's more room to spare). */
  max-width: 94%;
  margin: 0 auto;
}

.mindtype-explore-card {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  width: 100%;
  aspect-ratio: 1122 / 1402;
  border-radius: 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.08);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.mindtype-explore-card:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .mindtype-explore-card:hover { border-color: rgba(255,255,255,0.28); }
}
.mindtype-explore-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.mindtype-explore-card-emoji { font-size: 18px; margin-bottom: 4px; padding: 0 12px; margin-top: 12px; }
.mindtype-explore-card-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
  padding: 0 12px;
}
.mindtype-explore-card-hook {
  font-size: 10.5px;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  padding: 0 12px;
  margin-bottom: 12px;
}

/* Once real artwork (name/tagline already baked in) has loaded, the tile IS
   the card — hide the HTML text overlay so nothing duplicates/clashes. */
.mindtype-explore-card.has-art .mindtype-explore-card-emoji,
.mindtype-explore-card.has-art .mindtype-explore-card-name,
.mindtype-explore-card.has-art .mindtype-explore-card-hook {
  display: none;
}

/* ---------- Brain-localized micro-motion, all 8 MindType cards (2026-09-03) ----------
   Approved after a V2 demo on the Overthinker card alone (V1's card-wide
   glow + border box-shadow was rejected: it read as "the card glowing",
   not "the brain activating"). This block is the same approved technique
   generalized to all 8 archetypes — the animation logic, timing and
   layer structure are IDENTICAL across cards; only two inputs differ per
   card, supplied inline per tile in index.html:
     --motion-mask     the radial-gradient ellipse (size + position)
                        confining every effect to that card's own brain
                        artwork, since each of the 8 PNGs draws the head/
                        brain in a slightly different position and scale.
     --motion-glow-rgb the "r,g,b" of that archetype's own dominant glow
                        color (eyeballed from its artwork, e.g. green for
                        Pattern Hunter, orange for Chaos Brain, cyan for
                        Hyperfocus), used only for the secondary card-edge
                        cue below — never a tint on the artwork itself.
   Defaults on the base class match the original Overthinker values, so a
   card is never left unstyled if an inline override is missing.
   HONEST LIMITATION (unchanged from the approved demo): every artwork is
   a single flattened raster PNG with no real brain silhouette/mask baked
   in, so --motion-mask is an eyeballed ellipse per card, not a pixel-exact
   segmentation. It stays credible because (a) it was measured by eye
   against each actual PNG rather than reused blindly, (b) the area outside
   the brain is already near-black in every one of the 8 artworks, so the
   soft-edged mask has no hard edge to expose itself, and (c) mix-blend-
   mode:screen only intensifies pixels already bright, i.e. the brain
   itself. Card border stays deliberately secondary in every case — the
   brain region is always the protagonist. Cycle ~5s: dim -> activation ->
   peak -> settle -> dim, one shared timeline across all layers. Gated at
   prefers-reduced-motion for every card. */
@media (prefers-reduced-motion: no-preference) {
  /* Approximate brain bounding region, shared by both layers below so the
     glow and the neural sweep are confined to the exact same area. */
  .mindtype-explore-card--motion {
    --motion-mask: radial-gradient(ellipse 38% 15% at 51% 39%, black 0%, black 45%, transparent 80%);
    --motion-glow-rgb: 167, 139, 250;
    position: relative;
    overflow: hidden;
    /* Secondary card-edge cue — intentionally subtle, never the main signal. */
    animation: exploreMotionCardEdge 5s ease-in-out infinite;
  }
  @keyframes exploreMotionCardEdge {
    0%, 100% { box-shadow: 0 0 0 1px rgba(var(--motion-glow-rgb), 0.12); }
    60% { box-shadow: 0 0 0 1px rgba(var(--motion-glow-rgb), 0.26), 0 0 12px 1px rgba(var(--motion-glow-rgb), 0.12); }
  }

  /* Layer 1 — gradual internal illumination: a duplicate of the SAME
     artwork (background-image:inherit copies the parent's computed
     background-image), masked down to just the brain region, blended
     with screen so only its bright pixels intensify, and animated via
     filter brightness/saturate — this actually brightens the real
     artwork pixels in that region, not a colored overlay pretending to. */
  .mindtype-explore-card--motion.has-art::before {
    content: "";
    position: absolute;
    inset: -8%;
    background-image: inherit;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    mix-blend-mode: screen;
    -webkit-mask-image: var(--motion-mask);
    mask-image: var(--motion-mask);
    animation: exploreMotionBrainActivate 5s ease-in-out infinite;
  }
  @keyframes exploreMotionBrainActivate {
    0%   { filter: brightness(0.9) saturate(0.85); opacity: 0.28; }
    35%  { filter: brightness(1.3) saturate(1.15); opacity: 0.62; }
    60%  { filter: brightness(2) saturate(1.55); opacity: 1; }
    85%  { filter: brightness(1.15) saturate(1.05); opacity: 0.5; }
    100% { filter: brightness(0.9) saturate(0.85); opacity: 0.28; }
  }

  /* Layer 2 — 1-2 discreet neural pulse sweeps, confined to the same
     brain mask so they read as activity travelling through the brain,
     not light crossing the whole card (see the rejected V1 shimmer). */
  .mindtype-explore-card--motion.has-art::after {
    content: "";
    position: absolute;
    inset: -8%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 44%, rgba(255,255,255,0.55) 50%, transparent 56%);
    background-size: 320% 320%;
    mix-blend-mode: screen;
    -webkit-mask-image: var(--motion-mask);
    mask-image: var(--motion-mask);
    animation: exploreMotionNeuralSweep 5s ease-in-out infinite;
  }
  @keyframes exploreMotionNeuralSweep {
    0%, 28% { background-position: -160% -160%; opacity: 0; }
    42% { opacity: 1; }
    62% { background-position: 160% 160%; opacity: 0.75; }
    72%, 100% { background-position: 160% 160%; opacity: 0; }
  }

  /* Very light breathing on the artwork itself — same timeline as the
     activation cycle above. */
  .mindtype-explore-card--motion.has-art {
    background-size: 100% 100%;
    animation: exploreMotionCardEdge 5s ease-in-out infinite, exploreMotionBreathe 5s ease-in-out infinite;
  }
  @keyframes exploreMotionBreathe {
    0%, 100% { background-size: 100% 100%; }
    60% { background-size: 102.5% 102.5%; }
  }

  @media (hover: hover) and (pointer: fine) {
    .mindtype-explore-card--motion:hover { animation-duration: 2.6s; }
    .mindtype-explore-card--motion.has-art:hover::before { animation-duration: 2.6s; }
    .mindtype-explore-card--motion.has-art:hover::after { animation-duration: 2.6s; }
    .mindtype-explore-card--motion.has-art:hover { animation-duration: 2.6s, 2.6s; }
  }
}

/* ---------- "MindTypes" gallery, tablet/desktop refinement (2026-09-02,
   AuraType scale-discipline pass) ----------
   Same fixed 2x4 grid everywhere — this tier only breaks the section out
   to full-bleed width and controls how large the 2 columns are allowed to
   get. Benchmarked visually against AuraType's own compact card/viewport
   ratio (not copying its colors/style, only its sense of scale/negative
   space) — MindType's cards were reading much larger than Aura's at the
   same viewport, so both the card max-width AND the grid's own max-width
   are deliberately tight here, never just "shrink the card but let the
   grid stretch to fill the row". Tablet values are the base for this
   media query; the min-width:1024px block below only overrides the sizing
   knobs for wider desktop. ---------- */
@media (min-width: 681px) {
  #screen-intro { overflow: visible; }

  .mindtype-explore-section {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .mindtype-explore-heading, .mindtype-explore-sub {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
  }

  /* Tablet (681-1023px): ~230px cards, well under the previous 380px. */
  .mindtype-explore-grid {
    gap: 18px;
    max-width: 500px;
    margin: 0 auto;
    padding: 6px 24px 24px;
  }

  .mindtype-explore-card {
    max-width: 230px;
    margin: 0 auto;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .mindtype-explore-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 30px rgba(139,92,246,0.2);
    }
  }
  .mindtype-explore-card-emoji,
  .mindtype-explore-card-name,
  .mindtype-explore-card-hook {
    padding: 0 14px;
  }
  .mindtype-explore-card-emoji { font-size: 18px; margin-top: 14px; margin-bottom: 4px; }
  .mindtype-explore-card-name { font-size: 12.5px; }
  .mindtype-explore-card-hook { font-size: 10.5px; margin-bottom: 14px; }
}

/* Desktop (>=1024px): ~270px cards, grid capped at 600px — the AuraType-
   benchmarked target (card/viewport ratio, negative space, density). Only
   overrides the sizing knobs above; hover/text-overlay rules are shared. */
@media (min-width: 1024px) {
  .mindtype-explore-grid {
    gap: 20px;
    max-width: 600px;
  }
  .mindtype-explore-card { max-width: 270px; }
  .mindtype-explore-card-emoji,
  .mindtype-explore-card-name,
  .mindtype-explore-card-hook {
    padding: 0 16px;
  }
  .mindtype-explore-card-emoji { font-size: 20px; margin-top: 16px; margin-bottom: 6px; }
  .mindtype-explore-card-name { font-size: 13.5px; }
  .mindtype-explore-card-hook { font-size: 11px; margin-bottom: 16px; }
}

/* ---------- HERO COMPOSITION REFINEMENT (2026-09-21) ----------
   Desktop only -- mobile keeps the existing compact rounded-card hero
   completely untouched (copy, typography, CTA wording, microcopy,
   responsive structure all identical everywhere). Breaks .mind-scan-
   hero-wrap out of .screen's 480px cap using the SAME full-bleed
   technique already proven by .hero-choices/.mindtype-explore-section
   just above (width: 100vw + negative margins off the 50% viewport-
   center point) -- removes the rounded-card box-shadow ring so the hero
   reads as one continuous background surface instead of a boxed SaaS
   card.

   PREVIOUS PASS (2026-09-21, "PREMIUM HERO REFINEMENT") only widened the
   *background* wrap while .intro-content's children kept their mobile
   max-widths (340-400px) -- the actual hero text still sat in a narrow
   centered column inside a much wider dark bar, which is why it "still
   felt unchanged". This pass widens the CONTENT itself (max-width,
   font-size, spacing) to actually fill the wider surface, and scales
   the primary CTA (via #hero-primary-cta only, never the shared
   .hero-choice-cta--primary class every other button on the page also
   uses) -- lower sections, #screen-intro's own 480px cap, and every
   other .hero-choice-cta button are untouched. */
@media (min-width: 1024px) {
  .mind-scan-hero-wrap {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 108px 24px 96px;
    border-radius: 0;
    box-shadow: none;
    /* BUG FOUND IN LOCAL PREVIEW (2026-09-21): once this wrap goes 100vw,
       .intro-content (a plain block box with no margin:auto) collapsed to
       the LEFT edge instead of staying centered -- at <=480px this was
       invisible because the wrap and the content were nearly the same
       width, so it never surfaced before. display:flex here (this wrap
       has no other children needing flex layout) makes the wrap itself
       center .intro-content horizontally, matching how #screen-intro
       already centers the wrap. */
    display: flex;
    justify-content: center;
  }
  .mind-scan-hero-wrap:hover { box-shadow: none; }

  .intro-content { gap: 18px; max-width: 700px; width: 100%; }

  .hero-eyebrow { font-size: 13px; letter-spacing: 0.16em; }

  .hero-headline {
    font-size: clamp(42px, 4.6vw, 58px);
    max-width: 680px;
    line-height: 1.16;
    margin-top: 14px;
  }
  .hero-headline-secondary {
    font-size: 20px;
    max-width: 560px;
    margin-top: 18px;
  }
  .hero-support {
    font-size: 15.5px;
    max-width: 560px;
    margin-top: 10px;
  }
  .hero-support--secondary { max-width: 600px; }

  .intro-content > .hero-choice-cta--primary { margin-top: 16px; }
  #hero-primary-cta {
    padding: 17px 34px;
    font-size: 17px;
    border-radius: 14px;
  }
  .intro-content > .hero-choice-microcopy { font-size: 13px; }
}

/* ---------- ARCHETYPE EXPLORE MODAL ----------
   MindType-specific choice: AuraType explores archetypes via separate
   /auras/{slug} pages (browser-navigation, dismissed via back button). This
   product instead uses an in-page modal so a tap/close never loses the
   homepage scroll position — same content (renderProfileInto), different
   container, closable via X, backdrop click, or Escape. */
.explore-modal { position: fixed; inset: 0; z-index: 50; display: none; }
.explore-modal.open { display: block; }
.explore-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,5,10,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.explore-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  margin: 6vh auto 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 480px) {
  .explore-modal-panel { border-radius: 22px; margin-top: 6vh; }
}
.explore-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(8,8,12,0.55);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.explore-modal-scroll { overflow-y: auto; padding: 0 22px 22px; }
.explore-modal-art { display: block; width: calc(100% + 44px); margin: 0 -22px 16px; }
.explore-modal-tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 16px;
}
.explore-modal-cta { margin: 18px 0 4px; animation: none; }

body.modal-open { overflow: hidden; }

/* ---------- QUIZ (now inline inside #screen-intro, not a separate
   screen — #screen-intro sets align-items:center for the hero text, so
   this wrapper needs an explicit full-width to keep the quiz full-bleed) ---------- */
.home-quiz {
  /* PREMIUM CARD REFINEMENT (2026-09-14): the soft violet/cyan gradient
     fill + 50px blurred drop shadow read as a "floating decorative
     card" -- replaced with a flat dark translucent surface, a single
     restrained cyan-tinted border, and a much tighter shadow. The
     sci-fi corner brackets (::before/::after below) are kept unchanged
     -- those are a deliberate neural/scan visual accent, not fluff. */
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 16px 14px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(34,211,238,0.16);
  background: rgba(19,19,32,0.6);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.home-quiz::before, .home-quiz::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(34,211,238,0.55);
  filter: drop-shadow(0 0 4px rgba(34,211,238,0.5));
}
.home-quiz::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: 10px 0 0 0; }
.home-quiz::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 10px 0; }

.quiz-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.quiz-status-row { display: flex; align-items: center; justify-content: space-between; }

.scan-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.scan-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px 1px rgba(34,211,238,0.9);
  animation: scanDotPulse 1.6s ease-in-out infinite;
}
@keyframes scanDotPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

.quiz-count {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, var(--accent-2), #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quiz-count-sep { color: var(--text-dim); margin: 0 3px; -webkit-text-fill-color: var(--text-dim); }

.progress-track {
  width: 100%;
  height: 5px;
  background: var(--bg-card);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  box-shadow: 0 0 10px 1px rgba(34,211,238,0.55);
  transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.quiz-body { transition: opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1), transform 0.24s cubic-bezier(0.4, 0, 0.2, 1); }
.quiz-body.quiz-fade { opacity: 0; transform: translateX(-32px) scale(0.97); }

.question-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.28;
  margin-bottom: 16px;
  text-shadow: 0 0 24px rgba(139,92,246,0.18);
}

.options { display: flex; flex-direction: column; gap: 10px; }

/* PREMIUM CARD REFINEMENT (2026-09-14): this is the most-repeated card on
   the site (up to 10 questions x several options) -- previously a
   decorative gradient fill + backdrop-blur + inset+outer glow, restyled
   to one flat translucent surface with a single subtle border. The
   left accent bar stays (a restrained, on-brand touch) but thinner and
   lower-opacity. Hover/selected still change border+background, just
   without the extra glow layer stacked on top. */
.option {
  position: relative;
  padding: 15px 18px 15px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.option::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-2), #a78bfa, var(--accent));
  opacity: 0.6;
}
.option:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .option:hover {
    border-color: rgba(34,211,238,0.45);
    background: rgba(34,211,238,0.05);
  }
}
.option.selected {
  border-color: var(--accent);
  background: rgba(230,0,126,0.10);
  animation: optionSelectPulse 0.32s ease-out;
}
@keyframes optionSelectPulse {
  0% { box-shadow: 0 0 0 0 rgba(230,0,126,0.45); }
  100% { box-shadow: 0 0 0 4px rgba(230,0,126,0); }
}

/* ---------- RESULT ---------- */
/* Section depth (2026-08-31): a faint per-screen tint on top of the
   shared .ambient-bg drift, so the intro/quiz and the result screen each
   read as their own "stage" of the experience rather than one continuous
   flat column — most visible on wide viewports either side of the 480px
   card, where .ambient-bg alone would otherwise look identical on every
   screen. */
#screen-result {
  align-items: center;
  padding-top: 32px;
  padding-bottom: 32px;
  gap: 20px;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(34,211,238,0.09), transparent 65%),
    radial-gradient(ellipse 80% 45% at 50% 100%, rgba(230,0,126,0.08), transparent 65%);
}
.section-divider {
  width: 100%;
  max-width: 320px;
  height: 1px;
  margin: 4px auto;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,0.35), rgba(139,92,246,0.35), transparent);
}

/* ================================================================
   SYSTEM REPOSITIONING (2026-09-11) — How MindType Works, Train,
   Visualize, Reset, Trust. Shared eyebrow/heading/sub pattern reuses the
   same typographic scale .mindtype-explore-heading/.compare-eyebrow
   already established (Space Grotesk 22px heading, var(--accent-2)
   eyebrow) so these new sections read as the same product, not a bolted-
   on redesign.
   ================================================================ */
.section-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 6px;
}
.section-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 5px;
}
.section-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-bottom: 14px;
}

.how-it-works-section, .pillar-section {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  text-align: center;
  margin-top: 6px;
}

.how-it-works-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.how-it-works-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent-2);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.how-it-works-card-icon { font-size: 16px; }
.how-it-works-card-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-2);
}
.how-it-works-card-promise { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 1px; }
.how-it-works-card-explanation { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.how-it-works-card-cta {
  appearance: none;
  align-self: flex-start;
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-2);
  cursor: pointer;
  padding: 5px 0 0;
}
.how-it-works-card-cta:hover, .how-it-works-card-cta:focus-visible { text-decoration: underline; }

/* MINDTYPE COACH — promoted from a tiny text link back to a large,
   substantial section (2026-09-17, "COACH MUST NOT BE REDUCED TO A TINY
   TEXT LINK"): wide, premium, clearly more important than a tertiary
   link, but centered/banner-style rather than left-aligned like the two
   offer panels above it -- a deliberate visual variation so it doesn't
   read as a third competing offer, just the next logical step after
   them. Same wide-breakout technique as .hero-choices (full-viewport-
   width + negative margins, justify-content:center + a fixed max-width),
   same translucent-panel language as .hero-panel for consistency. */
.coach-feature-section {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 16px;
  padding: 40px 32px;
  text-align: center;
  background: rgba(15,16,28,0.55);
  border: 1px solid rgba(34,211,238,0.2);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 34px rgba(34,211,238,0.16);
  transition: box-shadow 0.25s ease;
}
.coach-feature-section:hover {
  box-shadow: 0 0 75px rgba(34,211,238,0.55), 0 0 40px rgba(230,0,126,0.25);
}
@media (min-width: 681px) {
  /* margin:auto does NOT center an element wider than its containing
     block (#screen-intro is capped at 480px) -- browsers clamp auto
     margins to 0 instead of going negative, so the panel rendered flush
     against #screen-intro's own left edge, not centered (same bug
     already fixed once for .hero-choices). Fix: the breakout
     (width:100vw + negative margins) lives on this wrapper, which uses
     justify-content:center to center its child -- exactly the
     .hero-choices pattern -- while the child itself just carries a
     max-width, no width:100vw/margin:auto of its own. */
  .coach-feature-wrap {
    display: flex;
    justify-content: center;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 32px;
  }
  .coach-feature-section {
    width: 100%;
    max-width: 1040px;
    padding: 48px 60px;
  }
}
.coach-feature-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 7vw, 32px);
  line-height: 1.2;
  margin: 4px 0 12px;
  max-width: 100%;
  overflow-wrap: break-word;
  background: linear-gradient(100deg, #fff 0%, var(--accent-2) 55%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.coach-feature-subtext {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto 20px;
}

.coach-feature-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto 26px;
  padding: 0;
  list-style: none;
}
.coach-feature-tags li {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(34,211,238,0.08);
  border: 1px solid rgba(34,211,238,0.22);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

.mind-engine-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 6px;
  max-width: 640px;
  margin: 0 auto 28px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}
.mind-engine-arrow {
  color: var(--accent-2);
  font-weight: 400;
}
.coach-feature-section .hero-choice-cta { margin-bottom: 10px; }
/* Restores the annual Coach price (2026-09-18, "RESTORE COACH PRICE",
   corrected same day to confirm $44.50/year USD -- matches the live
   Stripe price read via /.netlify/functions/pricing-info, confirmed
   directly against production before this copy was written). Sits
   between the supporting copy and the CTA per the requested structure --
   clearly visible, but smaller/quieter than the CTA below it. */
.coach-feature-price { color: var(--text); font-weight: 700; font-size: 15px; margin: 0 0 18px; }

/* FIND YOUR MINDTYPE, now a Coach-journey teaser (2026-09-18, "FINAL
   COMMERCIAL HIERARCHY UPDATE") -- same proven wide-breakout + centering
   pattern as .coach-feature-wrap (see its comment for why margin:auto
   alone fails here), lighter weight than the Coach section below it
   (smaller padding/heading) since it's a bridge, not the main CTA. */
.quiz-teaser-section {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 16px;
  padding: 32px 28px;
  text-align: center;
  background: rgba(15,16,28,0.5);
  border: 1px solid rgba(34,211,238,0.18);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 30px rgba(34,211,238,0.14);
  transition: box-shadow 0.25s ease;
}
.quiz-teaser-section:hover {
  box-shadow: 0 0 70px rgba(34,211,238,0.5);
}
@media (min-width: 681px) {
  .quiz-teaser-wrap {
    display: flex;
    justify-content: center;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 32px;
  }
  .quiz-teaser-section {
    width: 100%;
    max-width: 860px;
    padding: 36px 48px;
  }
}
.quiz-teaser-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 6vw, 27px);
  line-height: 1.2;
  margin: 4px 0 14px;
  max-width: 100%;
  overflow-wrap: break-word;
  background: linear-gradient(100deg, #fff 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quiz-teaser-section .hero-choice-subtext { max-width: 520px; margin-left: auto; margin-right: auto; }
.quiz-teaser-section .hero-choice-cta { margin-top: 6px; }

/* HERO CHOICES (2026-09-17, "balanced premium panels" pass) — the
   borderless minimal columns before this read as a wireframe AND had a
   real legibility bug: with no background of their own, text sat
   directly on the animated WebGL shader behind #screen-intro, which
   isn't always dark at every point in its animation. Two large airy
   PANELS fix both: a subtle translucent background + very soft border
   each, wide enough to have real presence, no divider between them
   (the panels' own separation is the gap, not a rule line). Left
   (workbook) is wider (55/45 split) and a touch stronger; right (quiz)
   stays substantial, not tiny. */
.hero-choices {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-top: 18px;
  margin-bottom: 8px;
}
@media (min-width: 681px) {
  /* Breaks out of #screen-intro's 480px cap the same way
     .mindtype-explore-section already does (full-viewport-width +
     negative margins), THEN centers the pair via justify-content on
     that now-full-viewport-width row + a fixed flex-basis per panel --
     NOT max-width + margin:auto on .hero-choices itself, which silently
     fails to center once the row is wider than its 480px flex parent
     (auto margins resolve to 0 when free space would go negative, so
     the panels rendered flush-left/overflowing instead of centered --
     caught via pixel-sampling the rendered screenshot, not visible from
     the CSS alone). justify-content:center has no such edge case. */
  .hero-choices {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 32px;
    gap: 24px;
  }
  .hero-panel--primary { flex: 0 1 560px; }
  .hero-panel--secondary { flex: 0 1 460px; }
}
.hero-panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 32px 28px;
  border-radius: 20px;
  background: rgba(15,16,28,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.25s ease;
}
.hero-panel--primary { border-color: rgba(167,139,250,0.22); border-radius: 28px; box-shadow: 0 0 34px rgba(167,139,250,0.18); }
.hero-panel--primary:hover { box-shadow: 0 0 70px rgba(167,139,250,0.6); }
.hero-panel--secondary { border-color: rgba(34,211,238,0.16); box-shadow: 0 0 34px rgba(34,211,238,0.16); }
.hero-panel--secondary:hover { box-shadow: 0 0 70px rgba(34,211,238,0.55); }
/* Strong Mind now occupies the top-right/PAID panel (2026-09-18, "FINAL
   COMMERCIAL HIERARCHY UPDATE") -- indigo border/eyebrow instead of the
   cyan used for the free-side panel, same accent as the full Strong Mind
   section below, so both read as the same product. */
.hero-panel--paid { border-color: rgba(99,102,241,0.28); box-shadow: 0 0 34px rgba(99,102,241,0.2); }
.hero-panel--paid:hover { box-shadow: 0 0 70px rgba(99,102,241,0.65); }
.hero-panel--paid .hero-choice-eyebrow { color: #a5b4fc; }
.hero-panel--paid .hero-choice-benefits li::before { color: #818cf8; }
.hero-choice-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 10px;
}
.hero-panel--primary .hero-choice-eyebrow { color: #a78bfa; }
/* NOTE: background-clip must live in the SAME rule as the gradient's
   `background` shorthand -- `background: <gradient>` implicitly resets
   background-clip to its border-box default even if a separate,
   lower-priority-looking rule already set it to `text`, since shorthand
   properties reset every longhand they cover. Hence two full rules
   below rather than a shared base + per-variant background override. */
.overthinking-reset-heading, .hero-choice-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(25px, 6.5vw, 30px);
  line-height: 1.2;
  margin: 0 0 10px;
  color: transparent;
}
.overthinking-reset-heading {
  background: linear-gradient(100deg, #fff 0%, #a78bfa 55%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-choice-heading {
  background: linear-gradient(100deg, #fff 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-choice-subtext {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 12px;
}
.hero-choice-subtext:last-of-type { margin-bottom: 20px; }
/* Second line in the quiz panel (2026-09-17, "quiz -> Coach" copy pass) --
   explains why the quiz matters (it personalizes Coach), so it's styled a
   touch smaller/dimmer than the primary subtext line above it. */
.hero-choice-subtext--coach-link {
  font-size: 13.5px;
  opacity: 0.85;
}
/* Plain 3-item list, no nested boxes -- a checkmark marker only. */
.hero-choice-benefits {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-choice-benefits li {
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
  padding-left: 20px;
  position: relative;
}
.hero-choice-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-2); font-weight: 700; }
.hero-panel--primary .hero-choice-benefits li::before { color: #a78bfa; }
/* Modest, single-line CTA -- no forced full-width, no folded-in
   microcopy. Left (primary) is filled; right (secondary) is outlined,
   so the workbook stays visually first without any extra glow/border
   weight anywhere else. */
.hero-choice-cta {
  appearance: none;
  display: inline-block;
  padding: 14px 26px;
  border-radius: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 10px;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.hero-choice-cta--primary {
  border: none;
  background: linear-gradient(120deg, var(--accent), #8b5cf6 45%, var(--accent-2));
  color: #fff;
  box-shadow: 0 0 22px rgba(230,0,126,0.28), 0 0 22px rgba(34,211,238,0.2);
}
.hero-choice-cta--primary:hover {
  box-shadow: 0 0 34px rgba(230,0,126,0.45), 0 0 34px rgba(34,211,238,0.34);
  transform: translateY(-1px);
}
.hero-choice-cta--secondary {
  border: 1.5px solid var(--border);
  background: none;
  color: var(--text);
}
.hero-choice-cta--secondary:hover { transform: translateY(-1px); }
.hero-choice-microcopy { font-size: 12px; color: var(--text-dim); opacity: 0.85; margin: 0; }

/* Quiz CTA + Coach CTA glow pass (2026-09-18) -- the quiz-teaser button
   had no fill at all (border-only), reading as "missing background" next
   to the Coach section's already-filled gradient CTA below it; and
   neither had the soft glow the rest of the premium panel treatment uses
   elsewhere on the page. Quiz CTA gets its own cyan/blue fill (distinct
   from Coach/Reset/Strong Mind's pink-violet-cyan gradient) plus a
   matching cyan glow; Coach CTA keeps its existing gradient, just adds a
   glow in the same pink/violet/cyan tones. */
#hero-cta.hero-choice-cta--secondary {
  border: none;
  background: linear-gradient(120deg, #0ea5e9, var(--accent-2) 65%, #38bdf8);
  color: #fff;
  box-shadow: 0 0 24px rgba(34,211,238,0.45);
}
#hero-cta.hero-choice-cta--secondary:hover {
  box-shadow: 0 0 36px rgba(34,211,238,0.7);
}
#coach-feature-cta.hero-choice-cta--primary {
  box-shadow: 0 0 26px rgba(230,0,126,0.35), 0 0 26px rgba(34,211,238,0.25);
}
#coach-feature-cta.hero-choice-cta--primary:hover {
  box-shadow: 0 0 40px rgba(230,0,126,0.55), 0 0 40px rgba(34,211,238,0.42);
}

/* STRONG MIND -- premium PAID workbook. The giant standalone section (two-
   column cover+content layout) was removed 2026-09-18 ("CLEAN UP PAGE FLOW
   / REMOVE DUPLICATION") -- the top-right hero panel (.hero-panel--paid)
   is now the only commercial entry point; its own gradient CTA still uses
   .strong-mind-cta below. Extra product detail collapses into a native
   <details> disclosure inside that panel instead of a second full-width
   section -- .strong-mind-distinction/-benefits/-details are the same
   copy/classes the old section used, just reused in a compact context. */
.strong-mind-cta { background: linear-gradient(120deg, #6366f1, var(--accent-2) 65%, #818cf8); }
.strong-mind-detail { margin-top: 4px; }
.strong-mind-detail summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-2);
  list-style: none;
  text-shadow: 0 0 12px rgba(34,211,238,0.35);
  transition: text-shadow 0.2s ease;
}
.strong-mind-detail summary:hover { text-shadow: 0 0 20px rgba(34,211,238,0.7); }
.strong-mind-detail summary::-webkit-details-marker { display: none; }
.strong-mind-detail[open] summary { margin-bottom: 14px; }
.strong-mind-distinction { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0 0 14px; font-style: italic; }
.strong-mind-distinction strong { color: var(--text); font-weight: 700; font-style: normal; }
.strong-mind-benefits { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.strong-mind-benefits li { font-size: 13px; color: var(--text); line-height: 1.4; padding-left: 20px; position: relative; }
.strong-mind-benefits li::before { content: "✓"; position: absolute; left: 0; color: #818cf8; font-weight: 700; }
.strong-mind-details { font-size: 12px; color: var(--text-dim); opacity: 0.8; line-height: 1.5; margin: 0; }

/* Train / Visualize / Reset previews — shared tab + step-flow engine
   (train.js/visualize.js reuse this exact markup shape; reset.js reuses
   .pillar-complete only, since it's timed rather than stepped). */
.pillar-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}
.pillar-tab {
  appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pillar-tab.active {
  color: var(--text);
  border-color: var(--accent-2);
  background: rgba(34,211,238,0.08);
}

.pillar-exercise, .pillar-step, .pillar-complete {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
}
.pillar-step-count {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.pillar-step-prompt { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.pillar-step-hint { font-size: 12px; color: var(--text-dim); line-height: 1.4; margin-bottom: 8px; }
.pillar-step-input {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 11px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
}
.pillar-step-input:focus { outline: none; border-color: var(--accent-2); }
.pillar-step-input::placeholder { color: var(--text-dim); opacity: 0.7; }
.pillar-step-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.pillar-step-back {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
}
.pillar-step-next {
  appearance: none;
  margin-left: auto;
  background: var(--accent-2);
  border: none;
  border-radius: 6px;
  color: #05070D;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  padding: 9px 16px;
  cursor: pointer;
}

.pillar-complete { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pillar-complete-check {
  font-size: 20px;
  color: var(--accent-2);
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1.5px solid var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pillar-complete-text { font-size: 13.5px; color: var(--text); line-height: 1.45; max-width: 320px; }
.pillar-restart {
  appearance: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  margin-top: 2px;
}
.pillar-restart:hover { border-color: var(--accent-2); }

/* Visualize-specific: the stage label (VISION/IDENTITY/MINDSET/ACTION) and
   the mandatory grounding note — required content, not decorative, so it
   always renders once a session completes. */
.visualize-stage { color: var(--accent-2); }
.visualize-grounding-note {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 320px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
}

/* Reset preview */
.reset-idle-label { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.reset-start-btn { width: auto; padding: 14px 26px; margin: 0; }
.reset-active { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 0; }
.reset-progress-track {
  width: 100%;
  max-width: 280px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.reset-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-2), #3b82f6);
  transition: width 0.25s linear;
}
.reset-line {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.5;
  min-height: 48px;
  max-width: 320px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reset-line--visible { opacity: 1; transform: translateY(0); }

/* Trust section — real, non-fabricated trust points only (see index.html
   comment). Same card language as everything above. */
.trust-section {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  text-align: center;
  margin-top: 6px;
}
.trust-grid { display: flex; flex-direction: column; gap: 8px; }
.trust-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent-2);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}
.trust-item-icon { font-size: 16px; flex-shrink: 0; }
.trust-item-text { font-size: 12px; color: var(--text-dim); line-height: 1.45; }

.result-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; perspective: 1200px; }

.result-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  /* Card-density pass (2026-09-02): reduced from a fixed 400px floor —
     350px still guarantees the gradient/blob background never looks
     cramped, while trimming ~50px of dead vertical space versus before. */
  min-height: 350px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* PREMIUM CARD REFINEMENT (2026-09-14): radius brought within the
     16-20px major-container ceiling (was 26px), and the infinite
     resultGlowPulse animation (fully removed, including its keyframes)
     -- it ran forever even on the real-artwork state, the textbook "arcade/neon"
     issue. A single static shadow is still clearly premium/elevated
     without the perpetual pulsing. The per-archetype --rc-c1/--rc-c2
     brand-color gradient itself is UNCHANGED -- that is real MindType
     neural-brand identity, not decoration. */
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  background: linear-gradient(158deg, var(--rc-c1, #6d28d9), var(--rc-c2, #22d3ee));
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1.6px),
    linear-gradient(158deg, var(--rc-c1, #6d28d9), var(--rc-c2, #22d3ee));
  background-size: 16px 16px, 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 22px 20px;
  color: #fff;
  font-family: 'Manrope', sans-serif;
}

.rc-art-img { display: none; width: 100%; border-radius: inherit; }
.result-card.has-art { padding: 0; min-height: 0; }
.result-card.has-art .rc-fallback { display: none; }

.rc-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.rc-blob { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; }
.rc-blob-1 {
  width: 65%; height: 65%; top: -22%; left: -20%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.16) 45%, rgba(255,255,255,0) 72%);
}
.rc-blob-2 {
  width: 58%; height: 58%; bottom: -20%; right: -16%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0) 72%);
}

.rc-watermark {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.8;
  position: relative;
  z-index: 1;
}

.rc-emoji { font-size: 44px; margin: 18px 0 10px; position: relative; z-index: 1; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25)); }

.rc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.rc-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.18;
  text-shadow: 0 2px 14px rgba(0,0,0,0.22);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.rc-tagline {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  opacity: 0.94;
  max-width: 92%;
  position: relative;
  z-index: 1;
}

.rc-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 20px;
  padding: 16px 16px 14px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}

.rc-desc { font-size: 13px; line-height: 1.55; opacity: 0.96; text-align: left; }

.rc-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 20px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.88;
}

.result-quote {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  color: var(--text);
  max-width: 320px;
  line-height: 1.4;
}

.result-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }

/* ---------- ACCURACY FEEDBACK ---------- */
.accuracy-box {
  width: 100%;
  max-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.accuracy-question { font-size: 14px; font-weight: 700; }
.accuracy-stars { display: flex; gap: 6px; }
.star {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
  padding: 2px;
  transition: color 0.15s ease, transform 0.1s ease;
}
.star.active { color: var(--accent); transform: scale(1.08); }
.accuracy-detail { display: none; flex-direction: column; gap: 8px; width: 100%; }
.accuracy-text {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  resize: none;
}
.accuracy-text:focus { outline: none; border-color: var(--accent-2); }
.accuracy-submit { padding: 8px; font-size: 13px; }
.accuracy-thanks { font-size: 13px; font-weight: 700; color: var(--text-dim); }

/* ---------- DAILY MIND (free, all 5 sections, 2026-08-18) ----------
   --dm-c1/--dm-c2 are set inline per-archetype (daily-mind.js), same
   pattern as .result-card's --rc-c1/--rc-c2, so this reads as personalized
   to THIS result rather than a generic text block. */
.daily-mind-wrap {
  width: 100%;
  max-width: 460px;
  display: none;
  flex-direction: column;
  gap: 12px;
}
/* 2026-09-11 Train fold-in: sits above .daily-mind-header (not inside it —
   that flex row is already a 2-item space-between layout for title+badge). */
.daily-mind-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dm-c2, var(--accent-2));
  opacity: 0.85;
  margin-bottom: 2px;
}
.daily-mind-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.daily-mind-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
}
.daily-mind-day-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(120deg, var(--dm-c1, var(--accent)), var(--dm-c2, var(--accent-2)));
  white-space: nowrap;
}
.daily-mind-milestone {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
}
.daily-mind-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.daily-mind-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px 14px 20px;
  text-align: left;
  overflow: hidden;
}
.daily-mind-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--dm-c1, var(--accent)), var(--dm-c2, var(--accent-2)));
}
.daily-mind-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dm-c2, var(--accent-2));
  margin-bottom: 6px;
}
.daily-mind-text { font-size: 14.5px; line-height: 1.6; color: var(--text); }

/* 2026-09-11 Train fold-in: promotes "One Move" into a real interactive
   completion action instead of a pure read. */
.daily-mind-done-btn {
  appearance: none;
  margin-top: 10px;
  background: none;
  border: 1px solid var(--dm-c2, var(--accent-2));
  border-radius: 999px;
  color: var(--dm-c2, var(--accent-2));
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 14px;
  cursor: pointer;
}
.daily-mind-done-btn:hover:not(:disabled) { background: rgba(34,211,238,0.10); }
.daily-mind-done-btn.done {
  border-color: transparent;
  background: rgba(34,211,238,0.14);
  cursor: default;
}

/* ---------- YOUR MIND PROFILE (Phase 3, quiz-derived only, 2026-08-19)
   Same visual grammar as .daily-mind-card/.profile-block on purpose — this
   is a new content BLOCK, not a new visual language. --mp-c1/--mp-c2 are
   set inline per-type (mind-profile.js), same pattern as --dm-c1/--dm-c2. */
.mind-profile-wrap {
  width: 100%;
  max-width: 460px;
  display: none;
  flex-direction: column;
  gap: 10px;
}
.mind-profile-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
}
.mind-profile-type {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px 14px 20px;
  text-align: left;
  overflow: hidden;
}
.mind-profile-type::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--mp-c1, var(--accent)), var(--mp-c2, var(--accent-2)));
}
.mind-profile-role {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mp-c2, var(--accent-2));
  margin-bottom: 6px;
}
.mind-profile-name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.mind-profile-tagline { font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.mind-profile-fallback {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
}
.mind-profile-fallback-text { font-size: 14px; line-height: 1.6; color: var(--text-dim); }

/* ---------- ASK MINDTYPE (the one coaching product — hierarchy fix
   2026-08-20) ----------
   Retired: the separate one-shot "Ask Your Mind" card (.ask-mind-*) that
   used to render here. Ask MindType is now the only coaching entry point,
   rendered first on the result screen (see index.html/app.js), and is
   deliberately the strongest-looking card on the page — stronger border,
   glow, badge, headline — since it is the primary product value after the
   quiz result, not a secondary content block like Daily Mind or the Mind
   Profile below it. --amt-c1/--amt-c2 set inline per-primary-type
   (ask-mindtype.js), same pattern as --mp-c1/--mp-c2/--dm-c1/--dm-c2. */
.ask-mindtype-wrap {
  width: 100%;
  max-width: 460px;
  display: none;
  flex-direction: column;
  gap: 10px;
}
.ask-mindtype-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px 18px 20px;
  text-align: left;
  overflow: hidden;
}
.ask-mindtype-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--amt-c1, var(--accent)), var(--amt-c2, var(--accent-2)));
}
.ask-mindtype-disclaimer { font-size: 12px; line-height: 1.4; color: var(--text-dim); font-style: italic; margin-bottom: 6px; }

/* 2026-08-31 commercial-story pass — the insight-to-application bridge
   shown above the Ask MindType card, right after the result reveal. */
.ask-mindtype-transition {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: var(--text-dim);
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.4;
}

/* Sell state — stronger than any other result-screen card on purpose. */
.ask-mindtype-hero {
  border: 1.5px solid var(--amt-c2, var(--accent-2));
  padding: 20px 22px 22px 24px;
  box-shadow: 0 14px 36px -14px var(--amt-c2, var(--accent-2)), 0 0 0 1px rgba(255,255,255,0.02);
}
.ask-mindtype-hero::before { width: 5px; }

.ask-mindtype-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, var(--amt-c1, var(--accent)), var(--amt-c2, var(--accent-2)));
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.ask-mindtype-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 8px;
}
.ask-mindtype-body { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); margin-bottom: 14px; }
.ask-mindtype-cta { width: 100%; max-width: none; font-size: 15.5px; }
.ask-mindtype-cta-note { font-size: 12px; color: var(--text-dim); text-align: center; margin: 8px 0 16px; }

.ask-mindtype-usecases {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.ask-mindtype-usecase {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.ask-mindtype-usecase:hover, .ask-mindtype-usecase:focus-visible {
  border-color: var(--amt-c2, var(--accent-2));
  outline: none;
}

.ask-mindtype-memory-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--text-dim);
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
}

.ask-mindtype-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ask-mindtype-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ask-mindtype-back-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
}
.ask-mindtype-panel-mode { font-size: 13px; font-weight: 700; color: var(--amt-c2, var(--accent-2)); }

.ask-mindtype-thread { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.ask-mindtype-user-msg {
  align-self: flex-end;
  max-width: 88%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dim);
}
.ask-mindtype-status { font-size: 13px; color: var(--text-dim); font-style: italic; }
.ask-mindtype-reply {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amt-c2, var(--accent-2));
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-line;
}
.ask-mindtype-safety-reply {
  border-left: 3px solid #e5484d;
  background: rgba(229, 72, 77, 0.06);
}
.ask-mindtype-error { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.ask-mindtype-retry { margin-top: 6px; }

.ask-mindtype-textarea {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
}
.ask-mindtype-textarea:focus { outline: none; border-color: var(--amt-c2, var(--accent-2)); }
.ask-mindtype-submit { width: 100%; }
.ask-mindtype-submit:disabled { opacity: 0.6; }

.ask-mindtype-memory-proposal {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ask-mindtype-memory-proposal-text { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.ask-mindtype-memory-proposal-actions { display: flex; gap: 8px; }
.ask-mindtype-memory-proposal-actions button { flex: 1; font-size: 13px; }

.ask-mindtype-memory-panel {
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ask-mindtype-memory-panel-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ask-mindtype-memory-empty { font-size: 13px; color: var(--text-dim); font-style: italic; }
.ask-mindtype-memory-list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.ask-mindtype-memory-list strong { color: var(--text); }
.ask-mindtype-memory-clear { width: 100%; font-size: 13px; margin-top: 4px; }

.ask-mindtype-paywall {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.ask-mindtype-paywall-title { font-size: 15px; line-height: 1.5; font-weight: 700; color: var(--text); }
.ask-mindtype-paywall-price {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--amt-c2, var(--accent-2));
}
.ask-mindtype-paywall-body { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.ask-mindtype-paywall-includes { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin-top: -4px; }
.ask-mindtype-unlock-btn { width: 100%; }
.ask-mindtype-restore-btn { width: 100%; font-size: 13px; }
.ask-mindtype-restore-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ask-mindtype-restore-email {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.ask-mindtype-restore-submit { width: 100%; font-size: 13px; }
.ask-mindtype-restore-note { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.ask-mindtype-paywall-cancel-note { font-size: 12px; color: var(--text-dim); margin-top: -6px; }

/* ---------- Trial email gate (2026-08-22) — first screen shown to a
   visitor with no account/premium token yet, mirrors the restore-access
   form's styling for visual consistency. ---------- */
.ask-mindtype-trial-gate-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ask-mindtype-trial-gate-email {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.ask-mindtype-trial-gate-submit { width: 100%; }
.ask-mindtype-trial-gate-note { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }

/* Daily-limit stop (trial_daily_limit_reached) — a plain, non-urgent pause,
   never a paywall (the trial continues tomorrow), so no CTA/price here. */
.ask-mindtype-daily-limit { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

/* ---------- FULL PROFILE (ungated result depth) ---------- */
.full-profile-wrap {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.full-profile-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}
.full-profile { display: flex; flex-direction: column; gap: 12px; }
.profile-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px 14px;
  text-align: left;
}
.profile-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 6px;
}
.profile-text { font-size: 14px; line-height: 1.6; color: var(--text); }
.profile-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.profile-list li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  padding-left: 16px;
  position: relative;
}
.profile-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
}

/* ---------- EMAIL CAPTURE ---------- */
.capture-box {
  width: 100%;
  max-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.capture-title { font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.capture-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-bottom: 6px; }
.capture-submit { margin-top: 4px; padding: 14px; font-size: 15px; box-shadow: none; }
.capture-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.capture-form input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
}
.capture-form input:focus { outline: none; border-color: var(--accent-2); }
.capture-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}
.capture-box.submitted .capture-form { display: none; }
.capture-box.submitted .capture-desc { display: none; }
.capture-box.submitted .capture-success { display: flex; }

@media (min-width: 420px) {
  .logo { font-size: 60px; }
}

@media (max-height: 700px) {
  #screen-intro { padding-top: 12px; padding-bottom: 16px; gap: 12px; }
}

/* ================================================================
   PHASE 5 — RETURNING-USER NAV (2026-08-31)
   ================================================================ */

.top-utility-bar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  padding: 14px 16px;
  /* Deliberately no background/backdrop — a full bar would visually
     compete with the hero below it. Just the one control, top-right. */
}
.top-utility-signin {
  background: rgba(19,19,32,0.55);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  min-height: 36px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.top-utility-signin:hover, .top-utility-signin:focus-visible {
  color: var(--text);
  border-color: var(--accent-2);
}
.top-utility-signin.top-utility-signedin {
  color: var(--accent-2);
  border-color: rgba(34,211,238,0.4);
}
/* Reserve clearance above the hero so the fixed top-right control never
   overlaps/clips the centered headline on narrow viewports — wins over
   the existing `max-height: 700px` padding-top rule via source order
   (equal specificity, this rule is later in the file), so short+narrow
   phones in landscape still get clearance too. */
@media (max-width: 479px) {
  #screen-intro { padding-top: 52px; }
}

.signin-modal-panel { max-width: 400px; }
.signin-modal-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin: 18px 0 6px;
}
.signin-modal-body { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); margin-bottom: 14px; }
.signin-modal-form { display: flex; flex-direction: column; gap: 8px; }
.signin-modal-email {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.signin-modal-submit { width: 100%; }
.signin-modal-note { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }

/* "My MindType" fallback for a signed-in visitor with no saved quiz
   result on this device — hides the sections that need one, in favor of
   the note + the still-fully-functional Ask MindType card below. */
#screen-result.profile-less .result-card,
#screen-result.profile-less .result-actions,
#screen-result.profile-less #result-quote,
#screen-result.profile-less .microcopy,
#screen-result.profile-less #mind-profile-wrap,
#screen-result.profile-less #daily-mind-wrap,
#screen-result.profile-less #accuracy-box,
#screen-result.profile-less .full-profile-wrap,
#screen-result.profile-less #capture-box,
#screen-result.profile-less #btn-retake {
  display: none !important;
}
.no-local-profile-note { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin: 4px 0 14px; }
.no-local-profile-note a { color: var(--accent-2); text-decoration: underline; }

/* ================================================================
   PHASE 5 — VISUAL/MOTION POLISH (2026-08-31)
   Everything below is purely decorative (opacity/transform only, no
   layout-affecting properties) and guarded at `no-preference` so a
   reduced-motion visitor gets none of it by default rather than needing
   a matching override — functionality/hierarchy are unaffected either
   way, only entrance/hover flourish changes.
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal (motion.js's initScrollReveals()) — starts hidden,
     .is-revealed is added once by the IntersectionObserver the first time
     each element actually enters the viewport. Guarded here at
     no-preference rather than unhidden via a `reduce` override, so a
     reduced-motion visitor never has anything to reveal — everything is
     simply visible immediately, by construction. */
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Result reveal — a light stagger right after the result card itself,
     so the reveal reads as one staged moment rather than everything
     popping in at once. The result card's own entrance is handled by
     motion.js's playEntrance()/.result-card--entering below, since it
     also needs pointer-tilt afterward (see the note on that class). */
  #result-quote { animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
  .result-actions { animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; }
  .ask-mindtype-panel { animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }

  /* One-shot entrance classes, added/removed by motion.js's
     playEntrance() — NOT left on permanently like a plain `animation:
     ... both` rule would be, because a CSS animation (even resolved to
     its end value) blocks any later inline-style write to the same
     property forever. Removing the class after it plays frees `transform`
     back to attachPointerTilt()'s pointer-driven inline styles. */
  .result-card--entering {
    animation: resultCardEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .ask-mindtype-card--entering {
    animation: cardEntrance 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes resultCardEntrance {
    from { opacity: 0; transform: scale(0.93) translateY(22px); filter: brightness(0.7) saturate(0.7); }
    to { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1) saturate(1); }
  }
  @keyframes cardEntrance {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Pointer-reactive tilt (desktop/mouse only, attachPointerTilt() in
     motion.js) needs a smoothing transition on `transform` once it takes
     over — declared here rather than inline so mouseleave's reset (also
     set inline, to `""`, meaning "fall back to this rule") has somewhere
     to animate back to. */
  @media (hover: hover) and (pointer: fine) {
    .result-card, .ask-mindtype-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    .ask-mindtype-usecase { transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
    .ask-mindtype-usecase:hover { transform: translateY(-2px); }
    .top-utility-signin { transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.18s ease; }
    .top-utility-signin:hover { transform: translateY(-1px); }
  }
}