/* ============ Fun With Learning — marketing site ============ */

:root {
    --orange: #F58C00;
    --orange-bright: #F69A06;
    --orange-deep: #d97a00;
    --purple: #843D8C;
    --purple-bright: #8E2DE2;
    --grass: #5cb52d;
    --grass-deep: #3e8f1d;
    --ink: #3a3a3a;
    --ink-soft: #5c5c5c;
    --cream: #fff8ef;
    --white: #ffffff;
    --radius: 22px;
    --shadow: 0 10px 30px rgba(60, 30, 90, .12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--purple);
    color: #fff;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 0 0 14px 0;
}

.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: 2px;
    border-radius: 4px;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
}

h1, h2, h3, .free-pill, .btn, .section-kicker, .level-chip {
    font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
}

h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 .6rem;
    color: var(--ink);
}

.wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.lead {
    font-size: 1.15rem;
    color: var(--ink-soft);
    max-width: 760px;
}

section { padding: 72px 0; position: relative; }

section > .wrap { position: relative; z-index: 1; }

/* decorative parallax layer */
.deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.deco-item {
    position: absolute;
    display: block;
    opacity: .65;
    filter: drop-shadow(0 6px 14px rgba(60, 30, 90, .25));
    will-change: transform;
}

.hero .deco-item { opacity: .9; }

/* idle drift on the inner graphic (scroll parallax owns the wrapper transform) */
.deco-item > svg, .deco-item > img {
    display: block;
    animation: deco-drift 5.5s ease-in-out infinite alternate;
}

.deco-item:nth-child(2) > svg, .deco-item:nth-child(2) > img { animation-duration: 7s; animation-delay: -2.5s; }
.deco-item:nth-child(3) > svg, .deco-item:nth-child(3) > img { animation-duration: 8.5s; animation-delay: -5s; }
.deco-item:nth-child(4) > svg, .deco-item:nth-child(4) > img { animation-duration: 6.2s; animation-delay: -1.2s; }

@keyframes deco-drift {
    from { transform: translateY(-9px) rotate(-5deg); }
    to { transform: translateY(11px) rotate(6deg); }
}

.section-kicker {
    display: inline-block;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange);
    background: rgba(245, 140, 0, .12);
    border-radius: 999px;
    padding: 4px 16px;
    margin-bottom: 12px;
}

.nowrap { white-space: nowrap; }

/* ---------- header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.brand img { height: 44px; display: block; }

.main-nav {
    display: flex;
    gap: 22px;
    margin-left: auto;
}

.main-nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: .98rem;
}

.main-nav a:hover { color: var(--orange); }

.btn {
    display: inline-block;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
}

.btn-cta {
    background: linear-gradient(135deg, var(--orange-bright), var(--orange-deep));
    color: #fff;
    padding: 10px 26px;
    font-size: 1.02rem;
    box-shadow: 0 6px 18px rgba(245, 140, 0, .4);
    transition: transform .15s ease;
}

.btn-cta:hover { transform: translateY(-2px) scale(1.03); }

/* ---------- hamburger toggle + mobile menu ---------- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    margin-left: 12px;
    background: rgba(132, 61, 140, .08);
    border: 2px solid rgba(132, 61, 140, .22);
    border-radius: 12px;
    cursor: pointer;
}

.nav-toggle-bar {
    display: block;
    height: 3px;
    width: 100%;
    border-radius: 2px;
    background: var(--purple);
    transition: transform .25s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
    display: none;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 12px 24px rgba(60, 30, 90, .15);
    padding: 8px 0 14px;
}

/* only ever shown on mobile, and only when toggled open (not hidden) */
@media (max-width: 960px) {
    .mobile-menu:not([hidden]) { display: flex; }
}

