/* =============================================================
   Kids Beachhead landing page (/kids)
   Scoped under the .kbh- prefix. Translates the approved "Kids Landing"
   Claude Design into scoped CSS: the desktop layout is the base, the
   media-query block at the bottom mirrors the design's 980/720/560/380
   breakpoints. The design's --unq-* tokens are mapped onto .kbh-* tokens
   on .kbh-shell; icons are Material Symbols (loaded by the web wrapper).
   ============================================================= */

.kbh-shell {
    /* ----- design palette mapped onto kbh tokens ----- */
    --kbh-blue: #00B4FF;
    --kbh-blue-deep: #0174B1;
    --kbh-blue-tint: #F6FBFF;        /* page background */
    --kbh-orange: #FFAA00;
    --kbh-charcoal: #222222;
    --kbh-divider: #E0E0E0;

    /* neutral gray scale */
    --kbh-gray-50: #FAFAFA;
    --kbh-gray-100: #F5F5F5;
    --kbh-gray-200: #EEEEEE;
    --kbh-gray-300: #E0E0E0;
    --kbh-gray-400: #BDBDBD;
    --kbh-gray-500: #9E9E9E;
    --kbh-gray-600: #757575;
    --kbh-gray-700: #616161;

    /* semantic foreground */
    --kbh-fg: var(--kbh-charcoal);
    --kbh-fg-secondary: #4A5560;
    --kbh-fg-muted: #7A8590;
    --kbh-success: #1FA971;

    --kbh-surface: #ffffff;
    --kbh-border-subtle: rgba(0, 0, 0, .06);
    --kbh-border-default: #ECECEC;

    /* radii */
    --kbh-r-xs: 4px;
    --kbh-r-sm: 6px;
    --kbh-r-md: 10px;
    --kbh-r-lg: 14px;
    --kbh-r-xl: 20px;
    --kbh-r-2xl: 28px;
    --kbh-r-pill: 999px;

    /* shadows */
    --kbh-shadow-xs: 0 1px 2px rgba(2, 6, 23, .06);
    --kbh-shadow-sm: 0 1px 3px rgba(2, 6, 23, .08), 0 1px 2px rgba(2, 6, 23, .04);
    --kbh-shadow-md: 0 6px 18px rgba(2, 6, 23, .10);
    --kbh-shadow-lg: 0 18px 44px rgba(2, 6, 23, .16);
    --kbh-shadow-blue: 0 8px 22px rgba(0, 180, 255, .30);
    --kbh-shadow-orange: 0 8px 22px rgba(255, 170, 0, .32);

    --kbh-maxw: 1160px;
    --kbh-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    color: var(--kbh-fg);
    font-family: var(--kbh-font);
    line-height: 1.5;
    background: var(--kbh-blue-tint);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    min-height: 100vh;
}

.kbh-shell *,
.kbh-shell *::before,
.kbh-shell *::after {
    box-sizing: border-box;
}

.kbh-shell .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    vertical-align: middle;
}

.kbh-wrap {
    max-width: var(--kbh-maxw);
    margin: 0 auto;
    padding: 0 32px;
}

.kbh-shell h1,
.kbh-shell h2,
.kbh-shell h3,
.kbh-shell h4 {
    margin: 0;
    letter-spacing: -.02em;
    color: var(--kbh-fg);
}

.kbh-blue-word { color: var(--kbh-blue); }

/* ---------------- buttons ---------------- */
.kbh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    border-radius: var(--kbh-r-md);
    padding: 13px 22px;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: var(--kbh-blue);
    color: #fff;
    box-shadow: var(--kbh-shadow-blue);
    text-decoration: none;
    line-height: 1;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease;
}

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

.kbh-btn .material-symbols-outlined { font-size: 20px; }

.kbh-btn-sm {
    padding: 9px 16px;
    font-size: 14px;
    border-radius: var(--kbh-r-md);
}

.kbh-btn-sm .material-symbols-outlined { font-size: 18px; }

