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

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

/* 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: 132px 80px 104px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 72px;
    align-items: center;
}

.lv2 .hero h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(56px, 5.6vw, 80px);
    line-height: 1.02;
    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 "less than a dollar a week." gets italic emphasis: it is the beat that
   reframes the annual price, so it carries the line and should not read as flat
   trailing body text after the charcoal price above it. */
.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); }

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

/* RIGHT -- book stack */
.lv2 .visual {
    position: relative;
    height: 480px;
}
/* The five-cover fan is a fixed 556px stage; on laptop widths its column is narrower,
   so scale it rather than let the last cover run off the page. */
@media (min-width: 901px) and (max-width: 1320px) {
    .lv2 .visual { transform: scale(0.86); transform-origin: top left; }
}
.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; }

/* ================= 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: 64px; margin-bottom: 22px; }
    .lv2 .subhead { font-size: 18px; max-width: none; margin-bottom: 28px; }
    .lv2 .cta-row { flex-wrap: wrap; }

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

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

/* 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: 44px; 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 .trust { font-size: 12.5px; }

    /* Book stack -- scale even smaller, re-anchor */
    .lv2 .visual {
        height: 340px;
        transform: scale(0.55);
        transform-origin: top left;
        margin-bottom: -160px;
    }

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

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

/* =============================================================
   DARK MODE
   Inverts page surfaces + text. Brand blue and orange read well on
   both backgrounds and stay the same. The sections from the October
   2026 redesign carry their own dark rules at the end of this file.
   ============================================================= */

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 .tier-band {
    background: #121212;
}

/* Tinted bands flip to a slightly lighter dark surface so they still separate visually. */
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 .hero-band::before {
    background-image: radial-gradient(circle, rgba(0, 180, 255, 0.12) 1px, transparent 1.2px);
}

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

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

/* Signup audit: readable actions, concise comparisons and a clear final next step. */
.lv2 .tier-cta { color: var(--lv2-blue-deep); }
.lv2 .tier-cta.solid { background: var(--lv2-blue-deep); color: #fff; }
body.dark-mode .lv2 .tier-cta:not(.solid) { color: #4DB8FF; }

/* =============================================================
   Homepage sections from the October 9, 2026 design review:
   hero call to action, comparison, Watch, library wall, doors,
   read anywhere, questions and the closing card.
   ============================================================= */

/* Shared section headings */
.lv2 .compare-title,
.lv2 .lvw-title,
.lv2 .library-title,
.lv2 .getapp-title,
.lv2 .faq-title,
.lv2 .landing-closing h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--lv2-charcoal);
    margin: 0;
}
.lv2 .compare-kicker,
.lv2 .lvw-sub,
.lv2 .library-sub,
.lv2 .getapp-sub {
    font-size: 18px;
    line-height: 1.5;
    color: var(--lv2-ink-60);
    margin: 14px 0 0;
}
.lv2 .lvw-cta,
.lv2 .library-link {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.lv2 .lvw-cta:hover,
.lv2 .library-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.lv2 .lvw-cta:focus-visible,
.lv2 .library-link:focus-visible,
.lv2 .door-card:focus-visible,
.lv2 .library-cover:focus-visible,
.lv2 .getapp-badge:focus-visible,
.lv2 .hero-free-link:focus-visible,
.lv2 .cmp-free a:focus-visible {
    outline: 3px solid var(--lv2-blue-deep);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Hero: one button, a free account one small link below it. */
.lv2 .cta-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}
.lv2 .cta-stack .btn-lg-primary { flex: none; padding: 18px 30px; font-size: 17px; }
.lv2 .btn-lg-primary { text-wrap: balance; }
.lv2 .hero-free-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--lv2-charcoal);
    text-decoration: underline;
    text-decoration-color: rgba(34, 34, 34, 0.35);
    text-underline-offset: 4px;
}
.lv2 .hero-free-link:hover { text-decoration-color: currentColor; }

