/* ── Cookbook Landing Page ── */
:root {
    --cb-accent: #3C6745;
    --cb-accent-hover: #4d8257;
    --cb-cream-light: #f2efea;
    --cb-body-text: #555;
}

/* ── Hero Section ── */
#cookbook-hero {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
    background: white;
}

/* Blurred cover image background */
#cookbook-hero .hero-blur-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(30px) saturate(1.3);
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

#cookbook-hero .hero-blur-overlay {
    position: absolute;
    inset: 0;
    background: rgba(235, 231, 223, 0.55);
    z-index: 0;
    pointer-events: none;
}

#cookbook-hero .hero-inner {
    z-index: 1;
    gap: 30px;
    max-width: 1100px;
    margin: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#cookbook-hero .hero-media {
    flex: 1 1 48%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cookbook-hero .hero-text {
    flex: 1 1 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1;
}

#cookbook-hero .hero-text h1 {
    color: var(--col-green-0);
    text-align: center;
}

#cookbook-hero .hero-text p {
    color: var(--cb-body-text);
    text-align: center;
    font-size: 20px;
}

.book-mockup-container {
    position: relative;
    max-width: 380px;
    width: 80%;
}

.book-mockup-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.12) 0%,
        transparent 60%
    );
    border-radius: 50%;
    filter: blur(30px);
    z-index: 0;
}

.book-mockup-container img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
}

/* New York Times Bestseller seal on the hero cover, like the sticker on
   bookshop copies. Plain text in our own type: the NYT logo and masthead
   lettering are not ours to use. Sized in em, so the mobile rule only changes
   the font size. It sits below the cover title, half over the right edge. */
.nyt-seal {
    position: absolute;
    z-index: 2;
    top: 21%;
    right: -9%;
    width: 10.5em;
    height: 10.5em;
    margin: 0;
    font-size: 10px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    color: #3f2d0c;
    font-family: 'URW Geometric', 'Jost', var(--font-2), sans-serif;
    background: radial-gradient(circle at 32% 28%, #fbefc6 0%, #e9cd7e 45%, #c79a3e 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transform: rotate(12deg);
    overflow: hidden;
}

/* Inner ring, as on a foil seal */
.nyt-seal::before {
    content: '';
    position: absolute;
    inset: 0.5em;
    border: 1px solid rgba(63, 45, 12, 0.35);
    border-radius: 50%;
    pointer-events: none;
}

/* One sweep of light across the foil after the page loads */
.nyt-seal::after {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -60%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    transform: skewX(-20deg);
    animation: nyt-seal-shine 1.4s ease-in-out 1s both;
    pointer-events: none;
}

@keyframes nyt-seal-shine {
    from { left: -60%; }
    to { left: 130%; }
}

.nyt-seal-top {
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

.nyt-seal-main {
    margin-top: 0.3em;
    padding-top: 0.3em;
    border-top: 1px solid rgba(63, 45, 12, 0.45);
    font-size: 1.35em;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .nyt-seal::after {
        display: none;
    }
}

/* ── Cookbook Buttons ── */
.wave-button.btn-cb-orange {
    background: var(--cb-accent);
}

.wave-button.btn-cb-orange:hover {
    background: var(--cb-accent-hover);
}

/* ── Includes Cards Section ── */
#cookbook-includes {
    background: white;
}

.cb-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cb-card-photo {
    width: 230px;
    height: 330px;
    border-radius: 40px;
    object-fit: cover;
    border: 5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}

.cb-card-body {
    background: var(--cb-cream-light);
    border-radius: 18px;
    padding: 180px 20px 28px 20px;
    margin-top: -160px;
    width: 100%;
}

.cb-card-body h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: var(--col-green-0);
}

.cb-card-body p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
    color: var(--cb-body-text);
}

/* ── Retailers Section ── */
#retailers {
    scroll-margin-top: 80px;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

#retailers .h2-question {
    margin-bottom: 0.8rem;
}

#retailers .subtext {
    font-family: var(--font-2);
}

.retailers-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 0.8rem;
}

.retailer-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 50px;
    background: #254221;
    color: white;
    font-family: var(--font-2);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.retailer-card:hover {
    background: #3C6745;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(27, 35, 26, 0.25);
}

