/*
 * ADHD test — landing page styles.
 *
 * Loaded after /shared/tests-shell.css. Overrides --test-* tokens to the
 * ADHD palette (cool electric blue → vivid violet, electric-cyan accent)
 * and supplies the landing-specific component styles. Calmer hand than
 * the attachment-style sheet — no animated gradients, no pill clouds.
 * Substance-forward; the seven theme bars are the visual centrepiece.
 * Live "people taking now" counter is on, same shared engine pattern
 * as attachment-style.
 */

/* ===== PALETTE ===== */
:root {
  --test-primary: #2563EB;          /* electric blue */
  --test-primary-dark: #1D4ED8;
  --test-primary-light: #DBEAFE;
  --test-accent: #7C3AED;           /* vivid violet */
  --test-accent-light: #EDE9FE;
  --test-cta-1: #2563EB;
  --test-cta-2: #7C3AED;
  --test-cyan: #06B6D4;             /* electric cyan accent */
  --test-lime: #84CC16;             /* lime accent (used for prominent band) */

  --test-dark: #0B1220;
  --test-bg: #F7F9FC;
  --test-surface: #FFFFFF;
  --test-border: #E2E8F0;
  --test-border-strong: #CBD5E1;
  --test-text: #0F172A;
  --test-text-light: #475569;
  --test-text-muted: #94A3B8;

  --test-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
  --test-shadow-lg: 0 18px 48px rgba(37, 99, 235, 0.16);

  --test-container: 1080px;
  --test-container-narrow: 760px;

  /* Per-theme bar hues — distinct, cool-spectrum, ordered. */
  --theme-time:           #2563EB;
  --theme-working-memory: #4F46E5;
  --theme-executive:      #7C3AED;
  --theme-focus:          #9333EA;
  --theme-energy:         #06B6D4;
  --theme-emotional:      #0EA5E9;
  --theme-sensory:        #14B8A6;
}

/* ===== TYPOGRAPHY ===== */
html { scroll-padding-top: 80px; }

body {
  background: var(--test-bg);
  color: var(--test-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--test-font);
  color: var(--test-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

p { color: var(--test-text-light); }

/* ===== NAVBAR ===== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--test-border);
}

.nav-container {
  max-width: var(--test-container);
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--test-text);
}
.nav-logo span {
  background: linear-gradient(135deg, var(--test-cta-1), var(--test-cta-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav-logo:hover { color: var(--test-text); }

.nav-menu { display: flex; align-items: center; gap: 1.75rem; }
.nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--test-text-light);
  transition: color 150ms ease;
}
.nav-link:hover, .nav-link.active { color: var(--test-primary); }

.nav-cta {
  background: linear-gradient(135deg, var(--test-cta-1), var(--test-cta-2));
  color: #FFFFFF !important;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.32);
  filter: brightness(1.05);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--test-text);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--test-surface);
    border-bottom: 1px solid var(--test-border);
    padding: 0.5rem 0;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .nav-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-link { padding: 0.85rem 1.5rem; }
}

/* ===== HERO ===== */
.hero-section {
  padding: 5rem 0 4rem;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(37, 99, 235, 0.10), transparent 55%),
    radial-gradient(ellipse at 92% 30%, rgba(124, 58, 237, 0.10), transparent 55%),
    var(--test-bg);
  border-bottom: 1px solid var(--test-border);
}

.hero {
  max-width: var(--test-container-narrow);
  margin: 0 auto;
  text-align: center;
}

.hero-kicker {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--test-primary);
  background: var(--test-primary-light);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.hero h1 { margin-bottom: 1.25rem; }
.hero-accent {
  background: linear-gradient(135deg, var(--test-cta-1), var(--test-cta-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  font-size: 1.125rem;
  color: var(--test-text-light);
  max-width: 620px;
  margin: 0 auto 2rem;
  line-height: 1.65;
}

.hero-cta {
  margin: 0 auto 1.25rem;
  text-decoration: none;
}

.hero-live-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--test-text-light);
}
.hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ECB71;
  animation: adhd-pulse-dot 3s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes adhd-pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(78, 203, 113, 0.5); }
  50% { opacity: 0.85; box-shadow: 0 0 0 5px rgba(78, 203, 113, 0); }
}

