/* =============================================================
   Landing V2 -- new marketing landing page design.
   All rules are scoped under .lv2 so we do not collide with the
   legacy home.css classes (.hero, .page, etc).
   Fonts, colors, and breakpoints come from the Hero.html design
   spec and are preserved verbatim.
   ============================================================= */

.lv2 {
    --lv2-blue: var(--brand-primary, #00B4FF);
    --lv2-blue-deep: var(--brand-secondary, #0174B1);
    --lv2-tint: var(--brand-bg, #F6FBFF);
    --lv2-charcoal: var(--brand-charcoal, #222222);
    --lv2-orange: var(--brand-cta, #FFAA00);
    --lv2-gray: var(--brand-divider, #E0E0E0);
    --lv2-ink-60: #5A6472;

    /* No max-width here -- each band stretches edge-to-edge so tinted/dark
       backgrounds (diff, listen, faq) don't clip at 1440 on wide screens.
       Section-level inners handle the actual content max-widths. */
    width: 100%;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--lv2-charcoal);
    -webkit-font-smoothing: antialiased;
}

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

/* Visually hidden but remains in the accessibility tree (for screen readers and
   document-outline consumers). Used for section headings that we don't want to
   render visibly but need semantically. */
.lv2 .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lv2 .hero-band { position: relative; background: #FFFFFF; }

/* DIFFERENTIATOR BAND -- picks up the blue tint to separate from the white hero */
.lv2 .diff-band {
    background: var(--lv2-tint);
    width: 100%;
    position: relative;
    z-index: 1;
}
.lv2 .diff-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 96px 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
}
.lv2 .diff-col { text-align: left; }
.lv2 .diff-icon {
    width: 40px;
    height: 40px;
    color: var(--lv2-blue);
    margin-bottom: 24px;
    display: block;
}
.lv2 .diff-icon svg { width: 100%; height: 100%; display: block; }
.lv2 .diff-head {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--lv2-charcoal);
    margin: 0 0 14px;
    line-height: 1.2;
}
.lv2 .diff-head::after {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    background: var(--lv2-orange);
    border-radius: 2px;
    margin-top: 12px;
}
.lv2 .diff-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #555555;
    margin: 0;
    max-width: 340px;
}

/* AUDIENCE DOORS -- "Where would you like to start?" Three clickable cards.
   Header mirrors the library band; cards mirror the .col compare cards. */
.lv2 .door-band { background: #FFFFFF; width: 100%; }
.lv2 .door-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 96px 80px;
    text-align: center;
}
.lv2 .door-kicker {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lv2-blue);
    margin: 0;
}
.lv2 .door-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--lv2-charcoal);
    margin: 10px 0 0;
}
.lv2 .door-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
    color: #555555;
    max-width: 600px;
    margin: 12px auto 0;
}
.lv2 .door-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}
.lv2 .door-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #FFFFFF;
    border: 1px solid var(--lv2-gray);
    border-radius: 16px;
    padding: 30px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.lv2 .door-card:hover {
    border-color: var(--lv2-blue);
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.18);
}
.lv2 .door-card:focus-visible {
    outline: 3px solid var(--lv2-blue);
    outline-offset: 2px;
}
.lv2 .door-icon {
    width: 40px;
    height: 40px;
    color: var(--lv2-blue);
    display: block;
}
.lv2 .door-icon svg { width: 100%; height: 100%; display: block; }
.lv2 .door-card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--lv2-charcoal);
    margin: 0;
    line-height: 1.2;
}
.lv2 .door-card-title::after {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    background: var(--lv2-orange);
    border-radius: 2px;
    margin-top: 12px;
}
.lv2 .door-card-body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #555555;
    margin: 0;
    flex: 1;
}
.lv2 .door-cta {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--lv2-blue);
    margin-top: auto;
}
.lv2 .door-card:hover .door-cta { color: var(--lv2-blue-deep); }

@media (max-width: 860px) {
    .lv2 .door-inner { padding: 80px 40px; }
    .lv2 .door-grid { grid-template-columns: 1fr; }
    .lv2 .door-title { font-size: 34px; }
}
@media (max-width: 560px) {
    .lv2 .door-inner { padding: 64px 24px; }
    .lv2 .door-title { font-size: 28px; }
    .lv2 .door-sub { font-size: 15px; }
    .lv2 .door-kicker { font-size: 11px; }
}

/* LEARNING JOURNEYS SHOWCASE -- "More than books. Journeys that teach."
   A read-only mirror of the Discover audience rails (Kids / Coding) in the lv2
   marketing system. Tint band so it separates from the white doors above and
   the white differentiators below. Header clones .door-kicker/.door-title/
   .door-sub; cards clone the .door-card look; arrows clone the coding-path nav. */
.lv2 .ljh-band { background: var(--lv2-tint); width: 100%; }
.lv2 .ljh-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 96px 80px;
}
.lv2 .ljh-kicker {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lv2-blue);
    margin: 0;
    text-align: center;
}
.lv2 .ljh-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--lv2-charcoal);
    margin: 10px 0 0;
    text-align: center;
}
.lv2 .ljh-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
    color: #555555;
    max-width: 620px;
    margin: 12px auto 0;
    text-align: center;
}
.lv2 .ljh-rail { margin-top: 56px; }
.lv2 .ljh-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.lv2 .ljh-rail-label {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--lv2-charcoal);
    margin: 0;
    line-height: 1.2;
}
.lv2 .ljh-rail-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lv2 .ljh-rail-all {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--lv2-blue);
    text-decoration: none;
    white-space: nowrap;
}
.lv2 .ljh-rail-all:hover { color: var(--lv2-blue-deep); }
/* The scroll track. Hidden scrollbar; the edge-aware arrows (siblings after the
   track) drive horizontal movement; touch swipe takes over on small screens. */
