/* Home-page boundaries remain visible in every theme. */
.landing-b2c #main-content > .landing-section {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding-block: clamp(3rem, 6vw, 5rem);
}
.landing-b2c #main-content > .landing-section:nth-of-type(even) {
    background: var(--color-bg-alt);
}
.landing-b2c #main-content > .landing-section::before {
    content: '';
    position: absolute;
    top: -2px;
    left: calc(50% - 28px);
    width: 56px;
    height: 4px;
    border-radius: 4px;
    background: var(--color-primary);
}
.balance-demo {
    border: 1px solid var(--color-border);
    border-radius: 24px;
    background: var(--card-bg);
    padding: clamp(1rem, 2vw, 1.5rem);
    box-shadow: 0 24px 60px -48px var(--color-heading);
}
.balance-demo [hidden] { display: none !important; }
.balance-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
.balance-layout > * { min-width: 0; }
.balance-diagram {
    display: block;
    width: 100%;
    height: auto;
    max-height: 215px;
    color: var(--color-heading);
}
.balance-frame { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.balance-base { fill: var(--color-bg-alt); stroke: currentColor; stroke-width: 3; }
.balance-cube { fill: var(--color-bg-alt); stroke: currentColor; stroke-width: 2; }
.balance-extra { fill: var(--color-primary); stroke: var(--color-heading); stroke-width: 2; }
.balance-unknown { fill: var(--color-heading); }
.balance-x { fill: var(--card-bg); font: 700 24px var(--font-main); text-anchor: middle; }
.balance-group-outline { fill: none; stroke: var(--color-link); stroke-width: 2; stroke-dasharray: 5 5; opacity: 0; }
.balance-question { display: none; }
.balance-demo[data-stage="3"] .balance-example { display: none; }
.balance-demo[data-stage="3"] .balance-question { display: inline; }
.balance-removable { transition: opacity 350ms ease, transform 350ms ease; transform-box: fill-box; transform-origin: center; }
.balance-demo[data-stage="1"] .balance-removable,
.balance-demo[data-stage="2"] .balance-removable,
.balance-demo[data-stage="3"] .balance-removable { opacity: 0; transform: translateY(-18px) scale(0.8); }
.balance-demo[data-stage="2"] .balance-group-outline,
.balance-demo[data-stage="3"] .balance-group-outline { opacity: 1; }
.balance-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.balance-equation {
    margin: 0.7rem 0;
    color: var(--color-heading);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.balance-scene { border-radius: 12px; scroll-margin-block: 6rem; }
.balance-scene h3 { margin-bottom: 0.6rem; font-size: 1.2rem; }
.balance-scene p { color: var(--color-text-muted); }
.balance-talk {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
}
.balance-talk > :not(.balance-coach, .balance-scene) { grid-column: 1 / -1; }
.balance-coach { display: grid; justify-items: center; gap: 0.3rem; width: 84px; }
.balance-coach-name { font-size: 0.8rem; font-weight: 800; color: var(--color-heading); }
.balance-coach .hero-brand-owl-stack { transform-origin: 50% 100%; }
.balance-coach .hero-brand-owl-eyes { z-index: 2; }
.hero-brand-owl-pupils {
    transform: translate(var(--owl-look-x, 0), var(--owl-look-y, 0));
    transition: transform 120ms ease-out;
}
.balance-demo.is-ready .hero-brand-wing-left { animation: hero-wing-left-prototype 1100ms ease-in-out both; }
.balance-demo.is-ready .hero-brand-wing-right { animation: hero-wing-right-prototype 1100ms ease-in-out both; }
.balance-demo[data-stage="1"] .hero-brand-owl-stack,
.balance-demo[data-stage="3"] .hero-brand-owl-stack { animation: balance-owl-hop-a 420ms ease; }
.balance-demo[data-stage="2"] .hero-brand-owl-stack { animation: balance-owl-hop-b 420ms ease; }
.balance-demo[data-outcome="retry"][data-retry-beat="0"] .hero-brand-owl-stack { animation: balance-owl-puzzled-a 700ms ease; }
.balance-demo[data-outcome="retry"][data-retry-beat="1"] .hero-brand-owl-stack { animation: balance-owl-puzzled-b 700ms ease; }
.balance-demo[data-outcome="correct"] .hero-brand-owl-stack { animation: balance-owl-cheer 900ms ease; }
.balance-demo[data-outcome="correct"] .hero-brand-wing-left { animation: hero-wing-left-cheer 1000ms ease-in-out both; }
.balance-demo[data-outcome="correct"] .hero-brand-wing-right { animation: hero-wing-right-cheer 1000ms ease-in-out both; }
@keyframes balance-owl-hop-a { 40% { transform: translateY(-10px); } 70% { transform: translateY(1px); } }
@keyframes balance-owl-hop-b { 40% { transform: translateY(-10px); } 70% { transform: translateY(1px); } }
@keyframes balance-owl-puzzled-a { 25% { transform: rotate(-9deg); } 65% { transform: rotate(7deg); } }
@keyframes balance-owl-puzzled-b { 25% { transform: rotate(-9deg); } 65% { transform: rotate(7deg); } }
@keyframes balance-owl-cheer { 25% { transform: translateY(-16px); } 50% { transform: translateY(1px); } 72% { transform: translateY(-9px); } }
@keyframes hero-wing-left-cheer { 0%, 100% { opacity: 0; } 12%, 88% { opacity: 1; } 12%, 50%, 88% { transform: rotate(-20deg); } 31%, 69% { transform: rotate(14deg); } }
@keyframes hero-wing-right-cheer { 0%, 100% { opacity: 0; } 12%, 88% { opacity: 1; } 12%, 50%, 88% { transform: rotate(20deg); } 31%, 69% { transform: rotate(-14deg); } }
.balance-burst { position: absolute; left: 50%; top: 30%; pointer-events: none; }
.balance-burst i {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--brand-orange);
    opacity: 0;
    --burst-angle: 0deg;
}
.balance-burst i:nth-child(even) { background: var(--brand-cyan); border-radius: 50%; }
.balance-burst i:nth-child(1) { --burst-angle: 0deg; }
.balance-burst i:nth-child(2) { --burst-angle: 36deg; }
.balance-burst i:nth-child(3) { --burst-angle: 72deg; }
.balance-burst i:nth-child(4) { --burst-angle: 108deg; }
.balance-burst i:nth-child(5) { --burst-angle: 144deg; }
.balance-burst i:nth-child(6) { --burst-angle: 180deg; }
.balance-burst i:nth-child(7) { --burst-angle: 216deg; }
.balance-burst i:nth-child(8) { --burst-angle: 252deg; }
.balance-burst i:nth-child(9) { --burst-angle: 288deg; }
.balance-burst i:nth-child(10) { --burst-angle: 324deg; }
.balance-demo[data-outcome="correct"] .balance-burst i { animation: balance-burst 900ms ease-out both; }
@keyframes balance-burst {
    0% { opacity: 1; transform: rotate(var(--burst-angle)) translateY(0) scale(0.5); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--burst-angle)) translateY(-78px) scale(1); }
}
.balance-progress { display: flex; gap: 0.35rem; margin-bottom: 0.9rem; }
.balance-progress i { flex: 1; height: 5px; border-radius: 5px; background: var(--color-border); transition: background 250ms ease; }
.balance-progress i:first-child,
.balance-demo[data-stage="1"] .balance-progress i:nth-child(-n+2),
.balance-demo[data-stage="2"] .balance-progress i:nth-child(-n+3),
.balance-demo[data-stage="3"] .balance-progress i { background: var(--color-primary); }
.role-switch { display: none; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 1.2rem; }
html.js .role-switch { display: flex; }
.role-switch-label { flex-basis: 100%; font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted); }
.role-switch button {
    min-height: 44px;
    padding: 0.4rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--color-heading);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.role-switch button:hover { border-color: var(--color-heading); }