.hero-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  font-size: 0.9rem;
  color: var(--test-text-light);
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 14px;
  padding: 0.85rem 1.25rem;
  box-shadow: var(--test-shadow);
}
.hero-meta-item strong { color: var(--test-text); font-weight: 600; }
.hero-meta-divider {
  width: 1px;
  height: 14px;
  background: var(--test-border-strong);
}
@media (max-width: 600px) {
  .hero-meta { flex-direction: column; gap: 0.5rem; padding: 0.85rem 1rem; }
  .hero-meta-divider { display: none; }
}

/* ===== SECTIONS ===== */
.section {
  padding: 4.5rem 0;
}
.section--alt { background: var(--test-surface); border-top: 1px solid var(--test-border); border-bottom: 1px solid var(--test-border); }

.section-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--test-accent);
  margin-bottom: 0.75rem;
}
.section-title { text-align: center; margin-bottom: 0.75rem; }
.section-subtitle {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 3rem;
  color: var(--test-text-light);
  font-size: 1.05rem;
  line-height: 1.65;
}

.section .container > .section-kicker { display: block; text-align: center; }

/* ===== WHAT YOU'LL GET — output cards ===== */
.output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: var(--test-container-narrow);
  margin: 0 auto;
}
@media (max-width: 760px) {
  .output-grid { grid-template-columns: 1fr; }
}

.output-card {
  position: relative;
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 18px;
  padding: 2rem 1.75rem;
  box-shadow: var(--test-shadow);
  display: flex;
  flex-direction: column;
}
.output-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 4px solid;
  pointer-events: none;
}
.output-card--screen::before { border-top-color: var(--test-primary); }
.output-card--profile::before { border-top-color: var(--test-accent); }

.output-card-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--test-text-muted);
  margin-bottom: 0.75rem;
}
.output-card h3 { margin-bottom: 0.5rem; }
.output-card-lede {
  color: var(--test-text);
  font-weight: 500;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.output-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.output-card-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--test-text-light);
  line-height: 1.55;
}
.output-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--test-cta-1), var(--test-cta-2));
}
.output-card-foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--test-border);
  font-size: 0.85rem;
  color: var(--test-text-muted);
}

/* ===== SEVEN THEMES — visual centrepiece ===== */
.section--themes {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.06), transparent 60%),
    var(--test-bg);
}

.themes-preview {
  max-width: var(--test-container-narrow);
  margin: 0 auto;
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 22px;
  padding: 1.5rem 1.75rem;
  box-shadow: var(--test-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.theme-row {
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--test-border);
}
.theme-row:last-child { border-bottom: none; }

.theme-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
  gap: 0.75rem;
}

.theme-row-label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--test-text);
}

.theme-row-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.tag-low {
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
}
.tag-moderate {
  color: #4338CA;
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
}
.tag-prominent {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--test-cta-1), var(--test-cta-2));
  border: 1px solid transparent;
}