.lv2 .ljh-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 6px 2px 10px;
}
.lv2 .ljh-track::-webkit-scrollbar { display: none; }
.lv2 .ljh-card {
    flex: 0 0 auto;
    width: 300px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #FFFFFF;
    border: 1px solid var(--lv2-gray);
    border-radius: 16px;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.lv2 .ljh-card:hover {
    border-color: var(--lv2-blue);
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.18);
}
.lv2 .ljh-card:focus-visible {
    outline: 3px solid var(--lv2-blue);
    outline-offset: 2px;
}
.lv2 .ljh-card-covers {
    display: flex;
    align-items: flex-end;
    height: 70px;
}
.lv2 .ljh-card-spine {
    width: 46px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
    background: var(--lv2-tint);
}
/* Overlap the spines into a small fan. */
.lv2 .ljh-card-spine + .ljh-card-spine { margin-left: -16px; }
.lv2 .ljh-card-icon {
    width: 40px;
    height: 40px;
    color: var(--lv2-blue);
    display: block;
}
.lv2 .ljh-card-icon svg { width: 100%; height: 100%; display: block; }
.lv2 .ljh-chip {
    align-self: flex-start;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.01em;
    color: var(--lv2-blue-deep);
    background: var(--lv2-tint);
    border: 1px solid var(--lv2-gray);
    border-radius: 999px;
    padding: 4px 12px;
    line-height: 1.3;
}
.lv2 .ljh-card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--lv2-charcoal);
    margin: 0;
    line-height: 1.25;
}
.lv2 .ljh-card-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #555555;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lv2 .ljh-card-stops {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--lv2-ink-60);
    margin-top: auto;
}
/* ----- arrow-navigated rail controls (clone of the coding-path nav) ----- */
.lv2 .ljh-nav {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid var(--lv2-gray);
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.25);
    color: var(--lv2-blue-deep);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.lv2 .ljh-nav:hover { background: var(--lv2-tint); border-color: var(--lv2-blue); }
.lv2 .ljh-nav:focus-visible {
    outline: 3px solid var(--lv2-blue);
    outline-offset: 2px;
}
.lv2 .ljh-nav svg { width: 22px; height: 22px; display: block; }
/* Edge-aware: hide the prev arrow at the start and the next arrow at the end.
   The track and the arrows share .ljh-rail-head's row, but the JS toggles
   at-start / at-end on the TRACK; the arrows sit in the head ABOVE the track in
   the DOM, so we key off the track's classes via the rail wrapper. Because the
   arrows precede the track in source order we cannot use a sibling combinator
   from the track; instead the JS-toggled classes live on the track and CSS
   targets the head buttons through :has on the rail. */
.lv2 .ljh-rail:has(.ljh-track.at-start) .ljh-nav-prev,
.lv2 .ljh-rail:has(.ljh-track.at-end) .ljh-nav-next {
    opacity: 0;
    pointer-events: none;
    /* visibility:hidden takes the hidden arrow out of the tab order so keyboard
       users don't land on an invisible focus stop (WCAG 2.4.7). */
    visibility: hidden;
}

@media (max-width: 860px) {
    .lv2 .ljh-inner { padding: 80px 40px; }
}
@media (max-width: 720px) {
    .lv2 .ljh-nav { display: none; }
}
@media (max-width: 560px) {
    .lv2 .ljh-inner { padding: 64px 24px; }
    .lv2 .ljh-title { font-size: 28px; }
    .lv2 .ljh-sub { font-size: 15px; }
    .lv2 .ljh-kicker { font-size: 11px; }
    .lv2 .ljh-rail-label { font-size: 18px; }
}

/* PRICE COMPARISON */
.lv2 .compare-band {
    background: #FFFFFF;
    width: 100%;
    position: relative;
}
.lv2 .compare-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 120px 80px;
}
.lv2 .compare-header { text-align: center; }
.lv2 .compare-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -0.035em;
    color: var(--lv2-charcoal);
    margin: 0;
    line-height: 1.05;
}
.lv2 .compare-kicker {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #555555;
    margin: 24px 0 0;
    line-height: 1.5;
}
.lv2 .compare-grid {
    margin-top: 72px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}