.mobile-menu a {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.mobile-menu a:hover, .mobile-menu a:focus { background: var(--cream); color: var(--orange-deep); }

.mobile-menu .mobile-menu-help { color: var(--purple); }

.mobile-menu .mobile-menu-cta {
    margin: 14px 24px 0;
    text-align: center;
    color: #fff;
    border-bottom: none;
}

/* ---------- hero ---------- */
.hero {
    position: relative;
    padding: 84px 0 96px;
    background:
        linear-gradient(rgba(20, 40, 60, .55), rgba(40, 20, 70, .6)),
        url('/img/brand/headerBg.png') center / cover no-repeat;
    color: #fff;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    align-items: center;
}

.hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    line-height: 1.04;
    margin: .4rem 0 .6rem;
    text-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}

.hero-sub {
    font-size: 1.25rem;
    max-width: 34rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.free-pill {
    display: inline-block;
    background: var(--grass);
    color: #fff;
    font-weight: 700;
    padding: 7px 20px;
    border-radius: 999px;
    font-size: 1rem;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .25);
}

.store-badges {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 22px;
    flex-wrap: wrap;
}

.store-badges img { height: 52px; display: block; border-radius: 10px; }

.hero-note {
    margin-top: 16px;
    font-size: .95rem;
    opacity: .92;
}

.hero-art { position: relative; text-align: center; }

.hero-art .device {
    width: 100%;
    max-width: 420px;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45));
}

.hero-art .mascot {
    position: absolute;
    width: 150px;
    right: -10px;
    bottom: -44px;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .4));
    animation: bob 3.4s ease-in-out infinite;
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------- download ---------- */
.download { padding: 48px 0; background: #fff; }

.download-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 36px;
    align-items: center;
    background: var(--cream);
    border: 2px solid rgba(245, 140, 0, .35);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px 40px;
}

.app-icon {
    width: 110px;
    border-radius: 24px;
    box-shadow: 0 8px 22px rgba(245, 140, 0, .35);
}

.download-copy h2 { margin-top: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); }

.download-copy p { margin: 6px 0 0; color: var(--ink-soft); }

.download-copy .store-badges { margin-top: 18px; }

.qr-pair { display: flex; gap: 22px; }

.qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #fff;
    border-radius: 14px;
    padding: 12px 14px 8px;
    box-shadow: var(--shadow);
}

.qr img { width: 108px; height: 108px; }

.qr span { font-size: .82rem; font-weight: 700; color: var(--ink-soft); }

/* ---------- tired / empathy ---------- */
.tired { background: var(--cream); text-align: center; }

.tired .lead { margin: 0 auto 36px; }

.tired-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 880px;
    margin: 0 auto;
    text-align: left;
}

.tired-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 28px 32px;
    box-shadow: var(--shadow);
    border-top: 6px solid #c9c9c9;
}

.tired-card.happy { border-top-color: var(--orange); }

.tired-card h3 { margin: 0 0 12px; font-size: 1.25rem; }

.tired-card ul { margin: 0; padding-left: 20px; }

.tired-card li { margin: 8px 0; }

.tired-card.happy li { font-weight: 600; }

.tired-footer {
    margin: 36px auto 0;
    font-size: 1.15rem;
    max-width: 640px;
}

/* ---------- video differentiator ---------- */
.video-section {
    background: linear-gradient(135deg, #5b1670, var(--purple) 55%, var(--purple-bright));
    color: #fff;
    text-align: center;
}

.video-section h2 { color: #fff; }

.video-section .lead { color: rgba(255, 255, 255, .88); margin: 0 auto 42px; }

.video-section .section-kicker {
    color: #ffd86b;
    background: rgba(255, 255, 255, .14);
}

.video-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.video-card {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius);
    padding: 30px 26px;
    transition: transform .2s ease, background .2s ease;
}

.video-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .16); }

.video-card img, .video-svg { height: 110px; width: auto; object-fit: contain; }

.video-card h3 { font-size: 1.35rem; margin: 14px 0 8px; }

.video-card p { color: rgba(255, 255, 255, .88); margin: 0; }

/* ---------- video gallery ---------- */
.video-gallery { margin-top: 56px; }

