/* ============================================================
   FONT DECLARATIONS
   Self-hosted fonts with metric-matched fallbacks to prevent CLS.
   Fallback @font-face rules use size-adjust / ascent-override /
   descent-override so the system font renders at the same metrics
   as the custom font, eliminating layout shift on swap.
   ============================================================ */

/* --- Jost (sans-serif body font) --- variable weight 300-500 */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/jost-latin.woff2') format('woff2');
}

/* --- Cormorant Garamond (serif display font) --- */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-latin-italic.woff2') format('woff2');
}

/* --- Metric-matched fallback: Jost → Arial --- */
@font-face {
    font-family: 'Jost fallback';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: local('Arial');
    size-adjust: 104%;
    ascent-override: 80%;
    descent-override: 20%;
    line-gap-override: 0%;
}

/* --- Metric-matched fallback: Cormorant Garamond → Georgia --- */
@font-face {
    font-family: 'Cormorant Garamond fallback';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: local('Georgia');
    size-adjust: 92%;
    ascent-override: 98%;
    descent-override: 30%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Cormorant Garamond fallback';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Georgia');
    size-adjust: 92%;
    ascent-override: 98%;
    descent-override: 30%;
    line-gap-override: 0%;
}

/* ============================================================
   To add a new theme:
     1. Add a new [data-theme="your-theme"] block below
     2. Override any of the CSS variables listed in :root
   All components automatically pick up the new values.
   ============================================================ */

/* --- Base tokens (default / forest-parchment theme) --- */
:root,
[data-theme="forest-parchment"] {
    --c-bg: #fefcf7;
    --c-surface: #f5efe0;
    --c-surface-mid: #ede5cc;
    --c-nav: #1a4a3a;
    --c-nav-accent: #2d6b55;
    --c-primary: #1a4a3a;
    --c-primary-light: #2d6b55;
    --c-accent: #a54a1a;
    --c-accent-light: #e8a070;
    --c-text: #2c2c2a;
    --c-text-muted: #4a4a4a;
    --c-muted: #96bfaa;
    --c-muted-light: #c4d9cf;
    --c-on-primary: #f5efe0;
    --c-on-accent: #f5efe0;
    --c-tag-corp-bg: #e1f0ea;
    --c-tag-corp-txt: #1a4a3a;
    --c-tag-soc-bg: #fbe8dc;
    --c-tag-soc-txt: #7a3010;
    --c-tag-write-bg: #ede5cc;
    --c-tag-write-txt: #5a4200;
    --c-tag-heal-bg: #dde8e2;
    --c-tag-heal-txt: #1a3d2e;
    --c-on-nav: #f5efe0;
    --c-hero-overlay: rgba(255, 255, 255, 0.06);
    --c-hero-border: rgba(139, 173, 155, 0.3);
    --c-hero-opt-hover: rgba(196, 98, 45, 0.15);
    --f-display: "Cormorant Garamond", "Cormorant Garamond fallback", serif;
    --f-body: "Jost", "Jost fallback", sans-serif;
    --r-sm: 2px;
    --r-md: 4px;
}

/* --- Theme: Night Ink (dark editorial) --- */
[data-theme="night-ink"] {
    --c-bg: #0e0e0e;
    --c-surface: #1a1a1a;
    --c-surface-mid: #252525;
    --c-nav: #0a0a0a;
    --c-nav-accent: #1a1a1a;
    --c-primary: #e8dfc8;
    --c-primary-light: #c8b89a;
    --c-accent: #d4855a;
    --c-accent-light: #e8a070;
    --c-text: #d4cfc5;
    --c-text-muted: #888;
    --c-muted: #5a5a5a;
    --c-muted-light: #3a3a3a;
    --c-on-primary: #0e0e0e;
    --c-on-accent: #0e0e0e;
    --c-on-nav: #d4cfc5;
    --c-hero-overlay: rgba(255, 255, 255, 0.06);
    --c-hero-border: rgba(212, 197, 197, 0.15);
    --c-hero-opt-hover: rgba(212, 133, 90, 0.15);
    --c-tag-corp-bg: #1e2e26;
    --c-tag-corp-txt: #7abda0;
    --c-tag-soc-bg: #2e1e16;
    --c-tag-soc-txt: #d4855a;
    --c-tag-write-bg: #2a2416;
    --c-tag-write-txt: #c8a84a;
    --c-tag-heal-bg: #1a2820;
    --c-tag-heal-txt: #6aada8;
}

