/* ---------------------------------------------------------------
       reference/interstitial.html
       One exemplar per sub-recipe per skills/interstitial.md:

         Recipe A — floating-tab-card-on-tinted-page → ENCOURAGEMENT
           Teal page (--wag-color-primary-deep) full-bleed, with a
           NARROW navy tab card (--wag-component-card-dark-tab-*,
           #1d3a44) centered inside a wider column. The teal page
           surface shows in the column gutters to the card's left
           and right (the card is narrower than the column on
           purpose, per eyedropper of 08-encouragement-1.png).
           Pen+vial+pill composition floats on the teal page surface
           AND overlaps the top edge of the navy card. Coral
           speech-bubble with downward tail pinned to the vial.
           Headline with coral underline accent under "right meds"
           lives INSIDE the navy card. Cream footnote sits BELOW the
           navy card with --wag-spacing-lg of teal page surface
           visible between them.

         Recipe B — floating-only (no card)   → CLINICAL TEAM
           Teal page, headline + subhead + photo pair + mint callout
           strip + coral CTA, all floating directly on the teal page
           surface with no card wrapper.

         Recipe C — dark-edge-to-edge w/ pane → TESTIMONIAL
           Navy page, headline on navy → contained subject photo →
           flush name-eyebrow band → flush mint quote pane → trust
           badge + CTA inside the pane.

         Recipe C (sibling) — EDGE-TO-EDGE TWO-REGION → DR-TRUST
           NO independent page background within the Reference funnel
           column. Doctor-portrait photo region (~1:1 aspect) and
           navy content region together fill the column edge-to-edge
           from top to bottom — the regions ARE the surface.
             1. Photo region: full column width, no padding, no card
                chrome. Back arrow overlays the photo at top-left
                (position: absolute, dark ink color since photo
                interior is light).
             2. Navy content region (--wag-component-card-dark-tab,
                #1d3a44): full column width, single rounded top-LEFT
                corner only (top-right + both bottom corners square).
                Holds the body-lg pull-quote, doctor name + title,
                hand-drawn signature placeholder, and coral CTA.
           Earlier rounds incorrectly added a `surface-page-white`
           token after sampling the desktop browser background
           outside the Reference column. The token has been removed.
           Reference internal id: data-cy-question="medRecommendedTestimonial".

       Evidence:
         evidence/manual-screenshots/interstitial/desktop/
           08-encouragement-1.png
           12-clinical-team.png
           05-customer-testimonial.png

       Imagery: every photo slot uses wag-photo-placeholder (see
       skills/illustration-prompt.md).
    --------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    /* Reference-page chrome only.

         The body color exists ONLY to give each .wag-page variant
         block a visible outer edge against the surrounding page —
         it's a documentation affordance, not a Reference surface. We
         deliberately use a literal hex (a soft cool slate) instead
         of a Reference token: every Reference surface token is in active use
         within the variants below (cream, mint, mint-pale, warm-tan,
         teal, primary, primary-deep, navy, on-dark), and choosing
         any of them here would make at least one variant melt into
         the page chrome. The slate is intentionally outside the
         brand palette so it reads as "scaffolding" in the reference
         and would never be mistaken for a Reference design choice. When
         the variant HTML is ported into a real Reference page, the body
         falls back to whatever surface that page uses — this rule
         is reference-only and does not travel with the components. */
    background: #e6e8ec;
    color: var(--wag-color-ink);
    font-family: var(--wag-typography-body-md-font-family);
    font-size: var(--wag-typography-body-md-font-size);
    font-weight: var(--wag-typography-body-md-font-weight);
    line-height: var(--wag-typography-body-md-line-height);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.reference-frame {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wag-spacing-xxl);
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--wag-spacing-xl) var(--wag-spacing-gutter);
}

    .reference-frame > section {
        position: relative;
    }

/* ---------- Dual-preview wrappers (desktop + mobile) ----------

       Reference-only scaffolding. A `.recipe-preview` wraps a single
       <main class="wag-page wag-page--..."> instance and renders it
       at one of two viewport widths so you can QA both at once.

       Why this exists: the live `.wag-page` is clamped to ~500px AND
       carries its own surface color. On a real desktop, the surface
       color needs to bleed FULL-BLEED across the viewport while the
       content column stays clamped. The `.recipe-preview--desktop`
       wrapper reproduces that production behavior right inside the
       reference doc.

       The desktop wrapper:
         - Breaks out of the .reference-frame's max-width using a
           viewport-relative negative margin
         - Carries the surface color so it bleeds edge-to-edge
         - Hosts the .wag-page as a transparent content clamp

       The mobile wrapper is mostly cosmetic — it just adds the
       small viewport-tag label above the existing rendering so the
       two previews read as a matched pair. */

.recipe-preview {
    position: relative;
}

.recipe-preview__tag {
    display: inline-block;
    margin: 0 0 var(--wag-spacing-sm);
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--wag-typography-eyebrow-font-family);
    font-size: 11px;
    font-weight: var(--wag-typography-eyebrow-font-weight);
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wag-color-outline-strong);
    background: rgba(0, 0, 0, 0.05);
}

/* Desktop preview: full-bleed surface, content clamp at 500px.
       The viewport-bleed math uses the trick of pulling the wrapper
       outward by (100vw - 100%) / 2 — i.e. half of the gap between
       the wrapper's current container-clamped width (100%) and the
       full viewport width (100vw). With a 1080px reference-frame and
       a gutter, the wrapper at 100% width is narrower than the
       viewport; this pulls it outward so it spans the whole window
       on either side.

       Vertical sizing: matches Reference's live `#root { min-height: 100vh }`
       at 80vh — tall enough that the cream footnote / dark card
       flush-to-bottom behaviors render correctly, short enough that
       you can scroll past one recipe to the next without exhausting
       the viewport on every section. The tag floats inside the
       surface so the colored band reads as a single, continuous
       region. */
.recipe-preview--desktop {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
}

    .recipe-preview--desktop .recipe-preview__tag {
        position: absolute;
        top: var(--wag-spacing-sm);
        left: max(var(--wag-spacing-gutter), calc(50vw - 540px));
        z-index: 2;
        margin: 0;
        background: rgba(0, 0, 0, 0.18);
        color: var(--wag-color-on-dark);
    }
    /* When .wag-page is INSIDE a desktop preview wrapper, it stops
       carrying its own surface (the wrapper has it). It KEEPS its
       min-height: 100% so flex children like .wag-footnote with
       `flex: 1 0 auto` can absorb the remaining vertical space and
       sit flush against the wrapper's bottom edge — matching Reference's
       live behavior where the cream footnote runs to the viewport
       bottom. */
    .recipe-preview--desktop > .wag-page {
        background: transparent !important;
        /* Inherit the wrapper's 100vh definition so flex children
         (like the cream footnote with `flex: 1 0 auto`) can absorb
         the remaining height and sit flush to the viewport bottom. */
        min-height: inherit;
    }

    /* The wrapper inherits the recipe's surface color via these
       modifier classes — one for each --wag-page-- surface used
       in the doc. Adding a new page surface only requires adding
       a new modifier here. */
    .recipe-preview--desktop.wag-surface--teal {
        background: var(--wag-component-surface-page-teal-background-color);
        color: var(--wag-component-surface-page-teal-text-color);
    }

    .recipe-preview--desktop.wag-surface--navy {
        background: var(--wag-component-surface-page-navy-background-color);
        color: var(--wag-component-surface-page-navy-text-color);
    }

    .recipe-preview--desktop.wag-surface--primary {
        background: var(--wag-color-primary);
        color: var(--wag-color-on-dark);
    }

    .recipe-preview--desktop.wag-surface--edge-to-edge {
        /* No surface color — the inner page provides its own regions. */
        background: transparent;
    }

.variant-label {
    display: block;
    margin: 0 0 var(--wag-spacing-gutter);
    font-family: var(--wag-typography-eyebrow-font-family);
    font-size: var(--wag-typography-eyebrow-font-size);
    font-weight: var(--wag-typography-eyebrow-font-weight);
    letter-spacing: var(--wag-typography-eyebrow-letter-spacing);
    line-height: var(--wag-typography-eyebrow-line-height);
    color: var(--wag-color-outline-strong);
    text-transform: uppercase;
}

/* ---------- Iframe-based preview (per-recipe standalone files) ----

       Newer pattern: each recipe lives in its own standalone HTML file
       under reference/recipes/, and the reference doc embeds those
       files via iframes. Two advantages over the inline duplicated
       preview blocks:
         1. Source of truth — edit the recipe in one place, see it
            update in every preview AND when the file is opened
            directly as a real page in the browser.
         2. True viewport simulation — an iframe's width IS the
            viewport width seen by the embedded document, so media
            queries actually fire at the right breakpoints. The old
            "mobile preview" was just a clamped div in a desktop
            viewport; this approach shows what a real phone user sees.

       The iframe-desktop variant breaks out of the .reference-frame
       max-width (same trick as the inline desktop preview) and pins
       the iframe to 100vh. The iframe-mobile variant draws a small
       device-shaped frame around a clamped iframe so you can read
       the phone layout side-by-side with the desktop one. */

.recipe-preview__iframe {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
}

/* DESKTOP iframe — full-bleed, 100vh tall, like opening the
       recipe file in a fullscreen browser tab. */
.recipe-preview--iframe-desktop {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
}

    .recipe-preview--iframe-desktop .recipe-preview__iframe {
        height: 100vh;
        height: 100dvh;
        min-height: 600px;
    }

    .recipe-preview--iframe-desktop .recipe-preview__tag {
        position: absolute;
        top: var(--wag-spacing-sm);
        left: max(var(--wag-spacing-gutter), calc(50vw - 540px));
        z-index: 2;
        margin: 0;
        background: rgba(0, 0, 0, 0.35);
        color: var(--wag-color-on-dark);
    }

/* MOBILE iframe — clamped device shape, centered, with a soft
       outer shadow so it reads as a phone resting on the slate
       reference background. */
