/* =============================================================
   Coding Beachhead landing page (/coding)
   Scoped under the .cbh- prefix. Translates the approved "Coding Landing"
   Claude Design into scoped CSS: the desktop layout is the base, the
   media-query block at the bottom mirrors the design's <900px responsive
   behavior. The design's --unq-* tokens are mapped onto .cbh-* tokens on
   .cbh-shell; icons are Material Symbols (loaded by the web wrapper).
   ============================================================= */

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

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

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

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

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

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

    --cbh-maxw: 1160px;
    --cbh-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cbh-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

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

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

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

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

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

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

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

.cbh-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    background: var(--cbh-blue-deep);
}

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

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

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

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

.cbh-btn-light:hover { color: var(--cbh-blue-deep); background: var(--cbh-blue-tint); }

.cbh-btn-outline-light {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .55);
    box-shadow: none;
}

.cbh-btn-outline-light:hover { background: rgba(255, 255, 255, .24); color: #fff; }

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

.cbh-btn-outline-light:focus-visible { outline-color: #fff; }

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

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

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

.cbh-center {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.cbh-center h2 {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.12;
    margin: 12px 0 0;
    text-wrap: balance;
}

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

/* ==================== (1) HERO ==================== */
.cbh-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1100px 520px at 78% 12%, #EAF7FF 0%, var(--cbh-blue-tint) 46%, #ffffff 100%);
    border-bottom: 1px solid var(--cbh-border-default);
}

.cbh-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, .14), transparent 64%);
    pointer-events: none;
}

.cbh-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: 1fr 1.04fr;
    gap: 48px;
    align-items: center;
}

.cbh-hero-h1 {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.03em;
    margin: 18px 0 0;
    text-wrap: balance;
}

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

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

.cbh-cta-center { justify-content: center; }

.cbh-hero .cbh-price-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--cbh-fg-muted);
    font-weight: 500;
    max-width: 44ch;
}

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

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

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

.cbh-shot-card {
    position: absolute;
    width: 196px;
    aspect-ratio: 196 / 296;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(2, 6, 23, .26);
    background-size: cover;
    background-position: center;
    border: 4px solid #fff;
    display: flex;
}

.cbh-shot-left  { transform: rotate(-8deg) translate(-150px, 32px); width: 188px; z-index: 1; }
.cbh-shot-right { transform: rotate(9deg)  translate(150px, 36px);  width: 188px; z-index: 2; }
.cbh-shot-mid   { transform: translateY(-12px) scale(1.03); z-index: 3; box-shadow: 0 34px 80px rgba(2, 6, 23, .30); }

