/* ==========================================================================
   Homepage - clean Shopify-style layout, cosmic voice intact
   Relies on catalog.css for nav/footer/buttons/grid tokens.
   ========================================================================== */

.home-page {
    background: var(--surface, #0a0a1a);
}

/* --- Gold announcement marquee (squatch taste) ------------------------- */
.top-marquee {
    background: #E9C46A;
    color: #05010F;
    overflow: hidden;
    padding: 9px 0;
    border-bottom: 2px solid #05010F;
}
.top-marquee-track {
    display: flex;
    white-space: nowrap;
    animation: top-marquee-scroll 40s linear infinite;
    font-family: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    width: max-content;
    will-change: transform;
}
.top-marquee-track span { flex: 0 0 auto; padding-right: 48px; }
@keyframes top-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* --- Logo: cart-style SVG moon + MAGICMOON text + ™ -------------------- */
.site-nav .mm-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #f4eedc;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
}
.site-nav .mm-logo .mm-logo-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.site-nav .mm-logo b {
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #ffffff;
}
.site-nav .mm-logo sup {
    font-size: 0.5em;
    color: #E9C46A;
    margin-left: 2px;
    letter-spacing: 0;
    vertical-align: super;
}
.site-nav .mm-logo:hover b { color: #E9C46A; }
@media (max-width: 480px) {
    .site-nav .mm-logo { font-size: 0.85rem; letter-spacing: 0.16em; gap: 8px; }
    .site-nav .mm-logo .mm-logo-icon { width: 18px; height: 18px; flex-basis: 18px; }
}

/* --- Legacy: PNG-image logo (kept for pages still using brand-logo--combo) - */
.site-nav .brand-logo--combo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: #fff;
}
.site-nav .brand-logo--combo .brand-moon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    filter: drop-shadow(0 0 6px rgba(233, 196, 106, 0.4));
}
.site-nav .brand-logo--combo .brand-wordmark {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.site-nav .brand-logo--combo .brand-logo-img {
    height: 24px;
    width: auto;
    display: block;
    object-fit: contain;
}
.site-nav .brand-logo--combo .brand-tm {
    position: absolute;
    top: -2px;
    right: -10px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #E9C46A;
    font-family: 'DM Sans', 'Inter', sans-serif;
    letter-spacing: 0;
    line-height: 1;
}
.site-nav .brand-logo--combo:hover .brand-logo-img { opacity: 0.85; }
.site-nav .brand-logo--combo:hover .brand-moon { filter: drop-shadow(0 0 10px rgba(233, 196, 106, 0.6)); }
@media (max-width: 600px) {
    .site-nav .brand-logo--combo .brand-moon { width: 18px; height: 18px; flex-basis: 18px; }
    .site-nav .brand-logo--combo .brand-logo-img { height: 20px; }
    .site-nav .brand-logo--combo .brand-tm { font-size: 0.55rem; right: -8px; }
}

/* (Old `.announcement-bar` / `.marquee` rules removed -
   the canonical `.marquee` + `.marquee-track` styles live in catalog.css.) */

/* --- Hero --------------------------------------------------------------- */
.hero {
    padding: clamp(2.5rem, 6vw, 5rem) 1.5rem clamp(2rem, 5vw, 4rem);
    border-bottom: 1px solid var(--line, rgba(255,255,255,0.1));
    position: relative;
}
.hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(2rem, 4vw, 3rem);
}
.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 760px;
    width: 100%;
}
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.72rem;
    color: var(--accent, #b89eff);
    margin: 0 0 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    align-self: center;
}
/* Section header eyebrows always center, since the section heads are centered. */
.section-head .eyebrow { align-self: center; }
.eyebrow .dot {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--accent, #b89eff);
    box-shadow: 0 0 12px var(--accent, #b89eff);
    animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.4; transform: scale(0.85); }
}
.hero-title {
    font-family: 'Fraunces', 'Bebas Neue', serif;
    font-weight: 500;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    line-height: 1.0;
    letter-spacing: -0.025em;
    margin: 0 0 1.25rem;
    color: var(--ink, #fff);
}
.accent-text {
    background: linear-gradient(110deg, #b89eff 10%, #7aa8ff 60%, #ffb1d8 110%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
}
.hero-lede {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--ink-dim, rgba(255,255,255,0.7));
    max-width: 600px;
    margin: 0 auto 1.5rem;
}
.hero-lede strong { color: var(--ink, #fff); }
.hero-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
    margin: 0 auto 1.5rem;
    font-size: 0.95rem;
    color: var(--ink-dim, rgba(255,255,255,0.7));
    line-height: 1.2;
}
.hero-rating .stars-row {
    color: #ffd25c;
    letter-spacing: 0.08em;
    line-height: 1;
    font-size: 1.05rem;
}
.hero-rating .rating-text { white-space: nowrap; }
.hero-rating .rating-text strong { color: var(--ink, #fff); font-weight: 700; margin-right: 0.15rem; }

.btn-lg {
    padding: 0.95rem 1.8rem;
    font-size: 0.95rem;
}
.hero-cta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
    justify-content: center;
}
.hero-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-size: 0.78rem;
    color: var(--ink-dim, rgba(255,255,255,0.78));
    justify-content: center;
}
.hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(184, 158, 255, 0.10);
    border: 1px solid rgba(184, 158, 255, 0.30);
    color: var(--accent, #b89eff);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.hero-trust i { color: var(--accent, #b89eff); }

/* Hero tee row - 5 sample shirts under the CTAs */
.hero-tee-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
    width: 100%;
    max-width: 1100px;
    margin-top: clamp(1rem, 2vw, 1.5rem);
}
.hero-tee {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--ink, #fff);
    padding: 0.85rem 0.5rem 0.65rem;
    background:
        radial-gradient(circle at 50% 30%, rgba(184, 158, 255, 0.14), transparent 65%),
        linear-gradient(135deg, rgba(19, 19, 48, 0.6), rgba(10, 10, 26, 0.6));
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    border-radius: 18px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.hero-tee:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 158, 255, 0.45);
    box-shadow: 0 20px 40px -20px rgba(184, 158, 255, 0.35);
}
.hero-tee .tee-mockup {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,0.45));
}
.hero-tee .tee-composite {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border-radius: 10px;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,0.45));
    position: relative;
    z-index: 1;
}
.hero-tee-name {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim, rgba(255,255,255,0.78));
    font-weight: 600;
}
.hero-tee:hover .hero-tee-name { color: var(--ink, #fff); }

@media (max-width: 720px) {
    .hero-tee-row {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.4rem;
    }
    .hero-tee { padding: 0.5rem 0.25rem 0.4rem; border-radius: 12px; }
    .hero-tee-name { font-size: 0.65rem; letter-spacing: 0.05em; }
}

/* --- Stat strip --------------------------------------------------------- */
/* Thin connector bands between the hero and the first big content section.
   Their own inner padding carries the vertical rhythm, so the section-level
   padding is overridden to be tight. `body` prefix wins specificity over the
   `section[class]` baseline below. */
body section.stat-strip {
    padding: 0;
    border-bottom: 1px solid var(--line, rgba(255,255,255,0.1));
}
body section.jm-carousel-section {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    overflow: hidden;
}
.stat-strip-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(2rem, 3.5vw, 3rem) 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}
@media (max-width: 720px) {
    .stat-strip-inner { grid-template-columns: repeat(2, 1fr); }
}
.stat-strip > div > strong, .stat-strip-inner div strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    color: var(--ink, #fff);
    line-height: 1;
    margin-bottom: 0.35rem;
    letter-spacing: -0.02em;
}
.stat-strip-inner div span {
    font-size: 0.78rem;
    color: var(--ink-faint, rgba(255,255,255,0.5));
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* --- Section scaffolding ----------------------------------------------- */
/* Main content sections (featured, why, testimonials, bundles, story, faq,
   newsletter). Tight connector strips (stat-strip, jm-carousel) opt out
   above with `section.<name>` overrides. */
section[class] {
    padding: clamp(4rem, 7.5vw, 6.5rem) 0;
}
.section-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
/* All section headers center by default - including `.with-link` variants. */
.section-head {
    margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section-head.centered {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.section-head.with-link {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
}
.section-head.with-link > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section-head h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    color: var(--ink, #fff);
}
.section-lede {
    color: var(--ink-dim, rgba(255,255,255,0.7));
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
}
.head-link {
    color: var(--accent, #b89eff);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.15s ease;
}
.head-link:hover { gap: 0.7rem; }

/* --- Categories --------------------------------------------------------- */
.categories { border-bottom: 1px solid var(--line, rgba(255,255,255,0.1)); }
.cat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}
@media (max-width: 1000px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

.cat-tile {
    background: var(--surface-1, rgba(255,255,255,0.04));
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    border-radius: 16px;
    padding: 1.5rem 1rem 1.25rem;
    text-align: center;
    text-decoration: none;
    color: var(--ink, #fff);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}
.cat-tile:hover {
    transform: translateY(-3px);
    border-color: var(--accent, #b89eff);
    background: rgba(184, 158, 255, 0.06);
    box-shadow: 0 16px 32px -16px rgba(184, 158, 255, 0.3);
}
.cat-tile-art {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 0.25rem;
    filter: grayscale(0.1);
}
.cat-tile h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    letter-spacing: -0.005em;
}
.cat-tile-count {
    font-size: 0.78rem;
    color: var(--ink-faint, rgba(255,255,255,0.5));
    margin: 0;
}

/* --- Bundles ------------------------------------------------------------ */
.bundles { border-bottom: 1px solid var(--line, rgba(255,255,255,0.1)); }
.bundle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}
@media (max-width: 640px) { .bundle-grid { grid-template-columns: 1fr; } }

/* --- Bundle tee stack (fanned 3D-model tees at top of each card) ------- */
.bundle-tee-stack {
    position: relative;
    width: 100%;
    height: 220px;
    margin-bottom: 0.5rem;
    pointer-events: none;
    perspective: 1200px;
}
.bundle-tee-stack .bundle-tee {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    object-fit: contain;
    transform-origin: 50% 60%;
    filter: drop-shadow(0 18px 24px rgba(0,0,0,0.45));
    transition: transform 0.35s ease;
}
.bundle-card:hover .bundle-tee-stack .bundle-tee {
    transition-duration: 0.45s;
}

/* 1-pack: single tee, centered */
.bundle-tee-stack--1 .bundle-tee {
    transform: translate(-50%, -50%) rotate(-2deg);
}
.bundle-card:hover .bundle-tee-stack--1 .bundle-tee {
    transform: translate(-50%, -52%) rotate(-2deg) scale(1.03);
}

/* 3-pack: fan of 3 (left tilt, center, right tilt) */
.bundle-tee-stack--3 .bundle-tee {
    --offset: calc(var(--i) - 1);
    transform:
        translate(calc(-50% + (var(--offset) * 56px)), -50%)
        rotate(calc(var(--offset) * 9deg));
}
.bundle-tee-stack--3 .bundle-tee[style*="--i:0"] { z-index: 1; }
.bundle-tee-stack--3 .bundle-tee[style*="--i:2"] { z-index: 1; }
.bundle-tee-stack--3 .bundle-tee[style*="--i:1"] { z-index: 3; }
.bundle-card:hover .bundle-tee-stack--3 .bundle-tee {
    transform:
        translate(calc(-50% + (var(--offset) * 70px)), -50%)
        rotate(calc(var(--offset) * 11deg));
}

/* 5-pack: wider fan of 5 */
.bundle-tee-stack--5 .bundle-tee {
    --offset: calc(var(--i) - 2);
    width: 160px;
    height: 160px;
    transform:
        translate(calc(-50% + (var(--offset) * 42px)), -50%)
        rotate(calc(var(--offset) * 8deg));
}
.bundle-tee-stack--5 .bundle-tee[style*="--i:0"] { z-index: 1; }
.bundle-tee-stack--5 .bundle-tee[style*="--i:4"] { z-index: 1; }
.bundle-tee-stack--5 .bundle-tee[style*="--i:1"] { z-index: 2; }
.bundle-tee-stack--5 .bundle-tee[style*="--i:3"] { z-index: 2; }
.bundle-tee-stack--5 .bundle-tee[style*="--i:2"] { z-index: 3; }
.bundle-card:hover .bundle-tee-stack--5 .bundle-tee {
    transform:
        translate(calc(-50% + (var(--offset) * 54px)), -50%)
        rotate(calc(var(--offset) * 10deg));
}

@media (max-width: 600px) {
    .bundle-tee-stack { height: 180px; }
    .bundle-tee-stack .bundle-tee { width: 150px; height: 150px; }
    .bundle-tee-stack--5 .bundle-tee { width: 130px; height: 130px; }
    .bundle-tee-stack--3 .bundle-tee {
        transform:
            translate(calc(-50% + (var(--offset) * 44px)), -50%)
            rotate(calc(var(--offset) * 8deg));
    }
    .bundle-tee-stack--5 .bundle-tee {
        transform:
            translate(calc(-50% + (var(--offset) * 32px)), -50%)
            rotate(calc(var(--offset) * 7deg));
    }
}

.bundle-card {
    position: relative;
    isolation: isolate;
    background: var(--surface-1, rgba(255,255,255,0.04));
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    border-radius: 18px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* White fade-zone sitting behind the tee composites at the top of each card.
   Solid white for the upper ~75% so the shirts pop against pure white, then
   ramps to transparent over the last ~25% so the card's dark surface returns
   just above the "1 Shirt" / "Buy 2..." / "Buy 3..." H3. Pinned to a fixed
   pixel height so the fade line lands at the same y-position on all three
   cards regardless of which content sits inside. */
.bundle-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 290px;
    background: linear-gradient(to bottom,
        #ffffff 0%,
        #ffffff 76%,
        rgba(255, 255, 255, 0) 100%);
    border-radius: 18px 18px 0 0;
    z-index: 0;
    pointer-events: none;
}
.bundle-card > * { position: relative; z-index: 1; }
@media (max-width: 600px) {
    .bundle-card::before { height: 240px; }
}
.bundle-card:hover {
    transform: translateY(-3px);
    border-color: rgba(184, 158, 255, 0.4);
    box-shadow: 0 24px 48px -20px rgba(184, 158, 255, 0.35);
}
.bundle-card--featured {
    background: linear-gradient(160deg, rgba(184, 158, 255, 0.12), rgba(255,255,255,0.03));
    border-color: rgba(184, 158, 255, 0.45);
    transform: translateY(-8px);
}
.bundle-card--featured:hover { transform: translateY(-12px); }
.bundle-badge {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}
.bundle-badge--popular {
    background: #E9C46A;
    color: #05010F;
    border-color: transparent;
}
.bundle-badge--value {
    background: #FF7A59;
    color: #ffffff;
    border-color: transparent;
}
.bundle-card h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}
.bundle-price {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1;
}
.bundle-price strong {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 2.2rem;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.bundle-price .strike {
    color: var(--ink-faint);
    text-decoration: line-through;
    font-size: 1.1rem;
}
.bundle-price em {
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6dd86d;
    letter-spacing: 0.02em;
}
.bundle-price em.ship-note {
    color: var(--ink-faint, rgba(255,255,255,0.5));
    font-weight: 500;
}
.bundle-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--ink-dim);
    font-size: 0.9rem;
}
.bundle-perks i {
    color: var(--accent);
    margin-right: 0.5rem;
    font-size: 0.85rem;
}
.bundle-card .btn-primary,
.bundle-card .btn-secondary {
    margin-top: auto;
    justify-content: center;
    position: static;
}
.bundle-card .btn-primary::after,
.bundle-card .btn-secondary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 18px;
}
.bundle-card { cursor: pointer; }

/* Homepage aggregate rating block - single-line badge: stars + "4.8 out of
   5 stars based on 543 reviews" + "Verified" pill, all on one row. */
.hp-aggregate {
    max-width: max-content;
    margin: 0 auto 2.5rem;
    background: linear-gradient(180deg, rgba(20, 16, 40, 0.55), rgba(12, 10, 26, 0.55));
    border: 1px solid rgba(244, 238, 220, 0.08);
    border-radius: 999px;
    padding: 0.55rem clamp(1rem, 2.5vw, 1.5rem);
}
.reviews-aggregate.hp-aggregate .jdgm-prev-badge {
    display: inline-flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.7rem;
    white-space: nowrap;
    text-align: left;
}
.hp-aggregate .hp-agg-stars {
    width: 96px;
    height: 17px;
    flex-shrink: 0;
    display: block;
}
.hp-aggregate .jdgm-prev-badge__text {
    color: rgba(244, 238, 220, 0.78);
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
}
.hp-aggregate .jdgm-prev-badge__rating,
.hp-aggregate .jdgm-prev-badge__count {
    color: #F4EEDC;
    font-weight: 700;
}
.hp-aggregate .jdgm-verif-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    background: rgba(80, 200, 130, 0.14);
    border: 1px solid rgba(80, 200, 130, 0.35);
    border-radius: 999px;
    color: #7FE0A7;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.hp-aggregate .jdgm-verif-badge::before {
    content: '✓';
    font-size: 0.78rem;
    font-weight: 800;
}
@media (max-width: 520px) {
    .hp-aggregate {
        border-radius: 14px;
        padding: 0.65rem 0.85rem;
    }
    .hp-aggregate .jdgm-prev-badge {
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
        gap: 0.45rem 0.6rem;
    }
    .hp-aggregate .jdgm-prev-badge__text { font-size: 0.82rem; }
}
.hp-aggregate .reviews-aggregate-score {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
}
.hp-aggregate .reviews-aggregate-number {
    font-family: 'Fraunces', serif; font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1;
    color: #F4EEDC; letter-spacing: -0.02em;
}
.hp-aggregate .reviews-aggregate-stars { color: #ffd25c; font-size: 1.1rem; letter-spacing: 0.08em; }
.hp-aggregate .reviews-aggregate-count { color: rgba(244,238,220,0.6); font-size: 0.82rem; }
.hp-aggregate .reviews-aggregate-distribution { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.hp-aggregate .review-dist-row {
    display: grid; grid-template-columns: 56px 1fr 38px;
    align-items: center; gap: 0.7rem;
    font-size: 0.8rem; color: rgba(244,238,220,0.7);
}
.hp-aggregate .review-dist-bar {
    height: 6px; background: rgba(244,238,220,0.1); border-radius: 99px; overflow: hidden;
}
.hp-aggregate .review-dist-fill {
    display: block; height: 100%; background: #ffd25c; border-radius: 99px;
}

/* --- Featured grid uses .design-grid (from catalog.css) ---------------- */
.featured-grid { border-bottom: 1px solid var(--line, rgba(255,255,255,0.1)); }
.featured-grid .design-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .featured-grid .design-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .featured-grid .design-grid { grid-template-columns: repeat(2, 1fr); } }
/* Override catalog.css's single-column phone rule — featured grid stays
   2-up on the smallest screens so the "What's flying off the shelf"
   section keeps two cards per row on mobile. */
@media (max-width: 420px)  { .featured-grid .design-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } }

/* Section header h2s must wrap on mobile so they never overflow the
   viewport (overrides any inline `white-space: nowrap` on individual
   <h2>s like "What's flying off the shelf"). */
@media (max-width: 720px) {
    .section-head h2 { white-space: normal !important; }
}

/* Footer tagline (under the brand wordmark) reads left-aligned —
   reinforces the .footer-col defaults in case any later rule centers it. */
.site-footer .footer-col p { text-align: left; }
.featured-grid-cta {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}
.featured-grid-cta .btn-primary { gap: 0.55rem; }

/* --- Why it works ------------------------------------------------------- */
.why-it-works {
    border-bottom: 1px solid var(--line, rgba(255,255,255,0.1));
    /* Cosmic glow under the section so the cards don't feel marooned on
       a flat dark background. Same approach as the newsletter strip. */
    background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(233, 196, 106, 0.06), transparent 65%);
}
.why-warning {
    max-width: 800px;
    margin: 0 auto 3rem;
    padding: 2.5rem 2rem 2rem;
    border: 2px solid rgba(244, 238, 220, 0.25);
    border-radius: 4px;
    background: rgba(10, 8, 6, 0.6);
    text-align: center;
    position: relative;
}
.why-warning__hazard {
    display: inline-block;
    background: #E9C46A;
    color: #0A0806;
    font-family: 'DM Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(0.75rem, 1.5vw, 0.9rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.35rem 1.2rem;
    margin-bottom: 1.5rem;
}
.why-warning__hazard--bottom {
    margin-top: 1.75rem;
    margin-bottom: 0;
    font-size: 1.1rem;
    letter-spacing: 0.4em;
    background: transparent;
    color: rgba(233, 196, 106, 0.5);
}
.why-warning__headline {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.2rem);
    color: #F4EEDC;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}
.why-warning__body {
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    line-height: 1.75;
    color: rgba(244, 238, 220, 0.72);
    max-width: 640px;
    margin: 0 auto 1.5rem;
}
.why-warning__danger {
    display: inline-block;
    border-top: 1px dashed rgba(220, 50, 50, 0.6);
    border-bottom: 1px dashed rgba(220, 50, 50, 0.6);
    padding: 0.75rem 1rem;
    color: rgba(220, 80, 80, 0.9);
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
    margin-bottom: 0;
    text-transform: uppercase;
}

.three-up {
    display: grid;
    /* Mobile: stacked single column. Tablet + desktop: all three cards
       side by side. Explicit breakpoint prevents 280px-minmax from
       collapsing to 2 cols on mid-width tablets. */
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .three-up {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.why-card {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(233, 196, 106, 0.10), transparent 55%),
        var(--surface-1, rgba(255,255,255,0.04));
    border: 1px solid rgba(233, 196, 106, 0.18);
    border-radius: 20px;
    padding: 2.25rem 1.85rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.why-card::before {
    /* Thin gold hairline along the very top edge - reads as a subtle
       moon-glow on hover, matches the gold accents elsewhere. */
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(233, 196, 106, 0.55), transparent);
    pointer-events: none;
}
.why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(233, 196, 106, 0.45);
    box-shadow: 0 24px 48px -22px rgba(233, 196, 106, 0.35);
}
.why-icon {
    font-size: 2rem;
    margin: 0 auto 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    padding: 0;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.16), transparent 60%),
        rgba(233, 196, 106, 0.14);
    border: 1px solid rgba(233, 196, 106, 0.25);
    border-radius: 18px;
    line-height: 1;
    box-shadow: 0 8px 20px -10px rgba(233, 196, 106, 0.45);
}
.why-card h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    margin: 0 0 0.55rem;
    color: var(--ink, #fff);
}
.why-card p {
    color: var(--ink-dim, rgba(255,255,255,0.7));
    font-size: 0.96rem;
    line-height: 1.7;
    margin: 0;
}