.theme-bar-track {
  width: 100%;
  height: 10px;
  background: #EEF2F7;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.theme-bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Per-theme fill colours, applied via [data-theme]. */
.theme-row[data-theme="time"] .theme-bar-fill {
  background: linear-gradient(90deg, #60A5FA, var(--theme-time));
}
.theme-row[data-theme="working-memory"] .theme-bar-fill {
  background: linear-gradient(90deg, #818CF8, var(--theme-working-memory));
}
.theme-row[data-theme="executive"] .theme-bar-fill {
  background: linear-gradient(90deg, #A78BFA, var(--theme-executive));
}
.theme-row[data-theme="focus"] .theme-bar-fill {
  background: linear-gradient(90deg, #C084FC, var(--theme-focus));
}
.theme-row[data-theme="energy"] .theme-bar-fill {
  background: linear-gradient(90deg, #67E8F9, var(--theme-energy));
}
.theme-row[data-theme="emotional"] .theme-bar-fill {
  background: linear-gradient(90deg, #7DD3FC, var(--theme-emotional));
}
.theme-row[data-theme="sensory"] .theme-bar-fill {
  background: linear-gradient(90deg, #5EEAD4, var(--theme-sensory));
}

.theme-row-note {
  margin-top: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--test-text-light);
}

.themes-preview-foot {
  text-align: center;
  font-size: 0.85rem;
  color: var(--test-text-muted);
  margin-top: 1.5rem;
  font-style: italic;
}

/* ===== SCIENCE SECTION ===== */
.science-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: var(--test-container);
  margin: 0 auto 2.5rem;
}
@media (max-width: 900px) {
  .science-grid { grid-template-columns: 1fr; }
}
.science-block {
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 16px;
  padding: 1.75rem;
}
.science-block h3 {
  margin-bottom: 0.85rem;
  color: var(--test-primary);
}
.science-block p {
  margin-bottom: 0.85rem;
  font-size: 0.96rem;
  line-height: 1.65;
}
.science-block p:last-child { margin-bottom: 0; }

.science-references {
  max-width: var(--test-container-narrow);
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--test-border);
}
.science-ref-title {
  font-weight: 600;
  color: var(--test-text);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.science-references ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.science-references li {
  font-size: 0.88rem;
  color: var(--test-text-light);
  line-height: 1.55;
}

/* ===== FAQ ===== */
.faq-list {
  max-width: var(--test-container-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.faq-item {
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.faq-item[open] {
  border-color: var(--test-primary-light);
  box-shadow: var(--test-shadow);
}
.faq-item summary {
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  font-weight: 600;
  color: var(--test-text);
  list-style: none;
  position: relative;
  font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--test-primary);
  font-weight: 400;
  font-size: 1.4rem;
  transition: transform 180ms ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  padding: 0 1.4rem 1.2rem;
  margin: 0;
  color: var(--test-text-light);
  line-height: 1.65;
}

/* ===== REVIEWS ===== */
.section--reviews {
  background: var(--test-surface);
  border-top: 1px solid var(--test-border);
  border-bottom: 1px solid var(--test-border);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: var(--test-container);
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .reviews-grid { grid-template-columns: 1fr; }
}

.review-card {
  background: var(--test-bg);
  border: 1px solid var(--test-border);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.review-card:hover {
  border-color: var(--test-primary-light);
  box-shadow: var(--test-shadow);
  transform: translateY(-2px);
}

.review-stars {
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: #F59E0B;
  line-height: 1;
}

.review-text {
  font-size: 0.95rem;
  color: var(--test-text);
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}

.review-author {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--test-border);
}

.review-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--test-text);
  margin: 0 0 0.15rem;
}

.review-country {
  font-size: 0.8rem;
  color: var(--test-text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.review-flag {
  font-size: 0.95rem;
  line-height: 1;
}

/* ===== START CARD + CONSENT BLOCK ===== */
.section--start {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(37, 99, 235, 0.08), transparent 60%),
    var(--test-bg);
  padding: 5rem 0 6rem;
}

.start-card {
  max-width: var(--test-container-narrow);
  margin: 0 auto;
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 22px;
  padding: 2.75rem 2rem;
  box-shadow: var(--test-shadow-lg);
  text-align: center;
}

.start-card-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--test-accent);
  margin-bottom: 0.75rem;
}

.start-card h2 { margin-bottom: 0.75rem; }
.start-card-info {
  color: var(--test-text-light);
  margin-bottom: 2rem;
  font-size: 1rem;
}

.screening-notice {
  background: #F8FAFC;
  border: 1px solid var(--test-border);
  border-left: 4px solid var(--test-primary);
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.25rem;
  text-align: left;
  margin-bottom: 1.75rem;
  transition: box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}
.screening-notice--pulse {
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
  border-left-color: var(--test-accent);
  background: var(--test-accent-light);
}

.screening-heading {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--test-primary);
  margin-bottom: 0.6rem;
}

.screening-body {
  font-size: 0.92rem;
  color: var(--test-text-light);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.screening-body a { color: var(--test-primary); text-decoration: underline; }

.screening-ack {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  transition: background 150ms ease;
}
.screening-ack:hover { background: rgba(37, 99, 235, 0.05); }

.screening-ack input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.screening-ack-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--test-border-strong);
  border-radius: 6px;
  background: var(--test-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease;
  margin-top: 1px;
}
.screening-ack-box::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(-45deg) scale(0);
  transition: transform 150ms ease;
}
.screening-ack input:checked + .screening-ack-box {
  background: linear-gradient(135deg, var(--test-cta-1), var(--test-cta-2));
  border-color: transparent;
}
.screening-ack input:checked + .screening-ack-box::after {
  transform: rotate(-45deg) scale(1) translate(1px, -1px);
}
.screening-ack input:focus-visible + .screening-ack-box {
  outline: 2px solid var(--test-primary);
  outline-offset: 2px;
}

.screening-ack-text {
  color: var(--test-text);
  font-weight: 500;
  font-size: 0.96rem;
  line-height: 1.5;
}

/* CTA */
.btn-hero {
  background: linear-gradient(135deg, var(--test-cta-1) 0%, var(--test-cta-2) 100%);
  color: #FFFFFF;
  padding: 1rem 2.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease, filter 180ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-hero:hover:not([aria-disabled="true"]) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.36);
  filter: brightness(1.05);
}
.btn-hero:active:not([aria-disabled="true"]) { transform: translateY(0); }
.btn-hero[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(0.2);
}

.start-card-foot {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--test-text-muted);
  line-height: 1.5;
}
.start-card-foot code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.78rem;
  background: #F1F5F9;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: var(--test-text);
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--test-dark);
  color: #CBD5E1;
  padding: 3rem 0 2rem;
}
.site-footer .container { max-width: var(--test-container); }

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-logo {
  color: #FFFFFF;
  font-size: 1.1rem;
}
.footer-logo:hover { color: #FFFFFF; }
.footer-nav {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.footer-nav a {
  color: #94A3B8;
  font-size: 0.9rem;
  transition: color 150ms ease;
}
.footer-nav a:hover { color: #FFFFFF; }

.footer-attribution {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-attribution p {
  font-size: 0.8rem;
  line-height: 1.65;
  color: #94A3B8;
  margin-bottom: 0.85rem;
}
.footer-attribution p:last-child { margin-bottom: 0; }

.footer-bottom { padding-top: 1.5rem; }
.disclaimer {
  font-size: 0.82rem;
  line-height: 1.65;
  color: #94A3B8;
  margin-bottom: 1.25rem;
}
.disclaimer strong { color: #E2E8F0; }
.disclaimer a { color: var(--test-cyan); }

.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #64748B;
}
.footer-links a {
  color: #94A3B8;
  transition: color 150ms ease;
}
.footer-links a:hover { color: #FFFFFF; }

/* ===== REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  .hero-section { padding: 3.5rem 0 2.5rem; }
  .section { padding: 3.5rem 0; }
  .section--start { padding: 4rem 0 4.5rem; }
  .start-card { padding: 2rem 1.25rem; }
  .themes-preview { padding: 1.25rem; }
  .output-card { padding: 1.5rem 1.25rem; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-nav { gap: 1rem; }
}

/* ============================================================
   STEP SHELLS (engine-driven flow)
   ============================================================ */

.fullscreen-step {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(37, 99, 235, 0.08), transparent 50%),
    radial-gradient(ellipse at 92% 100%, rgba(124, 58, 237, 0.08), transparent 55%),
    var(--test-bg);
}

.step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--test-border);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.step-logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--test-text);
  letter-spacing: -0.02em;
}
.step-logo span {
  background: linear-gradient(135deg, var(--test-cta-1), var(--test-cta-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-exit {
  background: transparent;
  border: 1px solid var(--test-border);
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--test-text-light);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.btn-exit:hover { border-color: var(--test-primary); color: var(--test-primary); }

.step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}
.step-content > h2 { margin-bottom: 0.75rem; max-width: 640px; }
.step-subtitle {
  color: var(--test-text-light);
  margin: 0 0 2rem;
  max-width: 560px;
  line-height: 1.6;
}
.step-icon-large {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* ===== Gender + demographic grids ===== */
.gender-grid,
.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  max-width: 640px;
}
.demo-grid--tall { grid-template-columns: 1fr; max-width: 420px; }
@media (max-width: 600px) {
  .gender-grid { grid-template-columns: 1fr 1fr; }
  .demo-grid:not(.demo-grid--tall) { grid-template-columns: 1fr 1fr; }
}

.gender-option,
.demo-option {
  background: var(--test-surface);
  border: 1.5px solid var(--test-border);
  border-radius: 12px;
  padding: 0.95rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--test-text);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 100ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.gender-option:hover,
.demo-option:hover {
  border-color: var(--test-primary);
  background: var(--test-primary-light);
}
.gender-option.selected,
.demo-option.selected {
  border-color: var(--test-primary);
  background: linear-gradient(135deg, var(--test-cta-1), var(--test-cta-2));
  color: #FFFFFF;
}
.gender-option:active,
.demo-option:active { transform: scale(0.98); }

/* ===== Loading screens (preparing / analyzing / sending) ===== */
.loading-content {
  max-width: 520px;
  width: 100%;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--test-primary-light);
  border-top-color: var(--test-primary);
  margin: 0 auto 1.5rem;
  animation: adhd-spin 1s linear infinite;
}
@keyframes adhd-spin { to { transform: rotate(360deg); } }

.loading-bar-wrapper {
  width: 100%;
  max-width: 360px;
  margin: 1.25rem auto 0;
}
.loading-bar {
  width: 100%;
  height: 6px;
  background: var(--test-primary-light);
  border-radius: 999px;
  overflow: hidden;
}
.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--test-cta-1), var(--test-cta-2));
  border-radius: inherit;
}