.lv2 .col {
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid var(--lv2-gray);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
}
.lv2 .col.featured {
    background: var(--lv2-tint);
    border: 2px solid var(--lv2-blue);
    padding: 31px 27px;
    box-shadow: 0 20px 40px -24px rgba(0, 180, 255, 0.4);
}
.lv2 .col-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--lv2-charcoal);
    min-height: 44px;
    display: flex;
    align-items: center;
}
.lv2 .col-name svg,
.lv2 .col-name .compare-logo { height: 32px; width: auto; display: block; }
.lv2 .col hr {
    border: none;
    border-top: 1px solid var(--lv2-gray);
    margin: 20px 0;
    width: 100%;
}
.lv2 .col.featured hr { border-top-color: rgba(0, 180, 255, 0.25); }
.lv2 .col-price {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 48px;
    letter-spacing: -0.04em;
    color: var(--lv2-charcoal);
    line-height: 1;
}
.lv2 .col-per {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #6E6E6E;
    margin-top: 8px;
    letter-spacing: 0.02em;
}
.lv2 .feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lv2 .feat-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--lv2-charcoal);
    line-height: 1.3;
}
.lv2 .feat-list li.off { color: #6E6E6E; }
.lv2 .feat-ico {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
}
.lv2 .feat-ico svg { width: 18px; height: 18px; display: block; }
.lv2 .compare-note {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #6E6E6E;
    margin: 24px 0 0;
    line-height: 1.5;
}

/* FREE VS PREMIUM */
.lv2 .tier-band {
    background: #FFFFFF;
    width: 100%;
}
.lv2 .tier-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 96px 80px;
}
.lv2 .tier-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.lv2 .tier-kicker {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lv2-blue);
    margin: 0 0 18px;
}
.lv2 .tier-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -0.035em;
    color: var(--lv2-charcoal);
    margin: 0;
    line-height: 1.08;
}
.lv2 .tier-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #555555;
    line-height: 1.5;
    max-width: 560px;
    margin: 20px auto 0;
}
.lv2 .tier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 56px;
    align-items: stretch;
}
.lv2 .tier-card {
    background: #FFFFFF;
    border: 1px solid var(--lv2-gray);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
}
.lv2 .tier-card.premium {
    background: var(--lv2-tint);
    border: 2px solid var(--lv2-blue);
    padding: 39px;
    box-shadow: 0 24px 48px -28px rgba(0, 180, 255, 0.45);
}
.lv2 .tier-pill {
    display: inline-flex;
    align-self: flex-start;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 999px;
    background: #F0F0F0;
    color: #555555;
    margin-bottom: 28px;
    white-space: nowrap;
}
.lv2 .tier-card.premium .tier-pill {
    background: var(--lv2-blue);
    color: #FFFFFF;
}
.lv2 .tier-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.lv2 .tier-price .p {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 56px;
    letter-spacing: -0.04em;
    color: var(--lv2-charcoal);
    line-height: 1;
}
.lv2 .tier-price .u {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #6E6E6E;
}
.lv2 .tier-subprice {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--lv2-blue);
    margin-top: 4px;
}
.lv2 .tier-feat {
    list-style: none;
    margin: 28px 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.lv2 .tier-feat li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--lv2-charcoal);
    line-height: 1.35;
}
.lv2 .tier-feat .feat-ico { flex: 0 0 18px; }
.lv2 .tier-cta {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.005em;
    padding: 14px 16px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid var(--lv2-blue);
    background: transparent;
    color: var(--lv2-blue);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.lv2 .tier-cta:hover { background: var(--lv2-blue); color: #FFFFFF; }
.lv2 .tier-cta.solid {
    background: var(--lv2-blue);
    color: #FFFFFF;
}
.lv2 .tier-cta.solid:hover { background: var(--lv2-blue-deep); border-color: var(--lv2-blue-deep); }
.lv2 .tier-trial {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: rgba(34, 34, 34, 0.6);
    text-decoration: none;
}
.lv2 .tier-trial:hover { text-decoration: underline; color: var(--lv2-charcoal); }
.lv2 .tier-footnote {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #6E6E6E;
    margin: 24px 0 0;
    line-height: 1.5;
}

/* LISTEN SPOTLIGHT -- dark audiobook band.
   Spec was side-by-side (copy left, covers right), but at ~1120 max-width
   the 3-across grid left covers cramped at ~120px each. Stacked layout lets
   each cover breathe at ~200px and still keeps the band focused. */
.lv2 .listen-band {
    background: #0B1620;
    width: 100%;
}
.lv2 .listen-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    text-align: center;
}
.lv2 .listen-copy {
    min-width: 0;
    max-width: 640px;
}
.lv2 .listen-kicker {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lv2-blue);
    margin: 0;
}
.lv2 .listen-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 12px 0 0;
}
.lv2 .listen-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.55;
    color: #B8C5D3;
    margin: 20px auto 0;
    max-width: 520px;
}
.lv2 .listen-note {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #7A8A9A;
    margin: 16px 0 0;
}
.lv2 .listen-covers {
    width: 100%;
    max-width: 1120px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    min-width: 0;
    align-items: start;
    justify-items: center;
}
/* Each audiobook tile is just a BookCard. 1120px / 5 with 24 gap = ~208px each at desktop. */
.lv2 .listen-item {
    display: block;
    width: 100%;
}

/* Secondary CTA below the covers, mirrors .library-link on the light bands but
   uses a lighter blue so it stays readable on the dark #0B1620 listen band.
   Vertical spacing from the covers is delegated to .listen-inner's 56px flex
   gap -- no margin-top here, so listen and library match at exactly 56px. */
.lv2 .listen-link {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: #4DB8FF;
    text-decoration: none;
}
.lv2 .listen-link:hover { text-decoration: underline; color: #4DB8FF; }

/* LISTEN -- responsive cover-grid collapse.
   Desktop shows 5 covers. Narrow viewports drop columns for breathing room,
   and we hide the trailing tiles that would otherwise land as orphans on
   their own row (e.g. 3-col grid + 5 tiles = 3 + 2 orphan row).
   Column counts and visible tiles: 5 cols -> 5, 4 cols -> 4, 3 cols -> 3,
   2 cols -> 4 (two clean rows of 2). */
@media (max-width: 1200px) {
    .lv2 .listen-covers { grid-template-columns: repeat(4, 1fr); max-width: 880px; }
    .lv2 .listen-item:nth-child(5) { display: none; }
}
@media (max-width: 960px) {
    .lv2 .listen-inner { gap: 48px; padding: 64px 40px; }
    .lv2 .listen-title { font-size: 40px; }
    .lv2 .listen-covers { grid-template-columns: repeat(3, 1fr); max-width: 680px; gap: 20px; }
    .lv2 .listen-item:nth-child(4),
    .lv2 .listen-item:nth-child(5) { display: none; }
}
@media (max-width: 640px) {
    .lv2 .listen-covers { grid-template-columns: repeat(2, 1fr); max-width: 440px; }
    /* 2 cols -> show 4 (two clean rows of 2), hide only the 5th.
       `display: block` is explicit instead of revert so the 4th tile is
       reliably restored across browsers after @960 hid it. */
    .lv2 .listen-item:nth-child(4) { display: block; }
    .lv2 .listen-item:nth-child(5) { display: none; }
}
@media (max-width: 480px) {
    .lv2 .listen-inner { padding: 56px 24px; }
    .lv2 .listen-title { font-size: 34px; }
    .lv2 .listen-covers { gap: 14px; max-width: 100%; }
}

/* THIS WEEK'S FREE PICKS
   Deliberately simple: two book-cover tiles with a Free badge. Hover reveals
   the title, author, and CTA as an overlay -- mirrors the existing BookCard
   interaction pattern elsewhere on the site. */
.lv2 .picks-band { background: #FFFFFF; width: 100%; }
.lv2 .picks-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 96px 80px;
}
.lv2 .picks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    justify-content: center;
    gap: 48px;
    margin-top: 56px;
}
/* Each pick is just a BookCard constrained by the grid cell (max 260px). */
.lv2 .pick-card { display: block; width: 100%; }