/* --- Theme: Ivory Press (light minimal) --- */
[data-theme="ivory-press"] {
    --c-bg: #ffffff;
    --c-surface: #f7f5f0;
    --c-surface-mid: #e8e4dc;
    --c-nav: #1c1c1c;
    --c-nav-accent: #2a2a2a;
    --c-primary: #1c1c1c;
    --c-primary-light: #3c3c3c;
    --c-accent: #8b2fc9;
    --c-accent-light: #a855d4;
    --c-text: #1c1c1c;
    --c-text-muted: #777;
    --c-muted: #aaaaaa;
    --c-muted-light: #dddddd;
    --c-on-primary: #ffffff;
    --c-on-accent: #ffffff;
    --c-on-nav: #f7f5f0;
    --c-hero-overlay: rgba(255, 255, 255, 0.06);
    --c-hero-border: rgba(255, 255, 255, 0.12);
    --c-hero-opt-hover: rgba(139, 47, 201, 0.15);
    --c-tag-corp-bg: #eee9f8;
    --c-tag-corp-txt: #5b219c;
    --c-tag-soc-bg: #f5eef8;
    --c-tag-soc-txt: #7a2fc9;
    --c-tag-write-bg: #f0eef8;
    --c-tag-write-txt: #6a30b0;
    --c-tag-heal-bg: #eae8f5;
    --c-tag-heal-txt: #5a28a8;
}

/* --- Theme: Amber Dusk (warm golden) --- */
[data-theme="amber-dusk"] {
    --c-bg: #fdf8f0;
    --c-surface: #f5ead6;
    --c-surface-mid: #e8d8b8;
    --c-nav: #3d2a0f;
    --c-nav-accent: #5a3f1a;
    --c-primary: #3d2a0f;
    --c-primary-light: #5a3f1a;
    --c-accent: #b8621a;
    --c-accent-light: #d4883a;
    --c-text: #2c2420;
    --c-text-muted: #5a4a40;
    --c-muted: #b89a6a;
    --c-muted-light: #d4c4a0;
    --c-on-primary: #f5ead6;
    --c-on-accent: #f5ead6;
    --c-on-nav: #f5ead6;
    --c-hero-overlay: rgba(255, 255, 255, 0.06);
    --c-hero-border: rgba(184, 154, 106, 0.3);
    --c-hero-opt-hover: rgba(184, 98, 26, 0.15);
    --c-tag-corp-bg: #f0e4d0;
    --c-tag-corp-txt: #5a3f1a;
    --c-tag-soc-bg: #fbe0cc;
    --c-tag-soc-txt: #8a3a10;
    --c-tag-write-bg: #ede0c0;
    --c-tag-write-txt: #6a4a00;
    --c-tag-heal-bg: #e0e4d8;
    --c-tag-heal-txt: #3a4a2a;
}