/* ===== Quiz step ===== */
.quiz-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.06), transparent 60%),
    var(--test-bg);
}

.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--test-border);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.quiz-logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--test-text);
  letter-spacing: -0.02em;
}
.quiz-logo span {
  background: linear-gradient(135deg, var(--test-cta-1), var(--test-cta-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.quiz-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Lock the column width so the card and progress bar never reflow
     between questions of different text lengths. */
  width: min(720px, calc(100% - 2.5rem));
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 0;
  box-sizing: border-box;
}

.progress-wrapper {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
}
.progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--test-text-light);
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--test-primary-light);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--test-cta-1), var(--test-cta-2));
  border-radius: inherit;
  transition: width 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.question-card {
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  box-shadow: var(--test-shadow);
  /* Stable height with two grid rows: 1fr for the question text (centred
     vertically inside its row), auto for the response buttons. This
     keeps the card and the progress bar above it from reflowing as the
     user moves through items, and stops short questions from sitting
     glued to the top with empty space below. */
  width: 100%;
  box-sizing: border-box;
  height: clamp(440px, 62vh, 540px);
  display: grid;
  grid-template-rows: 1fr auto;
  /* Fade transition handled by the engine: 230ms is the locked
     dev-mode timing per AGENTS.md (.fading + setTimeout(230)). Engine
     adds .fading, waits 230ms (CSS transitions opacity to 0), swaps
     content, removes .fading so the card transitions back to opaque.
     This pacing pairs with the answerLocked click-gate to prevent fast
     mobile taps from skipping a question. */
  transition: opacity 230ms ease, transform 230ms ease;
}
.question-card.fading {
  opacity: 0;
  transform: translateY(8px);
}