/* Picks -- 1 col on narrow screens, single centered column */
@media (max-width: 720px) {
    .lv2 .picks-grid {
        grid-template-columns: minmax(0, 260px);
        gap: 24px;
    }
}

/* CONVERSION BRIDGE */
.lv2 .bridge-band { background: #FFFFFF; width: 100%; }
.lv2 .bridge-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 40px;
    text-align: center;
}
.lv2 .bridge-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--lv2-charcoal);
    margin: 0;
}
.lv2 .bridge-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
    color: #555555;
    max-width: 540px;
    margin: 14px auto 0;
}
.lv2 .bridge-ctas {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.lv2 .bridge-cta {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
    cursor: pointer;
}
.lv2 .bridge-cta.primary {
    background: var(--lv2-blue);
    color: #FFFFFF;
    border: 1.5px solid var(--lv2-blue);
    box-shadow: 0 6px 16px rgba(0, 180, 255, 0.28);
}
.lv2 .bridge-cta.primary:hover { background: var(--lv2-blue-deep); border-color: var(--lv2-blue-deep); color: #FFFFFF; }
.lv2 .bridge-cta.secondary {
    background: transparent;
    color: var(--lv2-blue);
    border: 1.5px solid var(--lv2-blue);
}
.lv2 .bridge-cta.secondary:hover { background: rgba(0, 180, 255, 0.08); color: var(--lv2-blue); }
.lv2 .bridge-note {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #6E6E6E;
    margin: 14px 0 0;
}
@media (max-width: 560px) {
    .lv2 .bridge-ctas { flex-direction: column; align-items: stretch; }
    .lv2 .bridge-cta { width: 100%; }
}

/* INSIDE THE LIBRARY -- 12 covers in a 4-per-row desktop grid. Spec had 10 in
   5 columns; we bumped to 12 / 4-wide so covers read bigger and more premium. */
.lv2 .library-band { background: #FFFFFF; width: 100%; }
.lv2 .library-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 96px 80px;
    text-align: center;
}
.lv2 .library-kicker {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lv2-blue);
    margin: 0;
}
.lv2 .library-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--lv2-charcoal);
    margin: 10px 0 0;
}
.lv2 .library-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
    color: #555555;
    max-width: 620px;
    margin: 12px auto 0;
}
.lv2 .library-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 220px));
    column-gap: 28px;
    row-gap: 32px;
    justify-content: center;
}
/* Each library tile is just a BookCard; the grid cell constrains the width. */
.lv2 .library-grid .library-item { display: block; width: 100%; }
.lv2 .library-footnote {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #6E6E6E;
    margin: 32px 0 0;
}
.lv2 .library-link {
    display: inline-block;
    /* 56px matches the audiobooks band exactly (listen-inner flex gap).
       The library container isn't flex so we use margin-top here instead. */
    margin-top: 56px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--lv2-blue);
    text-decoration: none;
    letter-spacing: -0.005em;
}
.lv2 .library-link:hover { text-decoration: underline; }

@media (max-width: 1100px) {
    .lv2 .library-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 26px;
    }
}
@media (max-width: 860px) {
    .lv2 .library-inner { padding: 80px 40px; }
    .lv2 .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lv2 .library-title { font-size: 34px; }
}
@media (max-width: 560px) {
    .lv2 .library-inner { padding: 64px 24px; }
    .lv2 .library-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 14px;
        row-gap: 18px;
        margin-top: 32px;
    }
    .lv2 .library-title { font-size: 28px; }
    .lv2 .library-sub { font-size: 15px; }
    .lv2 .library-kicker { font-size: 11px; }
}

/* FAQ
   Spec uses native <details>/[open] selectors. We drive open/closed state from
   Blazor (single-open accordion) and mirror the same styling via a .open class. */
.lv2 .faq-band { background: var(--lv2-tint); width: 100%; }
.lv2 .faq-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 96px 80px;
}
.lv2 .faq-list {
    max-width: 800px;
    margin: 56px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lv2 .faq-item {
    background: #FFFFFF;
    border: 1px solid var(--lv2-gray);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.lv2 .faq-item.open {
    border-color: rgba(0, 180, 255, 0.35);
    box-shadow: 0 14px 30px -18px rgba(0, 180, 255, 0.18);
}
.lv2 .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--lv2-charcoal);
    line-height: 1.35;
    text-align: left;
    transition: background .15s ease;
}
.lv2 .faq-q:hover { background: rgba(0, 180, 255, 0.10); }
.lv2 .faq-q:focus-visible { outline: 2px solid var(--lv2-blue); outline-offset: -2px; }
/* Text selection across the landing -- default browser blue on a tinted band
   blends in, so use a more saturated blue with dark text. */
.lv2 ::selection { background: rgba(0, 180, 255, 0.35); color: var(--lv2-charcoal); }
.lv2 .faq-chev {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--lv2-blue);
    transition: transform .22s ease;
}
.lv2 .faq-item.open .faq-chev { transform: rotate(180deg); }
.lv2 .faq-a {
    padding: 0 24px 22px;
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(34, 34, 34, 0.8);
}
@media (max-width: 720px) {
    .lv2 .faq-inner { padding: 72px 24px; }
    .lv2 .faq-list { margin-top: 40px; }
}
@media (max-width: 560px) {
    .lv2 .faq-inner { padding: 64px 20px; }
    .lv2 .faq-list { margin-top: 32px; gap: 10px; }
    .lv2 .faq-q { padding: 16px 18px; font-size: 15.5px; gap: 16px; }
    .lv2 .faq-a { padding: 0 18px 18px; font-size: 14.5px; }
}