/* gradient fallback book "covers" mimic the design's Forge spine cards */
.cbh-shot-violet { background: linear-gradient(160deg, #6C5AE0, #3F2FA8); border-color: transparent; }
.cbh-shot-slate  { background: linear-gradient(160deg, #1B2330, #475569); border-color: transparent; }
.cbh-shot-blue   { background: linear-gradient(160deg, var(--cbh-blue), var(--cbh-blue-deep)); border-color: transparent; }

.cbh-shot-spine {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 13px;
    background: rgba(0, 0, 0, .2);
}

.cbh-shot-inner {
    width: 100%;
    padding: 22px 18px 20px 26px;
    display: flex;
    flex-direction: column;
    color: #fff;
}

.cbh-shot-forge {
    font: 700 10px var(--cbh-mono);
    letter-spacing: .16em;
    opacity: .85;
}

.cbh-shot-meta { margin-top: auto; }
.cbh-shot-title { display: block; font-size: 24px; font-weight: 800; line-height: 1.07; letter-spacing: -.01em; }
.cbh-shot-sub { display: block; margin-top: 9px; font-size: 12px; font-weight: 500; opacity: .85; }

.cbh-shot-pill {
    position: absolute;
    z-index: 5;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: var(--cbh-r-pill);
    padding: 11px 16px;
    box-shadow: var(--cbh-shadow-lg);
    border: 1px solid var(--cbh-border-subtle);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    /* Fixed ink: stays on a white pill in both themes (no dark-mode remap). */
    color: #222;
}

.cbh-shot-pill-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cbh-blue);
}

.cbh-shot-pill-ic .material-symbols-outlined { font-size: 19px; }

/* ==================== (2) THE CODING PATH ==================== */
.cbh-sec-path { background: #fff; border-bottom: 1px solid var(--cbh-border-default); }

.cbh-path {
    margin-top: 52px;
    position: relative;
}

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

.cbh-path-row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    /* Sitewide pattern: no visible horizontal scrollbar; the prev/next arrows (and
       touch swipe) drive the scroll. Smooth + snap make the arrow paging land cleanly. */
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cbh-path-row::-webkit-scrollbar { display: none; }

.cbh-stop {
    width: 178px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    scroll-snap-align: start;
}

.cbh-stop-cert { width: 150px; }

/* ----- arrow-navigated carousel controls (no horizontal scrollbar) ----- */
.cbh-path-nav {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--cbh-border-default);
    box-shadow: var(--cbh-shadow-md);
    color: var(--cbh-blue-deep);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s ease, background .2s ease;
}

.cbh-path-nav:hover { background: var(--cbh-blue-tint); }

.cbh-path-nav:focus-visible {
    outline: 3px solid var(--cbh-blue);
    outline-offset: 2px;
}

.cbh-path-nav .material-symbols-outlined { font-size: 24px; }

.cbh-path-prev { left: -6px; }
.cbh-path-next { right: -6px; }

/* 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 the row already fits). */
.cbh-path-row.at-start ~ .cbh-path-prev,
.cbh-path-row.at-end ~ .cbh-path-next {
    opacity: 0;
    pointer-events: none;
}

.cbh-stop-head {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cbh-stop-num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--cbh-blue);
    color: var(--cbh-blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 12px var(--cbh-mono);
    box-shadow: var(--cbh-shadow-sm);
}

.cbh-stop-num-cert {
    border: none;
    background: var(--cbh-orange);
    color: #fff;
    box-shadow: var(--cbh-shadow-orange);
}

.cbh-stop-num-cert .material-symbols-outlined { font-size: 20px; }

.cbh-pathcard {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: var(--cbh-r-xl);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 226px;
    box-shadow: var(--cbh-shadow-sm);
}

.cbh-pathcard-blob {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    right: -44px;
    top: -52px;
    z-index: 0;
}

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

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

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

.cbh-spine {
    width: 30px;
    height: 44px;
    border-radius: 5px;
    box-shadow: 0 5px 12px rgba(2, 6, 23, .2);
    border: 2px solid #fff;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.cbh-spine:not(:first-child) { margin-left: -13px; }

.cbh-lang-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: var(--cbh-r-pill);
    white-space: nowrap;
}

.cbh-pathcard-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cbh-charcoal);
}

.cbh-pathcard-text {
    font-size: 12px;
    line-height: 1.4;
    color: var(--cbh-fg-secondary);
    margin-top: -2px;
}

/* ----- certificate end-node ----- */
.cbh-pathcard-cert {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    background: linear-gradient(165deg, #FFF1D6, #FFFCF5 70%);
    border: 1px solid rgba(255, 170, 0, .4);
    box-shadow: var(--cbh-shadow-orange);
}

.cbh-cert-medal {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--cbh-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--cbh-shadow-orange);
}

.cbh-cert-medal .material-symbols-outlined { font-size: 32px; }
.cbh-cert-title { font-size: 16px; font-weight: 800; line-height: 1.15; color: #7A4A00; }
.cbh-cert-text { font-size: 12px; font-weight: 500; line-height: 1.35; color: #9A6A12; }

/* ==================== (3) PRACTICE BAND (dark code editor) ==================== */
.cbh-practice {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 440px at 50% -12%, rgba(0, 180, 255, .20), transparent 60%),
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
        #0E1622;
    background-size: auto, 44px 44px, 44px 44px, auto;
}

.cbh-practice-pad { padding-top: 88px; padding-bottom: 88px; }

.cbh-practice-head h2 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #fff;
    margin: 14px 0 0;
}

.cbh-practice-head p {
    color: #9FB1C6;
}