.gallery-title {
    font-size: 1.3rem;
    color: #ffd86b;
    margin: 0 0 24px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.gallery-grid figure {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    transition: transform .2s ease;
}

.gallery-grid figure:hover { transform: translateY(-5px) scale(1.02); }

.gallery-grid img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.gallery-grid figcaption {
    padding: 10px 14px;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    text-align: left;
}

.cast-line {
    margin: 34px auto 0;
    max-width: 760px;
    color: rgba(255, 255, 255, .92);
    font-size: 1.08rem;
}

/* ---------- math without fear ---------- */
.nofear { background: var(--cream); text-align: center; }

.nofear .lead { margin: 0 auto 40px; }

.research-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}

.research-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 28px;
    border-top: 6px solid var(--grass);
}

.research-card h3 { margin: 0 0 10px; font-size: 1.15rem; color: var(--purple); }

.research-card p { font-size: .95rem; color: var(--ink-soft); margin: 0 0 10px; }

.research-cite { font-size: .85rem !important; }

.research-cite a { color: var(--purple); font-weight: 700; }

/* ---------- new math decoded ---------- */
.newmath { text-align: center; }

.newmath .lead { margin: 0 auto 40px; }

.method-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.method-card {
    background: var(--cream);
    border-radius: var(--radius);
    padding: 26px 22px;
    transition: transform .2s ease;
}

.method-card:hover { transform: translateY(-6px); }

.method-card h3 { font-size: 1.08rem; margin: 10px 0 8px; color: var(--purple); }

.method-card p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

.newmath-note {
    margin: 36px auto 0;
    max-width: 720px;
    color: var(--ink-soft);
}

/* ---------- features ---------- */
.features { text-align: center; }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.feature-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 26px 20px;
    box-shadow: var(--shadow);
    transition: transform .2s ease;
}

.feature-card:hover { transform: translateY(-6px); }

.feature-card img,
.feature-svg {
    height: 84px;
    width: auto;
    object-fit: contain;
    margin-bottom: 6px;
}

.feature-card h3 { font-size: 1.12rem; margin: 8px 0 6px; color: var(--purple); }

.feature-card p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

.feature-card .feature-detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(132, 61, 140, .25);
    font-size: .84rem;
    font-weight: 700;
    color: #a85e00; /* 4.6:1 on white for WCAG AA */
}

/* ---------- worlds ---------- */
.worlds {
    background: var(--cream);
    text-align: center;
}

.worlds .lead { margin: 0 auto 40px; }

.world-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.world img {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(60, 30, 90, .25);
    border: 5px solid #fff;
    transition: transform .2s ease;
}

.world:hover img { transform: scale(1.07) rotate(2deg); }

.world h3 { font-size: 1.08rem; margin: 14px 0 2px; color: var(--ink); }

.world p { margin: 0; color: #a85e00; font-weight: 700; }

.world .world-blurb {
    margin-top: 6px;
    font-size: .84rem;
    font-weight: 400;
    color: var(--ink-soft);
    line-height: 1.45;
}

.worlds-mechanics {
    margin: 36px auto 0;
    max-width: 720px;
    color: var(--ink-soft);
    font-size: 1.02rem;
}

.levels {
    margin-top: 44px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.level-chip {
    background: #fff;
    border-radius: 999px;
    padding: 9px 22px;
    font-weight: 700;
    box-shadow: var(--shadow);
}

.level-chip.rookie { color: var(--grass-deep); }
.level-chip.hotshot { color: var(--orange-deep); }
.level-chip.rockstar { color: var(--purple); }

/* ---------- splits ---------- */
.split-inner {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
    align-items: center;
}

.split-img img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.split .check-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}

.split .check-list li {
    padding-left: 34px;
    position: relative;
    margin: 12px 0;
    font-weight: 600;
}

.split .check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -1px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--grass);
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.educators { background: var(--cream); }

/* ---------- anywhere strip ---------- */
.anywhere { text-align: center; }

.photo-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 32px;
}