/* Subtle dot-grid accent on the right side of the hero band */
.lv2 .hero-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(1, 116, 177, 0.07) 1px, transparent 1.2px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 900px 500px at 82% 55%, rgba(0,0,0,0.5), transparent 70%);
            mask-image: radial-gradient(ellipse 900px 500px at 82% 55%, rgba(0,0,0,0.5), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* HERO
   Top padding is larger than the spec's 96px because the site's NavSelector
   is position: fixed and overlays the hero -- we pad to clear it plus
   breathing room. Bottom padding preserved per spec.
   max-width centers the content block now that .lv2 itself no longer caps. */
.lv2 .hero {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 140px 80px 120px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 72px;
    align-items: center;
}

.lv2 .hero h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 92px;
    line-height: 0.96;
    letter-spacing: -0.045em;
    margin: 0 0 26px;
    color: var(--lv2-charcoal);
}
.lv2 .hero h1 .dot-o { color: var(--lv2-orange); }
.lv2 .hero h1 .dot-b { color: var(--lv2-blue); }

.lv2 .subhead {
    font-size: 20px;
    line-height: 1.45;
    color: var(--lv2-ink-60);
    max-width: 520px;
    font-weight: 400;
    margin: 0 0 36px;
}
.lv2 .subhead .price {
    color: var(--lv2-charcoal);
    font-weight: 600;
}
/* Closing "Per year." gets italic emphasis so the reframing beat reads as
   intentional conversational emphasis rather than an accidental stutter. */
.lv2 .subhead .emphasis {
    font-style: italic;
    font-weight: 600;
    color: var(--lv2-charcoal);
}

.lv2 .cta-row {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.lv2 .btn {
    font-family: inherit;
    border: none;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    text-decoration: none;
}

.lv2 .btn-lg-primary {
    background: var(--lv2-orange);
    color: var(--lv2-charcoal);
    padding: 17px 28px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 2px 0 rgba(0,0,0,0.05), 0 14px 28px -10px rgba(255,170,0,0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lv2 .btn-lg-primary:hover { transform: translateY(-1px); color: var(--lv2-charcoal); }

.lv2 .btn-lg-ghost {
    background: transparent;
    color: var(--lv2-blue);
    padding: 15px 26px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid var(--lv2-blue);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.lv2 .btn-lg-ghost:hover { background: var(--lv2-blue); color: #fff; }
.lv2 .btn-lg-ghost svg { width: 14px; height: 14px; }

/* Visible keyboard focus for the hero + tier CTAs. Bootstrap's .btn:focus-visible
   sets outline:0; the .lv2 scope beats it. The outline sits outside the button so it
   stays visible on both the ghost and the solid-blue tier CTA. */
.lv2 .btn:focus-visible,
.lv2 .tier-cta:focus-visible {
    /* Deeper blue (#0174B1, ~5:1 on white) not --lv2-blue (#00B4FF, ~2.3:1) so the
       focus ring itself meets the 3:1 non-text-contrast bar against the page. */
    outline: 3px solid var(--lv2-blue-deep);
    outline-offset: 2px;
}

.lv2 .trust {
    font-size: 13.5px;
    color: var(--lv2-ink-60);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* "No account needed. See pricing" line under the hero CTAs, shown only when the
   sample CTA replaces the See-pricing button. */
.lv2 .hero-sample-note {
    font-size: 13.5px;
    color: var(--lv2-ink-60);
    margin: -6px 0 18px;
}
.lv2 .hero-textlink {
    color: var(--lv2-blue-deep, #0174B1);
    font-weight: 600;
    text-decoration: underline;
}
body.dark-mode .lv2 .hero-sample-note { color: #B8C5D3; }
.lv2 .trust .check {
    width: 14px; height: 14px;
    flex: 0 0 14px;
    border-radius: 50%;
    background: rgba(0, 180, 255, 0.12);
    display: grid; place-items: center;
}
.lv2 .trust .check::after {
    content: "";
    width: 5px; height: 8px;
    border-right: 2px solid var(--lv2-blue-deep);
    border-bottom: 2px solid var(--lv2-blue-deep);
    transform: rotate(45deg) translate(-1px, -1px);
}

/* Differentiator strip -- three confident lines, no labels */
.lv2 .diffs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 64px;
    padding-top: 28px;
    border-top: 1px solid var(--lv2-gray);
    max-width: 620px;
}
.lv2 .diff {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--lv2-charcoal);
    letter-spacing: -0.01em;
}
.lv2 .diff .bullet {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--lv2-blue);
}

/* RIGHT -- book stack */
.lv2 .visual {
    position: relative;
    height: 600px;
}
.lv2 .visual::before {
    content: "";
    position: absolute;
    width: 480px; height: 560px;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle at center, rgba(0,180,255,0.14), transparent 65%);
    filter: blur(10px);
    z-index: 0;
}

.lv2 .book {
    position: absolute;
    width: 210px;
    /* 210 * 8 / 5 = 336. Height matches the 5:8 cover source (300x480 per
       UploadConstants) so object-fit: cover fills exactly -- no top/bottom
       crop on the hero covers. */
    height: 336px;
    border-radius: 6px 10px 10px 6px;
    overflow: hidden;
    box-shadow:
        0 34px 60px -22px rgba(1, 36, 56, 0.38),
        0 14px 28px -12px rgba(1, 36, 56, 0.25);
    background: #fff;
}
.lv2 .book img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lv2 .book::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 10px;
    background: linear-gradient(to right, rgba(0,0,0,0.22), rgba(0,0,0,0));
    z-index: 2;
}
.lv2 .book::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 42%);
    z-index: 3;
    pointer-events: none;
}

/* 5 books, fanned. Stride tightened from 120 -> 85 so all 5 fit inside the
   ~590px right grid column on 1440 desktop without clipping. */
.lv2 .book.b1 { top: 40px;  left: 6px;   transform: rotate(-13deg); z-index: 1; }
.lv2 .book.b2 { top: 62px;  left: 91px;  transform: rotate(-6deg);  z-index: 2; }
.lv2 .book.b3 { top: 78px;  left: 176px; transform: rotate(0deg);   z-index: 3; }
.lv2 .book.b4 { top: 66px;  left: 261px; transform: rotate(6deg);   z-index: 4; }
.lv2 .book.b5 { top: 46px;  left: 346px; transform: rotate(13deg);  z-index: 5; }

/* Now playing chip */
.lv2 .now-playing {
    position: absolute;
    bottom: 30px;
    left: 60px;
    z-index: 6;
    background: #fff;
    border: 1px solid var(--lv2-gray);
    border-radius: 14px;
    padding: 12px 16px 12px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 20px 40px -18px rgba(1,36,56,0.28), 0 4px 10px -4px rgba(1,36,56,0.12);
    width: 290px;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
a.lv2-chip-link { display: inline-block; }
a.lv2-chip-link:focus-visible .now-playing {
    outline: 2px solid var(--lv2-blue);
    outline-offset: 2px;
}
a.lv2-chip-link:hover .now-playing {
    transform: translateY(-2px);
    box-shadow: 0 26px 48px -18px rgba(1,36,56,0.34), 0 6px 14px -4px rgba(1,36,56,0.16);
}
.lv2 .np-cover {
    width: 42px; height: 42px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--lv2-blue-deep), var(--lv2-blue));
    flex: 0 0 42px;
    position: relative;
    overflow: hidden;
}
.lv2 .np-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lv2 .np-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.3), transparent 50%);
    border-radius: 8px;
    pointer-events: none;
}
.lv2 .np-meta { flex: 1; min-width: 0; }
.lv2 .np-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--lv2-blue-deep);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.lv2 .np-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--lv2-charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.lv2 .np-bar {
    height: 3px;
    background: var(--lv2-gray);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.lv2 .np-bar i {
    display: block;
    width: 62%;
    height: 100%;
    background: var(--lv2-blue);
    border-radius: 2px;
}
.lv2 .np-play {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--lv2-charcoal);
    display: grid;
    place-items: center;
    flex: 0 0 34px;
}
.lv2 .np-play::after {
    content: "";
    width: 0; height: 0;
    border-left: 8px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-left: 2px;
}

