/* Shared styles for all Mind Lab quiz pages (public/*-quiz.html + mind-lab.html).
   Design tokens match adhd-focus.html / adhd-quiz.html for brand consistency. */
:root {
    --ink:        #14161A;
    --paper:      #EEF0EE;
    --surface:    #ffffff;
    --signal:     #FF4433;
    --signal-ink: #C22E20;
    --focus:      #275E4B;
    --focus-tint: #E4EDE8;
    --signal-tint:#FFE9E4;
    --muted:      #6B7070;
    --muted-2:    #565A5B;
    --line:       rgba(20,22,26,0.10);
    --line-2:     rgba(20,22,26,0.07);

    --display: 'Space Grotesk', system-ui, sans-serif;
    --sans:    'Work Sans', system-ui, -apple-system, sans-serif;
    --mono:    'Space Mono', 'SF Mono', monospace;

    --pad-x:  clamp(20px, 5vw, 64px);
    --shadow-card:       0 1px 0 rgba(20,22,26,0.02);
    --shadow-card-hover: 0 26px 50px -30px rgba(20,22,26,0.4);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: none; }
.wrap { max-width: 900px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

.eyebrow { font-family: var(--mono); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-ink); margin-bottom: 16px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.82); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* NAV */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 15px var(--pad-x); background: rgba(238,240,238,0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2); }
.wordmark { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; font-size: 18.5px; letter-spacing: -.01em; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--muted-2); }

/* HERO */
.hero { padding-top: clamp(48px, 7vw, 76px); padding-bottom: 48px; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--focus); margin-bottom: 24px; animation: fadeUp .6s ease both; }
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: pulseDot 1.8s ease-in-out infinite; }
.hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 5.4vw, 50px); line-height: 1.08; letter-spacing: -.015em; margin: 0 auto 18px; max-width: 720px; color: var(--ink); animation: fadeUp .6s ease .05s both; }
.hero h1 em { font-style: italic; color: var(--signal-ink); font-family: var(--display); }
.hero-sub { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--muted-2); max-width: 560px; margin: 0 auto 30px; animation: fadeUp .6s ease .1s both; }
.hero-ticks { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 26px; animation: fadeUp .6s ease .2s both; }
.hero-ticks span { display: inline-flex; align-items: center; gap: 6px; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--signal); color: #fff; font-weight: 700; font-size: 16px; padding: 16px 30px; border-radius: 13px; border: 0; cursor: pointer; box-shadow: 0 16px 30px -14px rgba(255,68,51,0.55); transition: transform .2s ease, box-shadow .2s ease; animation: fadeUp .6s ease .15s both; }
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(255,68,51,0.6); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 13px 20px; border-radius: 12px; border: 1.5px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.btn-secondary:hover { color: var(--ink); border-color: var(--focus); transform: translateY(-2px); }
.btn-ghost { background: none; border: 0; color: var(--muted-2); font-weight: 600; font-size: 14.5px; cursor: pointer; padding: 10px 14px; }
.btn-ghost:hover { color: var(--ink); }

/* QUIZ CARD */
.quiz-section { padding-bottom: 90px; }
.quiz-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 4vw, 44px); box-shadow: 0 40px 70px -36px rgba(20,22,26,0.35); animation: fadeUp .5s ease both; }
.progress-track { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 28px; }
.progress-bar { height: 100%; background: var(--signal); border-radius: 999px; transition: width .35s ease; width: 0%; }
.progress-label { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; }
.q-text { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.6vw, 25px); line-height: 1.3; margin: 0 0 26px; letter-spacing: -.01em; min-height: 64px; }
.q-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.q-option { text-align: left; width: 100%; padding: 15px 18px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--paper); font-family: var(--sans); font-size: 15.5px; font-weight: 500; color: var(--ink); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .1s ease; }
.q-option:hover { border-color: var(--focus); background: var(--focus-tint); }
.q-option.is-selected { border-color: var(--signal); background: var(--signal-tint); color: var(--signal-ink); font-weight: 700; }
.q-nav { display: flex; align-items: center; justify-content: space-between; }
.q-count { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.loading-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 0; color: var(--muted); font-size: 14px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--signal); animation: spin .8s linear infinite; }

/* CAPTURE FORM */
.capture-head { text-align: center; margin-bottom: 24px; }
.capture-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(21px, 3vw, 27px); margin: 0 0 8px; }
.capture-head p { color: var(--muted-2); font-size: 15px; margin: 0; line-height: 1.55; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted-2); margin-bottom: 6px; }
.field input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); font-family: var(--sans); font-size: 15.5px; color: var(--ink); }
.field input:focus { outline: none; border-color: var(--focus); }
.form-error { color: var(--signal-ink); font-size: 13.5px; margin: 0 0 12px; display: none; }
.form-error.is-visible { display: block; }
.privacy-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.submit-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }

/* RESULTS / SUCCESS */
.success-state { text-align: center; padding: 10px 0 6px; }
.success-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--focus-tint); color: var(--focus); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.success-state h2 { font-family: var(--display); font-weight: 700; font-size: 24px; margin: 0 0 10px; }
.success-state p { color: var(--muted-2); font-size: 15.5px; line-height: 1.6; max-width: 440px; margin: 0 auto 26px; }

/* DISCLAIMER */
.disclaimer-bar { border-top: 1px solid var(--line-2); padding-top: 22px; margin-top: 30px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* FAQ */
.faq { padding: 20px 0 80px; }
.faq .wrap { max-width: 780px; }
.faq-head { text-align: center; margin-bottom: 36px; }
.faq-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 10px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; cursor: pointer; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 15.5px; color: var(--ink); text-align: left; }
.faq-chev { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--signal-ink); font-size: 21px; transition: transform .25s ease; }
.faq-item[data-open="1"] .faq-chev { transform: rotate(45deg); }
.faq-a { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .3s ease; }
.faq-item[data-open="1"] .faq-a { max-height: 240px; opacity: 1; }
.faq-a p { font-size: 14.5px; line-height: 1.65; color: var(--muted-2); margin: 13px 0 2px; }

footer { border-top: 1px solid var(--line-2); padding: 30px var(--pad-x); text-align: center; font-size: 12.5px; color: var(--muted); }
.footer-links-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-bottom: 14px; }
.footer-links-row a { font-size: 13px; font-weight: 600; color: var(--muted-2); }
.footer-links-row a:hover { color: var(--signal-ink); }

@media (max-width: 640px) {
    .nav-links { display: none; }
    .hero-ticks { gap: 12px; }
}