.question-frame {
  font-size: 0.82rem;
  color: var(--test-text-muted);
  line-height: 1.5;
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--test-primary-light);
  border-left: 3px solid var(--test-primary);
  border-radius: 6px;
  text-align: left;
}

.question-text {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--test-text);
  font-weight: 500;
  margin: 0 auto;
  max-width: 600px;
  text-align: center;
  /* Centred vertically within the 1fr grid row above the response
     buttons, so short questions don't sit glued to the top of the card. */
  align-self: center;
}

.response-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.response-btn {
  background: var(--test-bg);
  border: 1.5px solid var(--test-border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--test-text);
  cursor: pointer;
  /* Standard response-button transition — pairs with the engine's
     180ms selection pause and 230ms fade so the selected feedback
     reads as a single calm motion. */
  transition: all 200ms ease;
  text-align: center;
}
.response-btn:hover {
  border-color: var(--test-primary);
  background: var(--test-primary-light);
}
.response-btn.selected {
  border-color: transparent;
  background: linear-gradient(135deg, var(--test-cta-1), var(--test-cta-2));
  color: #FFFFFF;
  /* No font-weight change on selection — bolding the label can cause a
     1–2px width shift that looks like a micro-jitter when the user clicks. */
}
.response-btn:active { transform: scale(0.98); }

/* ===== Section divider card ===== */
.section-divider-card {
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--test-shadow-lg);
  border-top: 4px solid var(--test-accent);
}
.section-divider-icon {
  font-size: 2.5rem;
  color: var(--test-accent);
  margin-bottom: 0.75rem;
}
.section-divider-headline {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
  color: var(--test-text);
}
.section-divider-body {
  color: var(--test-text-light);
  line-height: 1.65;
  margin: 0 auto 1.75rem;
  max-width: 520px;
}

