/* Physical starter offer, used only by /kids. */
.kbh-bundle { background: #fff; }
.kbh-bundle-books { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; list-style:none; padding:0; margin:40px 0; }
.kbh-bundle-books li { min-width:0; position:relative; text-align:center; }
.kbh-bundle-books img { width:100%; max-width:175px; height:auto; aspect-ratio:5/8; object-fit:contain; border-radius:4px; box-shadow:0 8px 20px #142d4220; }
.kbh-bundle-books img.kbh-bundle-mockup { max-width:200px; aspect-ratio:4/5; border-radius:0; box-shadow:none; filter:drop-shadow(0 8px 8px #142d421c); }
.kbh-bundle-books h3 { font-size:16px; margin-top:10px; }
.kbh-bundle-letter { display:block; color:#0174B1; font-weight:800; margin-top:12px; }
.kbh-bundle-bottom { display:flex; align-items:center; gap:32px; padding:28px; background:#F6FBFF; border:1px solid #dbeaf4; border-radius:20px; }
.kbh-bundle-bottom>div { flex:1; }
.kbh-bundle-bottom>.kbh-btn { flex-shrink:0; }
.kbh-bundle-terms { font-size:14px; line-height:1.6; color:#4A5560; }
.kbh-bundle-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding-left:22px; margin-top:36px; }
.kbh-bundle-steps strong,.kbh-bundle-steps span { display:block; }
.kbh-bundle-steps span { color:#4A5560; margin-top:8px; }
.kbh-bundle-status,.kbh-bundle-admin { padding:24px 32px; }
.kbh-bundle-order { padding:20px; margin:16px 0; border:1px solid #E0E0E0; border-radius:12px; background:#fff; }
.kbh-bundle-order label { display:block; margin:12px 0; }
.kbh-bundle-order input { display:block; width:100%; max-width:420px; padding:10px; border:1px solid #757575; border-radius:6px; }
.kbh-btn:disabled { opacity:.65; cursor:wait; }
@media(max-width:720px) {
    .kbh-bundle-books { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
    .kbh-bundle-books li:last-child { grid-column:1/-1; max-width:175px; justify-self:center; }
    .kbh-bundle-bottom { flex-direction:column; align-items:stretch; padding:20px; }
    .kbh-bundle-steps { grid-template-columns:1fr; gap:20px; }
}

/* September 20 Claude Design adaptation. The host owns navigation and themes. */
.kbh-shell {
    --kbh-page: #fff8ee; --kbh-tint: #fbf0de; --kbh-surface: #fff;
    --kbh-ink: #222; --kbh-muted: #475569; --kbh-line: #eadcc4;
    --kbh-blue: #0174b1; --kbh-blue-soft: #eaf7fe; --kbh-button: #0174b1; --kbh-button-ink: #fff;
    --kbh-orange: #ffaa00; --kbh-orange-ink: #1f1503;
    background: var(--kbh-page); color: var(--kbh-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px; line-height: 1.6; padding-bottom: 32px;
}
.kbh-shell *, .kbh-shell *::before, .kbh-shell *::after { box-sizing: border-box; }
.kbh-shell h1, .kbh-shell h2, .kbh-shell h3 { color: var(--kbh-ink); font-weight: 750; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 16px; text-wrap: balance; }
.kbh-shell h1 { font-size: clamp(34px, 4.6vw, 56px); }
.kbh-shell h2 { font-size: clamp(28px, 3.3vw, 38px); }
.kbh-shell h3 { font-size: 24px; }
.kbh-shell p { margin: 0 0 18px; color: var(--kbh-muted); }
.kbh-shell a { color: var(--kbh-blue); text-underline-offset: 4px; }
.kbh-shell img { max-width: 100%; }
.kbh-shell :focus-visible { outline: 3px solid var(--kbh-blue); outline-offset: 5px; }
.kbh-wrap { max-width: 1224px; padding-inline: 32px; margin-inline: auto; }
.kbh-section { padding-block: clamp(40px, 5vw, 76px); }
.kbh-tinted { background: var(--kbh-tint); border-block: 1px solid var(--kbh-line); }
.kbh-shell .kbh-eyebrow { color: var(--kbh-blue); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.kbh-pep-callout { margin-top:16px; padding:12px 16px; border:1px solid var(--kbh-line); border-radius:12px; background:var(--kbh-surface); font-size:14px; }
.kbh-pep-callout summary { cursor:pointer; color:var(--kbh-ink); }
.kbh-pep-see,.kbh-pep-hide { font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.kbh-pep-hide,.kbh-pep-callout[open] .kbh-pep-see { display:none; }
.kbh-pep-callout[open] .kbh-pep-hide { display:inline; }
.kbh-shell .kbh-pep-callout p { margin:12px 0 0; }
.kbh-shell .kbh-intro { max-width: 65ch; font-size: 18px; margin-bottom: 30px; }
.kbh-shell .kbh-lead { font-size: 20px; }
.kbh-shell .kbh-fine { font-size: 14px; line-height: 1.6; margin-top: 18px; }
.kbh-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kbh-shell .kbh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 24px; border: 2px solid transparent; border-radius: 999px; background: var(--kbh-button); color: var(--kbh-button-ink); font: inherit; font-weight: 750; text-align: center; text-decoration: none; cursor: pointer; line-height: 1.35; }
.kbh-shell .kbh-btn:hover { filter: brightness(.94); }
.kbh-shell .kbh-btn-paid { background: var(--kbh-orange); color: var(--kbh-orange-ink); }
.kbh-shell .kbh-btn-ghost { border-color: var(--kbh-line); background: var(--kbh-surface); color: var(--kbh-ink); }
.kbh-shell .kbh-btn:disabled { cursor: wait; opacity: .65; }
.kbh-hero { padding-top: calc(104px + var(--topnav-inset-top, 0px)); }
.kbh-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.kbh-hero-copy { min-width: 0; }
.kbh-hero-art { margin: 0; min-width: 0; padding: 14px; border: 1px solid var(--kbh-line); border-radius: 28px; background: var(--kbh-surface); box-shadow: 0 16px 40px #142d4212; }
.kbh-banner { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: 68% center; border-radius: 18px; }
.kbh-hero-art figcaption { padding: 20px 10px 8px; display: flex; flex-direction: column; gap: 5px; }
.kbh-hero-art figcaption strong { font-size: 22px; }
.kbh-hero-art figcaption > span:last-child { font-size: 15px; color: var(--kbh-muted); }
.kbh-badge { align-self: flex-start; border-radius: 999px; background: var(--kbh-blue-soft); color: var(--kbh-blue); padding: 4px 12px; font-size: 13px; font-weight: 750; }
.kbh-cover-row { display: flex; justify-content: center; gap: 10px; padding: 18px 8px 6px; }
.kbh-cover-row img { width: min(16%, 66px); height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 4px 10px #142d4220; }
.kbh-activity-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; max-width:1000px; margin:0 auto 12px; }
.kbh-activity-picker button { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:48px; border:2px solid var(--kbh-line); border-radius:12px; padding:10px 8px; background:var(--kbh-surface); color:var(--kbh-ink); font:inherit; text-align:center; cursor:pointer; }
.kbh-activity-picker button:hover { border-color:var(--kbh-orange); }
.kbh-activity-picker button[aria-pressed="true"] { background:var(--kbh-orange); color:var(--kbh-orange-ink); border-color:var(--kbh-orange); }
.kbh-activity-icon { flex-shrink:0; font-size:18px; }
.kbh-activity-label { font-weight:800; font-size:14px; line-height:1.3; }
@media (min-width:721px) and (max-width:1000px) { .kbh-activity-picker { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.kbh-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.kbh-pathcard { padding: 32px; border: 1px solid var(--kbh-line); border-radius: 24px; background: var(--kbh-surface); }
.kbh-pathcard .kbh-path-title { font-size: 14px; color: var(--kbh-blue); font-weight: 700; }
.kbh-path-symbol { display: block; color: var(--kbh-blue); font-size: 44px; font-weight: 800; height: 92px; }
.kbh-sam-cover { display: block; object-fit: contain; height: 80px; width: auto; margin-bottom: 12px; border-radius: 4px; }
.kbh-shell .kbh-free-note { color: var(--kbh-ink); border-left: 3px solid var(--kbh-blue); padding-left: 14px; font-size: 15px; }
.kbh-premium { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: center; }
.kbh-faq { max-width: 900px; }
.kbh-faq details { border-bottom: 1px solid var(--kbh-line); padding: 20px 0; }
.kbh-faq summary { color: var(--kbh-ink); font-size: 18px; font-weight: 700; cursor: pointer; padding-right: 10px; }
.kbh-faq details p { margin: 16px 0 0; }
.kbh-closing { background:var(--kbh-page); }
.kbh-closing-card { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:48px; padding:48px; border:1px solid #e5c98e; border-radius:32px; background:linear-gradient(125deg,#fff0cc,#fff8ee); }
.kbh-shell .kbh-closing .kbh-eyebrow { color:#79520c; }
.kbh-closing-benefits { display:grid; gap:12px; padding-left:22px; margin:24px 0 0; color:var(--kbh-ink); }
.kbh-closing-benefits li::marker { color:#a36500; }
.kbh-closing-offer { padding:32px; border:1px solid var(--kbh-line); border-radius:24px; background:var(--kbh-surface); text-align:center; box-shadow:0 12px 30px #79520c12; }
.kbh-shell .kbh-closing-plan { font-weight:750; color:var(--kbh-ink); }
.kbh-shell .kbh-closing-price { color:var(--kbh-ink); font-size:56px; font-weight:800; line-height:1.1; letter-spacing:-.04em; }
.kbh-closing-price span { font-size:18px; font-weight:600; letter-spacing:0; }
.kbh-closing-offer .kbh-btn { width:100%; }
.kbh-closing-offer .kbh-fine { margin-bottom:0; }
body.dark-mode .kbh-closing-card,html.dark-mode .kbh-closing-card { background:linear-gradient(125deg,#322917,#201e1a); border-color:#6b5532; }
body.dark-mode .kbh-shell .kbh-closing .kbh-eyebrow,html.dark-mode .kbh-shell .kbh-closing .kbh-eyebrow { color:#ffce76; }
.kbh-shell .kbh-bundle { background: var(--kbh-tint); border-block: 1px solid var(--kbh-line); }
.kbh-shell .kbh-bundle-bottom, .kbh-shell .kbh-bundle-order { background: var(--kbh-surface); border-color: var(--kbh-line); }
.kbh-shell .kbh-bundle-letter { color: var(--kbh-blue); }
.kbh-shell .kbh-bundle-steps span, .kbh-shell .kbh-bundle-terms { color: var(--kbh-muted); }
.kbh-shell .kbh-bundle-bottom .kbh-btn { background: var(--kbh-orange); color: var(--kbh-orange-ink); }
.kbh-center { max-width: 720px; text-align: center; margin-inline: auto; }
.kbh-bundle-books h3 { font-size: 16px; letter-spacing: 0; }

html.dark-mode .kbh-shell, body.dark-mode .kbh-shell {
    --kbh-page: #0f1620; --kbh-tint: #141e2a; --kbh-surface: #1b2330;
    --kbh-ink: #f1f5f9; --kbh-muted: #cbd3dc; --kbh-line: #3b495b;
    --kbh-blue: #8fdcff; --kbh-blue-soft: #12283a; --kbh-button: #8fdcff; --kbh-button-ink: #0b1520;
    --kbh-orange: #ffbe33;
}
@media (max-width: 980px) {
    .kbh-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .kbh-hero-art { max-width: 680px; }
    .kbh-closing-card { gap:28px; padding:32px; }
}
@media (max-width: 720px) {
    .kbh-wrap { padding-inline:20px; }
    .kbh-hero { padding-top:calc(88px + var(--topnav-inset-top, 0px)); }
    .kbh-paths, .kbh-premium { grid-template-columns:1fr; }
    .kbh-pathcard { padding:24px; }
    .kbh-activity-picker { gap: 8px; }
    .kbh-activity-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .kbh-closing-card { grid-template-columns:1fr; padding:24px; gap:24px; border-radius:24px; }
    .kbh-closing-offer { padding:24px 18px; }
    .kbh-bundle-status, .kbh-bundle-admin { padding: 24px 20px; }
}
@media (max-width: 380px) {
    .kbh-wrap { padding-inline: 16px; }
    .kbh-actions { flex-direction: column; }
    .kbh-shell .kbh-btn { padding-inline: 18px; font-size: 15px; }
    .kbh-pathcard { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .kbh-shell *, .kbh-shell *::before, .kbh-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The real players stay in the landing page; their own game styles remain authoritative. */
.kbh-story-player { position:relative; background:#10212e; border-radius:24px; overflow:hidden; max-width:1000px; margin:32px auto 0; aspect-ratio:16/9; }
.kbh-story-player>img,.kbh-story-player>video { display:block; width:100%; height:100%; object-fit:contain; }
.kbh-story-player>img { object-fit:cover; }
.kbh-video-start { position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(transparent,#10212e66); }
.kbh-video-start .kbh-btn { font-size:20px; box-shadow:0 6px 24px #0005; }
.kbh-video-caption { max-width:1000px; margin:14px auto 0!important; font-weight:700; }
.kbh-video-caption span { float:right; font-weight:400; }
.kbh-video-error { max-width:1000px; margin:16px auto!important; }
.kbh-try-heading { text-align:center; margin-top:48px; }
.kbh-real-activity { max-width:1000px; margin:auto; }
.kbh-letter-start { text-align:center; padding:24px; background:var(--kbh-surface); border:1px solid var(--kbh-line); border-radius:20px; }
.kbh-letter-start>img { display:block; width:440px; max-height:190px; object-fit:cover; border-radius:16px; margin:0 auto 24px; }
.kbh-shell .ip-root p,.kbh-shell .ip-root h3 { color:#222; }
.kbh-shell .ip-root .ip-title { font-size:clamp(22px,2.4vw,30px); }
.kbh-shell .ip-root .ip-letter-prompt { color:white; }
.kbh-shell .story-play p,.kbh-shell .story-play h2,.kbh-shell .story-play h3 { color:#253b39; }
.kbh-experience-note { text-align:center; max-width:760px; margin:28px auto 0!important; }
.kbh-first-sound { --pg-ink:#222; --pg-muted:#6b6152; --pg-card:#fff; --pg-soft:#f6fbff; --pg-line:#e0e6e9; --pg-blue:#0174b1; --pg-on-accent:#fff; max-width:760px; margin:auto; }
.kbh-shell .kbh-first-sound :is(p,h2,h3) { color:#222; }
.kbh-first-sound .kbh-letter-start { background:#fff; border-color:#d7e7f5; }
.kbh-real-activity .sb-game { background:#fff; border-radius:24px; }
.kbh-shell .lt-page :is(p,h2,h3) { color:inherit; }
.kbh-shell .sound-practice :is(p,h2,h3) { color:#1b2430; }
.kbh-shell .sb-game :is(p,h2,h3) { color:#183747; }
@media(max-width:600px) { .kbh-video-caption span { display:block; float:none; }.kbh-video-start .kbh-btn { font-size:16px; }.kbh-story-player { border-radius:16px; }.kbh-shell .ip-panel { max-width:100%; }.kbh-shell .ip-choices { grid-template-columns:repeat(2,minmax(0,1fr)); } }