/* --- Testimonials (white review-card wall, staggered) ------------------ */
.testimonials { border-bottom: 1px solid var(--line, rgba(255,255,255,0.1)); }
.review-wall {
    list-style: none;
    margin: 0;
    padding: 1.5rem 0 5rem;
    /* JS-distributed flex columns. home.js -> distributeIntoColumns()
       creates <li.review-col> containers and parcels cards round-robin.
       justify-content:center keeps the column run horizontally centered
       on the page even when there are only 1 or 2 columns (avoids cards
       stretching across the full window on tablet / phone). */
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}
@media (max-width: 600px) {
    .review-wall { flex-direction: column; gap: 1rem; padding-top: 0.75rem; padding-bottom: 3rem; align-items: center; }
}
.review-col {
    flex: 1 1 0;
    min-width: 0;
    max-width: 440px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.review-col > .review-card { flex: 0 0 auto; margin-bottom: 0; }
.testimonials .section-inner { position: relative; }

/* Bottom-fade — cards dissolve through real bottom row + one peek
   row, wall is clipped at fade-end so peek cards beyond drop out of
   layout, and the Load More button sits flush right below the fade.
   Each column gets a min-height matching the clip so no column ends
   short of the fade line (no empty gaps). The last card in each
   column flex-grows to fill any remaining space — that growth lands
   inside the fade region, so the stretch is invisible. JS publishes
   --mm-fade-start-px / --mm-fade-end-px. */
.testimonials.has-more .review-wall {
    padding-bottom: 0;
    max-height: var(--mm-fade-end-px, none);
    overflow: hidden;
    mask-image: linear-gradient(to bottom,
        #000 var(--mm-fade-start-px, 60%),
        transparent var(--mm-fade-end-px, 100%));
    -webkit-mask-image: linear-gradient(to bottom,
        #000 var(--mm-fade-start-px, 60%),
        transparent var(--mm-fade-end-px, 100%));
}
.testimonials.has-more .review-col {
    min-height: var(--mm-fade-end-px, auto);
}
.testimonials.has-more .review-col > .review-card.is-last-in-column {
    flex: 1 1 auto;
}
.testimonials.has-more .review-foot {
    margin-top: 1rem;
}

/* Legacy spacer row (photo / no-photo splitter) — flex columns ignore
   it, but keep the safety hide in case any old markup slips through. */
.review-row-break { display: none; }

/* Tighten the cards themselves so each column actually has room for its
   content at narrower widths - prevents text running into adjacent columns. */
@media (max-width: 1240px) {
    .review-card { padding: 1.3rem 1.3rem 1.05rem; }
}
@media (max-width: 920px) {
    .review-card { padding: 1.15rem 1.15rem 0.95rem; margin-bottom: 1.1rem; }
    .review-card blockquote { font-size: 0.9rem; }
    .review-card .review-title { font-size: 0.95rem; }
}
@media (max-width: 560px) {
    .review-card { padding: 1.25rem 1.25rem 1rem; }
}

.review-card {
    background: #ffffff;
    color: #1a1428;
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow:
        0 16px 40px -14px rgba(0,0,0,0.6),
        0 3px 6px -2px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    /* Slower, more cinematic fade + slide so the cards drift up rather
       than snap. ~1.4s of motion lets the eye settle on each one. */
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.2s ease;
    position: relative;
    opacity: 0;
    transform: translateY(56px);
    /* Multi-column flow: margin-bottom is the only between-card vertical
       gap (column-gap controls horizontal spacing only). 1.5rem matches
       the column-gap so spacing reads as a uniform grid. */
    margin-bottom: 1.5rem;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    width: 100%;
}
.review-card.is-visible { opacity: 1; transform: none; }
/* First 3 cards are pre-painted: skip the starting offset AND the
   transition so they appear fully visible on first paint, no fade or
   slide. Cards 4+ still use the scroll-triggered .is-visible flow. */
.review-card.is-prepainted {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
/* Override the styles.css ::before rule that paints a cosmic-gradient stripe
   across the top of every white card. */
.review-card::before { content: none; display: none; }
/* styles.css applies a global `p { text-shadow: 0 0 8px rgba(0,0,0,0.8); }`
   that bleeds a black glow through every paragraph - including the review
   title and the blockquote body. Strip it for everything inside the card. */
.review-card,
.review-card p,
.review-card blockquote,
.review-card .review-title,
.review-card .review-stars,
.review-card cite,
.review-card .verified,
.review-card .review-readmore {
    text-shadow: none;
}
.review-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 28px 56px -18px rgba(0,0,0,0.65),
        0 5px 10px -3px rgba(0,0,0,0.35);
    z-index: 2;
}

/* Stars: centered, sit directly above the review body */
.review-card .review-stars {
    color: #F5A623;
    letter-spacing: 0.14em;
    font-size: 1.35rem;
    line-height: 1;
    display: block;
    text-align: center;
    margin: 0 auto;
    order: 2;       /* below the title, above the blockquote */
}
.review-card blockquote {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.5;
    color: #1a1428;
    letter-spacing: -0.005em;
    text-align: center;
    order: 3;
}
.review-card footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    width: 100%;
    order: 5;
}
.review-card .review-photo { order: 0; }
.review-card .review-readmore { order: 4; align-self: center; }
.review-card cite {
    font-style: normal;
    font-weight: 700;
    font-size: 0.95rem;
    color: #2c2243;
    letter-spacing: 0.005em;
}
.review-card .verified {
    font-size: 0.75rem;
    font-weight: 700;
    color: #2f7a2f;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
/* Review title: the punchy headline pull-quote at the top of each card.
   Bigger font, centered, wrapped in literal double quotes via ::before / ::after. */
.review-card .review-title {
    margin: 0;
    font-family: 'Fraunces', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 1.4vw, 1.45rem);
    color: #2c2243;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-align: center;
    order: 1;
}
.review-card .review-title::before { content: "\201C"; }   /* curly “ */
.review-card .review-title::after  { content: "\201D"; }   /* curly ” */
/* Card body: full text by default. Cards over ~360 chars get a clamp +
   "Read More" toggle so the wall doesn't get dominated by one giant card.
   The example review the user provided clocks in at ~365 chars; we use
   that as the bar. */