/* ===== Quiz nav ===== */
.quiz-nav {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.25rem;
}
.quiz-nav .btn-back:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Start step (engine's "before you begin" card) ===== */
.start-test-card {
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 22px;
  padding: 2.5rem 2rem;
  max-width: 600px;
  width: 100%;
  box-shadow: var(--test-shadow-lg);
}
.start-test-card h2 { margin-bottom: 0.75rem; }
.start-test-info {
  color: var(--test-text-light);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.start-test-disclaimer {
  background: var(--test-primary-light);
  border-left: 3px solid var(--test-primary);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  font-size: 0.88rem;
  color: var(--test-text);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  text-align: left;
}
.start-test-tips {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
  text-align: left;
}
.start-tip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  background: var(--test-bg);
  border: 1px solid var(--test-border);
  border-radius: 10px;
}
.start-tip-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--test-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.start-tip-text {
  color: var(--test-text-light);
  font-size: 0.93rem;
  line-height: 1.5;
}

/* ===== Confirm card ===== */
.confirm-card {
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 22px;
  padding: 2.75rem 2rem;
  max-width: 540px;
  width: 100%;
  box-shadow: var(--test-shadow-lg);
}
.confirm-check-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--test-cta-1), var(--test-cta-2));
  color: #FFFFFF;
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-info {
  color: var(--test-text);
  font-size: 1rem;
  margin-bottom: 0.6rem;
}
.confirm-subtitle {
  color: var(--test-text-light);
  margin-bottom: 1.5rem;
}
.confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* ===== Analyzing reviews ===== */
.analyzing-reviews {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 2rem;
  width: 100%;
  max-width: 460px;
}
.analyzing-review {
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: none; /* engine reveals via JS */
  text-align: left;
}
.analyzing-review .review-stars {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: #F59E0B;
  margin-bottom: 0.35rem;
}
.analyzing-review .review-text {
  font-size: 0.9rem;
  color: var(--test-text);
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 0.4rem;
}
.analyzing-review .review-author { padding: 0; border: 0; }
.analyzing-review .review-name {
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0;
}
.analyzing-review .review-country {
  font-size: 0.75rem;
  color: var(--test-text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ===== Sending step ===== */
.sending-icon-wrap {
  margin-bottom: 1.25rem;
}
.sending-icon {
  font-size: 2.5rem;
  color: var(--test-primary);
}
.sending-subtext {
  color: var(--test-text-muted);
  font-size: 0.88rem;
  margin-top: 1rem;
}

/* ===== Completion card ===== */
.completion-card {
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 22px;
  padding: 2.5rem 2rem;
  max-width: 540px;
  width: 100%;
  box-shadow: var(--test-shadow-lg);
}
.completion-check {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ECB71, #2DA84F);
  color: #FFFFFF;
  font-size: 2.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.completion-card h2 { margin-bottom: 0.6rem; }
.completion-subtitle {
  color: var(--test-text-light);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.completion-email-note {
  background: var(--test-bg);
  border: 1px solid var(--test-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.completion-email-note p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--test-text);
}
.completion-spam-note {
  font-size: 0.82rem;
  color: var(--test-text-muted);
  margin-bottom: 1.5rem;
}
.completion-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* ============================================================
   RESULTS PAGE (reveal + email gate)
   ============================================================ */

.results-wrapper {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(37, 99, 235, 0.08), transparent 50%),
    radial-gradient(ellipse at 92% 100%, rgba(124, 58, 237, 0.08), transparent 55%),
    var(--test-bg);
  padding-bottom: 4rem;
}

.results-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--test-border);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 1.25rem;
}
.results-logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--test-text);
  letter-spacing: -0.02em;
}
.results-logo span {
  background: linear-gradient(135deg, var(--test-cta-1), var(--test-cta-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#results .container {
  max-width: 720px;
  padding: 0 1.25rem;
}

/* Countdown bar */
.countdown-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  margin: 0 auto 1.5rem;
  font-size: 0.85rem;
  width: fit-content;
}
.countdown-label {
  color: var(--test-text-light);
}
.countdown-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--test-primary);
  letter-spacing: 0.02em;
}

/* Reveal teaser styles retained for legacy .results-reveal usage but
   no longer rendered on the ADHD results page — the wrap-up framing
   moved into the .blur-overlay content inside .blurred-section to
   match attachment-style's component shape. */

