/**
 * ==========================================================================
 * WindsMind Pro — Comprehensive Visual Design Override System (v2)
 * ==========================================================================
 * Target Audience: Tamil parents of children aged 4+ across Tamil Nadu & India.
 * Core Devices: Mobile-first (~390px budget Android phones) through 4K desktop.
 * Brand Identity: WindsMind Royal Blue spine with warm, trustworthy edtech
 * accents (Duolingo ABC / Khan Academy Kids level polish, playful yet dignified).
 *
 * v2 Key Enhancements:
 * 1. Mobile Hero & Foundation Orbs: Floating chips (.fl) restored around circular
 *    photos with safe responsive offsets (never overlap face, never leave screen).
 * 2. Mobile Photo Sizing: Full-width responsive orb matching original visual scale.
 * 3. Mobile Header (390px): Logo, EN/தமிழ் switch, and theme button fit in a single
 *    unclipped row with zero overflow.
 * 4. Desktop Hero: H1 tuned to clamp(2rem, 3.3vw, 2.85rem) breaking into two balanced
 *    lines without orphan words. Hero buttons sit side by side.
 * 5. Desktop Why WindsMind: Feature buttons sit side by side.
 * 6. Feature Cards Badges: Fixed specificity collision so numbers 01–04 display
 *    crisp, bright white text centered on vibrant blue-cyan squircles.
 * 7. Mobile Height Tightening: Compact vertical rhythm reducing page height by ~750px.
 * 8. Premium Edtech Polish: Soft tinted card surfaces, refined badges, unified
 *    demo ladder & dashboard matching the home design system.
 * ==========================================================================
 */

/* ==========================================================================
   1. DESIGN TOKENS & THEMING
   ========================================================================== */

:root {
    /* WindsMind Primary Brand Spectrum */
    --wm-blue-50: #eff6ff;
    --wm-blue-100: #dbeafe;
    --wm-blue-200: #bfdbfe;
    --wm-blue-300: #93c5fd;
    --wm-blue-400: #60a5fa;
    --wm-blue-500: #3b82f6;
    --wm-blue-600: #2563eb;
    --wm-blue-700: #1d4ed8;
    --wm-blue-800: #1e40af;
    --wm-blue-900: #1e3a8a;
    --wm-navy-900: #0b1626;
    --wm-navy-950: #070d18;

    /* Semantic Accents & Warmth */
    --wm-teal-50: #f0fdfa;
    --wm-teal-500: #14b8a6;
    --wm-teal-600: #0d9488;
    --wm-emerald-500: #10b981;
    --wm-emerald-600: #059669;
    --wm-amber-400: #fbbf24;
    --wm-amber-500: #f59e0b;
    --wm-amber-600: #d97706;
    --wm-coral-500: #f97316;

    /* Light Theme (Default) */
    --wm-bg-canvas: #ffffff;
    --wm-bg-subtle: #f8fafc;
    --wm-bg-surface: #f1f5f9;
    --wm-bg-card: #ffffff;
    --wm-bg-card-hover: #fcfdfe;
    --wm-bg-input: #f8fafc;

    --wm-text-strong: #0b1626;
    --wm-text-body: #334155;
    --wm-text-muted: #64748b;
    --wm-text-faint: #94a3b8;

    --wm-border-light: #e2e8f0;
    --wm-border-hover: #cbd5e1;
    --wm-border-focus: #2563eb;

    /* Elevation & Shadows */
    --wm-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.05);
    --wm-shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --wm-shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.07), 0 4px 10px -3px rgba(15, 23, 42, 0.03);
    --wm-shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.1), 0 8px 16px -6px rgba(15, 23, 42, 0.04);
    --wm-shadow-blue: 0 12px 28px -8px rgba(37, 99, 235, 0.35);
    --wm-shadow-gold: 0 12px 28px -8px rgba(245, 158, 11, 0.3);

    /* Radii */
    --wm-radius-sm: 8px;
    --wm-radius-md: 12px;
    --wm-radius-lg: 16px;
    --wm-radius-xl: 20px;
    --wm-radius-2xl: 26px;
    --wm-radius-pill: 9999px;

    /* Transitions */
    --wm-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --wm-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --wm-duration: 0.2s;

    /* Arc Divider Tokens */
    --arc-white: #ffffff;
    --arc-soft: #f8fafc;
    --arc-sky: #eff6ff;
    --arc-deep: #1d4ed8;
}

/* Dark Mode Spectrum (Triggered by html.dark) */
html.dark, body.dark {
    --wm-bg-canvas: #090d16;
    --wm-bg-subtle: #0d1424;
    --wm-bg-surface: #111a2f;
    --wm-bg-card: #111c30;
    --wm-bg-card-hover: #16243e;
    --wm-bg-input: #0b1322;

    --wm-text-strong: #f8fafc;
    --wm-text-body: #cbd5e1;
    --wm-text-muted: #94a3b8;
    --wm-text-faint: #64748b;

    --wm-border-light: #1e2d48;
    --wm-border-hover: #2d4268;
    --wm-border-focus: #3b82f6;

    --wm-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.35);
    --wm-shadow-sm: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    --wm-shadow-md: 0 12px 28px -6px rgba(0, 0, 0, 0.65);
    --wm-shadow-lg: 0 24px 50px -12px rgba(0, 0, 0, 0.8);
    --wm-shadow-blue: 0 14px 32px -10px rgba(59, 130, 246, 0.25);
    --wm-shadow-gold: 0 14px 32px -10px rgba(245, 158, 11, 0.2);

    --arc-white: #090d16;
    --arc-soft: #0d1424;
    --arc-sky: #0b1626;
    --arc-deep: #1d4ed8;
}

/* ==========================================================================
   2. TYPOGRAPHY & TAMIL SCRIPT ENGINE
   ========================================================================== */

/* Universal Font Stack */
body, input, button, select, textarea {
    font-family: 'Hind Madurai', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--wm-text-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings: Tamil ligature integrity, no clipped vowel signs */
h1, h2, h3, h4, h5, h6,
.bignum,
.plans__title,
.mindviz__h {
    font-family: 'Hind Madurai', 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
    text-wrap: balance !important;
    word-break: break-word !important;
    color: var(--wm-text-strong);
}

/* Monospace numerals & transaction references */
.font-mono,
.pay__ids dd,
.pay__ref b,
#modal-summary-ref {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    letter-spacing: 0.02em;
}