/* Comparison: "Read more, pay less." */
.lv2 .compare-band { background: #FFFFFF; }
.lv2 .compare-inner { max-width: 1040px; margin: 0 auto; padding: 88px 40px 72px; }
.lv2 .compare-header { text-align: center; }
.lv2 .cmp-wrap {
    margin-top: 44px;
    background: #FFFFFF;
    border: 1px solid var(--lv2-gray);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 48px -34px rgba(15, 52, 96, 0.3);
}
.lv2 .cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: 'Inter', sans-serif; }
.lv2 .cmp-table th,
.lv2 .cmp-table td {
    padding: 18px 14px;
    text-align: center;
    vertical-align: middle;
    border-top: 1px solid var(--lv2-gray);
    font-weight: 400;
}
.lv2 .cmp-table thead th { border-top: 0; padding: 26px 10px 20px; vertical-align: bottom; }
.lv2 .cmp-table thead th:first-child { width: 28%; }
.lv2 .cmp-table thead th.cmp-us { width: 21%; }
.lv2 .cmp-table tbody th,
.lv2 .cmp-table .cmp-corner { text-align: left; padding-left: 22px; }
.lv2 .cmp-corner span { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lv2-ink-60); }
.lv2 .cmp-name { display: block; font-size: 15px; font-weight: 600; color: var(--lv2-charcoal); }
.lv2 .cmp-price { display: block; margin-top: 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--lv2-charcoal); }
.lv2 .cmp-per { display: block; margin-top: 2px; font-size: 12.5px; color: var(--lv2-ink-60); }
.lv2 .cmp-short { display: none; }
.lv2 .cmp-table .cmp-us {
    background: #EAF7FF;
    border-left: 1px solid rgba(0, 180, 255, 0.3);
    border-right: 1px solid rgba(0, 180, 255, 0.3);
}
.lv2 .cmp-table thead .cmp-us { box-shadow: inset 0 4px 0 var(--lv2-blue); }
.lv2 thead .cmp-us .cmp-name { color: var(--lv2-blue-deep); font-weight: 700; font-size: 16px; }
.lv2 thead .cmp-us .cmp-price { font-size: 40px; }
.lv2 .cmp-feature { display: block; font-size: 16px; font-weight: 600; color: var(--lv2-charcoal); line-height: 1.3; }
.lv2 .cmp-book th,
.lv2 .cmp-book td { background: #FFF6E5; }
.lv2 .cmp-table .cmp-book .cmp-us { background: #EDF4EC; }
.lv2 .cmp-book .cmp-feature { font-size: 17px; font-weight: 700; }
.lv2 .cmp-new {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--lv2-orange);
    color: var(--lv2-charcoal);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.lv2 .cmp-note { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--lv2-blue-deep); }
.lv2 .cmp-yes {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lv2-blue-deep);
    color: #FFFFFF;
}
.lv2 .cmp-yes svg { width: 18px; height: 18px; }
.lv2 .cmp-yes.plain { background: transparent; color: var(--lv2-charcoal); }
.lv2 .cmp-no > span[aria-hidden] { display: inline-block; width: 16px; height: 2px; border-radius: 2px; background: #C9CED6; vertical-align: middle; }
.lv2 .cmp-some { display: inline-block; font-size: 14px; line-height: 1.3; color: #3F4752; }
.lv2 .cmp-cta { margin-top: 40px; text-align: center; }
.lv2 .cmp-cta .btn-lg-primary { padding: 18px 40px; font-size: 17px; }
.lv2 .cmp-free { margin: 18px 0 0; font-size: 16px; color: #3F4752; }
.lv2 .cmp-free a { color: var(--lv2-blue-deep); font-weight: 600; text-decoration: none; }
.lv2 .cmp-free a:hover { text-decoration: underline; }
.lv2 .compare-note { max-width: 720px; margin: 18px auto 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--lv2-ink-60); }

/* Watch: large show stills on a dark band. */
.lv2 .lvw-band { background: #0E1726; }
.lv2 .lvw-inner { max-width: 1120px; margin: 0 auto; padding: 88px 40px; }
.lv2 .lvw-head,
.lv2 .library-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
}
.lv2 .lvw-title { color: #FFFFFF; }
.lv2 .lvw-sub { color: rgba(226, 238, 250, 0.78); }
.lv2 .lvw-cta { color: #4DB8FF; }
.lv2 .lvw-grid { display: grid; gap: 20px; }
.lv2 .lvw-count-1 { max-width: 760px; margin: 0 auto; }
.lv2 .lvw-count-2 { grid-template-columns: 1fr 1fr; }
.lv2 .lvw-count-3 { grid-template-columns: 2fr 1fr; }
.lv2 .lvw-count-3 .lvw-lead { grid-row: span 2; }
.lv2 .lvw-tile { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.lv2 .lvw-still {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: radial-gradient(120% 130% at 30% 10%, rgba(0, 180, 255, 0.35), transparent 55%), linear-gradient(155deg, #12406B, #0C1A33);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}
/* The lead still fills the height of the two stacked beside it. */
.lv2 .lvw-count-3 .lvw-lead .lvw-still { flex: 1; aspect-ratio: auto; min-height: 0; }
.lv2 .lvw-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lv2 .lvw-still::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6, 12, 24, 0.35)); }
/* Play mark in the bottom-right corner: it stays off the show's subject, and off the
   title that unQbd Kids thumbnails carry at the bottom left. */
.lv2 .lvw-play {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.55);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);
    transition: transform .18s ease, background .18s ease;
}
.lv2 .lvw-play i { font-size: 26px; color: #FFFFFF; margin-left: 3px; }
.lv2 .lvw-lead .lvw-play { right: 22px; bottom: 22px; width: 68px; height: 68px; }
.lv2 .lvw-lead .lvw-play i { font-size: 34px; }
.lv2 .lvw-tile:hover .lvw-play { transform: scale(1.06); background: rgba(0, 116, 177, 0.75); }
.lv2 .lvw-tile:focus-visible { outline: none; }
.lv2 .lvw-tile:focus-visible .lvw-still { outline: 3px solid #4DB8FF; outline-offset: 3px; }
.lv2 .lvw-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #FFFFFF; }
.lv2 .lvw-lead .lvw-name { font-size: 24px; }

/* The library wall: 24 covers fill 8, 6, 4 or 3 columns exactly. */
.lv2 .library-band { background: var(--lv2-tint); }
.lv2 .library-inner { max-width: 1120px; margin: 0 auto; padding: 88px 40px 40px; }
.lv2 .library-link { color: var(--lv2-blue-deep); }
.lv2 .library-wall {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px;
}
/* A soft fade over the last row says the shelf keeps going. */
.lv2 .library-wall::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18%;
    background: linear-gradient(180deg, rgba(246, 251, 255, 0), var(--lv2-tint));
    pointer-events: none;
}
.lv2 .library-cover {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #E3EAF2;
    box-shadow: 0 10px 20px -12px rgba(15, 52, 96, 0.45);
    transition: transform .18s ease, box-shadow .18s ease;
}
.lv2 .library-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lv2 .library-cover:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -14px rgba(15, 52, 96, 0.55); }
.lv2 .library-audio {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(17, 24, 39, 0.8);
    color: #FFFFFF;
    font-size: 13px;
}

/* Kids and coding doors, on the library's tint. */
.lv2 .door-band { background: var(--lv2-tint); }
.lv2 .door-inner { max-width: 1120px; margin: 0 auto; padding: 40px 40px 88px; }
.lv2 .door-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lv2 .door-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    background: #FFFFFF;
    border: 1px solid var(--lv2-gray);
    border-radius: 18px;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.lv2 .door-card:hover { border-color: rgba(0, 180, 255, 0.5); box-shadow: 0 16px 32px -20px rgba(0, 116, 177, 0.35); transform: translateY(-1px); }
.lv2 .door-icon { flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: #E6F6FF; color: var(--lv2-blue-deep); }
.lv2 .door-icon svg { width: 28px; height: 28px; }
.lv2 .door-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lv2 .door-card-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--lv2-charcoal); }
.lv2 .door-card-body { font-size: 15.5px; line-height: 1.45; color: var(--lv2-ink-60); }
.lv2 .door-arrow { flex: none; font-size: 22px; color: var(--lv2-blue-deep); }

/* Read anywhere: store badges beside a reader page on a tablet and a phone. */
.lv2 .getapp-band { background: #FFFFFF; }
.lv2 .getapp-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 96px 40px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: 48px;
}
.lv2 .getapp-title { font-size: 56px; }
.lv2 .getapp-sub { font-size: 20px; max-width: 420px; margin-bottom: 28px; }
.lv2 .getapp-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lv2 .getapp-badge { display: inline-flex; border-radius: 9px; transition: transform .18s ease; }
.lv2 .getapp-badge:hover { transform: translateY(-2px); }
.lv2 .getapp-badge-img { display: block; height: 48px; width: auto; border-radius: 9px; }
.lv2 .getapp-devices { position: relative; width: 100%; max-width: 520px; height: 440px; justify-self: end; }
.lv2 .getapp-tablet,
.lv2 .getapp-phone { position: absolute; background: #111827; box-shadow: 0 40px 80px -40px rgba(15, 23, 42, 0.55); }
.lv2 .getapp-tablet { right: 0; top: 0; width: 360px; height: 440px; border-radius: 30px; padding: 14px; }
.lv2 .getapp-phone { left: 0; bottom: -24px; z-index: 1; width: 160px; height: 320px; border-radius: 26px; padding: 8px; }
.lv2 .getapp-screen {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: #FFFFFF;
    padding: 22px 20px;
    font-family: 'Inter', sans-serif;
    text-align: left;
}
.lv2 .getapp-phone .getapp-screen { padding: 18px 12px 12px; }
.lv2 .getapp-book { margin: 0 0 18px; font-size: 11px; text-align: center; color: #6B7280; }
.lv2 .getapp-chapter { margin: 0 0 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lv2-blue-deep); }
.lv2 .getapp-heading { margin: 0 0 14px; font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: #111827; }
.lv2 .getapp-phone .getapp-heading { margin-bottom: 10px; font-size: 14px; }
.lv2 .getapp-text { flex: 0 1 auto; min-height: 0; overflow: hidden; margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: #374151; }
.lv2 .getapp-phone .getapp-text { font-size: 9.5px; line-height: 1.55; }
.lv2 .getapp-text mark { background: #DCF3FF; color: inherit; padding: 0 1px; border-radius: 2px; }
.lv2 .getapp-progress { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 10px; color: #6B7280; }
.lv2 .getapp-phone .getapp-progress { justify-content: center; font-size: 8px; }
.lv2 .getapp-bar { flex: 1; height: 4px; border-radius: 4px; overflow: hidden; background: #E5E7EB; }
.lv2 .getapp-bar i { display: block; width: 4%; height: 100%; background: var(--lv2-blue); }

/* Questions and the closing card share one tinted band. */
.lv2 .landing-end { background: var(--lv2-tint); padding-bottom: 96px; }
.lv2 .landing-end .faq-inner { padding-bottom: 56px; }
.lv2 .faq-title { max-width: 800px; margin: 0 auto; }
.lv2 .faq-list { margin-top: 32px; }
.lv2 .landing-closing {
    width: calc(100% - 80px);
    max-width: 1120px;
    margin: 0 auto;
    padding: 64px 32px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid var(--lv2-gray);
    border-radius: 28px;
    box-shadow: 0 30px 60px -44px rgba(15, 52, 96, 0.35);
}
.lv2 .landing-closing h2 { margin-bottom: 28px; }
.lv2 .landing-closing p { margin: -12px 0 24px; font-size: 17px; color: var(--lv2-ink-60); }
.lv2 .landing-closing .btn-lg-primary { padding: 18px 32px; font-size: 17px; }

@media (max-width: 1000px) {
    .lv2 .library-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .lv2 .getapp-inner { grid-template-columns: 1fr; gap: 56px; padding: 72px 24px; }
    .lv2 .getapp-devices { justify-self: center; max-width: 460px; height: 380px; }
    .lv2 .getapp-tablet { width: 300px; height: 380px; }
    .lv2 .getapp-phone { width: 140px; height: 280px; }
}

@media (max-width: 760px) {
    .lv2 .compare-title,
    .lv2 .lvw-title,
    .lv2 .library-title,
    .lv2 .faq-title,
    .lv2 .landing-closing h2 { font-size: 34px; }
    .lv2 .compare-kicker,
    .lv2 .lvw-sub,
    .lv2 .library-sub { font-size: 16px; }

    .lv2 .compare-inner { padding: 64px 16px 56px; }
    .lv2 .cmp-wrap { margin-top: 32px; border-radius: 16px; }
    .lv2 .cmp-long { display: none; }
    .lv2 .cmp-short { display: inline; }
    .lv2 .cmp-table th,
    .lv2 .cmp-table td { padding: 12px 4px; }
    .lv2 .cmp-table thead th { padding: 16px 4px 14px; }
    .lv2 .cmp-table thead th:first-child { width: 30%; }
    .lv2 .cmp-table thead th.cmp-us { width: 19%; }
    .lv2 .cmp-table tbody th,
    .lv2 .cmp-table .cmp-corner { padding-left: 12px; }
    .lv2 .cmp-corner span { font-size: 10px; letter-spacing: 0.08em; }
    .lv2 .cmp-name { font-size: 12px; }
    .lv2 thead .cmp-us .cmp-name { font-size: 12.5px; }
    .lv2 .cmp-price { font-size: 15px; }
    .lv2 thead .cmp-us .cmp-price { font-size: 24px; }
    .lv2 .cmp-per { font-size: 10.5px; }
    .lv2 .cmp-feature { font-size: 13px; }
    .lv2 .cmp-book .cmp-feature { font-size: 14px; }
    .lv2 .cmp-new { font-size: 10px; margin-bottom: 6px; }
    .lv2 .cmp-note,
    .lv2 .cmp-some { font-size: 11px; }
    .lv2 .cmp-yes { width: 24px; height: 24px; }
    .lv2 .cmp-yes svg { width: 15px; height: 15px; }
    .lv2 .cmp-cta { margin-top: 28px; }
    .lv2 .cmp-cta .btn-lg-primary { width: 100%; }
    .lv2 .cmp-free { font-size: 15px; }

    .lv2 .lvw-inner { padding: 64px 16px; }
    .lv2 .lvw-head,
    .lv2 .library-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
    .lv2 .lvw-count-2,
    .lv2 .lvw-count-3 { grid-template-columns: 1fr; }
    .lv2 .lvw-count-3 .lvw-lead { grid-row: auto; }
    .lv2 .lvw-count-3 .lvw-lead .lvw-still { flex: none; aspect-ratio: 16 / 9; }
    .lv2 .lvw-lead .lvw-name { font-size: 20px; }
    .lv2 .lvw-lead .lvw-play { right: 16px; bottom: 16px; width: 52px; height: 52px; }
    .lv2 .lvw-lead .lvw-play i { font-size: 26px; }

    .lv2 .library-inner { padding: 64px 16px 32px; }
    .lv2 .library-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .lv2 .library-audio { top: 4px; right: 4px; width: 22px; height: 22px; font-size: 11px; }

    .lv2 .door-inner { padding: 32px 16px 64px; }
    .lv2 .door-grid { grid-template-columns: 1fr; gap: 14px; }
    .lv2 .door-card { gap: 16px; padding: 18px; }
    .lv2 .door-icon { width: 48px; height: 48px; }
    .lv2 .door-card-title { font-size: 18px; }
    .lv2 .door-card-body { font-size: 14.5px; }

    .lv2 .landing-end { padding-bottom: 64px; }
    .lv2 .landing-closing { width: calc(100% - 32px); padding: 44px 20px; border-radius: 22px; }
    .lv2 .landing-closing .btn-lg-primary { width: 100%; }
}

@media (max-width: 560px) {
    .lv2 .cta-stack { display: flex; align-items: stretch; }
    .lv2 .cta-stack .hero-free-link { align-self: center; }
    .lv2 .cta-stack .btn-lg-primary { padding: 16px 20px; font-size: 16px; }
    .lv2 .landing-closing .btn-lg-primary { padding: 16px 14px; font-size: 15.5px; }
    .lv2 .getapp-inner { padding: 64px 16px; }
    .lv2 .getapp-title { font-size: 38px; }
    .lv2 .getapp-sub { font-size: 17px; }
    .lv2 .getapp-badge-img { height: 44px; }
    .lv2 .getapp-devices { height: 320px; }
    .lv2 .getapp-tablet { width: 240px; height: 320px; padding: 10px; border-radius: 24px; }
    .lv2 .getapp-phone { width: 118px; height: 236px; bottom: -16px; }
    .lv2 .getapp-screen { padding: 16px 14px; }
    .lv2 .getapp-heading { font-size: 16px; }
    .lv2 .getapp-text { font-size: 10.5px; }
    .lv2 .getapp-phone .getapp-screen { padding: 14px 9px 9px; }
    .lv2 .getapp-phone .getapp-heading { font-size: 11px; }
    .lv2 .getapp-phone .getapp-text { font-size: 7.5px; }
}

@media (max-width: 420px) {
    /* Common Android widths: the four price columns need the room to keep "$143.88" whole. */
    .lv2 .cmp-table thead th:first-child { width: 26%; }
    .lv2 .cmp-table thead th.cmp-us { width: 18%; }
    .lv2 .cmp-table th,
    .lv2 .cmp-table td { padding: 10px 2px; }
    .lv2 .cmp-table tbody th,
    .lv2 .cmp-table .cmp-corner { padding-left: 10px; }
    .lv2 .cmp-name,
    .lv2 thead .cmp-us .cmp-name { font-size: 11px; }
    .lv2 .cmp-price { font-size: 12.5px; }
    .lv2 thead .cmp-us .cmp-price { font-size: 20px; }
    .lv2 .cmp-per { font-size: 9.5px; }
    .lv2 .cmp-feature,
    .lv2 .cmp-book .cmp-feature { font-size: 12px; }
    .lv2 .cmp-note,
    .lv2 .cmp-some { font-size: 10px; }
}

@media (max-width: 350px) {
    .lv2 .cmp-price { font-size: 11.5px; }
    .lv2 .cmp-corner span { font-size: 9px; letter-spacing: 0.04em; }
}

@media (max-width: 340px) {
    .lv2 .library-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Dark mode for the sections above. Links keep the site-wide dark link color. */
body.dark-mode .lv2 .compare-band,
body.dark-mode .lv2 .getapp-band { background: #121212; }
body.dark-mode .lv2 .library-band,
body.dark-mode .lv2 .door-band,
body.dark-mode .lv2 .landing-end { background: #1a1a1a; }
body.dark-mode .lv2 .lvw-band { background: #0B1220; }
body.dark-mode .lv2 .compare-title,
body.dark-mode .lv2 .library-title,
body.dark-mode .lv2 .getapp-title,
body.dark-mode .lv2 .faq-title,
body.dark-mode .lv2 .landing-closing h2,
body.dark-mode .lv2 .cmp-name,
body.dark-mode .lv2 .cmp-price,
body.dark-mode .lv2 .cmp-feature,
body.dark-mode .lv2 .door-card-title { color: #F5F5F5; }
body.dark-mode .lv2 .compare-kicker,
body.dark-mode .lv2 .library-sub,
body.dark-mode .lv2 .getapp-sub,
body.dark-mode .lv2 .compare-note,
body.dark-mode .lv2 .cmp-per,
body.dark-mode .lv2 .cmp-corner span,
body.dark-mode .lv2 .cmp-some,
body.dark-mode .lv2 .cmp-free,
body.dark-mode .lv2 .door-card-body,
body.dark-mode .lv2 .landing-closing p { color: #B8C5D3; }
body.dark-mode .lv2 .cmp-wrap { background: #1A1D21; border-color: #2A2F36; box-shadow: none; }
body.dark-mode .lv2 .cmp-table th,
body.dark-mode .lv2 .cmp-table td { border-top-color: #2A2F36; }
body.dark-mode .lv2 .cmp-table .cmp-us { background: rgba(0, 180, 255, 0.10); border-color: rgba(0, 180, 255, 0.25); }
body.dark-mode .lv2 thead .cmp-us .cmp-name,
body.dark-mode .lv2 .cmp-note,
body.dark-mode .lv2 .door-arrow { color: #4DB8FF; }
body.dark-mode .lv2 .cmp-book th,
body.dark-mode .lv2 .cmp-book td { background: rgba(255, 170, 0, 0.10); }
body.dark-mode .lv2 .cmp-table .cmp-book .cmp-us { background: rgba(0, 180, 255, 0.16); }
body.dark-mode .lv2 .cmp-yes { background: #0E8FD0; }
body.dark-mode .lv2 .cmp-yes.plain { background: transparent; color: #E8EAED; }
body.dark-mode .lv2 .cmp-no > span[aria-hidden] { background: #4B5563; }
body.dark-mode .lv2 .library-wall::after { background: linear-gradient(180deg, rgba(26, 26, 26, 0), #1a1a1a); }
body.dark-mode .lv2 .library-cover { background: #2A2F36; }
body.dark-mode .lv2 .door-card,
body.dark-mode .lv2 .landing-closing { background: #1E1E1E; border-color: #2A2F36; box-shadow: none; }
body.dark-mode .lv2 .door-icon { background: rgba(0, 180, 255, 0.12); color: #4DB8FF; }
/* The store badges are near-black; on the dark page add a hairline ring so their edges read. */
body.dark-mode .lv2 .getapp-badge-img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }