/* ==========================================================================
   NLite Landing Page — Styles
   Table of contents:
   1.  Reset & CSS variables (design tokens)
   2.  Base body / typography
   3.  Header & liquid-glass navbar (desktop)
   4.  Navbar links, app button & parents login
   5.  Hamburger button (three lines -> cross)
   6.  Mobile sidebar (liquid-glass column dock)
   7.  Mobile overlay (dim + blur background)
   8.  Mobile media query (navbar always a dock)
   9.  Page sections (placeholder content)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & CSS variables
   -------------------------------------------------------------------------- */

/* Remove default margins/padding and switch to border-box sizing globally,
   so paddings/borders are included in every element's total width/height. */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Locked brand palette from Logo.png, reversed: teal leads, orange second. */
:root {
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
    /* glass fill (translucent so the background shows through) */
    --glass-border: rgba(255, 255, 255, 0.8);
    /* glass edge highlight */
    --ink: #102A43;
    /* main text color — deep sea navy, calm enough for schools */
    --muted: #4A6578;
    /* secondary text color */
    --accent: #20B1A3;
    /* logo teal — primary CTAs, links, chips */
    --accent-deep: #15756B;
    --accent-light: #38DBCB;
    --accent-soft: #D9F4F1;
    /* pale accent tint for soft fills/badges */
    --accent-tint: 32, 177, 163;
    /* RGB triplet (no alpha) of --accent, for rgba(var(--accent-tint), X) shadows/glows */
    --accent-light-tint: 56, 219, 203;
    --accent-deep-tint: 21, 117, 107;
    --warm: #FD853E;
    /* logo orange — second voice */
    --warm-deep: #F15B02;
    --warm-light: #FEAE80;
    --warm-tint: 253, 133, 62;
    --warm-deep-tint: 241, 91, 2;
    --warm-soft: rgba(var(--warm-deep-tint), 0.4);
    --pop: #38DBCB;
    --pop-tint: 56, 219, 203;
    /* pale glow — pairs with the accent glow behind the hero mascot */
    --brand-gradient: linear-gradient(135deg, var(--accent-light), var(--accent-deep));
    /* the one brand gradient — reused for every icon chip, button and highlight */
    --gold-gradient: linear-gradient(135deg, var(--warm-light), var(--warm-deep));
    /* the one featured-moment gradient */
    --shadow-tint: 30, 36, 74;
    /* RGB triplet (no alpha) of the ink-tinted shadow color, so every box-shadow
       can be written rgba(var(--shadow-tint), X) and stay consistent */
    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    /* headline typeface — warm, editorial, trustworthy */
    --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* body/UI typeface */
    /* Horizontal page gutter — roomy enough that text never kisses the screen edge */
    --page-gutter: clamp(1.25rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   2. Base body / typography
   -------------------------------------------------------------------------- */

/* Smooth scrolling when jumping to anchor sections (e.g. #home, #about).
   Root type is 125% of the browser default (20px for most users) so every
   rem-based size on the site steps up together and stays readable. */
html {
    font-size: 125%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

/* Phones: drop the 125% root scale so rem-based type, padding and cards
   fit the viewport. The large desktop root was the main reason body copy
   looked cut off on the right across every page. */
@media (max-width: 900px) {
    html {
        font-size: 100%;
        overflow-x: clip;
    }

    body {
        overflow-x: clip;
    }

    :root {
        --page-gutter: 1.25rem;
    }

    /* Every major band keeps equal left/right breathing room for copy.
       Skip .hero-gsap — that band is full-bleed; its copy pads itself. */
    section:not(.hero-gsap),
    .cta-band,
    .site-footer,
    .hero:not(.hero-gsap) {
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
        box-sizing: border-box;
    }

    .hero-gsap {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }

    /* !important so hero-home.css padding shorthand cannot wipe the gutter */
    .hero-gsap .hero-content,
    .hero-gsap .hero-visual {
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .hero-gsap .hero-title,
    .hero-gsap .hero-description,
    .hero-gsap .hero-path-line,
    .hero-gsap .hero-actions,
    .hero-gsap .btn,
    .hero-gsap .eyebrow {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .premium-scene {
        width: min(100%, 300px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .whatsapp-btn,
    .scroll-top {
        right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    }

    /* Headings and body blocks never exceed the content column. */
    .games-head,
    .helps-head,
    .values-head,
    .features-head,
    .compare-head,
    .faq-head,
    .testimonials-head,
    .plans-teaser-head,
    .team-head,
    .programs-head,
    .product-band-head,
    .showcase-head,
    .principles-head,
    .cta-band-inner,
    .footer-inner,
    .how-sticky-intro,
    .hero-copy,
    .login-panel,
    .mini-card,
    .progress-track,
    .price-mini {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    /* Allow pill labels / path steps to wrap instead of forcing overflow. */
    .games-eyebrow,
    .hero-path-line,
    .hero-gsap .hero-path-line,
    .helps-path .flow-step {
        white-space: normal;
        max-width: 100%;
    }

    .helps-path .flow-step {
        flex-shrink: 1;
    }

    /* Cards and grids stay inside the gutter. */
    .games-grid,
    .helps-grid,
    .values-grid,
    .features-grid,
    .team-grid,
    .programs-grid,
    .plans-grid,
    .family-grid,
    .game-catalog,
    .product-split,
    .faq-list,
    .how-layout {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Keep replaced media inside their layout box on narrow viewports.
   Without this, intrinsic image widths inflate grid/flex tracks and the
   right edge of the page gets clipped by overflow:hidden ancestors. */
img,
video {
    max-width: 100%;
    height: auto;
}

/* Text must wrap inside its box — never spill past the screen edge. */
p,
h1,
h2,
h3,
h4,
li,
td,
th,
label,
blockquote,
.hero-description,
.games-head p,
.helps-head p,
.cta-band p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
}

/* Visible keyboard-focus ring on every interactive element — required for
   accessibility, previously missing entirely. Mouse users never see it
   (:focus-visible only fires for keyboard/assistive navigation). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Skip-to-content link: invisible until a keyboard user tabs to it, then
   docks as a solid pill above the navbar so focus never gets stranded
   behind the fixed header. */
.skip-link {
    position: fixed;
    top: -60px;
    left: 1.5rem;
    z-index: 200;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    padding: .8rem 1.4rem;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(var(--shadow-tint), 0.35);
    transition: top .25s ease;
}

.skip-link:focus-visible {
    top: 1.5rem;
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Cross-document page transitions: opts every same-origin navigation (a
   parent clicking Plans -> Pricing, About -> Team, etc.) into a smooth
   cross-fade instead of a hard reload. Pure CSS, no JS — the browser
   snapshots the outgoing page, navigates, then blends into the new one.
   Both the source and destination page need this rule for it to fire, so
   it belongs in the stylesheet every page already shares. Unsupported
   browsers (older Firefox) just get the normal instant navigation they
   already have today — nothing to fall back to, nothing that can break. */
@view-transition {
    navigation: auto;
}

/* The header is visually identical across every page, so give it its own
   transition name: instead of the whole viewport (nav included) cross-
   fading as one flat image, the header stays put and only the content
   underneath it blends — reads as one app shell, not eight documents. */
#siteHeader {
    view-transition-name: site-header;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .45s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* Scroll reveal: script.js opts headings/cards/panels into this by adding
   .reveal on load, then adds .in-view the first time each one crosses into
   the viewport. Placed early in the cascade on purpose — every component's
   own :hover/:active rules appear later in this file and need to keep
   winning the moment the reveal transition finishes. */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}

.reveal.in-view {
    opacity: 1;
    transform: none;
}

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


body {
    font-family: var(--font-body);
    color: var(--ink);
    background: linear-gradient(180deg, #F7F6F2 0%, #FFF4EA 48%, #E8F7F4 100%);
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    /* clip keeps position:sticky working; width caps above stop the overflow */
    overflow-x: clip;
    font-size: 1.0625rem;
    line-height: 1.65;
}

/* Site-wide containment: nothing may paint past the viewport width. */
main,
header,
footer,
section,
.hero,
.hero-gsap,
.cta-band,
.hero-container,
.hero-content,
.hero-visual,
.hero-copy {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* Headings carry the display typeface everywhere; body copy stays on
   --font-body. text-wrap: balance keeps multi-line headlines from
   orphaning a lone word on the last line. */
h1,
h2,
h3,
h4,
.plan-price,
.stat b {
    font-family: var(--font-display);
    text-wrap: balance;
}

.stat b,
.plan-price {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. Header & liquid-glass navbar (desktop)
   -------------------------------------------------------------------------- */

/* Scroll-to-top button: fixed to the bottom-right, hidden until the page is
   scrolled (reuses the body.scrolled class toggled by script.js). */
.scroll-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    background: var(--glass-bg);
    color: var(--accent);
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    /* below the mobile overlay (110) and sidebar (120) */
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 10px 26px rgba(var(--shadow-tint), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: opacity .35s ease, transform .35s ease, background .25s ease, color .25s ease;
}

/* Slide up and become clickable once the page is scrolled. */
body.scrolled .scroll-top {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-top:hover {
    background: var(--brand-gradient);
    color: #fff;
}

.scroll-top i {
    transition: transform .25s ease;
}

.scroll-top:hover i {
    transform: translateY(-2px);
}

/* Floating WhatsApp chat button: sits directly above the scroll-to-top
   button, always visible so parents can reach the team from anywhere. */
.whatsapp-btn {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 58px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    font-size: 1.45rem;
    text-decoration: none;
    z-index: 100;
    /* below the mobile overlay (110) and sidebar (120) */
    box-shadow: 0 10px 26px rgba(18, 140, 126, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform .25s ease, box-shadow .25s ease;
}

.whatsapp-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 32px rgba(18, 140, 126, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Gentle "ping" so the chat button stands out next to the up-arrow. */
.whatsapp-btn::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.6);
    animation: whatsappPing 2.4s ease-out infinite;
}

@keyframes whatsappPing {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    70% {
        transform: scale(1.25);
        opacity: 0;
    }

    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}

/* Scroll progress bar: a thin gradient line pinned to the very top that
   fills as the visitor scrolls down the page. Sits above the navbar. */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent));
    z-index: 200;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 1px 6px rgba(var(--accent-tint), 0.5);
    pointer-events: none;
}

/* Fixed header pinned to the top of the viewport, spanning the full width. */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: padding .5s cubic-bezier(.22, 1, .36, 1);
}

/* The navbar itself. At the top of the page it is a full-width glass bar. */
.nav-dock {
    position: relative;
    /* needed so the ::before / ::after droplet effects anchor to it */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    /* Auto side margins in BOTH states: with width: 100% they compute to 0
       (full width at the top), and while scrolling they center the dock.
       Keeping the value constant means only `width` animates, so the bar
       shrinks smoothly and symmetrically toward the center — no snap. */
    margin-left: auto;
    margin-right: auto;
    padding: 1.1rem 3rem;
    /* Same gradient shape as the dock state so the glass fill crossfades
       smoothly instead of snapping from solid color to gradient. */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.18));
    /* Border on ALL sides in both states so the border-color can interpolate.
       The side/top borders are explicitly TRANSPARENT here — if they were
       left unset they'd fall back to `currentColor` (dark ink) and paint a
       black fringe while the border animates during the dock transition. */
    border: 1px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.5);
    /* Frosted glass: light blur so the background stays visible. */
    backdrop-filter: blur(9px) saturate(1.6);
    -webkit-backdrop-filter: blur(9px) saturate(1.6);
    transition: all .5s cubic-bezier(.22, 1, .36, 1);
}

/* Specular highlight: a soft white sheen across the top of the glass,
   simulating the light reflection of Apple's liquid-glass design. */
.nav-dock::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 40%);
    opacity: 0;
    /* hidden while the bar is flat at the top */
    pointer-events: none;
    /* never intercept clicks */
    transition: opacity .5s ease;
}

/* Water-droplet bulge: a blurred elliptical blob hanging below the bottom
   edge, so the glass looks like it "bends" around the corners — the droplet
   effect mentioned in the requirements. */
.nav-dock::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 44%;
    height: 18px;
    border-radius: 50% 50% 100% 100%;
    background: radial-gradient(60% 100% at 50% 100%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.25) 60%, rgba(255, 255, 255, 0) 95%);
    filter: blur(4px);
    opacity: 0;
    /* hidden while the bar is flat at the top */
    pointer-events: none;
    transition: opacity .5s ease, transform .5s ease;
}

/* Scrolled state (body.scrolled is toggled by JS):
   the full-width bar shrinks into a centered pill "dock" that floats down
   a bit, with the liquid-glass background and bending (droplet) edges. */
body.scrolled .nav-dock {
    margin-top: 18px;
    /* floats down from the top edge */
    width: min(calc(100% - 1.5rem), 1480px);
    padding: .7rem 1.35rem;
    gap: 1.1rem;
    border-radius: 40px;
    /* pill shape */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    box-shadow:
        0 18px 45px rgba(var(--shadow-tint), 0.22),
        /* outer drop shadow (floating) */
        0 4px 14px rgba(var(--shadow-tint), 0.12),
        /* tighter contact shadow */
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    /* inner top highlight (glass edge) */
}

body.scrolled .nav-links {
    gap: 1.05rem;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: center;
}

body.scrolled .nav-links a {
    font-size: .86rem;
}

body.scrolled .brand img {
    height: 36px;
}

body.scrolled .nav-actions {
    gap: .5rem;
}

body.scrolled .store-btn {
    padding: .5rem .7rem;
    gap: 0;
}

body.scrolled .store-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

body.scrolled .parents-login {
    padding: .5rem .9rem;
    font-size: .85rem;
}

/* Reveal the specular highlight once docked. */
body.scrolled .nav-dock::before {
    opacity: 1;
}

/* Reveal and slightly enlarge the droplet bulge once docked. */
body.scrolled .nav-dock::after {
    opacity: 1;
    transform: translateX(-50%) scale(1.15);
}

/* --------------------------------------------------------------------------
   4. Navbar links, app button & parents login
   -------------------------------------------------------------------------- */

/* Brand logo (LogoWithText.png) on the far left. */
.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.brand img {
    height: 42px;
    width: auto;
    max-width: none;
    display: block;
}

/* Centered list of page links: Home, About, Team, Plans, Interventions, Pricing. */
.nav-links {
    display: flex;
    align-items: center;
    gap: 1.9rem;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .01em;
    position: relative;
    padding: .35rem 0;
    transition: color .25s ease;
    white-space: nowrap;
}

/* Animated underline that grows from the left on hover. */
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    /* hidden by default */
    transform-origin: left;
    transition: transform .3s ease;
}

.nav-links a:hover {
    color: var(--accent);
}

.nav-links a:hover::after {
    transform: scaleX(1);
    /* underline slides in */
}

/* Active page link (current page is highlighted by script.js). */
.nav-links a.active {
    color: var(--accent);
}

.nav-links a.active::after {
    transform: scaleX(1);
}

/* Right-side action group (App button + Parents Login). */
.nav-actions {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-shrink: 0;
}

/* "App Store" and "Google Play" pill buttons (brand icons come from the
   Font Awesome icon package loaded via CDN in the page <head>). */
.store-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    padding: .55rem 1.05rem;
    border-radius: 999px;
    /* fully rounded pill */
    box-shadow: 0 6px 16px rgba(20, 25, 40, 0.25);
    transition: transform .25s ease, box-shadow .25s ease;
    white-space: nowrap;
}

/* Apple button: dark near-black pill. */
.store-btn.apple {
    background: linear-gradient(135deg, #111, #333);
}

/* Google Play button: slightly lighter dark pill with a green accent on
   the play triangle so the two store buttons stay visually distinct. */
.store-btn.google {
    background: linear-gradient(135deg, #17181c, #3a3d45);
}

.store-btn.google i {
    color: #00e676;
}

/* WhatsApp button: same green as the floating chat bubble. */
.store-btn.whatsapp {
    background: linear-gradient(135deg, #25d366, #128c7e);
}

.store-btn.whatsapp i {
    color: #fff;
}

/* Slight lift on hover to hint it is clickable. */
.store-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 22px rgba(20, 25, 40, 0.32);
}

/* Brand icon glyphs from the Font Awesome package. */
.store-btn i {
    font-size: 1.15rem;
}

/* "Parents Login" glassy pill button. */
.parents-login {
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.85);
    padding: .55rem 1.15rem;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(var(--shadow-tint), 0.12);
    transition: transform .25s ease, background .25s ease;
    white-space: nowrap;
}

.parents-login:hover {
    background: #fff;
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   5. Hamburger button (three lines -> cross)
   -------------------------------------------------------------------------- */

/* Circular glass button, hidden on desktop, shown in the mobile media query. */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(var(--shadow-tint), 0.15);
    cursor: pointer;
    z-index: 130;
    /* stays above the sidebar so it is always clickable */
    flex-shrink: 0;
    transition: background .3s ease;
}

/* The three horizontal lines. */
.hamburger span {
    display: block;
    width: 20px;
    height: 2.2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}

/* Open state (class "open" added by JS): the three lines morph into an X. */
.hamburger.open span:nth-child(1) {
    transform: translateY(7.2px) rotate(45deg);
    /* top line -> top-right arm */
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
    /* middle line fades out */
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-7.2px) rotate(-45deg);
    /* bottom line -> bottom-right arm */
}