.retailer-card-wide {
    width: 100%;
    max-width: 280px;
    font-size: 16px;
}

.retailer-card-signed {
    background: #5a8a4a;
}

.retailer-card-signed:hover {
    background: #6fa358;
    box-shadow: 0 4px 15px rgba(90, 138, 74, 0.35);
}

/* Continent tab bar */
.retailer-tabs {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.tab-nav {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 0.6rem auto 1.4rem;
    max-width: 680px;
    border-bottom: 1.5px solid rgba(37, 66, 33, 0.15);
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px 12px;
    margin-bottom: -1.5px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #8a938a;
    font-family: var(--font-2);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.tab-btn:hover {
    color: #254221;
}

.tab-btn.active {
    color: var(--cb-accent);
    border-bottom-color: var(--cb-accent);
}

.tab-panel {
    animation: retailerFade 0.35s ease;
}

@keyframes retailerFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Story Section ── */
#cookbook-story {
    background: var(--col-green-5);
}

.story-heading {
    color: var(--col-green-0);
    font-family: var(--font-0);
    margin-bottom: 1.2rem;
}

#cookbook-story .story-text {
    color: var(--cb-body-text);
}

.story-photo {
    width: 380px;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border: 4px solid white;
    position: relative;
    z-index: 1;
    transform: rotate(-3deg);
}

/* ── Gallery Columns ── */
/* ── Reader reviews ── */
#cookbook-reviews {
    background: var(--cb-cream-light);
    overflow: hidden;
}

/* A slow, looping row of reviews. The script puts two copies of the cards on
   one track and slides it left by one copy, which loops without a seam; it
   pauses on hover, on a tap (touch screens) and with the button below. Without
   the script, or with reduced motion, it stays a row you scroll. The row
   bleeds into the section's 5% side padding (100% / 18 of the 90% content
   width) to reach the screen edges, and fades out at both ends. */
.cb-reviews-marquee {
    margin: 0 calc(-100% / 18);
    padding: 8px calc(100% / 18) 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.cb-reviews-marquee::-webkit-scrollbar {
    display: none;
}

.cb-reviews-marquee.is-moving {
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
}

/* About 11 seconds per card, so the speed stays the same however many there are */
.cb-reviews-track {
    display: flex;
    width: max-content;
    animation: cb-reviews-loop calc(var(--cb-review-count) * 11s) linear infinite;
    will-change: transform;
}

.cb-reviews-marquee.is-paused .cb-reviews-track {
    animation-play-state: paused;
}

@media (hover: hover) {
    .cb-reviews-marquee:hover .cb-reviews-track {
        animation-play-state: paused;
    }
}

@keyframes cb-reviews-loop {
    to { transform: translateX(-50%); }
}

.cb-reviews {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

/* Each copy ends with one gap, so both copies are the same width and -50%
   lands the second exactly where the first began */
.cb-reviews-track .cb-reviews {
    padding-right: 20px;
}

/* A real width, not just a flex-basis: Safari sizes the max-content track from
   each card's width, so without one it measures every quote on a single line
   and the track comes out nearly three times too long, mostly blank */
.cb-review {
    flex: 0 0 auto;
    width: 320px;
    display: flex;
    scroll-snap-align: center;
}

.cb-review figure {
    flex: 1;
    margin: 0;
    padding: 24px 22px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    text-align: left;
    display: flex;
    flex-direction: column;
}

.cb-review-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 12px;
}

.cb-review-stars svg {
    width: 18px;
    height: 18px;
    fill: #f2b51d;
}

.cb-review-quote {
    flex: 1;
    margin: 0 0 14px;
}

.cb-review-quote p {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    line-height: 1.55;
    color: #333;
}

/* Name on the left, the store in small grey type in the bottom right corner,
   and a disclosure note (if any) on its own line below both */
.cb-review-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 12px;
    font-family: var(--font-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--cb-accent);
}

.cb-review-source {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #767676;
}

.cb-review-note {
    flex: 0 0 100%;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    color: #6b6b6b;
}

.cb-reviews-footer {
    display: flex;
    justify-content: center;
}