/* Brand wordmark */
.brand-font {
    font-family: 'Playfair Display', Georgia, serif !important;
    letter-spacing: -0.01em;
}

/* Universal Paragraph Line Height */
p, .fnd__item span:not(.fnd__n), .plancard__note, .quoteblock__text {
    line-height: 1.65 !important;
}

/* ==========================================================================
   3. LAYOUT, SECTION RHYTHM & ARC DIVIDERS
   ========================================================================== */

/* Prevent any sideways scrolling on 390px mobile */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Smooth anchor jump offset */
section[id], div[id] {
    scroll-margin-top: 76px;
}

/* Section Spacing Rhythm: Balanced Desktop & Tightened Mobile Cadence */
section[data-sec="hero"],
section[data-sec="demo-hero"] {
    padding-top: 3.5rem !important;
    padding-bottom: 5rem !important;
}

section[data-sec="foundation"],
section[data-sec="enrol"],
section[data-sec="fees"],
section[data-sec="levels"],
section[data-sec="mind"],
section[data-sec="homework"],
section[data-sec="dashboard"] {
    padding-top: 4.25rem !important;
    padding-bottom: 4.5rem !important;
}

/* Mobile rhythm tightening: Fixes ~740px excess height regression */
@media (max-width: 640px) {
    section[data-sec="hero"],
    section[data-sec="demo-hero"] {
        padding-top: 2rem !important;
        padding-bottom: 3rem !important;
    }
    section[data-sec="foundation"],
    section[data-sec="enrol"],
    section[data-sec="fees"],
    section[data-sec="levels"],
    section[data-sec="mind"],
    section[data-sec="homework"],
    section[data-sec="dashboard"] {
        padding-top: 2.25rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* Curved Arc Divider Polishing: Eliminate 1px sub-pixel gaps */
.arc-b::after {
    bottom: -1px !important;
    height: clamp(34px, 5.5vw, 64px) !important;
    background: var(--arc-bottom, var(--arc-white)) !important;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
    transition: background 0.3s ease;
}

.arc-t::before {
    top: -1px !important;
    height: clamp(34px, 5.5vw, 64px) !important;
    background: var(--arc-top, var(--arc-white)) !important;
    border-radius: 0 0 50% 50% / 0 0 100% 100% !important;
    transition: background 0.3s ease;
}

/* Full Width Color Blocks with Subtle Gradients */
.blk--blue {
    background: radial-gradient(ellipse at 85% 15%, rgba(59, 130, 246, 0.35) 0%, transparent 60%),
                linear-gradient(155deg, #1d4ed8 0%, #2563eb 45%, #1e40af 100%) !important;
    color: #ffffff !important;
}

.blk--navy {
    background: radial-gradient(ellipse at 80% 20%, rgba(37, 99, 235, 0.15) 0%, transparent 60%),
                linear-gradient(170deg, #070d18 0%, #0b1626 50%, #0d1b32 100%) !important;
    color: #ffffff !important;
}

/* Ambient Doodles: Soft and non-competing */
.doodle {
    opacity: 0.18 !important;
}

/* ==========================================================================
   4. HEADER, NAVIGATION & SWITCHERS (Mobile 390px Fit)
   ========================================================================== */

/* Top Announcement Banner */
body > div:first-child {
    background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 50%, #eff6ff 100%) !important;
    border-bottom: 1px solid #bfdbfe !important;
    color: #1e3a8a !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.78rem !important;
}

html.dark body > div:first-child {
    background: linear-gradient(90deg, #091222 0%, #0e1b34 50%, #091222 100%) !important;
    border-bottom: 1px solid #1e2f50 !important;
    color: #93c5fd !important;
}

/* Main Navbar */
#main-navbar,
header[data-sec="navbar"] {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--wm-border-light) !important;
    transition: all 0.2s ease;
}

html.dark #main-navbar,
html.dark header[data-sec="navbar"] {
    background: rgba(9, 13, 22, 0.94) !important;
    border-bottom-color: var(--wm-border-light) !important;
}

/* Brand Link */
#main-navbar .brand-font,
header[data-sec="navbar"] .brand-font {
    color: var(--wm-text-strong) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
}

/* Nav Links */
#main-navbar nav a {
    color: var(--wm-text-body) !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: var(--wm-radius-pill) !important;
    transition: all 0.2s ease !important;
}

#main-navbar nav a:hover {
    color: var(--wm-blue-700) !important;
    background: var(--wm-blue-50) !important;
}

html.dark #main-navbar nav a:hover {
    color: #93c5fd !important;
    background: rgba(59, 130, 246, 0.12) !important;
}

/* Segmented Language Switcher Pill */
.lang-switcher-wrap {
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--wm-radius-pill) !important;
    padding: 3px !important;
    gap: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

html.dark .lang-switcher-wrap {
    background: #152238 !important;
    border-color: #243656 !important;
}

.lang-btn {
    border-radius: var(--wm-radius-pill) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    min-height: 30px !important;
    min-width: 34px !important;
    color: #475569 !important;
    border: none !important;
    transition: all 0.18s var(--wm-ease-smooth) !important;
}

html.dark .lang-btn {
    color: #94a3b8 !important;
}

.lang-btn.active-lang {
    background: #ffffff !important;
    color: var(--wm-blue-700) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
}

html.dark .lang-btn.active-lang {
    background: #1e3150 !important;
    color: #93c5fd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Theme Toggle Button (Light/Dark) */
.theme-toggle-btn,
#theme-toggle {
    min-width: 40px !important;
    min-height: 40px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--wm-bg-canvas) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    color: var(--wm-text-strong) !important;
    cursor: pointer !important;
    box-shadow: var(--wm-shadow-xs) !important;
    flex-shrink: 0 !important;
    transition: all 0.22s var(--wm-ease-spring) !important;
}