.review-card--clamped blockquote {
    position: relative;
    max-height: 9.5em;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.review-card--clamped.review-card--expanded blockquote {
    max-height: none;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
}
.review-readmore {
    appearance: none;
    background: none;
    border: none;
    margin: 0.15rem 0 0.65rem;
    padding: 0;
    align-self: flex-start;
    color: #5a4a78;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: color 0.18s ease;
}
.review-readmore:hover { color: #1a1428; text-decoration: underline; }

/* (Old .review-foot rule removed — the consolidated rule lives further
   down below the read-more block and uses flex centering with
   !important so no parent context can knock the button off-center.) */
.review-loadmore-btn {
    appearance: none;
    cursor: pointer;
    /* Block-level flex + width:fit-content + margin:auto guarantees the
       button is centered on the page even if the surrounding parent
       picks up some quirky flex/column behavior. */
    display: flex;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.9rem 1.8rem;
    background: rgba(233, 196, 106, 0.12);
    border: 1px solid rgba(233, 196, 106, 0.5);
    border-radius: 999px;
    color: #E9C46A;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.review-loadmore-btn:hover {
    background: rgba(233, 196, 106, 0.22);
    border-color: #E9C46A;
    color: #F4EEDC;
    transform: translateY(-1px);
}
.review-loadmore-count {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(233, 196, 106, 0.7);
    text-transform: none;
}
.review-card .review-photo {
    margin: 0 0 0.25rem;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-card .review-photo img {
    max-width: 100%;
    max-height: 240px;
    width: auto;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.2);
}

/* Composite fallback (no customer photo): show the product tee inline,
   no surrounding box and no drop shadow. */
.review-card .review-photo--fallback {
    width: 100%;
    background: transparent;
    border-radius: 0;
    padding: 0;
}
.review-card .review-photo--fallback img {
    max-height: 200px;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

/* Whole-card link: stretched cover anchor sits ABOVE card contents so any
   click anywhere on the card navigates to the product page. The Read More
   button is lifted above the cover so it still toggles the clamp. */
.review-card--linked { cursor: pointer; }
.review-card-cover {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 3;
    text-indent: -9999px;
    overflow: hidden;
    background: transparent;
}
.review-card-cover:focus-visible {
    outline: 2px solid #5a4a78;
    outline-offset: 2px;
}
/* Read More button must sit above the cover so it remains clickable. */
.review-card .review-readmore {
    position: relative;
    z-index: 4;
}
/* Single source of truth for the .review-foot — page-level centering
   for the Load More button. Defensive: !important defeats any prior
   text-align: left; auto-margins handle the case where flex layout
   gets disabled by a future tweak. */
.review-foot {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: none !important;
    color: var(--ink-faint, rgba(255,255,255,0.5));
    margin: 0 auto !important;
    padding: 1.5rem 0 0 !important;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 3;
}
.review-foot > .review-loadmore-btn {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Story band --------------------------------------------------------- */
/* "The MagicMoon effect" eyebrow on the story band uses gold instead of
   the default cosmic-purple accent so it ties to the brand's hero gold. */
.story-band .eyebrow,
.story-copy .eyebrow { color: var(--cream, #E9C46A); }
.story-band .eyebrow .dot,
.story-copy .eyebrow .dot {
    background: var(--cream, #E9C46A);
    box-shadow: 0 0 12px var(--cream, #E9C46A);
}

.story-band {
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(184, 158, 255, 0.07) 18%,
        rgba(184, 158, 255, 0.07) 82%,
        transparent 100%);
}
.story-band-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (max-width: 900px) {
    .story-band-inner { grid-template-columns: 1fr; }
}
.story-copy h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    color: var(--ink, #fff);
}
.story-copy p {
    color: var(--ink-dim, rgba(255,255,255,0.7));
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}
.story-cta {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.story-cta .btn-primary {
    background: #E9C46A;
    color: #1a1208;
    border-color: transparent;
    font-weight: 800;
}
.story-cta .btn-primary:hover {
    background: #F4B942;
    color: #1a1208;
}
.story-visual {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    background: #131330;
}
.story-visual img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

/* --- FAQ ---------------------------------------------------------------- */
/* Border removed — the newsletter section's cosmic glow handles the
   visual break; a hard line above it broke the star-to-purple fade. */
.faq { border-bottom: none; }
.faq-grid {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.faq-item {
    background: var(--surface-1, rgba(255,255,255,0.04));
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.faq-item[open] {
    border-color: rgba(184, 158, 255, 0.4);
    background: rgba(184, 158, 255, 0.04);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink, #fff);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
    color: var(--accent, #b89eff);
    transition: transform 0.2s ease;
    font-size: 0.85rem;
}
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item p {
    margin: 0.85rem 0 0;
    color: var(--ink-dim, rgba(255,255,255,0.7));
    font-size: 0.95rem;
    line-height: 1.65;
}
.faq-foot {
    text-align: center;
    margin-top: 2rem;
    color: var(--ink-faint, rgba(255,255,255,0.5));
    font-size: 0.9rem;
}
.faq-foot a {
    color: var(--accent, #b89eff);
    text-decoration: none;
    font-weight: 600;
}
.faq-foot a:hover { color: var(--ink, #fff); }

/* ==========================================================================
   Newsletter strip - override catalog.css since `section[class]` outranks it
   ========================================================================== */
section.newsletter-strip {
    /* Edge-to-edge band. The global `section { max-width: 1200px }` rule
       in styles.css would otherwise cap this at 1200px with sharp side
       edges; override to fill the viewport so the purple wash bleeds to
       the window edges. Inner `.nl-v9` stays centered at page width. */
    position: relative;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(3.5rem, 6vw, 5rem) 1.5rem clamp(2.5rem, 5vw, 3.5rem);
    box-sizing: border-box;
    /* Edge-to-edge soft purple wash. Both ends are fully transparent
       so the wash dissolves cleanly into adjacent sections (no hard
       horizontal line top or bottom). Alphas chosen so the band is
       clearly visible all the way to the section's side edges. */
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(184, 158, 255, 0.04) 12%,
        rgba(184, 158, 255, 0.10) 35%,
        rgba(184, 158, 255, 0.14) 50%,
        rgba(184, 158, 255, 0.10) 65%,
        rgba(184, 158, 255, 0.04) 88%,
        transparent 100%);
    border: none;
}
section.newsletter-strip .newsletter-inner {
    max-width: 960px;
    margin: 0 auto;
    background: var(--surface-1, rgba(255,255,255,0.04));
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    border-radius: 22px;
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
section.newsletter-strip .newsletter-copy {
    flex: 1;
    min-width: 260px;
}
section.newsletter-strip .newsletter-copy h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.45rem;
    color: var(--ink, #fff);
}
section.newsletter-strip .newsletter-copy p {
    color: var(--ink-dim, rgba(255,255,255,0.7));
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}
section.newsletter-strip .newsletter-form {
    flex: 0 1 420px;
    display: flex;
    gap: 0.5rem;
    min-width: 260px;
}
section.newsletter-strip .newsletter-form input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    color: var(--ink, #fff);
    padding: 0.75rem 1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-family: inherit;
    min-width: 0;
}
section.newsletter-strip .newsletter-form input::placeholder { color: var(--ink-faint, rgba(255,255,255,0.5)); }
section.newsletter-strip .newsletter-form input:focus { outline: none; border-color: var(--accent, #b89eff); }

/* ============================================================
   NEWSLETTER - multi-variant Handbook + 10% off opt-in
   Toggled via [data-nl-variant="N"] on #nlHost.
   ============================================================ */
section.newsletter-strip { position: relative; }
.nl-variant { display: none; max-width: 1400px; margin: 0 auto; width: 100%; }
.nl-host-show-1 .nl-variant--1, #nlHost[data-nl-variant="1"] .nl-variant--1,
#nlHost[data-nl-variant="2"] .nl-variant--2,
#nlHost[data-nl-variant="3"] .nl-variant--3,
#nlHost[data-nl-variant="4"] .nl-variant--4,
#nlHost[data-nl-variant="5"] .nl-variant--5,
#nlHost[data-nl-variant="6"] .nl-variant--6,
#nlHost[data-nl-variant="7"] .nl-variant--7,
#nlHost[data-nl-variant="8"] .nl-variant--8,
#nlHost[data-nl-variant="9"] .nl-variant--9,
#nlHost[data-nl-variant="10"] .nl-variant--10 { display: block; }

/* Shared form base used by every variant */
.nl-form {
    display: flex;
    gap: 0.5rem;
    /* nowrap so the email + button stay on a single line as requested.
       On narrow viewports (<540px) we drop back to wrap so the button
       doesn't get crushed off-screen. */
    flex-wrap: nowrap;
    align-items: stretch;
    margin-top: 1rem;
}
@media (max-width: 540px) {
    .nl-form { flex-wrap: wrap; }
}
.nl-form input {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    padding: 0.85rem 1.1rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-family: inherit;
}
.nl-form .btn-primary {
    flex: 0 0 auto;
    white-space: nowrap;
}
.nl-form input::placeholder { color: rgba(255,255,255,0.5); }
.nl-form input:focus { outline: none; border-color: #b89eff; }
.nl-form .btn-primary {
    padding: 0.85rem 1.5rem;
    font-weight: 700;
    border-radius: 999px;
    background: linear-gradient(180deg, #f3d57a 0%, #E9C46A 55%, #d4ad55 100%);
    color: #1a1208;
    border: 1px solid rgba(233, 196, 106, 0.6);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.nl-form .btn-primary:hover { transform: translateY(-1px); }
.nl-success {
    margin: 0;
    padding: 0.85rem 1rem;
    background: rgba(109, 216, 109, 0.15);
    border: 1px solid rgba(109, 216, 109, 0.45);
    border-radius: 12px;
    color: #6dd86d;
    font-weight: 700;
    text-align: center;
}

/* ---- Variant 1: Centered hero card with twin badges ---- */
.nl-card {
    max-width: 640px;
    margin: 0 auto;
    background: linear-gradient(160deg, rgba(60, 45, 95, 0.85), rgba(20, 12, 38, 0.85));
    border: 1px solid rgba(233, 196, 106, 0.28);
    border-radius: 22px;
    padding: clamp(1.75rem, 4vw, 2.6rem);
    text-align: center;
}
.nl-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.nl-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
    border-radius: 999px;
}
.nl-badge i { font-size: 0.85em; }
.nl-badge--book { background: rgba(184, 158, 255, 0.18); color: #b89eff; border: 1px solid rgba(184, 158, 255, 0.4); }
.nl-badge--off  { background: rgba(233, 196, 106, 0.18); color: #E9C46A; border: 1px solid rgba(233, 196, 106, 0.4); }
.nl-card h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.1;
    margin: 0 0 0.5rem;
    color: #fff;
}
.nl-card p {
    color: rgba(255,255,255,0.7);
    margin: 0 auto;
    max-width: 460px;
    font-size: 0.95rem;
    line-height: 1.5;
}
.nl-card .nl-form { justify-content: center; }
.nl-card .nl-form input { max-width: 320px; }
.nl-fine { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-top: 0.85rem; }

/* ---- Variant 2: Two-column with handbook art ---- */
/* V2 split sits flush on the section's own radial-glow background -
   no card border, no contrast fill. The handbook + form just floats
   over the purple wash, blending seamlessly into the page. */
.nl-split {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: clamp(1rem, 2vw, 1.5rem) 0;
}
@media (max-width: 760px) { .nl-split { grid-template-columns: 1fr; gap: 1.75rem; } }
.nl-split-art { display: flex; align-items: center; justify-content: center; }
.nl-book {
    position: relative;
    /* 220×330 matches the cover image's 1075×1613 aspect ratio (0.667),
       so the full cover fits without cropping at the top/bottom. */
    width: 220px; height: 330px;
    transform: rotate(-4deg);
    filter: drop-shadow(0 24px 40px rgba(0,0,0,0.6));
    perspective: 1400px;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.nl-book:hover { transform: rotate(-4deg); }
.nl-book-inside {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    background: #faf3df;
    border-radius: 4px 12px 12px 4px;
    border: 1px solid rgba(233, 196, 106, 0.25);
    z-index: 0;
    /* Always rendered behind the cover. The cover swinging open reveals
       it — no opacity transition needed (was the source of the 1s lag). */
    opacity: 1;
}
.nl-book-cover {
    width: 100%; height: 100%;
    background: linear-gradient(160deg, #1a1438 0%, #050511 100%);
    border: 1px solid rgba(233, 196, 106, 0.35);
    border-radius: 4px 12px 12px 4px;
    padding: 1.4rem 1.2rem;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.45rem;
    text-align: center;
    position: relative;
}
.nl-book-cover::before {
    content: '';
    position: absolute; inset: 1rem;
    border: 1px solid rgba(233, 196, 106, 0.25);
    border-radius: 2px;
    pointer-events: none;
}
.nl-book-eyebrow { font-size: 0.6rem; letter-spacing: 0.3em; color: #E9C46A; font-weight: 800; }
.nl-book-title { font-family: 'Fraunces', serif; font-size: 1.5rem; color: #fff; line-height: 1.05; font-weight: 600; }
.nl-book-sub   { font-size: 0.7rem; color: rgba(255,255,255,0.5); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.6rem; }
.nl-book-spine {
    position: absolute; left: -8px; top: 0; bottom: 0; width: 8px;
    background: linear-gradient(90deg, #050511, #1a1438);
    border-radius: 2px 0 0 2px;
}
/* Cover is a 2-face flipper: front = cover image, back = plain white.
   Classic CSS flip-card pattern using transform-style: preserve-3d on
   the wrapper and backface-visibility:hidden on each face so only the
   face currently aimed at the camera renders. */
.nl-book-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.nl-book:hover .nl-book-cover {
    transform: rotateY(-155deg);
}
.nl-book-cover-img,
.nl-book-cover-back {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border-radius: 4px 12px 12px 4px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.nl-book-cover-img {
    object-fit: cover;
    border: 1px solid rgba(233, 196, 106, 0.35);
    display: block;
}
.nl-book-cover-back {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transform: rotateY(180deg);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.04);
    /* Mirrored radii: the back face is rotated 180° around Y, so CSS
       left/right are swapped on screen. Use the reverse of the front
       cover's radius so the rendered corners match (small near spine,
       large near the open edge). */
    border-radius: 12px 4px 4px 12px;
}
@media (prefers-reduced-motion: reduce) {
    .nl-book-cover, .nl-book { transition: none !important; }
    .nl-book:hover .nl-book-cover { transform: none; }
}
.nl-split-body h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    line-height: 1.08;
    margin: 0.3rem 0 0.7rem;
    color: #fff;
}
.nl-bullets { list-style: none; padding: 0; margin: 0.4rem 0 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; }
.nl-bullets li { display: flex; align-items: center; gap: 0.6rem; color: rgba(255,255,255,0.8); font-size: 0.93rem; }
.nl-bullets i { color: #E9C46A; width: 18px; text-align: center; }

/* ---- Variant 3: Compact inline bar ---- */
.nl-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem;
    max-width: 960px; margin: 0 auto;
    padding: 1.1rem 1.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(233, 196, 106, 0.25);
    border-radius: 999px;
}
@media (max-width: 720px) { .nl-bar { border-radius: 18px; padding: 1.4rem; } }
.nl-bar-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    background: rgba(233, 196, 106, 0.15);
    border: 1px solid rgba(233, 196, 106, 0.45);
    color: #E9C46A;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.nl-bar-copy { flex: 1 1 220px; color: rgba(255,255,255,0.8); font-size: 0.95rem; }
.nl-bar-copy b { color: #fff; }
.nl-form--inline { flex: 1 1 320px; margin: 0; }

/* ---- Variant 4: Coupon ticket ---- */
.nl-coupon {
    position: relative;
    max-width: 480px; margin: 0 auto;
    background: linear-gradient(135deg, #f3d57a 0%, #E9C46A 100%);
    color: #1a1208;
    padding: 2rem 1.8rem;
    border-radius: 6px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
    text-align: center;
}
.nl-coupon::before, .nl-coupon::after {
    content: ''; position: absolute; top: 50%; width: 24px; height: 24px;
    background: var(--ink, #0a0a1a);
    border-radius: 50%; transform: translateY(-50%);
}
.nl-coupon::before { left: -12px; }
.nl-coupon::after { right: -12px; }
.nl-coupon-stamp {
    display: inline-block;
    background: #1a1208; color: #E9C46A;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.24em;
    padding: 0.32rem 0.8rem;
    border-radius: 3px;
    margin-bottom: 1rem;
}
.nl-coupon-headline {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.05;
    color: #1a1208;
    margin: 0;
    letter-spacing: -0.01em;
}
.nl-coupon-headline span { font-size: 1.6rem; font-weight: 600; }
.nl-coupon-dash {
    border: none; border-top: 2px dashed rgba(26, 18, 8, 0.35);
    margin: 1rem 1.2rem;
}
.nl-coupon-fine { font-size: 0.82rem; color: rgba(26, 18, 8, 0.75); margin: 0 0 1rem; }
.nl-coupon .nl-form { justify-content: center; }
.nl-coupon .nl-form input { background: rgba(26, 18, 8, 0.08); color: #1a1208; border-color: rgba(26, 18, 8, 0.2); max-width: 320px; }
.nl-coupon .nl-form input::placeholder { color: rgba(26, 18, 8, 0.5); }
.nl-coupon .nl-form .btn-primary { background: #1a1208; color: #E9C46A; border-color: #1a1208; font-weight: 800; letter-spacing: 0.18em; }
.nl-coupon .nl-form .btn-primary:hover { background: #2a1f4a; }
.nl-coupon .nl-success { background: rgba(26, 18, 8, 0.1); border-color: #1a1208; color: #1a1208; }

/* ---- Variant 5: Bold manifesto / numbered list ---- */
.nl-manifesto {
    max-width: 720px; margin: 0 auto;
    padding: clamp(1.2rem, 3vw, 2rem) 0;
}
.nl-manifesto .eyebrow {
    color: #E9C46A; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 800;
    margin-bottom: 0.85rem;
}
.nl-manifesto h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.85rem, 4vw, 2.8rem);
    line-height: 1.05;
    margin: 0 0 1.4rem;
    color: #fff;
    letter-spacing: -0.02em;
}
.nl-manifesto-list {
    list-style: none; padding: 0;
    display: flex; flex-direction: column;
    gap: 1.1rem; margin: 0 0 1.5rem;
}
.nl-manifesto-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    align-items: start;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(233, 196, 106, 0.15);
}
.nl-manifesto-list li:last-child { border-bottom: none; padding-bottom: 0; }
.nl-num {
    font-family: 'Fraunces', serif;
    font-size: 2.4rem; font-weight: 600;
    color: #E9C46A;
    line-height: 0.9;
    opacity: 0.85;
}
.nl-li-title {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1.2rem; font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
}
.nl-li-sub { color: rgba(255,255,255,0.65); font-size: 0.92rem; line-height: 1.5; }

/* ---- Floating switcher ---- */
.nl-switcher {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 99999;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(12, 5, 24, 0.94);
    border: 1px solid rgba(233, 196, 106, 0.4);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    padding: 0.5rem 0.55rem;
    border-radius: 999px;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.55);
    font-family: 'DM Sans', sans-serif;
    isolation: isolate;
}
.nl-switcher.is-hidden { display: none; }
.nl-switcher *, .nl-switcher button { pointer-events: auto; }
.nl-switcher-label {
    color: #E9C46A; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.2em;
    text-transform: uppercase; padding: 0 0.4rem 0 0.5rem;
}
.nl-switcher-btn {
    background: rgba(233, 196, 106, 0.1);
    color: rgba(244, 238, 220, 0.8);
    border: 1px solid rgba(233, 196, 106, 0.25);
    width: 30px; height: 30px; border-radius: 50%;
    font-family: inherit; font-weight: 800; font-size: 0.78rem;
    cursor: pointer; transition: all 0.15s ease;
}
.nl-switcher-btn:hover { color: #E9C46A; border-color: #E9C46A; }
.nl-switcher-btn.is-active { background: #E9C46A; color: #1a1428; border-color: #E9C46A; }
.nl-switcher-close {
    background: transparent; color: rgba(244, 238, 220, 0.55);
    border: none; font-size: 1.2rem; line-height: 1;
    cursor: pointer; padding: 0 0.3rem 0 0.5rem; margin-left: 0.2rem;
    border-left: 1px solid rgba(233, 196, 106, 0.2);
}
.nl-switcher-close:hover { color: #E9C46A; }
/* Small visual divider between the original 1-5 buttons and the new 6-10
   "improved v2" buttons in the switcher pill. */
.nl-switcher-sep {
    width: 1px;
    align-self: stretch;
    background: rgba(233, 196, 106, 0.3);
    margin: 0 0.25rem;
}

/* ============================================================
   "Improved v2" layout variants 6-10 (all use the same .nl-book
   art element from v2 but rearrange copy, card, and CTAs around
   it for distinct desktop + mobile reads).
   ============================================================ */

/* ---- Variant 6: Vertical centered hero (mobile-first vibe) ---- */
.nl-v6 {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(1.25rem, 3vw, 2rem);
    padding: clamp(0.5rem, 2vw, 1.5rem) 0;
}
.nl-v6-body { width: 100%; max-width: 520px; }
.nl-v6-body h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.55rem, 3.4vw, 2.2rem);
    line-height: 1.1;
    margin: 0.4rem 0 1rem;
    color: #fff;
}
.nl-v6-bullets {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto 1.25rem !important;
    gap: 0.4rem;
}

/* ---- Variant 7: Asymmetric grid with big discount stat ---- */
.nl-v7 {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 1.6fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(0.5rem, 2vw, 1.5rem) 0;
}
.nl-v7-art { display: flex; align-items: center; justify-content: center; }
.nl-v7-body { display: flex; flex-direction: column; }
.nl-v7-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.55rem 1rem;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.18), rgba(184, 158, 255, 0.12));
    border: 1px solid rgba(233, 196, 106, 0.4);
    align-self: flex-start;
}
.nl-v7-stat-num {
    font-family: 'Fraunces', serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: #E9C46A;
    line-height: 1;
}
.nl-v7-stat-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.nl-v7-body h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    line-height: 1.05;
    margin: 0 0 0.75rem;
    color: #fff;
}
.nl-v7-lede { color: rgba(255, 255, 255, 0.72); margin: 0 0 1.1rem; line-height: 1.55; }
@media (max-width: 760px) {
    .nl-v7 { grid-template-columns: 1fr; gap: 1.75rem; text-align: center; }
    .nl-v7-stat { align-self: center; }
    .nl-v7-body h2 { text-align: center; }
}

/* ---- Variant 8: Frosted card with inset book + checkmark list ---- */
.nl-v8-card {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 1.4fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: linear-gradient(160deg, rgba(40, 28, 64, 0.55), rgba(20, 12, 38, 0.45));
    border: 1px solid rgba(233, 196, 106, 0.25);
    border-radius: 22px;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
}
.nl-v8-art { display: flex; align-items: center; justify-content: center; }
.nl-v8-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.8rem;
    background: rgba(184, 158, 255, 0.16);
    color: #b89eff;
    border: 1px solid rgba(184, 158, 255, 0.4);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    align-self: flex-start;
    margin-bottom: 0.6rem;
}
.nl-v8-body h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    line-height: 1.08;
    margin: 0 0 1rem;
    color: #fff;
}
.nl-v8-check {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.nl-v8-check li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
}
.nl-v8-check i {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(109, 216, 109, 0.18);
    color: #6dd86d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}
@media (max-width: 760px) {
    .nl-v8-card { grid-template-columns: 1fr; gap: 1.5rem; }
    .nl-v8-pill { align-self: center; }
    .nl-v8-body { text-align: center; }
    .nl-v8-body h2 { text-align: center; }
    .nl-v8-check { align-items: flex-start; max-width: 320px; margin: 0 auto 1.25rem; }
}

/* ---- Variant 9: Book with floating gold "10% OFF" stamp ---- */
.nl-v9 {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 1.3fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}
.nl-v9-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
}
.nl-v9-stamp {
    position: absolute;
    top: -18px;
    right: -10px;
    width: 124px;
    height: 124px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f5d97d 0%, #E9C46A 55%, #c8a14a 100%);
    color: #1a1208;
    box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.6),
                inset 0 0 0 2px rgba(26, 18, 8, 0.18);
    transform: rotate(-12deg);
    font-family: 'Fraunces', serif;
    font-weight: 700;
    z-index: 3;
    pointer-events: none;
}
.nl-v9-stamp::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1.5px dashed rgba(26, 18, 8, 0.35);
    border-radius: 50%;
}
.nl-v9-stamp-pct {
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: 0.02em;
}
.nl-v9-stamp-off {
    /* Same visual width as "GET IT" above, but achieved by scaling the
       glyphs up (rather than stretching letter-spacing) so the letters
       sit close together and read as one bold word. */
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-indent: 0.02em;
    margin-top: 0.05rem;
    line-height: 1;
    white-space: nowrap;
}
.nl-v9-body h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    line-height: 1.08;
    margin: 0.3rem 0 0.85rem;
    color: #fff;
    /* Balance line lengths so the headline reads as evenly distributed
       blocks at both desktop and mobile breakpoints (no orphan tail). */
    text-wrap: balance;
}
.nl-v9-body .eyebrow,
.nl-v9-body .nl-bullets li {
    text-wrap: pretty;
}
@media (max-width: 760px) {
    .nl-v9 { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
    .nl-v9-body h2 { text-align: center; }
    /* Bullets stay left-aligned on mobile to match desktop. The icon-then-text
       row is easier to scan when each bullet starts at the same left edge. */
    .nl-v9-body .nl-bullets {
        text-align: left;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
    .nl-v9-stamp { width: 104px; height: 104px; top: 0; right: 8%; }
    .nl-v9-stamp-pct { font-size: 1.3rem; }
    .nl-v9-stamp-off { font-size: 1.85rem; letter-spacing: 0.02em; text-indent: 0.02em; }
}

/* ---- Variant 10: Three-page fan preview ---- */
.nl-v10 {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 1fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(0.5rem, 2vw, 1.5rem) 0;
}
.nl-v10-fan {
    position: relative;
    height: 360px;
    perspective: 1400px;
}
.nl-fan-page {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 300px;
    object-fit: cover;
    background: #faf3df;
    border-radius: 4px 12px 12px 4px;
    border: 1px solid rgba(233, 196, 106, 0.25);
    box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -50%) rotate(0deg);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.nl-fan-page--1 { z-index: 3; transform: translate(-50%, -50%) rotate(-4deg); }
.nl-fan-page--2 { z-index: 2; transform: translate(-50%, -50%) rotate(0deg); }
.nl-fan-page--3 { z-index: 1; transform: translate(-50%, -50%) rotate(4deg); }
.nl-v10-fan:hover .nl-fan-page--1 { transform: translate(calc(-50% - 90px), -50%) rotate(-14deg); }
.nl-v10-fan:hover .nl-fan-page--2 { transform: translate(-50%, calc(-50% - 18px)) rotate(0deg); }
.nl-v10-fan:hover .nl-fan-page--3 { transform: translate(calc(-50% + 90px), -50%) rotate(14deg); }
.nl-v10-body h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    line-height: 1.08;
    margin: 0.3rem 0 0.85rem;
    color: #fff;
}
.nl-v10-lede { color: rgba(255, 255, 255, 0.72); margin: 0 0 1.1rem; line-height: 1.55; }
@media (max-width: 760px) {
    .nl-v10 { grid-template-columns: 1fr; gap: 1.25rem; text-align: center; }
    .nl-v10-fan { height: 300px; }
    .nl-fan-page { width: 170px; height: 250px; }
    .nl-v10-fan:hover .nl-fan-page--1 { transform: translate(calc(-50% - 60px), -50%) rotate(-10deg); }
    .nl-v10-fan:hover .nl-fan-page--3 { transform: translate(calc(-50% + 60px), -50%) rotate(10deg); }
}

/* ==========================================================================
   Spirit-shirt quiz modal
   ========================================================================== */
.quiz-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: quiz-fade 0.18s ease-out;
}
@keyframes quiz-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.quiz-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 17, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0;
    cursor: pointer;
}
.quiz-card {
    position: relative;
    background: linear-gradient(170deg, #1a1438, #0a0a1a);
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    border-radius: 22px;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 2rem);
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 40px 100px -20px rgba(0,0,0,0.7);
    text-align: center;
}
.quiz-card::-webkit-scrollbar { display: none; width: 0; height: 0; }
.quiz-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    color: var(--ink, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.quiz-close:hover { background: rgba(255,255,255,0.16); }

.quiz-screen { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.quiz-screen[hidden],
.quiz-modal[hidden] { display: none !important; }

/* Intro */
.quiz-intro h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink, #fff);
}
.quiz-lede {
    color: var(--ink-dim, rgba(255,255,255,0.7));
    max-width: 460px;
    margin: 0;
    line-height: 1.6;
    font-size: 0.98rem;
}
.quiz-disclaimer {
    color: var(--ink-faint, rgba(255,255,255,0.5));
    font-size: 0.78rem;
    margin: 0;
    margin-top: 0.5rem;
}

/* Progress */
.quiz-progress {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}
.quiz-progress-bar {
    height: 100%;
    width: 10%;
    background: linear-gradient(90deg, #7aa8ff, #b89eff, #ffb1d8);
    transition: width 0.35s ease;
}
.quiz-step {
    color: var(--ink-faint, rgba(255,255,255,0.5));
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0;
}
.quiz-question {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.3rem, 2.8vw, 1.65rem);
    line-height: 1.25;
    margin: 0.25rem 0 0.5rem;
    letter-spacing: -0.01em;
    color: var(--ink, #fff);
    max-width: 460px;
}

/* Options */
.quiz-options {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.quiz-option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.95rem 1.15rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    color: var(--ink, #fff);
    font-family: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}
.quiz-option:hover {
    background: rgba(184, 158, 255, 0.08);
    border-color: rgba(184, 158, 255, 0.4);
    transform: translateY(-1px);
}
.quiz-option.selected {
    background: rgba(184, 158, 255, 0.15);
    border-color: var(--accent, #b89eff);
}
.option-marker {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.3);
    flex: 0 0 18px;
    position: relative;
    transition: all 0.15s ease;
}
.quiz-option.selected .option-marker {
    border-color: var(--accent, #b89eff);
    background: var(--accent, #b89eff);
    box-shadow: 0 0 0 4px rgba(184, 158, 255, 0.2);
}
.quiz-option.selected .option-marker::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    background: #0a0a1a;
}
.option-label { flex: 1; line-height: 1.4; }

.quiz-controls {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: 0.5rem;
}
.quiz-back {
    background: transparent;
    border: none;
    color: var(--ink-faint, rgba(255,255,255,0.5));
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0;
}
.quiz-back:hover { color: var(--ink, #fff); }

/* Result */
.quiz-result h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(2rem, 4.5vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink, #fff);
    background: linear-gradient(110deg, #b89eff 10%, #7aa8ff 60%, #ffb1d8 110%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.quiz-result-art {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    margin: 0.5rem auto;
    background:
        radial-gradient(circle at 50% 35%, rgba(184, 158, 255, 0.18), transparent 65%),
        #0b0b1f;
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.quiz-result-tee {
    width: 92%;
    height: 92%;
}
.quiz-result-tagline {
    color: var(--ink-dim, rgba(255,255,255,0.7));
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.5;
    max-width: 460px;
    margin: 0;
}
.quiz-result-cta {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

/* ============================================================
   QUIZ RESULT - multi-variant reveal page
   Variants are toggled via [data-variant="N"] on #quiz-result.
   Each .qr-variant container shows only when its number matches.
   ============================================================ */
.quiz-result { position: relative; }
.qr-variant { display: none; flex-direction: column; align-items: center; gap: 1.1rem; width: 100%; }
.quiz-result[data-variant="1"] .qr-variant--1,
.quiz-result[data-variant="2"] .qr-variant--2,
.quiz-result[data-variant="3"] .qr-variant--3,
.quiz-result[data-variant="4"] .qr-variant--4 { display: flex; }

/* Shared bits */
.qr-name {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.85rem, 4.2vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    background: linear-gradient(110deg, #b89eff 10%, #7aa8ff 60%, #ffb1d8 110%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-align: center;
}
.qr-tagline {
    color: rgba(255, 255, 255, 0.72);
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.5;
    max-width: 480px;
    margin: 0;
    text-align: center;
}
.qr-art {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 50% 35%, rgba(184, 158, 255, 0.18), transparent 65%),
        #0b0b1f;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.qr-art img { width: 92%; height: 92%; object-fit: contain; }
.qr-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
}
.qr-cta-stack { flex-direction: column; align-items: center; }
.qr-retry-text {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.qr-retry-text:hover { color: #fff; }

/* ---- Variant 1: bundle strip below the buy CTA ---- */
.qr-bundle-strip { width: 100%; max-width: 720px; margin-top: 1.5rem; }
.qr-bundle-head {
    text-align: center;
    color: #E9C46A;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 0.85rem;
}
.qr-bundle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.qr-bundle-card {
    position: relative;
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 1.1rem 1.2rem 1rem;
    background: linear-gradient(160deg, rgba(40, 28, 64, 0.85), rgba(20, 12, 38, 0.85));
    border: 1px solid rgba(233, 196, 106, 0.25);
    border-radius: 14px;
    color: #F4EEDC;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.qr-bundle-card:hover { transform: translateY(-2px); border-color: #E9C46A; }
.qr-bundle-card--5 { border-color: rgba(233, 196, 106, 0.55); }
.qr-bundle-tag {
    align-self: flex-start;
    background: #E9C46A;
    color: #1a1428;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
}
.qr-bundle-tag--alt { background: #FFE7A1; }
.qr-bundle-name { font-weight: 800; font-size: 1.02rem; color: #fff; letter-spacing: 0.01em; }
.qr-bundle-price { display: flex; align-items: baseline; gap: 0.4rem; }
.qr-bundle-price b { color: #E9C46A; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.qr-bundle-price em { font-style: normal; color: rgba(244, 238, 220, 0.65); font-size: 0.8rem; }
.qr-bundle-line { color: rgba(244, 238, 220, 0.7); font-size: 0.82rem; margin-top: 0.1rem; }

/* ---- Variant 2: side-by-side split with tier radio list ---- */
.qr-split {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(1.2rem, 3vw, 2.4rem);
    align-items: center;
    width: 100%;
    max-width: 920px;
}
@media (max-width: 720px) { .qr-split { grid-template-columns: 1fr; } }
.qr-split-art {
    position: relative;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 50% 35%, rgba(184, 158, 255, 0.22), transparent 65%),
        #0b0b1f;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.qr-split-art img { width: 92%; height: 92%; object-fit: contain; position: relative; z-index: 1; }
.qr-spotlight {
    position: absolute;
    inset: -20% -20% auto auto;
    width: 70%; height: 70%;
    background: radial-gradient(circle, rgba(233, 196, 106, 0.18), transparent 70%);
    pointer-events: none;
}
.qr-split-body { display: flex; flex-direction: column; gap: 0.7rem; }
.qr-split-body .qr-name { text-align: left; }
.qr-split-body .qr-tagline { text-align: left; }
.qr-tier-list { display: flex; flex-direction: column; gap: 0.55rem; border: none; padding: 0; margin: 0.6rem 0 0.4rem; }
.qr-tier {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    background: rgba(20, 12, 38, 0.5);
    border: 1.5px solid rgba(233, 196, 106, 0.18);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.qr-tier input { accent-color: #E9C46A; width: 18px; height: 18px; cursor: pointer; }
.qr-tier:hover { border-color: rgba(233, 196, 106, 0.5); }
.qr-tier:has(input:checked) { border-color: #E9C46A; background: rgba(40, 28, 64, 0.7); }
.qr-tier-body { display: flex; flex-direction: column; gap: 0.15rem; }
.qr-tier-name { font-weight: 800; color: #F4EEDC; font-size: 0.98rem; }
.qr-tier-name em { font-style: normal; color: #E9C46A; font-size: 0.65rem; letter-spacing: 0.12em; margin-left: 0.4rem; padding: 0.15rem 0.45rem; background: rgba(233, 196, 106, 0.15); border-radius: 4px; }
.qr-tier-sub { color: rgba(244, 238, 220, 0.65); font-size: 0.82rem; }
.qr-tier-price { color: #E9C46A; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qr-cta-row--inline { justify-content: flex-start; margin-top: 0.6rem; }

/* ---- Variant 3: receipt / prescription card ---- */
.qr-receipt {
    width: 100%; max-width: 420px;
    background: #f4eedc;
    color: #1a1428;
    border-radius: 4px;
    padding: 1.8rem 1.6rem;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    text-align: center;
    background-image:
        radial-gradient(circle at 0% 50%, transparent 12px, #f4eedc 12px) 0 0 / 100% 100%,
        radial-gradient(circle at 100% 50%, transparent 12px, #f4eedc 12px) 0 0 / 100% 100%;
    background-blend-mode: multiply;
    position: relative;
}
.qr-receipt::before, .qr-receipt::after {
    content: ''; position: absolute; top: 50%; width: 22px; height: 22px;
    background: var(--ink, #0a0a1a);
    border-radius: 50%; transform: translateY(-50%);
}
.qr-receipt::before { left: -11px; }
.qr-receipt::after { right: -11px; }
.qr-receipt-head { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-bottom: 0.85rem; }
.qr-receipt-brand { font-family: 'Fraunces', serif; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 40, 0.7); }
.qr-receipt-stamp {
    background: #1a1428;
    color: #E9C46A;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    padding: 0.3rem 0.7rem;
    border-radius: 3px;
}
.qr-receipt-art {
    width: 100%; aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid rgba(26, 20, 40, 0.08);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    margin: 0.6rem 0;
}
.qr-receipt-art img { width: 90%; height: 90%; object-fit: contain; }
.qr-receipt-prescribed {
    font-size: 0.6rem; letter-spacing: 0.3em; color: rgba(26, 20, 40, 0.5);
    text-transform: uppercase; font-weight: 800;
    margin: 0.6rem 0 0.2rem;
}
.qr-receipt .qr-name {
    background: none;
    -webkit-background-clip: initial; background-clip: initial;
    color: #1a1428;
    font-size: 1.55rem;
    text-align: center;
    margin: 0 0 0.3rem;
}
.qr-receipt-tag { color: rgba(26, 20, 40, 0.7); font-size: 0.92rem; max-width: none; }
.qr-receipt-dash {
    border: none; border-top: 2px dashed rgba(26, 20, 40, 0.3);
    margin: 1rem 0.5rem;
}
.qr-receipt-lines { list-style: none; padding: 0; margin: 0; text-align: left; }
.qr-rx-line {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.88rem;
    color: #1a1428;
    padding: 0.32rem 0;
    font-family: 'IBM Plex Mono', monospace;
}
.qr-rx-faint { color: rgba(26, 20, 40, 0.5); font-size: 0.78rem; }
.qr-rx-upgrade {
    background: rgba(233, 196, 106, 0.2);
    border: 1px dashed rgba(184, 130, 35, 0.5);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    color: #5a3a08;
    margin: 0.4rem 0;
    text-align: left;
}
.qr-receipt .btn-primary { background: #1a1428; color: #E9C46A; box-shadow: none; }
.qr-receipt .btn-primary:hover { background: #2a1f4a; }
.qr-buy-single { color: rgba(26, 20, 40, 0.6); text-decoration: underline; font-size: 0.85rem; }
.qr-buy-single:hover { color: #1a1428; }
.qr-receipt .qr-retry-text { color: rgba(26, 20, 40, 0.5); }
.qr-receipt .qr-retry-text:hover { color: #1a1428; }

/* ---- Variant 4: trinity slots reveal ---- */
.qr-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    width: 100%;
    max-width: 720px;
    margin-top: 0.6rem;
}
@media (max-width: 600px) { .qr-slots { grid-template-columns: 1fr 1fr; }
    .qr-slot:nth-child(3) { grid-column: 1 / -1; } }
.qr-slot {
    position: relative;
    aspect-ratio: 1 / 1.05;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    overflow: hidden;
}
.qr-slot--filled {
    background:
        radial-gradient(circle at 50% 35%, rgba(184, 158, 255, 0.25), transparent 65%),
        #0b0b1f;
    border: 2px solid #E9C46A;
    box-shadow: 0 12px 28px -10px rgba(233, 196, 106, 0.35);
}
.qr-slot--filled img { width: 85%; height: 85%; object-fit: contain; }
.qr-slot--empty {
    background: rgba(15, 8, 32, 0.5);
    border: 2px dashed rgba(233, 196, 106, 0.35);
    color: rgba(244, 238, 220, 0.4);
}
.qr-slot-icon { font-size: 2.4rem; color: rgba(233, 196, 106, 0.5); line-height: 1; }
.qr-slot-tag {
    position: absolute; bottom: 0.7rem; left: 0; right: 0;
    text-align: center;
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(233, 196, 106, 0.85);
}
.qr-slot-tag--free { color: #6dd86d; font-size: 0.85rem; letter-spacing: 0.16em; }
.qr-slot--empty .qr-slot-sub {
    position: absolute; bottom: -1.4rem; left: 0; right: 0;
    font-size: 0.7rem; font-weight: 500; text-align: center;
    color: rgba(255, 255, 255, 0.5);
}
.qr-trinity-line { font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); margin: 1.4rem 0 0; text-align: center; }
.qr-trinity-line b { color: #E9C46A; }

/* ---- Floating switcher (bottom-right) ---- */
.qr-switcher {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 99999;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(12, 5, 24, 0.94);
    border: 1px solid rgba(233, 196, 106, 0.4);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    padding: 0.5rem 0.55rem;
    border-radius: 999px;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.55);
    font-family: 'DM Sans', sans-serif;
    isolation: isolate;
}
.qr-switcher.is-hidden { display: none; }
.qr-switcher * { pointer-events: auto; }
.qr-switcher-label {
    color: #E9C46A;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0 0.4rem 0 0.5rem;
}
.qr-switcher-btn {
    background: rgba(233, 196, 106, 0.1);
    color: rgba(244, 238, 220, 0.8);
    border: 1px solid rgba(233, 196, 106, 0.25);
    width: 30px; height: 30px; border-radius: 50%;
    font-family: inherit;
    font-weight: 800; font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.qr-switcher-btn:hover { color: #E9C46A; border-color: #E9C46A; }
.qr-switcher-btn.is-active { background: #E9C46A; color: #1a1428; border-color: #E9C46A; }
.qr-switcher-close {
    background: transparent; color: rgba(244, 238, 220, 0.55);
    border: none; font-size: 1.2rem; line-height: 1;
    cursor: pointer; padding: 0 0.3rem 0 0.5rem; margin-left: 0.2rem;
    border-left: 1px solid rgba(233, 196, 106, 0.2);
}
.qr-switcher-close:hover { color: #E9C46A; }

/* --- Quiz as a standalone page (quiz.html) ----------------------------- */
.quiz-page-main {
    padding: clamp(3rem, 7vw, 5rem) 1.5rem clamp(4rem, 8vw, 6rem);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quiz-page-inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.quiz-card--page {
    /* The shared .quiz-card already has the gradient + radius - just relax
       the modal-only constraints so it lays out comfortably on a page. */
    position: static;
    max-height: none;
    overflow: visible;
    width: 100%;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5);
}
.quiz-intro h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(2.2rem, 5vw, 3rem);
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--ink, #fff);
}
.quiz-page-foot {
    color: var(--ink-faint, rgba(255,255,255,0.5));
    font-size: 0.9rem;
    margin: 0;
}
.quiz-page-foot a {
    color: var(--accent, #b89eff);
    text-decoration: none;
    font-weight: 600;
}
.quiz-page-foot a:hover { color: var(--ink, #fff); }


/* ===== HERO (award-store rewrite, 2026-05-13) ============================
   Replaces the old centered hero. New markup uses .hero-grid > .hero-text
   + .hero-art, with a slim .hero-cats category nav underneath. Photo on the
   right crossfades through 5 top sellers via the rotator script in
   homepage.html.
   --------------------------------------------------------------------- */
.hero {
    padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
    border-bottom: 1px solid var(--line, rgba(255,255,255,0.08));
    position: relative;
    overflow: hidden;
}
.hero-grid {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
@media (max-width: 880px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        text-align: center;
    }
}

/* --- Left column: copy ------------------------------------------------- */
/* Everything in the hero copy column is centered relative to itself: eyebrow,
   h1 (with line breaks), deck, CTA row, and proof line all share a common
   horizontal centerline. */
.hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.hero-eyebrow {
    display: flex;
    width: fit-content;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 auto 0.95rem;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(184, 158, 255, 0.34);
    border-radius: 999px;
    background: rgba(184, 158, 255, 0.10);
    color: var(--accent, #b89eff);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.72rem;
    font-weight: 700;
}
/* Hero headline block. The h1 itself caps at 560px (same as .hero-deck below
   it) so every line in the stanza visually spans the same horizontal width
   as the supporting paragraph. Per-line font-sizes scale in container-width
   units so each line scales with the H1 container, not the viewport. */
.hero-h1 {
    container-type: inline-size;
    max-width: 560px;
    width: 100%;
    margin: 0 auto 1.1rem;
    font-family: 'Fraunces', 'Bebas Neue', serif;
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
}

/* Line 1: "We don't sell Shirts." - smaller, full-line span at ~3rem */
.hero-h1-lead {
    display: block;
    white-space: nowrap;
    font-family: 'Fraunces', serif;
    font-size: clamp(1.5rem, 8.4cqw, 3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0.002em;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 0.18em;
}

/* Line 2: "We sell:" - HUGE serif, fills the 560px width */
.hero-h1-mid {
    display: block;
    white-space: nowrap;
    font-family: 'Fraunces', serif;
    font-size: clamp(3.4rem, 21cqw, 7.6rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: #ffffff;
}

/* Line 3: rotator word - same target width as line 2, Bebas condensed so
   ~10-char words (PROSPERITY, CONFIDENCE) fill it neatly. nowrap keeps
   long words like ATTRACTIVENESS on a single line even when they overflow
   the H1's 560px - the staging container clips, never wraps. */
.hero-h1 em {
    display: block;
    white-space: nowrap;
    font-family: 'Bebas Neue', 'Fraunces', sans-serif;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    font-size: clamp(3.6rem, 19cqw, 7.4rem);
    line-height: 0.9;
    margin-top: 0.05em;
    color: #ffd25c;
    text-shadow:
        0 0 22px rgba(255, 210, 92, 0.65),
        0 0 54px rgba(233, 196, 106, 0.4);
    transition: opacity 0.32s ease, transform 0.32s ease;
    will-change: opacity, transform;
}
#hero-rotator {
    /* Reserve enough horizontal space so layout doesn't jolt when the
       longest word (ATTRACTIVENESS) swaps in. */
    min-width: 0.5ch;
}
.hero-deck {
    font-size: clamp(1.02rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    color: var(--ink-dim, rgba(255,255,255,0.72));
    max-width: 560px;
    margin: 0 auto 1.85rem;
}
.hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 1.5rem;
}
.hero-btn-primary,
.hero-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 1.6rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hero-btn-primary {
    background: linear-gradient(180deg, #f3d57a 0%, #E9C46A 55%, #d4ad55 100%);
    color: #1a1208;
    border: 1px solid rgba(233, 196, 106, 0.6);
    box-shadow: 0 12px 28px -12px rgba(233, 196, 106, 0.55), inset 0 1px 0 rgba(255,255,255,0.35);
}
.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(233, 196, 106, 0.7), inset 0 1px 0 rgba(255,255,255,0.45);
}
.hero-btn-ghost {
    background: transparent;
    color: var(--ink, #fff);
    border: 1px solid rgba(255,255,255,0.22);
}
.hero-btn-ghost:hover {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.04);
}
.hero-btn-ghost span { transition: transform 0.2s ease; }
.hero-btn-ghost:hover span { transform: translateX(3px); }
.hero-proof {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--ink-dim, rgba(255,255,255,0.7));
}
.hero-proof-stars {
    color: #ffd25c;
    letter-spacing: 0.08em;
    line-height: 1;
    font-size: 1rem;
}
.hero-proof-text strong { color: var(--ink, #fff); font-weight: 700; margin-right: 0.15rem; }
.hero-proof-sep { color: rgba(255,255,255,0.3); margin: 0 0.25rem; }

/* Big social-proof variant: SVG stars on top, two lines of copy below,
   each bigger and bolder so the trust signal can't be missed. */
.hero-proof.hero-proof--big {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.55rem;
}
.hero-proof--big .hero-proof-stars {
    width: clamp(180px, 22vw, 240px);
    height: auto;
    display: block;
    filter: drop-shadow(0 0 12px rgba(255, 210, 92, 0.45))
            drop-shadow(0 0 26px rgba(233, 196, 106, 0.25));
}
.hero-proof--big .hero-proof-ship {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: clamp(0.92rem, 1.2vw, 1.05rem);
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
}
.hero-proof--big .hero-proof-ship strong { color: #fff; font-weight: 800; }
.hero-proof--big .hero-proof-truck {
    width: 28px;
    height: auto;
    color: #ffffff;
    flex-shrink: 0;
}

/* Trust-signal row below the ship line: three pill chips with small icons.
   Quick scan-able reassurance: domestic manufacture, fast handling, returns. */
.hero-trust-row {
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}
.hero-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}
.hero-trust-chip svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.hero-trust-chip:nth-child(1) svg { width: 20px; border-radius: 2px; }
.hero-trust-chip:nth-child(2) { color: #ffd25c; }
.hero-trust-chip:nth-child(2) svg { color: #ffd25c; }
.hero-trust-chip:nth-child(3) { color: #b89eff; }
.hero-trust-chip:nth-child(3) svg { color: #b89eff; }

/* Partial-fill star rating - two stacked layers, no transparent-color tricks.
     stars-base   = full ★★★★★ rendered as hollow gold outlines (transparent
                    fill + 1.5px gold stroke). Sets the box size for the
                    inline-block wrapper.
     stars-cover  = full ★★★★★ rendered as SOLID gold, position:absolute on
                    top of the base, clipped to var(--fill) width. The solid
                    fill paints over the matching first 94% of the outline
                    layer underneath, so the customer sees four solid stars
                    + a hollow outline on the last 6%. */
.stars-partial {
    position: relative;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
}
.stars-partial .stars-base {
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 1.5px #ffd25c;
}
.stars-partial .stars-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--fill, 100%);
    overflow: hidden;
    color: #ffd25c;
    -webkit-text-stroke: 0;
    text-shadow:
        0 0 12px rgba(255, 210, 92, 0.55),
        0 0 28px rgba(233, 196, 106, 0.3);
}
.hero-proof--big .hero-proof-text {
    font-size: clamp(1.05rem, 1.55vw, 1.3rem);
    color: var(--ink, #fff);
    font-weight: 600;
    letter-spacing: 0.005em;
}
.hero-proof--big .hero-proof-text strong { font-weight: 800; }
.hero-proof--big .hero-proof-sep {
    color: rgba(255, 210, 92, 0.5);
    margin: 0 0.35rem;
    font-weight: 700;
}

/* --- Right column: framed lifestyle photo ----------------------------- */
.hero-art {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 40px 80px -30px rgba(0,0,0,0.6),
        0 12px 30px -12px rgba(184, 158, 255, 0.25);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hero-art:hover {
    transform: translateY(-4px);
    box-shadow:
        0 50px 100px -30px rgba(0,0,0,0.7),
        0 18px 40px -12px rgba(184, 158, 255, 0.35);
}
.hero-art-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #fafaf7;
}
.hero-art-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.32s ease;
}
/* Caption block sits at the bottom of the hero art with a stacked layout:
   the gold sold-count badge on top, the design name below in a serif display
   size. A dark-to-transparent gradient behind it keeps both legible over any
   lifestyle photo without needing a hard pill background. */
.hero-art-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 4.5rem 1.25rem 1.4rem;
    background: linear-gradient(to top,
        rgba(5, 1, 15, 0.92) 0%,
        rgba(5, 1, 15, 0.78) 40%,
        rgba(5, 1, 15, 0) 100%);
    color: var(--ink, #fff);
    text-align: center;
    pointer-events: none;
}
.hero-art-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #f3d57a, #E9C46A);
    color: #1a1208;
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
}
.hero-art-name {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    letter-spacing: -0.005em;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Category bar ----------------------------------------------------- */
.hero-cats {
    max-width: 1240px;
    margin: clamp(2.25rem, 4vw, 3.5rem) auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.88rem;
}
.hero-cats a {
    color: var(--ink-dim, rgba(255,255,255,0.7));
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.3rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.hero-cats a:hover {
    color: var(--ink, #fff);
    border-bottom-color: var(--accent, #b89eff);
}
.hero-cats-all {
    margin-left: auto;
    color: var(--accent, #b89eff) !important;
    font-weight: 600;
}
.hero-cats-all span { transition: transform 0.2s ease; display: inline-block; margin-left: 0.25rem; }
.hero-cats-all:hover span { transform: translateX(3px); }
@media (max-width: 880px) {
    .hero-cats { justify-content: center; gap: 0.5rem 1rem; }
    .hero-cats-all { margin-left: 0; width: 100%; text-align: center; margin-top: 0.4rem; }
}