.cb-reviews-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid rgba(60, 103, 69, 0.35);
    border-radius: 999px;
    background: transparent;
    color: var(--cb-accent);
    font-family: var(--font-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cb-reviews-toggle[hidden] {
    display: none;
}

.cb-reviews-toggle:hover {
    background: rgba(60, 103, 69, 0.08);
}

/* Bootstrap 4 rings every focused button, mouse clicks included; keep the ring for the keyboard only */
.cb-reviews-toggle:focus {
    outline: none;
}

.cb-reviews-toggle:focus-visible {
    outline: 2px solid var(--cb-accent);
    outline-offset: 2px;
}

.cb-reviews-toggle svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.cb-reviews-toggle .cb-icon-play,
.cb-reviews-toggle.is-paused .cb-icon-pause {
    display: none;
}

.cb-reviews-toggle.is-paused .cb-icon-play {
    display: inline;
}

@media only screen and (max-width: 768px) {
    .cb-review {
        width: 270px;
    }

    .cb-review-quote p {
        font-size: 16px;
    }
}

#cookbook-gallery {
    background: var(--col-green-5);
}

.gallery-columns {
    display: flex;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
}

.gallery-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gallery-img {
    border-radius: 14px;
    overflow: hidden;
}

.gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-landscape {
    aspect-ratio: 3 / 2;
}

.gallery-portrait {
    aspect-ratio: 3 / 4;
}

@media only screen and (max-width: 768px) {
    .gallery-columns {
        flex-wrap: wrap;
    }

    .gallery-col {
        flex: 0 0 calc(50% - 6px);
    }

    .gallery-col:nth-child(3) {
        display: none;
    }
}

@media only screen and (max-width: 480px) {
    .gallery-columns {
        gap: 8px;
    }

    .gallery-col {
        flex: 0 0 calc(50% - 4px);
        gap: 8px;
    }
}

/* ── Author Card Section ── */
#cookbook-author {
    background: white;
}

.cb-author-card {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 860px;
    margin: 0 auto;
    background: var(--cb-cream-light);
    border-radius: 20px;
    padding: 40px 50px 40px 120px;
    text-align: left;
}

.cb-author-photo-col {
    position: absolute;
    left: -90px;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
}

.cb-author-photo {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.cb-author-text {
    flex: 1;
}

.cb-author-label {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--cb-accent);
    margin-bottom: 4px;
}

.cb-author-name {
    font-family: var(--font-0);
    margin-bottom: 1rem;
    color: var(--col-green-0);
}

.cb-author-text .subtext {
    color: var(--cb-body-text);
}

/* ── Quote Section ── */
.cb-quote-section {
    padding-top: 0px;
}

.cb-quote-section--no-padding {
    padding: 0;
}

.cb-quote {
    max-width: 700px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 28px;
    line-height: 1.5;
    font-style: italic;
    color: #496046;
    text-align: center;
    margin: 0;
    margin-bottom: 2rem;
}

@media only screen and (max-width: 768px) {
    .cb-quote {
        font-size: 22px;
    }
}

@media only screen and (max-width: 1028px) {
    .cb-author-card {
        flex-direction: column;
        text-align: center;
        padding: 80px 24px 30px 24px;
    }

    .cb-author-photo-col {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
    }

    .cb-author-photo {
        width: 130px;
        height: 130px;
    }
}

/* ── Responsive ── */
@media only screen and (max-width: 768px) {
    #cookbook-hero .hero-inner {
        padding-top: 3rem;
        padding-bottom: 4rem;
    }

    #cookbook-hero .hero-media,
    #cookbook-hero .hero-text {
        flex: unset;
        width: 100%;
    }

    .book-mockup-container {
        max-width: 260px;
    }

    /* Small circle, but the smallest text stays above 9px */
    .nyt-seal {
        font-size: 8.5px;
    }

    .retailers-grid {
        gap: 12px;
    }

    .retailer-card {
        padding: 10px 18px;
        font-size: 14px;
    }

    .tab-nav {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
    }

    .tab-nav::-webkit-scrollbar {
        display: none;
    }

    /* Auto margins center the strip when it fits, but unlike
       justify-content: center they keep the left edge reachable
       when it overflows into a scroll. */
    .tab-btn:first-child {
        margin-left: auto;
    }

    .tab-btn:last-child {
        margin-right: auto;
    }

    .tab-btn {
        flex: 0 0 auto;
        padding: 10px 13px 12px;
        font-size: 14px;
    }

    .story-photo {
        width: 260px;
        height: auto;
    }

    .cb-card-photo {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }

    .cb-card-body {
        padding: 115px 24px 30px 24px;
        margin-top: -95px;
    }
}