.kbh-btn-ghost {
    background: #fff;
    color: var(--kbh-blue-deep);
    box-shadow: none;
    border: 1.5px solid var(--kbh-divider);
}

.kbh-btn-ghost:hover {
    border-color: var(--kbh-blue);
    color: var(--kbh-blue-deep);
    transform: none;
}

.kbh-btn-light {
    background: #fff;
    color: var(--kbh-blue-deep);
    box-shadow: var(--kbh-shadow-md);
}

.kbh-btn-light:hover { color: var(--kbh-blue-deep); }

.kbh-btn-block {
    width: 100%;
    justify-content: center;
}

/* Visible keyboard focus: the global app.css sets outline:none, so the page
   must restore its own focus ring on every interactive control. */
.kbh-btn:focus-visible,
.kbh-btn-ghost:focus-visible,
.kbh-btn-light:focus-visible,
.kbh-readalong-all:focus-visible {
    outline: 3px solid var(--kbh-blue);
    outline-offset: 3px;
}

/* ---------------- eyebrow ---------------- */
.kbh-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kbh-blue-deep);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.kbh-eyebrow .material-symbols-outlined { font-size: 16px; }

/* ---------------- section scaffolding ---------------- */
.kbh-section { padding: 0 0 80px; }
.kbh-sec-path { padding-top: 80px; }

.kbh-center {
    max-width: 660px;
    margin: 0 auto;
    text-align: center;
}

.kbh-center h2 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.18;
    margin: 12px 0 0;
    text-wrap: balance;
}

.kbh-center p {
    font-size: 17px;
    line-height: 1.55;
    color: var(--kbh-fg-secondary);
    margin: 14px 0 0;
    text-wrap: pretty;
}

/* No page-level nav: the global reskinned site top-nav serves /kids. The hero
   pads its top to clear that fixed nav (see .kbh-hero-grid), matching the home
   landing, so the two never stack into a duplicate bar. */

/* ==================== HERO ==================== */
.kbh-hero {
    position: relative;
    overflow: hidden;
}

.kbh-hero-glow {
    position: absolute;
    top: -340px;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 760px;
    border-radius: 50%;
    z-index: 0;
    background: radial-gradient(circle, rgba(0, 180, 255, .16), transparent 64%);
    pointer-events: none;
}

.kbh-hero-grid {
    position: relative;
    z-index: 1;
    /* Top pad clears the global fixed top-nav (~91px) the way the home landing does. */
    padding: 140px 32px 84px;
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 48px;
    align-items: center;
}

.kbh-hero-h1 {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.04;
    margin: 18px 0 0;
    text-wrap: balance;
}

.kbh-hero .kbh-lead {
    font-size: 19px;
    line-height: 1.55;
    color: var(--kbh-fg-secondary);
    margin: 18px 0 0;
    max-width: 34ch;
    text-wrap: pretty;
}

.kbh-cta-row {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

/* Demoted secondary CTA beneath a primary "Start Free" button ("Or start a
   7-day premium trial"). Light sections use the blue link; the dark final card
   adds .kbh-cta-alt-invert for a legible white link. */
.kbh-cta-alt {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kbh-fg-muted);
}

