/* =========================================================================
   Top Natural Health — 60-Second Metabolic & Wellness Goal Assessment
   Design system: Refero Styles "Mercury — Alpine banking at blue hour" (dark)
   Onyx canvas, graphite cards (no shadows), ivory text, single cobalt action,
   paired with high-urgency Black Friday deal-lock strip (#C23414).
   ========================================================================= */

:root {
    /* Mercury color tokens */
    --onyx: #171721;          /* page canvas */
    --graphite: #1e1e2a;      /* elevated cards */
    --obsidian: #272735;      /* secondary fills, inputs */
    --obsidian-hover: #303041;
    --slate: #70707d;         /* structural borders */
    --hairline: rgba(226, 227, 237, 0.12);
    --mist: #e2e3ed;          /* light hairlines on dark */
    --ash: #c3c3cc;           /* muted body copy */
    --ivory: #ededf3;         /* primary text */
    --white: #ffffff;
    --cobalt: #5266eb;        /* primary action color */
    --cobalt-hover: #6475f0;
    --cobalt-soft: rgba(82, 102, 235, 0.14);
    --crimson: #C23414;       /* Black Friday urgency accent */
    --crimson-soft: rgba(194, 52, 20, 0.18);
    --emerald: #34d399;

    /* Brand (logo only) */
    --logo-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #06b6d4 100%);

    /* Type */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-logo: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Shape & rhythm */
    --r-structural: 4px;
    --r-card: 12px;
    --r-pill: 32px;
    --r-tag: 40px;
    --section-gap: 72px;
    --card-pad: 32px;
    --max: 1200px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--onyx);
    color: var(--ivory);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.quiz-open { overflow: hidden; }

a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.skip-link {
    position: absolute; left: -9999px; top: 8px; z-index: 1000;
    background: var(--cobalt); color: var(--white); padding: 8px 16px; border-radius: var(--r-pill);
}
.skip-link:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

/* ---------- Logo (Outfit wordmark + gradient accent) ---------- */
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.logo-text {
    font-family: var(--font-logo);
    font-weight: 800;
    font-size: 1.45rem;
    color: var(--ivory);
    letter-spacing: -0.5px;
    line-height: 1;
}
.logo-accent {
    background: var(--logo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 28px;
    border-radius: var(--r-pill);
    font-size: 16px; font-weight: 500; letter-spacing: 0.005em;
    text-decoration: none; white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-primary { background: var(--cobalt); color: var(--white); }
.btn-primary:hover { background: var(--cobalt-hover); }
.btn-primary:active { transform: scale(0.98); }
.btn-ghost { border: 1px solid var(--mist); color: var(--ivory); }
.btn-ghost:hover { background: rgba(237, 237, 243, 0.06); }
.btn-lg { min-height: 56px; padding: 0 36px; font-size: 17px; }
.btn-block { width: 100%; }
.btn .arrow { transition: transform .18s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Sticky top: red Black Friday banner + navbar ---------- */
.site-top { position: sticky; top: 0; z-index: 50; }
.bf-banner { background: var(--crimson); color: var(--white); overflow: hidden; }
.bf-inner { max-width: 880px; margin: 0 auto; padding: 10px 12px; text-align: center; }
.bf-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    padding: 7px 18px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(0, 0, 0, 0.14);
}
.bf-sun { width: 22px; height: 22px; flex: none; color: var(--white); animation: sunspin 14s linear infinite; }
@keyframes sunspin { to { transform: rotate(360deg); } }
.bf-headline { font-family: var(--font-body); font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.15; }
.bf-sub { font-size: 12.5px; font-weight: 500; margin-top: 3px; opacity: 0.96; }
.bf-timer {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    background: rgba(0, 0, 0, 0.28);
    padding: 1px 7px;
    border-radius: 6px;
    font-weight: 700;
    margin-left: 4px;
}
.bf-subline { font-size: 14.5px; font-weight: 400; margin-top: 6px; }
.bf-subline u { text-underline-offset: 3px; }

/* ---------- Urgency accents ---------- */
.urgency-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    animation: pulseDot 1.8s infinite;
    flex: none;
}
@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.65); }
    70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.pill-bf {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: var(--r-tag);
    background: var(--crimson-soft); color: #ffb4a2;
    border: 1px solid rgba(194, 52, 20, 0.45);
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
}
.spot-strip {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    max-width: 440px; padding: 10px 14px; margin-bottom: 14px;
    border-radius: var(--r-card);
    background: rgba(194, 52, 20, 0.12);
    border: 1px solid rgba(194, 52, 20, 0.35);
    font-size: 13px; color: #ffd6cc;
}
.spot-strip b { color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }
.reserve-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; margin-bottom: 18px;
    border-radius: var(--r-card);
    background: rgba(194, 52, 20, 0.14);
    border: 1px solid rgba(194, 52, 20, 0.42);
    font-size: 13.5px; color: #ffd6cc;
}
.reserve-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: rgba(0, 0, 0, 0.35);
    padding: 3px 8px; border-radius: 6px;
    color: var(--white); font-weight: 700; letter-spacing: 0.04em;
}