/* Small phones: tighten the tab bar so all four continents fit */
@media only screen and (max-width: 400px) {
    .tab-btn {
        padding: 9px 8px 11px;
        font-size: 13px;
    }
}


/* ── Pre-order Bonus Section ── */
#preorder-bonus {
    background: var(--cb-cream-light);
    overflow: hidden;  /* fanned cards must never widen the page */
}

.pb-heading {
    margin-bottom: 14px;
}

.pb-intro {
    max-width: 620px;
    margin: 0 auto;
}

/* ── Bonus artwork stage: iPad mockup with floating orbs ── */
.pb-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 940px;
    min-height: 630px;
    margin: 26px auto 6px;
}

.pb-device {
    position: relative;
    width: clamp(230px, 30vw, 340px);
    aspect-ratio: 1327 / 1830;
    z-index: 2;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.22));
}

.pb-device-frame,
.pb-device-screen {
    position: absolute;
}

/* The mockup's screen area is opaque, so the frame sits underneath and the
   artwork is stacked on top of it — z-index is explicit, not DOM-order. */
.pb-device-frame {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
}

/* Inset to land inside the mockup's bezel. */
.pb-device-screen {
    top: 3%;
    left: 3.5%;
    width: 92.5%;
    height: 94.5%;
    object-fit: cover;
    border-radius: 4% / 3%;
    z-index: 2;
}

/* ── Fanned recipe cards ── */
/* Tracks the device box so the cards pivot from behind it. */
.pb-fan {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(230px, 30vw, 340px);
    aspect-ratio: 1327 / 1830;
    z-index: 1;
    pointer-events: none;
}

.pb-fan-card {
    position: absolute;
    left: 50%;
    bottom: 14%;
    overflow: hidden;
    background: white;
    border: 5px solid white;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
    /* Pivot below the card, like the rivet of a hand fan — this swings the
       cards clear of the device instead of just tilting them in place. */
    transform-origin: 50% 128%;
    transform: translateX(-50%) rotate(0deg);
    transition: transform 0.9s cubic-bezier(0.22, 0.72, 0.24, 1);
}

.pb-fan-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Inner pair sits in front of the outer pair, whatever the DOM order. */
.pb-fan-card-1,
.pb-fan-card-4 {
    width: 72%;
    aspect-ratio: 3 / 4;
    z-index: 1;
}

.pb-fan-card-2,
.pb-fan-card-3 {
    width: 92%;
    aspect-ratio: 3 / 4;
    z-index: 2;
}

/* Fanned out — triggered by the scroll observer adding .is-fanned. */
.is-fanned .pb-fan-card-1 { transform: translateX(-50%) rotate(-54deg) translateY(-22%); transition-delay: 0.10s; }
.is-fanned .pb-fan-card-2 { transform: translateX(-50%) rotate(-24deg) translateY(-10%); transition-delay: 0s; }
.is-fanned .pb-fan-card-3 { transform: translateX(-50%) rotate(24deg)  translateY(-10%); transition-delay: 0.05s; }
.is-fanned .pb-fan-card-4 { transform: translateX(-50%) rotate(54deg)  translateY(-22%); transition-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
    .pb-fan-card { transition: none; }
}

/* ── Floating orbs ── */
.pb-orbs {
    position: absolute;
    inset: 0;
    z-index: 3;  /* above the device and the fanned cards */
    pointer-events: none;
}

.pb-orb {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: pb-float 9s ease-in-out infinite alternate;
    will-change: transform;
}

.pb-orb--text {
    flex-direction: column;
    background: var(--cb-accent);
    color: white;
    border: 4px solid white;
    padding: 12px;
    box-shadow: 0 16px 34px rgba(27, 35, 26, 0.22);
}