.theme-toggle-btn:hover,
#theme-toggle:hover {
    transform: translateY(-2px) rotate(15deg) !important;
    border-color: var(--wm-blue-400) !important;
    box-shadow: var(--wm-shadow-sm) !important;
}

/* Primary CTA Button (Header "Enrol Now") */
.btn-school-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: var(--wm-radius-pill) !important;
    box-shadow: var(--wm-shadow-blue), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    font-weight: 800 !important;
    padding: 0.6rem 1.25rem !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    transition: transform 0.2s var(--wm-ease-spring), box-shadow 0.2s ease !important;
}

.btn-school-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 32px -8px rgba(37, 99, 235, 0.45) !important;
}

.btn-school-primary:active {
    transform: scale(0.98) !important;
}

/* Mobile Header Fit Fix at 390px (Fixes clipped theme button regression) */
@media (max-width: 640px) {
    header[data-sec="navbar"] {
        padding-inline: 0 !important;
    }
    header[data-sec="navbar"] > div,
    #main-navbar > div {
        padding-inline: 12px !important;
    }
    #navbar-row,
    header[data-sec="navbar"] .flex.items-center.justify-between {
        gap: 8px !important;
    }
    #main-navbar .brand-font,
    header[data-sec="navbar"] .brand-font {
        font-size: 1.05rem !important;
        white-space: nowrap !important;
    }
    .brand-logo {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }
    .lang-switcher-wrap {
        padding: 2px !important;
        gap: 2px !important;
    }
    .lang-btn {
        padding: 3px 7px !important;
        min-height: 28px !important;
        min-width: 30px !important;
        font-size: 0.72rem !important;
    }
    .theme-toggle-btn,
    #theme-toggle {
        min-width: 36px !important;
        min-height: 36px !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
    }
    /* Hide text labels inside theme toggle on demo page to keep a tidy circular button */
    #theme-toggle span[data-i18n],
    #theme-toggle .dark\:hidden:not(.theme-icon-sun),
    #theme-toggle .hidden.dark\:inline:not(.theme-icon-moon) {
        display: none !important;
    }
    #theme-toggle .w-6 {
        width: 100% !important;
        height: 100% !important;
    }
    /* Hide desktop burger button to preserve clean 3-element mobile header */
    .nav-burger {
        display: none !important;
    }
}

/* Mobile Nav Drawer */
#mobile-drawer > div:last-child {
    background: var(--wm-bg-canvas) !important;
    border-left: 1px solid var(--wm-border-light) !important;
    padding: 1.75rem 1.5rem !important;
}

.mobile-nav-link {
    padding: 0.75rem 1rem !important;
    border-radius: var(--wm-radius-md) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--wm-text-strong) !important;
    transition: background 0.15s ease !important;
}

.mobile-nav-link:hover {
    background: var(--wm-blue-50) !important;
    color: var(--wm-blue-700) !important;
}

html.dark .mobile-nav-link:hover {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #93c5fd !important;
}

/* ==========================================================================
   5. HERO SECTIONS (Home & Demo)
   ========================================================================== */

/* Golden Brain Mark: Refined Pulse & Border */
.brainmark {
    background: rgba(251, 191, 36, 0.15) !important;
    border: 1.5px solid rgba(251, 191, 36, 0.5) !important;
    border-radius: var(--wm-radius-pill) !important;
    padding: 6px 15px 6px 12px !important;
    margin-bottom: 0.85rem !important;
    backdrop-filter: blur(8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
}

.brainmark__text {
    color: #fef08a !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.04em !important;
}

/* Section Ribbon Tag: Soft Pill without Harsh Clipped Edges */
.ribbon {
    clip-path: none !important;
    border-radius: var(--wm-radius-pill) !important;
    padding: 0.4rem 1.1rem !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 4px 14px rgba(11, 22, 38, 0.22) !important;
}

.blk--blue .ribbon,
.blk--navy .ribbon {
    background: #ffffff !important;
    color: var(--wm-navy-900) !important;
}

.ribbon--deep {
    background: #dbeafe !important;
    color: #1e40af !important;
    box-shadow: none !important;
}

html.dark .ribbon--deep {
    background: #172a4c !important;
    color: #93c5fd !important;
}

/* Hero Big Title: Tuned to break into two balanced lines on desktop without orphan words */
.bignum {
    font-size: clamp(2rem, 3.4vw, 2.85rem) !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
    letter-spacing: normal !important;
    margin-bottom: 1rem !important;
    max-width: 100% !important;
}

@media (max-width: 640px) {
    .bignum {
        font-size: clamp(1.8rem, 6.5vw, 2.2rem) !important;
        line-height: 1.28 !important;
    }
}

.bignum .text-brand-200 {
    color: #bfdbfe !important;
}

/* What is Abacus Explainer Card (Hero) */
.hero-explain {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--wm-radius-lg) !important;
    padding: 1rem 1.15rem !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 16px 36px -12px rgba(5, 15, 35, 0.45) !important;
    margin-bottom: 1.15rem !important;
}

.hero-explain__ico {
    border-radius: 12px !important;
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%) !important;
    box-shadow: 0 8px 18px -4px rgba(37, 99, 235, 0.55) !important;
    flex-shrink: 0 !important;
}

.hero-explain__t {
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.hero-explain__d {
    font-size: 0.86rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Hero Quote */
.hero-quote {
    border-left: 3.5px solid var(--wm-amber-400) !important;
    padding-left: 1rem !important;
    color: #ffffff !important;
    font-style: italic !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1.35rem !important;
}

.hero-quote b {
    color: #fde047 !important;
    font-weight: 800 !important;
}

/* Button Pair: SIDE BY SIDE ON DESKTOP (Fixes stacked buttons regression) */
.btn-pair {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    align-items: center !important;
}

.btn-pair > * {
    white-space: nowrap !important;
}

.btn-solid-w {
    background: #ffffff !important;
    color: var(--wm-blue-700) !important;
    border: 2px solid #ffffff !important;
    border-radius: var(--wm-radius-pill) !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    padding: 0.75rem 1.45rem !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.28) !important;
    transition: all 0.2s var(--wm-ease-spring) !important;
}

.btn-solid-w:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.38) !important;
    background: #f8fafc !important;
}