/* --- Theme: Sage Twilight (cool slate/teal) --- */
[data-theme="sage-twilight"] {
    --c-bg: #f5f7fa;
    --c-surface: #e8ecf0;
    --c-surface-mid: #d0d8e0;
    --c-nav: #1a2a3a;
    --c-nav-accent: #2a3a4a;
    --c-primary: #1a2a3a;
    --c-primary-light: #2a3a4a;
    --c-accent: #2a6a6a;
    --c-accent-light: #4a8a8a;
    --c-text: #2a2c30;
    --c-text-muted: #5a6070;
    --c-muted: #8a9aaa;
    --c-muted-light: #b0bcc8;
    --c-on-primary: #e8ecf0;
    --c-on-accent: #f0f4f8;
    --c-on-nav: #e8ecf0;
    --c-hero-overlay: rgba(255, 255, 255, 0.06);
    --c-hero-border: rgba(138, 154, 170, 0.3);
    --c-hero-opt-hover: rgba(42, 106, 106, 0.15);
    --c-tag-corp-bg: #e0e8f0;
    --c-tag-corp-txt: #1a3a5a;
    --c-tag-soc-bg: #e0f0f0;
    --c-tag-soc-txt: #1a5a5a;
    --c-tag-write-bg: #e8e4f0;
    --c-tag-write-txt: #3a2a6a;
    --c-tag-heal-bg: #e4eef0;
    --c-tag-heal-txt: #1a3a4a;
}

/* --- Theme: Moss & Stone (earthy moss green) --- */
[data-theme="moss-stone"] {
    --c-bg: #f4f5f0;
    --c-surface: #e8eae0;
    --c-surface-mid: #d4d8c8;
    --c-nav: #2a3528;
    --c-nav-accent: #3a4836;
    --c-primary: #2a3528;
    --c-primary-light: #3a4836;
    --c-accent: #7a7a68;
    --c-accent-light: #9a9a82;
    --c-text: #2a2c28;
    --c-text-muted: #5a5e56;
    --c-muted: #8a9088;
    --c-muted-light: #b4b8ac;
    --c-on-primary: #e8eae0;
    --c-on-accent: #f4f5f0;
    --c-on-nav: #e8eae0;
    --c-hero-overlay: rgba(255, 255, 255, 0.06);
    --c-hero-border: rgba(138, 144, 136, 0.3);
    --c-hero-opt-hover: rgba(122, 122, 104, 0.15);
    --c-tag-corp-bg: #e4e8dc;
    --c-tag-corp-txt: #2a3a28;
    --c-tag-soc-bg: #e8e4dc;
    --c-tag-soc-txt: #4a4030;
    --c-tag-write-bg: #e0e4d8;
    --c-tag-write-txt: #3a4228;
    --c-tag-heal-bg: #dce4dc;
    --c-tag-heal-txt: #2a3a30;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--f-body);
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 13px;
    line-height: 1.6;
    transition:
        background 0.3s ease,
        color 0.3s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
textarea {
    font: inherit;
}

/* ============================================================
   THEME SWITCHER UI
   ============================================================ */
.theme-bar {
    background: var(--c-surface-mid);
    padding: 6px 2rem;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.theme-bar span {
    margin-right: 4px;
}
.theme-btn {
    padding: 4px 12px;
    border: 1px solid var(--c-surface-mid);
    border-radius: var(--r-sm);
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}
.theme-btn.active,
.theme-btn:hover {
    background: var(--c-accent);
    color: var(--c-on-accent);
    border-color: var(--c-accent);
}

/* ============================================================
   NAV
   ============================================================ */
.wm-nav {
    background: var(--c-nav);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    transition: background 0.3s;
}
.wm-nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--c-on-nav);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.wm-logo {
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--c-on-nav);
    letter-spacing: 0.02em;
}
.wm-logo span {
    color: var(--c-accent-light);
}