/* Resources cards (crisis, validation, disclaimer) */
.resources-card {
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--test-shadow);
}
.resources-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--test-primary);
}
.resources-card > p {
  color: var(--test-text-light);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}
.resources-list {
  list-style: none;
  padding: 0;
  margin: 0.85rem 0 0;
}
.resources-list li {
  padding: 0.4rem 0;
  font-size: 0.95rem;
  color: var(--test-text);
  border-bottom: 1px dashed var(--test-border);
}
.resources-list li:last-child { border-bottom: none; }
.resources-list a {
  color: var(--test-primary);
  font-weight: 600;
}
.resources-card--validation {
  border-left: 4px solid var(--test-accent);
  background: var(--test-accent-light);
}
.resources-card--validation h3 { color: var(--test-accent); }
.resources-card--validation p { color: var(--test-text); }
.resources-card--disclaimer {
  background: var(--test-bg);
  box-shadow: none;
}
.resources-card--disclaimer p {
  font-size: 0.82rem;
  color: var(--test-text-muted);
  text-align: center;
}

/* Email gate */
.email-gate {
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 20px;
  padding: 2rem 1.6rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--test-shadow-lg);
  text-align: center;
  scroll-margin-top: 80px;
  transition: box-shadow 220ms ease, transform 220ms ease;
}
.email-gate.pulse {
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18), var(--test-shadow-lg);
}
.email-gate-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--test-primary);
  background: var(--test-primary-light);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}
.email-gate h3 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
  color: var(--test-text);
}
.email-gate > p {
  color: var(--test-text-light);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.results-include-box {
  background: var(--test-bg);
  border: 1px solid var(--test-border);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.results-include-box h4 {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--test-text-muted);
  text-align: center;
}
.results-include-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.results-include-item {
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 10px;
  padding: 0.85rem;
}
.results-include-item strong {
  display: block;
  font-size: 0.92rem;
  color: var(--test-text);
  margin-bottom: 0.25rem;
}
.results-include-item p {
  font-size: 0.82rem;
  color: var(--test-text-light);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 560px) {
  .results-include-grid { grid-template-columns: 1fr; }
}

.email-gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 420px;
  margin: 0 auto;
}
.email-gate-form input[type="email"] {
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--test-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--test-bg);
  color: var(--test-text);
  transition: border-color 200ms ease, background 200ms ease;
}
.email-gate-form input[type="email"]:focus {
  outline: none;
  border-color: var(--test-primary);
  background: var(--test-surface);
}
.email-note {
  font-size: 0.75rem;
  color: var(--test-text-muted);
  line-height: 1.5;
  margin: 0.5rem 0 0;
  text-align: left;
}
.email-note a {
  color: var(--test-primary);
}
.email-success {
  text-align: center;
}
.email-success .success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ECB71, #2DA84F);
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.email-error {
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  color: #B91C1C;
  font-size: 0.88rem;
  text-align: left;
}

/* Blurred preview — mirrors attachment-style's .blurred-section
   component (520px rounded card, white inner content with header +
   bars + small score rows + blurred extra paragraph, centred lock
   overlay). Re-themed in the ADHD palette but the structural shape
   matches so the two tests look like the same component. All inner
   content is generic / non-user-specific per the clinical trust
   model — server-authoritative scoring, nothing rendered from state. */
