/*
 * Shared hub chrome — the header, drawer, hero, trust wall, reviews, toasts,
 * FAQ, footer and dashboard-tour styling that students.html, teachers.html and
 * test-bank.html all render identically. Every rule here was byte-identical in
 * all three pages' <style> blocks before it was lifted out.
 *
 * Load order matters. Each hub links this AFTER site-tailwind.css and BEFORE
 * its own <style>, so:
 *   * these rules still beat Tailwind utilities (site-tailwind.css puts them in
 *     @layer utilities, which loses to any unlayered rule regardless of order);
 *   * each page's own <style> still wins for its page-local deltas.
 * Moving the <link> after the <style> would silently invert that second half.
 *
 * Anything that differs between the three hubs belongs in that page's <style>,
 * not here. tests/audience-hubs.test.ts reads this file for the shared tour
 * rules and each page's <style> for the page-local ones.
 */
:root {
    --brand-blue: #3b82f6;
    --brand-blue-soft: rgba(59, 130, 246, .08);
    --brand-navy: #1f2937;
    --brand-navy-soft: rgba(31, 41, 55, .06);
    --surface: #ffffff;
    --bg: #ffffff;
    --bg-warm: rgba(31, 41, 55, .04);
    --border: rgba(31, 41, 55, .12);
    --border-strong: rgba(31, 41, 55, .22);
    --text-primary: #1f2937;
    --text-secondary: rgba(31, 41, 55, .78);
    --text-tertiary: rgba(31, 41, 55, .62);
    --text-quaternary: rgba(31, 41, 55, .42);
    --shadow-warm-xs: 0 1px 2px rgba(31, 41, 55, .04);
    --shadow-warm-sm: 0 1px 3px rgba(31, 41, 55, .05), 0 1px 2px rgba(31, 41, 55, .04);
    --shadow-warm-md: 0 4px 14px rgba(31, 41, 55, .06), 0 2px 4px rgba(31, 41, 55, .04);
    --shadow-warm-lg: 0 12px 32px rgba(31, 41, 55, .08), 0 4px 10px rgba(31, 41, 55, .04);

    /* Fluid type scale */
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --text-body: clamp(1.0625rem, 1rem + .25vw, 1.15rem);
    --text-display: clamp(2.6rem, 1.6rem + 4.2vw, 4.25rem);
    --text-section: clamp(1.9rem, 1.55rem + 1.6vw, 2.75rem);
    --text-card-title: clamp(1.45rem, 1.3rem + .9vw, 1.75rem);
    --text-cue: clamp(1.35rem, 1.2rem + .9vw, 1.7rem);
    --text-copy: clamp(1.05rem, 1rem + .3vw, 1.15rem);
    --text-faq-q: 1.25rem;
    --text-numeral: clamp(4rem, 2.4rem + 7vw, 7rem);
    --text-mono-label: .78rem;

    /* Tech accents (brand colors only) */
    --glow-soft: rgba(59, 130, 246, .12);
    --glow-mid: rgba(59, 130, 246, .25);
    --glow-strong: rgba(59, 130, 246, .45);
    --glass-bg: rgba(255, 255, 255, .7);
    --glass-border: rgba(59, 130, 246, .18);
    --grid-line: rgba(31, 41, 55, .05);

    /* Sticky offset shared by the dashboard-tour pinned frame */
    --sticky-top: clamp(4rem, 12vh, 7rem);
}

body {
    font-family: 'Pretendard', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-body);
    background: var(--bg);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Brand header ── */
.brand-header {
    position: relative;
    z-index: 50;
    background: var(--brand-navy);
    background-image:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(59,130,246,.28) 0%, transparent 60%),
        radial-gradient(ellipse 60% 60% at 0% 100%, rgba(59,130,246,.12) 0%, transparent 60%);
    overflow: visible;
}

.brand-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(59,130,246,.55) 50%, transparent 100%);
}