/* --------------------------------------------------------------------------
   6. Mobile sidebar (liquid-glass column dock)
   -------------------------------------------------------------------------- */

/* Slide-in panel on the right that shows the menu links as a column.
   Uses the same liquid-glass treatment as the navbar, including the
   specular highlight and the droplet bend at the bottom edge. */
.mobile-sidebar {
    position: fixed;
    top: 14px;
    right: 14px;
    bottom: 14px;
    width: min(320px, 82vw);
    z-index: 120;
    display: flex;
    flex-direction: column;
    /* logo row + links stack at the top, buttons pushed to the bottom */
    padding: 1.4rem;
    border-radius: 36px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px) saturate(1.8);
    -webkit-backdrop-filter: blur(14px) saturate(1.8);
    box-shadow:
        0 25px 60px rgba(60, 75, 120, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: translateX(calc(100% + 20px));
    /* parked fully off-screen to the right */
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

/* Specular highlight across the top of the sidebar glass. */
.mobile-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 40%);
    pointer-events: none;
}

/* Close button: red circular button with a white cross, sitting at the
   right end of the sidebar header row, next to the brand logo. */
.sidebar-close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: #e5484d;
    /* red background */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    /* stay above the specular highlight layer */
    box-shadow: 0 4px 12px rgba(229, 72, 77, 0.45);
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Small lift + stronger glow on hover to hint it is clickable. */
.sidebar-close:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(229, 72, 77, 0.55);
}

/* The white cross drawn with an SVG stroke. */
.sidebar-close svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    /* white cross */
    stroke-width: 2.6;
    stroke-linecap: round;
    fill: none;
}

/* Droplet bend at the bottom of the sidebar (same water effect as navbar). */
.mobile-sidebar::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    width: 52%;
    height: 22px;
    border-radius: 50% 50% 100% 100%;
    background: radial-gradient(60% 100% at 50% 100%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.25) 60%, rgba(255, 255, 255, 0) 95%);
    filter: blur(5px);
    pointer-events: none;
}

/* Open state: slide the sidebar into view. */
.mobile-sidebar.open {
    transform: translateX(0);
}

/* Header row: brand logo on the left, close button on the right. */
.mobile-sidebar .sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    position: relative;
}

/* Brand logo at the start of the sidebar header row. */
.mobile-sidebar .sidebar-brand {
    flex-shrink: 0;
}

.mobile-sidebar .sidebar-brand img {
    height: 34px;
    width: auto;
    display: block;
}

/* The column of links inside the sidebar. */
.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .25rem;
    position: relative;
}

.mobile-menu-links a {
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 1.05rem;
    padding: .85rem 1rem;
    border-radius: 18px;
    position: relative;
    /* Hidden/offset until the sidebar opens (see .mobile-sidebar.open below),
       so the links cascade in one after another instead of the whole list
       appearing with the panel all at once. */
    opacity: 0;
    transform: translateX(16px);
    transition: background .25s ease, color .25s ease, opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
}

/* Stagger: each link waits a little longer than the one before it. Scoped
   to .open so the delay only ever applies to the entrance, never to the
   quick color/background feedback on ordinary hover. */
.mobile-sidebar.open .mobile-menu-links a {
    opacity: 1;
    transform: translateX(0);
}

.mobile-sidebar.open .mobile-menu-links a:nth-child(1) {
    transition-delay: .05s;
}

.mobile-sidebar.open .mobile-menu-links a:nth-child(2) {
    transition-delay: .1s;
}

.mobile-sidebar.open .mobile-menu-links a:nth-child(3) {
    transition-delay: .15s;
}

.mobile-sidebar.open .mobile-menu-links a:nth-child(4) {
    transition-delay: .2s;
}

.mobile-sidebar.open .mobile-menu-links a:nth-child(5) {
    transition-delay: .25s;
}

.mobile-sidebar.open .mobile-menu-links a:nth-child(6) {
    transition-delay: .3s;
}

/* Hover: soft glass chip + slight slide to the right. Scoped under
   .mobile-sidebar.open so this outranks the entrance-stagger rules above
   (same specificity family, so the more specific/later :hover always wins
   once the panel is open) instead of getting stuck at the resting position. */
.mobile-sidebar.open .mobile-menu-links a:hover {
    background: rgba(255, 255, 255, 0.55);
    color: var(--accent);
    transform: translateX(4px);
}

/* Active page link inside the mobile sidebar. */
.mobile-menu-links a.active {
    background: rgba(255, 255, 255, 0.55);
    color: var(--accent);
}

/* Store buttons + Parents Login pinned to the bottom of the sidebar. */
.mobile-sidebar .sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: auto;
    position: relative;
}

/* Make the buttons full-width rows inside the sidebar. */
.mobile-sidebar .sidebar-actions .store-btn,
.mobile-sidebar .sidebar-actions .parents-login {
    justify-content: center;
    display: flex;
    padding: .85rem 1rem;
}

/* --------------------------------------------------------------------------
   7. Mobile overlay (dim + blur background)
   -------------------------------------------------------------------------- */

/* Full-screen dim layer shown behind the sidebar while it is open. */
.mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(30, 40, 70, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    /* hidden by default so it does not block clicks */
    transition: opacity .4s ease, visibility .4s ease;
}

/* Visible only when the menu is open. */
.mobile-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* --------------------------------------------------------------------------
   8. Mobile media query (navbar always a dock)
   -------------------------------------------------------------------------- */

/* Below 900px the navbar is ALWAYS a floating pill dock with the droplet
   bending effect at the edges (never a full-width bar). */
@media (max-width: 900px) {

    /* Hide desktop-only items: centered links and the two action buttons. */
    .nav-links,
    .nav-actions .store-btn,
    .nav-actions .parents-login {
        display: none;
    }

    /* Show the hamburger button instead. */
    .hamburger {
        display: flex;
    }

    /* Dock look: rounded pill, floating with a margin from the top. */
    .nav-dock {
        margin-top: 12px;
        width: calc(100% - 1.75rem);
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding: .75rem 1.2rem;
        border-radius: 34px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
        border: 1px solid var(--glass-border);
        border-bottom-color: rgba(255, 255, 255, 0.55);
        box-shadow:
            0 14px 38px rgba(var(--shadow-tint), 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    /* Specular highlight + droplet bulge are always visible on mobile. */
    .nav-dock::before,
    .nav-dock::after {
        opacity: 1;
    }

    /* Scrolling only nudges the dock slightly (it stays a dock). */
    body.scrolled .nav-dock {
        margin-top: 10px;
        width: calc(100% - 1.75rem);
        max-width: 640px;
        padding: .7rem 1.2rem;
        border-radius: 34px;
        box-shadow:
            0 16px 42px rgba(var(--shadow-tint), 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    /* Slightly smaller logo to fit the compact dock. */
    .brand img {
        height: 34px;
    }
}

/* --------------------------------------------------------------------------
   9. Hero sections (one per page, each with its own mascot layout)
   -------------------------------------------------------------------------- */

/* Shared CTA button pair — bold gradient primary + glass secondary. Same
   pattern as the homepage hero, promoted here so any page's hero can use
   it for its main call to action. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 51px;
    padding: 0 1.3rem;
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}

.btn-primary {
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 15px 32px rgba(var(--accent-tint), 0.19);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 21px 42px rgba(var(--accent-tint), 0.24);
}

/* Trailing arrow nested in its own circular chip, flush with the pill's
   inner padding — reads as a button-in-button, not a naked glyph. */
.btn-primary>span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    font-size: .85rem;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), background .35s ease;
}

.btn-primary:hover>span[aria-hidden="true"] {
    transform: translateX(3px) scale(1.06);
    background: rgba(255, 255, 255, 0.34);
}

.btn-secondary {
    color: var(--accent-deep);
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(var(--accent-tint), 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.btn-secondary:hover {
    transform: translateY(-3px);
}

/* Shared hero shell: clears the fixed navbar and centers content. */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7rem var(--page-gutter) 4rem;
    position: relative;
    overflow: hidden;
    /* keep decorative orbs inside */
}

/* Faint dot-grid texture across the hero for visual density. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(70, 150, 140, 0.16) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(65% 65% at 50% 40%, #000 25%, transparent 100%);
    mask-image: radial-gradient(65% 65% at 50% 40%, #000 25%, transparent 100%);
    pointer-events: none;
}

/* Ambient glow blobs — indigo top-right, teal bottom-left — same atmosphere
   as the homepage hero, reused here so every hero shares one look. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(560px 560px at 100% 0%, rgba(var(--accent-tint), 0.14), rgba(var(--accent-tint), 0.05) 38%, transparent 70%),
        radial-gradient(480px 480px at 0% 100%, rgba(var(--accent-tint), 0.09), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

/* Keep all hero content above the dot grid and ambient glow. */
.hero>* {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 620;
    margin-bottom: 1rem;
    /* the one gradient headline on the whole site — every other heading is
       solid ink, so this stays the single "wow" moment instead of a tic.
       Same 3-stop formula as the homepage hero's highlighted phrase. */
    background: linear-gradient(135deg, var(--ink) 10%, var(--accent) 60%, var(--accent-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Small eyebrow pill above the headline. */
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.95);
    padding: .45rem 1.05rem;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 16px rgba(var(--shadow-tint), 0.12);
    margin-bottom: 1.3rem;
}

.hero-tag i {
    font-size: .85rem;
}

/* Button row in the hero. */
.hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    margin-top: 1.8rem;
}

/* ---- Split hero (text on one side, mascot on the other) ----
   Full width: the inner grid stretches edge to edge. */
.hero-split {
    text-align: left;
    justify-content: center;
}

.hero-split .hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2.5rem;
    width: 100%;
    max-width: 100%;
    /* Perspective lives on the PARENT so the mascot scene (.hero-visual)
       can rotate in real 3D space when the pointer moves — see script.js. */
    perspective: 1400px;
}

/* Allow grid columns to shrink below intrinsic image/content width —
   the default min-width:auto is what pushed hero copy off-screen on mobile. */
.hero-split .hero-inner > * {
    min-width: 0;
}

.hero-split .hero-copy p {
    margin: 0;
}

.hero-split .hero-cta {
    justify-content: flex-start;
}

/* Mascot side: glowing orb behind, floating glass chips around — all sitting
   at different Z depths inside one 3D scene. .hero-visual is the element
   script.js tilts (rotateX/rotateY) as the pointer moves; preserve-3d makes
   every child's translateZ produce real, independent parallax depth instead
   of everything moving as one flat layer. */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem 0;
    width: 100%;
    max-width: 100%;
    /* breathing room so chips never cover the mascot */
    transform-style: preserve-3d;
    will-change: transform;
}

.hero-orb {
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(var(--accent-light-tint), 0.7), var(--warm-soft) 55%, rgba(255, 255, 255, 0) 75%);
    filter: blur(30px);
    z-index: 0;
    /* pushed back in Z so it reads as ambient glow behind the whole scene */
    transform: translateZ(-200px);
}

.hero-split .hero-visual img {
    position: relative;
    z-index: 1;
    max-height: 480px;
    max-width: 100%;
    width: auto;
    height: auto;
    filter: drop-shadow(0 30px 40px rgba(var(--shadow-tint), 0.28));
    /* Sits BEHIND the whole chip cluster (chips range roughly -60px to
       70px, see nth-child rules below) so the floating chips always paint
       in front of the mascot in the 3D depth sort, never the reverse.
       Kept close to 0 (rather than pushed far back) so perspective
       foreshortening stays gentle — a large |z| here was what pushed the
       chips off the left edge on the flip layout (mascot column sits off
       to one side of the perspective vanishing point, so any big z-offset
       gets magnified sideways, not just toward the viewer). */
    transform: translateZ(-80px);
    animation: heroMascotIn 1.1s cubic-bezier(.16, 1, .3, 1) both;
}

/* Mascot still flies toward the viewer out of the burst, settling at its
   resting depth (translateZ(-80px), matched above so there's no jump when
   the animation ends) — just not as far forward as the chip cluster. */
@keyframes heroMascotIn {
    from {
        opacity: 0;
        transform: translateZ(-260px) scale(.55) rotate(-6deg);
    }

    to {
        opacity: 1;
        transform: translateZ(-80px) scale(1) rotate(0deg);
    }
}

/* Floating glass chip. Each chip sits at its own Z depth (--z, set per
   nth-of-type below) and runs two chained animations: heroChipIn bursts it
   outward from behind the mascot once on load, then heroFloat takes over
   for the endless gentle bob. Both keyframes read var(--z) so the chip
   keeps its individual depth through the whole sequence. */
.hero-float {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.95);
    padding: .55rem 1rem;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(var(--shadow-tint), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    --z: 0px;
    animation: heroChipIn .8s cubic-bezier(.16, 1, .3, 1) both, heroFloat 5.5s ease-in-out infinite;
}

.hero-float i {
    color: var(--accent);
}

/* Idle bob — starts exactly where heroChipIn ends (translateZ(var(--z)),
   no rotation, full scale) so the handoff between the two animations is
   seamless. */
@keyframes heroFloat {

    0%,
    100% {
        transform: translateZ(var(--z)) translateY(0);
    }

    50% {
        transform: translateZ(var(--z)) translateY(-12px);
    }
}

/* One-shot burst: each chip flies in from further back than its resting
   depth, tiny, spinning and transparent, and settles into place. */
@keyframes heroChipIn {
    from {
        opacity: 0;
        transform: translateZ(calc(var(--z) - 240px)) scale(.3) rotate(-35deg);
    }

    to {
        opacity: 1;
        transform: translateZ(var(--z)) scale(1) rotate(0deg);
    }
}

/* Pin the chips to the EDGES of the visual column so they never sit on top
   of the mascot image. Each also gets its own Z depth (--z) and its own
   burst stagger (first animation-delay) so the explode reads as a cluster
   of fragments arriving one after another, not one flat pop. The second
   delay in each pair lines up with when that chip's own burst finishes, so
   heroFloat picks up smoothly with no jump.

   Positions are keyed with the `:nth-child(N of .hero-float)` syntax
   instead of `:nth-of-type`, which counts ALL span siblings (the decorative
   .hero-orb / .hero-ring spans included) — since pages vary between 0, 1
   and 2 orb spans before the chips, plain nth-of-type gave each page a
   different (and sometimes colliding) offset. Counting only the chips
   themselves keeps position 1, 2, 3... consistent no matter what markup
   sits before them in .hero-visual. */
.hero-visual .hero-float:nth-child(1 of .hero-float) {
    top: 2%;
    left: 2%;
    --z: 60px;
    animation-delay: .05s, .85s;
}

.hero-visual .hero-float:nth-child(2 of .hero-float) {
    top: 44%;
    right: 2%;
    --z: -50px;
    animation-delay: .15s, .95s;
}

.hero-visual .hero-float:nth-child(3 of .hero-float) {
    bottom: 4%;
    left: 10%;
    --z: 30px;
    animation-delay: .25s, 1.05s;
}

.hero-visual .hero-float:nth-child(4 of .hero-float) {
    bottom: 38%;
    left: 6%;
    --z: -30px;
    animation-delay: .35s, 1.15s;
}

.hero-visual .hero-float:nth-child(5 of .hero-float) {
    bottom: 18%;
    right: 14%;
    --z: 70px;
    animation-delay: .45s, 1.25s;
}

.hero-visual .hero-float:nth-child(6 of .hero-float) {
    top: 66%;
    right: 2%;
    --z: -60px;
    animation-delay: .55s, 1.35s;
}

.hero-visual .hero-float:nth-child(7 of .hero-float) {
    top: 26%;
    left: 2%;
    --z: 15px;
    animation-delay: .65s, 1.45s;
}

.hero-visual .hero-float:nth-child(8 of .hero-float) {
    top: 12%;
    right: 2%;
    --z: -15px;
    animation-delay: .75s, 1.55s;
}