/* URW Geometric first — supply that webfont and it takes over from Jost. */
.pb-line {
    font-family: 'URW Geometric', 'Jost', var(--font-2), sans-serif;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.02;
}

.pb-line--sm {
    font-weight: 500;
    font-size: clamp(0.64rem, 0.99vw, 0.86rem);
    letter-spacing: 0.13em;
    opacity: 0.92;
}

.pb-line--lg {
    font-weight: 700;
    font-size: clamp(0.80rem, 1.35vw, 1.2rem);
    letter-spacing: 0.005em;
    margin-top: 5px;
}

.pb-line--xl {
    font-weight: 700;
    font-size: clamp(2.1rem, 3.2vw, 2.9rem);
    line-height: 0.9;
    margin-bottom: 3px;
}

/* Positions — kept clear of the centred device, biggest/nearest orbs first. */
.pb-orb-1        { top: 5%;  left: 9%;  width: clamp(104px, 14vw, 146px); animation-duration: 8s;  }
.pb-orb-2        { top: 9%;  right: 7%;  width: clamp(108px, 14.5vw, 152px); animation-duration: 10.5s; animation-delay: -4s; }
.pb-orb-3        { top: 71%; right: 9%;  width: clamp(112px, 15vw, 158px); animation-duration: 12s; animation-delay: -6s; }

@keyframes pb-float {
    from { transform: translate3d(0, 0, 0) rotate(-2deg); }
    to   { transform: translate3d(0, -22px, 0) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pb-orb { animation: none; }
}

/* Small screens: orbs stay generous and are allowed to overlap the device —
   the layering reads as depth rather than crowding. */
@media (max-width: 767px) {
    .pb-stage {
        min-height: 500px;
    }

    .pb-device {
        width: clamp(180px, 48vw, 250px);
    }

    .pb-orb--text {
        padding: 10px;
    }

    .pb-orb-1       { top: 1%;  left: -2%;  width: clamp(88px, 24vw, 110px); }
    .pb-orb-2       { top: 5%;  right: -2%; width: clamp(92px, 25vw, 116px); }
    .pb-orb-3       { top: 71%; right: -1%; width: clamp(96px, 26vw, 120px); }
}

.pb-eyebrow {
    font-family: var(--font-2);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--cb-accent);
    margin-bottom: 10px;
}

.pb-note {
    font-size: 0.82rem;
    font-style: italic;
    color: #999;
    margin: 18px 0 0;
}

.pb-note a {
    color: var(--cb-accent);
    text-decoration: underline;
}

#preorder-bonus {
    scroll-margin-top: 70px;
}

/* ── Countdown Section ── */
/* Slim white strip between the cream bonus section and the sage story section,
   restoring the soft/white background alternation. */
#cookbook-countdown {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.cd-timer {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    margin-top: 30px;
}

.cd-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--cb-cream-light);
    border-radius: 16px;
    padding: 16px 18px 12px;
    min-width: 104px;
}

.cd-digits {
    display: flex;
    justify-content: center;
    font-family: 'URW Geometric', 'Jost', 'Trebuchet MS', sans-serif;
    font-weight: 600;
    font-size: 46px;
    line-height: 1;
    color: var(--cb-accent);
}

.cd-digit {
    display: block;
    height: 1.15em;
    width: 0.64em;
    overflow: hidden;
}

.cd-reel {
    display: block;
    transition: transform 0.55s cubic-bezier(0.33, 0, 0.15, 1);
    will-change: transform;
}

.cd-cell {
    display: block;
    height: 1.15em;
    line-height: 1.15em;
    text-align: center;
}

.cd-label {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64825E;
}

.cd-sub {
    max-width: 520px;
    margin: 26px auto 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--cb-body-text);
}

.cd-nowrap {
    white-space: nowrap;
}

.cd-sub a {
    color: var(--cb-accent);
    font-weight: 600;
    text-decoration: underline;
}

.cd-sub a:hover {
    color: var(--cb-accent-hover);
}