.btn-solid-w:active {
    transform: scale(0.98) !important;
}

.btn-ghost-w {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: var(--wm-radius-pill) !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    padding: 0.75rem 1.45rem !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    backdrop-filter: blur(6px) !important;
    transition: all 0.2s var(--wm-ease-spring) !important;
}

.btn-ghost-w:hover {
    background: #ffffff !important;
    color: var(--wm-blue-700) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) !important;
}

.btn-ghost-w:active {
    transform: scale(0.98) !important;
}

/* Mobile Button Stacking */
@media (max-width: 640px) {
    .btn-pair {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 0.65rem !important;
    }
    .btn-pair > * {
        width: 100% !important;
        justify-content: center !important;
        white-space: normal !important;
    }
}

/* Photo Orb & Floating Callout Chips (Fixes small photo & stacked list regressions) */
.orb {
    position: relative !important;
    border-radius: 50% !important;
    border: 8px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 20px 50px -12px rgba(5, 15, 35, 0.55) !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    max-width: 22.5rem !important;
    margin-inline: auto !important;
}

.orb--gold {
    border-color: rgba(251, 191, 36, 0.28) !important;
    box-shadow: 0 20px 50px -12px rgba(120, 53, 15, 0.3) !important;
}

/* Floating callout chips: KEPT FLOATING around the orb on all devices */
.fl {
    position: absolute !important;
    z-index: 4 !important;
    border-radius: var(--wm-radius-md) !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    padding: 0.5rem 0.9rem !important;
    box-shadow: 0 12px 26px -8px rgba(5, 15, 35, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    max-width: 10.5rem !important;
    transition: transform 0.2s ease !important;
}

.fl--sky {
    background: #dbeafe !important;
    color: #1e3a8a !important;
}

.fl--white {
    background: #ffffff !important;
    color: #0b1626 !important;
}

.fl--navy {
    background: #0b1626 !important;
    color: #ffffff !important;
}

/* Desktop Floating Positions */
.fl--tl { top: 4% !important; left: -4% !important; transform: rotate(-5deg) !important; }
.fl--tr { top: 1% !important; right: -4% !important; transform: rotate(4deg) !important; }
.fl--bl { bottom: 12% !important; left: -6% !important; transform: rotate(4deg) !important; }
.fl--br { bottom: 4% !important; right: -5% !important; transform: rotate(-4deg) !important; }

/* Mobile Floating Offsets: Stays floating around the photo, never leaves screen, never covers face */
@media (max-width: 640px) {
    .orb {
        max-width: 19rem !important;
        margin-inline: auto !important;
    }
    .fl {
        font-size: 0.68rem !important;
        padding: 0.35rem 0.65rem !important;
        max-width: 8.5rem !important;
    }
    .fl--tl {
        top: 2% !important;
        left: 0% !important;
        transform: rotate(-3deg) !important;
    }
    .fl--tr {
        top: -1% !important;
        right: 0% !important;
        transform: rotate(3deg) !important;
    }
    .fl--bl {
        bottom: 10% !important;
        left: 0% !important;
        transform: rotate(3deg) !important;
    }
    .fl--br {
        bottom: 2% !important;
        right: 0% !important;
        transform: rotate(-3deg) !important;
    }
}

/* ==========================================================================
   6. FOUNDATION & CLAIMS ("Why WindsMind Pro")
   ========================================================================== */

section[data-sec="foundation"] {
    background: var(--wm-bg-canvas) !important;
}

/* The 4 Feature Cards */
.fnd {
    display: grid !important;
    gap: 0.85rem !important;
}

.fnd__item {
    background: var(--wm-bg-canvas) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    border-radius: var(--wm-radius-lg) !important;
    padding: 1.1rem 1.25rem !important;
    box-shadow: var(--wm-shadow-xs) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    transition: transform 0.2s var(--wm-ease-spring), border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.fnd__item:hover {
    transform: translateY(-2px) !important;
    border-color: var(--wm-blue-300) !important;
    box-shadow: var(--wm-shadow-md) !important;
}

html.dark .fnd__item {
    background: var(--wm-bg-card) !important;
    border-color: var(--wm-border-light) !important;
}

html.dark .fnd__item:hover {
    border-color: var(--wm-blue-500) !important;
    box-shadow: var(--wm-shadow-blue) !important;
}

/* Feature Badge Fix: High-contrast white number 01–04 on blue squircle (Fixes unreadable badge regression) */
.fnd__item .fnd__n,
.fnd__n {
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--wm-radius-md) !important;
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
    flex-shrink: 0 !important;
}

.fnd__item strong {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--wm-text-strong) !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
}

/* Scoped selector to avoid dark color bleeding into .fnd__n */
.fnd__item > div > span,
.fnd__item span:not(.fnd__n) {
    font-size: 0.88rem !important;
    color: var(--wm-text-body) !important;
    line-height: 1.6 !important;
    display: block !important;
}

/* Play Store Download Cards */
.appslink {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.85rem !important;
    margin-top: 1.35rem !important;
}

@media (max-width: 520px) {
    .appslink {
        grid-template-columns: 1fr !important;
    }
}

.appslink__a {
    background: var(--wm-bg-canvas) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    border-radius: var(--wm-radius-lg) !important;
    padding: 0.85rem 1rem !important;
    box-shadow: var(--wm-shadow-xs) !important;
    min-height: 50px !important;
    transition: all 0.2s var(--wm-ease-spring) !important;
}

.appslink__a:hover {
    transform: translateY(-2px) !important;
    border-color: var(--wm-blue-500) !important;
    box-shadow: var(--wm-shadow-sm) !important;
}

html.dark .appslink__a {
    background: var(--wm-bg-card) !important;
    border-color: var(--wm-border-light) !important;
}