.brand-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    letter-spacing: .14em;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .brand-eyebrow {
        font-size: 1.25rem;
        letter-spacing: .16em;
    }
}

.brand-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

.auth-status-slot {
    position: static;
    z-index: 2100;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.auth-status-slot.has-auth-user {
    margin-bottom: .85rem;
}

.auth-status-slot #auth-status {
    min-width: 0;
    max-width: 100%;
}

.auth-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .35rem .35rem .35rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.auth-status-pill .auth-user-label {
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: -.005em;
    min-width: 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-status-pill .logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--brand-navy);
    font-size: .72rem;
    font-weight: 700;
    transition: background .15s ease, color .15s ease;
}

.auth-status-pill .logout-btn:hover {
    background: var(--brand-blue);
    color: #fff;
}

@media (max-width: 1023px) {
    .auth-status-pill .auth-user-label {
        max-width: min(52vw, 180px);
    }
}

@media (min-width: 1024px) {
    .auth-status-slot {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        width: auto;
        justify-content: flex-end;
    }
    .auth-status-slot.has-auth-user {
        margin-bottom: 0;
    }
}

/* ── Sophisticated panel ── */
.panel-bg {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-warm-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.panel-bg:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-warm-lg), 0 18px 48px var(--glow-soft);
    border-color: rgba(59, 130, 246, .45);
}

.panel-bg:active {
    border-color: var(--glow-strong);
}

.panel-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(59,130,246,.0) 0%, rgba(59,130,246,.0) 100%);
    transition: background .25s ease;
    pointer-events: none;
}

.panel-bg:hover::before {
    background: linear-gradient(90deg, transparent 0%, rgba(59,130,246,.55) 50%, transparent 100%);
}

/* ── Hero (display headline + stat strip + scroll cue) ── */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 2rem auto 4rem;
    max-width: 56rem;
    word-break: keep-all;
}

/* Grid-line + glow backdrop, masked so it dissolves at the edges.
   Horizontal bleed only on wide viewports: an absolutely
   positioned overhang would otherwise widen the mobile layout
   viewport (horizontal scroll + off-center fixed chrome). */
.hero::before {
    content: '';
    position: absolute;
    inset: -3rem 0 -1rem;
    background-image:
        radial-gradient(ellipse 60% 55% at 50% 0%, var(--glow-soft) 0%, transparent 70%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, 64px 64px, 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 35%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 85% at 50% 35%, #000 30%, transparent 78%);
    pointer-events: none;
    z-index: -1;
}

@media (min-width: 1100px) {
    .hero::before {
        inset: -3rem -4rem -1rem;
    }
}

.hero-title {
    color: var(--brand-navy);
    font-size: var(--text-display);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
    max-width: 20ch;
}

.hero-sub {
    margin-top: 1.2rem;
    max-width: 46rem;
    color: var(--text-secondary);
    font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.005em;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2.1rem;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    min-width: 7.25rem;
    padding: .9rem 1.1rem;
    border-radius: 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-warm-sm);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.hero-stat-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--brand-blue);
    letter-spacing: -.02em;
}

.hero-stat-num [data-counter] {
    display: inline-block;
    min-width: 1ch;
}

.hero-stat-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* Above-the-fold entrance: pure CSS so it never waits on the
   module script (which loads Supabase before initFadeUp runs) */
.hero-enter {
    animation: hero-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}

.hero-enter.delay-1 { animation-delay: .08s; }