/* Twinkling sparkle icons scattered around the mascot. */
.hero-sparkle {
    position: absolute;
    z-index: 2;
    font-size: 1rem;
    color: var(--accent-deep);
    opacity: .65;
    --z: 40px;
    animation: heroTwinkle 3.2s ease-in-out infinite;
    pointer-events: none;
}

.hero-sparkle.s1 {
    top: 6%;
    right: 16%;
    --z: 50px;
}

.hero-sparkle.s2 {
    bottom: 14%;
    left: 3%;
    color: var(--accent);
    --z: 20px;
    animation-delay: -1.2s;
}

.hero-sparkle.s3 {
    top: 22%;
    left: 10%;
    color: var(--accent);
    --z: 65px;
    animation-delay: -2.1s;
    font-size: .8rem;
}

.hero-sparkle.s4 {
    bottom: 30%;
    right: 6%;
    color: var(--warm);
    --z: 10px;
    animation-delay: -.6s;
    font-size: .75rem;
}

/* Sparkles keep their own Z depth (--z) through the twinkle. */
@keyframes heroTwinkle {

    0%,
    100% {
        opacity: .15;
        transform: translateZ(var(--z)) scale(.75) rotate(0deg);
    }

    50% {
        opacity: .9;
        transform: translateZ(var(--z)) scale(1.2) rotate(24deg);
    }
}

/* Secondary smaller orb for extra depth — sits between the background glow
   and the chip cluster. */
.hero-orb.alt {
    width: 220px;
    height: 220px;
    top: 8%;
    right: 5%;
    background: radial-gradient(circle at 50% 50%, rgba(var(--accent-tint), 0.45), transparent 70%);
    filter: blur(26px);
    transform: translateZ(-120px);
}

/* Anyone with motion sensitivity gets the same hero, flat and still: no
   burst, no bob, no pointer tilt (the tilt itself is only ever applied by
   script.js, which checks this same media query before touching anything). */
@media (prefers-reduced-motion: reduce) {

    .hero-split .hero-visual img,
    .hero-ring img,
    .hero-float,
    .hero-sparkle {
        animation: none;
    }

    .hero-split .hero-visual img,
    .hero-ring img,
    .hero-float {
        transform: none;
        opacity: 1;
    }
}

/* Feature checklist under the CTA. */
.hero-points {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: 1.7rem;
    padding: 0;
}

.hero-points li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
    list-style: none;
    text-align: left;
}

.hero-points i {
    color: var(--accent);
    font-size: 1rem;
    flex-shrink: 0;
}

/* Centered variant for the centered hero layouts. */
.hero-points.center {
    align-items: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.hero-points.center li {
    justify-content: center;
}

/* Reversed split (mascot on the left). */
.hero-split.flip .hero-inner {
    grid-template-columns: 1fr 1fr;
}

.hero-split.flip .hero-visual {
    order: -1;
}

/* ---- Centered hero (mascot inside a glass ring under the text) ---- */
.hero-center .hero-visual {
    margin-top: 3rem;
}

.hero-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 30px 70px rgba(var(--shadow-tint), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.hero-ring img {
    max-height: 300px;
    /* Same pop-in the split-hero mascot gets (heroMascotIn) — this layout
       has no perspective on its parent, so the translateZ inside the
       keyframe is a harmless no-op; the scale/rotate/opacity still play,
       giving the ring mascot the same entrance motion as every other page. */
    animation: heroMascotIn 1.1s cubic-bezier(.16, 1, .3, 1) both;
}

/* ---- Glass login / form panel (login page) ---- */
.login-panel {
    width: 100%;
    max-width: 400px;
    padding: 2.2rem 2rem;
    border-radius: 28px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(22px) saturate(1.6);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: 0 24px 60px rgba(var(--shadow-tint), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    text-align: left;
}

.login-panel h3 {
    margin-bottom: .4rem;
    font-size: 1.4rem;
}

.login-panel>p {
    font-size: .92rem;
    margin: 0 0 1.6rem;
    max-width: none;
}

.login-field {
    margin-bottom: 1.1rem;
}

.login-field label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: .4rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.login-field input {
    width: 100%;
    font-family: inherit;
    font-size: .95rem;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    padding: .8rem 1rem;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.login-field input:focus {
    border-color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(var(--accent-tint), 0.18);
}

.login-panel .submit {
    width: 100%;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand-gradient);
    border: none;
    border-radius: 14px;
    padding: .9rem 1rem;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(var(--accent-tint), 0.35);
    transition: transform .25s ease, box-shadow .25s ease;
}

.login-panel .submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(var(--accent-tint), 0.45);
}

/* Smaller mascots on the App page. */
.hero-visual.compact img {
    max-height: 380px;
}

/* ---- Extra hero components (per-page) ---- */

/* Trust bar: icon + label rows under the CTA. */
.hero-trust {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1.1rem 2rem;
    margin-top: 2.2rem;
}

.hero-trust div {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--muted);
}

.hero-trust i {
    color: var(--accent);
    font-size: 1rem;
}

/* Centered variant (centered hero layouts). */
.hero-trust.center {
    justify-content: center;
}

/* Small glass info card (used on About / Plans / Pricing). */
.mini-card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-width: min(340px, 100%);
    margin-top: 2rem;
    padding: 1.2rem 1.4rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 30px rgba(var(--shadow-tint), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    text-align: left;
}

.mini-card i {
    font-size: 1.3rem;
    color: var(--accent);
    margin-bottom: .15rem;
}

.mini-card b {
    font-size: .98rem;
}

.mini-card span {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.5;
}

/* Simple progress bar (Plans page). */
.progress-track {
    margin-top: 2rem;
    max-width: min(420px, 100%);
}

.progress-track .progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: .45rem;
}

.progress-track .bar {
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    overflow: hidden;
}

.progress-track .fill {
    height: 100%;
    width: 62%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-deep));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s .15s cubic-bezier(.16, 1, .3, 1);
}

/* Fills to its real 62% width the first time the hero scrolls into view —
   reuses script.js's existing scroll-reveal observer via .in-view, so no
   extra JS was needed here. */
.progress-track.in-view .fill {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .progress-track .fill {
        transform: scaleX(1);
        transition: none;
    }
}

/* Price mini card (Pricing page). */
.price-mini {
    display: inline-flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: 2rem;
    padding: 1.3rem 1.7rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 34px rgba(var(--shadow-tint), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    text-align: left;
}

.price-mini .amount {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.price-mini span {
    font-size: .85rem;
    color: var(--muted);
    font-weight: 600;
}

/* Rating row (App page). */
.rating-row {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1.9rem;
    padding: .8rem 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 24px rgba(var(--shadow-tint), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    font-weight: 700;
    font-size: .9rem;
    color: var(--ink);
}

.rating-row .stars {
    color: var(--warm);
    letter-spacing: .12em;
}

.rating-row span {
    color: var(--muted);
    font-weight: 600;
}

/* Login extras: divider, social buttons, forgot link. */
.login-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
    margin: 1.2rem 0;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.85);
}

.social-row {
    display: flex;
    gap: .7rem;
}

.social-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: .85rem;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.9);
    padding: .75rem .5rem;
    border-radius: 14px;
    transition: transform .25s ease, background .25s ease;
}

.social-btn:hover {
    background: #fff;
    transform: translateY(-2px);
}

.social-btn .fa-google {
    color: #ea4335;
}

.social-btn .fa-apple {
    color: #111;
}

.forgot-link {
    display: block;
    text-align: right;
    font-size: .8rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    margin: -.2rem 0 1.2rem;
}

.forgot-link:hover {
    text-decoration: underline;
}

/* ---- Mobile: split heroes stack, mascot centered below text ---- */
@media (max-width: 900px) {

    .hero-split .hero-inner,
    .hero-split.flip .hero-inner {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        gap: 2rem;
        width: 100%;
        max-width: 100%;
        /* The 3D tilt scene only makes sense with a mouse (script.js already
           skips the pointer tilt on touch devices) — with perspective still
           active, the chips' translateZ depth gets magnified by the
           perspective projection and pushes them past the narrow mobile
           column, off the edge of the screen. Dropping perspective flattens
           the scene visually while the chips (higher --z, see above) still
           paint in front of the mascot via real 3D depth sort. */
        perspective: none;
    }

    .hero-split .hero-copy,
    .hero-split .hero-visual {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hero-split .hero-copy p {
        margin: 0 auto;
    }

    .hero-split .hero-cta {
        justify-content: center;
    }

    /* Center every extra hero component on mobile: mission card, price card,
       progress bar, feature lists, trust bars, rating and login panel. */
    .hero-split .hero-copy .mini-card,
    .hero-split .hero-copy .price-mini,
    .hero-split .hero-copy .progress-track,
    .hero-split .hero-copy .hero-points,
    .hero-split .hero-copy .hero-trust,
    .hero-split .hero-copy .rating-row,
    .hero-split .hero-copy .login-panel {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-trust {
        justify-content: center;
    }

    /* Feature checklist rows center their text on mobile. */
    .hero-split .hero-points li {
        justify-content: center;
        text-align: center;
    }

    /* The login panel text stays left but is centered as a block. */
    .hero-split .hero-copy .login-panel {
        text-align: left;
    }

    .hero-split.flip .hero-visual {
        order: 0;
    }

    .hero-split .hero-visual img {
        max-height: 340px;
        max-width: min(100%, 320px);
    }

    .hero-visual.compact img {
        max-height: 280px;
        max-width: min(100%, 280px);
    }

    .hero-ring {
        width: min(260px, 70vw);
        height: min(260px, 70vw);
        max-width: 100%;
    }

    .hero-ring img {
        max-height: 230px;
        max-width: 100%;
    }

    .hero-orb {
        width: min(260px, 72vw);
        height: min(260px, 72vw);
    }

    .hero-orb.alt {
        width: min(160px, 42vw);
        height: min(160px, 42vw);
    }

    /* Smaller pill + a width cap so a long label wraps to two lines instead
       of growing past the (now much narrower) hero-visual column. */
    .hero-float {
        font-size: .72rem;
        padding: .5rem .85rem;
        max-width: 44%;
        line-height: 1.25;
        text-align: left;
    }

    /* Chips pinned right at the 2% edge have the least room to spare once
       they can wrap to two lines — nudge them in a bit so the pill's own
       padding/border never gets clipped by .hero's overflow:hidden. */
    .hero-visual .hero-float:nth-child(1 of .hero-float) {
        left: 4%;
    }

    .hero-visual .hero-float:nth-child(2 of .hero-float),
    .hero-visual .hero-float:nth-child(6 of .hero-float),
    .hero-visual .hero-float:nth-child(8 of .hero-float) {
        right: 4%;
    }
}

/* Generic section panel used by the anchor targets (About, Team, etc.). */
section.panel {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem;
}

section.panel h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -.02em;
}

/* Alternate the panels with a subtle frosted background for visual rhythm. */
section.panel:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   10. Games section (home page)
   -------------------------------------------------------------------------- */

/* Full-width band with a soft white wash so the glass cards pop.
   Only a small horizontal gap so the grid hugs the viewport edges. */
.games-section {
    position: relative;
    overflow: hidden;
    /* keep the decorative blobs inside the section */
    padding: 6rem var(--page-gutter) 5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 60%);
}

/* Decorative blurred color blobs floating behind the grid (liquid-glass depth). */
.games-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}

.games-blob.one {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.games-blob.two {
    width: 380px;
    height: 380px;
    top: 30%;
    right: -120px;
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.games-blob.three {
    width: 360px;
    height: 360px;
    bottom: -100px;
    left: 35%;
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

/* Keep the intro and grid above the blobs. */
.games-head,
.games-grid,
.games-stats,
.games-cta {
    position: relative;
    z-index: 1;
}

/* Sticky stacked layout used by Playful assessment (#adventure).
   Matches the Lunera process pin-stack: left intro stays put, right cards
   stack over each other on scroll. Other games-section blocks stay a grid. */
.games-section.is-stack {
    /* Keep sticky/pin behavior vertically, but never let decorative blobs
       inflate the page width past the viewport on mobile. */
    overflow-x: clip;
    overflow-y: visible;
}

.how-blob-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.how-layout {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3rem;
    max-width: 1300px;
    margin: 0 auto;
}

.how-sticky-intro {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.how-sticky-intro h2 {
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--ink);
    font-weight: 650;
}

.how-sticky-intro p {
    margin-top: .35rem;
    color: var(--muted);
    font-size: 1.125rem;
    line-height: 1.7;
    max-width: 42ch;
}

.how-sticky-intro .games-eyebrow {
    gap: .55rem;
}

.how-sticky-intro .games-cta {
    text-align: left;
    margin-top: 0;
}

.approach-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: approach-pulse 1.6s ease-in-out infinite;
}

@keyframes approach-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.85); }
}

@media (prefers-reduced-motion: reduce) {
    .approach-pulse {
        animation: none;
    }
}

.how-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.25rem;
}

.how-stack-card {
    --stack-top: 5.25rem;
    position: sticky;
    top: var(--stack-top);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background: #fff;
    border: 1px solid rgb(238, 238, 238);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 20px 40px rgba(var(--shadow-tint), 0.05);
    transition: border-color .5s ease, box-shadow .5s ease;
}

.how-stack-card:nth-child(1) { --stack-top: 5.25rem; z-index: 1; }
.how-stack-card:nth-child(2) { --stack-top: 6.35rem; z-index: 2; }
.how-stack-card:nth-child(3) { --stack-top: 7.45rem; z-index: 3; }
.how-stack-card:nth-child(4) { --stack-top: 8.55rem; z-index: 4; }

.how-stack-card:hover {
    border-color: var(--accent);
    box-shadow: 0 20px 40px rgba(var(--accent-tint), 0.12);
}

.how-stack-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.how-stack-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--accent);
    background: rgba(var(--accent-tint), 0.1);
}

.how-stack-num {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 720;
    line-height: 1;
    color: #f3f4f6;
    transition: color .5s ease;
}

.how-stack-card:hover .how-stack-num {
    color: rgba(var(--accent-tint), 0.2);
}

.how-stack-copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.how-stack-copy h3 {
    font-size: 1.875rem;
    letter-spacing: -.02em;
    color: var(--ink);
    font-weight: 650;
}

.how-stack-copy p {
    color: var(--muted);
    font-size: 1.125rem;
    line-height: 1.7;
    margin: 0;
}

.how-stack-card .game-chips {
    margin-top: -.5rem;
}

.how-stack-media {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 16 / 9;
    background: rgb(248, 250, 252);
}

.how-stack-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s ease;
}

.how-stack-card:hover .how-stack-media img {
    transform: scale(1.05);
}

@media (min-width: 1024px) {
    .how-layout {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 3rem;
        padding: 0 1.25rem;
    }

    .how-sticky-intro {
        position: sticky;
        top: 6.75rem;
        width: 456px;
        flex-shrink: 0;
        height: fit-content;
    }

    .how-stack {
        width: 684px;
        max-width: 100%;
        padding-left: 1rem;
        padding-bottom: 2rem;
        gap: 4rem;
    }

    .how-stack-card:nth-child(1) { --stack-top: 6.75rem; }
    .how-stack-card:nth-child(2) { --stack-top: 8.25rem; }
    .how-stack-card:nth-child(3) { --stack-top: 9.75rem; }
    .how-stack-card:nth-child(4) { --stack-top: 11.25rem; }
}

@media (max-width: 1023px) {
    .how-stack {
        gap: 2.4rem;
        padding-bottom: 1.5rem;
    }

    .how-stack-card {
        padding: 1.25rem 1.15rem 1.2rem;
        gap: 1.05rem;
        border-radius: 20px;
    }

    .how-stack-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 1rem;
    }

    .how-stack-num {
        font-size: 1.65rem;
    }

    .how-stack-copy {
        gap: .55rem;
    }

    .how-stack-copy h3 {
        font-size: 1.28rem;
    }

    .how-stack-copy p {
        font-size: .95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .how-sticky-intro,
    .how-stack-card {
        position: static;
    }

    .how-stack-card:hover .how-stack-media img {
        transform: none;
    }
}

/* Centered intro: eyebrow badge + heading + description. */
.games-head {
    text-align: center;
    max-width: 720px;
    width: 100%;
    margin: 0 auto 3rem;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}

/* Small eyebrow pill above the heading. */
.games-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.95);
    padding: .4rem 1rem;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 16px rgba(var(--shadow-tint), 0.12);
    margin-bottom: 1.2rem;
}

.games-eyebrow i {
    font-size: .8rem;
}

.games-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.games-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Responsive card grid. Column count is set explicitly with media queries
   below so large screens always show exactly 4 cards per row. */