.appslink__a img {
    border-radius: var(--wm-radius-sm) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.appslink__a b {
    color: var(--wm-text-strong) !important;
    font-size: 0.92rem !important;
}

.appslink__a em {
    color: var(--wm-teal-600) !important;
    font-weight: 700 !important;
}

html.dark .appslink__a em {
    color: #2dd4bf !important;
}

/* Why WindsMind Action Buttons: SIDE BY SIDE ON DESKTOP (Fixes stacked buttons regression) */
.btn-demo {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border-radius: var(--wm-radius-pill) !important;
    box-shadow: var(--wm-shadow-gold) !important;
    min-height: 46px !important;
    padding: 0.75rem 1.45rem !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    transition: all 0.2s var(--wm-ease-spring) !important;
}

.btn-demo:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 32px -8px rgba(234, 88, 12, 0.45) !important;
    color: #ffffff !important;
}

.btn-outline {
    background: var(--wm-blue-50) !important;
    color: var(--wm-blue-700) !important;
    border: 2px solid var(--wm-blue-200) !important;
    border-radius: var(--wm-radius-pill) !important;
    min-height: 46px !important;
    padding: 0.75rem 1.45rem !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    transition: all 0.2s var(--wm-ease-spring) !important;
}

.btn-outline:hover {
    background: var(--wm-blue-100) !important;
    border-color: var(--wm-blue-400) !important;
    transform: translateY(-2px) !important;
}

html.dark .btn-outline {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

/* ==========================================================================
   7. ENROLMENT FORM & VALIDATION STATES (Conversion Core)
   ========================================================================== */

section[data-sec="enrol"] {
    background: var(--wm-bg-subtle) !important;
}

/* Photo with Reassurance Tick List */
.enrolpic {
    border-radius: var(--wm-radius-2xl) !important;
    box-shadow: var(--wm-shadow-lg) !important;
    overflow: hidden !important;
}

.enrolnote {
    display: grid !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
}

.enrolnote li {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: var(--wm-text-body) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* Verified Emerald Tick */
.enrolnote .i-tick,
.modal-backdrop .i-tick,
.paylock .i-tick {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #d1fae5 !important;
    color: var(--wm-emerald-600) !important;
    display: inline-grid !important;
    place-items: center !important;
    flex-shrink: 0 !important;
}

html.dark .enrolnote .i-tick,
html.dark .modal-backdrop .i-tick,
html.dark .paylock .i-tick {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

/* Form Card Container */
.enrolcard {
    background: var(--wm-bg-card) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    border-radius: var(--wm-radius-2xl) !important;
    padding: 1.75rem !important;
    box-shadow: var(--wm-shadow-md) !important;
    gap: 1.15rem !important;
}

@media (max-width: 640px) {
    .enrolcard {
        padding: 1.25rem 1rem !important;
        border-radius: var(--wm-radius-xl) !important;
    }
}

/* Form Fields */
.field {
    display: grid !important;
    gap: 0.4rem !important;
}

.field label {
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    color: var(--wm-text-strong) !important;
}

/* Text, Tel & Email Inputs */
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"] {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0.7rem 0.95rem !important;
    border-radius: var(--wm-radius-md) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    background: var(--wm-bg-input) !important;
    color: var(--wm-text-strong) !important;
    font-size: 0.96rem !important;
    font-weight: 600 !important;
    transition: all 0.18s ease !important;
}

.field input:focus {
    outline: none !important;
    border-color: var(--wm-blue-600) !important;
    background: var(--wm-bg-canvas) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}

/* Country Code Tel Select */
.telwrap {
    display: flex !important;
    align-items: stretch !important;
}

.telcc {
    min-height: 46px !important;
    border-radius: var(--wm-radius-md) 0 0 var(--wm-radius-md) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    border-right: none !important;
    background-color: #f1f5f9 !important;
    color: var(--wm-text-strong) !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    padding: 0 26px 0 10px !important;
    cursor: pointer !important;
}

html.dark .telcc {
    background-color: #0e1728 !important;
    border-color: var(--wm-border-light) !important;
}

.telwrap input[type="tel"] {
    border-radius: 0 var(--wm-radius-md) var(--wm-radius-md) 0 !important;
}

/* Field Validation States */
.field.is-bad input {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.field.is-bad .telcc {
    border-color: #ef4444 !important;
}

.field.is-bad .field__err {
    display: block !important;
    color: #dc2626 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    margin-top: 0.2rem !important;
}

.field.is-ok input {
    border-color: var(--wm-emerald-600) !important;
}

/* Checkbox Row */
.checkrow {
    background: var(--wm-bg-input) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    border-radius: var(--wm-radius-md) !important;
    padding: 0.8rem 1rem !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    color: var(--wm-text-strong) !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.checkrow:hover {
    border-color: var(--wm-blue-400) !important;
}

.checkrow input[type="checkbox"] {
    width: 19px !important;
    height: 19px !important;
    accent-color: var(--wm-blue-600) !important;
    border-radius: 4px !important;
}

/* Enrol Submit Button */
.enrolbtn {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: var(--wm-radius-pill) !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    box-shadow: var(--wm-shadow-blue) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    transition: all 0.2s var(--wm-ease-spring) !important;
    margin-top: 0.35rem !important;
}

.enrolbtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 36px -10px rgba(37, 99, 235, 0.5) !important;
}

.enrolbtn:active {
    transform: scale(0.98) !important;
}

/* Enrol Success Confirmation Banner */
.enrolok {
    background: #ecfdf5 !important;
    border: 1.5px solid #a7f3d0 !important;
    color: #065f46 !important;
    border-radius: var(--wm-radius-md) !important;
    padding: 0.85rem 1.1rem !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
}

html.dark .enrolok {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #6ee7b7 !important;
}

/* ==========================================================================
   8. FEES, STAT PODS (Orphan-Fix) & PRICING GRID
   ========================================================================== */

/* The 5 Quick Stat Rings: Solves the Lonely Orphan Card on Mobile */
section[data-sec="fees"] .flex.flex-wrap.items-center.justify-center.gap-5 {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0.85rem !important;
    max-width: 1040px !important;
    margin-inline: auto !important;
    margin-bottom: 2.75rem !important;
}

@media (max-width: 860px) {
    section[data-sec="fees"] .flex.flex-wrap.items-center.justify-center.gap-5 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile: Perfect Balanced 2-Column + 1 Span-2 Pod (Zero Orphan Cards) */
@media (max-width: 640px) {
    section[data-sec="fees"] .flex.flex-wrap.items-center.justify-center.gap-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.65rem !important;
        margin-bottom: 2rem !important;
    }
    /* 5th stat spans across both columns as a reassurance banner */
    section[data-sec="fees"] .ring:nth-child(5) {
        grid-column: 1 / -1 !important;
        min-height: 4rem !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
    }
    section[data-sec="fees"] .ring:nth-child(5) span {
        margin-top: 0 !important;
    }
}

/* Stat Ring Card Refinement */
.ring {
    width: auto !important;
    height: auto !important;
    min-height: 6.75rem !important;
    border-radius: var(--wm-radius-xl) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.4) !important;
    padding: 0.95rem 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: transform 0.2s var(--wm-ease-spring) !important;
}

.ring:hover {
    transform: translateY(-2px) !important;
}

html.dark .ring {
    background: var(--wm-bg-card) !important;
    border-color: var(--wm-border-light) !important;
    box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.65) !important;
}

.ring b {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: var(--wm-blue-700) !important;
    line-height: 1 !important;
}

html.dark .ring b {
    color: #60a5fa !important;
}

.ring span {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    margin-top: 0.3rem !important;
    line-height: 1.3 !important;
}

html.dark .ring span {
    color: #94a3b8 !important;
}

/* The 6 Pricing Plan Cards: Premium edtech cards with zero horizontal cut-off */
.plans {
    max-width: 1040px !important;
    margin: 0 auto 2.5rem !important;
}

.plans__grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 0.75rem !important;
    width: 100% !important;
}