.hero-enter.delay-2 { animation-delay: .16s; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Trust wall (classroom adoption + school wordmarks) ── */
.trust-wall {
    max-width: 60rem;
    margin: 3rem auto 0;
    text-align: center;
}

.trust-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: .35rem .9rem;
    border-radius: 6px;
    background: var(--brand-blue-soft);
    border: 1px solid rgba(59, 130, 246, .22);
    color: var(--brand-blue);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.trust-count {
    display: inline-flex;
    align-items: center;
    gap: .4ch;
    padding: .35rem .9rem;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    margin-left: .5rem;
}

.trust-count [data-counter] {
    display: inline-block;
    min-width: 2ch;
    font-variant-numeric: tabular-nums;
    color: var(--brand-blue);
}

.trust-caption {
    max-width: 46rem;
    margin: 0 auto 1.85rem;
    color: var(--brand-navy);
    font-size: clamp(1.3rem, 1.15rem + .9vw, 1.7rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.015em;
}

.trust-caption strong {
    font-weight: 800;
    color: var(--text-primary);
}

.trust-logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .6rem;
}

.trust-logo {
    display: flex;
}

.trust-note {
    max-width: 34rem;
    margin: 1.5rem auto 0;
    color: var(--text-quaternary);
    font-size: .78rem;
    line-height: 1.5;
}

/* ── Customer reviews (five educator testimonials, glass cards) ── */
.reviews-section {
    max-width: 64rem;
    margin: 5.5rem auto 0;
    text-align: center;
}

.reviews-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: .35rem .9rem;
    border-radius: 6px;
    background: var(--brand-blue-soft);
    border: 1px solid rgba(59, 130, 246, .22);
    color: var(--brand-blue);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.reviews-rating {
    display: inline-flex;
    align-items: center;
    gap: .45ch;
    padding: .35rem .9rem;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    margin-left: .5rem;
}

.reviews-rating i {
    color: #f59e0b;
}

.reviews-heading {
    max-width: 38rem;
    margin: 0 auto .75rem;
    color: var(--brand-navy);
    font-size: var(--text-section);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
}

.reviews-lede {
    max-width: 42rem;
    margin: 0 auto 2.5rem;
    color: var(--text-tertiary);
    font-size: var(--text-copy);
    line-height: 1.6;
}

.reviews-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    text-align: left;
}

.review-card {
    flex: 1 1 16rem;
    max-width: 20rem;
    margin: 0;
    padding: 1.6rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.review-stars {
    display: inline-flex;
    gap: .2rem;
    color: #f59e0b;
    font-size: .9rem;
}

.review-quote {
    margin: 0;
    flex: 1;
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.7;
    letter-spacing: -.005em;
}

.review-author {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .2rem;
}

.review-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: var(--brand-blue);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(59, 130, 246, .28);
}

.review-name {
    display: block;
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.review-meta {
    display: block;
    margin-top: .15rem;
    color: var(--text-tertiary);
    font-size: .82rem;
    line-height: 1.35;
}

.reviews-note {
    max-width: 34rem;
    margin: 1.5rem auto 0;
    color: var(--text-quaternary);
    font-size: .78rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .reviews-section {
        margin-top: 6.5rem;
    }
    .reviews-grid {
        gap: 1.25rem;
    }
    .review-card {
        padding: 1.85rem 1.7rem;
    }
}

/* ── Service cards ── */
.section-card {
    padding: 2.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    padding-bottom: 0;
    border-bottom: 0;
}

.section-card-header > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.section-card-header.is-static {
    margin-bottom: 1rem;
}

.section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 14px;
    flex-shrink: 0;
    background: var(--brand-blue);
    color: #ffffff;
    font-size: 1.4rem;
    box-shadow: 0 2px 8px rgba(59, 130, 246, .28), 0 0 0 5px var(--glow-soft);
    transition: background .25s ease, transform .25s ease;
    margin-bottom: 1.15rem;
    order: -1;
}

.section-icon.is-blue {
    background: var(--brand-blue);
    box-shadow: 0 2px 8px rgba(59, 130, 246, .28);
}

.panel-bg:hover .section-icon {
    transform: rotate(-3deg) scale(1.04);
}