/* ---------- Navbar ---------- */
.navbar {
    background: rgba(23, 23, 33, 0.85);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--hairline);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) { color: var(--ash); text-decoration: none; font-size: 15px; }
.nav-links a:not(.btn):hover { color: var(--ivory); }
.nav-links .btn { min-height: 40px; padding: 0 20px; font-size: 15px; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 var(--section-gap); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: var(--r-tag);
    background: var(--obsidian); color: var(--ivory);
    border: 1px solid var(--hairline);
    font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
    margin-bottom: 22px;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--ivory); overflow-wrap: break-word; }
.hero h1 {
    font-size: clamp(35px, 5vw, 58px);
    line-height: 1.08; letter-spacing: -0.01em;
    margin-bottom: 20px;
}
.hero h1 .muted { color: var(--ash); }
.hero-sub { font-size: 18.5px; color: var(--ash); max-width: 540px; margin-bottom: 24px; }
.hero-cta { display: block; max-width: 440px; margin-bottom: 26px; }
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.goal-btn { justify-content: space-between; padding: 12px 16px; font-size: 14.5px; width: 100%; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--ash); font-size: 14px; }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.check {
    width: 18px; height: 18px; flex: none; border-radius: 50%;
    background: var(--cobalt-soft); color: #8d9af5;
    display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
}

/* Hero image */
.hero-media { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--graphite); aspect-ratio: 4 / 5; max-height: 620px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,23,33,0) 55%, rgba(23,23,33,0.78) 100%); pointer-events: none; }
.hero-chip {
    position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: var(--r-pill);
    background: rgba(30, 30, 42, 0.84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: var(--ivory); font-size: 14px;
}

/* ---------- Sections ---------- */
.section { padding: var(--section-gap) 0; border-top: 1px solid var(--hairline); scroll-margin-top: 170px; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #8d9af5; margin-bottom: 14px; }
.section h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; letter-spacing: -0.005em; margin-bottom: 14px; }
.section-head p { color: var(--ash); font-size: 18px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.card {
    background: var(--graphite);
    border-radius: var(--r-card);
    padding: var(--card-pad);
}
.card h3 { font-size: 21px; line-height: 1.25; margin-bottom: 10px; }
.card p { color: var(--ash); font-size: 15px; }
.step-num {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--obsidian); color: var(--ivory);
    display: grid; place-items: center; font-weight: 500; font-size: 15px;
    margin-bottom: 22px;
}

/* Pricing strip */
.price-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--hairline); }
.price-card.featured { border-color: var(--cobalt); }
.price-tag { font-size: 14px; color: var(--ivory); font-weight: 500; }
.price { font-family: var(--font-display); font-size: 44px; font-weight: 500; line-height: 1.05; }
.price small { font-size: 17px; color: var(--ash); font-weight: 400; }
.price-was { color: var(--slate); text-decoration: line-through; font-size: 15px; }
.price-note { color: var(--ash); font-size: 15px; }
.pill {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: var(--r-tag);
    background: var(--cobalt-soft); color: #a7b1f8;
    font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
}
.feature-list { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.feature-list li { display: flex; gap: 10px; color: var(--ash); font-size: 15px; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 22px 0; font-size: 18px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 24px; color: var(--ash); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ash); padding: 0 0 22px; max-width: 700px; }