.role-switch button[aria-pressed="true"] { background: var(--brand-orange); border: 2px solid var(--color-heading); color: var(--brand-black); }
[data-role-copy][hidden] { display: none !important; }

.landing-b2c #main-content > .learning-story.landing-section:nth-of-type(n) {
    background: var(--brand-navy);
    --color-heading: #ffffff;
    --color-text-muted: #d6e6f2;
    color: #ffffff;
}
.learning-story .landing-section-header { max-width: 720px; }
.story-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}
.story-device {
    position: sticky;
    top: 6.5rem;
    order: 2;
    display: flex;
    flex-direction: column;
    width: min(100%, 400px);
    height: min(560px, calc(100vh - 8rem));
    justify-self: center;
    overflow: hidden;
    border: 8px solid #012a45;
    border-radius: 34px;
    background: #ffffff;
    color: var(--brand-black);
}
.story-device-top { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; border-bottom: 1px solid #dfe8ee; font-weight: 800; color: var(--brand-navy); }
.story-device-top small { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: #4b5d6a; }
.story-chat { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 0.6rem; min-height: 0; padding: 1rem; overflow: hidden; }
.story-msg { max-width: 86%; margin: 0; padding: 0.65rem 0.85rem; border-radius: 16px; font-size: 0.95rem; line-height: 1.45; }
.story-msg-kid { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--brand-navy); color: #ffffff; }
.story-msg-owl { align-self: flex-start; border-bottom-left-radius: 4px; background: #d9f5fe; color: var(--brand-navy); }
.story-view { padding: 0.8rem 0.9rem; border-radius: 16px; background: #fde8dc; color: #6a2d0d; font-size: 0.92rem; }
.story-view ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.learning-story.is-enhanced [data-from] { display: none; animation: story-in 380ms ease both; }
.learning-story.is-enhanced [data-from][hidden] { display: none !important; }
.learning-story.is-enhanced[data-story-step="1"] [data-from="1"],
.learning-story.is-enhanced[data-story-step="2"] [data-from="1"],
.learning-story.is-enhanced[data-story-step="2"] [data-from="2"],
.learning-story.is-enhanced[data-story-step="3"] [data-from="1"],
.learning-story.is-enhanced[data-story-step="3"] [data-from="2"],
.learning-story.is-enhanced[data-story-step="3"] [data-from="3"],
.learning-story.is-enhanced[data-story-step="4"] [data-from="1"],
.learning-story.is-enhanced[data-story-step="4"] [data-from="2"],
.learning-story.is-enhanced[data-story-step="4"] [data-from="3"],
.learning-story.is-enhanced[data-story-step="4"] [data-from="4"] { display: block; }
@keyframes story-in { from { opacity: 0; transform: translateY(14px); } }
.story-steps { display: grid; }
.story-step { display: flex; flex-direction: column; justify-content: center; min-height: 68vh; padding-block: 1.5rem; }
.story-step-num {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: var(--brand-orange);
    color: var(--brand-black);
    font-weight: 800;
}
.story-step h3 { margin-bottom: 0.6rem; font-size: clamp(1.5rem, 3vw, 2.1rem); color: #ffffff; }
.story-step p { max-width: 30rem; margin: 0; color: #d6e6f2; font-size: 1.05rem; line-height: 1.6; }
[data-theme="contrast"] .landing-b2c #main-content > .learning-story.landing-section:nth-of-type(n) { background: #000000; }
[data-theme="contrast"] .story-device { border-color: #ffffff; }

.bento-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.bento-tile { padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid transparent; border-radius: 26px; }
.bento-tile h3 { margin-bottom: 0.6rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.bento-tile p { margin: 0; line-height: 1.6; }
.bento-tile p + p { margin-top: 0.7rem; }
.bento-wide { grid-column: span 2; }
.bento-full { grid-column: 1 / -1; }
.bento-navy { background: var(--brand-navy); color: #ffffff; }
.bento-navy h3 { color: #ffffff; }
.bento-orange { background: var(--brand-orange); color: var(--brand-black); }
.bento-orange h3 { color: var(--brand-black); }
.bento-cyan { background: #bdeefd; color: var(--brand-navy); }
.bento-cyan h3 { color: var(--brand-navy); }
.bento-plain { border-color: var(--color-border); background: var(--card-bg); }
.bento-example { font-weight: 700; color: var(--color-heading); }
.bento-note { font-size: 0.9rem; color: var(--color-text-muted); }
[data-theme="contrast"] .bento-tile { border-color: #ffffff; background: #000000; color: #ffffff; }
[data-theme="contrast"] .bento-tile h3 { color: #ffff00; }

.cta-band:has(.cta-band-role) { display: block; }
.cta-band-role { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.landing-b2c .latest-blog-card p { display: none; }
.landing-b2c .latest-blog-card > a { display: none; }
.product-preview-figure .hero-view-switch { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.story-chart { display: block; width: 100%; height: auto; margin-top: 0.5rem; border-radius: 8px; }
.hero-demo { min-width: 0; }
.hero-demo-head h2 { margin-bottom: 0.3rem; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.hero-demo-head p { margin-bottom: 0.9rem; color: var(--color-text-muted); font-size: 0.95rem; }
.product-preview-figure { max-width: 980px; margin-inline: auto; }
.balance-controls { display: none; }
.balance-demo.is-ready .balance-controls { display: flex; }
.balance-controls {
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    align-items: center;
}
.balance-demo button { min-height: 44px; max-width: 100%; white-space: normal; }
.balance-demo button:disabled { opacity: 0.65; cursor: default; }
.balance-practice { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
.balance-practice legend { font-weight: 700; color: var(--color-heading); margin-bottom: 0.7rem; }
.balance-answers { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.balance-demo .balance-answer { min-width: 72px; }
.balance-feedback { margin-top: 1rem; padding: 1rem; border: 2px solid var(--color-heading); border-radius: 12px; scroll-margin-block: 6rem; }
.balance-feedback p { margin: 0 0 0.7rem; }
.balance-feedback p:last-child { margin-bottom: 0; }
.balance-demo .balance-feedback button { color: var(--color-heading); background: var(--card-bg); border: 1px solid currentColor; }
.balance-demo .btn-outline { color: var(--color-heading); border-color: var(--color-heading); background: var(--card-bg); }
.balance-demo .btn-outline:hover { background: var(--color-heading); color: var(--card-bg); }
.balance-demo .btn-primary { color: var(--brand-black); background: var(--color-primary); }
.balance-note { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 1.2rem; line-height: 1.6; }
.balance-school-link { display: inline-block; margin-top: 0.6rem; color: var(--color-link); }
.balance-school-link:hover { color: var(--color-link); }
.balance-success-cta { display: flex; width: fit-content; max-width: 100%; margin-top: 0.9rem; }
[data-theme="contrast"] .balance-demo { border: 2px solid white; box-shadow: none; }
@media (max-width: 900px) {
    .story-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .story-device {
        top: 5rem;
        z-index: 2;
        order: 0;
        width: 100%;
        height: 42vh;
        border-width: 5px;
        border-radius: 22px;
    }
    .story-msg { font-size: 0.85rem; }
    .story-chart { max-height: 84px; object-fit: contain; background: #ffffff; }
    .story-step { min-height: 62vh; }
    .bento-grid { grid-template-columns: minmax(0, 1fr); }
    .bento-wide { grid-column: auto; }
    .cta-band-role { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) and (max-height: 600px) {
    .story-device { position: static; height: 300px; }
}
@media (max-width: 700px) {
    .balance-coach { width: 66px; }
    .balance-controls { align-items: stretch; }
    .balance-controls > button { flex: 1 1 180px; }
}
@media (prefers-reduced-motion: reduce) {
    .balance-demo *, .balance-demo *::before, .balance-demo *::after {
        animation: none !important;
        transition: none !important;
    }
}