.section-title {
    color: var(--text-primary);
    font-size: var(--text-card-title);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.section-caption {
    margin-top: .6rem;
    color: var(--text-tertiary);
    font-size: var(--text-copy);
    line-height: 1.55;
    max-width: 32rem;
}

.compact-copy {
    color: var(--text-secondary);
    font-size: var(--text-copy);
    line-height: 1.7;
    letter-spacing: -.005em;
    margin-top: 1.1rem;
    max-width: 32rem;
}

.compact-copy strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Refined CTA buttons */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 1.5rem auto 0;
    padding: .85rem 1.5rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.005em;
    transition: box-shadow .18s ease, transform .05s ease;
    width: fit-content;
}

.cta-button.is-primary {
    background: var(--brand-blue);
    color: #fff;
    border: 1px solid var(--brand-blue);
    box-shadow: 0 2px 10px rgba(59,130,246,.22);
}

.cta-button.is-primary:hover {
    box-shadow: 0 6px 22px var(--glow-mid);
}

.cta-button.is-outline {
    background: var(--brand-blue);
    color: #fff;
    border: 1px solid var(--brand-blue);
    box-shadow: 0 2px 10px rgba(59,130,246,.22);
}

.cta-button.is-outline:hover {
    box-shadow: 0 6px 22px var(--glow-mid);
}

.cta-button:active {
    transform: translateY(1px);
}

.cta-button .arrow-icon {
    transition: transform .2s ease;
}

.cta-button:hover .arrow-icon {
    transform: translateX(3px);
}

/* ── Toast notifications ── */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    width: 90%;
    max-width: 420px;
}

.toast {
    pointer-events: auto;
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: toastIn .35s cubic-bezier(.21,1.02,.73,1) forwards;
    backdrop-filter: blur(8px);
    font-size: 14px;
    line-height: 1.5;
}

.toast.hiding {
    animation: toastOut .25s ease-in forwards;
}

.toast-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-top: 1px;
    font-size: 12px;
}

.toast-body {
    flex: 1;
    color: #1f2937;
    font-weight: 500;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px;
    font-size: 14px;
    margin-top: 1px;
    transition: color .15s;
}

.toast-close:hover { color: #4b5563; }

/* Toast types */
.toast-success {
    background: rgba(236,253,245,.95);
    border: 1px solid #a7f3d0;
}

.toast-success .toast-icon {
    background: #10b981;
    color: white;
}

.toast-error {
    background: rgba(254,242,242,.95);
    border: 1px solid #fecaca;
}

.toast-error .toast-icon {
    background: #ef4444;
    color: white;
}

.toast-warning {
    background: rgba(255,251,235,.95);
    border: 1px solid #fde68a;
}

.toast-warning .toast-icon {
    background: #f59e0b;
    color: white;
}

.toast-info {
    background: rgba(239,246,255,.95);
    border: 1px solid #bfdbfe;
}

.toast-info .toast-icon {
    background: #3b82f6;
    color: white;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-16px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-12px) scale(.96); }
}