/* Final CTA */
.final-cta { text-align: center; }
.final-cta .card { padding: 64px 32px; border: 1px solid var(--hairline); }
.final-cta h2 { margin-bottom: 14px; }
.final-cta p { color: var(--ash); font-size: 18px; margin-bottom: 30px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--hairline); padding: 48px 0 40px; color: var(--ash); font-size: 14px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--ash); text-decoration: none; }
.footer-links a:hover { color: var(--ivory); }
.disclaimers { display: grid; gap: 12px; font-size: 12.5px; line-height: 1.6; color: #9a9aa6; border-top: 1px solid var(--hairline); padding-top: 24px; }
.disclaimers strong { color: var(--ash); font-weight: 500; }

/* Sticky mobile CTA */
.mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(23, 23, 33, 0.94);
    border-top: 1px solid var(--hairline);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: none;
}

/* =========================================================================
   QUIZ OVERLAY
   ========================================================================= */
.quiz {
    position: fixed; inset: 0; z-index: 100;
    background: var(--onyx);
    display: none; flex-direction: column;
    overflow-y: auto;
}
.quiz.open { display: flex; }
.quiz-header {
    position: sticky; top: 0; z-index: 2;
    background: var(--onyx);
    border-bottom: 1px solid var(--hairline);
}
.quiz-header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.icon-btn {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--obsidian); color: var(--ivory); font-size: 18px;
}
.icon-btn:hover { background: var(--obsidian-hover); }
.icon-btn[hidden] { visibility: hidden; display: grid; }
.progress { height: 3px; background: var(--obsidian); }
.progress span { display: block; height: 100%; width: 0; background: var(--cobalt); transition: width .35s ease; }

.quiz-body { flex: 1; width: 100%; max-width: 620px; margin: 0 auto; padding: 48px 24px 120px; }
.q-count { font-size: 13px; color: var(--ash); margin-bottom: 14px; letter-spacing: 0.02em; }
.q-title { font-family: var(--font-display); font-size: clamp(24px, 4vw, 32px); font-weight: 500; line-height: 1.2; margin-bottom: 10px; }
.q-help { color: var(--ash); margin-bottom: 28px; font-size: 15px; }

