/* =============================================================
   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: #00B4FF;
    --lv2-blue-deep: #0174B1;
    --lv2-tint: #F6FBFF;
    --lv2-charcoal: #222222;
    --lv2-orange: #FFAA00;
    --lv2-gray: #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;
}

/* 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: #777777;
    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: #999999; }
.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: #777777;
    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: #999999;
}
.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: #777777;
    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. */
.lv2 .listen-link {
    display: inline-block;
    margin-top: 8px;
    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(n+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(n+4) { display: none; }
}
@media (max-width: 640px) {
    .lv2 .listen-covers { grid-template-columns: repeat(2, 1fr); max-width: 440px; }
    /* 2 cols -> show 4 (2 rows of 2), hide the 5th so no dangling tile. */
    .lv2 .listen-item:nth-child(n+4) { display: revert; }
    .lv2 .listen-item:nth-child(n+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: #777777;
    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: #777777;
    margin: 32px 0 0;
}
.lv2 .library-link {
    display: inline-block;
    margin-top: 8px;
    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; }

.lv2 .trust {
    font-size: 13.5px;
    color: var(--lv2-ink-60);
    display: flex;
    align-items: center;
    gap: 10px;
}
.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, #0174B1, #00B4FF);
    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 safe-area on notched devices)
       to clear the fixed site nav on mobile */
    .lv2 .hero { padding: calc(88px + env(safe-area-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;
    }

    /* 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 */
    .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; }
    .lv2 .listen-covers { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .lv2 .rt-pill { padding: 4px 8px; font-size: 10px; gap: 3px; }
    .lv2 .rt-pill svg { flex: 0 0 10px; width: 10px; height: 10px; }

    /* 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; }

/* 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: #00B4FF;
}
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: #00B4FF;
}
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: #00B4FF;
    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;
}