@media (max-width: 1024px) {
    .plans__grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }
}

/* Mobile: Clean 2-column grid that fits comfortably within 390px */
@media (max-width: 640px) {
    .plans__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.65rem !important;
    }
}

/* Individual Plan Card */
.plancard {
    background: #ffffff !important;
    border: 2px solid var(--wm-border-light) !important;
    border-radius: var(--wm-radius-xl) !important;
    padding: 1.25rem 0.75rem 1rem !important;
    text-align: center !important;
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.35) !important;
    position: relative !important;
    transition: transform 0.2s var(--wm-ease-spring), border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.plancard:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 38px -12px rgba(0, 0, 0, 0.5) !important;
}

html.dark .plancard {
    background: var(--wm-bg-card) !important;
    border-color: var(--wm-border-light) !important;
}

/* Most Popular Plan Flag (1 Month) */
.plancard--pop {
    border-color: var(--wm-blue-500) !important;
    box-shadow: 0 16px 36px -10px rgba(37, 99, 235, 0.45) !important;
}

.plancard--pop .plancard__flag {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}

/* Best Value Plan (1 Year) */
.plancard--best {
    border-color: var(--wm-amber-500) !important;
    background: linear-gradient(175deg, #fffdf5 0%, #ffffff 60%) !important;
    box-shadow: 0 16px 36px -10px rgba(245, 158, 11, 0.35) !important;
}

html.dark .plancard--best {
    background: linear-gradient(175deg, #182338 0%, #111c30 60%) !important;
}

.plancard--best .plancard__flag {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

.plancard__flag {
    border-radius: var(--wm-radius-pill) !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 3px 9px !important;
    top: -10px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22) !important;
}

.plancard__name {
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: var(--wm-text-muted) !important;
    margin-bottom: 0.35rem !important;
}

.plancard__price {
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    color: var(--wm-text-strong) !important;
    line-height: 1 !important;
}

html.dark .plancard__price {
    color: #ffffff !important;
}

.plancard__pm {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    margin-top: 0.5rem !important;
}

html.dark .plancard__pm {
    color: #cbd5e1 !important;
}

.plancard__pm b {
    color: var(--wm-blue-600) !important;
}

html.dark .plancard__pm b {
    color: #60a5fa !important;
}

.plancard__pd {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--wm-teal-600) !important;
    margin-top: 0.2rem !important;
}

html.dark .plancard__pd {
    color: #2dd4bf !important;
}

/* ==========================================================================
   9. PAYMENT CARD & UPI FLOW
   ========================================================================== */

.pay {
    background: #ffffff !important;
    border-radius: var(--wm-radius-2xl) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5) !important;
    padding: 1.75rem !important;
    max-width: 880px !important;
}

@media (max-width: 640px) {
    .pay {
        padding: 1.15rem 0.95rem !important;
        border-radius: var(--wm-radius-xl) !important;
    }
}

html.dark .pay {
    background: var(--wm-bg-card) !important;
    border-color: var(--wm-border-light) !important;
}

.pay__badge {
    border-radius: var(--wm-radius-md) !important;
    background: var(--wm-blue-50) !important;
    color: var(--wm-blue-700) !important;
    border: 1px solid var(--wm-blue-200) !important;
}