/* ── Subtle fade-up on scroll (shared with the service pages) ── */
.fade-up {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.tour-head {
    max-width: 46rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.tour-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: .35rem .9rem;
    border-radius: 6px;
    background: var(--brand-blue-soft);
    border: 1px solid rgba(59, 130, 246, .22);
    color: var(--brand-blue);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.tour-heading {
    color: var(--brand-navy);
    font-size: var(--text-section);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin-bottom: .75rem;
}

.tour-lede {
    color: var(--text-tertiary);
    font-size: var(--text-copy);
    line-height: 1.6;
}

.tour-lede a {
    color: var(--brand-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Chapter steps (mobile-first: stacked mini + note) */
.tour-steps {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.tour-note {
    width: 100%;
    padding: 1.6rem 1.5rem;
}

.tour-note-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: .35rem .8rem;
    border-radius: 6px;
    background: var(--brand-blue-soft);
    border: 1px solid rgba(59, 130, 246, .22);
    color: var(--brand-blue);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.tour-note-cue {
    margin-top: .8rem;
    color: var(--brand-navy);
    font-size: var(--text-cue);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
}

/* One-line "when in the year", absorbed from the retired workflow stops */
.tour-note-when {
    margin-top: .5rem;
    color: var(--text-tertiary);
    font-size: var(--text-copy);
    line-height: 1.6;
}

.tour-note-copy {
    margin-top: .5rem;
    color: var(--text-secondary);
    font-size: var(--text-copy);
    line-height: 1.65;
}

/* Mobile postcard replica (one signature card per chapter) */
.tour-mini {
    margin-bottom: 1rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-warm-md);
    overflow: hidden;
    background: #fff;
}

.tour-mini-strip {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--brand-blue);
    color: #fff;
    padding: .45rem .8rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: -.005em;
}

.tour-mini-strip i {
    font-size: .68rem;
    opacity: .9;
}

.tour-mini-body {
    padding: .8rem .85rem .9rem;
    background: #f3f4f6;
}

/* Sticky frame column (desktop only) */
.tour-frame-wrap {
    display: none;
}

.tour-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    width: fit-content;
    margin: 0 auto 1rem;
    padding: .45rem;
    border-radius: 999px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-warm-md);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.tour-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem .35rem .45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.tour-chip-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    background: var(--brand-navy-soft);
    color: var(--text-tertiary);
    font-size: .7rem;
    font-weight: 800;
    transition: background .2s ease, color .2s ease;
}

.tour-chip:hover {
    color: var(--brand-blue);
    border-color: var(--glass-border);
    background: var(--brand-blue-soft);
}

/* The product window */
.tour-frame {
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: #fff;
    box-shadow: var(--shadow-warm-lg), 0 24px 64px var(--glow-soft);
    overflow: hidden;
}

.tour-chrome {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .55rem .8rem;
    background: var(--brand-navy);
}

.tour-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
}

.tour-url {
    margin-left: .5rem;
    padding: .18rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .75);
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .02em;
}

.tour-topbar {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: var(--brand-blue);
    color: #fff;
    padding: .5rem .85rem;
}

.tour-topbar-back {
    font-size: .72rem;
    opacity: .8;
}

.tour-topbar-brand {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.tour-topbar img {
    display: block;
}

.tour-app {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: #f3f4f6;
    padding: .7rem;
}

/* Replica sidebar (grays = the app's own gray-200/700/400) */
.tour-sidenav {
    flex-shrink: 0;
    width: 10rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.tour-nav-item {
    --ico-bg: #dbeafe;
    --ico-fg: #3b82f6;
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    padding: .5rem .55rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
}

.tour-nav-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 7px;
    background: var(--ico-bg);
    color: var(--ico-fg);
    font-size: .62rem;
}

.tour-nav-txt {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
}

.tour-nav-label {
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.005em;
}

.tour-nav-season {
    font-family: var(--font-mono);
    font-size: .5rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9ca3af;
}

/* Content panes: grid-stacked, crossfaded by data-chapter */
.tour-panes {
    display: grid;
    flex: 1;
    min-width: 0;
}

.tour-pane {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

/* One spotlighted element per pane */
.tour-hot {
    box-shadow: 0 0 0 2px var(--glow-strong), 0 0 22px var(--glow-mid);
}

/* Closing CTA row */
.tour-close {
    max-width: 34rem;
    margin: 3rem auto 0;
    text-align: center;
    color: var(--brand-navy);
    font-size: var(--text-cue);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.tour-close + .tour-cta {
    margin-top: 1.4rem;
}

.tour-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .85rem;
    margin-top: 3rem;
}

.tour-cta .cta-button {
    margin: 0;
}

.tour-fineprint {
    max-width: 34rem;
    margin: 1.1rem auto 0;
    text-align: center;
    color: var(--text-quaternary);
    font-size: .78rem;
    line-height: 1.5;
}

/* ── Header nav links (Who We Are / Announcements) ── */
.header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    margin: 1.25rem auto 0;
    flex-wrap: wrap;
}

.header-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #ffffff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: -.005em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}

.header-nav-link i {
    font-size: .78rem;
    color: var(--brand-blue);
    transition: color .15s ease;
}

.header-nav-link:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--brand-navy);
}

