:root {
    color-scheme: light;
    --bg: #f8fafc;
    --bg-alt: #ffffff;
    --surface: #f1f5f9;
    --surface-2: #e8f0fe;
    --input-bg: #ffffff;
    --text: #0f172a;
    --text-muted: #475569;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --link: #1d4ed8;
    --ring: #2563eb;
    --green: #15803d;
    --green-soft: #f0fdf4;
    --gold: #eab308;
    --red: #b91c1c;
    --red-soft: #fef2f2;
    --blue-soft: #eff6ff;
    --shadow: 0 18px 50px rgba(15, 23, 42, .08);
    --shadow-small: 0 8px 24px rgba(15, 23, 42, .07);
    --grad: linear-gradient(135deg, #2563eb, #1d4ed8);
    --grad-deep: linear-gradient(135deg, #1e40af, #2563eb);
    --grad-soft: linear-gradient(135deg, #eff6ff, #f0fdf4);
    --radius: 8px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f172a;
    --bg-alt: #0b1324;
    --surface: #1e293b;
    --surface-2: #1b2f4d;
    --input-bg: #0f172a;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --border: #334155;
    --border-strong: #475569;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --link: #60a5fa;
    --ring: #60a5fa;
    --green: #4ade80;
    --green-soft: #12301f;
    --red: #f87171;
    --red-soft: #3b1a1f;
    --blue-soft: #13243c;
    --shadow: 0 18px 50px rgba(0, 0, 0, .23);
    --shadow-small: 0 8px 24px rgba(0, 0, 0, .2);
    --grad-soft: linear-gradient(135deg, #13243c, #12301f);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0f172a;
        --bg-alt: #0b1324;
        --surface: #1e293b;
        --surface-2: #1b2f4d;
        --input-bg: #0f172a;
        --text: #e2e8f0;
        --text-muted: #94a3b8;
        --border: #334155;
        --border-strong: #475569;
        --link: #60a5fa;
        --ring: #60a5fa;
        --green: #4ade80;
        --green-soft: #12301f;
        --red: #f87171;
        --red-soft: #3b1a1f;
        --blue-soft: #13243c;
        --shadow: 0 18px 50px rgba(0, 0, 0, .23);
        --shadow-small: 0 8px 24px rgba(0, 0, 0, .2);
        --grad-soft: linear-gradient(135deg, #13243c, #12301f);
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.6 var(--font); }
img { display: block; max-width: 100%; }
a { color: var(--link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--primary-hover); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.18; }
h1 { font-size: 3.25rem; }
h2 { font-size: 2.35rem; }
h3 { font-size: 1.2rem; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.container { width: min(100% - 2rem, 76rem); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 1000; left: 1rem; top: -5rem; padding: .7rem 1rem; background: var(--text); color: var(--bg); border-radius: 4px; }
.skip-link:focus { top: 1rem; }
.icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: .55rem; padding: .7rem 1.1rem; border: 1px solid transparent; border-radius: 6px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.button-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .2); }
.button-primary:hover { background: var(--primary-hover); color: #fff; }
.button-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.button-outline:hover, .button-quiet:hover { background: var(--surface); color: var(--text); }
.button-quiet { background: transparent; color: var(--text-muted); }
.button-light { background: #fff; color: #1e40af; }
.button-light:hover { background: #eff6ff; color: #1e40af; }
.button-outline-light { border-color: rgba(255,255,255,.68); color: #fff; background: transparent; }
.button-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.button-small { min-height: 38px; padding: .55rem .8rem; font-size: .9rem; }
.button-large { min-height: 52px; padding: .9rem 1.25rem; }
.button-block { width: 100%; }
.icon-btn { display: inline-grid; width: 44px; height: 44px; place-items: center; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.icon-btn:hover { background: var(--surface); }
.text-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; text-decoration: none; }
.text-link .icon { width: 1rem; }
.text-button { padding: 0; border: 0; background: none; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.text-danger { color: var(--red); }
.eyebrow { margin-bottom: .7rem; color: var(--green); font-size: .78rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.muted { color: var(--text-muted); }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-white { background: var(--bg-alt); }
.section-alt { background: var(--surface); }
.section-dark { background: #0f2443; color: #e2e8f0; }
.section-dark .eyebrow { color: #4ade80; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.section-heading h2 { margin-bottom: .45rem; }
.section-heading p { margin-bottom: 0; color: var(--text-muted); }
.section-heading-light p { color: #cbd5e1; }
.page-hero { padding: 4rem 0 3.5rem; background: var(--grad-soft); border-bottom: 1px solid var(--border); }
.page-hero h1 { margin-bottom: .6rem; font-size: 3.1rem; }
.page-hero p:last-child { max-width: 42rem; margin-bottom: 0; color: var(--text-muted); font-size: 1.1rem; }

/* Header and navigation */
.site-header { position: sticky; z-index: 50; top: 0; background: color-mix(in srgb, var(--bg-alt) 92%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
.header-inner { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 1rem; }
.brand, .auth-brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--text); font-size: 1.15rem; font-weight: 800; text-decoration: none; }
.brand:hover { color: var(--text); }
.brand-logo { display: block; width: clamp(54px, 7vw, 90px); height: auto; flex-shrink: 0; }
.brand-logo-footer { width: clamp(62px, 8vw, 102px); }
.brand-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand-title { color: #213452; font-size: clamp(1rem, 1.6vw, 1.7rem); font-weight: 900; letter-spacing: .08em; }
.brand-subtitle { color: #4f8eb9; font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: lowercase; min-width: 16.2em; }
.brand-mark { display: none; }
.brand-accent { color: var(--primary); }
.site-nav { display: flex; align-items: center; gap: 1.15rem; }
.site-nav > a:not(.button) { color: var(--text-muted); font-weight: 650; text-decoration: none; }
.site-nav > a[aria-current="page"] { color: var(--primary); }
.site-nav > a:not(.button):hover { color: var(--text); }
.nav-logout { margin: 0; }
.menu-toggle { display: none; }
.theme-toggle span { display: grid; }
.flash-wrap { padding-top: 1rem; }
.alert { padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.alert-success { border-color: #86efac; background: var(--green-soft); color: var(--green); }
.alert-error { border-color: #fecaca; background: var(--red-soft); color: var(--red); }
.alert-info { border-color: #bfdbfe; background: var(--blue-soft); color: var(--link); }

/* Hero */
.hero-band { position: relative; overflow: hidden; padding: clamp(4rem, 8vw, 7.5rem) 0 5rem; background: var(--bg); }
.hero-band::before { position: absolute; inset: 0; background: radial-gradient(ellipse at 90% 20%, rgba(34,197,94,.08), transparent 35%), radial-gradient(ellipse at 12% 80%, rgba(37,99,235,.07), transparent 38%); content: ""; pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .82fr); align-items: center; gap: clamp(3rem, 8vw, 7rem); }
.hero-copy h1 { max-width: 13ch; margin-bottom: 1.2rem; font-size: 4.1rem; }
.gradient-text { background: linear-gradient(105deg, #2563eb, #16a34a); background-clip: text; color: transparent; }
[data-theme="dark"] .gradient-text { background-image: linear-gradient(105deg, #60a5fa, #4ade80); }
.hero-lede { max-width: 38rem; color: var(--text-muted); font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.7rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.7rem; margin-top: 2.7rem; }
.hero-stats div { display: grid; gap: .1rem; }
.hero-stats strong { font-size: 1.25rem; }
.hero-stats span { color: var(--text-muted); font-size: .82rem; }
.hero-preview-wrap { position: relative; max-width: 27rem; justify-self: center; width: 100%; }
.hero-preview-orbit { position: absolute; inset: -1.5rem -2rem 1rem 1.5rem; border: 1px solid var(--border); border-radius: 48% 52% 45% 55%; transform: rotate(-9deg); }
.hero-preview { position: relative; padding: 1.15rem; border: 1px solid color-mix(in srgb, var(--border) 80%, white); border-radius: 8px; background: color-mix(in srgb, var(--bg-alt) 86%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.preview-top, .preview-footer { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.preview-top { color: var(--text-muted); font-size: .78rem; }
.preview-index { margin-left: auto; font-variant-numeric: tabular-nums; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.12); }
.preview-image { position: relative; display: grid; aspect-ratio: 16 / 10; place-items: center; overflow: hidden; margin: 1rem 0; border-radius: 6px; color: white; }
.preview-image img, .course-media img, .purchase-image img { width: 100%; height: 100%; object-fit: cover; }
.preview-image > span:first-child { width: 4rem; height: 4rem; }
.preview-image .icon { width: 100%; height: 100%; }
.preview-play { position: absolute; right: 1rem; bottom: 1rem; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #fff; color: #1d4ed8; }
.preview-category { margin-bottom: .35rem; }
.hero-preview h2 { margin-bottom: 1rem; font-size: 1.4rem; }
.preview-footer { margin-bottom: .7rem; color: var(--text-muted); font-size: .88rem; }
.preview-footer strong { color: var(--text); font-size: 1rem; }
.empty-preview-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; margin-bottom: 1.25rem; border-radius: 10px; background: var(--surface-2); color: var(--primary); }
.empty-preview-icon .icon { width: 2rem; height: 2rem; }
.hero-preview > p:not(.eyebrow) { color: var(--text-muted); }
.floating-chip { position: absolute; padding: .65rem .85rem; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-alt); box-shadow: var(--shadow-small); font-size: .78rem; font-weight: 750; }
.chip-one { top: 17%; left: -13%; }.chip-two { right: -12%; bottom: 15%; }

/* Course and category cards */
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.category-tile { display: flex; min-width: 0; min-height: 82px; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); text-decoration: none; transition: border-color .18s, transform .18s; }
.category-tile:hover { border-color: var(--primary); color: var(--text); transform: translateY(-2px); }
.category-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--primary); }
.category-tile strong, .category-tile small { display: block; overflow-wrap: anywhere; }
.category-tile small { color: var(--text-muted); }
.category-arrow { width: 1rem; margin-left: auto; color: var(--text-muted); }
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.course-card, .instructor-card, .post-card { overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); box-shadow: 0 2px 9px rgba(15,23,42,.025); }
.course-card { transition: transform .2s ease, box-shadow .2s ease; }
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-small); }
.course-media { position: relative; display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; color: white; text-decoration: none; }
.course-media > .icon { width: 3rem; height: 3rem; }
.tone-1 { background: linear-gradient(135deg, #155e75, #0f766e); }.tone-2 { background: linear-gradient(135deg, #1e40af, #2563eb); }.tone-3 { background: linear-gradient(135deg, #166534, #15803d); }.tone-4 { background: linear-gradient(135deg, #075985, #0284c7); }.tone-5 { background: linear-gradient(135deg, #14532d, #16a34a); }.tone-6 { background: linear-gradient(135deg, #1d4ed8, #0891b2); }
.media-symbol { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; }
.media-symbol .icon { width: 100%; height: 100%; }
.media-tag { position: absolute; top: .75rem; left: .75rem; padding: .25rem .5rem; border-radius: 4px; background: rgba(255,255,255,.94); color: #0f172a; font-size: .72rem; font-weight: 800; }
.course-card-body { padding: 1rem; }
.card-meta { display: flex; justify-content: space-between; gap: .5rem; color: var(--text-muted); font-size: .75rem; }
.course-card h3 { margin: .65rem 0 .45rem; }
.course-card h3 a, .post-card h3 a { color: var(--text); text-decoration: none; }
.course-card h3 a:hover, .post-card h3 a:hover { color: var(--link); }
.course-card-body > p { min-height: 3.2em; margin-bottom: .85rem; color: var(--text-muted); font-size: .9rem; }
.course-card-by { color: var(--text-muted); font-size: .82rem; }
.course-card-bottom { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.course-card-bottom > strong { white-space: nowrap; }
.rating { display: inline-flex; align-items: center; gap: .12rem; color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
.rating-star { color: var(--border-strong); }.rating-star.is-filled { color: var(--gold); -webkit-text-stroke: .4px #a16207; }
.rating-count { margin-left: .2rem; color: var(--text-muted); }

/* Instructor, review, editorial cards */
.instructor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.instructor-card { padding: 1.3rem; }
.avatar { display: grid; width: 76px; height: 76px; place-items: center; overflow: hidden; margin-bottom: 1rem; border-radius: 50%; color: #fff; font-size: 1.25rem; font-weight: 800; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.instructor-card h3 { margin-bottom: .3rem; }
.instructor-card p { color: var(--text-muted); font-size: .9rem; }
.instructor-card .instructor-headline { min-height: 2.6em; color: var(--primary); font-weight: 700; }
.instructor-stats { display: flex; gap: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .8rem; }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.review-card { padding: 1.3rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-alt); }
.review-card blockquote { margin: .8rem 0 1.2rem; font-size: 1.03rem; }
.review-author { margin-bottom: 0; color: var(--text-muted); font-size: .86rem; }
.review-author strong { color: var(--text); }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.post-card { display: flex; flex-direction: column; }
.post-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.post-image img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1.1rem; }
.post-card time { margin-bottom: .55rem; color: var(--text-muted); font-size: .78rem; }
.post-card h3 { margin-bottom: .55rem; }
.post-card p { color: var(--text-muted); font-size: .9rem; }
.post-card .text-link { margin-top: auto; }

/* Benefit and learner preview */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 2.5rem; }
.benefit-item { max-width: 22rem; }
.benefit-icon { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 1rem; border: 1px solid rgba(148,163,184,.28); border-radius: 7px; color: #4ade80; }
.benefit-item h3 { margin-bottom: .5rem; color: #fff; }
.benefit-item p { margin: 0; color: #cbd5e1; }
.dashboard-preview-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(2rem, 7vw, 6rem); }
.dashboard-preview-grid > div:first-child > p:not(.eyebrow) { color: var(--text-muted); }
.illustration-note { display: inline-block; margin: .5rem 0 1.2rem; color: var(--text-muted); font-size: .8rem; }
.dashboard-mock { padding: 1.4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); box-shadow: var(--shadow); }
.mock-top, .mock-stats, .mock-course { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mock-top { padding-bottom: 1rem; border-bottom: 1px solid var(--border); font-weight: 750; }
.mock-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--primary); }
.mock-stats { justify-content: flex-start; gap: 2.5rem; padding: 1rem 0; }
.mock-stats div { display: grid; }.mock-stats small, .mock-course small { color: var(--text-muted); }
.mock-stats strong { font-size: 1.25rem; }
.mock-course { justify-content: flex-start; padding: 1rem 0; border-top: 1px solid var(--border); }
.mock-course > div { flex: 1; min-width: 0; display: grid; gap: .18rem; }
.mock-course > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-course > b { font-size: .8rem; }
.mock-course-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: var(--blue-soft); color: var(--link); font-size: .8rem; font-weight: 800; }
.mock-green { background: var(--green-soft); color: var(--green); }
.progress-track { height: 6px; overflow: hidden; border-radius: 9px; background: var(--surface); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: #22c55e; }.progress-55 { width: 55%; }.progress-30 { width: 30%; }

/* FAQ and CTA */
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 4rem; }
.faq-layout > div:first-child p:not(.eyebrow) { color: var(--text-muted); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-weight: 700; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--link); font-size: 1.2rem; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }.faq-item p { padding: 0 2.5rem 1rem 0; color: var(--text-muted); }
.cta-band { padding: 4rem 0; background: var(--grad-deep); color: #fff; }
.cta-content { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem 2rem; }
.cta-content .eyebrow { color: #bbf7d0; }.cta-content h2 { margin-bottom: .5rem; }.cta-content p { margin-bottom: 0; color: #dbeafe; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; }.cta-content .newsletter-form { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.25); }
.cta-content .newsletter-form p { display: none; }.cta-content .newsletter-form label { font-weight: 700; }.cta-content .newsletter-row { width: min(100%, 28rem); }

/* Forms, filters, empty states */
.field { display: grid; gap: .4rem; }
.field label { font-size: .9rem; font-weight: 700; }
.input { width: 100%; min-height: 46px; padding: .65rem .75rem; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--input-bg); color: var(--text); }
textarea.input { min-height: 120px; resize: vertical; }
.input::placeholder { color: var(--text-muted); opacity: .8; }
.input[aria-invalid="true"] { border-color: var(--red); }
.field-error { display: block; color: var(--red); font-size: .84rem; }
.field-hint { color: var(--text-muted); font-size: .82rem; }
.filters { display: grid; grid-template-columns: minmax(14rem, 1.5fr) repeat(2, minmax(10rem, .8fr)) auto; align-items: end; gap: .8rem; padding: 1rem; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); }
.results-count { margin: 1.5rem 0; color: var(--text-muted); font-size: .9rem; }
.empty-state { display: grid; justify-items: center; padding: 4rem 1rem; text-align: center; }
.empty-state h2 { margin: 1rem 0 .5rem; font-size: 1.6rem; }.empty-state p { max-width: 34rem; color: var(--text-muted); }
.empty-state.compact { padding: 2rem; border: 1px dashed var(--border-strong); border-radius: 7px; }
.empty-icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 9px; background: var(--surface-2); color: var(--primary); }.empty-icon .icon { width: 1.8rem; height: 1.8rem; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 2rem; }
.pagination a { display: grid; min-width: 42px; min-height: 42px; place-items: center; border: 1px solid var(--border); border-radius: 5px; text-decoration: none; }.pagination a[aria-current="page"] { border-color: var(--primary); background: var(--primary); color: #fff; }
.honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; }
.newsletter-form label { display: block; margin-bottom: .25rem; font-weight: 750; }.newsletter-form p { color: var(--text-muted); font-size: .86rem; }
.newsletter-row { display: flex; gap: .5rem; }.newsletter-row .input { min-width: 0; }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: start; }.contact-layout > div p { color: var(--text-muted); }
.contact-note { display: flex; align-items: center; gap: .5rem; margin-top: 2rem; }.contact-note .icon { color: var(--green); }
.form-panel { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); box-shadow: var(--shadow-small); }
.checkbox-row { display: flex; align-items: flex-start; gap: .65rem; }.checkbox-row input { width: 20px; height: 20px; flex: 0 0 auto; margin: .1rem 0 0; accent-color: var(--primary); }

/* Course detail and checkout */
.course-page { padding-bottom: 5rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .55rem; padding: 1.25rem 0; color: var(--text-muted); font-size: .85rem; }.breadcrumbs a { text-decoration: none; }
.course-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; gap: 3rem; }
.course-main h1 { margin-bottom: .85rem; font-size: 3.1rem; }.course-summary { color: var(--text-muted); font-size: 1.15rem; }
.course-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 0 1.5rem; color: var(--text-muted); font-size: .9rem; }
.video-frame { aspect-ratio: 16 / 9; overflow: hidden; margin: 1rem 0 2rem; border-radius: 7px; background: #0b1324; }.video-frame iframe { width: 100%; height: 100%; border: 0; }
.course-description { margin-top: 2rem; }.course-description h2, .course-reviews h2 { font-size: 1.7rem; }.course-description p, .prose p { color: var(--text-muted); }
.purchase-box { position: sticky; top: 96px; padding: 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); box-shadow: var(--shadow-small); }
.purchase-image { display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; border-radius: 5px; color: white; }.purchase-image > .icon { width: 3rem; height: 3rem; }
.price-large { margin: 1rem 0 .2rem; font-size: 1.8rem; font-weight: 800; }.purchase-box > p:not(.price-large) { color: var(--text-muted); font-size: .9rem; }
.purchase-includes { display: grid; gap: .55rem; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--border); list-style: none; }.purchase-includes li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }.purchase-includes .icon { width: 1rem; color: var(--green); }
.course-reviews { margin-top: 3rem; }.course-reviews .review-grid { grid-template-columns: repeat(2, 1fr); }
.review-form-panel { display: grid; gap: 1rem; max-width: 44rem; margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); }
.review-form-panel h3, .review-form-panel p { margin-bottom: 0; }
.review-form { display: grid; gap: 1rem; }
.review-rating-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.review-rating-field legend { margin-bottom: .45rem; font-size: .9rem; font-weight: 700; }
.review-rating-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.review-rating-option { display: inline-flex; min-height: 44px; align-items: center; gap: .4rem; padding: .35rem .65rem; border: 1px solid var(--border-strong); border-radius: 5px; cursor: pointer; }
.review-rating-option:has(input:checked) { border-color: var(--primary); background: var(--blue-soft); }
.review-rating-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.review-rating-option span { font-weight: 700; }
.stepper { display: flex; gap: 2rem; padding: 0 0 1rem; border-bottom: 1px solid var(--border); color: var(--text-muted); list-style: none; counter-reset: step; }.stepper li { display: flex; align-items: center; gap: .5rem; }.stepper li::before { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; counter-increment: step; content: counter(step); font-size: .8rem; }.stepper .is-complete::before, .stepper [aria-current="step"]::before { border-color: var(--primary); background: var(--primary); color: #fff; }
.checkout-layout { display: grid; grid-template-columns: 1.3fr .7fr; align-items: start; gap: 3rem; }.checkout-main > h2 { margin-top: 2rem; font-size: 1.4rem; }.checkout-main > p { color: var(--text-muted); }
.stack-form { display: grid; gap: 1rem; }.order-summary { padding: 1.3rem; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); }.order-summary h2 { font-size: 1.3rem; }
.summary-course { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; }.summary-icon { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; border-radius: 6px; color: #fff; }.summary-course strong, .summary-course small { display: block; }.summary-course small { color: var(--text-muted); }
.summary-line { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--border); }.summary-total { margin-top: .4rem; font-size: 1.1rem; }
.confirmation-page { max-width: 42rem; text-align: center; }.confirmation-icon { display: grid; width: 64px; height: 64px; place-items: center; margin: 0 auto 1.2rem; border-radius: 50%; background: var(--green-soft); color: var(--green); }.confirmation-icon .icon { width: 2rem; height: 2rem; }.confirmation-summary { margin: 2rem auto; text-align: left; }

/* Auth, account, admin, tables, editorial */
.auth-page { display: grid; min-height: calc(100vh - 76px); grid-template-columns: minmax(0, 1fr) minmax(19rem, .75fr); }
.auth-panel { width: min(100%, 32rem); justify-self: center; align-self: center; padding: 3rem 2rem; }.auth-brand { margin-bottom: 2.5rem; }.auth-panel h1 { margin-bottom: .5rem; font-size: 2.4rem; }.auth-lede { margin-bottom: 1.5rem; color: var(--text-muted); }.auth-panel .stack-form { margin-top: 1.5rem; }.auth-switch { margin-top: 1.4rem; color: var(--text-muted); text-align: center; }
.auth-aside { display: flex; flex-direction: column; justify-content: center; padding: 4rem; background: var(--grad-deep); color: #fff; }.auth-aside .eyebrow { color: #bbf7d0; }.auth-aside h2 { max-width: 12ch; font-size: 2.5rem; }.auth-aside p:not(.eyebrow) { max-width: 25rem; color: #dbeafe; }.auth-aside a { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: #fff; font-weight: 750; }
.dashboard-summary { display: flex; gap: 1rem; margin-bottom: 2rem; }.dashboard-summary > div { display: grid; min-width: 10rem; gap: .2rem; padding: 1rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-alt); }.dashboard-summary span { color: var(--text-muted); font-size: .85rem; }.dashboard-summary strong { font-size: 1.5rem; }
.orders-section, .recommendations { margin-top: 3rem; }.orders-section h2 { font-size: 1.5rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-alt); }table { width: 100%; border-collapse: collapse; text-align: left; }th, td { padding: .85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }th { background: var(--surface); font-size: .82rem; }tbody tr:last-child td { border-bottom: 0; }td { font-size: .9rem; }.table-subtitle { display: block; color: var(--text-muted); font-size: .78rem; }
.badge { display: inline-flex; padding: .25rem .5rem; border-radius: 4px; background: var(--surface); font-size: .76rem; font-weight: 750; white-space: nowrap; }.badge-published, .badge-paid { background: var(--green-soft); color: var(--green); }.badge-draft, .badge-pending { background: var(--blue-soft); color: var(--link); }.badge-archived, .badge-cancelled, .badge-refunded { background: var(--surface); color: var(--text-muted); }
.legal-page, .article-page { max-width: 52rem; padding-block: 4rem; }.legal-page h1, .article-page h1 { font-size: 3.2rem; }.legal-page h2 { margin-top: 2rem; font-size: 1.5rem; }.legal-page p, .article-page .prose p { color: var(--text-muted); }.article-header { margin: 2rem 0; }.article-lede { color: var(--text-muted); font-size: 1.2rem; }.article-cover { width: 100%; max-height: 34rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; }.prose { margin: 2rem 0; font-size: 1.07rem; }.error-page { min-height: 55vh; display: grid; align-items: center; text-align: center; }.error-page .container { max-width: 38rem; }.error-code { margin-bottom: 0; color: var(--primary); font-size: 5rem; font-weight: 850; line-height: 1; }.error-page h1 { font-size: 2.4rem; }.error-page p:not(.eyebrow,.error-code) { color: var(--text-muted); }
.admin-page h1 { margin-bottom: .4rem; font-size: 2.5rem; }.admin-page .section-heading { align-items: center; }.admin-tabs { display: flex; gap: .3rem; margin: 1.5rem 0; border-bottom: 1px solid var(--border); }.admin-tabs a { padding: .65rem .9rem; border-bottom: 2px solid transparent; color: var(--text-muted); font-weight: 700; text-decoration: none; }.admin-tabs a[aria-current="page"] { border-color: var(--primary); color: var(--primary); }
.admin-filters { display: flex; align-items: end; gap: .75rem; margin: 1.5rem 0; }.admin-filters .field { width: min(100%, 22rem); }.table-actions { display: flex; flex-wrap: wrap; gap: .65rem; font-size: .82rem; }.table-actions form { display: inline-flex; margin: 0; }.admin-form-wrap { max-width: 60rem; }.admin-form { padding: 1.5rem; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); }.admin-form fieldset { padding: 0; border: 0; }.admin-form legend { margin-bottom: 1.2rem; font-size: 1.3rem; font-weight: 800; }.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.field-wide { grid-column: 1 / -1; }.form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; }.admin-form-wrap > .form-panel { max-width: 36rem; }
.review-moderation-table { min-width: 760px; }

/* Footer */
.site-footer { padding: 3rem 0 1rem; background: var(--bg-alt); border-top: 1px solid var(--border); }.footer-grid { display: grid; grid-template-columns: 1.4fr .7fr .7fr 1.3fr; gap: 2rem; }.brand-footer { margin-bottom: .8rem; }.footer-grid > div:first-child p { max-width: 17rem; color: var(--text-muted); font-size: .9rem; }.footer-links { display: grid; align-content: start; gap: .55rem; }.footer-links strong { margin-bottom: .25rem; }.footer-links a { color: var(--text-muted); text-decoration: none; font-size: .9rem; }.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .8rem; }

.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
    .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
    .js .reveal.is-visible { opacity: 1; transform: translateY(0); }
    .hero-preview-orbit { animation: orbit-drift 12s ease-in-out infinite alternate; }
    @keyframes orbit-drift { to { transform: rotate(4deg) translateY(-5px); } }
}
@media (max-width: 56.25em) {
    .menu-toggle { display: grid; }
    .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: .5rem 1rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-alt); box-shadow: var(--shadow-small); }
    .site-nav.is-open { display: flex; }
    .site-nav > a, .site-nav .nav-logout { min-height: 44px; padding: .65rem .25rem; }
    .site-nav .nav-logout .button { width: 100%; }.site-nav .theme-toggle { align-self: flex-start; margin-top: .4rem; }
    .hero-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }.hero-copy h1 { font-size: 3.25rem; }
    .course-grid, .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }.filters { grid-template-columns: repeat(2, 1fr); }.filter-search { grid-column: 1 / -1; }
    .course-detail-grid { grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.5rem; }
}
@media (max-width: 56.25em) {
    .no-js .menu-toggle { display: none; }
    .no-js .site-nav { position: static; display: flex; flex-wrap: wrap; box-shadow: none; }
}
@media (max-width: 40em) {
    .container { width: min(100% - 1.25rem, 76rem); }
    .section { padding-block: 3.25rem; }.section-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
    h1 { font-size: 2.4rem; } h2 { font-size: 1.85rem; }
    .hero-band { padding: 3.5rem 0 3rem; }.hero-grid { grid-template-columns: 1fr; }.hero-copy h1 { max-width: 14ch; font-size: 2.75rem; }.hero-preview-wrap { width: min(100% - 1.5rem, 27rem); }.hero-preview-orbit { inset: -.5rem -1rem 1rem .5rem; }.floating-chip { display: none; }
    .hero-stats { gap: 1rem 1.4rem; }.hero-stats div { min-width: 5rem; }
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }.category-tile { min-height: 78px; padding: .7rem; gap: .45rem; }.category-tile > span:nth-child(2) { min-width: 0; }.category-icon { width: 38px; height: 38px; }.category-tile strong { font-size: .88rem; }
    .course-grid, .instructor-grid, .review-grid, .post-grid, .benefit-grid { grid-template-columns: 1fr; }.course-card-body > p { min-height: 0; }.benefit-grid { gap: 1.5rem; }
    .dashboard-preview-grid, .faq-layout, .contact-layout, .checkout-layout { grid-template-columns: 1fr; gap: 2rem; }.dashboard-preview-grid { gap: 1.5rem; }.mock-stats { gap: 1.5rem; }
    .cta-content { grid-template-columns: 1fr; }.cta-content .newsletter-form { grid-column: auto; align-items: stretch; flex-direction: column; }.cta-content .newsletter-row { width: 100%; }
    .filters { grid-template-columns: 1fr; }.filter-search { grid-column: auto; }
    .course-detail-grid { grid-template-columns: 1fr; }.purchase-box { position: static; grid-row: 1; }.course-main { grid-row: 2; }
    .course-reviews .review-grid { grid-template-columns: 1fr; }.checkout-layout { gap: 1.5rem; }.stepper { justify-content: space-between; gap: .5rem; padding-left: 0; font-size: .85rem; }
    .auth-page { grid-template-columns: 1fr; }.auth-panel { padding: 2.5rem 1.25rem; }.auth-aside { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }.footer-grid > div:first-child, .footer-grid > div:last-child { grid-column: 1 / -1; }.footer-bottom { flex-direction: column; gap: .3rem; }
    .admin-page .section-heading { align-items: stretch; }.admin-filters { align-items: stretch; flex-direction: column; }.admin-filters .field { width: 100%; }.admin-form-grid { grid-template-columns: 1fr; }.field-wide { grid-column: auto; }.table-actions { min-width: 8rem; }
    .dashboard-summary { flex-wrap: wrap; }.dashboard-summary > div { flex: 1; min-width: 8rem; }
}
@media (forced-colors: active) {
    .button, .category-tile, .course-card, .form-panel, .order-summary { border: 1px solid ButtonText; }
}
@media print {
    .site-header, .site-footer, .button, .filters, .admin-tabs { display: none !important; }
    body { background: white; color: black; }
}