.cbh-practice-eyebrow {
    font: 600 12px var(--cbh-mono);
    letter-spacing: .04em;
    color: #5BC8FF;
}

.cbh-editor {
    max-width: 1090px;
    margin: 46px auto 0;
    border-radius: var(--cbh-r-xl);
    overflow: hidden;
    background: #121A27;
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 16px 50px rgba(0, 180, 255, .12);
}

.cbh-editor-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    height: 46px;
    background: #0F1622;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.cbh-lights { display: flex; gap: 7px; }
.cbh-light { width: 12px; height: 12px; border-radius: 50%; }
.cbh-light-r { background: #FF5F57; }
.cbh-light-y { background: #FEBC2E; }
.cbh-light-g { background: #28C840; }

.cbh-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1B2536;
    border: 1px solid rgba(255, 255, 255, .07);
    border-bottom: none;
    padding: 6px 13px;
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
}

.cbh-tab .material-symbols-outlined { font-size: 15px; color: var(--cbh-blue); }
.cbh-tab-name { font: 500 12px var(--cbh-mono); color: #C9D4E3; }

.cbh-editor-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    font: 600 11px var(--cbh-mono);
    color: #7FE0A0;
}

.cbh-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #28C840;
    box-shadow: 0 0 8px #28C840;
}

.cbh-practice-grid {
    padding: 22px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.cbh-ex {
    background: #0F1724;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 176px;
}

.cbh-ex-head { display: flex; align-items: center; gap: 9px; }

.cbh-ex-ic {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cbh-ex-ic .material-symbols-outlined { font-size: 18px; }
.cbh-ex-ic-blue   { background: rgba(0, 180, 255, .15); color: #5BC8FF; }
.cbh-ex-ic-violet { background: rgba(199, 146, 234, .16); color: #C792EA; }
.cbh-ex-ic-red    { background: rgba(255, 107, 129, .16); color: #FF8A9B; }
.cbh-ex-ic-green  { background: rgba(23, 178, 106, .18); color: #8FE0A8; }
.cbh-ex-ic-amber  { background: rgba(224, 168, 46, .18); color: #F4C254; }

.cbh-ex-name { font: 700 12.5px var(--cbh-font); line-height: 1.15; color: #EAF1F9; }

.cbh-ex-code {
    margin-top: auto;
    background: #0A0F18;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 8px;
    padding: 11px;
    font: 500 11.5px/1.7 var(--cbh-mono);
    color: #C9D4E3;
}

.cbh-c-fn { color: #82AAFF; }
.cbh-c-kw { color: #C792EA; }
.cbh-c-op { color: #89DDFF; }
.cbh-c-dim { color: #5B6B7F; }
.cbh-c-amber { color: #F4C254; }

.cbh-c-bad {
    color: #FF6B81;
    border-bottom: 2px solid #FF6B81;
    padding-bottom: 1px;
}

.cbh-caret {
    display: inline-block;
    width: 7px;
    height: 13px;
    background: #5BC8FF;
    vertical-align: -2px;
    animation: cbh-blink 1.1s steps(1) infinite;
}

@keyframes cbh-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.cbh-ex-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px;
    font-size: 11px;
    line-height: 1.4;
}

.cbh-ex-line { display: flex; align-items: center; gap: 6px; }
.cbh-c-grip { font-size: 14px; color: #5B6B7F; }

.cbh-ex-err {
    margin-top: 6px;
    color: #FF8A9B;
    font: 600 10px var(--cbh-mono);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cbh-ex-err .material-symbols-outlined { font-size: 13px; }

.cbh-c-blank {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    background: rgba(0, 180, 255, .12);
    border: 1px solid #2C8FE0;
    border-radius: 4px;
    color: #5BC8FF;
    padding: 0 4px;
}

.cbh-ex-choices {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 11.5px;
    color: #9FB1C6;
}

.cbh-ex-choice { display: flex; align-items: center; gap: 7px; }
.cbh-ex-choice .material-symbols-outlined { font-size: 15px; }
.cbh-ex-choice-on { color: #EAF1F9; }

/* ==================== (4) HOW IT WORKS ==================== */
.cbh-sec-how { background: var(--cbh-blue-tint); border-bottom: 1px solid var(--cbh-border-default); padding-top: 84px; }

.cbh-how-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    margin-top: 50px;
}

.cbh-how-card {
    flex: 1;
    max-width: 340px;
    background: #fff;
    border: 1px solid var(--cbh-border-default);
    border-radius: var(--cbh-r-xl);
    box-shadow: var(--cbh-shadow-sm);
    padding: 28px;
}

.cbh-how-ic {
    width: 56px;
    height: 56px;
    border-radius: var(--cbh-r-lg);
    background: #E2F4FF;
    color: var(--cbh-blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cbh-how-ic .material-symbols-outlined { font-size: 28px; }

.cbh-how-step {
    font: 700 11px var(--cbh-mono);
    letter-spacing: .08em;
    color: var(--cbh-fg-muted);
    margin-top: 20px;
}

.cbh-how-card h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 6px 0 0;
}

.cbh-how-card p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--cbh-fg-secondary);
    margin: 8px 0 0;
}

.cbh-how-arrow {
    display: flex;
    align-items: center;
    color: var(--cbh-gray-300);
}

.cbh-how-arrow .material-symbols-outlined { font-size: 30px; }

.cbh-how-repeat {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.cbh-how-repeat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--cbh-border-default);
    border-radius: var(--cbh-r-pill);
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cbh-fg-secondary);
    box-shadow: var(--cbh-shadow-xs);
    text-align: center;
}

.cbh-how-repeat-pill .material-symbols-outlined { font-size: 17px; color: var(--cbh-blue); flex: none; }

/* ==================== (5) WHY UNQBD (bento) ==================== */
.cbh-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    grid-auto-rows: minmax(150px, auto);
    margin-top: 50px;
}

.cbh-bento-item {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cbh-border-default);
    border-radius: var(--cbh-r-xl);
    box-shadow: var(--cbh-shadow-sm);
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cbh-bento-lead {
    grid-column: span 2;
    background: linear-gradient(135deg, #E6F5FF, #F6FBFF 70%);
    border: 1px solid rgba(0, 180, 255, .22);
    padding: 30px;
}

.cbh-bento-blob {
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    right: -70px;
    top: -70px;
    background: radial-gradient(circle, rgba(0, 180, 255, .16), transparent 70%);
}

.cbh-bento-lead > *:not(.cbh-bento-blob) { position: relative; z-index: 1; }

.cbh-bento-tall {
    grid-column: 3;
    grid-row: span 2;
    justify-content: flex-start;
}

.cbh-bento-wide {
    grid-column: span 3;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 28px 30px;
}

.cbh-bento-ic {
    width: 52px;
    height: 52px;
    border-radius: var(--cbh-r-lg);
    background: #E2F4FF;
    color: var(--cbh-blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cbh-bento-ic .material-symbols-outlined { font-size: 26px; }

.cbh-bento-ic-lg {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--cbh-blue);
    color: #fff;
    box-shadow: var(--cbh-shadow-blue);
}

.cbh-bento-ic-lg .material-symbols-outlined { font-size: 32px; }

.cbh-bento-ic-amber {
    background: #FFF3DC;
    color: var(--cbh-orange-deep);
}

.cbh-bento-item h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 18px 0 0;
}

.cbh-bento-lead h3 { font-size: 26px; font-weight: 800; line-height: 1.12; }
.cbh-bento-wide h3 { font-size: 20px; margin: 0; }

.cbh-bento-item p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--cbh-fg-secondary);
    margin: 8px 0 0;
}

.cbh-bento-lead p { font-size: 16px; line-height: 1.55; max-width: 440px; }
.cbh-bento-wide p { max-width: 760px; font-size: 15px; }

.cbh-bento-tall p { margin-bottom: 18px; }

/* A small cluster of real coding-book covers fills the tall card's middle so the
   space between the subline and the bottom chips no longer reads as empty. Omitted
   gracefully when no covers loaded. */
.cbh-bento-covers {
    margin: 20px 0;
    display: flex;
    gap: 10px;
}

.cbh-bento-cover {
    flex: 1 1 0;
    max-width: 64px;
    aspect-ratio: 5 / 8;
    border-radius: var(--cbh-r-sm);
    background-size: cover;
    background-position: center;
    box-shadow: var(--cbh-shadow-sm);
    border: 2px solid var(--cbh-surface);
}

.cbh-bento-chips {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cbh-bento-chips .cbh-lang-chip {
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
}

/* ==================== (6) PRICE COMPARISON ==================== */
.cbh-sec-price { background: var(--cbh-blue-tint); border-bottom: 1px solid var(--cbh-border-default); padding-top: 84px; }

.cbh-price-scroll { margin-top: 52px; }

.cbh-price-grid {
    position: relative;
    max-width: 1060px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.25fr repeat(5, 1fr);
    column-gap: 0;
}

.cbh-price-best {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cbh-orange);
    color: #fff;
    font: 700 11px var(--cbh-font);
    letter-spacing: .04em;
    padding: 4px 12px;
    border-radius: var(--cbh-r-pill);
    white-space: nowrap;
    box-shadow: var(--cbh-shadow-orange);
}

.cbh-price-label {
    grid-column: 1;
    z-index: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--cbh-charcoal);
    display: flex;
    align-items: center;
    padding: 16px 14px 16px 4px;
    border-top: 1px solid var(--cbh-border-default);
}

.cbh-price-corner {
    align-items: flex-end;
    padding: 0 14px 18px 4px;
    font-size: 12px;
    color: var(--cbh-fg-muted);
    border-top: none;
}

.cbh-price-head {
    z-index: 1;
    text-align: center;
    padding: 34px 12px 18px;
}

.cbh-price-head-us {
    position: relative;
    padding-top: 26px;
    background: linear-gradient(180deg, #EAF7FF, #F8FCFF);
    border: 2px solid var(--cbh-blue);
    border-bottom: none;
    border-top-left-radius: var(--cbh-r-xl);
    border-top-right-radius: var(--cbh-r-xl);
    box-shadow: var(--cbh-shadow-blue);
}

.cbh-price-name { font-size: 17px; font-weight: 800; color: var(--cbh-charcoal); }
.cbh-price-comp { font-size: 14px; font-weight: 700; color: var(--cbh-charcoal); }

.cbh-price-amount {
    margin-top: 8px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
}

.cbh-price-big { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--cbh-blue); }
.cbh-price-mid { font-size: 24px; font-weight: 800; line-height: 1; color: var(--cbh-charcoal); }
.cbh-price-unit { font-size: 13px; font-weight: 600; color: var(--cbh-fg-muted); }

.cbh-price-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--cbh-blue-deep);
    margin-top: 6px;
}

.cbh-price-cell {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    border-top: 1px solid var(--cbh-border-default);
}

/* The unQbd column is its own bordered, highlighted card; no divider line, and
   its left/right borders continue the head's border down the column. */
.cbh-price-cell-us {
    border-top: none;
    background: #F8FCFF;
    border-left: 2px solid var(--cbh-blue);
    border-right: 2px solid var(--cbh-blue);
}

/* The last unQbd cell closes the card: bottom border + rounded bottom corners. */
.cbh-price-cell-us-last {
    border-bottom: 2px solid var(--cbh-blue);
    border-bottom-left-radius: var(--cbh-r-xl);
    border-bottom-right-radius: var(--cbh-r-xl);
}

.cbh-price-cell .material-symbols-outlined { font-size: 21px; }
.cbh-tick { color: var(--cbh-success); }
.cbh-tick-us { color: var(--cbh-blue); font-size: 23px; }
.cbh-cross { color: var(--cbh-gray-300); }

.cbh-price-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
}

.cbh-price-disclaimer {
    font-size: 12px;
    line-height: 1.5;
    color: var(--cbh-fg-muted);
    text-align: center;
    max-width: 560px;
    margin: 0;
}

/* ==================== (7) FREE-ACCOUNT CALLOUT ==================== */
.cbh-sec-free { background: #fff; border-bottom: 1px solid var(--cbh-border-default); padding-bottom: 0; }
.cbh-free-wrap { max-width: 1060px; padding-top: 56px; padding-bottom: 56px; }

.cbh-free {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #EFF8FF, #FFFFFF 72%);
    border: 1px solid rgba(0, 180, 255, .22);
    border-radius: 20px;
    box-shadow: var(--cbh-shadow-sm);
    padding: 30px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
}

.cbh-free-blob {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    right: -60px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(0, 180, 255, .12), transparent 70%);
}

.cbh-free-copy {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
}

.cbh-free-ic {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--cbh-r-lg);
    background: var(--cbh-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--cbh-shadow-blue);
}

.cbh-free-ic .material-symbols-outlined { font-size: 28px; }

.cbh-free-copy h3 {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.01em;
    margin: 0;
}

.cbh-free-copy p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--cbh-fg-secondary);
    margin: 6px 0 0;
    max-width: 520px;
}

.cbh-free-btn {
    position: relative;
    white-space: nowrap;
}

/* ==================== (8) FAQ ==================== */
.cbh-sec-faq { background: var(--cbh-blue-tint); border-bottom: 1px solid var(--cbh-border-default); padding-top: 84px; }
.cbh-faq-wrap { max-width: 780px; }

.cbh-sec-faq .cbh-center h2 { font-size: 32px; }

.cbh-faq {
    margin: 36px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.cbh-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cbh-charcoal);
    cursor: pointer;
    list-style: none;
}

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

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

.cbh-faq-mark {
    flex: none;
    color: var(--cbh-fg-muted);
    transition: transform .2s ease;
}

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

.cbh-faq-item > p {
    margin: 0;
    padding: 0 22px 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cbh-fg-secondary);
}

/* ==================== (9) FINAL CTA ==================== */
.cbh-sec-final { padding-bottom: 0; }

.cbh-final {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cbh-blue), var(--cbh-blue-deep));
    color: #fff;
    padding: 84px 40px;
    text-align: center;
}