.photo-strip img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .2s ease;
}

.photo-strip img:hover { transform: scale(1.04); }

/* ---------- FAQ ---------- */
.faq { background: var(--cream); }

.faq .wrap { max-width: 820px; }

.faq h2 { text-align: center; }

.faq .section-kicker { display: table; margin: 0 auto 12px; }

.faq-list { margin-top: 36px; }

.faq-list details {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    padding: 0;
    overflow: hidden;
}

.faq-list summary {
    cursor: pointer;
    list-style: none;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--purple);
    padding: 18px 52px 18px 24px;
    position: relative;
}

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

.faq-list summary::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--orange);
    transition: transform .2s ease;
}

.faq-list details[open] summary::after { content: "–"; }

.faq-list details p {
    margin: 0;
    padding: 0 24px 20px;
    color: var(--ink-soft);
}

/* ---------- CTA banner ---------- */
.cta-banner {
    background: linear-gradient(135deg, var(--orange-bright), var(--orange-deep));
    color: #fff;
    text-align: center;
}

.cta-banner h2 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); }

.cta-banner .lead { color: rgba(255, 255, 255, .94); margin: 0 auto 10px; }

.cta-banner .store-badges { justify-content: center; }

.cta-mascot {
    width: 130px;
    margin-bottom: 8px;
    animation: bob 3.4s ease-in-out infinite;
}

/* ---------- social / instagram ---------- */
.social { text-align: center; padding-bottom: 56px; }

.ig-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin: 34px 0 30px;
}

.ig-tile {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 1;
}

.ig-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.ig-tile:hover img { transform: scale(1.06); }

.ig-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 26px 10px 10px;
    background: linear-gradient(transparent, rgba(20, 5, 25, .85));
    color: #fff;
    font-size: .74rem;
    line-height: 1.35;
    text-align: left;
    opacity: 0;
    transition: opacity .2s ease;
}

.ig-tile:hover .ig-caption { opacity: 1; }

.ig-play {
    position: absolute;
    top: 8px;
    right: 10px;
    color: #fff;
    font-size: .8rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.social-links a.ig-follow {
    background: linear-gradient(45deg, #f09433, #e6683c 30%, #dc2743 55%, #cc2366 75%, #bc1888);
    border: none;
    color: #fff;
}

.social-links a.ig-follow:hover { filter: brightness(1.1); transform: translateY(-2px); }

.social-links {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.social-links a {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    text-decoration: none;
    color: var(--purple);
    background: rgba(132, 61, 140, .1);
    border: 2px solid rgba(132, 61, 140, .25);
    border-radius: 999px;
    padding: 10px 28px;
    transition: all .15s ease;
}

.social-links a:hover {
    background: var(--purple);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- teasers ---------- */
.teasers { padding: 0 0 72px; }

.teaser-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.teaser-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(135deg, var(--cream), #fff);
    border: 2px solid rgba(245, 140, 0, .3);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 32px;
    transition: transform .2s ease, border-color .2s ease;
}

.teaser-card:hover { transform: translateY(-5px); border-color: var(--orange); }

.teaser-card h3 { margin: 0 0 8px; font-size: 1.3rem; color: var(--purple); }

.teaser-card p { margin: 0 0 12px; color: var(--ink-soft); }

.teaser-more { font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--orange-deep); }

/* ---------- about page ---------- */
.about-hero {
    background: linear-gradient(135deg, #4a2058, var(--purple));
    color: #fff;
    text-align: center;
    padding: 64px 0 56px;
}

.about-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 10px 0; }

.about-hero .lead { color: rgba(255, 255, 255, .94); margin: 0 auto; }

.about-hero .section-kicker { color: #ffd86b; background: rgba(255, 255, 255, .14); }

.zimbo-img { text-align: center; }

.zimbo-img img { max-width: 320px; width: 80%; box-shadow: none; }

.about-christin { background: var(--cream); }

.christin-portrait { border-radius: 50% !important; aspect-ratio: 1; object-fit: cover; max-width: 380px; margin: 0 auto; display: block; border: 8px solid #fff; }

.throwback {
    margin: 22px 0;
    padding: 16px 18px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-left: 6px solid var(--orange);
}

.throwback-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.throwback-photos img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 10px;
    filter: saturate(1.05) contrast(1.03);
}

.throwback-cap {
    margin: 12px 0 0 !important;
    font-size: .9rem;
    color: var(--ink-soft);
}

.christin-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.christin-thumbs img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.about-video { text-align: center; }

.about-video .lead { margin: 0 auto 32px; }

.video-embed {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #1a0a22;
}

.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.science-tag {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 700px;
    margin: 28px auto 0;
    text-align: left;
    color: var(--ink-soft);
}

.science-tag img { width: 120px; border-radius: 16px; box-shadow: var(--shadow); flex-shrink: 0; }

.about-pledge { background: var(--cream); text-align: center; }

.pledge-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
    text-align: left;
}

.pledge-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 28px;
    border-top: 6px solid var(--orange);
}

.pledge-card h3 { margin: 0 0 8px; font-size: 1.15rem; }

.pledge-card p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

.about-company .wrap { max-width: 820px; }

/* ---------- contact page ---------- */
.contact-page { padding: 56px 0 80px; }

.contact-page .wrap { max-width: 720px; }

.contact-page h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 8px 0; }

.grownups-note {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--cream);
    border: 2px solid rgba(245, 140, 0, .3);
    border-radius: var(--radius);
    padding: 16px 20px;
    font-size: .95rem;
    color: var(--ink-soft);
}

