/* ══════════════════════════════════════════════════════════════
   DIGITAL BOOKS — listing, detail, reader, and auth pages.
   Brand colors match every other psk-*.css file on the site
   (#fc5e28 orange / #040e26 navy) — no new palette introduced.
   ══════════════════════════════════════════════════════════════ */

/* ── LISTING PAGE — premium marketplace hero ──────────────────
   Same dark navy gradient weight as .psk-detail-hero elsewhere on the
   site, plus a radial orange glow (the same device used on the React
   Customer Portal's AuthLayout hero) so the whole Digital Books section
   reads as one deliberate "product" visual, not a stock inner-page banner. */
.psk-books-hero {
    position: relative;
    background: linear-gradient(135deg, #040e26 0%, #0a1f4d 100%);
    padding: 64px 0 0;
    overflow: hidden;
}
.psk-books-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 88% 15%, rgba(252,94,40,0.22), transparent 45%),
        radial-gradient(circle at 6% 95%, rgba(252,94,40,0.10), transparent 40%);
}
.psk-books-hero .container { position: relative; z-index: 1; }
.psk-books-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(252,94,40,0.16);
    color: #ff8f5c;
    border: 1px solid rgba(252,94,40,0.35);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
}
.psk-books-hero h1 { font-size: 2.4rem; font-weight: 800; color: #fff; margin-bottom: 16px; line-height: 1.2; max-width: 20ch; }
.psk-books-hero__lead { color: rgba(255,255,255,0.78); font-size: 1.08rem; line-height: 1.75; max-width: 640px; margin-bottom: 14px; }
.psk-books-hero__langline { color: rgba(255,255,255,0.65); font-size: 0.92rem; margin-bottom: 28px; }
.psk-books-hero__langline .fa { color: #fc5e28; margin-right: 6px; }
.psk-books-hero__langline strong { color: #ff9d6e; font-weight: 700; }
.psk-books-hero__stats { display: flex; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.12); }
.psk-books-hero__stat {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 20px 8px 26px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.12);
}
.psk-books-hero__stat:last-child { border-right: none; }
.psk-books-hero__stat .fa { font-size: 1.25rem; color: #fc5e28; margin-bottom: 6px; display: block; }
.psk-books-hero__stat strong { display: block; font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.psk-books-hero__stat span { font-size: 0.74rem; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── LISTING PAGE — premium shop card ─────────────────────────
   A book is a product, so this is deliberately closer to an e-commerce
   card than .psk-service-card: a full, prominent cover (not a small
   icon), a real price row, and a two-button footer, while still using
   the exact same radius/border/shadow language as every other card on
   the site so it doesn't read as an imported template. */
.psk-shop-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e6ea;
    box-shadow: 0 4px 20px rgba(4,14,38,0.06);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.psk-shop-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 56px rgba(4,14,38,0.16);
    border-color: rgba(252,94,40,0.4);
}
.psk-shop-card__badges {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}
.psk-shop-card__ribbon,
.psk-shop-card__discount {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    color: #fff;
}
.psk-shop-card__ribbon { background: #fc5e28; box-shadow: 0 4px 12px rgba(252,94,40,0.35); }
.psk-shop-card__discount { background: #059669; box-shadow: 0 4px 12px rgba(5,150,105,0.3); }
.psk-shop-card__cover {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(160deg, #0a1f4d 0%, #040e26 100%);
    overflow: hidden;
}
/* A real cover photo still wants the taller, book-like proportion —
   only the plain icon fallback (nothing to actually look at) uses the
   shorter ratio above so it doesn't read as a large empty panel. */
.psk-shop-card__cover:has(img) { aspect-ratio: 3 / 4; }
.psk-shop-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psk-shop-card__cover-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background-image: radial-gradient(circle at 50% 30%, rgba(252,94,40,0.18), transparent 60%);
}
.psk-shop-card__cover-fallback .fa { font-size: 2.4rem; color: #fc5e28; margin-bottom: 12px; }
.psk-shop-card__cover-fallback span { color: rgba(255,255,255,0.6); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.psk-shop-card__body { padding: 22px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.psk-shop-card__eyebrow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #fc5e28; margin-bottom: 8px; }
.psk-shop-card__title { font-size: 1.14rem; font-weight: 800; color: #040e26; margin-bottom: 8px; line-height: 1.35; }
.psk-shop-card__langs, .psk-showcase-card__langs { font-size: 0.78rem; font-weight: 600; color: #fc5e28; margin-bottom: 10px; }
.psk-shop-card__langs .fa, .psk-showcase-card__langs .fa { margin-right: 3px; }
.psk-shop-card__desc { font-size: 0.87rem; color: #5c6473; line-height: 1.65; margin-bottom: 14px; flex: 1; }
.psk-shop-card__meta { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.psk-shop-card__meta span { font-size: 0.78rem; color: #6b7280; display: flex; align-items: center; gap: 5px; }
.psk-shop-card__meta .fa { color: #fc5e28; }
.psk-shop-card__footer { margin-top: auto; padding-top: 16px; border-top: 1px dashed #e2e6ea; }
.psk-shop-card__price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.psk-shop-card__price-now { font-size: 1.45rem; font-weight: 800; color: #040e26; }
.psk-shop-card__price-was { font-size: 0.85rem; color: #9ca3af; text-decoration: line-through; }
.psk-shop-card__actions { display: flex; gap: 8px; }
.psk-shop-card__actions .btn { text-align: center; font-weight: 700; font-size: 0.85rem; padding: 9px 12px; width: 100%; }
/* Buy Now is now a <form> (posts straight to checkout) rather than a
   plain link, so the flex-equal-width sizing has to target the form
   itself, not just the button nested inside it. */
.psk-shop-card__actions > a, .psk-shop-card__actions > form { flex: 1; }

/* ── LISTING PAGE — single-book showcase ───────────────────────
   A 3-up grid with one item just leaves two empty column-widths either
   side — with only one guide published so far that reads as an unfinished
   page, not "there's only one right now." This is a wider, richer
   card used only when the catalog has exactly one book, so that one
   guide fills the row properly instead of floating in blank space. */
.psk-showcase-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e2e6ea;
    box-shadow: 0 8px 32px rgba(4,14,38,0.08);
    overflow: hidden;
}
.psk-showcase-card__row { display: flex; flex-wrap: wrap; }
.psk-showcase-card__cover {
    flex: 0 0 300px;
    max-width: 300px;
    position: relative;
    background: linear-gradient(160deg, #0a1f4d 0%, #040e26 100%);
    background-image: radial-gradient(circle at 50% 30%, rgba(252,94,40,0.18), transparent 60%);
}
.psk-showcase-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psk-showcase-card__cover-fallback {
    height: 100%;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}
.psk-showcase-card__cover-fallback .fa { font-size: 2.6rem; color: #fc5e28; margin-bottom: 12px; }
.psk-showcase-card__cover-fallback span { color: rgba(255,255,255,0.6); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.psk-showcase-card__body { flex: 1 1 340px; padding: 30px 32px; display: flex; flex-direction: column; }
.psk-showcase-card__ribbon {
    align-self: flex-start;
    background: #fc5e28; color: #fff; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; padding: 5px 14px; border-radius: 20px; margin-bottom: 14px;
}
.psk-showcase-card__title { font-size: 1.4rem; font-weight: 800; color: #040e26; margin-bottom: 8px; line-height: 1.3; }
.psk-showcase-card__desc { font-size: 0.92rem; color: #555; line-height: 1.75; margin-bottom: 16px; }
.psk-showcase-card__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.psk-showcase-card__meta span { font-size: 0.82rem; color: #6b7280; display: flex; align-items: center; gap: 6px; }
.psk-showcase-card__meta .fa { color: #fc5e28; }
.psk-showcase-card__footer { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding-top: 18px; border-top: 1px dashed #e2e6ea; }
.psk-showcase-card__price-now { font-size: 1.7rem; font-weight: 800; color: #040e26; }
.psk-showcase-card__price-was { font-size: 0.9rem; color: #9ca3af; text-decoration: line-through; margin-left: 6px; }
.psk-showcase-card__actions { display: flex; gap: 10px; }
@media (max-width: 767px) {
    .psk-showcase-card__cover { flex: 1 1 100%; max-width: 100%; aspect-ratio: 16/9; }
    .psk-showcase-card__body { padding: 24px 20px; }
}

/* ── PREMIUM MARKETPLACE UPGRADE — listing page ────────────────
   The showcase card above already carried the basics; these rules
   dress it up into an actual "product page" feel: a branded book
   mockup instead of a generic icon, a real buy box, and a light-theme
   version of the language pills already proven on the detail page. */
.psk-showcase-card--premium {
    box-shadow: 0 20px 60px -12px rgba(4,14,38,0.16), 0 2px 8px rgba(4,14,38,0.05);
    border-color: #e8eaed;
}
.psk-showcase-card--premium .psk-showcase-card__cover { flex: 0 0 420px; max-width: 420px; }
/* When the cover slot holds the real flip widget rather than a static
   cover image, give it genuinely wide room — the same two-page-spread
   width the book page's own preview gets — instead of the narrow
   420px column sized for a plain cover photo. */
.psk-showcase-card--premium:has(.psk-showcase-flip) .psk-showcase-card__cover { flex: 0 0 440px; max-width: 440px; }
@media (max-width: 1300px) {
    .psk-showcase-card--premium:has(.psk-showcase-flip) .psk-showcase-card__cover { flex-basis: 400px; max-width: 400px; }
}

/* Real, interactive flip preview embedded directly in the listing-page
   card cover — same widget/JS as the book page's own preview, just
   resized to fit here edge-to-edge instead of sitting in a bordered,
   padded content card. page-flip's "stretch" sizing derives a portrait
   single page's WIDTH from the book's HEIGHT (via its fixed 420:560
   aspect ratio) — so the book height below is chosen to make that
   derived width roughly fill this column, instead of leaving the
   large empty side gutters a too-short/too-narrow stage produces. */
.psk-showcase-flip { height: 100%; display: flex; }
.psk-showcase-flip .psk-pv-stage--compact {
    border-radius: 0;
    border: none;
    padding: 24px 18px 16px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* The base .psk-pv-flipbook-wrap has margin:0 auto to center a
   narrower book inside the detail page's much wider content column —
   but auto margins on a flex item's cross axis make it shrink to its
   content's min-width instead of stretching (auto margins claim the
   available space themselves, overriding align-items:stretch). That
   collapsed this to page-flip's bare 280px minWidth. Zeroing the
   margin here restores the stretch so it fills the column instead. */
.psk-showcase-flip .psk-pv-flipbook-wrap { height: 100%; width: 100%; flex: 1; margin: 0; }
.psk-showcase-flip .psk-pv-book { height: 100%; min-height: 380px; max-height: 620px; }
.psk-showcase-flip .psk-pv-hint { font-size: 0.72rem; margin-top: 12px; }
/* The card this sits in has overflow:hidden (for its rounded corners),
   which clips the book page's own nav buttons at their usual -18px
   offset — pull them fully inside the visible area instead. */
.psk-showcase-flip .psk-pv-nav--prev { left: 4px; }
.psk-showcase-flip .psk-pv-nav--next { right: 4px; }
@media (max-width: 767px) {
    /* The always-on desktop ":has" rule above sets the full `flex`
       shorthand (grow:0, shrink:0, basis:440px) at equal specificity to
       this selector, so overriding flex-basis alone here left grow:0
       still winning — the cover then sized to its own content instead
       of stretching, leaving a blank gap beside it. Set the full
       shorthand here too so this rule fully replaces it on mobile. */
    .psk-showcase-card--premium:has(.psk-showcase-flip) .psk-showcase-card__cover { flex: 1 1 100%; max-width: 100%; }
    .psk-showcase-flip .psk-pv-book { height: min(62vh, 480px); min-height: 340px; }
    .psk-showcase-flip .psk-pv-stage--compact { padding: 20px 14px 14px; }
}

/* A believable book, not a flat icon tile — angled slightly like a
   product shot, with a spine edge and a curled corner, using the exact
   navy/orange treatment the flipbook cover and public preview already
   use, so a shopper who clicks through to Preview sees the same object. */
.psk-showcase-cover {
    position: relative;
    background-color: #040e26;
    background-image: radial-gradient(circle at 30% 20%, rgba(252,94,40,0.28), transparent 55%), linear-gradient(160deg, #0f2a5c 0%, #040e26 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 26px;
    gap: 6px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.psk-showcase-cover__spine {
    position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
    background: linear-gradient(90deg, rgba(0,0,0,0.45), transparent);
}
.psk-showcase-cover__corner {
    position: absolute; right: 0; bottom: 0; width: 40px; height: 40px;
    background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.14) 50%);
    border-radius: 0 0 4px 0;
}
.psk-showcase-cover__badge {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: #fff; overflow: hidden; padding: 9px;
    box-shadow: 0 14px 30px -8px rgba(0,0,0,0.45), 0 0 0 4px rgba(255,255,255,0.1);
    margin-bottom: 10px;
}
.psk-showcase-cover__badge img { width: 100%; height: 100%; object-fit: contain; }
.psk-showcase-cover__title { color: #fff; font-size: 1.15rem; font-weight: 800; line-height: 1.35; max-width: 22ch; }
.psk-showcase-cover__eyebrow { color: rgba(255,255,255,0.5); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }

.psk-showcase-card__top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.psk-showcase-card__ribbon { display: inline-flex; align-items: center; gap: 6px; }
.psk-showcase-card__ribbon .fa { font-size: 0.7rem; }
.psk-showcase-card__pagecount { font-size: 0.76rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.4px; }
.psk-showcase-card__subtitle { font-size: 0.94rem; color: #6b7280; margin: -2px 0 16px; line-height: 1.5; }

.psk-showcase-card__highlights { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.psk-showcase-card__highlights li { font-size: 0.87rem; color: #333; display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.psk-showcase-card__highlights .fa {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: #e8f8f0; color: #059669;
    font-size: 0.6rem; display: flex; align-items: center; justify-content: center; margin-top: 2px;
}

/* Buy box — sets price + CTA apart from the descriptive copy above it,
   the way a real e-commerce product page separates "about this item"
   from "buy this item." */
.psk-showcase-buybox {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    background: linear-gradient(160deg, #fff8f5 0%, #fff 100%);
    border: 1px solid #fde3d2;
    border-radius: 14px;
    padding: 18px 20px;
    margin-top: auto;
}
.psk-showcase-buybox__price { display: flex; flex-direction: column; gap: 2px; }
.psk-showcase-buybox__note { font-size: 0.72rem; color: #9ca3af; font-weight: 600; }
.psk-showcase-card__trust { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.psk-showcase-card__trust span { font-size: 0.78rem; color: #6b7280; display: flex; align-items: center; gap: 6px; }
.psk-showcase-card__trust .fa { color: #059669; }

@media (max-width: 767px) {
    .psk-showcase-card--premium .psk-showcase-card__cover { flex: 1 1 100%; max-width: 100%; aspect-ratio: 16/10; }
    /* The flip widget needs real vertical room to be usable — don't
       squash it into the 16/10 photo-cover aspect-ratio above. */
    .psk-showcase-card--premium .psk-showcase-card__cover:has(.psk-showcase-flip) { aspect-ratio: auto; height: auto; }
    .psk-showcase-buybox { flex-direction: column; align-items: stretch; text-align: center; }
    .psk-showcase-card__actions { flex-direction: column; }
    /* Stacked on mobile — both buttons need an explicit full width, not
       just relying on flex's default stretch, since the "Buy Now" button
       sits inside a <form class="d-inline"> wrapper (Bootstrap's
       d-inline forces display:inline on the form itself), and an inline
       element's own child button doesn't inherit the flex-stretch sizing
       the same way a direct flex child does — it was sizing to its own
       text content instead, leaving "View Details" and "Buy Now"
       visibly different widths. */
    .psk-showcase-card__actions form,
    .psk-showcase-card__actions > a,
    .psk-showcase-card__actions .btn { width: 100%; }
}

/* ── BOOK DETAIL PAGE — premium product hero ──────────────────
   The old hero used a small 72px icon; a book needs its actual cover
   presented like a real product shot, so this is a purpose-built hero
   rather than a reuse of .psk-detail-hero. */
.psk-product-hero {
    position: relative;
    background: linear-gradient(135deg, #040e26 0%, #0a1f4d 100%);
    padding: 52px 0 60px;
    overflow: hidden;
    color: #fff;
}
.psk-product-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 90% 10%, rgba(252,94,40,0.20), transparent 45%),
        radial-gradient(circle at 5% 100%, rgba(252,94,40,0.10), transparent 40%);
}
.psk-product-hero .container { position: relative; z-index: 1; }
.psk-product-hero__cover-wrap { position: relative; }
.psk-product-hero__cover {
    display: block;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 3/4;
    margin: 0 auto;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 30px 70px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
}
.psk-product-hero__cover-fallback {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 3/4;
    margin: 0 auto;
    border-radius: 12px;
    background: linear-gradient(160deg, #16305c 0%, #040e26 100%);
    box-shadow: 0 30px 70px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    background-image: radial-gradient(circle at 50% 25%, rgba(252,94,40,0.22), transparent 60%);
}
.psk-product-hero__cover-fallback strong { color: #fff; font-size: 1.05rem; font-weight: 800; line-height: 1.35; }
.psk-product-hero__cover-fallback span { display: block; color: rgba(255,255,255,0.6); font-size: 0.82rem; margin-top: 6px; }
.psk-product-hero__badge {
    display: inline-block;
    background: rgba(252,94,40,0.18);
    color: #ff8f5c;
    border: 1px solid rgba(252,94,40,0.4);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}
.psk-product-hero h1 { font-size: 2.05rem; font-weight: 800; margin-bottom: 12px; line-height: 1.25; color: #fff; }
.psk-product-hero__subtitle { color: rgba(255,255,255,0.75); font-size: 1.05rem; margin-bottom: 20px; line-height: 1.6; }

/* ── LANGUAGE SWITCHER — one book, several language editions ──── */
.psk-lang-switcher { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.psk-lang-switcher__label { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.5px; margin-right: 2px; display: flex; align-items: center; gap: 5px; }
.psk-lang-switcher__label .fa { color: #fc5e28; }
.psk-lang-pill {
    display: inline-block;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.psk-lang-pill:hover { background: rgba(255,255,255,0.14); color: #fff; text-decoration: none; transform: translateY(-1px); }
.psk-lang-pill--active {
    background: linear-gradient(135deg, #fc5e28, #e04e1f);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(252,94,40,0.5);
    cursor: default;
    pointer-events: none;
}
.psk-product-hero__edition-note { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin: 0 0 6px; text-align: center; }
.psk-product-hero__edition-note strong { color: #ff9d6e; }

/* Light-theme language pills — the switcher/pill pair above was built
   for the dark product hero; this variant keeps the exact same shape
   and interaction but sits correctly on a white card background (the
   listing page's showcase card). Placed after the base rules so it
   correctly wins the cascade at equal specificity. */
/* Its own highlighted callout box — a plain gray pill on a white card
   read as inert/disabled, not "here's a real feature," so this needs
   real visual weight (tinted background, orange border, bold text) to
   register as the differentiator it actually is. */
.psk-lang-switcher--light {
    display: flex;
    background: linear-gradient(135deg, #fff7f0 0%, #fffaf6 100%);
    border: 1px solid #fbd7ba;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.psk-lang-switcher--light .psk-lang-switcher__label { color: #c2410c; font-weight: 800; }
.psk-lang-switcher--light .psk-lang-switcher__label .fa { color: #fc5e28; }
.psk-lang-switcher--compact { margin-bottom: 10px; gap: 6px; padding: 8px 10px; }
.psk-lang-pill--light {
    background: #fff;
    border: 1.5px solid #fc5e28;
    color: #040e26;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(252,94,40,0.12);
}
.psk-lang-pill--light:hover { background: #fff1e8; color: #040e26; transform: translateY(-1px); }
@media (max-width: 480px) {
    /* Label takes its own full-width line (flex-basis:100% forces a
       wrap after it even inside a wrapping flex row), so the three
       pills always sit together on one line below it instead of
       breaking mid-row across two lines. */
    .psk-lang-switcher--light .psk-lang-switcher__label { flex-basis: 100%; margin-bottom: 6px; }
    .psk-lang-switcher--light { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
    .psk-lang-switcher--light .psk-lang-pill--light {
        flex: 1 1 0;
        padding: 6px 4px;
        font-size: 0.78rem;
        text-align: center;
        white-space: nowrap;
    }
}

.psk-product-hero__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.psk-product-hero__stats span {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px; padding: 6px 14px; font-size: 0.82rem; color: rgba(255,255,255,0.85);
}
.psk-product-hero__stats .fa { color: #fc5e28; }
.psk-product-hero__price-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    padding: 22px 24px;
    display: inline-block;
    max-width: 100%;
}
.psk-product-hero__price-now { font-size: 2.15rem; font-weight: 800; color: #fff; }
.psk-product-hero__price-was { font-size: 1.05rem; color: rgba(255,255,255,0.5); text-decoration: line-through; margin-left: 10px; }
.psk-product-hero__discount { display: inline-block; background: #059669; color: #fff; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-left: 10px; }
.psk-product-hero__cta-row { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767px) {
    /* Same fix as .psk-showcase-card__actions on the listing page: the
       "Buy Now" button is wrapped in <form class="d-inline">, so it
       doesn't stretch to match "Preview Book" the way a plain flex
       child would — force both explicitly full-width when stacked. */
    .psk-product-hero__cta-row { flex-direction: column; }
    .psk-product-hero__cta-row form,
    .psk-product-hero__cta-row > a,
    .psk-product-hero__cta-row .btn { width: 100%; }
}
.psk-product-hero__trust-mini { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; }
.psk-product-hero__trust-mini span { font-size: 0.8rem; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 6px; }
.psk-product-hero__trust-mini .fa { color: #34d399; }

/* ── BOOK DETAIL — content cards (reuses .psk-detail-card look,   ── */
/* ── loaded globally, so these just supply book-specific pieces)  ── */
.psk-book-content .psk-detail-card__header h2 { display: flex; align-items: center; gap: 10px; }
.psk-book-content .psk-detail-card__header .fa { color: #fc5e28; }
.psk-book-content p, .psk-book-content li { color: #555; line-height: 1.8; font-size: 0.95rem; }

/* Benefit list — turns a plain admin-authored <ul> into a checkmark
   list without needing a separate structured-data field. */
.psk-benefit-list ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.psk-benefit-list ul li { position: relative; padding-left: 34px; font-size: 0.93rem; color: #333; line-height: 1.6; }
.psk-benefit-list ul li::before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e8f8f0;
    color: #059669;
    font-size: 0.62rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Listing-page "What You Get" card — same checkmark list, presented in
   a bordered white panel with a wider 2-column layout on desktop so a
   6-item list uses the container's width instead of running down as
   one long, narrow column. */
.psk-value-card {
    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: 18px;
    padding: 36px 40px;
    box-shadow: 0 8px 30px rgba(4,14,38,0.06);
}
.psk-benefit-list--2col ul { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
@media (max-width: 767px) {
    .psk-value-card { padding: 26px 22px; }
    .psk-benefit-list--2col ul { grid-template-columns: 1fr; }
}

/* "Who These Guides Are For" — a row-list card, deliberately shaped
   differently from the icon+text card grids elsewhere on this page so
   the page doesn't read as the same component repeated four times. */
.psk-persona-card {
    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: 18px;
    padding: 6px 32px;
    box-shadow: 0 8px 30px rgba(4,14,38,0.06);
}
.psk-persona-row { display: flex; align-items: flex-start; gap: 18px; padding: 24px 0; border-bottom: 1px solid #f0f0f0; }
.psk-persona-row:last-child { border-bottom: none; }
.psk-persona-row__icon {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.05rem; margin-top: 2px;
}
.psk-persona-row__body h3 { font-size: 1.02rem; font-weight: 700; color: #040e26; margin: 0 0 4px; }
.psk-persona-row__body p { font-size: 0.9rem; color: #5c6473; margin: 0; line-height: 1.65; }
@media (max-width: 575px) {
    .psk-persona-card { padding: 4px 18px; }
}

/* ── REAL COLOR BANDS — the listing page was reading as "all white"  ── */
/* ── because every section alternated white vs. barely-different    ── */
/* ── light-gray (bg-half-light). These give it the same bold, dark   ── */
/* ── navy break the hero already uses, plus warm/cool tinted washes  ── */
/* ── so no two sections in a row share the same flat background.     ── */
.psk-dark-band {
    position: relative;
    background: linear-gradient(135deg, #040e26 0%, #0a1f4d 100%);
    overflow: hidden;
}
.psk-dark-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 85% 15%, rgba(252,94,40,0.20), transparent 45%),
        radial-gradient(circle at 8% 95%, rgba(252,94,40,0.12), transparent 40%);
}
.psk-dark-band .container { position: relative; z-index: 1; }
/* !important here matches (and must beat) style.css's own sitewide
   .heading-section h2 { color: #1e2a3a !important; } rule — without it
   the heading renders in near-black text on this navy background. */
.psk-dark-band .heading-section .subheading { color: #ff9d6e !important; }
.psk-dark-band .heading-section h2 { color: #fff !important; }
.psk-dark-band .heading-section p.text-muted { color: rgba(255,255,255,0.62) !important; }

.psk-dark-feature {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    padding: 26px 24px;
    height: 100%;
    transition: background 0.2s, transform 0.2s;
}
.psk-dark-feature:hover { background: rgba(255,255,255,0.1); transform: translateY(-3px); }
.psk-dark-feature__icon {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(252,94,40,0.18); border: 1px solid rgba(252,94,40,0.4);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; font-size: 1.15rem; color: #fc5e28;
}
.psk-dark-feature h3 { color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.psk-dark-feature p { color: rgba(255,255,255,0.62); font-size: 0.88rem; line-height: 1.65; margin: 0; }

.psk-tint-warm { background: linear-gradient(180deg, #fff7f2 0%, #fffdfb 100%); }
.psk-tint-cool { background: linear-gradient(180deg, #edf1f8 0%, #f6f8fb 100%); }

/* ── SPLIT PANEL — "What You Get" + "Who It's For" merged into one  ── */
/* ── asymmetric dark/light card instead of two stacked, centered    ── */
/* ── heading-then-list sections that read as the same template     ── */
/* ── repeated. Deliberately borrows the site's own dark/light split  ── */
/* ── device (see .ftco-counter on the homepage) rather than another  ── */
/* ── card grid. */
.psk-split-panel {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px -12px rgba(4,14,38,0.18);
}
.psk-split-panel__dark, .psk-split-panel__light { padding: 44px 42px; height: 100%; }
.psk-split-panel__dark {
    position: relative;
    background-color: #040e26;
    background-image:
        radial-gradient(circle at 15% 0%, rgba(252,94,40,0.22), transparent 55%),
        linear-gradient(160deg, #0a1f4d 0%, #040e26 100%);
    color: #fff;
}
.psk-split-panel__light { background: #fff; }
.psk-split-panel__eyebrow { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #ff9d6e; margin-bottom: 10px; }
.psk-split-panel__eyebrow--orange { color: #fc5e28; }
.psk-split-panel__dark h3, .psk-split-panel__light h3 { font-size: 1.55rem; font-weight: 800; margin: 0 0 14px; line-height: 1.25; }
.psk-split-panel__dark h3 { color: #fff; }
.psk-split-panel__light h3 { color: #040e26; }
.psk-split-panel__intro { color: rgba(255,255,255,0.65); font-size: 0.9rem; line-height: 1.65; margin-bottom: 22px; }
.psk-split-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.psk-split-panel__list li { position: relative; padding-left: 30px; font-size: 0.9rem; color: rgba(255,255,255,0.82); line-height: 1.6; }
.psk-split-panel__list li::before {
    content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(252,94,40,0.22); color: #fc5e28; font-size: 0.6rem;
    display: flex; align-items: center; justify-content: center;
}
.psk-split-panel__light .psk-persona-row { padding: 18px 0; border-bottom: 1px solid #f0f0f0; align-items: flex-start; }
.psk-split-panel__light .psk-persona-row:first-of-type { padding-top: 6px; }
.psk-split-panel__light .psk-persona-row--last { border-bottom: none; padding-bottom: 0; }
.psk-split-panel__light .psk-persona-row__body h4 { font-size: 0.96rem; font-weight: 700; color: #040e26; margin: 0 0 3px; }
.psk-split-panel__light .psk-persona-row__body p { font-size: 0.85rem; color: #5c6473; margin: 0; line-height: 1.55; }
@media (max-width: 991px) {
    .psk-split-panel__dark, .psk-split-panel__light { padding: 36px 28px; }
}

/* ── PROCESS BAND — "How It Works", built like the homepage's dark  ── */
/* ── stats band (headline + trust pills on a dark panel, bold solid  ── */
/* ── color tiles on the other side) instead of another white card    ── */
/* ── grid. This is the boldest, most colorful section on the page.  ── */
.psk-process-band {
    position: relative;
    background-color: #040e26;
    background-image:
        radial-gradient(circle at 85% 90%, rgba(252,94,40,0.18), transparent 45%),
        linear-gradient(135deg, #0a1f4d 0%, #040e26 100%);
    padding: 64px 0;
    overflow: hidden;
}
.psk-process-band__intro { padding: 24px 32px 24px 0; }
.psk-process-band__badge {
    display: inline-block; background: #fc5e28; color: #fff;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    padding: 6px 16px; border-radius: 20px; margin-bottom: 20px;
}
.psk-process-band__intro h2 { color: #fff; font-size: 2rem; font-weight: 800; line-height: 1.25; margin-bottom: 16px; }
.psk-process-band__intro h2 span { color: #fc5e28; }
.psk-process-band__intro p { color: rgba(255,255,255,0.68); font-size: 0.95rem; line-height: 1.7; margin-bottom: 22px; max-width: 46ch; }
.psk-process-band__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.psk-process-band__pills span {
    display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
    color: #fff; font-size: 0.82rem; font-weight: 600; padding: 8px 14px; border-radius: 10px;
}
.psk-process-band__pills .fa { color: #fc5e28; }
.psk-process-band__cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fc5e28; color: #fff !important; font-weight: 700; font-size: 0.92rem;
    padding: 13px 26px; border-radius: 10px; text-decoration: none !important;
    transition: background 0.2s, transform 0.2s;
}
.psk-process-band__cta:hover { background: #e04e1f; transform: translateY(-2px); }

.psk-process-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.psk-process-tile {
    position: relative;
    border-radius: 16px;
    padding: 28px 22px 24px;
    min-height: 165px;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 40px -14px rgba(0,0,0,0.4);
}
.psk-process-tile--navy { background: linear-gradient(160deg, #16305c 0%, #0a1b3a 100%); }
.psk-process-tile--orange { background: linear-gradient(160deg, #fc7a4a 0%, #e04e1f 100%); }
.psk-process-tile__icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(255,255,255,0.16); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; margin-bottom: 16px;
}
.psk-process-tile__num { color: #fff; font-size: 2.3rem; font-weight: 800; line-height: 1; margin-bottom: 8px; opacity: 0.92; }
.psk-process-tile__label { color: rgba(255,255,255,0.92); font-size: 0.92rem; font-weight: 700; margin-bottom: 14px; }
.psk-process-tile__line { display: block; width: 32px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.4); margin-top: auto; }
@media (max-width: 991px) {
    .psk-process-band__intro { padding: 8px 0 32px; text-align: center; }
    .psk-process-band__intro p { margin-left: auto; margin-right: auto; }
    .psk-process-band__pills { justify-content: center; }
}
@media (max-width: 575px) {
    .psk-process-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
    .psk-process-tile { padding: 20px 16px 18px; min-height: 140px; }
    .psk-process-tile__num { font-size: 1.8rem; }
}

/* ── FAQ INTRO PANEL — a dark side panel (same bold device as the   ── */
/* ── process band above) paired with the accordion, instead of a    ── */
/* ── plain centered heading sitting on a flat light-gray section.   ── */
.psk-faq-intro-panel {
    position: relative;
    background-color: #040e26;
    background-image:
        radial-gradient(circle at 20% 10%, rgba(252,94,40,0.22), transparent 55%),
        linear-gradient(160deg, #0a1f4d 0%, #040e26 100%);
    border-radius: 18px;
    padding: 34px 30px;
    height: 100%;
}
.psk-faq-intro-panel__badge {
    display: inline-block; background: rgba(252,94,40,0.18); color: #ff9d6e;
    border: 1px solid rgba(252,94,40,0.4); font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px; padding: 5px 14px; border-radius: 20px; margin-bottom: 16px;
}
.psk-faq-intro-panel h2 { color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1.3; margin-bottom: 12px; }
.psk-faq-intro-panel p { color: rgba(255,255,255,0.65); font-size: 0.9rem; line-height: 1.6; margin-bottom: 26px; }
.psk-faq-intro-panel__contact {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.psk-faq-intro-panel__contact .fa { font-size: 1.6rem; color: #25D366; flex-shrink: 0; }
.psk-faq-intro-panel__contact strong { display: block; color: #fff; font-size: 0.88rem; }
.psk-faq-intro-panel__contact span { color: rgba(255,255,255,0.55); font-size: 0.78rem; }
.psk-faq-intro-panel__cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #25D366; color: #fff !important; font-weight: 700; font-size: 0.9rem;
    padding: 12px; border-radius: 10px; text-decoration: none !important;
    transition: background 0.2s, transform 0.2s;
}
.psk-faq-intro-panel__cta:hover { background: #1eb85a; transform: translateY(-2px); }
.psk-faq-intro-panel__divider { height: 1px; background: rgba(255,255,255,0.1); margin: 26px 0 20px; }
.psk-faq-intro-panel__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255,255,255,0.45); margin: 0 0 12px; }
.psk-faq-intro-panel__trust { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; }
.psk-faq-intro-panel__trust li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.83rem; color: rgba(255,255,255,0.78); line-height: 1.5; }
.psk-faq-intro-panel__trust .fa { color: #fc5e28; margin-top: 2px; flex-shrink: 0; width: 14px; text-align: center; }
.psk-faq-intro-panel__links { list-style: none; padding: 0; margin: 0; }
.psk-faq-intro-panel__links li { border-top: 1px solid rgba(255,255,255,0.08); }
.psk-faq-intro-panel__links a {
    display: flex; align-items: center; gap: 10px; padding: 12px 2px;
    font-size: 0.85rem; color: rgba(255,255,255,0.8) !important; text-decoration: none !important;
    transition: color 0.2s;
}
.psk-faq-intro-panel__links a:hover { color: #fc5e28 !important; }
.psk-faq-intro-panel__links .fa { color: #fc5e28; width: 14px; text-align: center; }
@media (max-width: 991px) {
    .psk-faq-intro-panel { text-align: center; }
    .psk-faq-intro-panel__contact, .psk-faq-intro-panel__trust li, .psk-faq-intro-panel__links a { text-align: left; }
}

/* Chapter list — numbered rows instead of a flat two-column line. */
.psk-chapter-list { display: flex; flex-direction: column; }
.psk-chapter-row { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid #f0f0f0; }
.psk-chapter-row:last-child { border-bottom: none; }
.psk-chapter-row__num {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: #040e26; color: #fff; font-weight: 700; font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
}
.psk-chapter-row__title { flex: 1; font-size: 0.92rem; font-weight: 600; color: #1f2430; }
.psk-chapter-row__pages { font-size: 0.78rem; color: #9ca3af; white-space: nowrap; margin-left: 12px; }

.psk-book-preview-page {
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 14px;
    background: #fafbfc;
    position: relative;
}
.psk-book-preview-page__tag {
    position: absolute;
    top: -10px;
    left: 16px;
    background: #059669;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 10px;
}
/* A fade-to-white + lock message right after the last visible preview
   page — the classic "there's more, go buy it" paywall cue. */
.psk-preview-lock {
    position: relative;
    margin-top: -54px;
    padding: 70px 20px 6px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 65%);
    text-align: center;
}
.psk-preview-lock__icon {
    width: 50px; height: 50px; border-radius: 50%;
    background: #fff8f0; border: 2px solid #fde8d8; color: #fc5e28;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px; font-size: 1.25rem;
}
.psk-preview-lock p { font-size: 0.9rem; color: #555; margin-bottom: 14px; }

/* ── Sticky buy box — an accent top border + a slightly richer     ── */
/* ── header than the plain price-only version it replaces.         ── */
.psk-book-sticky-buy {
    position: sticky;
    top: 90px;
    background: #fff;
    border: 1px solid #e2e6ea;
    border-top: 3px solid #fc5e28;
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: 0 8px 30px rgba(4,14,38,0.08);
}
.psk-book-sticky-buy__eyebrow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #fc5e28; text-align: center; margin-bottom: 6px; }
.psk-book-trust-list { list-style: none; padding: 0; margin: 16px 0 0; }
.psk-book-trust-list li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #444; margin-bottom: 10px; }
.psk-book-trust-list .fa { color: #059669; }

/* ── TOC promo card — a deliberately bolder, darker interruption   ── */
/* ── right before the Table of Contents: the moment a reader sees  ── */
/* ── everything the guide covers is the moment to ask for the sale ── */
/* ── again, so this doesn't blend in with the white .psk-detail-   ── */
/* ── card sections around it the way another sticky-buy clone      ── */
/* ── would. Reuses the same navy/orange tokens as the hero cover.  ── */
.psk-toc-promo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    background-color: #040e26;
    background-image:
        radial-gradient(circle at 85% 15%, rgba(252,94,40,0.18), transparent 60%),
        linear-gradient(160deg, #0a1f4d 0%, #040e26 100%);
    border-radius: 18px;
    padding: 26px 28px;
    margin-bottom: 28px;
    box-shadow: 0 20px 50px -12px rgba(4,14,38,0.35);
}
.psk-toc-promo__cover { flex: 0 0 auto; }
.psk-toc-promo__cover img {
    width: 90px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 10px 24px -6px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
}
.psk-toc-promo__cover-fallback {
    width: 90px;
    height: 120px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
}
.psk-toc-promo__cover-fallback img { width: 44px; height: 44px; object-fit: contain; }
.psk-toc-promo__body { flex: 1 1 280px; min-width: 0; }
.psk-toc-promo__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    color: #ff9d6e; margin-bottom: 8px;
}
.psk-toc-promo__title { color: #fff; font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; line-height: 1.35; }
.psk-toc-promo__desc { color: rgba(255,255,255,0.7); font-size: 0.88rem; line-height: 1.6; margin-bottom: 12px; }
.psk-toc-promo__trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.psk-toc-promo__trust li { font-size: 0.78rem; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 6px; }
.psk-toc-promo__trust .fa { color: #059669; }
.psk-toc-promo__cta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-left: 22px;
    border-left: 1px solid rgba(255,255,255,0.12);
}
.psk-toc-promo__price-row { text-align: center; }
.psk-toc-promo__price { font-size: 1.5rem; font-weight: 800; color: #fff; }
.psk-toc-promo__price-was { font-size: 0.85rem; color: rgba(255,255,255,0.45); text-decoration: line-through; margin-left: 6px; }
.psk-toc-promo__btn {
    background: #fc5e28; color: #fff; font-weight: 700; white-space: nowrap;
    box-shadow: 0 10px 24px -6px rgba(252,94,40,0.55);
    border: none;
}
.psk-toc-promo__btn:hover { background: #e04e1f; color: #fff; }
.psk-toc-promo__more-link { font-size: 0.76rem; color: rgba(255,255,255,0.5); text-decoration: underline; }
.psk-toc-promo__more-link:hover { color: #fff; }
@media (max-width: 767px) {
    .psk-toc-promo { flex-direction: column; text-align: center; padding: 22px 20px; }
    .psk-toc-promo__trust { justify-content: center; }
    .psk-toc-promo__cta { border-left: none; border-top: 1px solid rgba(255,255,255,0.12); padding-left: 0; padding-top: 18px; width: 100%; }
    .psk-toc-promo__btn { width: 100%; }
}

/* ── FLIPBOOK READER — a real stacked-page book, not a fading   ── */
/* ── card. Tokens below are our own brand (#fc5e28 / #040e26)   ── */
/* ── restated as a small local palette so the reader's richer   ── */
/* ── component set (chapter heads, callouts, fee tables, etc.)  ── */
/* ── has short, readable names to work with — still zero new    ── */
/* ── colors introduced, just named variables for this one page. ── */
.psk-flipbook-page {
    /* Plain white pages + the site's actual card border/shadow language
       (matches .psk-service-card / .psk-book-card-section elsewhere) —
       replaces the earlier cream "storybook paper" look, which read as a
       generic ebook theme rather than Punjab Saathi's own site. */
    --navy-950: #040e26;
    --navy-900: #0a1b3a;
    --navy-700: #16305c;
    --navy-100: #e7ecf3;
    --navy-050: #f4f6fa;
    --saffron: #fc5e28;
    --saffron-dark: #e04e1f;
    --gold: #ff9466;
    --wheat-line: #e2e6ea;
    --paper: #ffffff;
    --paper-shade: #f7f8fa;
    --ink: #262b36;
    --muted: #5c6473;
    --line: #e2e6ea;
    --green: #059669;
    --red: #b84437;
    background: #eef0f3;
    font-family: 'Noto Sans India', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}
.psk-flipbook-topbar {
    background: var(--navy-950);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 1000;
}
.psk-flipbook-topbar__title { font-size: 0.95rem; font-weight: 700; }
.psk-flipbook-topbar__title small { display: block; font-weight: 400; color: rgba(255,255,255,0.55); font-size: 0.75rem; }
.psk-flipbook-topbar__actions { display: flex; align-items: center; gap: 8px; }
.psk-flipbook-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}
.psk-flipbook-btn:hover { background: rgba(255,255,255,0.2); }
.psk-flipbook-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.psk-flipbook-stage {
    padding: 28px 20px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ── The book itself — a stack of absolutely-positioned pages,  ── */
/* ── each flipped via rotateY on its own left-edge spine. This  ── */
/* ── is what makes it read as an actual book turning, instead   ── */
/* ── of one panel's content being swapped out.                  ── */
/* Wider frame (was capped at 940px, leaving a lot of dead grey space on
   real screens) and a tighter perspective (was 2600px) — a smaller
   perspective value puts the "camera" closer, which makes the page's
   rotateY foreshorten much more visibly as it turns. 940px -> ~1240px
   and 2600px -> 1600px together make the flip read as an actual turning
   page instead of a near-flat, barely-there rotation. */
.psk-book-frame { perspective: 1600px; width: min(1240px, 97vw); }
.psk-book {
    position: relative;
    width: 100%;
    height: min(74vh, 700px);
    min-height: 460px;
    border-radius: 14px;
    box-shadow: 0 40px 80px -20px rgba(4,14,38,0.45), 0 10px 30px -10px rgba(4,14,38,0.3);
    background: var(--paper);
    overflow: hidden;
}
.psk-book-spine {
    position: absolute; left: 0; top: 0; bottom: 0; width: 18px; z-index: 900;
    background: linear-gradient(90deg, var(--navy-950) 0%, var(--navy-700) 45%, var(--navy-950) 100%);
    box-shadow: inset -6px 0 14px rgba(0,0,0,.35), 3px 0 10px rgba(0,0,0,.25);
    pointer-events: none;
}
.psk-book-deck { position: absolute; inset: 0 0 0 18px; }

.psk-page {
    position: absolute; inset: 0;
    background: var(--paper);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform-origin: left center;
    transition: transform 0.82s cubic-bezier(.62,.04,.35,1);
    display: flex;
    flex-direction: column;
}
.psk-page.psk-shading::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,0) 55%);
    opacity: 0;
    animation: pskFlipShade 0.82s cubic-bezier(.62,.04,.35,1);
    pointer-events: none;
    z-index: 5;
}
@keyframes pskFlipShade { 0% { opacity: 0; } 45% { opacity: .55; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .psk-page { transition: none; }
    .psk-page.psk-shading::before { animation: none; }
}

.psk-page-inner {
    flex: 1;
    overflow-y: auto;
    padding: 40px 56px 30px;
    scrollbar-width: thin;
    scrollbar-color: var(--wheat-line) transparent;
    user-select: none;
}
/* Wider book, but text itself stays at a comfortable reading line-length
   — the extra width becomes natural page margin instead of stretching
   paragraphs edge-to-edge. */
.psk-chapter-head, .psk-page-content, .psk-toc-list { max-width: 760px; }
.psk-page-inner::-webkit-scrollbar { width: 7px; }
.psk-page-inner::-webkit-scrollbar-thumb { background: var(--wheat-line); border-radius: 10px; }

.psk-page-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 40px; border-top: 1px solid var(--line);
    font-size: 0.72rem; color: var(--muted);
    background: var(--paper-shade);
}
.psk-page-foot .tag { display: flex; align-items: center; gap: 7px; }
.psk-page-foot .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--saffron); }

/* ── Chapter opener block (big numeral + icon + title) ────── */
.psk-chapter-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.psk-chapter-num {
    font-family: 'Noto Sans India', Georgia, serif; font-weight: 300; font-size: 3.2rem; line-height: 0.9;
    color: var(--saffron); opacity: 0.32; letter-spacing: -0.02em; flex-shrink: 0;
}
.psk-chapter-icon {
    width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
    background: var(--navy-050); color: var(--navy-700);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--navy-100);
    font-size: 1.2rem;
}
.psk-chapter-titles h3 {
    font-family: 'Noto Sans India', Georgia, serif; font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    margin: 2px 0 4px; color: var(--navy-900); line-height: 1.15;
}
.psk-chapter-titles p { margin: 0; color: var(--muted); font-size: 0.87rem; max-width: 52ch; line-height: 1.55; }

/* ── Rich content components — used inside page HTML ──────── */
.psk-page-content { color: var(--ink); line-height: 1.75; font-size: 0.95rem; }
.psk-page-content h3, .psk-page-content h4 { font-family: 'Noto Sans India', Georgia, serif; color: var(--navy-900); }
.psk-page-content h4 { font-size: 1rem; margin: 18px 0 8px; }
.psk-page-content img { max-width: 100%; border-radius: 6px; border: 1px solid #e2e6ea; margin: 10px 0; }
.psk-page-content p { margin: 0 0 12px; }

.psk-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 6px 0 16px; }
.psk-info-card2 { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; }
.psk-info-card2 h5 { margin: 0 0 5px; font-size: 0.85rem; font-weight: 700; color: var(--navy-900); }
.psk-info-card2 p { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }

.psk-check-list { list-style: none; margin: 0 0 14px; padding: 0; }
.psk-check-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; font-size: 0.9rem; line-height: 1.5; }
.psk-check-list li .psk-tick { width: 18px; height: 18px; border-radius: 50%; background: #e8f8f0; color: var(--green); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; font-size: 0.65rem; }
.psk-check-list.psk-cross li .psk-tick { background: #fbeae7; color: var(--red); }

.psk-flow { counter-reset: pskstep; margin: 6px 0 10px; }
.psk-flow-step { position: relative; padding: 0 0 22px 38px; }
.psk-flow-step:last-child { padding-bottom: 2px; }
.psk-flow-step::before {
    counter-increment: pskstep; content: counter(pskstep);
    position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
    background: var(--navy-900); color: #fff; font-family: 'Noto Sans India', Georgia, serif; font-weight: 600; font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center; z-index: 2;
}
.psk-flow-step::after { content: ""; position: absolute; left: 12px; top: 26px; bottom: -2px; width: 2px; background: var(--wheat-line); }
.psk-flow-step:last-child::after { display: none; }
.psk-flow-step h5 { margin: 2px 0 5px; font-size: 0.92rem; color: var(--navy-900); font-weight: 700; }
.psk-flow-step p { margin: 0; font-size: 0.86rem; color: var(--muted); line-height: 1.6; }

.psk-fee-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 0.85rem; }
.psk-fee-table th { background: var(--navy-900); color: #fff; text-align: left; padding: 8px 10px; font-size: 0.78rem; font-weight: 600; }
.psk-fee-table th:first-child { border-radius: 8px 0 0 0; }
.psk-fee-table th:last-child { border-radius: 0 8px 0 0; }
.psk-fee-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.psk-fee-table tr:nth-child(even) td { background: var(--navy-050); }

.psk-callout { border-left: 3px solid var(--saffron); background: #fff7ec; border-radius: 0 10px 10px 0; padding: 12px 15px; margin: 12px 0; font-size: 0.85rem; color: #5a4321; line-height: 1.6; }
.psk-callout.psk-info { border-left-color: var(--navy-700); background: var(--navy-050); color: var(--navy-700); }
.psk-callout.psk-warn { border-left-color: var(--red); background: #fceeec; color: #7a2e24; }

.psk-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 6px; }
.psk-contact-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 13px; }
.psk-contact-card h5 { margin: 0 0 3px; font-size: 0.85rem; color: var(--navy-900); }
.psk-contact-card p { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.5; }

/* ── Cover / TOC / Back-cover synthetic pages ──────────────── */
.psk-cover-page {
    background: radial-gradient(700px 400px at 100% 0%, rgba(244,163,92,.18), transparent 60%), linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 70%);
    color: #fff; display: flex; flex-direction: column; justify-content: center;
    padding: 0 46px; height: 100%; position: relative; overflow: hidden;
}
.psk-cover-emblem { width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(155deg, var(--gold), var(--saffron-dark)); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 14px 30px -8px rgba(224,78,31,.6); font-size: 1.5rem; }
.psk-cover-eyebrow { font-size: 0.8rem; color: var(--gold); font-weight: 600; margin-bottom: 10px; }
.psk-cover-page h2 { font-family: 'Noto Sans India', Georgia, serif; font-weight: 600; font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.1; margin: 0 0 14px; max-width: 14ch; }
.psk-cover-page .psk-cover-sub { font-size: 0.92rem; color: #c7d3e3; max-width: 46ch; line-height: 1.6; margin-bottom: 22px; }
.psk-cover-foot { position: absolute; bottom: 22px; left: 46px; right: 46px; display: flex; justify-content: space-between; font-size: 0.72rem; color: #8ca0bc; }

.psk-back-page { background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 100%); color: #fff; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.psk-back-page h3 { font-family: 'Noto Sans India', Georgia, serif; font-weight: 600; font-size: 1.5rem; margin: 0 0 10px; }
.psk-back-page p { color: #b9c6d8; font-size: 0.85rem; max-width: 40ch; line-height: 1.7; margin: 0 0 6px; }

.psk-toc-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.psk-toc-row {
    display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 10px;
    cursor: pointer; border: 1px solid transparent; background: none; text-align: left; width: 100%;
}
.psk-toc-row:hover { background: var(--navy-050); border-color: var(--navy-100); }
.psk-toc-row .n { font-family: 'Noto Sans India', Georgia, serif; color: var(--saffron); font-weight: 600; font-size: 0.95rem; width: 24px; flex-shrink: 0; }
.psk-toc-row .t { font-size: 0.9rem; color: var(--navy-900); font-weight: 600; flex: 1; }
.psk-toc-row .dots { flex: 1; border-bottom: 1px dotted var(--wheat-line); margin: 0 4px; height: 1px; }
.psk-toc-row .pg { font-size: 0.75rem; color: var(--muted); }

/* ── Bottom controls ────────────────────────────────────────── */
.psk-flipbook-controls { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-bottom: 10px; }
.psk-flipbook-nav {
    position: absolute; top: 45%; transform: translateY(-50%); z-index: 1500;
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; border: 1px solid #e2e6ea;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(4,14,38,0.1); cursor: pointer; color: var(--navy-950);
}
.psk-flipbook-nav:hover:not(:disabled) { background: var(--saffron); color: #fff; }
.psk-flipbook-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.psk-flipbook-nav--prev { left: 8px; }
.psk-flipbook-nav--next { right: 8px; }
@media (min-width: 1360px) {
    .psk-flipbook-nav--prev { left: calc(50% - 660px); }
    .psk-flipbook-nav--next { right: calc(50% - 660px); }
}
.psk-flipbook-progress-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 180px; }
.psk-flipbook-progress { width: 200px; height: 4px; border-radius: 4px; background: #d9dde3; overflow: hidden; }
.psk-flipbook-progress__fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--saffron)); transition: width 0.4s; }
.psk-flipbook-progress-label { font-size: 0.72rem; color: #6b7280; }
.psk-flipbook-toc-btn { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #e2e6ea; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy-950); }
.psk-flipbook-toc-btn:hover { background: var(--saffron); color: #fff; }
.psk-flipbook-hint { color: #9aa5b5; font-size: 0.72rem; margin-top: 2px; text-align: center; }

.psk-flipbook-toc-panel {
    position: fixed; inset: 0 0 0 auto; z-index: 2000; width: min(320px, 88vw);
    background: #fff; box-shadow: -10px 0 40px rgba(4,14,38,0.2);
    padding: 20px 0; overflow-y: auto; transform: translateX(100%); transition: transform 0.25s;
}
.psk-flipbook-toc-panel.open { transform: translateX(0); }
.psk-flipbook-toc-panel h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: #9ca3af; padding: 0 18px 10px; margin: 0; }
.psk-flipbook-toc-panel .psk-toc-row { padding: 10px 18px; border-radius: 0; }
.psk-flipbook-backdrop { position: fixed; inset: 0; background: rgba(4,14,38,0.4); z-index: 1900; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.psk-flipbook-backdrop.open { opacity: 1; pointer-events: auto; }

@media (max-width: 760px) {
    .psk-page-inner { padding: 24px 20px 18px; }
    .psk-page-foot { padding: 8px 20px; }
    .psk-chapter-num { font-size: 2.2rem; }
    .psk-chapter-icon { width: 38px; height: 38px; }
    .psk-book { height: 72vh; min-height: 480px; border-radius: 12px; }
    .psk-book-spine { width: 12px; }
    .psk-book-deck { inset: 0 0 0 12px; }
    .psk-cover-page { padding: 0 26px; }
    .psk-cover-foot { left: 26px; right: 26px; }
    .psk-flipbook-progress-wrap { min-width: 110px; }
    .psk-flipbook-progress { width: 110px; }
}

/* ── CUSTOMER AUTH (login/register) ──────────────────────── */
.psk-auth-wrap { max-width: 440px; margin: 60px auto; }
.psk-auth-card { background: #fff; border: 1px solid #e2e6ea; border-radius: 18px; padding: 36px 32px; box-shadow: 0 8px 32px rgba(4,14,38,0.08); }
.psk-auth-card h1 { font-size: 1.5rem; font-weight: 800; color: #040e26; margin-bottom: 6px; }
.psk-auth-card p.sub { color: #6b7280; font-size: 0.9rem; margin-bottom: 24px; }
.psk-auth-card label { font-size: 0.85rem; font-weight: 600; color: #333; margin-bottom: 6px; }
.psk-auth-card .form-control { border-radius: 10px; padding: 12px 14px; border: 1px solid #dfe2e6; font-size: 0.92rem; }
.psk-auth-card .form-control:focus { border-color: #fc5e28; box-shadow: 0 0 0 3px rgba(252,94,40,0.12); }
.psk-auth-card .btn-submit { width: 100%; background: #fc5e28; color: #fff; border: none; border-radius: 10px; padding: 13px; font-weight: 700; font-size: 0.95rem; margin-top: 8px; }
.psk-auth-card .btn-submit:hover { background: #e04e1f; color: #fff; }
.psk-auth-card .switch-link { text-align: center; margin-top: 18px; font-size: 0.87rem; color: #6b7280; }
.psk-auth-card .switch-link a { color: #fc5e28; font-weight: 700; }
.psk-auth-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; margin-bottom: 16px; }

/* ── PUBLIC PREVIEW FLIPBOOK — a real, interactive page-turning     ── */
/* ── sample embedded on the book detail page (no login needed), so ── */
/* ── a buyer can feel the actual reading experience before paying. ── */
/* Required by page-flip itself (public/js/vendor/page-flip.browser.js)
   — without it, .stf__item (the wrapper it creates around every page)
   stays position:static/display:block, so pages stack in normal
   document flow instead of only the active one being shown. */
.stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); touch-action: pan-y; }
.stf__wrapper { position: relative; width: 100%; box-sizing: border-box; }
.stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

/* A dark "reading nook" stage behind the book — the same device the
   full in-account reader uses — so the preview reads as an object
   sitting in a scene, not text floating on the page's own white
   background. This alone is most of what makes it register as "a
   book" at a glance, before anyone even touches it. */
/* A light, neutral "shelf" rather than navy — the cover itself is
   navy/orange, and a navy stage behind a navy cover makes the two
   blend into one indistinct mass. Light behind dark reads as a real
   object sitting on a surface, the way a product photo would. */
/* Explicit self-hosted font rather than relying on the sitewide body
   stack's generic "Noto Sans" fallback — that name only resolves to an
   actual font on OSes that ship one (mainly Android/ChromeOS), so on
   Windows/iOS it silently fell through further down the stack, giving
   Hindi/Punjabi preview text a different, inconsistent font per device
   instead of the guaranteed one this file self-hosts. */
.psk-pv-stage { font-family: 'Noto Sans India', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.psk-pv-stage {
    position: relative;
    background: linear-gradient(160deg, #f7f8fa 0%, #eef1f6 100%);
    border: 1px solid #e8eaed;
    border-radius: 18px;
    padding: 40px 20px 28px;
    overflow: hidden;
}
.psk-pv-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 15% 15%, rgba(252,94,40,0.08), transparent 45%), radial-gradient(circle at 85% 85%, rgba(4,14,38,0.04), transparent 40%);
}
.psk-pv-flipbook-wrap { position: relative; max-width: 620px; margin: 0 auto; }
.psk-pv-book {
    position: relative;
    width: 100%;
    height: min(66vh, 480px);
    min-height: 340px;
    /* Renders a real drop shadow around whatever the book's actual
       silhouette is at any moment — a single wide page when the cover
       is shown alone, a two-page spread once opened — rather than a
       flat box-shadow sized for one fixed shape. */
    filter: drop-shadow(0 30px 46px rgba(0,0,0,0.45));
}
/* page-flip toggles the outer element's own `display` via inline style
   to show/hide pages, which always overrides a `display:flex` class on
   that same element — so the flex layout lives on an inner wrapper it
   never touches, not on .book-page itself (the element page-flip owns). */
.psk-pv-flipbook-wrap .book-page { overflow: hidden; background: #fff; }
.psk-pv-page-inner { display: flex; flex-direction: column; height: 100%; padding: 26px 28px; }
.psk-pv-page-eyebrow { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #fc5e28; margin-bottom: 10px; flex-shrink: 0; }
.psk-pv-page-content { flex: 1; min-height: 0; overflow: hidden; font-size: 0.88rem; line-height: 1.7; color: #333; }
.psk-pv-page-content img { max-width: 100%; border-radius: 6px; }
.psk-pv-page-num { flex-shrink: 0; text-align: right; font-size: 0.72rem; color: #9ca3af; margin-top: 10px; }

/* A soft center shadow standing in for the spine of an open book —
   toggled by JS only once two pages actually sit side by side, hidden
   in single-page/portrait mode. Same device as the full reader. */
.psk-pv-book.is-spread::after {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: rgba(4,14,38,0.1);
    box-shadow: 0 0 5px 0.5px rgba(4,14,38,0.06);
    pointer-events: none;
    z-index: 10;
}

/* Navy, kept deliberately darker than the now-light stage behind it —
   that contrast (dark object on a light surface) is what makes it read
   as a real, distinct book instead of blending into its backdrop. */
.psk-pv-cover, .psk-pv-locked {
    position: relative;
    background: linear-gradient(160deg, #0a1f4d 0%, #040e26 100%);
    color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; height: 100%;
    box-shadow: 0 18px 40px -12px rgba(4,14,38,0.4);
}
.psk-pv-cover::before, .psk-pv-locked::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 22%, rgba(252,94,40,0.24), transparent 60%);
}
.psk-pv-cover::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    pointer-events: none;
}
.psk-pv-cover > * { position: relative; }
.psk-pv-locked__icon {
    display: flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(155deg, #fc5e28, #e04e1f);
    box-shadow: 0 12px 28px -6px rgba(252,94,40,0.55), 0 0 0 4px rgba(255,255,255,0.08);
    margin-bottom: 18px;
}
.psk-pv-locked__icon .fa { font-size: 1.5rem; color: #fff; margin: 0; }
/* The actual Punjab Saathi mark, not a generic book glyph — the cover
   should read as "this is our book," not just "a book." White backing
   disc so the icon's own cream/orange art stays legible on navy. */
.psk-pv-cover-badge {
    display: flex; align-items: center; justify-content: center;
    width: 68px; height: 68px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 12px 28px -6px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,255,255,0.1);
    margin-bottom: 18px;
    padding: 8px;
    /* The source icon's art extends slightly past a perfect circle at a
       few points (a subtle scalloped edge) — invisible at the small
       favicon size it was designed for, but visible now that it's shown
       this large. Clipping to the circle hides that instead of showing
       odd little notches poking out past the white disc. */
    overflow: hidden;
}
.psk-pv-cover-badge img { width: 100%; height: 100%; object-fit: contain; }
.psk-pv-cover-eyebrow { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #ff9d6e; margin: 0 0 10px; }
/* Explicit white rather than relying on inheriting it from .psk-pv-cover
   — a sitewide default heading color otherwise wins over an inherited
   value (inheritance always loses to any directly-matching rule,
   regardless of specificity), which is what was making this title
   render in the page's normal dark heading color instead of white. */
.psk-pv-cover h4 { font-size: 1.2rem; font-weight: 800; margin: 0 0 8px; line-height: 1.3; color: #fff; }
.psk-pv-cover p { font-size: 0.85rem; color: rgba(255,255,255,0.72); margin: 0; }
/* A curled bottom-right corner — the classic "there's more here, flip
   me" affordance real books and physical page corners both use. */
.psk-pv-cover-corner {
    position: absolute; right: 0; bottom: 0; width: 46px; height: 46px;
    background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.16) 50%);
    border-radius: 0 0 4px 0;
    animation: pskPvCornerHint 2.4s ease-in-out infinite;
}
@keyframes pskPvCornerHint {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
}
.psk-pv-locked h4 { position: relative; font-size: 1.1rem; font-weight: 800; margin: 0 0 8px; color: #fff; }
.psk-pv-locked p { position: relative; font-size: 0.85rem; color: rgba(255,255,255,0.72); margin: 0 0 18px; max-width: 32ch; }
.psk-pv-locked .btn { position: relative; }

.psk-pv-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
    width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #e2e6ea;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(4,14,38,0.25);
    cursor: pointer; color: #040e26;
}
.psk-pv-nav:hover { background: #fc5e28; color: #fff; border-color: #fc5e28; }
.psk-pv-nav--prev { left: -18px; }
.psk-pv-nav--next { right: -18px; }
.psk-pv-hint {
    position: relative;
    text-align: center; font-size: 0.8rem; font-weight: 600; color: #5c6473; margin: 18px 0 0;
}
.psk-pv-hint .fa { color: #fc5e28; margin: 0 5px; animation: pskPvHintNudge 1.6s ease-in-out infinite; display: inline-block; }
@keyframes pskPvHintNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}
@media (max-width: 575px) {
    .psk-pv-stage { padding: 24px 4px 20px; border-radius: 14px; }
    .psk-pv-book { height: min(62vh, 400px); }
    /* The book is nearly full-bleed at this width, so side-overlay
       buttons would sit on top of the page's own centered text instead
       of beside it — swipe/drag (which page-flip already supports
       natively) is the standard mobile pattern real ebook apps use
       instead of persistent arrow buttons anyway. */
    .psk-pv-nav { display: none; }
}

/* Chatbot bubble overlap with the buy box: see the small script at the
   bottom of digital-books/index.blade.php and show.blade.php, which
   hides the bubble specifically while that card is on screen instead
   of relocating the bubble (relocating it just moved the same problem
   to whatever else was in that corner elsewhere on the page). */