.cd-sep {
    align-self: center;
    font-family: 'URW Geometric', 'Jost', 'Trebuchet MS', sans-serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 1;
    color: var(--cb-accent);
    opacity: 0.45;
    padding-bottom: 18px;  /* optically centers the colon on the digits, above the labels */
}

@media only screen and (max-width: 768px) {
    .cd-timer {
        gap: 6px;
    }

    .cd-group {
        min-width: 68px;
        padding: 10px 8px 8px;
        border-radius: 12px;
    }

    .cd-digits {
        font-size: 28px;
    }

    .cd-label {
        font-size: 9px;
        letter-spacing: 0.1em;
    }

    .cd-sep {
        font-size: 22px;
        padding-bottom: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cd-reel {
        transition: none;
    }
}


/* ── App Unlock Section ── */
/* Takes the place of the preorder gifts and countdown from release, so it keeps
   their cream background ahead of the sage story section. */
#app-unlock {
    background: var(--cb-cream-light);
    overflow: hidden;  /* the glow and orbs must never widen the page */
    scroll-margin-top: 70px;
}

.au-heading {
    margin-bottom: 14px;
}

.au-intro {
    max-width: 620px;
    margin: 0 auto;
}

/* ── Device stage: iPad and iPhone side by side, orbs around them ── */
.au-stage {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 940px;
    margin: 20px auto 18px;
    padding: 40px 0 20px;
}