/* Language switcher in nav */
.lang-switcher {
    display: flex;
    gap: 4px;
    align-items: center;
}
.lang-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--c-muted-light);
    font-family: var(--f-body);
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s;
}
.lang-btn.active,
.lang-btn:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-on-accent);
}
.wm-nav-links {
    display: flex;
    gap: 24px;
    list-style: none;
    align-items: center;
}
.wm-nav-links a {
    color: var(--c-muted-light);
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.wm-nav-cta {
    background: var(--c-accent);
    color: var(--c-on-accent) !important;
    padding: 6px 16px;
    border-radius: var(--r-sm);
    font-weight: 500 !important;
}

/* ============================================================
   HERO
   ============================================================ */
.wm-hero {
    background: var(--c-nav);
    padding: 3rem 2rem 2.5rem;
    position: relative;
    overflow: hidden;
    transition: background 0.3s;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.wm-hero::before {
    content: '"';
    position: absolute;
    right: 2rem;
    top: -1rem;
    font-family: var(--f-display);
    font-size: 180px;
    color: var(--c-nav-accent);
    line-height: 1;
    pointer-events: none;
}
.wm-hero-left {
    position: relative;
    z-index: 1;
}
.wm-hero-right {
    position: relative;
    min-height: 180px;
    z-index: 1;
}
.wm-testimonial-card {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    border: 1px solid var(--c-hero-border);
    border-radius: var(--r-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wm-testimonial-card.active {
    opacity: 1;
}
.wm-testimonial-quote {
    font-family: var(--f-display);
    font-size: 16.5px;
    font-style: italic;
    color: var(--c-on-nav);
    line-height: 1.5;
    margin-bottom: 1rem;
}
.wm-testimonial-author {
    font-family: var(--f-body);
    font-size: 12.4px;
    font-weight: 500;
    color: var(--c-on-nav);
    letter-spacing: 0.04em;
}
.wm-testimonial-role {
    font-family: var(--f-body);
    font-size: 11.3px;
    color: var(--c-muted-light);
    margin-top: 2px;
}
.wm-hero-tag {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-accent-light);
    margin-bottom: 1rem;
}
.wm-hero-h1 {
    font-family: var(--f-display);
    font-size: 42px;
    font-weight: 600;
    color: var(--c-on-nav);
    line-height: 1.15;
    max-width: 480px;
    margin-bottom: 1rem;
}
.wm-hero-h1 em {
    font-style: italic;
    color: var(--c-muted-light);
}
.wm-hero-sub {
    color: var(--c-muted-light);
    max-width: 420px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 1.75rem;
}
.wm-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.wm-btn-primary {
    background: var(--c-accent);
    color: var(--c-on-accent);
    border: none;
    padding: 10px 22px;
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--r-sm);
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s;
}
.wm-btn-primary:hover {
    opacity: 0.88;
}
.wm-btn-outline {
    background: transparent;
    color: var(--c-on-nav);
    border: 1px solid var(--c-muted);
    padding: 10px 22px;
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: border-color 0.2s;
}
.wm-hero-stats {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-hero-border);
}
.wm-stat-n {
    font-family: var(--f-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--c-on-nav);
}
.wm-stat-l {
    font-size: 11px;
    color: var(--c-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.wm-section {
    padding: 2.5rem 2rem;
}
.wm-section-label {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 0.4rem;
}
.wm-section-h2 {
    font-family: var(--f-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--c-primary);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* ============================================================
   PILLARS
   ============================================================ */
.wm-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--c-surface-mid);
    border: 1px solid var(--c-surface-mid);
    border-radius: var(--r-md);
    overflow: hidden;
}
.wm-pillar {
    background: var(--c-bg);
    padding: 1.25rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
}
.wm-pillar:hover {
    background: var(--c-surface);
}
.wm-pillar-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.pi-corp {
    background: var(--c-tag-corp-bg);
}
.pi-soc {
    background: var(--c-tag-soc-bg);
}
.pi-write {
    background: var(--c-tag-write-bg);
}
.pi-heal {
    background: var(--c-tag-heal-bg);
}
.wm-pillar-title {
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-primary);
    margin-bottom: 0.4rem;
}
.wm-pillar-desc {
    font-size: 11px;
    color: var(--c-text-muted);
    line-height: 1.5;
}
.wm-pillar-tag {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-accent);
    font-weight: 500;
}

/* ============================================================
   RESOURCES
   ============================================================ */