/* ================= RESPONSIVE PASS ================= */

/* TABLET (<= 900px) */
@media (max-width: 900px) {
    .lv2 .hero {
        grid-template-columns: 1fr;
        gap: 56px;
        /* Top padding bumped from spec 56 -> 112 to clear the fixed site nav */
        padding: 112px 40px 72px;
    }
    .lv2 .hero h1 { font-size: 72px; margin-bottom: 22px; }
    .lv2 .subhead { font-size: 18px; max-width: none; margin-bottom: 28px; }
    .lv2 .cta-row { flex-wrap: wrap; }
    .lv2 .diffs {
        grid-template-columns: 1fr 1fr;
        margin-top: 48px;
        gap: 22px;
        max-width: none;
    }

    /* Book stack -- scale the whole stage down, keep the fan */
    .lv2 .visual {
        height: 440px;
        transform: scale(0.78);
        transform-origin: top left;
        margin-bottom: -100px;
    }

    /* DIFFERENTIATOR BAND */
    .lv2 .diff-inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 72px 40px;
    }
    .lv2 .diff-sub { max-width: none; }

    /* PRICE COMPARISON -- 2x2 grid */
    .lv2 .compare-inner { padding: 88px 40px; }
    .lv2 .compare-title { font-size: 40px; }
    .lv2 .compare-kicker { font-size: 16px; }
    .lv2 .compare-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-top: 56px;
    }

    /* FREE VS PREMIUM */
    .lv2 .tier-inner { padding: 80px 40px; }
    .lv2 .tier-title { font-size: 40px; }
    .lv2 .tier-sub { font-size: 17px; }
    .lv2 .tier-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
    .lv2 .tier-card, .lv2 .tier-card.premium { padding: 32px; }
    .lv2 .tier-card.premium { padding: 31px; }

    /* LISTEN SPOTLIGHT -- tablet padding / gap */
    .lv2 .listen-inner { gap: 44px; padding: 64px 40px; }

    /* PICKS */
    .lv2 .picks-inner { padding: 80px 40px; }

    /* BRIDGE */
    .lv2 .bridge-inner { padding: 64px 40px; }
}