.recipe-preview--iframe-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wag-spacing-sm);
    padding: var(--wag-spacing-lg) 0;
}

    .recipe-preview--iframe-mobile .recipe-preview__iframe {
        width: 390px;
        max-width: 100%;
        height: 780px;
        border-radius: 24px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 48px -16px rgba(15, 23, 42, 0.22), 0 8px 16px -8px rgba(15, 23, 42, 0.16);
        background: #000;
        overflow: hidden;
    }

    .recipe-preview--iframe-mobile .recipe-preview__tag {
        margin: 0;
    }

/* ---------- wag-photo-placeholder primitive ---------- */

.wag-photo-placeholder {
    background: var(--wag-component-photo-placeholder-background-color);
    color: var(--wag-component-photo-placeholder-text-color);
    border: 1px dashed var(--wag-color-outline);
    border-radius: var(--wag-component-photo-placeholder-rounded);
    display: grid;
    place-items: center;
    padding: var(--wag-spacing-md);
    text-align: center;
    overflow: hidden;
}

.wag-photo-placeholder__label {
    font-family: var(--wag-component-photo-placeholder-font-family);
    font-size: var(--wag-component-photo-placeholder-font-size);
    font-weight: var(--wag-component-photo-placeholder-font-weight);
    line-height: var(--wag-component-photo-placeholder-line-height);
    letter-spacing: 0.02em;
    max-width: 28ch;
}

.wag-photo-placeholder[data-aspect="16/9"] {
    aspect-ratio: 16 / 9;
}

.wag-photo-placeholder[data-aspect="5/3"] {
    aspect-ratio: 5 / 3;
}

.wag-photo-placeholder[data-aspect="4/3"] {
    aspect-ratio: 4 / 3;
}

.wag-photo-placeholder[data-aspect="1/1"] {
    aspect-ratio: 1 / 1;
}

.wag-photo-placeholder[data-aspect="3/4"] {
    aspect-ratio: 3 / 4;
}

.wag-photo-placeholder[data-aspect="3/1"] {
    aspect-ratio: 3 / 1;
}

/* ---------- Page surfaces ----------

       Per evidence/chrome-saves/.../bundle.82b2683a.css the live
       Reference funnel mounts on:

         body, html { height: 100%; min-height: 100% }
         #root      { display: flex; flex-direction: column;
                      min-height: 100vh;
                      min-height: -webkit-fill-available; }

       The cream tab card "extends to the bottom" because the
       surface page (`#root`) is a flex column that fills the
       viewport, and the card is the bottom-most child in that
       column. The card is full-column-width edge-to-edge — there
       are no horizontal gutters between the card and the funnel
       column edges. Bottom corners are square; the card meets the
       viewport bottom flush.

       To mirror that here, every `.wag-page` is a flex column
       with `min-height: 100vh` (with the iOS-Safari-friendly
       `-webkit-fill-available` fallback Reference uses). Horizontal +
       bottom padding is zero so the card can be edge-to-edge; the
       chrome row + the exterior content slot restore their own
       horizontal inset locally. The bottom-most card uses
       `margin-top: auto` to absorb remaining vertical space and
       sit flush against the column bottom edge. */

.wag-page {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    padding: 0;
    overflow: hidden;
}

.wag-page--teal {
    background: var(--wag-component-surface-page-teal-background-color);
    color: var(--wag-component-surface-page-teal-text-color);
}

.wag-page--navy {
    background: var(--wag-component-surface-page-navy-background-color);
    color: var(--wag-component-surface-page-navy-text-color);
}
/* The competitor-compare variant uses Reference's deeper teal
       (--wag-color-primary, #05727a) as its page surface — slightly
       deeper than the primary-deep used by the other Recipe A
       variants. Per skills/interstitial.md § Recipe A — Page-and-card
       color pairings, this is the documented value. We resolve it
       directly to the color token rather than introducing a new
       --wag-component-surface-page-primary-* component token: the
       value is the same as --wag-color-primary, and adding a
       component token here would expand the vocabulary without
       earning its keep (the component-token layer exists to abstract
       semantic role — "this surface is the deeper-teal page" is
       already conveyed by the color token name). If a future variant
       introduces a behavior that diverges from a plain color reference,
       that's the right time to lift this into a component token. */
.wag-page--primary {
    background: var(--wag-color-primary);
    color: var(--wag-color-on-dark);
}
/* The edge-to-edge variant clears any inherited surface so its
       photo + navy regions together ARE the column surface. Used by
       dr-trust. */
.wag-page--edge-to-edge {
    background: transparent;
}

/* Chrome row: lives at the top of the page, restores its own
       horizontal inset since the parent .wag-page has zero L/R
       padding so the card below can be edge-to-edge. */
.wag-chrome {
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    align-items: center;
    gap: var(--wag-spacing-sm);
    padding: var(--wag-spacing-md) var(--wag-spacing-gutter) 0;
    min-height: 24px;
}

.wag-back {
    grid-column: 1;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--wag-color-on-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .wag-back svg {
        width: 18px;
        height: 16px;
        display: block;
    }
/* ---------- Shared CTA ---------- */

.wag-cta {
    cursor: pointer;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--wag-component-button-primary-background-color);
    color: var(--wag-component-button-primary-text-color);
    border-radius: var(--wag-component-button-primary-rounded);
    padding: var(--wag-component-button-primary-padding);
    font-family: var(--wag-component-button-primary-font-family);
    font-size: var(--wag-component-button-primary-font-size);
    font-weight: var(--wag-component-button-primary-font-weight);
    line-height: var(--wag-component-button-primary-line-height);
    transition: background-color 120ms ease-out, transform 60ms ease-out;
}

    .wag-cta:hover,
    .wag-cta:focus-visible {
        background: var(--wag-component-button-primary-hover-background-color);
        outline: none;
    }

    .wag-cta:active {
        transform: translateY(1px);
    }

/* ---------- Shared: headline-underline-coral ---------- */