.au-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(760px, 125%);
    aspect-ratio: 5 / 4;
    background:
        radial-gradient(closest-side at 40% 48%, rgba(154, 178, 149, 0.75), transparent),
        radial-gradient(closest-side at 68% 64%, rgba(219, 190, 90, 0.38), transparent);
    filter: blur(24px);
    transform: translate(-50%, -50%);
    animation: au-breathe 9s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes au-breathe {
    from { transform: translate(-50%, -50%) scale(0.92); opacity: 0.75; }
    to   { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

.au-devices {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: min(100%, 580px);
}

.au-device {
    position: relative;
    flex: none;
    filter: drop-shadow(0 22px 34px rgba(27, 35, 26, 0.24));
}

/* Lifted off the bottom line so the iPhone sits lower than it, rather than the
   two lining up exactly; a margin keeps the offset in the layout's height. */
.au-device--ipad {
    width: 64%;
    aspect-ratio: 1327 / 1830;
    margin-bottom: 5.2%;  /* about 30px on desktop */
    z-index: 1;
}

/* In front of the iPad, overlapping its edge a little. */
.au-device--iphone {
    width: 31%;
    aspect-ratio: 1009 / 2046;
    margin-left: -5%;
    z-index: 2;
}

.au-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.au-screen {
    position: absolute;
    overflow: hidden;
    isolation: isolate;  /* keeps the zooming shots inside the rounded corners in Safari */
    background: #0b0b0b;
}

/* The iPad mockup's screen is opaque: the shots sit on top of the frame, with the
   preorder bonus iPad's top inset. The width follows the screenshots' own shape
   (1400 x 2015) so none of them is cropped; the side bezels come out a touch
   wider, matching the top and bottom. */
.au-device--ipad .au-frame {
    z-index: 1;
}

.au-device--ipad .au-screen {
    top: 3%;
    left: 50%;
    height: 94.5%;
    aspect-ratio: 1400 / 2015;
    transform: translateX(-50%);
    border-radius: 4% / 3%;
    z-index: 2;
}

/* The iPhone mockup's screen is see-through: the shots sit underneath and bleed a
   little past the cutout (5.45% in, 2.39% down, 89.1% x 95.3%), so no edge shows;
   the bezel covers the overlap. The radius stays under the cutout's own. */
.au-device--iphone .au-frame {
    z-index: 2;
}

.au-device--iphone .au-screen {
    top: 2.1%;
    left: 5.1%;
    width: 89.8%;
    height: 95.9%;
    border-radius: 12% / 5.5%;
    z-index: 1;
}

/* Crossfade: the incoming shot settles from a slight zoom while fading in over the
   outgoing one, which stays opaque underneath (.is-prev) until it is covered. */
.au-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.9s ease, transform 1.6s cubic-bezier(0.22, 0.72, 0.24, 1);
}

.au-shot.is-active {
    opacity: 1;
    transform: none;
    z-index: 2;
}

.au-shot.is-prev {
    opacity: 1;
    transform: none;
    z-index: 1;
}

/* Reveal: armed by the script so the orbs still show without it, then they pop
   once the stage scrolls into view. The devices stay put. */
.au-stage.is-armed .pb-orb {
    opacity: 0;
    scale: 0.5;
    transition: opacity 0.5s ease, scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.au-stage.is-armed .au-orb-1 { transition-delay: 0.45s; }
.au-stage.is-armed .au-orb-2 { transition-delay: 0.6s; }
.au-stage.is-armed .au-orb-3 { transition-delay: 0.75s; }

.au-stage.is-in .pb-orb {
    opacity: 1;
    scale: 1;
}

/* Feature list orb: white, so the list reads as its own badge beside the two green
   stat orbs, and in sentence case, which keeps the long lines narrow enough for
   the circle. */
.au-orb-features {
    flex-direction: column;
    gap: 0.5em;
    margin: 0;
    padding: 14px;
    list-style: none;
    background: white;
    color: var(--col-green-0);
    box-shadow: 0 16px 34px rgba(27, 35, 26, 0.18);
    font-family: 'URW Geometric', 'Jost', var(--font-2), sans-serif;
    font-weight: 500;
    font-size: clamp(0.72rem, 1.1vw, 0.92rem);
    line-height: 1.15;
}

.au-orb-features li {
    display: flex;
    align-items: center;
    gap: 0.45em;
    white-space: nowrap;
}

/* A check drawn from two borders of a rotated box. */
.au-orb-features li::before {
    content: '';
    flex: none;
    width: 0.32em;
    height: 0.62em;
    margin-top: -0.18em;
    border: solid var(--cb-accent);
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}

/* Orbs: one upper right in the space above the shorter iPhone, one lower left
   against the iPad, and the feature list lower right beside the iPhone. */
.au-orb-1 { top: 58%; left: 7%;  width: clamp(104px, 14vw, 146px); animation-duration: 9s; }
.au-orb-2 { top: 4%;  right: 9%; width: clamp(108px, 14.5vw, 152px); animation-duration: 11s; animation-delay: -5s; }
.au-orb-3 { top: 50%; right: 1%; width: clamp(156px, 19vw, 198px); animation-duration: 10s; animation-delay: -2s; }

@media (max-width: 767px) {
    /* Extra room on top: the feature list orb sits mostly above the iPad. */
    .au-stage {
        padding: 78px 0 10px;
    }

    .au-devices {
        width: 100%;
    }

    .au-orb-1 { top: 68%; left: -3%;  width: clamp(84px, 24vw, 108px); }
    .au-orb-2 { top: 13%; right: -3%; width: clamp(88px, 25vw, 112px); }
    .au-orb-3 { top: 0;   left: -3%;  width: clamp(128px, 37vw, 146px); }
}

@media (prefers-reduced-motion: reduce) {
    .au-glow {
        animation: none;
    }

    .au-shot {
        transition: none;
    }

    .au-stage.is-armed .pb-orb {
        opacity: 1;
        transform: none;
        scale: none;
        transition: none;
    }
}


/* ── Gift Claim Reminder ── */
/* After release, a slim white strip between the cream app unlock section and the
   sage story section, for pre-order buyers who have not claimed their gifts. */
#gift-claim {
    background: white;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.gc-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    max-width: 740px;
    margin: 0 auto;
}

.gc-cover {
    flex: none;
    width: 120px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(27, 35, 26, 0.2);
    transform: rotate(-4deg);
}

.gc-text {
    text-align: left;
}

.gc-heading {
    font-family: var(--font-0);
    font-size: 1.9rem;
    line-height: 1.2;
    margin-bottom: 8px;
}

.gc-sub {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--cb-body-text);
}

@media (max-width: 576px) {
    .gc-inner {
        flex-direction: column;
        gap: 24px;
    }

    .gc-text {
        text-align: center;
    }

    .gc-heading {
        font-size: 1.6rem;
    }

    .gc-cover {
        width: 104px;
    }
}