.wm-resources-bg {
    background: var(--c-surface);
    padding: 2.5rem 2rem;
    transition: background 0.3s;
}
.wm-tabs {
    display: flex;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--c-surface-mid);
}
.wm-tab {
    padding: 8px 20px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: var(--f-body);
    color: var(--c-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s;
}
.wm-tab.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    font-weight: 500;
}
.wm-res-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.wm-res-card {
    background: var(--c-bg);
    border: 1px solid var(--c-surface-mid);
    border-radius: var(--r-md);
    padding: 1rem;
}
.wm-res-type {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    margin-bottom: 0.6rem;
    font-weight: 500;
}
.rt-free {
    background: var(--c-tag-corp-bg);
    color: var(--c-tag-corp-txt);
}
.rt-paid {
    background: var(--c-tag-soc-bg);
    color: var(--c-tag-soc-txt);
}
.rt-guide {
    background: var(--c-tag-write-bg);
    color: var(--c-tag-write-txt);
}
.wm-res-title {
    font-family: var(--f-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 0.3rem;
    line-height: 1.3;
}
.wm-res-meta {
    font-size: 11px;
    color: var(--c-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
}
.wm-dl-btn {
    font-size: 11px;
    color: var(--c-accent);
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--f-body);
    padding: 0;
    letter-spacing: 0.04em;
}

/* ============================================================
   QUIZ
   ============================================================ */
.wm-quiz-bg {
    background: var(--c-nav);
    padding: 2.5rem 2rem;
    display: flex;
    gap: 2rem;
    align-items: center;
    transition: background 0.3s;
}
.wm-quiz-left {
    flex: 1;
}
.wm-quiz-label {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-accent-light);
    margin-bottom: 0.5rem;
}
.wm-quiz-h {
    font-family: var(--f-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--c-on-nav);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}
.wm-quiz-desc {
    font-size: 12px;
    color: var(--c-muted-light);
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    max-width: 320px;
}
.wm-quiz-card {
    background: var(--c-hero-overlay);
    border: 1px solid var(--c-hero-border);
    border-radius: var(--r-md);
    padding: 1.25rem;
    flex: 1;
    max-width: 280px;
}
.wm-quiz-q {
    font-family: var(--f-display);
    font-size: 15px;
    color: var(--c-on-nav);
    margin-bottom: 1rem;
    font-style: italic;
    line-height: 1.4;
}
.wm-quiz-opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wm-quiz-opt {
    background: var(--c-hero-overlay);
    border: 1px solid var(--c-hero-border);
    border-radius: var(--r-sm);
    padding: 7px 12px;
    font-size: 11px;
    color: var(--c-muted-light);
    cursor: pointer;
    text-align: left;
    font-family: var(--f-body);
    transition: all 0.2s;
}
.wm-quiz-opt:hover {
    background: var(--c-hero-opt-hover);
    border-color: var(--c-accent-light);
}

/* ============================================================
   COURSES
   ============================================================ */