.games-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Phones in landscape / small tablets: 2 cards per row. */
@media (min-width: 560px) {
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets / small laptops: 3 cards per row. */
@media (min-width: 1024px) {
    .games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Big screens: exactly 4 cards per row. */
@media (min-width: 1280px) {
    .games-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Individual game card: liquid-glass look matching the navbar dock. */
.game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 26px;
    padding: 1.2rem 1.2rem 1.35rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow:
        0 10px 30px rgba(var(--shadow-tint), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

/* Soft white gloss sweeping across the top edge of the glass card. */
.game-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    border-radius: 26px 26px 40% 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* Cards gently lift and glow with the card accent on hover. */
.game-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 24px 50px rgba(var(--shadow-tint), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* "16+ more games" card: clickable, soft two-tone gradient fill, centered. */
a.game-card.more-games {
    text-decoration: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background:
        radial-gradient(130% 100% at 50% -20%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%),
        linear-gradient(160deg, rgba(122, 158, 255, 0.28), rgba(255, 122, 158, 0.22));
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
}

/* Glowing circular + badge at the top. */
.more-games-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-gradient);
    box-shadow:
        0 14px 34px rgba(var(--accent-tint), 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    margin-bottom: 1.15rem;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.more-games-icon i {
    font-size: 1.9rem;
    color: #fff;
    line-height: 1;
}

/* Badge bounces gently on hover. */
a.game-card.more-games:hover .more-games-icon {
    transform: scale(1.08) rotate(8deg);
}

/* Undo the flex-grow from .game-desc so the whole card content
   (icon, title, text, button) centers as one block. */
a.game-card.more-games .game-desc {
    flex: 0 1 auto;
    margin-bottom: .9rem;
}

/* Center every child element horizontally inside the card. */
a.game-card.more-games>* {
    margin-left: auto;
    margin-right: auto;
}

/* Slightly smaller title than the game names. */
a.game-card.more-games h3 {
    margin-bottom: .45rem;
}

/* In-card pill button. */
.more-games-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .15rem;
    padding: .6rem 1.25rem;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    background: var(--brand-gradient);
    box-shadow:
        0 8px 22px rgba(var(--accent-tint), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform .25s ease, box-shadow .25s ease;
}

.more-games-btn i {
    font-size: .8rem;
    transition: transform .25s ease;
}

a.game-card.more-games:hover .more-games-btn {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(var(--accent-tint), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

a.game-card.more-games:hover .more-games-btn i {
    transform: translateX(4px);
}

/* Thumbnail area: gradient backdrop with a big white icon.
   The real game image is layered on top via <img>. */
.game-thumb {
    position: relative;
    height: 190px;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-light), var(--accent-deep) 60%, var(--warm-deep));
    margin-bottom: 1.1rem;
    box-shadow: inset 0 -20px 30px rgba(20, 30, 60, 0.12);
}

.game-thumb i {
    font-size: 3rem;
    color: #fff;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

/* Real game screenshot covers the thumb; zooms subtly on hover. */
.game-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

.game-card:hover .game-thumb img {
    transform: scale(1.06);
}

/* Cycle through a few thumbnail gradients so the grid feels alive. */
.game-card:nth-child(4n+1) .game-thumb {
    background: linear-gradient(135deg, var(--accent-light), var(--accent-deep) 60%, var(--warm-deep));
}

.game-card:nth-child(4n+2) .game-thumb {
    background: linear-gradient(135deg, #43d9a3, #38b6ff 70%, #6c8dff);
}

.game-card:nth-child(4n+3) .game-thumb {
    background: linear-gradient(135deg, #ffb45e, #ff7a9e 60%, #c26dff);
}

.game-card:nth-child(4n+4) .game-thumb {
    background: linear-gradient(135deg, #5ecbff, #7d5cff 55%, #ff5c8a);
}

/* Game name. */
.game-card h3 {
    font-size: 1.1rem;
    line-height: 1.35;
    margin-bottom: .45rem;
}

/* Short description of the game. */
.game-desc {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1;
    /* pushes the chips to the bottom so cards align */
}

/* Chips: the skills each game analyzes. */
.game-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.95);
    padding: .32rem .7rem;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 6px rgba(var(--shadow-tint), 0.08);
}

/* Tiny colored dot inside each chip. */
.chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* Alternate chip dot colors for a bit of playfulness. */
.chip:nth-child(3n+2)::before {
    background: var(--accent);
}

.chip:nth-child(3n+3)::before {
    background: #ff7a9e;
}

/* Quick stats strip below the grid: one glass panel holding the numbers. */
.games-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem 4rem;
    margin: 4rem auto 0;
    max-width: 960px;
    padding: 2rem 2.5rem;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: 0 14px 40px rgba(var(--shadow-tint), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.stat {
    text-align: center;
}

.stat b {
    display: block;
    font-size: 2.1rem;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.stat span {
    color: var(--muted);
    font-size: .9rem;
    font-weight: 600;
}

/* Call-to-action under the grid. */
.games-cta {
    text-align: center;
    margin-top: 3rem;
}

.games-cta a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    background: var(--brand-gradient);
    padding: .9rem 2.4rem;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(var(--accent-tint), 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform .25s ease, box-shadow .25s ease;
}

.games-cta a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    font-size: .78rem;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), background .35s ease;
}

.games-cta a:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 34px rgba(var(--accent-tint), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.games-cta a:hover i {
    transform: translateX(3px) scale(1.06);
    background: rgba(255, 255, 255, 0.34);
}

/* --------------------------------------------------------------------------
   11. "How NLite helps" section (Home page)
   -------------------------------------------------------------------------- */

/* Section shell: flipped gradient vs. the games section for rhythm. */
.helps-section {
    position: relative;
    overflow: hidden;
    padding: 6rem var(--page-gutter) 5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.45) 60%);
}

/* Decorative blurred color blobs behind the panels. */
.helps-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.helps-blob.one {
    width: 420px;
    height: 420px;
    top: -120px;
    right: -100px;
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.helps-blob.two {
    width: 380px;
    height: 380px;
    bottom: -120px;
    left: -100px;
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

/* Keep the intro, panels and quote above the blobs. */
.helps-head,
.helps-path,
.helps-grid,
.helps-quote {
    position: relative;
    z-index: 1;
}

.helps-path {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 2.4rem;
    overflow: visible;
}

.helps-path .flow-step {
    flex-shrink: 0;
    white-space: nowrap;
    padding: .55rem .95rem;
    font-size: .82rem;
}

.helps-path .flow-arrow {
    flex-shrink: 0;
    transform: none;
}

@media (max-width: 900px) {
    .helps-path {
        flex-direction: column;
        gap: .55rem;
    }

    .helps-path .flow-arrow {
        transform: rotate(90deg);
    }

    .helps-path .flow-step {
        padding: .55rem 1.1rem;
        font-size: .85rem;
    }

    .helps-path .flow-step i {
        display: inline-flex;
    }
}

/* Centered intro (reuses the .games-eyebrow / gradient-heading pattern). */
.helps-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.helps-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.helps-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Two glass panels side by side: "For your kids" / "For you, the parent". */
.helps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Stack the panels on mobile. */
@media (max-width: 900px) {
    .helps-grid {
        grid-template-columns: 1fr;
    }
}

/* Glass panel matching the game-card look. */
.helps-panel {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 26px;
    padding: 2rem 1.8rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 10px 30px rgba(var(--shadow-tint), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

.helps-panel:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(var(--shadow-tint), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Icon badge + heading row at the top of each panel. */
.helps-panel-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .4rem;
}

.helps-panel-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 8px 18px rgba(var(--accent-tint), 0.35);
    flex-shrink: 0;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.helps-panel:hover .helps-panel-icon {
    transform: scale(1.08) rotate(-4deg);
}

/* Kids panel gets a fresh teal badge, parents keep the blue. */
.helps-panel.kid .helps-panel-icon {
    background: linear-gradient(135deg, var(--accent), var(--accent));
    box-shadow: 0 8px 18px rgba(var(--accent-tint), 0.35);
}

.helps-panel-head h3 {
    font-size: 1.35rem;
    letter-spacing: -.01em;
}

/* Feature rows: check icon + bold title + muted description. */
.helps-panel ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .95rem;
}

.helps-panel li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    font-size: .97rem;
    line-height: 1.55;
}

.helps-panel li>i {
    color: var(--accent);
    margin-top: .2rem;
    flex-shrink: 0;
}

.helps-panel li b {
    display: block;
    margin-bottom: .1rem;
}

.helps-panel li span {
    color: var(--muted);
    font-size: .92rem;
}

/* Testimonial strip under the panels. */
.helps-quote {
    max-width: 720px;
    margin: 3rem auto 0;
    text-align: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 24px;
    padding: 1.8rem 2rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 10px 30px rgba(var(--shadow-tint), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .3s ease, box-shadow .3s ease;
}

.helps-quote:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(var(--shadow-tint), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.helps-quote i {
    color: var(--warm);
    font-size: 1.3rem;
    display: block;
    margin-bottom: .6rem;
}

.helps-quote p {
    font-size: 1.08rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.6;
}

.helps-quote span {
    display: block;
    margin-top: .6rem;
    color: var(--muted);
    font-size: .88rem;
}

/* --------------------------------------------------------------------------
   12. Testimonials section (Home page)
   -------------------------------------------------------------------------- */

/* Section shell: soft frosted band, blobs tucked behind the cards. */
.testimonials-section {
    position: relative;
    overflow: hidden;
    padding: 6rem var(--page-gutter) 5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 60%);
}

/* Decorative blurred color blobs behind the grid. */
.testimonials-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.testimonials-blob.one {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.testimonials-blob.two {
    width: 380px;
    height: 380px;
    bottom: -120px;
    right: -100px;
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

/* Keep the intro, cards and stats above the blobs. */
.testimonials-head,
.testimonials-grid,
.testimonials-stats,
.family-stories-layout,
.story-stack-hint {
    position: relative;
    z-index: 1;
}

/* Centered intro (same eyebrow / gradient-heading pattern as games). */
.testimonials-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.testimonials-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.testimonials-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Full-width marquee: the track is a horizontally scrolling flex row; it
   contains two identical copies of the cards so the loop is seamless
   (translateX(-50%) always lands exactly at the start of copy #2). */
.testimonials-grid {
    position: relative;
    overflow: hidden;
}

/* Soft fade at the left/right edges so cards appear to slide out. */
.testimonials-grid::before,
.testimonials-grid::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(2rem, 6vw, 5rem);
    z-index: 2;
    pointer-events: none;
}

.testimonials-grid::before {
    left: 0;
    background: linear-gradient(90deg, #E9F7F2, transparent);
}

.testimonials-grid::after {
    right: 0;
    background: linear-gradient(270deg, #E9F7F2, transparent);
}

/* The scrolling strip. Duration scales with content width so the speed
   feels similar on any screen. */
.testimonials-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    padding: .5rem 0 1.2rem;
    animation: testimonialsScroll 70s linear infinite;
    will-change: transform;
}

/* Pause the marquee while the user hovers or touches the strip. */
.testimonials-grid:hover .testimonials-track,
.testimonials-grid:focus-within .testimonials-track {
    animation-play-state: paused;
}

/* The duplicated set stays hidden from screen readers. */
.testimonials-track-copy {
    display: contents;
}

@keyframes testimonialsScroll {
    to {
        transform: translateX(-50%);
    }
}

/* Cards keep a fixed width so the horizontal track scrolls smoothly. */
.testimonial-card {
    width: 360px;
    flex-shrink: 0;
}

/* Smaller cards on phones so more of the marquee is visible. */
@media (max-width: 640px) {
    .testimonial-card {
        width: 280px;
    }
}

/* Glass card with stars on top, quote, then who said it. */
.testimonial-card {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 24px;
    padding: 1.6rem 1.5rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 10px 30px rgba(var(--shadow-tint), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(var(--shadow-tint), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Star row. */
.testimonial-stars {
    display: flex;
    gap: .25rem;
    color: var(--warm);
    font-size: .9rem;
}

/* The quote itself. */
.testimonial-quote {
    flex: 1;
    font-size: .97rem;
    line-height: 1.65;
    color: var(--ink);
}

/* Avatar + name + role row at the bottom. */
.testimonial-who {
    display: flex;
    align-items: center;
    gap: .8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.65);
    padding-top: .9rem;
}

.testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .95rem;
    color: #fff;
    flex-shrink: 0;
}

.testimonial-avatar.av1 {
    background: var(--brand-gradient);
}

.testimonial-avatar.av2 {
    background: linear-gradient(135deg, var(--accent), var(--accent));
}

.testimonial-avatar.av3 {
    background: linear-gradient(135deg, var(--accent-deep), var(--accent));
}

.testimonial-avatar.av4 {
    background: linear-gradient(135deg, var(--warm), var(--warm));
}

.testimonial-avatar.av5 {
    background: linear-gradient(135deg, var(--accent), var(--warm-deep));
}

.testimonial-avatar.av6 {
    background: linear-gradient(135deg, var(--accent-deep), var(--accent));
}

.testimonial-avatar.av7 {
    background: linear-gradient(135deg, var(--warm), var(--warm));
}

.testimonial-avatar.av8 {
    background: linear-gradient(135deg, var(--accent), var(--accent));
}

.testimonial-who b {
    display: block;
    font-size: .95rem;
}

.testimonial-who div span {
    display: block;
    color: var(--muted);
    font-size: .8rem;
    margin-top: .1rem;
}

/* Summary stats strip (reuses the .stat look from the games section). */
.testimonials-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 3rem;
}

/* --------------------------------------------------------------------------
   12b. Family stories stack (Home page)
   Split copy + overlapping quote sheets. Kids-say keeps the marquee above.
   -------------------------------------------------------------------------- */

.family-stories-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

.family-stories-copy {
    text-align: left;
    max-width: 34rem;
    margin: 0;
}

.family-stories-copy h2 {
    font-size: clamp(2.4rem, 5.2vw, 4.4rem);
    letter-spacing: -.03em;
    line-height: 1.12;
    margin-bottom: 1.1rem;
}

.family-stories-copy h2 em {
    font-style: italic;
    font-weight: 650;
    color: var(--accent);
    padding-bottom: .12em;
}

.family-stories-copy > p {
    font-size: 1.12rem;
    max-width: 32rem;
}

.family-stories-faces {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.family-stories-avatars {
    display: flex;
}

.family-stories-avatars .testimonial-avatar {
    width: 48px;
    height: 48px;
    margin-left: -14px;
    border: 3px solid #fff;
    box-shadow: 0 6px 14px rgba(var(--shadow-tint), 0.16);
}

.family-stories-avatars .testimonial-avatar:first-child {
    margin-left: 0;
}

.family-stories-faces p {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    font-size: 1rem;
}

.story-stack {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.story-sheet {
    position: absolute;
    inset-inline: 0;
    margin-inline: auto;
    width: min(100%, 450px);
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.4rem 2.2rem;
    border-radius: 32px;
    color: #fff;
    box-shadow: 0 22px 48px rgba(var(--shadow-tint), 0.22);
    transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform, opacity;
}

.story-sheet.tone-accent {
    background: linear-gradient(160deg, var(--accent-light), var(--accent-deep));
}

.story-sheet.tone-warm {
    background: linear-gradient(160deg, var(--warm-light), var(--warm-deep));
}

.story-sheet.tone-ink {
    background: linear-gradient(160deg, #2a3558, var(--ink));
}

.story-sheet[data-depth="0"] {
    z-index: 3;
    transform: translateY(0) scale(1) rotate(0);
    opacity: 1;
}

.story-sheet[data-depth="1"] {
    z-index: 2;
    transform: translateY(1.5rem) scale(.95) rotate(1deg);
    opacity: 1;
}

.story-sheet[data-depth="2"] {
    z-index: 1;
    transform: translateY(3rem) scale(.9) rotate(2deg);
    opacity: 1;
}

.story-sheet[data-depth="rest"] {
    z-index: 0;
    transform: translateY(3.4rem) scale(.86);
    opacity: 0;
    pointer-events: none;
}

.story-sheet.is-exiting {
    z-index: 4;
    transform: translateX(120%) rotate(15deg) scale(.8);
    opacity: 0;
}

.story-sheet-mark {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    opacity: .45;
}

.story-sheet > p {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 600;
    line-height: 1.35;
    margin: 1.2rem 0 1.8rem;
}

.story-sheet-who {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.story-sheet-who .testimonial-avatar {
    background: rgba(255, 255, 255, 0.2);
    border: 0;
}

.story-sheet-who b {
    display: block;
    font-size: 1rem;
}

.story-sheet-who span span,
.story-sheet-who div span {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: .85rem;
    margin-top: .15rem;
}

.story-stack-hint {
    text-align: center;
    color: var(--muted);
    font-size: .88rem;
    margin: 2.4rem 0 0;
}

.family-stories-section .testimonials-stats {
    margin-top: 1.8rem;
}

@media (max-width: 900px) {
    .family-stories-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .family-stories-copy {
        max-width: 40rem;
        text-align: left;
    }

    .story-stack {
        height: 440px;
        width: min(100%, 450px);
        margin: 0 auto;
    }

    .story-sheet {
        min-height: 300px;
        padding: 1.8rem 1.6rem;
        border-radius: 28px;
    }

    .story-sheet.is-exiting {
        transform: translateX(80%) rotate(12deg) scale(.85);
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-sheet {
        transition: none;
        will-change: auto;
    }

    .story-sheet.is-exiting {
        transform: none;
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   13. Notice board section (Home page)
   -------------------------------------------------------------------------- */

/* Section shell with decorative blobs. */
.notice-section {
    position: relative;
    overflow: hidden;
    padding: 6rem var(--page-gutter) 5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.45) 60%);
}

.notice-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.notice-blob.one {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.notice-blob.two {
    width: 380px;
    height: 380px;
    bottom: -120px;
    right: -100px;
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.notice-head,
.notice-section .timeline {
    position: relative;
    z-index: 1;
}

/* Centered intro (eyebrow + heading), same rhythm as Our journey. */
.notice-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.notice-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.notice-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Date and category stack as pills. On the left rail they hug the left
   edge; on the right rail they hug the right (same as Our journey). */
.notice-section .timeline-card time {
    display: block;
    width: fit-content;
}

.notice-card .notice-tag {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(var(--accent-tint), 0.1);
    border: 1px solid rgba(var(--accent-tint), 0.25);
    padding: .25rem .7rem;
    border-radius: 999px;
    width: fit-content;
    margin: 0 0 .5rem;
}

.timeline-item:nth-child(odd) .notice-card time,
.timeline-item:nth-child(odd) .notice-card .notice-tag {
    margin-left: auto;
}

.notice-card.tip .notice-tag {
    color: var(--warm-deep);
    background: rgba(var(--warm-tint), 0.12);
    border-color: rgba(var(--warm-tint), 0.28);
}

.notice-card.update .notice-tag {
    color: #475569;
    background: rgba(71, 85, 105, 0.1);
    border-color: rgba(71, 85, 105, 0.22);
}

.notice-card.event .notice-tag {
    color: #c2410c;
    background: rgba(194, 65, 12, 0.1);
    border-color: rgba(194, 65, 12, 0.24);
}

.notice-card.release .notice-tag {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.22);
}

/* --------------------------------------------------------------------------
   11. Game library (Plans page)
   -------------------------------------------------------------------------- */

/* Filter bar above the grid: pill chips for each skill domain. */
.library-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
    margin: 0 auto 2.5rem;
    max-width: 960px;
}

.filter-chip {
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.9);
    padding: .5rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 12px rgba(var(--shadow-tint), 0.1);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.filter-chip:hover {
    transform: translateY(-2px);
}

/* Active filter: gradient fill like the primary buttons. */
.filter-chip.active {
    color: #fff;
    background: var(--brand-gradient);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(var(--accent-tint), 0.35);
}

/* Card footer button on the plans page ("View plan"). */
.plan-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .9rem;
    padding: .62rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    background: var(--brand-gradient);
    box-shadow: 0 8px 20px rgba(var(--accent-tint), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform .25s ease, box-shadow .25s ease;
}

.plan-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    font-size: .72rem;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), background .35s ease;
}

.plan-link:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 26px rgba(var(--accent-tint), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.plan-link:hover i {
    transform: translateX(3px) scale(1.06);
    background: rgba(255, 255, 255, 0.34);
}

/* On big screens the library grid shows 4 cards per row. */
@media (min-width: 1280px) {
    .games-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------------------------
   14. "How it works" section (Home page)
   -------------------------------------------------------------------------- */

/* Section shell with decorative blobs. */
.how-section {
    position: relative;
    overflow: hidden;
    padding: 6rem var(--page-gutter) 5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 60%);
}

.how-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.how-blob.one {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.how-blob.two {
    width: 380px;
    height: 380px;
    bottom: -120px;
    right: -100px;
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.how-head,
.how-steps,
.helps-path,
.approach-cycle {
    position: relative;
    z-index: 1;
}

/* Centered intro (eyebrow + gradient heading pattern). */
.how-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.how-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.how-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Three steps side by side. */
.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .how-steps {
        grid-template-columns: 1fr;
    }
}

/* --- Column-count modifiers (used on the Plans page) --- */

/* Four equal columns for the 4-step plan journey. */
.how-steps.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
    .how-steps.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .how-steps.cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Four columns from tablet width — keeps 4-card grids balanced. */
.games-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1023px) {
    .games-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 559px) {
    .games-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Three columns on desktop — keeps 6-card grids balanced 3 + 3. */
.games-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1023px) {
    .games-grid.cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 559px) {
    .games-grid.cols-3 {
        grid-template-columns: 1fr;
    }
}

/* Glass step card with a big number watermark. */
.how-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .8rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 26px;
    padding: 2.4rem 1.6rem 2rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 10px 30px rgba(var(--shadow-tint), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

.how-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(var(--shadow-tint), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Giant faded step number in the background. */
.how-num {
    position: absolute;
    top: .4rem;
    right: 1.1rem;
    font-size: 4.2rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, rgba(var(--accent-tint), 0.24), rgba(var(--accent-deep-tint), 0.1));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    pointer-events: none;
}

/* Rounded icon badge under the number. */
.how-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 10px 22px rgba(var(--accent-tint), 0.4);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.how-step:hover .how-icon {
    transform: scale(1.08) rotate(-4deg);
}

.how-step:nth-child(2) .how-icon {
    background: linear-gradient(135deg, var(--accent), var(--accent));
    box-shadow: 0 10px 22px rgba(var(--accent-tint), 0.4);
}

.how-step:nth-child(3) .how-icon {
    background: linear-gradient(135deg, var(--warm), var(--warm));
    box-shadow: 0 10px 22px rgba(var(--warm-tint), 0.4);
}

.how-step h3 {
    font-size: 1.25rem;
    letter-spacing: -.01em;
    margin-top: .3rem;
}

.how-step p {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.65;
    margin: 0;
}

/* Circular NLite approach: six nodes around a loop, not a repeated list. */
.approach-cycle {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    max-width: 920px;
}

.approach-cycle-stage {
    position: relative;
    width: min(100%, 860px);
    aspect-ratio: 1;
    margin: 0 auto;
}

.approach-ring {
    position: absolute;
    inset: 7%;
    width: 86%;
    height: 86%;
    color: var(--accent);
    pointer-events: none;
}

.approach-ring-track,
.approach-ring-flow {
    fill: none;
    stroke-linecap: round;
}

.approach-ring-track {
    stroke: rgba(var(--accent-tint), 0.16);
    stroke-width: 0.55;
}

.approach-ring-flow {
    stroke: var(--accent);
    stroke-width: 0.7;
    stroke-dasharray: 4.2 3.4;
    transform-origin: 50% 50%;
    animation: approach-ring-spin 28s linear infinite;
}

.approach-ring-arrows {
    opacity: .85;
}

.approach-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: min(42%, 13.5rem);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    text-align: center;
    padding: 1.2rem;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow:
        0 16px 36px rgba(var(--shadow-tint), 0.14),
        inset 0 1px 0 rgba(255, 255, 255, .85);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
}

.approach-hub-kicker {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.approach-hub strong {
    font-family: var(--font-display);
    font-size: clamp(.95rem, 1.8vw, 1.2rem);
    font-weight: 650;
    line-height: 1.25;
    color: var(--ink);
    max-width: 11ch;
}

.approach-nodes {
    list-style: none;
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
}

.approach-node {
    position: absolute;
    width: 11.75rem;
    margin: 0;
    transform: translate(-50%, -50%);
}

.approach-node:nth-child(1) { left: 50%; top: 12%; }
.approach-node:nth-child(2) { left: 83%; top: 31%; }
.approach-node:nth-child(3) { left: 83%; top: 69%; }
.approach-node:nth-child(4) { left: 50%; top: 88%; }
.approach-node:nth-child(5) { left: 17%; top: 69%; }
.approach-node:nth-child(6) { left: 17%; top: 31%; }

.approach-node-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
    padding: .85rem .7rem .9rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 24px rgba(var(--shadow-tint), 0.1), inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

.approach-node-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(var(--shadow-tint), 0.16), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.approach-node-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .95rem;
    background: var(--brand-gradient);
    box-shadow: 0 8px 16px rgba(var(--accent-tint), 0.32);
}

.approach-node:nth-child(even) .approach-node-icon {
    background: linear-gradient(135deg, var(--warm-light), var(--warm-deep));
    box-shadow: 0 8px 16px rgba(var(--warm-tint), 0.32);
}

.approach-node h3 {
    font-size: 1.02rem;
    letter-spacing: -.01em;
    margin: 0;
}

.approach-node p {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.45;
}

.approach-loop-note {
    display: none;
}

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

@media (prefers-reduced-motion: reduce) {
    .approach-ring-flow {
        animation: none;
    }
}

/* Same circular loop on phones: shrink cards and hub so the ring still fits. */
@media (max-width: 900px) {
    #approach.how-section {
        padding-left: .7rem !important;
        padding-right: .7rem !important;
        overflow: visible;
    }

    .approach-cycle {
        max-width: none;
        width: 100%;
    }

    .approach-cycle-stage {
        width: 100%;
        max-width: 28rem;
        aspect-ratio: 1;
    }

    .approach-ring {
        display: block;
    }

    .approach-hub {
        width: min(36%, 7.4rem);
        padding: .45rem .4rem;
        gap: .15rem;
    }

    .approach-hub-kicker {
        font-size: .48rem;
        letter-spacing: .08em;
    }

    .approach-hub strong {
        font-size: .68rem;
        max-width: 12ch;
    }

    .approach-nodes {
        position: absolute;
        display: block;
        inset: 0;
        padding: 0;
        border: 0;
    }

    .approach-node {
        width: 5.7rem;
    }

    .approach-node:nth-child(1) { left: 50%; top: 13%; }
    .approach-node:nth-child(2) { left: 82%; top: 32%; }
    .approach-node:nth-child(3) { left: 82%; top: 68%; }
    .approach-node:nth-child(4) { left: 50%; top: 87%; }
    .approach-node:nth-child(5) { left: 18%; top: 68%; }
    .approach-node:nth-child(6) { left: 18%; top: 32%; }

    .approach-node-card {
        align-items: center;
        text-align: center;
        gap: .22rem;
        padding: .45rem .32rem .5rem;
        border-radius: 14px;
    }

    .approach-node-icon {
        width: 1.65rem;
        height: 1.65rem;
        border-radius: 8px;
        font-size: .68rem;
        box-shadow: 0 4px 10px rgba(var(--accent-tint), 0.28);
    }

    .approach-node h3 {
        font-size: .72rem;
    }

    .approach-node p {
        font-size: .58rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .approach-loop-note {
        display: none;
    }
}

@media (max-width: 420px) {
    .approach-node {
        width: 5.15rem;
    }

    .approach-node p {
        font-size: .54rem;
        -webkit-line-clamp: 2;
    }
}

/* --------------------------------------------------------------------------
   15. Plans teaser section (Home page)
   -------------------------------------------------------------------------- */

.plans-teaser-section {
    position: relative;
    overflow: hidden;
    padding: 6rem var(--page-gutter) 5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.45) 60%);
}

.plans-teaser-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.plans-teaser-blob.one {
    width: 420px;
    height: 420px;
    top: -120px;
    right: -100px;
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.plans-teaser-blob.two {
    width: 380px;
    height: 380px;
    bottom: -120px;
    left: -100px;
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.plans-teaser-head,
.plans-teaser-grid {
    position: relative;
    z-index: 1;
}

.plans-teaser-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.plans-teaser-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.plans-teaser-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Three plan cards. */
.plans-teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .plans-teaser-grid {
        grid-template-columns: 1fr;
    }
}

/* Glass plan card. */
.plan-teaser-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 26px;
    padding: 2rem 1.8rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 10px 30px rgba(var(--shadow-tint), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

/* Dotted grid fading up from the card floor — same treatment as the
   reference pricing cards. Kept on a pseudo so the "Most popular" badge
   can still hang off the top edge. */
.plan-teaser-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    z-index: 0;
    pointer-events: none;
    border-radius: 0 0 26px 26px;
    background-image: radial-gradient(circle at 2px 2px, rgba(var(--shadow-tint), 0.42) 1.15px, transparent 1.25px);
    background-size: 17px 17px;
    background-repeat: repeat;
    opacity: 0.3;
    mask-image: linear-gradient(to top, black, transparent);
    -webkit-mask-image: linear-gradient(to top, black, transparent);
}

.plan-teaser-card > * {
    position: relative;
    z-index: 1;
}

.plan-teaser-card > .plan-badge {
    position: absolute;
    z-index: 2;
}

.plan-teaser-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(var(--shadow-tint), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Highlighted middle card. */
.plan-teaser-card.featured {
    border: 2px solid var(--warm);
    box-shadow: 0 18px 44px rgba(var(--warm-tint),0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-8px);
}

.plan-teaser-card.featured:hover {
    transform: translateY(-11px);
    box-shadow: 0 26px 56px rgba(var(--warm-tint),0.34), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.plan-teaser-card.featured::after {
    opacity: 0.6;
}

.plan-badge {
    position: absolute;
    z-index: 2;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--gold-gradient);
    padding: .35rem 1rem;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(var(--accent-tint), 0.4);
    white-space: nowrap;
}

.plan-teaser-card h3 {
    font-size: 1.2rem;
    letter-spacing: -.01em;
}

.plan-price {
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--ink);
    font-weight: 650;
    margin: 0;
}

.plan-price span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
    -webkit-text-fill-color: var(--muted);
}

.plan-teaser-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
}

.plan-teaser-card li {
    display: flex;
    gap: .6rem;
    align-items: center;
    font-size: .93rem;
    color: var(--ink);
}

.plan-teaser-card li i {
    color: var(--accent);
    flex-shrink: 0;
}

/* CTA button inside each card (reuses the plan-link gradient). */
.plan-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .5rem;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    background: var(--brand-gradient);
    padding: .8rem 1.6rem;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(var(--accent-tint), 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform .25s ease, box-shadow .25s ease;
}

.plan-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    font-size: .72rem;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), background .35s ease;
}

.plan-link:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 30px rgba(var(--accent-tint), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.plan-link:hover i {
    transform: translateX(3px) scale(1.06);
    background: rgba(255, 255, 255, 0.34);
}

/* --------------------------------------------------------------------------
   16. FAQ section (Home page)
   -------------------------------------------------------------------------- */

.faq-section {
    position: relative;
    overflow: hidden;
    padding: 6rem var(--page-gutter) 5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 60%);
}

.faq-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.faq-blob.one {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.faq-blob.two {
    width: 380px;
    height: 380px;
    bottom: -120px;
    right: -100px;
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.faq-head,
.faq-list {
    position: relative;
    z-index: 1;
}

.faq-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.faq-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.faq-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Accordion list: one glass row per question. */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

/* Native <details> accordion. */
.faq-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 18px;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 8px 22px rgba(var(--shadow-tint), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
}

.faq-item {
    transition: box-shadow .3s ease;
}

.faq-item:hover {
    box-shadow: 0 14px 32px rgba(var(--shadow-tint), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    padding: 1.15rem 1.4rem;
    user-select: none;
    transition: color .25s ease;
}

.faq-item summary:hover {
    color: var(--accent);
}

/* Remove the default disclosure triangle. */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Chevron rotates when open. */
.faq-item summary i {
    color: var(--accent);
    font-size: .85rem;
    transition: transform .3s ease;
    flex-shrink: 0;
}

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

.faq-item p {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.7;
    margin: 0;
    padding: 0 1.4rem 1.3rem;
}

/* --------------------------------------------------------------------------
   17. Pricing page extras
   -------------------------------------------------------------------------- */

/* Monthly / yearly billing toggle under the heading. */
.billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: .3rem;
    margin-top: 1.4rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.billing-toggle button {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    color: var(--muted);
    padding: .55rem 1.3rem;
    border-radius: 999px;
    cursor: pointer;
    transition: color .25s ease, background .25s ease;
}

.billing-toggle button span {
    font-size: .72rem;
    font-weight: 800;
    color: var(--accent);
    margin-left: .3rem;
}

.billing-toggle button.active {
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 6px 14px rgba(var(--accent-tint), 0.35);
}

/* Yearly prices are hidden by default; the toggle swaps the display. */
.plans-teaser-grid[data-billing="yearly"] .price-monthly {
    display: none;
}

.plans-teaser-grid[data-billing="yearly"] .price-yearly {
    display: block;
}

/* Comparison table section. */
.compare-section {
    position: relative;
    overflow: hidden;
    padding: 6rem var(--page-gutter) 5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 60%);
}

.compare-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.compare-blob.one {
    width: 420px;
    height: 420px;
    top: -120px;
    right: -100px;
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.compare-blob.two {
    width: 380px;
    height: 380px;
    bottom: -120px;
    left: -100px;
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.compare-head,
.compare-wrap,
.compare-guarantee {
    position: relative;
    z-index: 1;
}

.compare-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.compare-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.compare-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Glass table frame, full width. */
.compare-wrap {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 26px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 14px 38px rgba(var(--shadow-tint), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.compare-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: .95rem;
}

.compare-table th,
.compare-table td {
    padding: .95rem 1.2rem;
    text-align: left;
    border-bottom: 1px solid rgba(120, 135, 180, 0.18);
}

.compare-table thead th {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.5);
}

.compare-table thead th.highlight {
    color: #fff;
    background: var(--brand-gradient);
}

.compare-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.35);
}

.compare-table tbody tr {
    transition: background .2s ease;
}

.compare-table tbody tr:hover td {
    background: rgba(var(--accent-tint), 0.07);
}

/* Highlight the Plus column body cells. */
.compare-table td.highlight {
    background: rgba(var(--accent-tint), 0.09);
    font-weight: 700;
}

.compare-table td.highlight+td {
    font-weight: 700;
}

.compare-table .yes {
    color: var(--accent);
}

.compare-table .no {
    color: #d9b9a8;
}

/* Guarantee strip under the table. */
.compare-guarantee {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin: 2rem auto 0;
}

@media (max-width: 900px) {
    .compare-guarantee {
        grid-template-columns: 1fr;
    }
}

.compare-guarantee>div {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-items: center;
    text-align: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    padding: 1.4rem 1.2rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 10px 26px rgba(var(--shadow-tint), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .3s ease, box-shadow .3s ease;
}

.compare-guarantee>div:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(var(--shadow-tint), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.compare-guarantee i {
    font-size: 1.4rem;
    color: var(--accent);
    margin-bottom: .4rem;
}

.compare-guarantee b {
    font-size: 1rem;
}

.compare-guarantee span {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.5;
}

/* Final CTA band. */
.cta-band {
    position: relative;
    overflow: hidden;
    padding: 5.5rem var(--page-gutter);
    background: var(--brand-gradient);
    text-align: center;
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000 30%, transparent 100%);
    mask-image: radial-gradient(60% 80% at 50% 50%, #000 30%, transparent 100%);
    pointer-events: none;
}

.cta-band-inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.cta-band h2 {
    color: #fff;
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    letter-spacing: -.02em;
    margin-bottom: .8rem;
}

.cta-band p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

.cta-band-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--accent);
    font-weight: 800;
    font-size: 1rem;
    background: #fff;
    padding: .95rem 2.2rem;
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(30, 40, 90, 0.35);
    transition: transform .25s ease, box-shadow .25s ease;
}

.cta-band-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 42px rgba(30, 40, 90, 0.45);
}

.cta-band-btn i:last-child {
    font-size: .85rem;
    transition: transform .25s ease;
}

.cta-band-btn:hover i:last-child {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   18. About page: values + timeline
   -------------------------------------------------------------------------- */

.values-section,
.timeline-section {
    position: relative;
    padding: 6rem var(--page-gutter) 5rem;
}

.values-section {
    overflow: hidden;
}

.timeline-section {
    /* Sticky year digits need a visible overflow ancestor on the Y axis.
       Clip X so decorative overflow never widens the page. Blobs clip in
       .timeline-blobs instead. */
    overflow-x: clip;
    overflow-y: visible;
}

.timeline-blobs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.values-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 60%);
}

.timeline-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.45) 60%);
}

.values-section .games-blob.one {
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.values-section .games-blob.two {
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.timeline-section .games-blob.one {
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.timeline-section .games-blob.two {
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.values-head,
.values-grid,
.timeline-head,
.journey-line {
    position: relative;
    z-index: 1;
}

.values-head,
.timeline-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.values-head h2,
.timeline-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.values-head p,
.timeline-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Values: four glass cards. */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

/* Generic glass info card (values, principles, features). */
.info-card {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 24px;
    padding: 1.7rem 1.5rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 10px 28px rgba(var(--shadow-tint), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

/* Cards lift and glow on hover — same physics as .game-card, so every
   glass card on the site feels equally alive. */
.info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(var(--shadow-tint), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.info-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 8px 18px rgba(var(--accent-tint), 0.35);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.info-card:hover .info-card-icon {
    transform: scale(1.08) rotate(-4deg);
}

.info-card:nth-child(2) .info-card-icon {
    background: linear-gradient(135deg, var(--accent), var(--accent));
    box-shadow: 0 8px 18px rgba(var(--accent-tint), 0.35);
}

.info-card:nth-child(3) .info-card-icon {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    box-shadow: 0 8px 18px rgba(var(--accent-deep-tint), 0.35);
}

.info-card:nth-child(4) .info-card-icon {
    background: linear-gradient(135deg, var(--warm), var(--warm));
    box-shadow: 0 8px 18px rgba(var(--warm-tint), 0.35);
}

.info-card h3 {
    font-size: 1.12rem;
    letter-spacing: -.01em;
}

.info-card p {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.65;
    margin: 0;
}

/* DaisyUI-style journey: vertical rail on small screens, horizontal on
   large screens. Named .journey-line so it does not collide with the
   home-page notices .timeline. */
.journey-line {
    list-style: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}

.journey-line > li {
    position: relative;
    display: grid;
    flex-shrink: 0;
    align-items: stretch;
    grid-template-columns: minmax(4.5rem, 0.28fr) auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-width: 0;
    max-width: 100%;
}

.journey-line > li > hr {
    display: none;
}

.journey-line > li::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    width: 4px;
    justify-self: center;
    align-self: stretch;
    background: linear-gradient(180deg, var(--accent-light), var(--accent), var(--warm));
    border-radius: 4px;
    z-index: 0;
}

.journey-line > li:first-child::before {
    clip-path: inset(50% 0 0 0);
}

.journey-line > li:last-child::before {
    clip-path: inset(0 0 50% 0);
}

.journey-start {
    grid-column-start: 1;
    grid-row-start: 1;
    justify-self: end;
    align-self: center;
    padding-right: .85rem;
}

.journey-start time {
    font-family: var(--font-display);
    font-weight: 650;
    font-size: 1.15rem;
    letter-spacing: -.02em;
    color: var(--accent-deep);
    font-variant-numeric: tabular-nums;
}

.journey-middle {
    grid-column-start: 2;
    grid-row-start: 1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.35rem;
    line-height: 1;
}

.journey-middle i {
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}

.journey-end {
    grid-column-start: 3;
    grid-row-start: 1;
    justify-self: start;
    align-self: center;
    margin: .65rem 0 .65rem .95rem;
    width: auto;
    max-width: calc(100% - .95rem);
    min-width: 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    padding: 1.05rem 1.15rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 8px 22px rgba(var(--shadow-tint), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.journey-end h3 {
    font-family: var(--font-display);
    font-weight: 560;
    font-style: italic;
    font-size: 1.12rem;
    letter-spacing: -.01em;
    color: var(--ink);
    margin-bottom: .35rem;
    line-height: 1.2;
    padding-bottom: 3px;
}

.journey-end p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
}

@media (min-width: 1024px) {
    .journey-line {
        flex-direction: row;
        max-width: none;
        align-items: stretch;
    }

    .journey-line > li {
        flex: 1 1 0;
        min-width: 0;
        justify-items: center;
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    /* Empty hrs collapse in grid. Paint the rail as a grid item on the
       icon row instead, clipping the first/last ends. */
    .journey-line > li > hr {
        display: none;
    }

    .journey-line > li::before {
        grid-column: 1 / -1;
        grid-row: 2;
        width: auto;
        height: 4px;
        align-self: center;
        justify-self: stretch;
        background: linear-gradient(90deg, var(--accent-light), var(--accent), var(--warm));
    }

    .journey-line > li:first-child::before {
        clip-path: inset(0 0 0 50%);
    }

    .journey-line > li:last-child::before {
        clip-path: inset(0 50% 0 0);
    }

    .journey-start {
        grid-column: 1 / -1;
        grid-row-start: 1;
        justify-self: center;
        padding: 0 0 .7rem;
    }

    .journey-start time {
        font-size: 1.05rem;
    }

    .journey-middle {
        grid-column-start: 2;
        grid-row-start: 2;
        position: relative;
        z-index: 1;
    }

    .journey-end {
        grid-column: 1 / -1;
        grid-row-start: 3;
        justify-self: stretch;
        margin: .85rem .35rem 0;
        max-width: none;
        width: auto;
        padding: .95rem .9rem;
    }

    .journey-end h3 {
        font-size: 1.02rem;
    }

    .journey-end p {
        font-size: .82rem;
        line-height: 1.55;
    }
}

/* Timeline: a center line with dots, milestone cards alternating left and
   right (zigzag). On small screens it collapses to a single left rail.
   Used by the home-page notices section. */
.timeline {
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: 3px;
    transform: translateX(-50%);
    border-radius: 3px;
    background: linear-gradient(180deg, var(--accent), var(--accent-deep), var(--warm-deep));
    opacity: .5;
}

/* Every item owns one half of the row: odd items sit left, even sit right. */
.timeline-item {
    position: relative;
    width: 50%;
    padding-bottom: 1.6rem;
}

.timeline-item:nth-child(odd) {
    padding-right: 2.6rem;
    text-align: right;
}

.timeline-item:nth-child(even) {
    margin-left: 50%;
    padding-left: 2.6rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

/* The dot is centered exactly on the line at the start of each milestone. */
.timeline-dot {
    position: absolute;
    top: 1rem;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--accent);
    box-shadow: 0 4px 10px rgba(var(--accent-tint), 0.4);
}

.timeline-item:nth-child(odd) .timeline-dot {
    right: -10.5px;
}

.timeline-item:nth-child(even) .timeline-dot {
    left: -10.5px;
}

.timeline-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    padding: 1.2rem 1.4rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 8px 22px rgba(var(--shadow-tint), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}

.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(var(--shadow-tint), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.timeline-card time {
    display: inline-block;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(var(--accent-tint), 0.1);
    border: 1px solid rgba(var(--accent-tint), 0.25);
    padding: .25rem .7rem;
    border-radius: 999px;
    margin-bottom: .5rem;
}

.timeline-card h3 {
    font-size: 1.1rem;
    margin-bottom: .3rem;
}

.timeline-card p {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.6;
    margin: 0;
}

/* Small screens: line moves to the left, all cards stack on its right. */
@media (max-width: 900px) {
    .timeline::before {
        left: 12px;
        transform: none;
    }

    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding: 0 0 1.6rem 2.6rem;
        text-align: left;
    }

    .timeline-item:nth-child(odd) .timeline-dot,
    .timeline-item:nth-child(even) .timeline-dot {
        left: 3px;
        right: auto;
    }

    .timeline-item:nth-child(odd) .notice-card time,
    .timeline-item:nth-child(odd) .notice-card .notice-tag {
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
   19. Team page: member grid + principles
   -------------------------------------------------------------------------- */

.team-grid-section,
.principles-section {
    position: relative;
    overflow: hidden;
    padding: 6rem var(--page-gutter) 5rem;
}

.team-grid-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 60%);
}

.principles-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.45) 60%);
}

.team-grid-section .games-blob.one {
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.team-grid-section .games-blob.two {
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.principles-section .games-blob.one {
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.principles-section .games-blob.two {
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.team-head,
.team-grid,
.principles-head,
.principles-grid {
    position: relative;
    z-index: 1;
}

.team-head,
.principles-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.team-head h2,
.principles-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.team-head p,
.principles-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Member cards: 4 columns. */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}

.member-card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 24px;
    padding: 1.7rem 1.4rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 10px 28px rgba(var(--shadow-tint), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

.member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(var(--shadow-tint), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.member-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.member-card:hover .member-avatar {
    transform: scale(1.08) rotate(-4deg);
}

.member-card h3 {
    font-size: 1.08rem;
    margin-top: .3rem;
}

.member-role {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
}

.member-card p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
}

.member-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .3rem;
}

.member-tags span {
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(120, 135, 180, 0.2);
    padding: .25rem .65rem;
    border-radius: 999px;
}

/* Principles: three info cards. */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .principles-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   20. Interventions page: program cards
   -------------------------------------------------------------------------- */

.programs-section {
    position: relative;
    overflow: hidden;
    padding: 6rem var(--page-gutter) 5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 60%);
}

.programs-section .games-blob.one {
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.programs-section .games-blob.two {
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.programs-head,
.programs-grid {
    position: relative;
    z-index: 1;
}

.programs-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.programs-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.programs-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .programs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .programs-grid {
        grid-template-columns: 1fr;
    }
}

.program-card {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 24px;
    padding: 1.6rem 1.5rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 10px 28px rgba(var(--shadow-tint), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

.program-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(var(--shadow-tint), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.program-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}

.program-head .info-card-icon {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
}

.program-card:hover .program-head .info-card-icon {
    transform: scale(1.08) rotate(-4deg);
}

.level-badge {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 999px;
}

.level-badge.foundation {
    color: var(--accent);
    background: rgba(var(--accent-tint), 0.12);
    border: 1px solid rgba(var(--accent-tint), 0.3);
}

.level-badge.growth {
    color: #D97A2E;
    background: rgba(230, 136, 59, 0.14);
    border: 1px solid rgba(230, 136, 59, 0.35);
}

.level-badge.mastery {
    color: var(--accent-deep);
    background: rgba(var(--accent-deep-tint), 0.1);
    border: 1px solid rgba(var(--accent-deep-tint), 0.32);
}

/* Age-bracket badges for the personalised practice kits. */
.level-badge.kids {
    color: var(--warm-deep);
    background: rgba(var(--warm-deep-tint), 0.12);
    border: 1px solid rgba(var(--warm-deep-tint), 0.35);
}

.level-badge.teens {
    color: #0d9488;
    background: rgba(13, 148, 136, 0.12);
    border: 1px solid rgba(13, 148, 136, 0.3);
}

.level-badge.adults {
    color: #0b84b0;
    background: rgba(11, 132, 176, 0.12);
    border: 1px solid rgba(11, 132, 176, 0.35);
}

/* Exercise checklist inside each kit card. */
.kit-list {
    list-style: none;
    margin: .3rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.kit-list li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
}

.kit-list i {
    color: var(--accent);
    flex-shrink: 0;
}

.program-card h3 {
    font-size: 1.1rem;
}

.program-card>p {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.program-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    border-top: 1px solid rgba(120, 135, 180, 0.18);
    padding-top: .8rem;
}

.program-meta span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(120, 135, 180, 0.2);
    padding: .3rem .7rem;
    border-radius: 999px;
}

.program-meta i {
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   21. App page: phone mockup + feature grid
   -------------------------------------------------------------------------- */

.showcase-section {
    position: relative;
    overflow: hidden;
    padding: 6rem var(--page-gutter) 5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 60%);
}

.showcase-section .games-blob.one {
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.showcase-section .games-blob.two {
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.showcase-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

@media (max-width: 900px) {
    .showcase-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .showcase-inner .hero-points {
        width: fit-content;
        margin: 0 auto;
        text-align: left;
    }
}

/* Left copy. */
.showcase-copy .games-eyebrow {
    margin-bottom: 1.2rem;
}

.showcase-copy h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.showcase-copy>p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 460px;
}

@media (max-width: 900px) {
    .showcase-copy>p {
        margin: 0 auto;
    }
}

/* Phone frame. */
.phone-wrap {
    display: flex;
    justify-content: center;
}

.phone {
    position: relative;
    width: 292px;
    border-radius: 44px;
    padding: 12px;
    background: linear-gradient(160deg, #DCF2EB, #AEE3D6);
    box-shadow: 0 30px 60px rgba(var(--shadow-tint), 0.35), inset 0 2px 6px rgba(255, 255, 255, 0.8);
    animation: phoneFloat 6s ease-in-out infinite;
}

/* Gentle idle float so the mockup reads as a live product shot, not a
   static screenshot. Same amplitude family as the hero's floating chips. */
@keyframes phoneFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-.6deg);
    }

    50% {
        transform: translateY(-14px) rotate(.6deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .phone {
        animation: none;
    }
}

.phone-notch {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 22px;
    border-radius: 999px;
    background: var(--accent);
    z-index: 2;
}

.phone-screen {
    position: relative;
    border-radius: 34px;
    overflow: hidden;
    background: linear-gradient(180deg, #F2FBF8, #E3F6F0);
    padding: 2.6rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.mock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
    font-size: .95rem;
    color: var(--ink);
}

.mock-head i {
    color: var(--accent);
}

/* Progress ring + goal. */
.mock-ring-wrap {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    padding: .9rem 1rem;
    box-shadow: 0 6px 16px rgba(var(--shadow-tint), 0.1);
}

.mock-ring {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: conic-gradient(var(--accent) 82%, rgba(var(--accent-tint), 0.15) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mock-ring::before {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
}

.mock-ring span {
    position: relative;
    z-index: 1;
    font-size: .8rem;
    font-weight: 900;
    color: var(--ink);
}

.mock-ring-wrap b {
    display: block;
    font-size: .95rem;
}

.mock-ring-wrap small {
    color: var(--muted);
    font-size: .78rem;
}

/* Weekly bar chart. */
.mock-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .4rem;
    height: 74px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    padding: .8rem .9rem;
    box-shadow: 0 6px 16px rgba(var(--shadow-tint), 0.1);
}

.mock-bars div {
    flex: 1;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, var(--accent-deep), var(--accent));
    opacity: .85;
}

.mock-bars div:nth-child(2) {
    height: 46%;
}

.mock-bars div:nth-child(3) {
    height: 62%;
}

.mock-bars div:nth-child(4) {
    height: 38%;
}

.mock-bars div:nth-child(5) {
    height: 70%;
}

.mock-bars div:nth-child(6) {
    height: 88%;
}

.mock-bars div:nth-child(7) {
    height: 74%;
}

/* Skill delta chips. */
.mock-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.mock-chips span {
    font-size: .72rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(var(--accent-tint), 0.12);
    border: 1px solid rgba(var(--accent-tint), 0.3);
    padding: .3rem .7rem;
    border-radius: 999px;
}

/* Next task row. */
.mock-task {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand-gradient);
    border-radius: 14px;
    padding: .8rem 1rem;
    box-shadow: 0 8px 18px rgba(var(--accent-tint), 0.35);
}

.mock-task i {
    font-size: 1rem;
}

/* App feature grid. */
.features-section {
    position: relative;
    overflow: hidden;
    padding: 6rem var(--page-gutter) 5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.45) 60%);
}

.features-section .games-blob.one {
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.features-section .games-blob.two {
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.features-head,
.features-grid {
    position: relative;
    z-index: 1;
}

.features-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.features-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--ink);
    font-weight: 650;
}

.features-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   22. Login page: dashboard peek strip
   -------------------------------------------------------------------------- */

.dash-peek-section {
    position: relative;
    overflow: hidden;
    padding: 5rem var(--page-gutter) 5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 60%);
}

.dash-peek-section .games-blob.one {
    background: radial-gradient(circle, #B8ECDD, transparent 70%);
}

.dash-peek-section .games-blob.two {
    background: radial-gradient(circle, #F8D4B0, transparent 70%);
}

.dash-peek-head,
.dash-peek-grid {
    position: relative;
    z-index: 1;
}

.dash-peek-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.6rem;
}

.dash-peek-head h2 {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    letter-spacing: -.02em;
    margin-bottom: .8rem;
    color: var(--ink);
    font-weight: 650;
}

.dash-peek-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.dash-peek-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .dash-peek-grid {
        grid-template-columns: 1fr;
    }
}

/* Frosted glass band closing the page. */
.site-footer {
    position: relative;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-top: 1px solid var(--glass-border);
    padding: 3.5rem var(--page-gutter) 1.5rem;
}

/* Four-column layout: brand, two link columns, newsletter. */
.footer-inner {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 2.5rem;
}

@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 560px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }
}

/* Brand block: logo, tagline, social icons. */
.footer-brand img {
    height: 38px;
    width: auto;
    margin-bottom: 1rem;
}

.footer-brand p {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.65;
    max-width: 280px;
}

.footer-social {
    display: flex;
    gap: .6rem;
    margin-top: 1.2rem;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.footer-social a:hover {
    background: var(--brand-gradient);
    color: #fff;
    transform: translateY(-3px);
}

/* Link columns. */
.footer-col h4 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 1rem;
    color: var(--ink);
}

.footer-col a {
    display: block;
    color: var(--muted);
    text-decoration: none;
    font-size: .92rem;
    padding: .3rem 0;
    transition: color .2s ease;
}

.footer-col a:hover {
    color: var(--accent);
}

/* Newsletter form. */
.footer-col.newsletter p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.6;
}

.footer-form {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}

.footer-form input {
    flex: 1;
    min-width: 0;
    padding: .75rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.75);
    font-family: inherit;
    font-size: .9rem;
    color: var(--ink);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.footer-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-tint), 0.18);
}

.footer-form button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    background: var(--brand-gradient);
    color: #fff;
    font-size: .95rem;
    box-shadow: 0 8px 18px rgba(var(--accent-tint), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform .2s ease;
}

.footer-form button:hover {
    transform: translateY(-2px);
}

/* Bottom bar: copyright left, legal links right. */
.footer-bottom {
    max-width: 1300px;
    margin: 2.5rem auto 0;
    padding-top: 1.3rem;
    border-top: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .84rem;
}

.footer-bottom i {
    color: #ff6b81;
}

.footer-legal {
    display: flex;
    gap: 1.2rem;
}

.footer-legal a {
    color: var(--muted);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-legal a:hover {
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   23. Performance: smooth fast scrolling on long pages
   -------------------------------------------------------------------------- */

/* content-visibility: auto lets the browser skip rendering for sections that
   are outside the viewport, so flicking through a long page no longer forces
   every image, blur and animation to be painted at once. The
   contain-intrinsic-size hint reserves height while a section is off-screen
   so the scrollbar doesn't jump around. */
section,
footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

/* First-load height hints per section. content-visibility sizes the CONTENT
   box of an off-screen section, and the section's own vertical padding is
   added on top — so these values are (measured section height - padding),
   i.e. the pure content-box heights measured at 1440px wide. The "auto"
   keyword then remembers each section's real size after its first render,
   keeping the scrollbar stable on every later visit and viewport. */
.hero {
    contain-intrinsic-size: auto 724px;
}

.helps-section {
    contain-intrinsic-size: auto 838px;
}

.how-section {
    contain-intrinsic-size: auto 980px;
}

.games-section {
    contain-intrinsic-size: auto 969px;
}

#adventure.games-section {
    contain-intrinsic-size: auto 2200px;
}

.plans-teaser-section {
    contain-intrinsic-size: auto 662px;
}

.testimonials-section {
    contain-intrinsic-size: auto 587px;
}

.family-stories-section {
    contain-intrinsic-size: auto 720px;
}

.notice-section {
    contain-intrinsic-size: auto 1280px;
}

.faq-section {
    contain-intrinsic-size: auto 589px;
}

.compare-section {
    contain-intrinsic-size: auto 847px;
}

.cta-band {
    contain-intrinsic-size: auto 225px;
}

.values-section {
    contain-intrinsic-size: auto 421px;
}

.timeline-section {
    contain-intrinsic-size: auto 720px;
}

.team-grid-section {
    contain-intrinsic-size: auto 830px;
}

.principles-section {
    contain-intrinsic-size: auto 397px;
}

.programs-section {
    contain-intrinsic-size: auto 793px;
}

.showcase-section {
    contain-intrinsic-size: auto 441px;
}

.features-section {
    contain-intrinsic-size: auto 499px;
}

.dash-peek-section {
    contain-intrinsic-size: auto 382px;
}

.site-footer {
    contain-intrinsic-size: auto 266px;
}

/* Mobile is taller than desktop for most sections (single-column stacks),
   so the same first-load hints get narrower fallbacks measured at 390px. */
@media (max-width: 900px) {
    .hero {
        contain-intrinsic-size: auto 1047px;
    }

    .helps-section {
        contain-intrinsic-size: auto 1521px;
    }

    .how-section {
        contain-intrinsic-size: auto 1180px;
    }

    .games-section {
        contain-intrinsic-size: auto 2116px;
    }

    #adventure.games-section {
        contain-intrinsic-size: auto 2800px;
    }

    .plans-teaser-section {
        contain-intrinsic-size: auto 1351px;
    }

    .testimonials-section {
        contain-intrinsic-size: auto 730px;
    }

    .family-stories-section {
        contain-intrinsic-size: auto 980px;
    }

    .notice-section {
        contain-intrinsic-size: auto 1580px;
    }

    .faq-section {
        contain-intrinsic-size: auto 708px;
    }

    .compare-section {
        contain-intrinsic-size: auto 1316px;
    }

    .cta-band {
        contain-intrinsic-size: auto 203px;
    }

    .values-section {
        contain-intrinsic-size: auto 1160px;
    }

    .timeline-section {
        contain-intrinsic-size: auto 1480px;
    }

    .team-grid-section {
        contain-intrinsic-size: auto 2679px;
    }

    .principles-section {
        contain-intrinsic-size: auto 916px;
    }

    .programs-section {
        contain-intrinsic-size: auto 2153px;
    }

    .showcase-section {
        contain-intrinsic-size: auto 782px;
    }

    .features-section {
        contain-intrinsic-size: auto 1165px;
    }

    .dash-peek-section {
        contain-intrinsic-size: auto 885px;
    }

    .site-footer {
        contain-intrinsic-size: auto 835px;
    }
}

/* Keep the long-running testimonial marquee on its own compositor layer so
   it never forces a repaint while it slides. */
.testimonials-track {
    will-change: transform;
}

/* The scrolling progress bar is updated on every scroll event; promoting it
   to its own layer keeps that update compositor-only. */
.scroll-progress {
    will-change: width;
}

/* --------------------------------------------------------------------------
   Home page: CTA band actions + ghost variant
   -------------------------------------------------------------------------- */

.cta-band-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.cta-band-btn.ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: none;
}

.cta-band-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 34px rgba(30, 40, 90, 0.25);
}

/* --------------------------------------------------------------------------
   Home page: "What NLite understands" mindmap
   -------------------------------------------------------------------------- */

.mindmap {
    position: relative;
    max-width: 1180px;
    min-height: 760px;
    margin: 0.5rem auto 0;
}

.mindmap-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

.mindmap-svg path,
.mindmap-svg circle {
    transition: opacity .3s ease, fill .3s ease, stroke .3s ease;
}

.mindmap-svg path {
    fill: none;
    stroke: var(--accent);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mindmap-svg path.mindmap-stem {
    stroke-width: 1.35;
    opacity: 0.62;
}

.mindmap-svg path.mindmap-twig {
    stroke-width: 1.55;
    opacity: 0.5;
}

.mindmap-svg circle.mindmap-joint {
    fill: var(--accent);
    stroke: #fff;
    stroke-width: 2;
}

.mindmap-svg circle.mindmap-leaf-dot {
    fill: #fff;
    stroke: var(--accent);
    stroke-width: 1.8;
}

.mindmap:has(.mindmap-branch:hover) .mindmap-svg path,
.mindmap:has(.mindmap-branch:hover) .mindmap-svg circle {
    opacity: 0.12;
}

.mindmap:has(.mindmap-branch[data-side="nw"]:hover) .mindmap-svg path[data-side="nw"],
.mindmap:has(.mindmap-branch[data-side="ne"]:hover) .mindmap-svg path[data-side="ne"],
.mindmap:has(.mindmap-branch[data-side="sw"]:hover) .mindmap-svg path[data-side="sw"],
.mindmap:has(.mindmap-branch[data-side="se"]:hover) .mindmap-svg path[data-side="se"],
.mindmap:has(.mindmap-branch[data-side="nw"]:hover) .mindmap-svg circle[data-side="nw"],
.mindmap:has(.mindmap-branch[data-side="ne"]:hover) .mindmap-svg circle[data-side="ne"],
.mindmap:has(.mindmap-branch[data-side="sw"]:hover) .mindmap-svg circle[data-side="sw"],
.mindmap:has(.mindmap-branch[data-side="se"]:hover) .mindmap-svg circle[data-side="se"] {
    opacity: 1;
}

.mindmap-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.25;
    letter-spacing: -.02em;
    padding: .85rem;
    box-shadow:
        0 16px 36px rgba(var(--accent-tint), 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 0 7px rgba(255, 255, 255, 0.72),
        0 0 0 8px rgba(var(--accent-tint), 0.22);
}

.mindmap-hub::before {
    content: "";
    position: absolute;
    inset: -42px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-tint), 0.34), rgba(var(--accent-tint), 0.08) 55%, transparent 75%);
    filter: blur(18px);
    z-index: -1;
    pointer-events: none;
}

.mindmap-branch {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2.1rem;
    width: 40%;
}

.mindmap-branch[data-side="nw"],
.mindmap-branch[data-side="sw"] {
    left: 0;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.mindmap-branch[data-side="ne"],
.mindmap-branch[data-side="se"] {
    right: 0;
    flex-direction: row;
    justify-content: flex-start;
}

.mindmap-branch[data-side="nw"] { top: 3%; }
.mindmap-branch[data-side="ne"] { top: 9%; }
.mindmap-branch[data-side="sw"] { bottom: 9%; }
.mindmap-branch[data-side="se"] { bottom: 1%; }

.mindmap-parent {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin: 0;
    padding: .42rem 1.05rem .42rem .42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 10px 24px rgba(var(--shadow-tint), 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    color: var(--ink);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    transition: box-shadow .3s ease, background .3s ease;
}

.mindmap-parent-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: .82rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.mindmap-branch:hover .mindmap-parent {
    background: #fff;
    box-shadow:
        0 12px 28px rgba(var(--accent-tint), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.mindmap-branch:hover .mindmap-parent-icon {
    background: var(--accent);
    color: #fff;
}

.mindmap-leaves {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.mindmap-branch[data-side="nw"] .mindmap-leaves,
.mindmap-branch[data-side="sw"] .mindmap-leaves {
    align-items: flex-end;
}

.mindmap-branch[data-side="ne"] .mindmap-leaves,
.mindmap-branch[data-side="se"] .mindmap-leaves {
    align-items: flex-start;
}

.mindmap-leaves li {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(120, 135, 180, 0.16);
    padding: .38rem .85rem;
    border-radius: 999px;
    white-space: nowrap;
    width: max-content;
    box-shadow: 0 4px 12px rgba(var(--shadow-tint), 0.07);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}

.mindmap-branch:hover .mindmap-leaves li {
    background: #fff;
    border-color: rgba(var(--accent-tint), 0.28);
    box-shadow: 0 6px 16px rgba(var(--accent-tint), 0.12);
}

.mindmap-branch[data-side="ne"] .mindmap-leaves li:first-child,
.mindmap-branch[data-side="ne"] .mindmap-leaves li:last-child,
.mindmap-branch[data-side="se"] .mindmap-leaves li:first-child,
.mindmap-branch[data-side="se"] .mindmap-leaves li:last-child {
    margin-left: 14px;
}

.mindmap-branch[data-side="ne"] .mindmap-leaves li:nth-child(2),
.mindmap-branch[data-side="ne"] .mindmap-leaves li:nth-last-child(2),
.mindmap-branch[data-side="se"] .mindmap-leaves li:nth-child(2),
.mindmap-branch[data-side="se"] .mindmap-leaves li:nth-last-child(2) {
    margin-left: 7px;
}

.mindmap-branch[data-side="nw"] .mindmap-leaves li:first-child,
.mindmap-branch[data-side="nw"] .mindmap-leaves li:last-child,
.mindmap-branch[data-side="sw"] .mindmap-leaves li:first-child,
.mindmap-branch[data-side="sw"] .mindmap-leaves li:last-child {
    margin-right: 14px;
}

.mindmap-branch[data-side="nw"] .mindmap-leaves li:nth-child(2),
.mindmap-branch[data-side="nw"] .mindmap-leaves li:nth-last-child(2),
.mindmap-branch[data-side="sw"] .mindmap-leaves li:nth-child(2),
.mindmap-branch[data-side="sw"] .mindmap-leaves li:nth-last-child(2) {
    margin-right: 7px;
}

/* Tags still used by the growth cards further down the home page. */
.understand-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.understand-tags li {
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(120, 135, 180, 0.2);
    padding: .3rem .7rem;
    border-radius: 999px;
}

@media (max-width: 860px) {
    #understands.values-section {
        padding-left: .55rem !important;
        padding-right: .55rem !important;
    }

    .mindmap {
        min-height: 21rem;
        width: 100%;
        max-width: 100%;
    }

    .mindmap-svg {
        display: block;
    }

    .mindmap-hub {
        width: 5.1rem;
        height: 5.1rem;
        font-size: .62rem;
        padding: .4rem;
        box-shadow:
            0 10px 22px rgba(var(--accent-tint), 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            0 0 0 4px rgba(255, 255, 255, 0.72),
            0 0 0 5px rgba(var(--accent-tint), 0.22);
    }

    .mindmap-hub::before {
        inset: -18px;
        filter: blur(10px);
    }

    .mindmap-branch {
        width: 48%;
        gap: .28rem;
    }

    .mindmap-branch[data-side="nw"] { top: 9%; }
    .mindmap-branch[data-side="ne"] { top: 13%; }
    .mindmap-branch[data-side="sw"] { bottom: 11%; }
    .mindmap-branch[data-side="se"] { bottom: 5%; }

    .mindmap-parent {
        font-size: .58rem;
        gap: .28rem;
        padding: .22rem .48rem .22rem .22rem;
        white-space: normal;
        max-width: 7.6rem;
        line-height: 1.15;
    }

    .mindmap-parent-icon {
        width: 1.15rem;
        height: 1.15rem;
        font-size: .5rem;
    }

    .mindmap-leaves {
        gap: .14rem;
    }

    .mindmap-leaves li {
        font-size: .5rem;
        font-weight: 650;
        padding: .16rem .4rem;
        white-space: normal;
        max-width: 7.4rem;
        line-height: 1.2;
        text-align: inherit;
    }

    .mindmap-branch[data-side="ne"] .mindmap-leaves li:first-child,
    .mindmap-branch[data-side="ne"] .mindmap-leaves li:last-child,
    .mindmap-branch[data-side="se"] .mindmap-leaves li:first-child,
    .mindmap-branch[data-side="se"] .mindmap-leaves li:last-child {
        margin-left: 6px;
    }

    .mindmap-branch[data-side="ne"] .mindmap-leaves li:nth-child(2),
    .mindmap-branch[data-side="ne"] .mindmap-leaves li:nth-last-child(2),
    .mindmap-branch[data-side="se"] .mindmap-leaves li:nth-child(2),
    .mindmap-branch[data-side="se"] .mindmap-leaves li:nth-last-child(2) {
        margin-left: 3px;
    }

    .mindmap-branch[data-side="nw"] .mindmap-leaves li:first-child,
    .mindmap-branch[data-side="nw"] .mindmap-leaves li:last-child,
    .mindmap-branch[data-side="sw"] .mindmap-leaves li:first-child,
    .mindmap-branch[data-side="sw"] .mindmap-leaves li:last-child {
        margin-right: 6px;
    }

    .mindmap-branch[data-side="nw"] .mindmap-leaves li:nth-child(2),
    .mindmap-branch[data-side="nw"] .mindmap-leaves li:nth-last-child(2),
    .mindmap-branch[data-side="sw"] .mindmap-leaves li:nth-child(2),
    .mindmap-branch[data-side="sw"] .mindmap-leaves li:nth-last-child(2) {
        margin-right: 3px;
    }

    .mindmap-svg path.mindmap-stem {
        stroke-width: 0.85;
    }

    .mindmap-svg path.mindmap-twig {
        stroke-width: 1.15;
    }

    .mindmap-svg circle.mindmap-joint {
        r: 2.4;
        stroke-width: 1.4;
    }

    .mindmap-svg circle.mindmap-leaf-dot {
        stroke-width: 1.3;
    }
}

@media (max-width: 1080px) and (min-width: 861px) {
    .mindmap {
        min-height: 820px;
    }

    .mindmap-parent {
        white-space: normal;
        max-width: 11rem;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mindmap-parent,
    .mindmap-leaves li,
    .mindmap-svg path,
    .mindmap-svg circle {
        transition: none;
    }
}

/* Statement panel under the diagram. */
.understood-panel {
    max-width: 820px;
    margin: 2.5rem auto 0;
    text-align: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.55);
    border-radius: 24px;
    padding: 2.2rem 2rem;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 10px 28px rgba(var(--shadow-tint), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .3s ease, box-shadow .3s ease;
}

.understood-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(var(--shadow-tint), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.understood-panel h3 {
    font-size: 1.5rem;
    letter-spacing: -.01em;
    margin-bottom: .6rem;
    color: var(--ink);
    font-weight: 650;
}

.understood-panel p {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Home page: "From insight to progress" flow + paths + growth
   -------------------------------------------------------------------------- */

.insight-flow {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    max-width: 1100px;
    margin: 0 auto 2.5rem;
}

.insight-flow .flow-step {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: .7rem 1.2rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .9rem;
    color: var(--ink);
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(var(--shadow-tint), 0.1);
    transition: transform .25s ease, box-shadow .25s ease;
}

.insight-flow .flow-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(var(--shadow-tint), 0.18);
}

.insight-flow .flow-step i {
    color: var(--accent);
}

.insight-flow .flow-arrow {
    color: #b9c3e0;
    font-size: .85rem;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .insight-flow {
        flex-direction: column;
    }

    .insight-flow .flow-arrow {
        transform: rotate(90deg);
    }
}

.insight-sub {
    text-align: center;
    margin-bottom: 2rem;
}

.insight-sub h3 {
    font-size: 1.4rem;
    margin-bottom: .3rem;
}

.insight-sub p {
    color: var(--muted);
    margin: 0;
}

.path-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    font-weight: 800;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(120, 135, 180, 0.2);
    padding: .55rem .9rem;
    border-radius: 999px;
    margin-bottom: .8rem;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.info-card:hover .path-chain {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 18px rgba(var(--shadow-tint), 0.14);
}

.path-chain i {
    color: var(--accent);
    font-size: .7rem;
}

.growth-head {
    text-align: center;
    max-width: 720px;
    margin: 3.5rem auto 2rem;
}

.growth-head h3 {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    letter-spacing: -.02em;
    margin: .4rem 0 .7rem;
}

.growth-head p {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}
/* --------------------------------------------------------------------------
   Pressed / active feedback (kept at the end of the cascade so it wins over
   the :hover transforms declared earlier for the same elements).
   -------------------------------------------------------------------------- */
.store-btn:active,
.parents-login:active,
.plan-link:active,
.games-cta a:active,
.hamburger:active,
.sidebar-close:active,
.scroll-top:active,
.filter-chip:active,
.btn:active {
    transform: scale(.98);
}

.plan-teaser-card:active,
.game-card:active,
.info-card:active {
    transform: translateY(-2px) scale(.98);
}

/* Anchor jumps land below the fixed header instead of hiding under it. */
#main-content > section,
.cta-band {
    scroll-margin-top: 5.5rem;
}

/* --------------------------------------------------------------------------
   Homepage section navigator (right rail)
   Thin glass track of dots on every viewport. The current section stays
   labelled; other labels appear on hover / focus. On phones it sits a
   little higher so it does not cover WhatsApp or back-to-top.
   -------------------------------------------------------------------------- */
body[data-page="home"] .section-nav {
    position: fixed;
    top: 50%;
    right: max(0.55rem, env(safe-area-inset-right, 0px));
    transform: translateY(calc(-50% - 2.4rem));
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: .55rem .32rem;
    border-radius: 999px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-bottom-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 12px 28px rgba(var(--shadow-tint), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

@media (min-width: 1100px) {
    body[data-page="home"] .section-nav {
        right: 1.15rem;
        transform: translateY(-50%);
        gap: .15rem;
        padding: .85rem .55rem;
    }
}

.section-nav-track {
    position: absolute;
    top: 1.35rem;
    bottom: 1.35rem;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(var(--shadow-tint), 0.12);
    border-radius: 2px;
    pointer-events: none;
}

.section-nav-progress {
    display: block;
    width: 100%;
    height: 0%;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--accent-light), var(--accent-deep));
    box-shadow: 0 0 8px rgba(var(--accent-tint), 0.45);
    transition: height .35s cubic-bezier(.16, 1, .3, 1);
}

.section-nav-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    text-decoration: none;
    color: inherit;
}

.section-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--shadow-tint), 0.28);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(var(--shadow-tint), 0.12);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), background .25s ease, box-shadow .25s ease;
}

.section-nav-label {
    position: absolute;
    right: calc(100% + 12px);
    white-space: nowrap;
    padding: .28rem .65rem;
    border-radius: 8px;
    background: rgba(16, 22, 44, 0.92);
    color: #fff;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    box-shadow: 0 8px 18px rgba(var(--shadow-tint), 0.28);
    transition: opacity .22s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}

.section-nav-item.is-active .section-nav-dot,
.section-nav-item:hover .section-nav-dot,
.section-nav-item:focus-visible .section-nav-dot {
    background: var(--accent);
    transform: scale(1.45);
    box-shadow: 0 0 0 4px rgba(var(--accent-tint), 0.22), 0 4px 10px rgba(var(--accent-tint), 0.35);
}

.section-nav-item.is-active .section-nav-label,
.section-nav-item:hover .section-nav-label,
.section-nav-item:focus-visible .section-nav-label {
    opacity: 1;
    transform: none;
}

.section-nav-item.is-active .section-nav-label {
    background: var(--brand-gradient);
}

.section-nav-item:active .section-nav-dot {
    transform: scale(1.25);
}

@media (max-width: 1099px) {
    /* Leave a strip for the rail so copy does not sit underneath it. */
    body[data-page="home"] section:not(.hero-gsap),
    body[data-page="home"] .cta-band {
        padding-right: calc(var(--page-gutter, 1.25rem) + 1.85rem) !important;
    }

    .section-nav-item {
        width: 18px;
        height: 18px;
        touch-action: manipulation;
    }

    .section-nav-dot {
        width: 6px;
        height: 6px;
    }

    .section-nav-track {
        top: 0.95rem;
        bottom: 0.95rem;
        width: 1.5px;
    }

    /* Phones have no hover: only the current section shows a label. */
    .section-nav-item .section-nav-label {
        font-size: .62rem;
        padding: .22rem .5rem;
        right: calc(100% + 8px);
    }

    .section-nav-item:not(.is-active):not(:focus-visible) .section-nav-label {
        opacity: 0;
        transform: translateX(8px);
    }
}

@media (max-width: 640px) {
    body[data-page="home"] .section-nav {
        right: max(0.35rem, env(safe-area-inset-right, 0px));
        padding: .42rem .26rem;
    }

    .section-nav-item {
        width: 16px;
        height: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-nav-progress,
    .section-nav-dot,
    .section-nav-label {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   DaisyUI-compatible loading ring + page / button loaders
   Classes match: loading loading-ring loading-xl
   -------------------------------------------------------------------------- */

.loading {
    pointer-events: none;
    display: inline-block;
    aspect-ratio: 1 / 1;
    width: 1.5rem;
    background-color: currentColor;
    color: var(--accent);
    vertical-align: middle;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--loading-spinner);
    mask-image: var(--loading-spinner);
    animation: loading 1s linear infinite;
}

.loading-spinner {
    --loading-spinner: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
}

.loading-dots {
    --loading-spinner: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.2;0.5;1' dur='1s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.2;0.5;1' dur='1s' repeatCount='indefinite' begin='0.2s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.2;0.5;1' dur='1s' repeatCount='indefinite' begin='0.4s'/%3E%3C/circle%3E%3C/svg%3E");
}

.loading-ring {
    --loading-spinner: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='%23000'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='4'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
}

.loading-ball {
    --loading-spinner: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='0'%3E%3Canimate attributeName='r' values='0; 11; 0' dur='1.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
}

.loading-bars {
    --loading-spinner: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' dur='1s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='height' values='22;14;22' dur='1s' repeatCount='indefinite' begin='0s'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' dur='1s' repeatCount='indefinite' begin='0.15s'/%3E%3Canimate attributeName='height' values='22;14;22' dur='1s' repeatCount='indefinite' begin='0.15s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' dur='1s' repeatCount='indefinite' begin='0.3s'/%3E%3Canimate attributeName='height' values='22;14;22' dur='1s' repeatCount='indefinite' begin='0.3s'/%3E%3C/rect%3E%3C/svg%3E");
}

.loading-xs { width: 1rem; }
.loading-sm { width: 1.25rem; }
.loading-md { width: 1.5rem; }
.loading-lg { width: 2rem; }
.loading-xl { width: 2.5rem; }

@keyframes loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ring SVG already animates — skip extra rotate so it stays Daisy-like */
.loading-ring,
.loading-dots,
.loading-bars,
.loading-ball {
    animation: none;
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    background: rgba(255, 252, 248, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--accent);
    transition: opacity .35s ease, visibility .35s ease;
}

.page-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-text {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.btn-loading {
    position: relative;
    pointer-events: none;
}

.btn-loading > *:not(.btn-loader) {
    visibility: hidden;
}

.btn-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.btn-loader .loading {
    color: #fff;
}

.footer-form .btn-loader .loading {
    width: 1.15rem;
}

.form-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-deep);
}

.form-status .loading {
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .loading {
        animation: none;
    }

    .page-loader {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Products page: NLite Kids / Teen / Adult
   -------------------------------------------------------------------------- */

.family-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.25rem;
    max-width: 1120px;
    margin: 0 auto;
}

.family-card.is-live {
    grid-row: 1 / span 2;
}

.family-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(var(--shadow-tint), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

.family-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(var(--shadow-tint), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.family-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.family-card.is-live img {
    height: 100%;
    min-height: 280px;
    flex: 1;
}

.family-card > div {
    padding: 1.25rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.family-card h3 {
    font-size: 1.35rem;
    letter-spacing: -.02em;
}

.family-card p {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0;
}

.product-band {
    position: relative;
    overflow: hidden;
    padding: 5.5rem var(--page-gutter) 5rem;
}

.product-band-head,
.product-split,
.game-catalog,
.product-band .programs-grid,
.kids-flow,
.product-cta-row,
.product-subhead,
.product-lede {
    position: relative;
    z-index: 1;
}

.product-band-head {
    max-width: 720px;
    margin: 0 auto 2.75rem;
}

.product-band-head h2 {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    letter-spacing: -.02em;
    margin: .85rem 0 1rem;
    font-weight: 650;
}

.product-band-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.product-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto 2.5rem;
}

.product-split h3 {
    font-size: 1.45rem;
    margin-bottom: .7rem;
}

.product-split > div > p {
    color: var(--muted);
    line-height: 1.7;
    max-width: 54ch;
    margin-bottom: 1.1rem;
}

.product-photo {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 16px 40px rgba(var(--shadow-tint), 0.16);
}

.product-photo img,
.showcase-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.showcase-visual {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(var(--shadow-tint), 0.16);
}

.showcase-inner.flip {
    direction: rtl;
}

.showcase-inner.flip > * {
    direction: ltr;
}

.game-catalog {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem 1.25rem;
    max-width: 1120px;
    margin: 0 auto 3rem;
}

.game-row {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .85rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(120, 135, 180, 0.16);
    min-width: 0;
}

.game-row h3 {
    font-size: 1rem;
    font-family: var(--font-body);
    font-weight: 700;
}

.game-row p {
    margin: 0;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.45;
}

.product-subhead {
    max-width: 1120px;
    margin: 0 auto .5rem;
    font-size: 1.45rem;
}

.product-lede {
    max-width: 1120px;
    margin: 0 auto 1.5rem;
    color: var(--muted);
    line-height: 1.65;
}

.product-band .programs-grid {
    max-width: 1120px;
    margin: 0 auto 3rem;
}

.kids-flow {
    max-width: 1120px;
    margin: 0 auto 2.5rem;
}

.product-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    max-width: 1120px;
    margin: 0 auto;
}

.product-note {
    margin-top: 1.1rem;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.6;
    max-width: 48ch;
}

.showcase-copy .level-badge {
    display: inline-flex;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .family-grid,
    .family-card.is-live,
    .product-split,
    .game-catalog,
    .showcase-inner.flip {
        grid-template-columns: 1fr;
        grid-row: auto;
        direction: ltr;
    }

    .family-card.is-live {
        grid-row: auto;
    }

    .family-card.is-live img {
        height: 200px;
        min-height: 0;
        flex: none;
    }

    .product-cta-row {
        flex-direction: column;
        align-items: stretch;
    }

    .product-cta-row .btn {
        text-align: center;
        justify-content: center;
    }
}