.blurred-section {
  position: relative;
  margin: 2rem auto;
  max-width: 520px;
  border: 1px solid var(--test-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--test-shadow);
}
.blurred-content {
  background: var(--test-surface);
  padding: 2rem;
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}
.blurred-content h3 {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  color: var(--test-text);
}
.blurred-bars {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.blurred-bar-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.85rem;
}
.blurred-bar-label {
  flex: 0 0 140px;
  color: var(--test-text-light);
}
.blurred-bar-track {
  flex: 1;
  height: 8px;
  background: #E5E7EB;
  border-radius: 999px;
  overflow: hidden;
}
.blurred-bar-fill {
  height: 100%;
  background: #9CA3AF;
  border-radius: inherit;
}
/* Static landing-page demo bar widths (themes-preview section) */
.themes-preview .theme-row[data-theme="time"]           .theme-bar-fill { width: 84%; }
.themes-preview .theme-row[data-theme="working-memory"] .theme-bar-fill { width: 56%; }
.themes-preview .theme-row[data-theme="executive"]      .theme-bar-fill { width: 30%; }
.themes-preview .theme-row[data-theme="focus"]          .theme-bar-fill { width: 60%; }
.themes-preview .theme-row[data-theme="energy"]         .theme-bar-fill { width: 32%; }
.themes-preview .theme-row[data-theme="emotional"]      .theme-bar-fill { width: 54%; }
.themes-preview .theme-row[data-theme="sensory"]        .theme-bar-fill { width: 28%; }
/* Static blurred email-gate preview bar widths */
.blurred-bars .blurred-bar-row:nth-child(1) .blurred-bar-fill { width: 74%; }
.blurred-bars .blurred-bar-row:nth-child(2) .blurred-bar-fill { width: 58%; }
.blurred-bars .blurred-bar-row:nth-child(3) .blurred-bar-fill { width: 81%; }
.blurred-bars .blurred-bar-row:nth-child(4) .blurred-bar-fill { width: 46%; }
.blurred-bars .blurred-bar-row:nth-child(5) .blurred-bar-fill { width: 39%; }
.blurred-bars .blurred-bar-row:nth-child(6) .blurred-bar-fill { width: 62%; }
.blurred-bars .blurred-bar-row:nth-child(7) .blurred-bar-fill { width: 51%; }
.blurred-scores {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--test-border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.blurred-score-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}
.blurred-score-row span:first-child { color: var(--test-text-light); }
.blurred-score-row span:last-child { font-weight: 600; color: var(--test-text); }
.blurred-extra {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--test-border);
}
.blurred-extra h4 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
  color: var(--test-text);
}
.blurred-extra p {
  font-size: 0.875rem;
  color: var(--test-text-light);
  line-height: 1.6;
  margin: 0;
}
.blur-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
  z-index: 2;
}
.blur-overlay-content {
  text-align: center;
  padding: 2rem;
}
.blur-lock {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.75rem;
}
.blur-overlay-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--test-text);
}
.blur-overlay-content p {
  color: var(--test-text-light);
  font-size: 0.9375rem;
  margin: 0 auto;
  max-width: 320px;
}

/* Results reviews */
.results-reviews {
  margin-bottom: 1.5rem;
}
.results-reviews-title {
  text-align: center;
  font-size: 1.05rem;
  margin: 0 0 1rem;
  color: var(--test-text);
}
.results-reviews-grid {
  display: grid;
  /* 3 cards per row on desktop matches the locked Reviews.mount count
     of 3 — no half-empty slots. Drops to 1 column on narrow viewports. */
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 720px) {
  .results-reviews-grid { grid-template-columns: 1fr; }
}
.results-reviews-grid .result-review-card {
  background: var(--test-surface);
  border: 1px solid var(--test-border);
  border-radius: 12px;
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.results-reviews-grid .review-stars {
  font-size: 0.85rem;
  color: #F59E0B;
  letter-spacing: 0.1em;
}
.results-reviews-grid .review-text {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--test-text);
  line-height: 1.5;
  margin: 0;
}
.results-reviews-grid .review-author {
  font-size: 0.78rem;
  color: var(--test-text-muted);
  border: 0;
  padding: 0;
}
.results-reviews-grid .review-name {
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0;
  color: var(--test-text);
}
.results-reviews-grid .review-country {
  font-size: 0.75rem;
  color: var(--test-text-muted);
}
.results-final-cta {
  text-align: center;
  /* Bottom margin so the CTA section doesn't visually overlap or sit
     directly against the crisis-resources card that follows. */
  margin-bottom: 1.75rem;
  padding: 0.5rem 0;
}
.results-final-cta p {
  font-size: 0.92rem;
  color: var(--test-text-light);
  margin: 0 0 0.85rem;
}

/* ===== Mobile tweaks for step shells ===== */
@media (max-width: 600px) {
  .question-card {
    padding: 1.75rem 1.25rem;
    /* Mobile: drop the clamp() and let the card breathe with the content,
       guaranteeing a consistent floor so very short questions still feel
       like a proper card rather than a snug box. */
    height: auto;
    min-height: 500px;
  }
  .question-text { font-size: 1.05rem; }
  .start-test-card,
  .confirm-card,
  .completion-card,
  .results-pending,
  .section-divider-card { padding: 2rem 1.25rem; }
  .step-content { padding: 2rem 1.25rem; }
}