.cbh-final-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cbh-final-orb-1 { width: 320px; height: 320px; right: -80px; top: -120px; background: rgba(255, 255, 255, .12); }
.cbh-final-orb-2 { width: 220px; height: 220px; left: 80px; bottom: -130px; background: rgba(255, 255, 255, .09); }

.cbh-closing-inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
}

.cbh-closing-inner h2 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0;
    color: #fff;
    text-wrap: balance;
}

.cbh-closing-inner > p {
    font-size: 18px;
    line-height: 1.55;
    margin: 14px auto 0;
    color: rgba(255, 255, 255, .92);
    max-width: 480px;
    text-wrap: pretty;
}

/* =============================================================
   Responsive -- mirrors the design's single <900px breakpoint
   ============================================================= */
@media (max-width: 900px) {
    .cbh-hero-h1 { font-size: 40px; line-height: 1.05; }
    .cbh-center h2,
    .cbh-practice-head h2 { font-size: 27px; }
    .cbh-sec-path,
    .cbh-sec-how,
    .cbh-sec-price,
    .cbh-sec-faq { padding-top: 54px; }
    .cbh-section { padding-bottom: 54px; }
    .cbh-practice-pad { padding-top: 54px; padding-bottom: 54px; }

    /* hero -> single column, text first then fan */
    .cbh-hero-grid { grid-template-columns: 1fr; gap: 16px; padding: 110px 20px 28px; }
    .cbh-hero-shot { transform: scale(.66); transform-origin: top left; height: 300px; }

    /* the coding path scrolls horizontally already; keep it swipeable. On touch the
       swipe takes over (scrollbar already hidden), so the arrows are not needed. */
    .cbh-path-row { padding-bottom: 12px; }
    .cbh-path-nav { display: none; }

    /* practice band -> horizontal swipe */
    .cbh-practice-grid {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .cbh-practice-grid > .cbh-ex { flex: 0 0 210px; scroll-snap-align: start; }

    /* how it works -> column with down arrows */
    .cbh-how-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .cbh-how-card { max-width: none; }
    .cbh-how-arrow { justify-content: center; }
    .cbh-how-arrow .material-symbols-outlined { transform: rotate(90deg); }

    /* why bento -> single column */
    .cbh-bento { grid-template-columns: 1fr; }
    .cbh-bento-item,
    .cbh-bento-lead,
    .cbh-bento-tall,
    .cbh-bento-wide { grid-column: auto; grid-row: auto; }
    .cbh-bento-wide { flex-direction: column; align-items: flex-start; }

    /* price comparison -> horizontal swipe, sticky feature labels */
    .cbh-price-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 16px 0 10px; }
    .cbh-price-grid { min-width: 720px; margin: 0; }
    .cbh-price-label {
        position: sticky;
        left: 0;
        z-index: 3;
        background: var(--cbh-blue-tint);
        box-shadow: 7px 0 8px -6px rgba(2, 6, 23, .12);
    }

    .cbh-free { flex-direction: column; align-items: flex-start; }
    .cbh-final { padding: 54px 22px; }
    .cbh-closing-inner h2 { font-size: 30px; }
}