.step { animation: stepIn .32s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.options { display: grid; gap: 10px; }
.option {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; min-height: 58px; padding: 16px 20px;
    border-radius: var(--r-card);
    background: var(--graphite); color: var(--ivory);
    border: 1px solid var(--hairline);
    text-align: left; font-size: 16px;
    transition: border-color .15s, background-color .15s;
}
.option:hover { border-color: var(--slate); }
.option.selected { border-color: var(--cobalt); background: var(--cobalt-soft); }
.option .mark {
    width: 22px; height: 22px; flex: none; border-radius: 50%;
    border: 1.5px solid var(--slate);
    display: grid; place-items: center; font-size: 12px; color: transparent;
}
.option.multi .mark { border-radius: 6px; }
.option.selected .mark { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.option .sub { display: block; font-size: 13px; color: var(--ash); margin-top: 2px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { display: block; font-size: 13px; color: var(--ash); margin-bottom: 8px; }
.input, .select {
    width: 100%; min-height: 58px; padding: 0 22px;
    border-radius: var(--r-pill);
    background: var(--obsidian); color: var(--ivory);
    border: 1px solid var(--hairline);
    font: inherit; font-size: 17px;
    -webkit-appearance: none; appearance: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23c3c3cc' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 22px center;
    padding-right: 48px;
}
.input:focus, .select:focus { outline: none; border-color: var(--cobalt); }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 75px; }
.input-suffix span { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--ash); pointer-events: none; }
.field-error { color: #f0a3a3; font-size: 14px; margin-top: 12px; min-height: 20px; }

.q-actions { margin-top: 28px; }
.bmi-live {
    margin-top: 20px; padding: 16px 20px; border-radius: var(--r-card);
    background: var(--graphite); color: var(--ash); font-size: 15px; display: none;
}
.bmi-live b { color: var(--ivory); font-weight: 500; }
.privacy-note { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 22px; color: var(--ash); font-size: 13px; }

/* Loader */
.loader { text-align: center; padding-top: 24px; }
.ring {
    width: 88px; height: 88px; margin: 0 auto 30px; border-radius: 50%;
    border: 3px solid var(--obsidian); border-top-color: var(--cobalt);
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader h2 { font-size: 26px; margin-bottom: 8px; }
.loader > p { color: var(--ash); margin-bottom: 32px; }
.load-steps { list-style: none; text-align: left; display: grid; gap: 10px; max-width: 440px; margin: 0 auto; }
.load-steps li {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-radius: var(--r-card);
    background: var(--graphite); color: var(--slate); font-size: 15px;
    transition: color .3s;
}
.load-steps li .s {
    width: 20px; height: 20px; flex: none; border-radius: 50%;
    border: 1.5px solid var(--slate); display: grid; place-items: center; font-size: 11px;
}
.load-steps li.active { color: var(--ivory); }
.load-steps li.active .s { border-color: var(--cobalt); border-top-color: transparent; animation: spin .8s linear infinite; }
.load-steps li.done { color: var(--ash); }
.load-steps li.done .s { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); animation: none; }

/* Results */
.result-badge { margin-bottom: 18px; }
.result h2 { font-size: clamp(28px, 4.4vw, 38px); line-height: 1.15; margin-bottom: 12px; }
.result .lead { color: var(--ash); font-size: 17px; margin-bottom: 24px; }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.summary .card { padding: 18px; }
.summary small { display: block; color: var(--ash); font-size: 12px; margin-bottom: 4px; }
.summary b { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.offer-card { background: var(--graphite); border-radius: var(--r-card); padding: 28px; margin-bottom: 16px; border: 1px solid var(--cobalt); }
.offer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.offer-head h3 { font-size: 19px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.plan { background: var(--obsidian); border-radius: var(--r-card); padding: 18px; }
.plan > small { color: var(--ash); font-size: 13px; display: block; margin-bottom: 6px; }
.plan .price { font-size: 34px; }
.timeline-card { margin-bottom: 16px; }
.timeline-card h3 { font-size: 18px; margin-bottom: 8px; }
.next-steps { list-style: none; counter-reset: s; display: grid; gap: 14px; margin-top: 6px; }
.next-steps li { counter-increment: s; display: flex; gap: 14px; color: var(--ash); font-size: 15px; }
.next-steps li::before {
    content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--obsidian); color: var(--ivory); display: grid; place-items: center; font-size: 13px;
}
.fine { color: #9a9aa6; font-size: 12.5px; line-height: 1.6; margin-top: 18px; }
.result-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(23, 23, 33, 0.95); border-top: 1px solid var(--hairline);
    display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    :root { --section-gap: 56px; --card-pad: 24px; }
    .nav-links a:not(.btn) { display: none; }
    .hero { padding-top: 40px; }
    .hero-sub { font-size: 17px; }
    .grid-2, .plans { grid-template-columns: 1fr; }
    .summary { gap: 8px; margin-bottom: 20px; }
    .summary .card { padding: 14px 12px; }
    .summary b { font-size: 16px; }
    .summary small { font-size: 11px; }
    .result .lead { font-size: 16px; margin-bottom: 20px; }
    .offer-card { padding: 20px; }
    .mobile-cta { display: block; }
    .footer { padding-bottom: 110px; }
    .quiz-body { padding-top: 32px; }
    .result-sticky.show { display: block; }
    .hero-cta { max-width: 100%; }
    .hero-media { aspect-ratio: 4 / 4.2; }
    .bf-headline { font-size: 12.5px; letter-spacing: 0.01em; white-space: nowrap; }
    .bf-sub { font-size: 11px; }
    .bf-subline { display: none; }
    .bf-sun { width: 18px; height: 18px; }
    .bf-pill { gap: 8px; padding: 6px 12px; }
    .bf-inner { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 380px) {
    .container { padding: 0 16px; }
    .nav-inner { height: 60px; }
    .logo-text { font-size: 1.25rem; }
    .nav-links .btn { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
    .btn-lg { min-height: 50px; padding: 0 20px; font-size: 15px; }
    .hero h1 { font-size: clamp(26px, 8vw, 32px); }
    .bf-sun { display: none; }
    .bf-pill { padding: 5px 10px; }
    .bf-headline { font-size: 11px; }
    .hero-chip { font-size: 13px; }
    .quiz-body { padding: 32px 16px 120px; }
}