.header-nav-link:hover i {
    color: var(--brand-blue);
}

.header-nav-link:active {
    transform: translateY(1px);
}

@media (min-width: 1024px) {
    .header-nav {
        margin-top: 1.5rem;
    }
}

@media (max-width: 480px) {
    .header-nav-link {
        font-size: .76rem;
        padding: .45rem .8rem;
    }
}

/* ── Advanced Dropdown Navigation (Desktop) ── */
.dropdown-container {
    position: relative;
}

.nav-btn {
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.86);
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.18s ease-in-out;
}

.nav-btn:hover, .nav-btn.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.nav-btn i {
    transition: transform 0.2s ease-in-out;
}

.nav-btn.active i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 50%;
    transform: translateX(-50%) translateY(12px) scale(0.95);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(31, 41, 55, 0.08);
    border-radius: 18px;
    box-shadow: var(--shadow-warm-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
    z-index: 2000;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* ── Specific dropdown layouts ── */
.dropdown-menu-products {
    width: 380px;
}

.dropdown-menu-company {
    width: 220px;
}

/* ── User Profile Dropdown ── */
#user-profile-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    left: auto;
    width: 200px;
    background: #ffffff;
    border: 1px solid rgba(31, 41, 55, 0.08);
    border-radius: 14px;
    box-shadow: var(--shadow-warm-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.95);
    transform-origin: top right;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2000;
}

#user-profile-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

#user-profile-menu a,
#user-profile-menu button {
    min-height: 40px;
}

#desktop-logout-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
}

#user-profile-btn {
    transition: all 0.18s ease-in-out;
}

#user-profile-btn.active i#user-profile-arrow {
    transform: rotate(180deg);
}

/* ── Responsive Header Layouts ── */
.mobile-header-row {
    display: none;
}

.desktop-header-layout {
    display: block;
}

@media (max-width: 1023px) {
    .desktop-header-layout {
        display: none;
    }
    .mobile-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: relative;
    }
    .brand-header .container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .mobile-logo-link {
        display: flex;
        align-items: center;
        height: 100%;
        max-height: 48px;
    }
    .mobile-logo {
        height: 40px !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

/* ── Mobile Slideout Drawer ── */
.mobile-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    z-index: 9998;
}

.mobile-drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease;
}

.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 290px;
    max-width: 85vw;
    background: #1f2937; /* Official EduFinder dark background */
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.28s;
    z-index: 9999;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-drawer.active {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.35);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

@media (max-width: 1023px) {
    .mobile-drawer-backdrop {
        display: block;
    }
    .mobile-drawer {
        display: flex;
    }
}

.mobile-drawer-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-drawer-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.mobile-drawer-logo {
    height: 37px;
    width: auto;
    max-width: 90%;
    display: block;
}

.mobile-drawer-content {
    padding: 1.25rem;
    flex: 1;
}

/* ── Accordion elements inside drawer ── */
.drawer-accordion {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.75rem 0;
}

.drawer-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.5rem 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.drawer-accordion-btn i.fa-chevron-down {
    font-size: 10px;
    opacity: 0.7;
    transition: transform 0.2s ease-in-out;
}

.drawer-accordion-btn.active i.fa-chevron-down {
    transform: rotate(180deg);
}

.drawer-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0 0.5rem;
}

.drawer-accordion-content.active {
    max-height: 1000px; /* High enough to display content */
}

/* ── Foldable FAQ (native <details> accordion) ── */
.faq-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.faq-summary::-webkit-details-marker { display: none; }

.faq-summary > h3 { margin: 0; }