/* MOBILE (<= 560px) */
@media (max-width: 560px) {
    /* Top padding bumped from spec 36 -> 88 (plus the top-nav safe-area inset) to
       clear the fixed site nav on mobile. Uses --topnav-inset-top so it accounts
       for the Android status bar (env(safe-area-inset-top) is 0 there). */
    .lv2 .hero { padding: calc(88px + var(--topnav-inset-top)) 20px 56px; gap: 44px; }
    .lv2 .hero h1 { font-size: 52px; letter-spacing: -0.04em; margin-bottom: 18px; }
    .lv2 .subhead { font-size: 16px; margin-bottom: 22px; line-height: 1.5; }
    .lv2 .cta-row { gap: 10px; margin-bottom: 14px; }
    .lv2 .btn-lg-primary { padding: 15px 22px; font-size: 15px; flex: 1; min-width: 0; text-align: center; }
    .lv2 .btn-lg-ghost { padding: 13px 20px; font-size: 15px; flex: 1; justify-content: center; min-width: 0; }
    .lv2 .trust { font-size: 12.5px; }
    .lv2 .diffs {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 36px;
        padding-top: 22px;
    }
    .lv2 .diff { font-size: 14px; }

    /* Book stack -- scale even smaller, re-anchor */
    .lv2 .visual {
        height: 340px;
        transform: scale(0.55);
        transform-origin: top left;
        margin-bottom: -160px;
    }
    /* The now-playing chip is decorative and becomes illegible at 0.55 scale
       (~7px title). Hide it on phones -- "audiobooks included" is in the hero copy
       and the "Read a free sample" CTA covers the try-a-book affordance. Hide the
       .lv2-chip-link anchor too: the live-clip variant wraps the chip in a link, and
       hiding only the child would leave an invisible, keyboard-focusable tab stop. */
    .lv2 .lv2-chip-link,
    .lv2 .now-playing { display: none; }

    /* DIFFERENTIATOR BAND */
    .lv2 .diff-inner { padding: 56px 20px; gap: 40px; }
    .lv2 .diff-head { font-size: 20px; }
    .lv2 .diff-sub { font-size: 15px; }

    /* PRICE COMPARISON -- 1 column */
    .lv2 .compare-inner { padding: 64px 20px; }
    .lv2 .compare-title { font-size: 30px; letter-spacing: -0.03em; }
    .lv2 .compare-kicker { font-size: 15px; margin-top: 16px; }
    .lv2 .compare-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 40px;
    }
    .lv2 .col, .lv2 .col.featured { padding: 24px 22px; }
    .lv2 .col.featured { padding: 23px 21px; }
    .lv2 .col-price { font-size: 40px; }

    /* FREE VS PREMIUM */
    .lv2 .tier-inner { padding: 64px 20px; }
    .lv2 .tier-kicker { font-size: 12px; margin-bottom: 14px; }
    .lv2 .tier-title { font-size: 30px; letter-spacing: -0.03em; }
    .lv2 .tier-sub { font-size: 15.5px; margin-top: 16px; }
    .lv2 .tier-grid { margin-top: 36px; gap: 20px; }
    .lv2 .tier-card, .lv2 .tier-card.premium { padding: 26px; border-radius: 14px; }
    .lv2 .tier-card.premium { padding: 25px; }
    .lv2 .tier-price .p { font-size: 44px; }
    .lv2 .tier-feat li { font-size: 15px; }

    /* LISTEN SPOTLIGHT -- mobile. Grid column count is driven by the narrower
       @640 rule above; redefining it here would undo that 2-col layout.
       .rt-pill is dead (absorbed into .audiobook-badge inside BookCard). */
    .lv2 .listen-inner { padding: 56px 20px; gap: 36px; }
    .lv2 .listen-title { font-size: 30px; letter-spacing: -0.02em; }
    .lv2 .listen-sub { font-size: 15.5px; }

    /* PICKS */
    .lv2 .picks-inner { padding: 64px 20px; }

    /* BRIDGE */
    .lv2 .bridge-inner { padding: 52px 20px; }
    .lv2 .bridge-title { font-size: 26px; }
    .lv2 .bridge-sub { font-size: 15.5px; }
}

/* VERY NARROW (<= 380px) */
@media (max-width: 380px) {
    .lv2 .hero h1 { font-size: 44px; }
    .lv2 .compare-title, .lv2 .tier-title { font-size: 26px; }
    .lv2 .cta-row { flex-direction: column; align-items: stretch; }
    .lv2 .btn-lg-primary, .lv2 .btn-lg-ghost { flex: none; width: 100%; }
}

/* =============================================================
   DARK MODE
   Inverts page surfaces + text. The dark audiobook band (#0B1620)
   is already dark and needs no overrides. Brand blue and orange
   read well on both backgrounds and stay the same.
   ============================================================= */