.wm-courses {
    padding: 2.5rem 2rem;
}
.wm-courses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.wm-course-card {
    border: 1px solid var(--c-surface-mid);
    border-radius: var(--r-md);
    overflow: hidden;
}
.wm-course-header {
    padding: 0.75rem 1rem;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ch-corp {
    background: var(--c-tag-corp-bg);
    color: var(--c-tag-corp-txt);
}
.ch-write {
    background: var(--c-tag-write-bg);
    color: var(--c-tag-write-txt);
}
.ch-heal {
    background: var(--c-tag-heal-bg);
    color: var(--c-tag-heal-txt);
}
.ch-soc {
    background: var(--c-tag-soc-bg);
    color: var(--c-tag-soc-txt);
}
.wm-course-body {
    padding: 1rem;
    background: var(--c-bg);
}
.wm-course-title {
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 0.35rem;
}
.wm-course-date {
    font-size: 11px;
    color: var(--c-accent);
    margin-bottom: 0.4rem;
    font-weight: 500;
}
.wm-course-desc {
    font-size: 11px;
    color: var(--c-text-muted);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.wm-course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}
.wm-badge-new {
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-size: 9px;
    padding: 2px 7px;
    border-radius: var(--r-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.wm-badge-soon {
    background: var(--c-muted-light);
    color: var(--c-primary);
    font-size: 9px;
    padding: 2px 7px;
    border-radius: var(--r-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.wm-nl {
    background: var(--c-surface);
    padding: 2rem;
    text-align: center;
    border-top: 3px solid var(--c-primary);
    transition: background 0.3s;
}
.wm-nl-h {
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--c-primary);
    margin-bottom: 0.4rem;
}
.wm-nl-sub {
    font-size: 12px;
    color: var(--c-text-muted);
    margin-bottom: 1rem;
    font-weight: 300;
}
.wm-nl-form {
    display: flex;
    gap: 8px;
    max-width: 400px;
    margin: 0 auto;
}
.wm-nl-input {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid var(--c-surface-mid);
    border-radius: var(--r-sm);
    font-family: var(--f-body);
    font-size: 12px;
    background: var(--c-bg);
    color: var(--c-text);
}

/* ============================================================
   FOOTER
   ============================================================ */
.wm-footer {
    background: var(--c-text);
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wm-footer-logo {
    font-family: var(--f-display);
    font-size: 16px;
    color: var(--c-surface);
    font-weight: 600;
}
.wm-footer-logo span {
    color: var(--c-accent-light);
}
.wm-footer-links {
    display: flex;
    gap: 16px;
    list-style: none;
}
.wm-footer-links a {
    font-size: 11px;
    color: var(--c-text-muted);
    text-decoration: none;
    letter-spacing: 0.06em;
}
.wm-footer-copy {
    font-size: 10px;
    color: var(--c-text-muted);
}

/* ============================================================
   ARCHETYPE FUNNEL / REACT APP
   ============================================================ */
.wm-page,
.wm-flow {
    width: min(100% - 40px, 1080px);
    margin: 0 auto;
}

.wm-page {
    padding: 56px 0 96px;
}

.wm-flow {
    min-height: 100vh;
    padding: 28px 0 80px;
}

.wm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 56px;
}

.wm-wordmark,
.wm-eyebrow,
.wm-question-meta,
.wm-process-item span {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.wm-wordmark {
    display: inline-block;
    color: var(--c-primary);
}

.wm-flow-main {
    max-width: 900px;
    margin: 0 auto;
}

.wm-page h1,
.wm-flow-main > h1 {
    font-family: var(--f-display);
    max-width: 12ch;
    margin: 20px 0 48px;
    color: var(--c-primary);
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: 0;
}

.wm-page h2,
.wm-flow-main h2 {
    font-family: var(--f-display);
    margin: 0;
    color: var(--c-primary);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.wm-flow-main h3,
.wm-page h3 {
    margin: 0;
    color: var(--c-primary);
    font-size: 1.2rem;
    line-height: 1.2;
}

.wm-hero-minimal {
    min-height: 72vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 0 72px;
}

.wm-hero-minimal .lede {
    max-width: 680px;
    margin: 28px 0 0;
    color: var(--c-text-muted);
    font-size: 1.18rem;
}

.wm-hero-cta {
    margin-top: 34px;
}

.wm-quiet-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border-top: 1px solid var(--c-surface-mid);
    border-bottom: 1px solid var(--c-surface-mid);
    background: var(--c-surface-mid);
}

.wm-process-item {
    min-height: 210px;
    padding: 28px;
    background: var(--c-bg);
}

.wm-process-item h2 {
    margin-top: 28px;
    font-size: 1.8rem;
}

.wm-process-item p,
.wm-muted {
    color: var(--c-text-muted);
}

.wm-btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px;
    border: 1px solid var(--c-primary);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition:
        transform 150ms ease,
        background 150ms ease,
        color 150ms ease,
        opacity 150ms ease;
}

.wm-btn:hover {
    transform: translateY(-1px);
}

.wm-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.wm-btn.wm-btn-primary {
    background: var(--c-primary);
    color: var(--c-on-primary);
}

.wm-btn.wm-btn-secondary {
    background: transparent;
    color: var(--c-primary);
}

.wm-question-stage {
    display: grid;
    gap: 28px;
}

.wm-no-select {
    user-select: none;
}

.wm-progress-track {
    width: 100%;
    height: 3px;
    overflow: hidden;
    background: var(--c-surface-mid);
}

.wm-progress-track span {
    display: block;
    height: 100%;
    background: var(--c-accent);
    transition: width 180ms ease;
}

.wm-question-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.wm-question-screen {
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 30px 0;
}

.wm-question-screen h2 {
    max-width: 880px;
}

.wm-question-helper {
    margin: 0;
    color: var(--c-text-muted);
}

.wm-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.wm-option-btn {
    min-height: 58px;
    padding: 14px 16px;
    border: 1px solid var(--c-surface-mid);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--c-text);
    cursor: pointer;
    text-align: left;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}

.wm-option-btn:hover {
    background: var(--c-surface);
    transform: translateY(-1px);
}

.wm-option-btn.selected {
    border-color: var(--c-primary);
    background: var(--c-primary);
    color: var(--c-on-primary);
}

.wm-question-screen textarea {
    width: 100%;
    min-height: 170px;
    padding: 18px 0;
    border: 0;
    border-top: 1px solid var(--c-surface-mid);
    border-bottom: 1px solid var(--c-surface-mid);
    outline: none;
    background: transparent;
    color: var(--c-text);
    resize: vertical;
    user-select: text;
}

.wm-question-screen textarea:focus {
    border-color: var(--c-primary);
}

.wm-stepper-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.wm-center,
.wm-checkout,
.wm-paywall,
.wm-panel,
.wm-comparison-grid,
.wm-report-section {
    border-top: 1px solid var(--c-surface-mid);
    padding-top: 30px;
}

.wm-center {
    min-height: 52vh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 22px;
    text-align: center;
}

.wm-spinner {
    width: 34px;
    height: 34px;
    border: 2px solid var(--c-surface-mid);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: wm-spin 900ms linear infinite;
}

.wm-teaser-layout,
.wm-report-view {
    display: grid;
    gap: 42px;
}

.wm-panel h2,
.wm-checkout h2 {
    margin-top: 16px;
}

.wm-panel p,
.wm-checkout p,
.wm-paywall p {
    max-width: 720px;
    color: var(--c-text-muted);
    font-size: 1.06rem;
}

.wm-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px;
}

.wm-comparison-grid h3 {
    margin-bottom: 18px;
}

.wm-comparison-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    margin: 0;
    color: var(--c-text-muted);
    border-bottom: 1px solid var(--c-surface-mid);
}

.wm-comparison-row.active,
.wm-pro-column {
    color: var(--c-text);
}

.wm-paywall {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
}

.wm-checkout {
    display: grid;
    gap: 24px;
}

.wm-terms {
    display: grid;
    grid-template-columns: 22px minmax(0, 680px);
    gap: 12px;
    align-items: start;
    color: var(--c-text-muted);
}

.wm-terms input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--c-accent);
}