.faq-chevron {
    flex-shrink: 0;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: #9ca3af;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-summary:hover h3 { color: #3b82f6; }

.faq-summary:focus-visible { outline: 2px solid #3b82f6; outline-offset: 4px; border-radius: 0.5rem; }

.faq-item[open] > p { animation: faqReveal 0.25s ease; }

@keyframes faqReveal {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── FAQ section shell (the 7 <details> blocks inside are
   hand-synced across the marketing pages: style, never edit) ── */
.faq-section {
    max-width: 56rem;
    margin: 5.5rem auto 5rem;
}

.faq-heading {
    color: var(--brand-navy);
    font-size: var(--text-section);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin-bottom: .75rem;
}

.faq-lede {
    color: var(--text-tertiary);
    font-size: var(--text-copy);
    line-height: 1.6;
    max-width: 42rem;
    margin-bottom: 2.5rem;
}

.faq-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-warm-sm);
    overflow: hidden;
}

.faq-panel > .faq-item + .faq-item {
    border-top: 1px solid rgba(31, 41, 55, .08);
}

.faq-panel .faq-summary h3 {
    font-size: var(--text-faq-q);
    line-height: 1.4;
}

.faq-panel .faq-item > p {
    font-size: 1.02rem;
    line-height: 1.7;
}

.faq-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 2.25rem;
}

.faq-cta-lede {
    color: var(--text-tertiary);
    font-size: var(--text-copy);
    line-height: 1.6;
}

.faq-cta .cta-button {
    margin-top: .9rem;
}

/* ── Footer ── */
.site-footer {
    position: relative;
    margin-top: 5rem;
    background: var(--brand-navy);
    color: #fff;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .5), transparent);
}

.site-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px);
    background-size: 22px 22px;
    pointer-events: none;
}

.site-footer-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    text-align: center;
    padding: 2.25rem 1rem;
}

.site-footer-brand {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.site-footer-note {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .02em;
}

@media (min-width: 768px) {
    .site-footer-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding: 2.25rem 2rem;
    }
}

/* ── News ticker (terminal data-feed style) ── */
.news-ticker {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 42px;
    margin-bottom: 2.5rem;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(31, 41, 55, .12);
    box-shadow: var(--shadow-warm-sm);
}

.news-ticker-label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
    background: var(--brand-navy);
    color: #ffffff;
    padding: 0 1.05rem 0 1rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.news-ticker-label-compact {
    display: none;
}

/* Blinking block cursor: the terminal tell */
.news-ticker-label::before {
    content: '';
    width: .5rem;
    height: .95rem;
    background: var(--brand-blue);
    animation: ticker-cursor-blink 1.1s steps(2, start) infinite;
    flex-shrink: 0;
}

.news-ticker-label::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    bottom: 0;
    width: 10px;
    background: linear-gradient(90deg, var(--brand-navy), transparent);
    pointer-events: none;
}

@keyframes ticker-cursor-blink {
    to { visibility: hidden; }
}

.news-ticker-track {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.news-ticker-list {
    display: inline-flex;
    align-items: center;
    gap: 2.25rem;
    height: 100%;
    padding-left: 1.25rem;
    white-space: nowrap;
    animation: news-ticker-scroll 60s linear infinite;
    will-change: transform;
}

.news-ticker-track:hover .news-ticker-list {
    animation-play-state: paused;
}

@keyframes news-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.news-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--brand-navy);
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: -.01em;
    transition: color .15s ease;
}

/* Square data-point bullets */
.news-ticker-item::before {
    content: '';
    width: .35rem;
    height: .35rem;
    background: var(--brand-blue);
    flex-shrink: 0;
}

.news-ticker-item:hover {
    color: var(--brand-blue);
}

@media (max-width: 768px) {
    .news-ticker {
        height: 38px;
        margin-bottom: 2rem;
    }
    .news-ticker-label {
        font-size: .64rem;
        padding: 0 .85rem;
        letter-spacing: .06em;
    }
    .news-ticker-label-full {
        display: none;
    }
    .news-ticker-label-compact {
        display: inline;
    }
    .news-ticker-item {
        font-size: .76rem;
    }
    .news-ticker-list {
        gap: 1.75rem;
        animation-duration: 52s;
    }
}