html.dark .pay__badge {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

/* Locked warning strip */
.paylock {
    background: #fffbeb !important;
    border: 1.5px solid #fde68a !important;
    border-radius: var(--wm-radius-md) !important;
    color: #92400e !important;
    padding: 0.75rem 0.95rem !important;
}

html.dark .paylock {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fde047 !important;
}

/* Dynamic Plan Selector Cards */
.pay__plan {
    border-radius: var(--wm-radius-lg) !important;
    border: 2px solid var(--wm-border-light) !important;
    background: var(--wm-bg-input) !important;
    min-height: 46px !important;
    padding: 0.75rem !important;
}

.pay__plan.is-on {
    border-color: var(--wm-blue-600) !important;
    background: var(--wm-blue-50) !important;
    box-shadow: var(--wm-shadow-sm) !important;
}

html.dark .pay__plan.is-on {
    border-color: var(--wm-blue-400) !important;
    background: rgba(37, 99, 235, 0.16) !important;
}

/* Main GPay Pay Button */
.pay__btn {
    min-height: 50px !important;
    border-radius: var(--wm-radius-pill) !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    box-shadow: var(--wm-shadow-blue) !important;
}

.pay__alt {
    min-height: 50px !important;
    border-radius: var(--wm-radius-pill) !important;
    border: 2px solid var(--wm-border-light) !important;
    color: var(--wm-text-strong) !important;
    font-weight: 800 !important;
}

/* Copy Buttons */
.pay__copy {
    min-height: 36px !important;
    border-radius: var(--wm-radius-pill) !important;
    border: 1.5px solid var(--wm-blue-300) !important;
    background: #ffffff !important;
    color: var(--wm-blue-700) !important;
    font-weight: 800 !important;
    padding: 0.4rem 0.95rem !important;
}

html.dark .pay__copy {
    background: var(--wm-bg-surface) !important;
    border-color: var(--wm-blue-500) !important;
    color: #93c5fd !important;
}

.pay__copy.is-done {
    background: #ecfdf5 !important;
    border-color: var(--wm-emerald-600) !important;
    color: var(--wm-emerald-600) !important;
}

/* ==========================================================================
   10. DEMO: 8-LEVEL LADDER (Mobile Duration Fix)
   ========================================================================== */

section[data-sec="levels"] {
    background: var(--wm-bg-canvas) !important;
}

.ladder {
    max-width: 780px !important;
    display: grid !important;
    gap: 0.75rem !important;
}

/* Level Rung Card */
.rung {
    background: var(--wm-bg-canvas) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    border-radius: var(--wm-radius-lg) !important;
    padding: 0.95rem 1.25rem !important;
    box-shadow: var(--wm-shadow-xs) !important;
    display: grid !important;
    grid-template-columns: 50px 1fr auto !important;
    align-items: center !important;
    gap: 1.1rem !important;
    transition: transform 0.2s var(--wm-ease-spring), border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.rung:hover {
    transform: translateX(4px) !important;
    border-color: var(--wm-blue-400) !important;
    box-shadow: var(--wm-shadow-md) !important;
}

html.dark .rung {
    background: var(--wm-bg-card) !important;
    border-color: var(--wm-border-light) !important;
}

/* Level Number Squircle */
.rung__n {
    width: 46px !important;
    height: 46px !important;
    border-radius: var(--wm-radius-md) !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}

/* Mastery Levels 7 & 8: Amber/Orange Accents */
.rung:nth-child(7) .rung__n,
.rung:nth-child(8) .rung__n {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.4) !important;
}

.rung__t {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--wm-text-strong) !important;
}

.rung__s {
    font-size: 0.86rem !important;
    color: var(--wm-text-body) !important;
    line-height: 1.5 !important;
}