.grownups-note img { width: 44px; flex-shrink: 0; }

.grownups-note a { color: var(--purple); font-weight: 700; }

.contact-form { margin-top: 28px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-field { margin-bottom: 18px; display: flex; flex-direction: column; }

.form-field label {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--ink);
}

.form-field input, .form-field select, .form-field textarea {
    font: inherit;
    padding: 11px 14px;
    border: 2px solid rgba(132, 61, 140, .25);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
}

.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: 3px solid var(--purple);
    outline-offset: 1px;
    border-color: var(--purple);
}

.form-field span { color: #b3261e; font-size: .85rem; margin-top: 4px; }

.hp-field { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.form-result {
    border-radius: var(--radius);
    padding: 18px 24px;
    margin: 20px 0;
    font-weight: 700;
}

.form-result.ok { background: rgba(92, 181, 45, .15); color: var(--grass-deep); }

.form-result.err { background: rgba(179, 38, 30, .12); color: #b3261e; }

.form-privacy { font-size: .85rem; color: var(--ink-soft); margin-top: 14px; }

.form-privacy a { color: var(--purple); }

/* ---------- social icons ---------- */
.social-icons {
    list-style: none;
    display: flex;
    gap: 14px;
    justify-content: center;
    padding: 0;
    margin: 18px 0 0;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--purple);
    background: rgba(132, 61, 140, .1);
    border: 2px solid rgba(132, 61, 140, .25);
    transition: all .15s ease;
}

.social-icons svg { width: 22px; height: 22px; }

.social-icons a:hover { background: var(--purple); color: #fff; transform: translateY(-3px); }

.site-footer .social-icons a {
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .25);
}

.site-footer .social-icons a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ---------- Zimbo face (interactive) ---------- */
.zimbo-face {
    width: 230px;
    max-width: 60vw;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 14px 26px rgba(60, 30, 90, .22));
    animation: zimbo-bob 3.6s ease-in-out infinite;
}

.zimbo-pupil { transition: transform .08s ease-out; }

@keyframes zimbo-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------- oops / error + maintenance shared ---------- */
.oops-page { display: flex; align-items: center; min-height: 70vh; text-align: center; }

.oops-inner, .maint-inner { max-width: 640px; margin: 0 auto; padding: 48px 24px; }

.oops-zimbo, .maint-zimbo { margin-bottom: 12px; }

.oops-code {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: clamp(2.4rem, 8vw, 4rem);
    line-height: 1;
    margin: 0;
    background: linear-gradient(135deg, var(--orange-bright), var(--purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.oops-page h1, .maint h1 { margin: 6px 0 10px; font-size: clamp(1.5rem, 3.6vw, 2.3rem); }

.oops-page .lead, .maint .lead { margin: 0 auto 26px; }

.oops-ref { font-size: .82rem; color: var(--ink-soft); margin-bottom: 20px; }

.oops-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn.oops-secondary {
    background: rgba(132, 61, 140, .1);
    color: var(--purple);
    border: 2px solid rgba(132, 61, 140, .25);
    padding: 10px 24px;
}

.btn.oops-secondary:hover { background: var(--purple); color: #fff; transform: translateY(-2px); }

/* maintenance is a standalone page */
.maint-body { margin: 0; background: linear-gradient(160deg, var(--cream), #fff 60%); }

.maint {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.maint .zimbo-face { width: 280px; }

/* ---------- footer ---------- */
.site-footer {
    background: #2d1933;
    color: rgba(255, 255, 255, .75);
    padding: 36px 0;
    text-align: center;
}

.footer-logo { height: 40px; margin-bottom: 10px; }

.footer-inner p { margin: 0; font-size: .92rem; }

.footer-badges { justify-content: center; margin: 6px 0 14px; }

.footer-badges img { height: 42px; }

.footer-legal { margin-bottom: 8px !important; }

.footer-legal a { color: rgba(255, 255, 255, .85); }

/* ---------- help callout ---------- */
.help-callout {
    background: linear-gradient(135deg, #4a2058, var(--purple));
    color: #fff;
    padding: 26px 0;
}

.help-callout-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    justify-content: center;
    flex-wrap: wrap;
    text-align: left;
}

.help-callout img { width: 64px; flex-shrink: 0; }

.help-callout p { margin: 0; max-width: 560px; font-size: 1.02rem; }

.btn.help-btn {
    background: #fff;
    color: var(--purple);
    padding: 11px 26px;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
    white-space: nowrap;
}

.btn.help-btn:hover { transform: translateY(-2px); }

/* ---------- help page ---------- */
.help-page { background: #fff; }

.quick-exit {
    position: fixed;
    top: 86px;
    right: 16px;
    z-index: 70;
    background: var(--ink);
    color: #fff;
    text-decoration: none;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    padding: 10px 20px;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}

.quick-exit:hover, .quick-exit:focus { background: #000; }

.help-hero {
    background: linear-gradient(135deg, #4a2058, var(--purple));
    color: #fff;
    text-align: center;
    padding: 64px 0 56px;
}

.help-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 14px 0 10px; }

.help-hero .lead { color: rgba(255, 255, 255, .94); margin: 0 auto; }

.help-mascot { width: 110px; }

.help-exit-note {
    margin: 22px auto 0;
    font-size: .95rem;
    background: rgba(255, 255, 255, .14);
    display: inline-block;
    padding: 8px 20px;
    border-radius: 999px;
}

.help-now { background: var(--cream); }

.help-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 28px;
}

.help-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 28px;
    border-top: 6px solid var(--grass);
}

.help-card.urgent { border-top-color: #c62828; }

.help-card h3 { margin: 0 0 10px; font-size: 1.15rem; }

.help-card p, .help-card li { font-size: .98rem; color: var(--ink-soft); }

.help-card ul { margin: 0; padding-left: 20px; }

.help-card li { margin: 8px 0; }

.help-card a { color: var(--purple); font-weight: 700; }

.state-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 28px;
}

.state-card {
    background: var(--cream);
    border-radius: 14px;
    padding: 14px 18px;
}

.state-card h3 { margin: 0 0 4px; font-size: 1rem; }

.state-card h3 a { color: var(--purple); text-decoration: none; }

.state-card h3 a:hover { text-decoration: underline; }

.state-card p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

.help-source { margin-top: 26px; font-size: .88rem; color: var(--ink-soft); }

.help-world { background: var(--cream); }

.world-list { padding-left: 22px; }

.world-list li { margin: 12px 0; }

.help-grownups { padding-bottom: 80px; }

/* ---------- legal pages ---------- */
.legal-page { padding: 56px 0 80px; }

.legal-page .wrap { max-width: 820px; }

.legal-page h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 4px; }

.legal-date { color: var(--ink-soft); margin-top: 0; }

.legal-page h2 { font-size: 1.35rem; margin-top: 36px; }

.legal-page a { color: var(--purple); }

/* ---------- cookie banner ---------- */
.cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 80;
    max-width: 430px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    border: 2px solid rgba(132, 61, 140, .25);
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.cookie-banner[hidden] { display: none; }

.cookie-mascot { width: 46px; flex-shrink: 0; }

.cookie-text { flex: 1; min-width: 200px; }

.cookie-text p { margin: 0 0 4px; font-size: .92rem; }

.cookie-text a { color: var(--purple); }

.cookie-actions { display: flex; gap: 10px; width: 100%; }

.btn.cookie-accept {
    background: var(--grass);
    color: #fff;
    padding: 9px 20px;
    font-size: .95rem;
}

.btn.cookie-decline {
    background: #eee;
    color: var(--ink);
    padding: 9px 20px;
    font-size: .95rem;
}

.cookie-reopen {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: rgba(255, 255, 255, .85);
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- mobile sticky download bar ---------- */
.sticky-download {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .18);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.sticky-download .sticky-icon { width: 34px; border-radius: 8px; }

.sticky-download .sticky-label {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    color: var(--grass-deep);
}

.sticky-download img { height: 36px; display: block; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
    .main-nav { display: none; }

    .header-cta { display: none; }

    .nav-toggle { display: flex; }

    .download-card { grid-template-columns: 1fr; text-align: center; gap: 22px; }

    .app-icon { margin: 0 auto; }

    .download-copy .store-badges { justify-content: center; }

    .qr-pair { display: none; }

    .ig-grid { grid-template-columns: repeat(3, 1fr); }

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

    .help-cards, .teaser-grid, .pledge-cards { grid-template-columns: 1fr; }

    .christin-thumbs { grid-template-columns: repeat(3, 1fr); }

    .form-row { grid-template-columns: 1fr; }

    .deco-item { display: none; }

    .hero .deco-item, .worlds .deco-item { display: block; opacity: .35; }

    .hero-inner { grid-template-columns: 1fr; text-align: center; }

    .hero-sub { margin-left: auto; margin-right: auto; }

    .store-badges { justify-content: center; }

    .hero-art .mascot { right: 4px; bottom: -30px; width: 110px; }

    .video-cards, .feature-grid, .gallery-grid, .method-grid { grid-template-columns: repeat(2, 1fr); }

    .research-cards { grid-template-columns: 1fr; }

    .world-strip { grid-template-columns: repeat(3, 1fr); }

    .split-inner, .split-inner.reverse { grid-template-columns: 1fr; gap: 28px; }

    .split-inner.reverse .split-img { order: -1; }

    .photo-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    section { padding: 52px 0; }

    .nowrap { white-space: normal; }

    .tired-grid, .video-cards, .feature-grid, .method-grid { grid-template-columns: 1fr; }

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

    .gallery-grid figcaption { font-size: .78rem; padding: 8px 10px; }

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

    .sticky-download { display: flex; }

    body { padding-bottom: 64px; }

    .state-grid { grid-template-columns: 1fr; }

    .cookie-banner { left: 10px; right: 10px; max-width: none; bottom: 74px; }

    .quick-exit { top: auto; bottom: 14px; right: 12px; }

    .world-strip { grid-template-columns: repeat(2, 1fr); }

    .brand img { height: 36px; }

    .header-cta { padding: 8px 18px; font-size: .92rem; }
}