.kbh-cta-alt a {
    color: var(--kbh-blue-deep);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kbh-cta-alt a:hover { color: var(--kbh-blue); }

.kbh-cta-alt a:focus-visible {
    outline: 3px solid var(--kbh-blue);
    outline-offset: 3px;
    border-radius: 3px;
}

.kbh-cta-alt-center { text-align: center; }

.kbh-cta-alt-invert { color: rgba(255, 255, 255, .82); }
.kbh-cta-alt-invert a { color: #fff; }
.kbh-cta-alt-invert a:hover { color: #fff; }

.kbh-hero .kbh-price-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--kbh-fg-muted);
    font-weight: 500;
}

.kbh-price-note .kbh-check {
    font-size: 18px;
    color: var(--kbh-success);
    flex: none;
}

.kbh-price-note b {
    color: var(--kbh-fg-secondary);
    font-weight: 700;
}

/* ----- hero three-cover fan ----- */
.kbh-hero-shot {
    position: relative;
    height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kbh-shot-card {
    position: absolute;
    width: 188px;
    aspect-ratio: 5 / 8;
    border-radius: 14px;
    border: 4px solid #fff;
    box-shadow: var(--kbh-shadow-lg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 14px;
}

.kbh-shot-left { transform: rotate(-9deg) translate(-128px, 18px); z-index: 1; }
.kbh-shot-mid { transform: translateY(-14px) scale(1.06); z-index: 3; }
.kbh-shot-right { transform: rotate(9deg) translate(128px, 18px); z-index: 2; }

.kbh-shot-orange { background-image: linear-gradient(160deg, #FF8A5B, #E2613A); }
.kbh-shot-blue { background-image: linear-gradient(160deg, #5BB8FF, #2C8FE0); }
.kbh-shot-violet { background-image: linear-gradient(160deg, #7C6BF0, #5546C8); }

.kbh-shot-tag {
    position: absolute;
    top: 11px;
    left: 11px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .92);
    /* Fixed ink: the chip stays white on the cover art in both themes, so it must
       not pick up the dark-mode charcoal remap (which flips to near-white). */
    color: #222;
    padding: 3px 8px;
    border-radius: var(--kbh-r-pill);
}

.kbh-shot-pill {
    position: absolute;
    z-index: 4;
    bottom: 30px;
    right: 34px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border-radius: var(--kbh-r-pill);
    padding: 9px 15px 9px 11px;
    box-shadow: var(--kbh-shadow-md);
    font-size: 13px;
    font-weight: 700;
    /* Fixed ink: stays on a white pill in both themes (no dark-mode remap). */
    color: #222;
}

.kbh-shot-pill-ic {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #FF8A00, #FF5C39);
    color: #fff;
}

.kbh-shot-pill-ic .material-symbols-outlined { font-size: 18px; }

/* ==================== THE READING PATH ==================== */
.kbh-path {
    margin-top: 48px;
    position: relative;
}

.kbh-path-line {
    position: absolute;
    top: 128px;
    left: 7%;
    right: 7%;
    height: 3px;
    z-index: 0;
    background: repeating-linear-gradient(90deg, var(--kbh-gray-300) 0 10px, transparent 10px 20px);
}

.kbh-path-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.kbh-stop-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.kbh-stop-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--kbh-blue);
    color: var(--kbh-blue-deep);
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px var(--kbh-blue-tint);
}

.kbh-stop-num-plus {
    border-color: var(--kbh-gray-300);
    color: var(--kbh-fg-muted);
    font-size: 18px;
}

.kbh-stop-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--kbh-fg-muted);
}

.kbh-pathcard {
    position: relative;
    overflow: hidden;
    border-radius: var(--kbh-r-xl);
    padding: 20px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    box-shadow: var(--kbh-shadow-md);
}

.kbh-pathcard-blob {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    right: -60px;
    top: -66px;
    z-index: 0;
}

.kbh-pathcard > *:not(.kbh-pathcard-blob) { position: relative; z-index: 1; }

.kbh-pathcard-orange {
    background: linear-gradient(165deg, rgba(240, 130, 60, .13), #fff 66%);
    border: 1px solid rgba(240, 130, 60, .22);
}

.kbh-pathcard-orange .kbh-pathcard-blob {
    background: radial-gradient(circle, rgba(240, 130, 60, .2), transparent 70%);
}

.kbh-pathcard-green {
    background: linear-gradient(165deg, rgba(31, 169, 113, .13), #fff 66%);
    border: 1px solid rgba(31, 169, 113, .22);
}

.kbh-pathcard-green .kbh-pathcard-blob {
    background: radial-gradient(circle, rgba(31, 169, 113, .2), transparent 70%);
}

.kbh-pathcard-more {
    border: 1.5px dashed var(--kbh-gray-300);
    background: #fff;
    align-items: flex-start;
}

.kbh-pathcard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

/* ----- spine fans (real covers or gradient placeholders) ----- */
.kbh-spine-fan { display: flex; }

.kbh-spine {
    width: 44px;
    height: 64px;
    border-radius: var(--kbh-r-sm);
    box-shadow: 0 6px 14px rgba(2, 6, 23, .22);
    border: 2.5px solid #fff;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.kbh-spine:not(:first-child) { margin-left: -20px; }

.kbh-spine-fan-sm {
    margin-bottom: 4px;
}

.kbh-spine-fan-sm .kbh-spine {
    width: 34px;
    height: 50px;
    border-width: 2px;
    box-shadow: 0 4px 10px rgba(2, 6, 23, .18);
}

.kbh-spine-fan-sm .kbh-spine:not(:first-child) { margin-left: -15px; }

/* gradient placeholder spines */
.kbh-spine-g1 { background-image: linear-gradient(135deg, #FFC24B, #E89600); }
.kbh-spine-g2 { background-image: linear-gradient(135deg, #FF8A5B, #E2613A); }
.kbh-spine-g3 { background-image: linear-gradient(135deg, #5BB8FF, #2C8FE0); }
.kbh-spine-g4 { background-image: linear-gradient(135deg, #2BC4A0, #179B7C); }
.kbh-spine-g5 { background-image: linear-gradient(135deg, #FF7FA8, #D4537E); }
.kbh-spine-g6 { background-image: linear-gradient(135deg, #7C6BF0, #5546C8); }
.kbh-spine-g7 { background-image: linear-gradient(135deg, #8ED6A0, #3FAE73); }
.kbh-spine-g8 { background-image: linear-gradient(135deg, #5BB8FF, #2C8FE0); }

.kbh-age-chip {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: var(--kbh-r-pill);
    white-space: nowrap;
}

.kbh-age-orange { background: rgba(240, 130, 60, .15); color: #C75E1E; }
.kbh-age-green { background: rgba(31, 169, 113, .15); color: #137A50; }

.kbh-pathcard-kicker {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
}

.kbh-ac-orange { color: #C75E1E; }
.kbh-ac-green { color: #137A50; }

.kbh-pathcard-title {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.01em;
    margin-top: -4px;
    color: var(--kbh-charcoal);
}

.kbh-pathcard-more .kbh-pathcard-title { margin-top: 0; }

.kbh-pathcard-text {
    font-size: 14px;
    color: var(--kbh-fg-secondary);
    line-height: 1.5;
}

.kbh-pathcard-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kbh-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: var(--kbh-r-pill);
}

.kbh-meta-chip .material-symbols-outlined { font-size: 15px; }
.kbh-meta-orange { color: #C75E1E; background: rgba(240, 130, 60, .1); }

/* the wedge: games made from the same book's words */
.kbh-wedge {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(31, 169, 113, .2);
    border-radius: var(--kbh-r-md);
    padding: 11px 12px;
    box-shadow: var(--kbh-shadow-xs);
}

.kbh-wedge .material-symbols-outlined {
    font-size: 20px;
    color: #137A50;
    margin-top: 1px;
    flex: none;
}

.kbh-wedge b {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--kbh-charcoal);
}

.kbh-wedge span {
    display: block;
    font-size: 12px;
    color: var(--kbh-fg-secondary);
    line-height: 1.4;
    margin-top: 1px;
}

.kbh-more-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.kbh-more-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kbh-fg-secondary);
}

.kbh-more-list .material-symbols-outlined {
    font-size: 17px;
    color: var(--kbh-blue);
    flex: none;
}

/* ==================== READ-ALONG BAND ==================== */
.kbh-readalong {
    position: relative;
    overflow: hidden;
    border-radius: var(--kbh-r-2xl);
    background: linear-gradient(135deg, #FF8A00 0%, #FF5C39 100%);
    box-shadow: 0 24px 55px rgba(255, 92, 57, .3);
}

.kbh-readalong-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .12) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
}

.kbh-readalong-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 30px 18px;
    color: #fff;
}

.kbh-readalong-icon {
    position: relative;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.kbh-readalong-icon .material-symbols-outlined {
    font-size: 38px;
    position: relative;
    z-index: 1;
}

.kbh-readalong-pulse {
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    animation: kbh-pulse 2.4s cubic-bezier(.22, 1, .36, 1) infinite;
}

@keyframes kbh-pulse {
    0% { transform: scale(.82); opacity: .9; }
    100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .kbh-readalong-pulse { animation: none; }
    .kbh-faq-mark { transition: none; }
    .kbh-readalong-track { scroll-behavior: auto; }
}

.kbh-readalong-text {
    flex: 1;
    min-width: 0;
}

.kbh-readalong-text h3 {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
    color: #fff;
}

.kbh-readalong-text p {
    font-size: 14.5px;
    font-weight: 500;
    margin: 5px 0 0;
    color: rgba(255, 255, 255, .94);
}

.kbh-readalong-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .36);
    border-radius: var(--kbh-r-pill);
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.kbh-readalong-all:hover { color: #fff; }
.kbh-readalong-all .material-symbols-outlined { font-size: 18px; }

.kbh-ra-track-wrap { position: relative; }

.kbh-readalong-track {
    display: flex;
    gap: 16px;
    /* Wide side inset so the first and last cards clear the overlaid nav arrows. */
    padding: 8px 52px 30px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.kbh-readalong-track::-webkit-scrollbar { display: none; }

.kbh-ra-card {
    flex: 0 0 142px;
    background: rgba(255, 255, 255, .97);
    border-radius: var(--kbh-r-lg);
    padding: 10px;
    box-shadow: var(--kbh-shadow-md);
    scroll-snap-align: start;
}

.kbh-ra-cover {
    position: relative;
    aspect-ratio: 5 / 8;
    border-radius: var(--kbh-r-sm);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
}

.kbh-ra-cover-fallback { background-color: #5B8DEF; }
.kbh-ra-fill-0 { background-image: linear-gradient(160deg, #7AC7FF, #5B8DEF); }
.kbh-ra-fill-1 { background-image: linear-gradient(160deg, #3B3A6B, #6C63A8); }
.kbh-ra-fill-2 { background-image: linear-gradient(160deg, #FFB347, #FF7E5F); }
.kbh-ra-fill-3 { background-image: linear-gradient(160deg, #8ED6A0, #3FAE73); }
.kbh-ra-fill-4 { background-image: linear-gradient(160deg, #FF7FA8, #D4537E); }

.kbh-ra-badge {
    position: absolute;
    top: 9px;
    left: 9px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--kbh-orange);
    color: #fff;
    padding: 4px 9px;
    border-radius: var(--kbh-r-pill);
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}

.kbh-ra-badge .material-symbols-outlined { font-size: 12px; }

.kbh-ra-caption {
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    padding: 9px;
    line-height: 1.16;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}

.kbh-ra-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .26);
    border: 1.5px solid rgba(255, 255, 255, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    padding: 0;
    z-index: 3;
    transition: background .2s ease;
}

.kbh-ra-nav:hover { background: rgba(255, 255, 255, .42); }
.kbh-ra-prev { left: 12px; }
.kbh-ra-next { right: 12px; }

/* Edge-aware: hide the prev arrow at the start, the next arrow at the end (the
   JS toggles at-start / at-end on the track; both apply when content fits). */
.kbh-readalong-track.at-start ~ .kbh-ra-prev,
.kbh-readalong-track.at-end ~ .kbh-ra-next {
    opacity: 0;
    pointer-events: none;
}

.kbh-ra-nav:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.kbh-ra-nav .material-symbols-outlined { font-size: 22px; }

.kbh-readalong-coming {
    margin: 16px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--kbh-fg-muted);
    font-weight: 500;
}

/* ==================== HOW IT WORKS ==================== */
.kbh-loop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
}

.kbh-loop-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--kbh-border-default);
    border-radius: var(--kbh-r-lg);
    padding: 26px 24px;
    box-shadow: var(--kbh-shadow-sm);
}

.kbh-loop-win {
    background: linear-gradient(165deg, rgba(31, 169, 113, .1), #fff 70%);
    border: 1px solid rgba(31, 169, 113, .28);
}

.kbh-loop-winbadge {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: #1FA971;
    padding: 4px 10px;
    border-radius: var(--kbh-r-pill);
}

.kbh-loop-ic {
    width: 52px;
    height: 52px;
    border-radius: var(--kbh-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 180, 255, .12);
    color: var(--kbh-blue-deep);
    margin-bottom: 16px;
}

.kbh-loop-ic .material-symbols-outlined { font-size: 28px; }
.kbh-loop-ic-green { background: rgba(31, 169, 113, .15); color: #137A50; }

.kbh-loop-step {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kbh-fg-muted);
}

.kbh-loop-card h4 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 4px 0 8px;
}

.kbh-loop-card p {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--kbh-fg-secondary);
    margin: 0;
}

/* ==================== HOMESCHOOL TRUST ==================== */
/* Four equal trust cards. Layout only -- the cards reuse the .kbh-why-item card
   and .kbh-why-ic icon, so color, shadow, and dark mode all match the page. */
.kbh-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 48px;
}

/* ==================== WHY FAMILIES ==================== */
.kbh-why {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 18px;
    margin-top: 48px;
}

.kbh-why-item {
    background: #fff;
    border: 1px solid var(--kbh-border-default);
    border-radius: var(--kbh-r-lg);
    padding: 24px;
    box-shadow: var(--kbh-shadow-sm);
}

.kbh-why-lead {
    background: linear-gradient(165deg, rgba(0, 180, 255, .1), #fff 72%);
    border: 1px solid rgba(0, 180, 255, .26);
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Trust-card cover shelf: a row of real kid covers that fills the tall lead card
   (covers are the imagery) instead of leaving empty space above the heading. */
.kbh-why-shelf {
    display: flex;
    gap: 10px;
    margin: 22px 0 4px;
}

.kbh-why-cover {
    flex: 1 1 0;
    max-width: 78px;
    aspect-ratio: 5 / 8;
    border-radius: var(--kbh-r-sm);
    background-size: cover;
    background-position: center;
    box-shadow: var(--kbh-shadow-sm);
    /* Surface token, not #fff, so the frame blends on the dark-mode card too. */
    border: 2px solid var(--kbh-surface);
}

.kbh-why-ic {
    width: 46px;
    height: 46px;
    border-radius: var(--kbh-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 180, 255, .12);
    color: var(--kbh-blue-deep);
    margin-bottom: 14px;
}

.kbh-why-ic .material-symbols-outlined { font-size: 26px; }

.kbh-why-ic-lg {
    width: 56px;
    height: 56px;
    background: rgba(0, 180, 255, .16);
}

.kbh-why-ic-lg .material-symbols-outlined { font-size: 32px; }

.kbh-why-item b {
    display: block;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--kbh-fg);
}

.kbh-why-lead b {
    font-size: 22px;
    margin: 18px 0 0;
}

.kbh-why-item span {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: var(--kbh-fg-secondary);
    margin-top: 6px;
}

.kbh-why-lead span {
    font-size: 15px;
    text-wrap: pretty;
}

/* ==================== PRICING ==================== */
.kbh-price-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 20px;
    margin-top: 44px;
    align-items: stretch;
}

.kbh-price-main {
    position: relative;
    background: #fff;
    border: 2px solid var(--kbh-blue);
    border-radius: var(--kbh-r-xl);
    padding: 30px;
    box-shadow: 0 24px 55px rgba(0, 180, 255, .18);
}

.kbh-price-flag {
    position: absolute;
    top: -12px;
    left: 30px;
    background: var(--kbh-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 5px 12px;
    border-radius: var(--kbh-r-pill);
    box-shadow: var(--kbh-shadow-orange);
}

.kbh-price-main h3,
.kbh-price-alt h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
}

.kbh-price-alt h3 {
    font-size: 17px;
    color: var(--kbh-fg-secondary);
}

.kbh-price-amount {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 14px;
}

.kbh-price-big {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
}

.kbh-price-big-muted {
    font-size: 34px;
    color: var(--kbh-fg-secondary);
}

.kbh-price-per {
    font-size: 15px;
    color: var(--kbh-fg-muted);
    font-weight: 600;
}

.kbh-price-fine {
    font-size: 13px;
    color: var(--kbh-fg-muted);
    margin-top: 6px;
    font-weight: 600;
}

.kbh-price-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.kbh-price-list-muted { margin-bottom: 0; }

.kbh-price-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
    color: var(--kbh-fg-secondary);
    font-weight: 500;
}

.kbh-price-list-muted li { color: var(--kbh-fg-muted); }

.kbh-price-list .material-symbols-outlined {
    font-size: 19px;
    margin-top: 1px;
    flex: none;
}

.kbh-tick { color: var(--kbh-blue); }
.kbh-cross { color: var(--kbh-gray-400); }

.kbh-price-foot {
    margin: 18px 0 0;
    font-size: 13.5px;
    color: var(--kbh-fg-secondary);
    font-weight: 600;
    line-height: 1.5;
}

.kbh-price-alt {
    background: var(--kbh-gray-50);
    border: 1px solid var(--kbh-border-default);
    border-radius: var(--kbh-r-xl);
    padding: 30px;
}

/* ==================== FINAL CTA ==================== */
.kbh-final {
    position: relative;
    overflow: hidden;
    border-radius: var(--kbh-r-2xl);
    background: linear-gradient(150deg, var(--kbh-blue), var(--kbh-blue-deep));
    color: #fff;
    padding: 60px 40px;
    text-align: center;
}

.kbh-final-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .1) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    pointer-events: none;
}

.kbh-closing-inner {
    position: relative;
    z-index: 1;
}

.kbh-closing-inner h2 {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
    color: #fff;
    text-wrap: balance;
}

.kbh-closing-inner > p {
    font-size: 17px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .92);
    text-wrap: pretty;
}

.kbh-closing-inner .kbh-btn-light { margin-top: 26px; }

.kbh-offer-fine {
    margin: 16px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    font-weight: 500;
}

/* ==================== FAQ ==================== */
.kbh-faq {
    max-width: 720px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kbh-faq-item {
    background: #fff;
    border: 1px solid var(--kbh-border-default);
    border-radius: var(--kbh-r-lg);
    box-shadow: var(--kbh-shadow-sm);
    overflow: hidden;
}

.kbh-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--kbh-fg);
    cursor: pointer;
    list-style: none;
}

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

.kbh-faq-item summary:focus-visible {
    outline: 3px solid var(--kbh-blue);
    outline-offset: -3px;
}

.kbh-faq-mark {
    flex: none;
    color: var(--kbh-blue-deep);
    transition: transform .2s ease;
}

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

.kbh-faq-item > p {
    margin: 0;
    padding: 0 20px 20px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--kbh-fg-secondary);
}

/* =============================================================
   Responsive -- mirrors the design's 980 / 720 / 560 / 380 breaks
   ============================================================= */
@media (max-width: 980px) {
    .kbh-hero-grid { grid-template-columns: 1fr; gap: 10px; }
    .kbh-path-row { grid-template-columns: 1fr; gap: 34px; }
    .kbh-path-line { display: none; }
    .kbh-loop-grid { grid-template-columns: 1fr; }
    .kbh-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .kbh-why { grid-template-columns: 1fr; grid-template-rows: none; }
    .kbh-why-lead { grid-row: auto; }
    .kbh-price-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .kbh-readalong-track {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-left: 20px;
        padding-right: 20px;
    }
    .kbh-ra-nav { display: none; }
}

@media (max-width: 560px) {
    .kbh-wrap { padding-left: 20px; padding-right: 20px; }
    .kbh-section { padding-bottom: 48px; }
    .kbh-trust-grid { grid-template-columns: 1fr; }
    .kbh-center h2 { font-size: 26px; }
    .kbh-sec-path { padding-top: 48px; }
    .kbh-hero-grid { padding: calc(88px + var(--topnav-inset-top)) 20px 44px; }
    .kbh-hero-h1 { font-size: 40px; }
    .kbh-hero .kbh-lead { font-size: 17px; }
    .kbh-hero-shot { height: 300px; transform: scale(.66); transform-origin: center top; }
    .kbh-readalong-head { flex-wrap: wrap; gap: 14px; padding: 22px 20px 14px; }
    .kbh-readalong-icon { width: 56px; height: 56px; flex-basis: 56px; }
    .kbh-readalong-text h3 { font-size: 21px; }
    .kbh-final { padding: 44px 22px; }
    .kbh-closing-inner h2 { font-size: 26px; }
}

@media (max-width: 380px) {
    .kbh-hero-shot { transform: scale(.55); }
    .kbh-hero-h1 { font-size: 34px; }
}

/* =============================================================
   Dark mode -- remap tokens only, via the body/html .dark-mode class
   (the site's single dark-mode signal; no OS/media or attribute theming).
   ============================================================= */
html.dark-mode .kbh-shell,
body.dark-mode .kbh-shell {
    --kbh-blue-tint: #0b151b;
    --kbh-charcoal: #eaf2f8;
    --kbh-fg: #eaf2f8;
    --kbh-fg-secondary: #b8c6d2;
    --kbh-fg-muted: #8a9aa8;
    --kbh-divider: #2a3b47;
    --kbh-surface: #11202a;
    --kbh-border-subtle: rgba(255, 255, 255, .08);
    --kbh-border-default: #2a3b47;
    --kbh-gray-50: #16242e;
    --kbh-gray-300: #2a3b47;
    background: #0b151b;
}

html.dark-mode .kbh-pathcard-more,
body.dark-mode .kbh-pathcard-more,
html.dark-mode .kbh-loop-card,
body.dark-mode .kbh-loop-card,
html.dark-mode .kbh-why-item,
body.dark-mode .kbh-why-item,
html.dark-mode .kbh-faq-item,
body.dark-mode .kbh-faq-item,
html.dark-mode .kbh-price-alt,
body.dark-mode .kbh-price-alt {
    background: #11202a;
    border-color: #2a3b47;
}

html.dark-mode .kbh-pathcard-orange,
body.dark-mode .kbh-pathcard-orange {
    background: linear-gradient(165deg, rgba(240, 130, 60, .16), #11202a 66%);
}

html.dark-mode .kbh-pathcard-green,
body.dark-mode .kbh-pathcard-green {
    background: linear-gradient(165deg, rgba(31, 169, 113, .16), #11202a 66%);
}

html.dark-mode .kbh-loop-win,
body.dark-mode .kbh-loop-win {
    background: linear-gradient(165deg, rgba(31, 169, 113, .14), #11202a 70%);
}

html.dark-mode .kbh-why-lead,
body.dark-mode .kbh-why-lead {
    background: linear-gradient(165deg, rgba(0, 180, 255, .14), #11202a 72%);
}

html.dark-mode .kbh-wedge,
body.dark-mode .kbh-wedge {
    background: #16242e;
    border-color: rgba(31, 169, 113, .3);
}

html.dark-mode .kbh-wedge b,
body.dark-mode .kbh-wedge b { color: #eaf2f8; }

html.dark-mode .kbh-price-main,
body.dark-mode .kbh-price-main {
    background: #11202a;
}

/* The Ember band, the gradient placeholders, and both gradient CTAs keep their
   own white-on-color contrast in either theme, so they need no remap. */