@media (max-width: 560px) {
    .cbh-wrap { padding-left: 20px; padding-right: 20px; }
    .cbh-hero-h1 { font-size: 34px; }
    .cbh-hero .cbh-lead { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .cbh-caret { animation: none; }
    .cbh-faq-mark { transition: none; }
    .cbh-btn { transition: none; }
    .cbh-btn:hover { transform: none; }
    .cbh-path-row { scroll-behavior: auto; }
}

/* =============================================================
   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 .cbh-shell,
body.dark-mode .cbh-shell {
    --cbh-blue-tint: #0b151b;
    --cbh-charcoal: #eaf2f8;
    --cbh-fg: #eaf2f8;
    --cbh-fg-secondary: #b8c6d2;
    --cbh-fg-muted: #8a9aa8;
    --cbh-divider: #2a3b47;
    --cbh-surface: #11202a;
    --cbh-border-subtle: rgba(255, 255, 255, .08);
    --cbh-border-default: #2a3b47;
    --cbh-gray-50: #16242e;
    --cbh-gray-300: #2a3b47;
    background: #0b151b;
}

/* surfaces that are #fff in light mode flip to the dark surface token */
html.dark-mode .cbh-sec-path,
body.dark-mode .cbh-sec-path,
html.dark-mode .cbh-sec-free,
body.dark-mode .cbh-sec-free {
    background: #0b151b;
}

html.dark-mode .cbh-how-card,
body.dark-mode .cbh-how-card,
html.dark-mode .cbh-how-repeat-pill,
body.dark-mode .cbh-how-repeat-pill,
html.dark-mode .cbh-bento-item,
body.dark-mode .cbh-bento-item,
html.dark-mode .cbh-faq-item,
body.dark-mode .cbh-faq-item {
    background: #11202a;
    border-color: #2a3b47;
}

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

html.dark-mode .cbh-how-ic,
body.dark-mode .cbh-how-ic,
html.dark-mode .cbh-bento-ic,
body.dark-mode .cbh-bento-ic {
    background: rgba(0, 180, 255, .14);
    color: #5BC8FF;
}

html.dark-mode .cbh-free,
body.dark-mode .cbh-free {
    background: linear-gradient(135deg, rgba(0, 180, 255, .12), #11202a 72%);
    border-color: #2a3b47;
}

/* The highlighted unQbd column reads in dark mode via a dark blue-tinted fill on
   its head + cells (the blue border + BEST VALUE badge keep their own contrast). */
html.dark-mode .cbh-price-head-us,
body.dark-mode .cbh-price-head-us {
    background: linear-gradient(180deg, rgba(0, 180, 255, .14), #11202a);
}

html.dark-mode .cbh-price-cell-us,
body.dark-mode .cbh-price-cell-us {
    background: #11202a;
}

/* The dark practice band, the gradient placeholder spines, the orange
   certificate node, and both gradient CTAs keep their own contrast in either
   theme, so they need no remap. The hero "Runs in your browser" pill and the
   per-language path-card chips/washes carry fixed ink chosen to read in both. */