.headline-underline-coral {
    text-decoration: underline;
    text-decoration-color: var(--wag-component-headline-underline-coral-text-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ============ Recipe A — encouragement ============
       Per skills/interstitial.md § "Recipe A —
       floating-tab-card-on-tinted-page":
         - Page surface is a SINGLE teal color
           (--wag-color-primary-deep, #0d6e75) full-bleed across the
           entire viewport. No horizontal band split.
         - Inside a centered column, a NAVY tab card
           (--wag-component-card-dark-tab-*, #1d3a44) is the content
           wrapper. The card is NARROWER than the column itself so
           the teal page surface shows to the left and right of the
           card AS WELL AS above and below it.
         - Hero composition floats on the teal page surface AND
           OVERLAPS the top edge of the navy card by ~30% of its
           height (photo is on the bare teal at its top, on the navy
           card at its bottom).
         - Footnote/disclaimer is a SEPARATE cream card below the
           navy card with --wag-spacing-lg of teal page surface
           visible between them.

       Important: the navy card MUST be present. If it is not present,
       this is no longer Recipe A — it is Recipe B (floating-only).
       See skills/interstitial.md § "Common failure mode: removing the
       dark card on encouragement" for the eyedropper evidence that
       confirms the navy card is real and is narrower than the column. */

/* The encouragement Recipe A column is now full-width within
       the funnel column. The navy card and cream footnote both
       extend edge-to-edge; only the floating hero composition
       above the card carries its own horizontal inset. */
.recipe-a .recipe-a__column {
    display: contents;
}

.recipe-a .floating-hero {
    /* Hero composition floats on the teal page surface. We hold
         a horizontal inset locally because the parent .wag-page
         has zero L/R padding (so the navy card below can be
         edge-to-edge). The encouragement skill prescribes a ~30%
         overlap of the hero with the navy card top edge; that
         iteration is deferred until the structural foundation is
         settled. For now: normal flow with breathing room.
         position: relative is retained ONLY as the containing block
         for the absolutely-positioned speech-bubble-annotation.
         The top margin must clear the absolutely-positioned
         speech-bubble (~55px tall including its 12px overhang
         offset) plus a comfortable gap below the chrome row, so
         the badge doesn't sit level with the back arrow. */
    position: relative;
    width: min(280px, 76%);
    margin: calc(var(--wag-spacing-xl) + var(--wag-spacing-md)) auto var(--wag-spacing-lg);
}

    /* The hero photo placeholder itself — no extra card wrapper. */
    .recipe-a .floating-hero .wag-photo-placeholder {
        /* The placeholder keeps its base dashed border (it IS a
         placeholder after all). At port time the entire <div> is
         swapped for an <img> per skills/illustration-prompt.md. */
        background: transparent;
        color: var(--wag-color-on-dark);
        border-color: var(--wag-color-on-dark);
        padding: var(--wag-spacing-md);
    }

    /* Real <img> swap-in for the encouragement hero. The image
       ships at 767×700 (≈1.10:1) — after auto-cropping the
       transparent margin the generator added, the scene itself
       reads as near-square rather than the 4:3 the canvas was
       sized to. Sizing-by-width + aspect-ratio reservation
       prevents layout shift during decode. */
    .recipe-a .floating-hero .floating-hero__image {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 767 / 700;
    }

/* The coral speech-bubble with downward tail, pinned above a hero
       element. Same recipe as score-reveal / checkout-summary bubbles. */
.speech-bubble-annotation {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translate(-50%, -100%);
    background: var(--wag-color-accent-coral);
    color: var(--wag-component-button-primary-text-color);
    border-radius: var(--wag-rounded-md);
    padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(25, 23, 23, 0.12);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    animation: bubble-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 240ms;
    z-index: 3;
}

.speech-bubble-annotation__value {
    font-family: var(--wag-typography-label-lg-font-family);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.speech-bubble-annotation__eyebrow {
    font-family: var(--wag-typography-eyebrow-font-family);
    font-size: 10px;
    font-weight: var(--wag-typography-eyebrow-font-weight);
    letter-spacing: var(--wag-typography-eyebrow-letter-spacing);
    line-height: 1.1;
    text-transform: uppercase;
    margin-top: 2px;
}

.speech-bubble-annotation__tail {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--wag-color-accent-coral);
}

@keyframes bubble-pop {
    from {
        transform: translate(-50%, -100%) scale(0.6);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -100%) scale(1);
        opacity: 1;
    }
}

/* card-dark-tab: navy card on the teal page surface, edge-to-edge
       across the full funnel column.

       Eyedropper evidence (mobile/08-encouragement-1.png, 414px-wide
       image, sampled at x=50, x=207, x=370): pure navy `#1d3a44`
       fills the column from the card's top edge (y≈312) down through
       y=667. At y=668 a single transition pixel, then pure cream
       `#f6f4ee` from y=669 — the navy card meets the cream footnote
       FLUSH. There is no teal gap between them. Bottom corners are
       square so the cream picks up cleanly where the navy ends.

       An earlier version of this skill claimed the navy card was
       narrower than the column; that was a misread (the
       column-content desktop screenshots were assumed to include
       browser chrome, which they didn't). Mobile evidence wins:
       the card is full-column-width and meets the cream footnote
       with no surface visible between them. */
.wag-card--dark-tab {
    width: 100%;
    background: var(--wag-component-card-dark-tab-background-color);
    color: var(--wag-component-card-dark-tab-text-color);
    /* Top corners take the kit-signature rounded radius from the
         token. Bottom corners are squared so the card meets the
         cream footnote seamlessly with no surface visible between
         them. */
    border-radius: var(--wag-component-card-dark-tab-rounded) var(--wag-component-card-dark-tab-rounded) 0 0;
    /* Extra top padding because the hero (eventually) overlaps. */
    padding: var(--wag-spacing-xl) var(--wag-component-card-dark-tab-padding) var(--wag-component-card-dark-tab-padding);
    position: relative;
    z-index: 0;
    animation: wag-card-slide-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes wag-card-slide-in {
    from {
        transform: translateY(24px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.wag-card--dark-tab h2 {
    margin: 0 0 var(--wag-spacing-md);
    text-align: center;
    font-family: var(--wag-typography-display-md-font-family);
    font-size: var(--wag-typography-display-md-font-size);
    font-weight: var(--wag-typography-display-md-font-weight);
    line-height: var(--wag-typography-display-md-line-height);
    letter-spacing: var(--wag-typography-display-md-letter-spacing);
    color: var(--wag-color-on-dark);
}

.wag-card--dark-tab p {
    margin: 0 0 var(--wag-spacing-lg);
    font-family: var(--wag-typography-body-md-font-family);
    font-size: var(--wag-typography-body-md-font-size);
    line-height: var(--wag-typography-body-md-line-height);
    color: var(--wag-color-on-dark);
}

/* Cream footnote sits flush below the navy card. Per the
       eyedropper of mobile/08-encouragement-1.png at three x
       columns (x=50, 207, 370): pure navy `#1d3a44` from y=660
       through y=667, a single anti-aliasing transition pixel at
       y=668, then pure cream `#f6f4ee` from y=669 continuing
       unbroken all the way to y=886 (the bottom of the funnel
       column, just above the iOS system bar). There is no teal
       page surface visible between the navy card and the cream
       footnote — they are flush. (An earlier draft of this rule
       inserted a ~8px teal gap based on a misread of the screenshot
       tool's render; the real anatomy has zero gap.)

       The cream footnote uses `flex: 1 0 auto` so it absorbs the
       remaining viewport height in the .wag-page flex column,
       making it run edge-to-edge column-width all the way to the
       bottom of the viewport. No top margin, no rounded corners
       — the cream is simply the page-bottom band that picks up
       where the navy card ends. */
.recipe-a .wag-footnote {
    width: 100%;
    flex: 1 0 auto;
    padding: var(--wag-spacing-md) var(--wag-spacing-gutter);
    background: var(--wag-color-surface);
    color: var(--wag-color-ink-slate);
    border-radius: 0;
}

    .recipe-a .wag-footnote p {
        margin: 0;
        font-family: var(--wag-typography-caption-font-family);
        font-size: var(--wag-typography-caption-font-size);
        font-weight: var(--wag-typography-caption-font-weight);
        line-height: var(--wag-typography-caption-line-height);
        color: var(--wag-color-ink-slate);
    }

/* ============ Recipe B — clinical-team ============
       Recipe B is card-less — all content sits directly on the
       page surface. Since the parent .wag-page has zero L/R
       padding (so Recipe A cream cards can be edge-to-edge),
       Recipe B must re-establish horizontal inset on its
       .wag-page so the floating content has breathing room
       against the column edges. The bottom CTA also needs the
       inset; we don't push it to the column bottom because
       Recipe B variants don't use the "card extends to bottom"
       pattern — they're a top-anchored stack. */
.recipe-b .wag-page {
    padding-left: var(--wag-spacing-gutter);
    padding-right: var(--wag-spacing-gutter);
    padding-bottom: var(--wag-spacing-xl);
}
/* The chrome row's own padding doubles up with the parent's
       padding now. Reset its L/R inset to zero so the back arrow
       sits at the gutter edge, not gutter+gutter from the edge. */
.recipe-b .wag-chrome {
    padding-left: 0;
    padding-right: 0;
}

.recipe-b .floating-headline {
    margin: var(--wag-spacing-md) auto var(--wag-spacing-xs);
    max-width: 18ch;
}

    /* When a clinical-team step skips the subhead and goes directly
       from headline -> image, two things change vs. the canonical
       headline -> subhead -> image flow:
       1. The default 4px bottom gap is too tight — bump to 16px to
          match the standard headline -> content rhythm used on
          .recipe-a-cream__exterior-headline (FHA, etc.).
       2. The default 18ch max-width is too narrow for long headlines
          (it was tuned for the short "Real clinicians. Real
          signatures." canonical case). Relax it to a column-wide
          ~28ch so longer headlines like "Spend money on your pet,
          not on pet rent." breathe like other interstitials. */
    .recipe-b .floating-headline:has(+ .team-photos) {
        margin-bottom: var(--wag-spacing-md);
        max-width: 28ch;
        text-align: center;
        font-family: var(--wag-typography-display-md-font-family);
        font-size: var(--wag-typography-display-md-font-size);
        font-weight: var(--wag-typography-display-md-font-weight);
        line-height: var(--wag-typography-display-md-line-height);
        letter-spacing: var(--wag-typography-display-md-letter-spacing);
        color: var(--wag-color-on-dark);
    }

.recipe-b .floating-subhead {
    margin: 0 auto var(--wag-spacing-lg);
    max-width: 32ch;
    text-align: center;
    font-family: var(--wag-typography-body-md-font-family);
    font-size: var(--wag-typography-body-md-font-size);
    line-height: var(--wag-typography-body-md-line-height);
    color: var(--wag-color-on-dark);
    opacity: 0.85;
}

.recipe-b .team-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: max-content;
    align-self: start;
    gap: var(--wag-spacing-sm);
    margin: 0 0 var(--wag-spacing-md);
}

.recipe-b .team-photos__portrait {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 28%;
    border-radius: var(--wag-rounded-md);
}

/* Single-hero variant of recipe-b's team-photos slot.
       Used on the pet-rent interstitial (and any future
       clinical-team step that uses a single landscape hero
       instead of two portraits). The slot collapses to a
       single column and adopts a 4:3 landscape aspect that
       matches the visual heft of the two-portrait composition
       above it on the page. */
.recipe-b .team-photos--single {
    grid-template-columns: 1fr;
}

    .recipe-b .team-photos--single .team-photos__portrait {
        aspect-ratio: 4 / 3;
        object-position: 50% 50%;
    }
    /* 16:9 wide variant — used when the supplied hero is a landscape
       composition (e.g. the travel interstitial's airplane-cabin shot)
       so the image doesn't get cropped top-and-bottom by the default
       4:3 frame. */
    .recipe-b .team-photos--single.team-photos--16x9 .team-photos__portrait {
        aspect-ratio: 16 / 9;
    }

.recipe-b .floating-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--wag-spacing-sm);
    background: var(--wag-component-callout-cream-background-color);
    color: var(--wag-component-callout-cream-text-color);
    border-radius: var(--wag-component-callout-cream-rounded);
    padding: var(--wag-spacing-md);
    margin: 0 0 var(--wag-spacing-lg);
}

    .recipe-b .floating-callout .coral-diamond {
        flex-shrink: 0;
        margin-top: 4px;
        width: 14px;
        height: 14px;
        color: var(--wag-color-accent-coral);
    }

    .recipe-b .floating-callout p {
        margin: 0;
        font-family: var(--wag-typography-body-md-font-family);
        font-size: var(--wag-typography-body-md-font-size);
        line-height: var(--wag-typography-body-md-line-height);
        color: var(--wag-color-ink);
    }

/* Multi-bullet variant: when the callout carries multiple items
       it switches from a single coral-diamond + paragraph to a
       proper list, with each line getting its own diamond bullet
       aligned to the first line of text. The .floating-callout
       parent's flex layout becomes block here so the <ul> can take
       the full width of the callout body. */
.recipe-b .floating-callout--list {
    display: block;
}

.recipe-b .floating-callout__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wag-spacing-sm);
}

.recipe-b .floating-callout__item {
    display: flex;
    align-items: flex-start;
    gap: var(--wag-spacing-sm);
}

    .recipe-b .floating-callout__item .coral-diamond {
        flex-shrink: 0;
        margin-top: 6px;
        width: 14px;
        height: 14px;
        color: var(--wag-color-accent-coral);
    }

/* ============ Recipe C — testimonial (layered scene) ============ */

.recipe-c .testimonial-headline {
    /* Horizontal inset is local because the parent .wag-page
         carries zero L/R padding so the mint quote pane below can
         be edge-to-edge. */
    margin: var(--wag-spacing-md) auto var(--wag-spacing-gutter);
    padding: 0 var(--wag-spacing-gutter);
    max-width: 32ch;
    text-align: center;
    font-family: var(--wag-typography-display-md-font-family);
    font-size: var(--wag-typography-display-md-font-size);
    font-weight: var(--wag-typography-display-md-font-weight);
    line-height: var(--wag-typography-display-md-line-height);
    letter-spacing: var(--wag-typography-display-md-letter-spacing);
    color: var(--wag-color-on-dark);
}

/* The testimonial scene holds the photo + eyebrow band + mint
       quote pane as a flush vertical stack. It takes
       `flex: 1 0 auto` so it absorbs the remaining viewport height
       below the on-navy headline; the photo and eyebrow stay at
       their natural sizes (aspect-ratio + intrinsic content height)
       and the mint quote pane is the only flex child that grows,
       ensuring it runs edge-to-edge column-width all the way to the
       bottom of the viewport. */
.recipe-c .testimonial-scene {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 0 auto;
}

    .recipe-c .testimonial-scene .wag-photo-placeholder[data-aspect="16/9"] {
        border-radius: var(--wag-rounded-sm) var(--wag-rounded-sm) 0 0;
        background: var(--wag-color-surface-pill-deselected);
        color: var(--wag-color-ink-slate);
    }

.recipe-c .testimonial-scene__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    object-fit: cover;
    object-position: 50% 40%;
    border-radius: var(--wag-rounded-sm) var(--wag-rounded-sm) 0 0;
}

.recipe-c .testimonial-eyebrow {
    margin: 0;
    padding: var(--wag-spacing-sm) var(--wag-spacing-md);
    background: var(--wag-component-surface-page-navy-background-color);
    color: var(--wag-color-on-dark);
    display: flex;
    align-items: center;
    gap: var(--wag-spacing-sm);
    font-family: var(--wag-typography-eyebrow-font-family);
    font-size: var(--wag-typography-eyebrow-font-size);
    font-weight: var(--wag-typography-eyebrow-font-weight);
    line-height: var(--wag-typography-eyebrow-line-height);
    letter-spacing: var(--wag-typography-eyebrow-letter-spacing);
    text-transform: uppercase;
}

.recipe-c .testimonial-chat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--wag-color-accent-coral);
}

    .recipe-c .testimonial-chat-icon svg {
        width: 100%;
        height: 100%;
    }