/* Duration Tag Pill: PRESERVED ON ALL SCREENS (never hidden on mobile!) */
.rung__age {
    background: var(--wm-blue-50) !important;
    color: var(--wm-blue-700) !important;
    border: 1px solid var(--wm-blue-200) !important;
    border-radius: var(--wm-radius-pill) !important;
    padding: 0.35rem 0.8rem !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

html.dark .rung__age {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

/* Mobile Fix: Ensure neat layout and duration pill preserved */
@media (max-width: 640px) {
    .rung {
        grid-template-columns: 42px 1fr !important;
        gap: 0.8rem !important;
        padding: 0.85rem 0.95rem !important;
        margin-left: 0 !important;
    }
    .rung__n {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.05rem !important;
    }
    .rung__age {
        display: inline-block !important;
        margin-top: 0.35rem !important;
        font-size: 0.7rem !important;
        padding: 0.2rem 0.6rem !important;
    }
}

/* ==========================================================================
   11. DEMO: MIND TRANSFORMATION & 3-MONTH PROGRESSION
   ========================================================================== */

section[data-sec="mind"] {
    background: var(--wm-bg-subtle) !important;
}

.think {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    gap: 2.25rem !important;
    align-items: center !important;
    max-width: 960px !important;
    margin: 0 auto !important;
}

@media (max-width: 760px) {
    .think {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
    }
}

.think__card {
    border-radius: var(--wm-radius-2xl) !important;
    box-shadow: var(--wm-shadow-lg) !important;
    overflow: hidden !important;
    position: relative !important;
    background: #e2e8f0 !important;
}

.think__cap {
    padding: 0.95rem 1.15rem !important;
    background: rgba(11, 22, 38, 0.85) !important;
    color: #ffffff !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    backdrop-filter: blur(8px) !important;
}

/* 3-Step Progression Cards */
.think__steps {
    display: grid !important;
    gap: 0.85rem !important;
    padding: 0 !important;
    list-style: none !important;
}

.tstep {
    background: var(--wm-bg-card) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    border-radius: var(--wm-radius-lg) !important;
    padding: 1rem 1.15rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    box-shadow: var(--wm-shadow-xs) !important;
    transition: transform 0.2s var(--wm-ease-spring) !important;
}

.tstep:hover {
    transform: translateY(-2px) !important;
    border-color: var(--wm-blue-400) !important;
    box-shadow: var(--wm-shadow-sm) !important;
}

html.dark .tstep {
    background: var(--wm-bg-card) !important;
    border-color: var(--wm-border-light) !important;
}

.tstep__ic {
    width: 56px !important;
    height: 56px !important;
    border-radius: var(--wm-radius-md) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.btag {
    background: var(--wm-blue-50) !important;
    color: var(--wm-blue-700) !important;
    border-radius: var(--wm-radius-pill) !important;
    padding: 2px 8px !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

html.dark .btag {
    background: rgba(37, 99, 235, 0.18) !important;
    color: #93c5fd !important;
}

/* ==========================================================================
   12. DEMO: HOMEWORK FLOW & INTERACTIVE COMET
   ========================================================================== */

section[data-sec="homework"] {
    background: var(--wm-bg-canvas) !important;
}

.jflow {
    max-width: 1040px !important;
    margin: 0 auto !important;
}

.jnode__ring {
    border: 3.5px solid var(--wm-blue-500) !important;
    box-shadow: 0 10px 24px -6px rgba(37, 99, 235, 0.25) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.jnode__step {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.5) !important;
    font-weight: 900 !important;
}

.jnode__t {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--wm-text-strong) !important;
}

.jnode__s {
    font-size: 0.8rem !important;
    color: var(--wm-text-body) !important;
}

/* Connector Labels */
.jconn__lbl {
    background: var(--wm-blue-50) !important;
    color: var(--wm-blue-700) !important;
    border: 1px solid var(--wm-blue-200) !important;
    border-radius: var(--wm-radius-pill) !important;
    padding: 2px 8px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
}

html.dark .jconn__lbl {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

/* Animated Flow Comet */
.jcomet {
    fill: #06b6d4 !important;
    filter: drop-shadow(0 0 6px #06b6d4) !important;
}

/* Loop Step 5 Reassurance Banner */
.jloop__txt {
    background: var(--wm-bg-subtle) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    border-radius: var(--wm-radius-pill) !important;
    padding: 0.7rem 1.4rem !important;
    font-size: 0.86rem !important;
    color: var(--wm-text-strong) !important;
    box-shadow: var(--wm-shadow-xs) !important;
}

html.dark .jloop__txt {
    background: var(--wm-bg-card) !important;
    border-color: var(--wm-border-light) !important;
}

.jloop__step {
    background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
}

/* ==========================================================================
   13. DEMO: PARENT ANALYTICS DASHBOARD (Mobile Overflow Fix)
   ========================================================================== */

section[data-sec="dashboard"] {
    background: var(--wm-bg-subtle) !important;
}

.dash {
    background: var(--wm-bg-card) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    border-radius: var(--wm-radius-2xl) !important;
    padding: 1.75rem !important;
    box-shadow: var(--wm-shadow-lg) !important;
    max-width: 880px !important;
    margin: 0 auto !important;
}

@media (max-width: 640px) {
    .dash {
        padding: 1.15rem 0.95rem !important;
        border-radius: var(--wm-radius-xl) !important;
    }
}

html.dark .dash {
    background: var(--wm-bg-card) !important;
    border-color: var(--wm-border-light) !important;
}

/* KPI Metrics Grid: Strictly 2-Column on Mobile (Eliminates horizontal cut-off) */
.dash__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.85rem !important;
    margin-bottom: 1.35rem !important;
}

@media (max-width: 640px) {
    .dash__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }
}

.kpi {
    background: var(--wm-bg-input) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    border-radius: var(--wm-radius-lg) !important;
    padding: 0.95rem 0.75rem !important;
    text-align: center !important;
}

html.dark .kpi {
    background: var(--wm-bg-surface) !important;
    border-color: var(--wm-border-light) !important;
}

.kpi__v {
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    color: var(--wm-text-strong) !important;
    line-height: 1 !important;
}

.kpi__v small {
    font-size: 0.9rem !important;
    color: var(--wm-teal-600) !important;
}

html.dark .kpi__v small {
    color: #2dd4bf !important;
}

.kpi__l {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--wm-text-muted) !important;
    margin-top: 0.3rem !important;
}

/* 8-Week Accuracy Bar Chart: Responsive Fit within 390px */
.bars {
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;
    height: 105px !important;
    padding: 0.5rem 0.25rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.bar {
    flex: 1 !important;
    min-width: 0 !important;
}

.bar__fill {
    border-radius: 6px 6px 2px 2px !important;
    background: linear-gradient(180deg, #60a5fa 0%, #1d4ed8 100%) !important;
}

.bar__k {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: var(--wm-text-muted) !important;
}

/* Progress Bars */
.prog {
    height: 9px !important;
    border-radius: var(--wm-radius-pill) !important;
    background: var(--wm-border-light) !important;
}

html.dark .prog {
    background: var(--wm-bg-surface) !important;
}

/* ==========================================================================
   14. FOOTER & MODALS
   ========================================================================== */

footer[data-sec="footer"] {
    background: var(--wm-bg-subtle) !important;
    border-top: 1px solid var(--wm-border-light) !important;
    padding-bottom: 4rem !important;
}

html.dark footer[data-sec="footer"] {
    background: #070a10 !important;
    border-top-color: var(--wm-border-light) !important;
}

/* Modal Window */
.modal-backdrop {
    background: rgba(11, 22, 38, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

#contact-thankyou-modal > div {
    border-radius: var(--wm-radius-2xl) !important;
    background: var(--wm-bg-canvas) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    box-shadow: var(--wm-shadow-lg) !important;
    padding: 1.75rem !important;
}

html.dark #contact-thankyou-modal > div {
    background: var(--wm-bg-card) !important;
    border-color: var(--wm-border-light) !important;
}

/* ==========================================================================
   15. CHAT WIDGET & MOBILE COLLISION PREVENTION
   ========================================================================== */

/* Launcher Placement & Safe Z-Index */
.wm-chat-root {
    right: 18px !important;
    bottom: 18px !important;
    z-index: 8999 !important;
}

@media (max-width: 640px) {
    .wm-chat-root {
        right: 14px !important;
        bottom: 14px !important;
    }
}

/* Launcher Button: Touch target >= 44px */
.wm-chat-launcher {
    min-height: 46px !important;
    border-radius: var(--wm-radius-pill) !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.4) !important;
    padding: 10px 16px 10px 14px !important;
    font-weight: 800 !important;
}

.wm-chat-launcher:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.5) !important;
}

/* Chat Panel Dimensions: Responsive & Non-overflowing */
.wm-chat-panel {
    border-radius: var(--wm-radius-2xl) !important;
    border: 1.5px solid var(--wm-border-light) !important;
    box-shadow: 0 28px 60px -15px rgba(11, 22, 38, 0.5) !important;
    width: min(390px, calc(100vw - 28px)) !important;
    height: min(580px, calc(100vh - 96px)) !important;
}

/* ==========================================================================
   16. MOTION, REDUCED-MOTION & UTILITY GUARDS
   ========================================================================== */

/* Universal Focus Visible Styling (WCAG 2.1 AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--wm-blue-500) !important;
    outline-offset: 3px !important;
}

/* Accessible Reduced Motion Engine */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .band__track,
    .brainmark__glow,
    .animate-float,
    .animate-pulse {
        animation: none !important;
    }
}

/* ==========================================================================
   Integration fix (added by Claude when merging Gemini's v2):
   the header "Enrol now" button is hidden on phones by Tailwind (`hidden sm:inline-flex`);
   keep it hidden below 640px so it can't be clipped at the right edge.
   ========================================================================== */
@media (max-width: 639.98px) {
    #main-navbar a.btn-school-primary[href="#enrol"] { display: none !important; }
}