.wm-error {
    color: var(--c-accent);
}

.wm-report-view {
    position: relative;
    padding-bottom: 80px;
}

.wm-pdf-fab {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 18px;
    border-radius: var(--r-sm);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-weight: 500;
    box-shadow: 0 16px 40px rgba(17, 17, 17, 0.18);
}

.wm-report-section h3 {
    margin-bottom: 16px;
}

.wm-report-section ul {
    display: grid;
    gap: 14px;
    margin: 0;
    padding-left: 20px;
    color: var(--c-text-muted);
}

@keyframes wm-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 820px) {
    .wm-page,
    .wm-flow {
        width: min(100% - 28px, 1080px);
    }

    /* --- Theme bar: prevent horizontal overflow --- */
    .theme-bar {
        flex-wrap: wrap;
        padding: 6px 1rem;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Nav: stack logo, links, lang switcher vertically --- */
    .wm-nav {
        flex-wrap: wrap;
        height: auto;
        padding: 0.75rem 1rem;
        gap: 8px;
    }

    .wm-nav-toggle {
        display: block;
    }

    .wm-nav-links {
        display: none;
    }

    .wm-nav-links.active {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 12px;
        padding-top: 8px;
    }

    .lang-switcher {
        margin-left: auto;
    }

    /* --- Hero --- */
    .wm-hero {
        grid-template-columns: 1fr;
        padding: 2rem 1rem;
    }

    .wm-hero::before {
        font-size: 100px;
        right: 1rem;
    }

    .wm-hero-right {
        display: none;
    }

    .wm-hero-h1 {
        font-size: 32px;
    }

    .wm-hero-sub {
        font-size: 12px;
    }

    .wm-hero-btns {
        flex-direction: column;
        gap: 10px;
    }

    .wm-hero-btns .wm-btn-primary,
    .wm-hero-btns .wm-btn-outline {
        width: 100%;
        text-align: center;
    }

    .wm-hero-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        text-align: center;
    }

    .wm-hero-minimal {
        min-height: 68vh;
        padding: 24px 0 48px;
    }

    .wm-hero-minimal .lede {
        font-size: 1rem;
    }

    /* --- Sections --- */
    .wm-section {
        padding: 1.5rem 1rem;
    }

    .wm-section-h2 {
        font-size: 22px;
    }

    /* --- Pillars: stack to 2-col then 1-col --- */
    .wm-pillars {
        grid-template-columns: repeat(2, 1fr);
    }

    .wm-pillar {
        padding: 1rem;
    }

    .wm-pillar-title {
        font-size: 13px;
    }

    .wm-pillar-desc {
        font-size: 10px;
    }

    /* --- Resources --- */
    .wm-resources-bg {
        padding: 1.5rem 1rem;
    }

    .wm-res-grid {
        grid-template-columns: 1fr;
    }

    .wm-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wm-tab {
        padding: 8px 14px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* --- Quiz section --- */
    .wm-quiz-bg {
        flex-direction: column;
        padding: 1.5rem 1rem;
        gap: 1.5rem;
    }

    .wm-quiz-card {
        max-width: 100%;
    }

    .wm-quiz-h {
        font-size: 22px;
    }

    .wm-quiz-desc {
        max-width: 100%;
    }

    /* --- Courses --- */
    .wm-courses {
        padding: 1.5rem 1rem;
    }

    .wm-courses-grid {
        grid-template-columns: 1fr;
    }

    /* --- Newsletter --- */
    .wm-nl {
        padding: 1.5rem 1rem;
    }

    .wm-nl-form {
        flex-direction: column;
    }

    .wm-nl-input {
        width: 100%;
    }

    /* --- Footer --- */
    .wm-footer {
        flex-direction: column;
        gap: 1rem;
        padding: 1.25rem 1rem;
        text-align: center;
    }

    .wm-footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    /* --- React App / Funnel --- */
    .wm-quiet-grid,
    .wm-comparison-grid,
    .wm-paywall {
        grid-template-columns: 1fr;
    }

    .wm-process-item {
        min-height: 160px;
        padding: 20px;
    }

    .wm-process-item h2 {
        font-size: 1.4rem;
    }

    .wm-flow-main > h1 {
        margin-bottom: 34px;
        font-size: clamp(2rem, 8vw, 4rem);
    }

    .wm-question-screen {
        min-height: 390px;
    }

    .wm-option-grid {
        grid-template-columns: 1fr;
    }

    .wm-stepper-actions {
        align-items: stretch;
    }

    .wm-stepper-actions .wm-btn {
        flex: 1;
    }

    .wm-terms {
        grid-template-columns: 22px 1fr;
    }

    .wm-pdf-fab {
        right: 14px;
        bottom: 14px;
    }
}

/* Extra-small screens: collapse pillars to single column */
@media (max-width: 480px) {
    .wm-pillars {
        grid-template-columns: 1fr;
    }

    .wm-hero-h1 {
        font-size: 28px;
    }

    .wm-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}