.recipe-c .testimonial-quote-pane {
    background: var(--wag-component-card-mint-background-color);
    color: var(--wag-component-card-mint-text-color);
    padding: var(--wag-spacing-gutter);
    /* Kit-signature tab shape via the shared shape token —
         square top-LEFT, xl-rounded top-RIGHT, square bottom corners.
         Pixel evidence: 05-customer-restimonial.png, mint-tone first-y
         at x=0 starts uniformly at the top of the pane, while
         first-y at x=col-width sweeps down ~70px to complete the
         rounded top-right corner. */
    border-radius: var(--wag-component-tab-card-shape-rounded);
    min-height: 360px;
    flex: 1 0 auto;
    animation: pane-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pane-enter {
    from {
        transform: translateY(16px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.recipe-c .testimonial-quote-pane blockquote {
    margin: 0 0 var(--wag-spacing-lg);
}

    .recipe-c .testimonial-quote-pane blockquote p {
        margin: 0;
        /* Editorial-display testimonial quote.

         Desktop target (per design call): 24px. We previously matched
         Reference's medSuccessTestimonial computed 28px, but at our copy
         length and column width 28px was running tall on desktop and
         producing more wrapped lines than the design called for; 24px
         reads cleaner inside the mint pane while keeping the
         editorial-display feeling.

         Reference computed style (Reference medSuccessTestimonial, kept
         here for context — line-height ratio ~1.286 still applied at
         our new size):
            font-family : "Untitled Serif", serif
            font-weight : 400
            color       : rgb(29, 58, 68) → our --wag-color-navy-deep

         Responsive scaling:
         The clamp() interpolates from 20px @ 320px viewport up to
         24px @ ≥615px viewport (3.9vw × 615 ≈ 24), with a matching
         line-height ramp from 26px → 31px (24 × 1.286 ≈ 30.86, rounded
         up so descenders never crowd the ascenders below). Below
         320px the floor holds at 20px so the quote never collapses
         unreadably small.

         We don't have rights to "Untitled Serif" itself; our existing
         display-tier serif token (Source Serif 4 → Tiempos Headline →
         Georgia) is the closest visual match in the system and is
         already the fallback we use for editorial display copy. */
        font-family: var(--wag-typography-display-md-font-family);
        font-size: clamp(20px, 3.9vw, 24px);
        font-weight: 400;
        line-height: clamp(26px, 5vw, 31px);
        color: var(--wag-color-navy-deep);
    }
/* Emphasis span inside testimonial quotes — matches the Reference
       pattern of highlighting one phrase per quote (e.g. "an extra
       boost to get the habits"). Color is our teal primary to match
       Reference's medSuccessTestimonial highlight color rgb(5, 114, 122). */
.recipe-c .testimonial-highlight {
    color: var(--wag-color-primary);
    font-style: normal;
}

.recipe-c .wag-link-teal {
    color: var(--wag-color-primary);
    text-decoration: underline;
    font-weight: 600;
}
/* Trust badge sits LEFT-ALIGNED below the quote and above the
       CTA (flex-start, NOT centered). Pixel evidence on
       Reference/Interstital/Mobile/05-customer-restimonial.png:
       - leftmost dark pixel of the "Real Reference user" line is x=37 at
         the 414px viewport, which sits at the pane's left padding
         edge — confirming left-aligned, not centered. (Centered
         would put leftmost x near ~150 for a line this short.)
       - Text color samples to rgb(29,58,68) = #1d3a44 =
         var(--wag-color-navy-deep), NOT teal-primary. An earlier
         draft used --wag-color-primary (teal); that misread used
         the headline-link teal as the body-trust-badge color.
       - Shield icon: solid navy fill (#1d3a44), NOT a 15%-opacity
         teal circle. The checkmark inside is mint
         (--wag-color-surface-mint) for contrast against the navy. */
.recipe-c .trust-badge {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--wag-spacing-xs);
    /* Symmetric `lg` margins so the trust strip sits visually
         centered between the quote (32px above, from the
         blockquote's own bottom margin) and the CTA (32px below).
         Pixel evidence on Reference/Interstital/Mobile/05-customer-restimonial.png:
         quote-bottom y=571, trust-top y=599 (gap=28px), trust-bottom
         y=606, CTA-top y=636 (gap=30px). Symmetric ~28-30px gaps in
         the source — `lg` (32px) is the closest token in our scale.
         An earlier draft used `0 0 md` (16px below, no top margin),
         which gave 32px above + 16px below; the asymmetry pulled the
         strip toward the CTA instead of seating it between the two. */
    margin: 0 0 var(--wag-spacing-lg);
    font-family: var(--wag-typography-caption-font-family);
    font-size: var(--wag-typography-caption-font-size);
    font-weight: 600;
    line-height: var(--wag-typography-caption-line-height);
    color: var(--wag-color-navy-deep);
}

    .recipe-c .trust-badge svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
        /* Solid navy shield body (the back plate). */
        .recipe-c .trust-badge svg .trust-shield {
            fill: var(--wag-color-navy-deep);
        }
        /* Mint checkmark on the navy shield. */
        .recipe-c .trust-badge svg .trust-check {
            stroke: var(--wag-color-surface-mint);
        }

/* ============ Recipe C — dr-trust (sibling form) ============
       Per skills/interstitial.md § Recipe C:

       The Reference funnel renders at mobile width (~420px). When this
       variant appears in the desktop screenshot the desktop browser
       background fills the gutters to the column's left and right
       — that browser bg is NOT a Reference page surface. Within Reference's
       actual column, dr-trust has NO independent page background:
       a doctor-portrait photo region (top ~50%) and a navy content
       region (bottom ~50%) together fill the column edge-to-edge.

       Structure:
         - Photo region: full-width edge-to-edge within the column.
           No left/right padding. Back arrow overlays the photo at
           top-left (position: absolute, dark color since the photo's
           interior is light).
         - Navy content region: full-width edge-to-edge within the
           column. No left/right padding. Single rounded top-left
           corner (--wag-rounded-lg); top-right + both bottom
           corners square. Holds quote + name + title + signature
           placeholder + coral CTA.
         - The two regions are siblings; they abut vertically with
           no gap.

       Earlier rounds incorrectly added a `surface-page-white`
       token after sampling the desktop browser background outside
       the Reference column on a desktop screenshot. The token has been
       removed; this variant does not use it. */

/* Stack wrapper: full column width, both regions are siblings
       that abut vertically with no gap. */
.recipe-c--dr-trust .dr-trust-stack {
    position: relative;
    width: 100%;
}

/* The dr-trust stack is a layered composition: the doctor
       photo is the BACK layer (full-column-width, 1:1 aspect),
       and the navy content region is positioned IN FRONT of it,
       overlapping the photo's bottom ~25%. The navy region's
       top-RIGHT corner is rounded with a generous radius
       (`--wag-rounded-xl`, 72px) so the photo's bottom-right
       quadrant "peeks out" through the wedge cutout to the right
       of the rounded corner. This is the variant's signature
       compositional gesture — the navy is shaped to reveal the
       portrait behind it.

       Eyedropper evidence (Reference/Interstital/Mobile/11-dr-trust-builder.png,
       414×896): navy starts uniformly at y=308 from x=0 through
       x=340 (left edge straight, no rounding), then the navy's top
       edge curves down-and-right with a quarter-circle of radius
       ~70 image-pixels (≈ `--wag-rounded-xl` 72px), reaching
       y=359 at x=410 and y=377 at x=413. Photo background pixels
       (light gray `#dadde7`) are visible through the wedge cutout
       from y=308 down through y=372, confirming the photo extends
       BEHIND the navy region (the photo isn't simply a 4:3
       short-aspect image followed by a navy card; the photo is
       the back layer of a layered composition).

       Photo aspect = 1:1 means the photo's footprint is
       column-width × column-width. The navy region's
       `margin-top: -25%` pulls it up over the photo's bottom
       quarter — 25% of column-width-square equals exactly the
       depth we want the navy to overlap.

       The stack is the sole child of `.wag-page`, itself a flex
       column. `flex: 1` lets the stack claim the full column
       height instead of shrinking to its content's intrinsic
       height; `flex: 1 0 auto` on the content region then lets
       ITS background absorb whatever space is left below the
       quote/name/signature/CTA, so the navy panel always reaches
       the viewport bottom on both short (desktop, content taller
       than the viewport) and tall (mobile, content shorter than
       the viewport) layouts — matching the cream-tab card's
       margin-top:auto pattern used elsewhere in this file. */
.recipe-c--dr-trust .dr-trust-stack {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Photo region: 1:1 aspect, full column width. Sits at the
       bottom of the layered z-stack so the navy region can
       overlap it. `flex: none` keeps its height pinned to the
       aspect-ratio instead of being stretched by the stack's
       flex-grow. */
.recipe-c--dr-trust .dr-photo-region {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    flex: none;
}

    .recipe-c--dr-trust .dr-photo-region .wag-photo-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--wag-color-surface-pill-deselected);
        color: var(--wag-color-ink-slate);
        border: 0;
        border-radius: 0;
    }

.recipe-c--dr-trust .dr-photo-region__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}

/* Back arrow overlay: absolute within the photo region.
       Dark ink color since the photo interior is light (clinical
       white-wall background). */
.recipe-c--dr-trust .dr-back {
    position: absolute;
    top: var(--wag-spacing-md);
    left: var(--wag-spacing-md);
    color: var(--wag-color-ink);
    z-index: 2;
}

/* Navy content region: full-width, sits IN FRONT of the photo
       and overlaps its bottom ~25%. Single rounded top-RIGHT
       corner (`--wag-rounded-xl`, 72px); top-left + both bottom
       corners square. Holds the pull-quote → name → title →
       signature placeholder → coral CTA. */
.recipe-c--dr-trust .dr-content-region {
    position: relative;
    z-index: 1;
    margin-top: -25%;
    flex: 1 0 auto;
    background: var(--wag-component-card-dark-tab-background-color);
    color: var(--wag-component-card-dark-tab-text-color);
    border-radius: 0 var(--wag-rounded-xl) 0 0;
    padding: var(--wag-spacing-lg) var(--wag-spacing-gutter) var(--wag-spacing-lg);
    animation: pane-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .recipe-c--dr-trust .dr-content-region blockquote {
        margin: 0 0 var(--wag-spacing-lg);
    }

        .recipe-c--dr-trust .dr-content-region blockquote p {
            margin: 0;
            font-family: var(--wag-typography-body-lg-font-family);
            font-size: var(--wag-typography-body-lg-font-size);
            font-weight: var(--wag-typography-body-lg-font-weight);
            line-height: var(--wag-typography-body-lg-line-height);
            color: var(--wag-color-on-dark);
        }

.recipe-c--dr-trust .dr-name {
    margin: 0;
    font-family: var(--wag-typography-label-lg-font-family);
    font-size: var(--wag-typography-label-lg-font-size);
    font-weight: var(--wag-typography-label-lg-font-weight);
    line-height: var(--wag-typography-label-lg-line-height);
    color: var(--wag-color-on-dark);
}

.recipe-c--dr-trust .dr-title {
    margin: 0 0 var(--wag-spacing-md);
    font-family: var(--wag-typography-body-sm-font-family);
    font-size: var(--wag-typography-body-sm-font-size);
    line-height: var(--wag-typography-body-sm-line-height);
    color: var(--wag-color-on-dark);
    opacity: 0.85;
}

.recipe-c--dr-trust .dr-signature.wag-photo-placeholder {
    background: transparent;
    color: var(--wag-color-on-dark);
    border-color: var(--wag-color-on-dark);
    margin: 0 0 var(--wag-spacing-lg);
    padding: var(--wag-spacing-sm) var(--wag-spacing-md);
}
/* Real-asset signature treatment: the source PNG is white ink on
       a black field (no alpha channel). `mix-blend-mode: screen`
       converts the black background to "transparent" against the
       navy panel below — black + anything = anything (the algebraic
       identity for screen) — while the white ink renders at full
       brightness on top of the navy. The image is centered within
       its slot at its natural 4:1 aspect; we hold a sensible max
       width so the signature isn't column-edge-to-column-edge,
       which is more proportionate to a real signed letter. */
.recipe-c--dr-trust .dr-signature__image {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    /* Tracks the actual asset ratio (1024×292 ≈ 7:2). Keeping
         this in sync with the source PNG's true aspect prevents
         `object-fit: contain` from letterboxing whitespace above
         and below the signature; the box is sized to the glyphs,
         not to a generic shorthand ratio. */
    aspect-ratio: 1024 / 292;
    object-fit: contain;
    mix-blend-mode: screen;
    /* Left-align under the printed name + credential block above
         (the Reference reference puts the signature flush-left with the
         dr-name line, not centered in the column). The trailing
         margin opens up breathing room between the signature and
         the coral CTA below — the prior `var(--wag-spacing-lg)`
         that lived on the old placeholder rule was crowding the
         button. `xl` gives the signature room to read as a
         distinct artifact rather than a label on the CTA. */
    margin: 0 0 var(--wag-spacing-xl);
}

/* ============================================================
       Shared scaffolding for the four NEW Recipe A variants
       (multi-fact, competitor-compare, pre-quiz). Recipe A's full
       formal structure, per the updated skills/interstitial.md:

         [Tinted page surface — single full-bleed color]
           ├── Optional exterior content slot (headline, hero
           │   composition, floating fact-pill grid, etc.) on the
           │   page surface, ABOVE the cream tab card
           ├── Cream tab card (centered column-width container
           │   with rounded top corners; holds body content + CTA)
           └── Optional footnote band below the card

       The exterior content slot is a real Reference pattern — confirmed
       by eyedropper of 06-multi-fact-callout (2×2 mint pill grid +
       headline above the cream card on teal), 07-competitor-compare
       (headline + bar chart above the cream card), 10-pre-quiz
       (logomark logomark above the cream card). Encouragement uses
       the same slot for its medication-composition hero.
       ============================================================ */

/* The cream-tab Recipe A column is now structurally flat — the
       wrapper element exists for semantic grouping in the markup
       but does not constrain width, since the exterior content slot
       carries its own inset and the cream card is edge-to-edge. */
.recipe-a-cream .recipe-a-cream__column {
    display: contents;
}

/* Exterior content above the cream card, on the bare tinted
       page surface. Cream-on-teal text, no card chrome. Carries
       its own horizontal inset because the parent .wag-page has
       zero L/R padding (so the cream card below can be edge-to-edge).

       Layout intent (per Reference desktop reference 06-multi-fact-callout):
       the exterior content sits CLOSE to the chrome row above, with a
       small `spacing-lg` gap to the cream card below. The cream card
       carries the entire remaining leftover vertical space via its
       own `margin-top: auto` — it expands DOWN-WARD from the bottom
       of the exterior content to the viewport bottom. We deliberately
       do NOT use `margin-top: auto` here (an earlier iteration did,
       which centered the exterior between the chrome and cream and
       opened a large dead-teal gap above the cream — see
       https://app/agent for the prior layout). */
.recipe-a-cream__exterior {
    width: min(480px, 92%);
    /* Top: `spacing-md` matches the breathing room between chrome
         row and headline used by .recipe-b .floating-headline
         (clinical-team / thanks-for-questions). An earlier
         iteration used 0, which put the headline visually flush
         against the back button on these cream-tab recipes.
         Bottom: `spacing-md` (16px) gives a tight gap to the cream
         card below, matching Reference's compact reference layout.
         Internal grid/fact-list elements MUST NOT carry their own
         bottom margins (we override .multi-fact-grid below) — they
         would double-stack with this margin and reintroduce the
         dead-teal band we removed. */
    margin: var(--wag-spacing-md) auto var(--wag-spacing-md);
    color: var(--wag-color-on-dark);
    text-align: center;
}

.recipe-a-cream__exterior-headline {
    margin: 0 0 var(--wag-spacing-md);
    font-family: var(--wag-typography-display-md-font-family);
    font-size: var(--wag-typography-display-md-font-size);
    font-weight: var(--wag-typography-display-md-font-weight);
    line-height: var(--wag-typography-display-md-line-height);
    letter-spacing: var(--wag-typography-display-md-letter-spacing);
    color: var(--wag-color-on-dark);
}

/* Cream tab card: signature top-rounded shape, square bottom,
       edge-to-edge across the full funnel column. Per the
       eyedropper evidence on mobile/06-multi-fact-callout.png,
       /07-competitor-compare.png, /10-pre-quiz.png, the cream
       fills both column edges (L/R) from the top of the rounded
       cap (~y=440 on multi-fact) all the way to the bottom of
       the viewport.

       Layout: the cream card sits immediately below the exterior
       content (no auto-margin gap above it) and FLEX-GROWS to fill
       all remaining vertical space, so its bottom edge meets the
       viewport bottom. An earlier iteration used `margin-top: auto`
       to push the card to the bottom; that worked when the
       exterior block was centered, but with the exterior now
       anchored close to the top (per Reference desktop reference
       06-multi-fact-callout), `margin-top: auto` opened a large
       dead-teal band between the exterior and the cream card.
       Replacing it with `flex: 1 0 auto` keeps the card flush
       under the exterior while still occupying the rest of the
       column. */
.wag-card--cream-tab {
    width: 100%;
    flex: 1 0 auto;
    background: var(--wag-component-card-cream-tab-background-color);
    color: var(--wag-component-card-cream-tab-text-color);
    /* Tab shape: rounded TOP corners, square BOTTOM corners.
         The card sits at the bottom of the column and flex-grows to
         meet the viewport floor, so the bottom corners need to be
         square (otherwise we get a visibly rounded bottom that looks
         disconnected from the floor — see screenshot evidence on
         03-int-fha and 15-int-competitor-compare).

         The token (`--wag-component-card-cream-tab-rounded`, 32px)
         is the single source of truth for the radius value — we
         apply it to only the top two corners via the per-corner
         shorthand below. The dark-tab variant uses the same
         pattern (see line ~611). */
    border-radius: var(--wag-component-card-cream-tab-rounded) var(--wag-component-card-cream-tab-rounded) 0 0;
    padding: var(--wag-component-card-cream-tab-padding);
    animation: wag-card-slide-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .wag-card--cream-tab > h2 {
        margin: 0 0 var(--wag-spacing-md);
        font-family: var(--wag-typography-display-md-font-family);
        font-size: var(--wag-typography-display-md-font-size);
        font-weight: var(--wag-typography-display-md-font-weight);
        line-height: var(--wag-typography-display-md-line-height);
        letter-spacing: var(--wag-typography-display-md-letter-spacing);
        color: var(--wag-color-ink);
    }

    .wag-card--cream-tab > p {
        margin: 0 0 var(--wag-spacing-lg);
        font-family: var(--wag-typography-body-md-font-family);
        font-size: var(--wag-typography-body-md-font-size);
        line-height: var(--wag-typography-body-md-line-height);
        color: var(--wag-color-ink);
    }

/* ============ Recipe A — multi-fact-callout ============
       Page surface: --wag-color-primary-deep (teal #0d6e75).
       Pixel evidence (mobile 06-multi-fact-callout.png):
         - Top 25% band histogram: 20.4% #daf4f0 (mint pill cells)
           + ~25% teal page bg → 2×2 mint grid floating on teal.
         - y_25_45 band: 55.4% #daf4f0 → mint grid dominates this
           band; pill fill is surface-mint-pale, NOT surface-mint.
         - y_45_70: 65.4% #f6f4ee (cream tab card body).
         - bottom 30%: 75.2% cream + 18.3% #fb513b (coral CTA).
       Token reuse note: --wag-color-surface-mint-pale (#dcf5f0)
       has TWO documented use cases — (a) plan-suggestion hero card
       fill, (b) multi-fact 2×2 pill grid fill. Both are pale-mint
       surfaces holding light content, so the reuse is semantically
       coherent. See skills/interstitial.md § "Recipe A — multi-fact". */

/* ---- D4 layout: no-box dense checklist ----
       The grid is now a single-column vertical stack on every
       viewport (no 2x2 gymnastics). Each "pill" renders as a
       plain row directly on the teal canvas — no card boxes,
       no mint fill — separated from its neighbors by a faint
       on-dark divider. This dramatically shrinks the exterior
       block height (~297px on a 375px viewport, vs ~340px for
       the previous boxed-horizontal layout) so the protections
       block lands in the same vertical envelope as step 5's
       hero image and the funnel-step rhythm stays consistent.

       Class names are preserved (.multi-fact-grid, .multi-fact-pill,
       .multi-fact-pill__icon/label/value/body) so the recipe and
       _generate.cjs don't have to be touched — only the visual
       treatment changes. */
.multi-fact-grid {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 auto;
    width: min(480px, 100%);
}

.multi-fact-pill {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: var(--wag-spacing-md);
    align-items: start;
    padding: 10px 0;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid rgba(246, 244, 238, 0.18);
    /* Override the centered text-align that cascades from
         .recipe-a-cream__exterior — the D4 checklist relies on
         the label and description being left-aligned next to the
         icon chip, otherwise the text reads as floating centered
         text rather than a list item. */
    text-align: left;
    animation: wag-card-slide-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .multi-fact-pill:last-child {
        border-bottom: 0;
    }

    .multi-fact-pill:nth-child(1) {
        animation-delay: 0ms;
    }

    .multi-fact-pill:nth-child(2) {
        animation-delay: 80ms;
    }

    .multi-fact-pill:nth-child(3) {
        animation-delay: 160ms;
    }

    .multi-fact-pill:nth-child(4) {
        animation-delay: 240ms;
    }

.multi-fact-pill__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--wag-rounded-full);
    /* Soft mint chip on the teal canvas — the icon reads as a
         small accent, not a heavy primary chip. The strong primary
         color was overpowering when there were no surrounding mint
         cards to balance it. */
    background: rgba(108, 193, 182, 0.22);
    color: var(--wag-color-primary-soft);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 2px;
}

    .multi-fact-pill__icon svg {
        width: 16px;
        height: 16px;
        display: block;
    }

.multi-fact-pill__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.multi-fact-pill__label {
    margin: 0;
    font-family: var(--wag-typography-label-md-font-family);
    font-size: var(--wag-typography-label-md-font-size);
    font-weight: 700;
    line-height: 1.2;
    /* Bold label is now WHITE because it sits directly on teal —
         the previous primary-teal color was unreadable without the
         mint card backdrop. */
    color: var(--wag-color-on-dark);
}

.multi-fact-pill__value {
    margin: 0;
    font-family: var(--wag-typography-body-sm-font-family);
    font-size: var(--wag-typography-body-sm-font-size);
    line-height: 1.35;
    color: var(--wag-color-on-dark);
    /* Slightly muted so the bold label stays the visual anchor
         of each row. Same opacity used in the score-reveal eyebrow
         and other "supporting copy on dark" patterns. */
    opacity: 0.78;
}

/* Mobile fine-tuning — tighter row padding to keep the block
       inside step 5's hero envelope on iPhone SE / 13 mini sized
       viewports. Description is clamped to 2 lines so a row never
       exceeds ~62px (label + 2-line desc) which keeps the 4-row
       stack at ~248px and the full exterior under ~340px. */
@media (max-width: 480px) {
    .multi-fact-pill {
        padding: 6px 0;
    }

    .multi-fact-pill__label {
        font-size: 13.5px;
    }

    .multi-fact-pill__value {
        font-size: 13px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ============ Recipe A — competitor-compare ============
       Page surface: --wag-color-primary (deeper teal #05727a).
       Original Reference recipe used a vertical bar-pair comparing
       weight loss outcomes; this ESA variant replaces the
       bar visualization with a 4-row spec-sheet table that
       stacks four wins (speed, rush fee, clinician licensure,
       FHA compliance) into one comparison surface. The cream
       tab card structure and warm-tan inset callout strip are
       preserved unchanged from the Reference source so the recipe
       still renders pixel-consistent below the chart line.

       Pixel evidence (mobile 07-competitor-compare.png) is
       still the source for the cream/teal/coral split bands
       and the warm-tan inset callout color
       (--wag-color-surface-warm-tan / #d3c9b4) per DESIGN.md
       Components § competitor-compare. The teal in the table
       header tint band approximates the bar-fill teal that
       used to sit in this region of the layout. */

/* Spec-sheet feature table.
       Replaces an earlier horizontal bar chart treatment. The
       bar chart only encoded one dimension (delivery time);
       this table stacks four wins on top of each other —
       speed, rush fee, clinician licensure, FHA compliance —
       so the "us vs them" comparison reads as a sustained
       advantage across multiple axes rather than a single
       fact.

       Layout structure (this is the load-bearing trick): the
       table itself is the grid, NOT each row. Promoting the
       table to a 3-column grid and giving every row's
       children `display: contents` lets all rows share one
       set of column tracks — so the US column is exactly the
       same width whether the row contains "4 hrs" (numeric),
       "$0" (numeric), or "✓" (single glyph). With per-row
       grids, each row's `auto` columns sized to that row's
       widest cell, and the US/THEM eyebrows in the header
       couldn't line up over the rows below.

       Column tracks:
         1. minmax(140px, max-content) → feature label.
            Tightened from `minmax(150px, 1fr)` to a
            content-driven sizing because the label column
            had visible trailing whitespace to the right of
            short labels ("Rush fee", "Delivery time"). The
            140px floor keeps "State-licensed clinician"
            on a single line; max-content lets the column
            shrink to its widest label and donate the rest
            to column 2.
         2. minmax(120px, 1fr) → US column. Bumped from
            `minmax(96px, max-content)` so the brand logo
            has room to render at a legible size. The `1fr`
            makes this column absorb whatever surplus
            width the table has after columns 1 and 3 have
            claimed their content widths — so when the
            label column donates space, US gets it.
         3. minmax(96px, max-content) → THEM column.
            Unchanged: still sized to the muted values
            ("1–4 days", "+$50–$100") rendered nowrap.

       We use column-gap: 0 (no inter-column gap) on purpose
       so the header's coral US tint reads as one continuous
       vertical band aligned with the coral values below it. */
.v4-spec {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background: rgba(246, 244, 238, 0.05);
    border-radius: var(--wag-rounded-md);
    overflow: hidden;
    border: 1px solid rgba(246, 244, 238, 0.12);
    display: grid;
    grid-template-columns: minmax(170px, max-content) minmax(120px, 1fr) minmax(96px, max-content);
    column-gap: 0;
}
/* `display: contents` on the row containers lets their
       children participate as direct grid items of `.v4-spec`,
       so all rows share the same column tracks. The row
       container itself contributes nothing to layout — its
       semantic grouping is preserved for screen readers but
       it has no visual role. */
.v4-spec__header,
.v4-spec__row {
    display: contents;
}
    /* Cells own their own padding and dividers since the row
       container is layout-invisible. Vertical `md` for room
       around the bumped value type; horizontal `sm` so the
       label column has room to render long labels on a
       single line. Edge cells get extra `md` of horizontal
       padding to maintain card insets. */
    .v4-spec__header > *,
    .v4-spec__row > * {
        padding: var(--wag-spacing-md) var(--wag-spacing-sm);
        border-top: 1px solid rgba(246, 244, 238, 0.08);
        align-self: center;
    }

        .v4-spec__header > *:first-child,
        .v4-spec__row > *:first-child {
            padding-left: var(--wag-spacing-md);
        }

        .v4-spec__header > *:last-child,
        .v4-spec__row > *:last-child {
            padding-right: var(--wag-spacing-md);
        }
    /* Header cells: typography-only by default. The
       background tint that distinguishes the header from the
       data rows is applied selectively to the US and THEM
       cells (below) — NOT to the empty leftmost placeholder.
       Tinting all three header cells produced a "lighter
       strip going nowhere" above the Delivery time row,
       since the empty column 1 cell read as a horizontal
       band ending in mid-air. Tinting only the columns that
       carry header content keeps the visual band aligned
       with the Us/Them columns it actually labels.

       `align-self: stretch` (overriding the `center` set on
       all cells) forces the US and THEM header cells to fill
       the row's full vertical height. Without this, each cell
       sized to its own content (`align-self: center` from the
       base rule), and because the US cell's logo image is
       shorter than THEM's text glyphs, the US tint band
       rendered as a floating chip with darker teal slivers
       visible above and below it — instead of a continuous
       horizontal band aligned with THEM. */
    .v4-spec__header > * {
        padding-top: var(--wag-spacing-sm);
        padding-bottom: var(--wag-spacing-sm);
        border-top: none;
        align-self: stretch;
        font-family: var(--wag-typography-eyebrow-font-family);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--wag-color-on-dark);
    }
        /* Empty placeholder cell in column 1 of the header.
       Two pieces work together to dissolve the "lighter
       strip" that previously appeared above "Delivery time":
         1. The cell itself is transparent (no header tint).
         2. The first data row's column-1 divider is also
            removed (see selector below) — without that, the
            divider line still drew across column 1 even
            though the cell above had no tint, leaving a
            visible horizontal band defined by the card-top
            edge and the divider line.
       Result: column 1 of the header reads as a continuous
       extension of the card's interior surface, and the
       header tint band visibly starts at column 2. */
        .v4-spec__header > *:first-child {
            background: transparent;
            border-top: none;
        }

    .v4-spec__header + .v4-spec__row > *:first-child {
        border-top: none;
    }
/* US/THEM column flags. Both header cells use flexbox to
       center their content within the (now stretched) cell
       box — see the `align-self: stretch` note above. Flex
       centering keeps text content (THEM) and image content
       (US logo) both centered identically within their
       respective tinted bands, so the two cells read as a
       single continuous header strip with content
       perfectly aligned to a shared horizontal centerline. */
.v4-spec__header-them,
.v4-spec__header-us {
    background: rgba(246, 244, 238, 0.08);
    font-weight: 800;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v4-spec__header-us {
    color: var(--wag-color-accent-coral);
    /* `line-height: 1` is a safety net: without it, the
         flex container would still inherit the inherited
         `line-height` from `.v4-spec__header > *`, which can
         introduce a tiny vertical offset when the container
         holds an <img> (which has no line-box of its own)
         next to the inherited line-height baseline. */
    line-height: 1;
}

.v4-spec__header-us-mark {
    /* Full logo (heart + "Waggy" wordmark).
         Width-driven sizing so the wordmark stays legible
         no matter what the column claims. `width: 90%` of
         the cell leaves a small consistent gutter on either
         side of the logo so it doesn't visually touch the
         column borders. The 120px hard cap matches the US
         column's min-width — we don't want the logo
         outgrowing its column when 1fr donates surplus
         width on tablet/desktop. Height auto-scales by the
         logo's intrinsic ~2.78:1 aspect ratio. */
    display: block;
    width: 90%;
    max-width: 120px;
    height: auto;
}

.v4-spec__header-them {
    /* Pulled back from 15px → 13px (and opacity 0.6 → 0.5)
         so THEM reads as a quieter, almost-footnote label —
         present enough to do its job, recessive enough that
         US clearly dominates the header band. */
    font-size: 13px;
    letter-spacing: 0.06em;
    opacity: 0.5;
}

.v4-spec__feature {
    margin: 0;
    font-family: var(--wag-typography-body-md-font-family);
    font-size: var(--wag-typography-body-md-font-size);
    font-weight: 600;
    line-height: 1.25;
    color: var(--wag-color-on-dark);
}

.v4-spec__cell {
    margin: 0;
    text-align: center;
    font-family: var(--wag-typography-display-md-font-family);
    /* 20px is the size that survives the kit's narrowest
         interstitial viewport (~360px content area) without
         pushing the value columns wide enough to force
         multi-line feature labels. Tested 22px first; it
         broke single-line labels for "State-licensed
         clinician" and "FHA-compliant letter". */
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--wag-color-on-dark);
    letter-spacing: -0.01em;
    /* The en-dash inside "1–4 days" and "+$50–$100" is a
         soft-wrap opportunity by default; nowrap forces these
         strings to render as atomic units. */
    white-space: nowrap;
}

.v4-spec__cell--us {
    color: var(--wag-color-accent-coral);
}

.v4-spec__cell--them {
    opacity: 0.65;
}
/* The checkmark glyph reads small at the table's base
       value font-size; this modifier scales it up to match
       the visual weight of a numeric value in the same
       column ("4 hrs", "$0"). */
.v4-spec__cell--check {
    font-size: 28px;
    line-height: 1;
}

/* ---- Mobile fit (≤ 560px viewports) ----
       The base grid declares minimum track widths of
       170 + 120 + 96 = 386px, plus cell padding. The card
       holding the table is `width: min(480px, 92%)` on
       .recipe-a-cream__exterior, so:
         - On a 360px viewport the card is ~331px wide.
         - On a 430px viewport (iPhone Pro Max) it's ~396px.
         - The card only reaches the 386px+padding the grid
           needs once the viewport is wide enough for the card
           to hit its 480px cap — roughly ≥ 522px.
       Anywhere below that, the THEM column overflows past the
       card's right edge and — because .v4-spec uses
       `overflow: hidden` — the muted strings ("1–4 days",
       "+$50–$100", "Sometimes") get visibly clipped.

       Breakpoint set at 560px (slightly above the 522px
       threshold) so the mobile rules engage on every phone
       and small tablet portrait width without any guesswork
       at the boundary.

       This block does four small, conservative things to make
       the table fit without changing its structure:
         1. Loosen the column min-widths so the grid can shrink
            to ~262px of track width.
         2. Tighten edge padding from `md` to `sm` to recover a
            few more pixels per side.
         3. Drop the value-cell font-size from 20px → 17px so
            the widest atom ("+$50–$100") still fits in ~72px
            of THEM column with `white-space: nowrap` preserved.
         4. Allow the THEM cell to wrap as a safety net for
            any future copy longer than today's strings — the
            current values still render single-line at 17px. */
@media (max-width: 560px) {
    .v4-spec {
        grid-template-columns: minmax(110px, max-content) minmax(80px, 1fr) minmax(72px, max-content);
    }

    .v4-spec__header > *:first-child,
    .v4-spec__row > *:first-child {
        padding-left: var(--wag-spacing-sm);
    }

    .v4-spec__header > *:last-child,
    .v4-spec__row > *:last-child {
        padding-right: var(--wag-spacing-sm);
    }

    .v4-spec__cell {
        font-size: 17px;
    }

    .v4-spec__cell--check {
        font-size: 24px;
    }

    .v4-spec__cell--them {
        white-space: normal;
    }

    /* ---- Mobile: tighten + align row dividers ----
         Two issues this block fixes on phones (≤ 560px):

         1. Divider misalignment between adjacent cells in the same
            row. The base rules paint border-top per cell (each cell
            owns its own divider) and use `align-self: center`. When
            the feature column wraps to 2 lines but the value cells
            stay 1 line, each cell vertically centers its own padding
            box inside the grid row, so each cell's border-top lands
            at a different y-coordinate. Result: the line above
            "State-licensed clinician" steps down across columns.
            Fix: stretch cells to fill the row track edge-to-edge
            so all three top borders land on the row's true boundary
            and read as one continuous line.

         2. Excess vertical space. Base padding is `md` (16px) top
            and bottom on every cell. With 4 data rows that's 128px
            of just padding. Tighten to `sm` (8px) on phones to
            shrink the table's overall height without sacrificing
            readability — the value type still has room to breathe
            because the cell's `display: flex; align-items: center`
            keeps any single-line value vertically centered against
            multi-line features. */
    .v4-spec__header > *,
    .v4-spec__row > * {
        padding-top: var(--wag-spacing-sm);
        padding-bottom: var(--wag-spacing-sm);
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* The feature column reads left-aligned, not centered, since
         it's a label rather than a value. Also dialed DOWN from the
         global body-md mobile size (18px) since the feature column
         only gets ~110px of width on phones — at 18px, two-word
         labels like "State-licensed clinician" and "FHA-compliant
         letter" wrap to 3 lines and push the table taller than the
         viewport on a 320 iPhone SE. 14px / 18px lh reads as a
         tight but legible label tier (matches Reference's eyebrow
         labels on their comparison table) and brings those long
         features down to 2 lines maximum. */
    .v4-spec__feature {
        justify-content: flex-start;
        text-align: left;
        font-size: 14px;
        line-height: 1.25;
    }
    /* The US/THEM header cells already use flex centering; just
         re-establish the same when our stretch rule overrides. */
    .v4-spec__header-us,
    .v4-spec__header-them {
        justify-content: center;
    }
}

/* Extra-narrow phones (≤ 360px) — iPhone SE 1st gen, older
       Android. Squeeze the feature label one more tier so even the
       longest labels stay on 2 lines. Value font also drops a touch
       so columns stay in proportion. */
@media (max-width: 360px) {
    .v4-spec__feature {
        font-size: 13px;
        line-height: 1.2;
    }

    .v4-spec__cell {
        font-size: 16px;
    }

    .v4-spec__cell--check {
        font-size: 22px;
    }

    .v4-spec__header > *:first-child,
    .v4-spec__row > *:first-child {
        padding-left: var(--wag-spacing-xs);
    }

    .v4-spec__header > *:last-child,
    .v4-spec__row > *:last-child {
        padding-right: var(--wag-spacing-xs);
    }
}

/* Inset callout strip inside the cream tab card. Warm-tan band
       holding a coral diamond + body line, sitting just above the CTA. */
.competitor-compare__inset-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--wag-spacing-sm);
    background: var(--wag-color-surface-warm-tan);
    color: var(--wag-color-ink);
    border-radius: var(--wag-rounded-sm);
    padding: var(--wag-spacing-md);
    margin: 0 0 var(--wag-spacing-lg);
}

    .competitor-compare__inset-callout .coral-diamond {
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        margin-top: 4px;
        color: var(--wag-color-accent-coral);
    }

    .competitor-compare__inset-callout p {
        margin: 0;
        font-family: var(--wag-typography-body-sm-font-family);
        font-size: var(--wag-typography-body-sm-font-size);
        line-height: var(--wag-typography-body-sm-line-height);
        color: var(--wag-color-ink);
    }

/* ============ Recipe A — pre-quiz ============
       Page surface: --wag-color-primary-deep (teal #0d6e75).
       Pixel evidence (mobile 10-pre-quiz.png):
         - Top 30% band: 20.7% #ffffff (logomark petals) + ~30% teal
           tones → six-petal logomark sits on teal.
         - y_30_50: 56.0% cream → cream tab card.
         - y_50_75: 80.0% cream + 7.9% coral CTA.
         - bottom 25%: 85.1% cream + 14.2% coral.
       Original Reference recipe used a 1:1 logomark petal logomark
       in this slot. ESA variant replaces it with a 16:9 editorial
       illustration of a paw-stamp landing on an ESA letter — the
       narrative composition (paper + stamp mid-descent + impact
       burst) needs horizontal runway, so a 1:1 crop would have
       compressed the motion out of the scene. Wider asset, wider
       slot. */

/* Pre-quiz emblem container: tighten vertical placement so the
       illustration anchors closer to the chrome row above and the
       cream card below (matches Reference's compact 10-pre-quiz desktop
       layout, where the logomark sits ~immediately under the back
       arrow with the cream card flush below it).

       Override the shared .recipe-a-cream__exterior margins on this
       recipe specifically: zero top margin so the emblem starts
       just under the chrome row, and a smaller bottom margin
       (`spacing-sm` = 8px) so the cream card sits close beneath the
       illustration. Other cream-tab recipes (multi-fact, competitor-
       compare) keep the larger gap because their exterior block
       contains a headline + grid that needs more breathing room. */
.recipe-a-cream .recipe-a-cream__exterior--pre-quiz {
    margin-top: 0;
    margin-bottom: var(--wag-spacing-sm);
}

.pre-quiz__emblem {
    /* Sized to roughly match the visual weight of Reference's original
         180px logomark logomark on desktop (10-pre-quiz.png), but
         scaled up to account for our wider 16:9 aspect ratio (the
         ESA illustration is a composed scene with paper + stamp +
         impact burst, which needs more horizontal canvas than a
         centered logo). 460px on wide viewports, capped at 95% on
         narrow ones so it never crowds the cream card edge. */
    display: block;
    width: min(460px, 95%);
    height: auto;
    /* Image ships at 1024×571 (~16:9 with a tiny vertical
         crop). Declaring the aspect-ratio on the box prevents
         layout shift between markup parse and image decode —
         the slot reserves the right amount of vertical space
         from the moment the page first renders. */
    aspect-ratio: 1024 / 571;
    margin-left: auto;
    margin-right: auto;
}

/* ============ Recipe B — thanks-for-questions ============
       Page surface: --wag-color-navy-deep (#1d3a44).
       Pixel evidence (mobile 09-thanks-for-questions.png):
         - All four bands dominated by navy tones (#1f3942–#243e47;
           the variation is JPEG quantization on a single fill).
         - bottom 25%: 23.1% coral (CTA) + ~50% navy.
       Per skills/interstitial.md § Recipe B — thanks: centered
       serif headline with the second line in a mint-tinted color
       (--wag-color-surface-mint), three icon-and-text rows in
       cream-on-navy, coral CTA, small caption note below. No card. */

.recipe-b--thanks .thanks-headline {
    margin: var(--wag-spacing-md) auto var(--wag-spacing-xl);
    max-width: 22ch;
    text-align: center;
    font-family: var(--wag-typography-display-md-font-family);
    font-size: var(--wag-typography-display-md-font-size);
    font-weight: var(--wag-typography-display-md-font-weight);
    line-height: var(--wag-typography-display-md-line-height);
    letter-spacing: var(--wag-typography-display-md-letter-spacing);
    color: var(--wag-color-on-dark);
}

.recipe-b--thanks .thanks-headline__mint {
    display: block;
    color: var(--wag-color-surface-mint);
}

.recipe-b--thanks .thanks-rows {
    display: flex;
    flex-direction: column;
    gap: var(--wag-spacing-md);
    margin: 0 auto var(--wag-spacing-xl);
    max-width: 360px;
}

.thanks-row {
    display: flex;
    align-items: flex-start;
    gap: var(--wag-spacing-md);
    color: var(--wag-color-on-dark);
}

.thanks-row__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--wag-rounded-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wag-color-surface-mint);
    color: var(--wag-color-primary-deep);
}

    .thanks-row__icon svg {
        width: 16px;
        height: 16px;
        display: block;
    }

.thanks-row__text {
    margin: 0;
    font-family: var(--wag-typography-body-md-font-family);
    font-size: var(--wag-typography-body-md-font-size);
    line-height: var(--wag-typography-body-md-line-height);
    color: var(--wag-color-on-dark);
}

    .thanks-row__text strong {
        display: block;
        font-family: var(--wag-typography-label-lg-font-family);
        font-size: var(--wag-typography-label-lg-font-size);
        font-weight: var(--wag-typography-label-lg-font-weight);
        line-height: var(--wag-typography-label-lg-line-height);
        margin-bottom: var(--wag-spacing-xs);
    }

.recipe-b--thanks .thanks-caption {
    margin: var(--wag-spacing-md) auto 0;
    max-width: 32ch;
    text-align: center;
    font-family: var(--wag-typography-caption-font-family);
    font-size: var(--wag-typography-caption-font-size);
    line-height: var(--wag-typography-caption-line-height);
    color: var(--wag-color-on-dark);
    opacity: 0.8;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wag-card--dark-tab,
    .wag-card--cream-tab,
    .speech-bubble-annotation,
    .testimonial-quote-pane,
    .recipe-c--dr-trust .dr-content-region,
    .multi-fact-pill {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .speech-bubble-annotation {
        transform: translate(-50%, -100%);
    }
}

/* ------------------------------------------------------------
       Font-family overrides — ALL viewports
       The generated wag-tokens.css names "Source Serif 4" / "Inter"
       but doesn't actually load them, so previously every page silently
       fell back to Georgia + system sans. Switch the family chain to
       Newsreader (closest free analogue to Reference's Untitled Serif)
       and ensure Inter is the body sans. The actual @font-face files
       are loaded via <link rel="stylesheet"> from Google Fonts in
       each page <head>.
       ------------------------------------------------------------ */
:root {
    --wag-typography-display-lg-font-family: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
    --wag-typography-display-md-font-family: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
    --wag-typography-body-md-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wag-typography-body-lg-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wag-typography-body-sm-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wag-typography-label-md-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wag-typography-label-lg-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wag-typography-eyebrow-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wag-typography-caption-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.recipe-a-cream__exterior-headline,
.recipe-a-cream__interior-headline,
.recipe-b .floating-headline,
.reveal-headline,
.wag-card h1,
.wag-card h2,
.wag-page h1,
.wag-page h2 {
    font-family: var(--wag-typography-display-md-font-family);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 28;
}

/* ------------------------------------------------------------
       Mobile token overrides (≤480px)
       Matches Reference production on iPhone 12 Pro (390px) as captured
       from the reference site/survey/moreWeightLoss. The reference kit
       defaults use desktop-leaning sizes; on phones Reference ships
       flat, larger body/heading type with tighter gutters and
       smaller card insets so cream cards reach near-edge-to-edge.
       ------------------------------------------------------------ */
@media (max-width: 480px) {
    :root {
        --wag-spacing-gutter: 16px;
        --wag-component-card-dark-tab-padding: 16px;
        --wag-component-card-cream-tab-padding: 16px;
        --wag-component-callout-cream-padding: 16px;
        --wag-component-card-mint-padding: 16px;
        --wag-typography-display-md-font-size: 28px;
        --wag-typography-display-md-line-height: 36px;
        --wag-typography-body-lg-font-size: 18px;
        --wag-typography-body-lg-line-height: 26px;
        --wag-typography-body-md-font-size: 18px;
        --wag-typography-body-md-line-height: 26px;
        --wag-typography-body-sm-font-size: 16px;
        --wag-typography-body-sm-line-height: 24px;
        --wag-typography-label-lg-font-size: 18px;
        --wag-typography-label-lg-line-height: 26px;
    }

    .wag-card--dark-tab {
        padding-top: var(--wag-spacing-lg);
    }

    /* Cream-tab card body type — scoped DOWN from the global
         18px/26px body-md mobile override. The 18px size reads
         correctly for true paragraph copy, but inside cream-card
         bullet stacks (steps 3, 4, 8, 10, 15, 16, 44) it feels
         oversized: bullets are short list-style fragments that
         read better at a tighter measure. Mirrors the same rule
         in funnel/funnel.css so reference recipe pages pick it
         up too. */
    .wag-card--cream-tab,
    .wag-card--cream-tab > p,
    .wag-card--cream-tab .reveal-card-lead,
    .wag-card--cream-tab .cream-card-callout__item p,
    .wag-card--cream-tab .reveal-bullets p,
    .wag-card--cream-tab .quiz-intro-bullets p,
    .wag-card--cream-tab .clinical-rows p,
    /* Step 12 (Dr Trust testimonial) — long-form pull quote
         uses body-lg. Apply the same cream-card body treatment
         so it reads at the same measure. */
    .recipe-c--dr-trust .dr-content-region blockquote p {
        font-size: 15px;
        line-height: 22px;
    }
}