body.dark-mode .lv2 { background: #121212; color: #E8EAED; }

/* White bands flip to the page dark surface. */
body.dark-mode .lv2 .hero-band,
body.dark-mode .lv2 .compare-band,
body.dark-mode .lv2 .tier-band,
body.dark-mode .lv2 .picks-band,
body.dark-mode .lv2 .bridge-band,
body.dark-mode .lv2 .library-band {
    background: #121212;
}

/* Tinted bands flip to a slightly lighter dark surface so they still separate visually. */
body.dark-mode .lv2 .diff-band,
body.dark-mode .lv2 .faq-band {
    background: #1a1a1a;
}

/* Hero */
body.dark-mode .lv2 .hero h1 { color: #F5F5F5; }
body.dark-mode .lv2 .subhead { color: #B8C5D3; }
body.dark-mode .lv2 .subhead .price { color: #F5F5F5; }
body.dark-mode .lv2 .subhead .emphasis { color: #F5F5F5; }
body.dark-mode .lv2 .trust { color: #B8C5D3; }
body.dark-mode .lv2 .diffs { border-top-color: rgba(255, 255, 255, 0.12); }
body.dark-mode .lv2 .diff { color: #E8EAED; }
body.dark-mode .lv2 .hero-band::before {
    background-image: radial-gradient(circle, rgba(0, 180, 255, 0.12) 1px, transparent 1.2px);
}

/* Now playing chip */
body.dark-mode .lv2 .now-playing {
    background: #1e2b38;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.55), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
}
body.dark-mode .lv2 .np-title { color: #F5F5F5; }
body.dark-mode .lv2 .np-label { color: #4DB8FF; }
body.dark-mode .lv2 .np-bar { background: rgba(255, 255, 255, 0.15); }
/* Charcoal play-button background would vanish on the dark chip bg; raise to a muted slate. */
body.dark-mode .lv2 .np-play { background: #4a5568; }

/* Differentiators */
body.dark-mode .lv2 .diff-head { color: #F5F5F5; }
body.dark-mode .lv2 .diff-sub { color: #B8C5D3; }

/* Audience doors */
body.dark-mode .lv2 .door-band { background: #121212; }
body.dark-mode .lv2 .door-kicker { color: #4DB8FF; }
body.dark-mode .lv2 .door-title { color: #F5F5F5; }
body.dark-mode .lv2 .door-sub { color: #B8C5D3; }
body.dark-mode .lv2 .door-card {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .lv2 .door-card:hover { border-color: var(--lv2-blue); }
body.dark-mode .lv2 .door-card-title { color: #F5F5F5; }
body.dark-mode .lv2 .door-card-body { color: #B8C5D3; }
body.dark-mode .lv2 .door-cta { color: #4DB8FF; }

/* Learning journeys showcase -- tint band flips to a slightly lighter dark
   surface (matching .diff-band) so it still separates from the dark doors above. */
body.dark-mode .lv2 .ljh-band { background: #1a1a1a; }
body.dark-mode .lv2 .ljh-kicker { color: #4DB8FF; }
body.dark-mode .lv2 .ljh-title { color: #F5F5F5; }
body.dark-mode .lv2 .ljh-sub { color: #B8C5D3; }
body.dark-mode .lv2 .ljh-rail-label { color: #F5F5F5; }
body.dark-mode .lv2 .ljh-rail-all { color: #4DB8FF; }
body.dark-mode .lv2 .ljh-card {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .lv2 .ljh-card:hover { border-color: var(--lv2-blue); }
body.dark-mode .lv2 .ljh-card-icon { color: #4DB8FF; }
body.dark-mode .lv2 .ljh-chip {
    color: #4DB8FF;
    background: rgba(0, 180, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .lv2 .ljh-card-title { color: #F5F5F5; }
body.dark-mode .lv2 .ljh-card-desc { color: #B8C5D3; }
body.dark-mode .lv2 .ljh-card-stops { color: #9CA3AF; }
body.dark-mode .lv2 .ljh-nav {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.12);
    color: #4DB8FF;
}
body.dark-mode .lv2 .ljh-nav:hover { background: #16222c; border-color: var(--lv2-blue); }

/* Price comparison */
body.dark-mode .lv2 .compare-title { color: #F5F5F5; }
body.dark-mode .lv2 .compare-kicker { color: #B8C5D3; }
body.dark-mode .lv2 .col {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .lv2 .col.featured {
    background: #16222c;
    border-color: var(--lv2-blue);
}
body.dark-mode .lv2 .col-name { color: #F5F5F5; }
body.dark-mode .lv2 .col hr { border-top-color: rgba(255, 255, 255, 0.08); }
body.dark-mode .lv2 .col.featured hr { border-top-color: rgba(0, 180, 255, 0.35); }
body.dark-mode .lv2 .col-price { color: #F5F5F5; }
body.dark-mode .lv2 .col-per { color: #9CA3AF; }
body.dark-mode .lv2 .feat-list li { color: #E8EAED; }
body.dark-mode .lv2 .feat-list li.off { color: #6b7280; }
body.dark-mode .lv2 .compare-note { color: #9CA3AF; }
body.dark-mode .lv2 .compare-logo { filter: brightness(1.1); }

/* Free vs Premium */
body.dark-mode .lv2 .tier-kicker { color: #4DB8FF; }
body.dark-mode .lv2 .tier-title { color: #F5F5F5; }
body.dark-mode .lv2 .tier-sub { color: #B8C5D3; }
body.dark-mode .lv2 .tier-card {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .lv2 .tier-card.premium {
    background: #16222c;
    border-color: var(--lv2-blue);
}
body.dark-mode .lv2 .tier-pill {
    background: rgba(255, 255, 255, 0.08);
    color: #B8C5D3;
}
body.dark-mode .lv2 .tier-card.premium .tier-pill {
    background: var(--lv2-blue);
    color: #FFFFFF;
}
body.dark-mode .lv2 .tier-price .p { color: #F5F5F5; }
body.dark-mode .lv2 .tier-price .u { color: #6b7280; }
body.dark-mode .lv2 .tier-feat li { color: #E8EAED; }
body.dark-mode .lv2 .tier-trial { color: rgba(232, 234, 237, 0.6); }
body.dark-mode .lv2 .tier-trial:hover { color: #F5F5F5; }
body.dark-mode .lv2 .tier-footnote { color: #9CA3AF; }
body.dark-mode .lv2 .tier-subprice { color: #4DB8FF; }

/* Bridge */
body.dark-mode .lv2 .bridge-title { color: #F5F5F5; }
body.dark-mode .lv2 .bridge-sub { color: #B8C5D3; }
body.dark-mode .lv2 .bridge-note { color: #9CA3AF; }
body.dark-mode .lv2 .bridge-cta.secondary:hover { background: rgba(0, 180, 255, 0.12); }

/* Library */
body.dark-mode .lv2 .library-kicker { color: #4DB8FF; }
body.dark-mode .lv2 .library-title { color: #F5F5F5; }
body.dark-mode .lv2 .library-sub { color: #B8C5D3; }
body.dark-mode .lv2 .library-footnote { color: #9CA3AF; }

/* FAQ */
body.dark-mode .lv2 .faq-item {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .lv2 .faq-item.open {
    border-color: rgba(0, 180, 255, 0.4);
    box-shadow: 0 14px 30px -18px rgba(0, 180, 255, 0.24);
}
body.dark-mode .lv2 .faq-q { color: #F5F5F5; }
body.dark-mode .lv2 .faq-q:hover { background: rgba(0, 180, 255, 0.08); }
body.dark-mode .lv2 .faq-a { color: rgba(232, 234, 237, 0.8); }

/* Selection in dark mode -- inverted so the highlight stays readable. */
body.dark-mode .lv2 ::selection {
    background: rgba(0, 180, 255, 0.45);
    color: #0b0b0b;
}