/* ---------------------------------------------------------------
       reference/checkout.html
       ESA-letter checkout reference, adapted from the reference checkout
       per the user's mobile evidence (assets/01-checkout-form-*.png).

       Architecture (two stacked tonal bands inside the centered column):
         HERO BAND (surface-warm-tan, hugs top of column)
           ├── Display headline (personalized)
           ├── Coral speech bubble with downward tail
           ├── Plan name + LMHP-issued subtitle
           ├── Money-back guarantee pill (mint disc + green check)
           ├── Coral-diamond bulleted summary
           ├── Pricing rows (lock + calendar markers connected by rail)
           ├── Add a promotion code link
           └── Legal footnote (still on the warm-tan band)
         FORM-CARD (surface-card-white, three numbered sections)
           ├── 1. CREATE YOUR ACCOUNT
           │     - human-info fields + folded SMS opt-in
           ├── 2. PET INFORMATION  (Pet 1, Pet 2 expanded by default)
           └── 3. PAYMENT INFORMATION
                 - credit-card brand tile + expanded card-data fields

       Section markers are all numbered (1, 2, 3) inside the
       success-green disc. There is NO REVIEW & START PLAN footer
       card and NO bottom warm-tan band — the page closes with the
       payment section.

       Token discipline: every styling value resolves to var(--wag-*)
       except the documented body fallback (white wallpaper outside
       the column, mirrors plan-select).
    --------------------------------------------------------------- */

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

    html, body {
      margin: 0;
      padding: 0;
      background: var(--wag-color-surface-card-white);
      color: var(--wag-color-ink);
      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);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* ---------- Funnel column ---------- */

    .wag-page {
      max-width: 560px;
      margin: 0 auto;
      /*background: var(--wag-color-surface-card-white);*/
      padding: var(--wag-spacing-md) var(--wag-spacing-gutter) 0;
    }

    /* ---------- Chrome ---------- */

    .wag-chrome {
      display: grid;
      grid-template-columns: 24px 1fr 24px;
      align-items: center;
      gap: var(--wag-spacing-sm);
      margin-bottom: var(--wag-spacing-md);
      min-height: 24px;
    }
    .wag-back {
      grid-column: 1;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      color: var(--wag-color-ink);
    }
    .wag-back svg { width: 18px; height: 16px; display: block; }

    /* ============================================================
       Section 1 — Hero (cream surface)
       ============================================================ */

    .hero-headline {
      margin: var(--wag-spacing-md) auto var(--wag-spacing-md);
      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-ink);
    }

    /* Coral speech bubble with downward tail (matches evidence: small
       6px-radius rounded rectangle, soft drop-shadow). */
    .hero-bubble-wrap {
      display: flex;
      justify-content: center;
      margin: 0 0 var(--wag-spacing-md);
    }
    .speech-bubble {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      background: var(--wag-color-accent-coral);
      color: var(--wag-component-button-primary-text-color);
      border-radius: var(--wag-rounded-sm);
      padding: 8px 16px 10px;
      box-shadow: 0 4px 12px rgba(251, 81, 59, 0.22);
    }
    .speech-bubble__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;
      opacity: 0.95;
    }
    .speech-bubble__value {
      font-family: var(--wag-typography-label-lg-font-family);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.15;
    }
    .speech-bubble__value strong {
      font-weight: 700;
      margin-right: 2px;
    }
    .speech-bubble__tail {
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 8px solid var(--wag-color-accent-coral);
    }

    /* Plan name + LMHP-issued subtitle */
    .hero-plan-name {
      margin: var(--wag-spacing-lg) 0 var(--wag-spacing-xs);
      text-align: center;
      font-family: var(--wag-typography-headline-md-font-family);
      font-size: var(--wag-typography-headline-md-font-size);
      font-weight: var(--wag-typography-headline-md-font-weight);
      line-height: var(--wag-typography-headline-md-line-height);
      color: var(--wag-color-ink);
    }
    .hero-plan-sub {
      margin: 0 0 var(--wag-spacing-sm);
      text-align: center;
      font-style: italic;
      font-family: var(--wag-typography-body-md-font-family);
      font-size: var(--wag-typography-body-md-font-size);
      color: var(--wag-component-body-text-secondary-text-color);
    }

    /* Money-back guarantee pill — mint disc with a green check icon
       BEFORE the all-caps eyebrow text. Mirrors the FSA pill recipe
       in Reference's checkout (skills/social-proof.md). */
    .hero-pill-wrap {
      display: flex;
      justify-content: center;
      margin: 0 0 var(--wag-spacing-lg);
    }
    .guarantee-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--wag-color-surface-mint);
      color: var(--wag-color-ink);
      border-radius: var(--wag-rounded-full);
      padding: 4px 12px 4px 6px;
      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);
      text-transform: uppercase;
    }
    .guarantee-pill__check {
      display: inline-grid;
      place-items: center;
      width: 16px;
      height: 16px;
      border-radius: var(--wag-rounded-full);
      background: var(--wag-color-success-green);
      color: var(--wag-color-surface-card-white);
    }
    .guarantee-pill__check svg { width: 10px; height: 10px; display: block; }

    /* Coral-diamond bulleted summary */
    .hero-summary-list {
      margin: 0 0 var(--wag-spacing-lg);
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--wag-spacing-xs);
    }
    .hero-summary-list li {
      display: grid;
      grid-template-columns: 12px 1fr;
      gap: var(--wag-spacing-sm);
      align-items: flex-start;
      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);
    }
    .hero-summary-list .coral-diamond {
      margin-top: 6px;
      width: 12px;
      height: 12px;
      color: var(--wag-color-accent-coral);
      flex-shrink: 0;
    }

    /* Pricing rows — lock + calendar markers connected by a vertical
       rail, exactly mirroring the next-steps stepper on plan-select. */
    .pricing-rows {
      margin: 0 0 var(--wag-spacing-md);
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .pricing-row {
      display: grid;
      grid-template-columns: 32px 1fr auto;
      gap: var(--wag-spacing-md);
      align-items: stretch;
      padding-bottom: var(--wag-spacing-md);
    }
    .pricing-row:last-child { padding-bottom: 0; }

    /* ============================================================
       Mobile reflow (≤520px).

       On phones the 3-column layout (marker | body | price) leaves
       the body column only ~210px wide — body copy like the Plus
       Membership description ends up wrapping to 6+ lines, eating
       vertical space and reading as cramped.

       Reflow strategy: drop to a 2-column grid (marker + body), and
       pull the price up to share the SAME row as the body's eyebrow
       title (e.g. "PLUS MEMBERSHIP $14.95/mo" on one line). Body
       copy then gets the full ~290px of horizontal width below and
       wraps to 3-4 lines instead of 6-7.

       Implementation: explicit row/column placement via
       `grid-row` / `grid-column`. We keep the marker in column 1
       spanning all rows; title goes in column 2 row 1 (alongside
       the price in the same row but right-aligned via a flex on
       the body __header). Body description + info-strip flow
       below in column 2 rows 2-3.
       ============================================================ */
    @media (max-width: 520px) {
      .pricing-row {
        /* 2-column grid: marker + body. Price is positioned inside
           the body's title row (see .pricing-row__body rule below)
           so it shares the line with <strong>. */
        grid-template-columns: 32px 1fr;
        column-gap: var(--wag-spacing-md);
      }
      /* Price is the third grid child in DOM order; on mobile we
         need it to live INSIDE the body column's first row instead
         of in its own column. Easiest path that keeps the JS/HTML
         untouched: place the body across both rows of column 2 via
         display:contents won't work (loses pricing-row__body as a
         layout box). Instead we use explicit grid positioning to
         put the price into row 1, column 2, then make the body the
         flow container for everything else by promoting title +
         price to a flexbox row inside the body. */
      .pricing-row__body {
        /* Body now owns columns 2 of the row */
        grid-column: 2;
        grid-row: 1;
      }
      .pricing-row__price {
        /* Lift the price into the same grid cell as the body title.
           We use grid-column / grid-row to overlap with the body,
           then z-index isn't needed since they don't overlap
           visually — the body's <strong> title gets a right-side
           padding to clear the price. The shared `line-height: 1.05`
           lives in the base `.pricing-row__price` rule above; here we
           just override align/justify to land the price in the title
           row. */
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        position: relative;
      }
      /* Reserve right padding on the title so a long price like
         "$14.95/mo" doesn't collide with multi-word titles like
         "Annual renewal". The price is roughly 80-90px wide at the
         label-lg size; 96px gives a 6-10px gap.

         margin-bottom is zeroed here so the title's grid-row 1 box
         is exactly the title's line-box (no trailing 4px). That lets
         `align-self: center` on the price line up its vertical center
         with the title's vertical center. The 4px breathing room
         between title and description gets re-added via the next
         <p>'s margin-top below. */
      .pricing-row__body > strong {
        margin-bottom: 0;
      }
      .pricing-row__body > strong + p {
        margin-top: 4px;
      }
      /* Shrink the info-strip lines slightly on mobile so the
         trust-builder pills don't dominate vertical space. */
      .pricing-row__body .info-strip {
        font-size: 12px;
        padding: 6px var(--wag-spacing-sm);
      }
    }

    .pricing-row__marker-col {
      position: relative;
      width: 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .pricing-row:not(:last-child) .pricing-row__marker-col::after {
      content: "";
      position: absolute;
      /* Rail begins right where the (translated) disc visually ends.
         Disc is 32px tall, shifted up 7.5px via transform on .pricing-marker
         so its vertical center aligns with the 17px-tall title line. Its
         visual bottom therefore sits at 32 - 7.5 = 24.5px. */
      top: 25px;
      bottom: -8px;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
      background: var(--wag-color-primary);
      opacity: 0.3;
    }

    /* The pricing marker is the base numbered-step-marker (mint disc
       with primary-deep glyph). The glyph changes per row. */
    .pricing-marker {
      width: 32px;
      height: 32px;
      border-radius: var(--wag-component-numbered-step-marker-rounded);
      background: var(--wag-component-numbered-step-marker-background-color);
      color: var(--wag-component-numbered-step-marker-text-color);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      /* Shift the disc up so its vertical midline aligns with the title's
         (14px × 1.2 = ~17px) line-box midline rather than sitting at the
         top of the marker column. (32 - 17) / 2 ≈ 7.5px. */
      transform: translateY(-7.5px);
    }
    .pricing-marker svg { width: 16px; height: 16px; display: block; }

    .pricing-row__body strong {
      display: block;
      font-family: var(--wag-typography-label-md-font-family);
      font-size: var(--wag-typography-label-md-font-size);
      font-weight: 700;
      letter-spacing: var(--wag-typography-eyebrow-letter-spacing);
      line-height: var(--wag-typography-label-md-line-height);
      color: var(--wag-color-primary);
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .pricing-row__body p {
      margin: 0 0 var(--wag-spacing-xs);
      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);
    }
    .pricing-row__body p.italic {
      font-style: italic;
      color: var(--wag-component-body-text-secondary-text-color);
    }
    /* Inline value parentheticals (e.g. "($125 value)") inside the
       membership row's body copy. Authored as <em>$X value</em> in
       checkout-plan-data; rendered as italic primary-teal so the
       value claim pops without competing with the main body text. */
    .pricing-row__body p em {
      font-style: italic;
      color: var(--wag-color-primary);
      font-weight: 600;
    }
    /* Info strip — neutral light-grey rounded bar that sits flush with
       the pricing-row body column (full-width across the body, not the
       full page). Matches Reference's "We'll email you a reminder before
       renewal." / "Cancel anytime." treatment: pale neutral background,
       centered ink text, no border, small padding.

       Background color is rgb(244, 244, 244) — Reference's exact neutral
       grey for these inline info chips. Intentionally hardcoded (not
       a `var(--wag-color-*)` token) because the existing surface ramp
       (warm-tan, pill-deselected, mint, etc.) doesn't include a true
       neutral pale-grey. When DESIGN.md gets a new
       `surface-neutral-pale` token, promote this to use it.

       TOKEN-DEBT: #f4f4f4 → should become
       `var(--wag-color-surface-neutral-pale)` after the design pipeline
       is regenerated with that token. */
    .pricing-row__body .info-strip {
      margin: var(--wag-spacing-xs) 0 0;
      padding: 8px var(--wag-spacing-sm);
      background: #f4f4f4;
      border-radius: var(--wag-rounded-sm);
      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);
      text-align: center;
    }
    .pricing-row__price {
      align-self: flex-start;
      font-family: var(--wag-typography-label-lg-font-family);
      font-size: var(--wag-typography-label-lg-font-size);
      font-weight: 700;
      color: var(--wag-color-ink);
      white-space: nowrap;
    }
    /* Struck-through "original price" appears to the left of the live
       price when checkout-plan-data sets dueToday.originalPrice (or
       annualRenewal.originalPrice). Inherits the parent .pricing-row__price
       weight (700) and font so the strike reads as the SAME font face
       and weight as the live price — just greyed and crossed. Only
       color + strike are different; everything else (family, size,
       weight) is identical. */
    .pricing-row__price-strike {
      display: inline-block;
      margin-right: 0;
      color: var(--wag-color-outline-strong);
      text-decoration: line-through;
      text-decoration-thickness: 1px;
    }

    /* ============================================================
       Inline prices inside the row title <strong>.

       The right-column `.pricing-row__price` cell has been retired in
       favor of an inline parenthesized price that sits to the right of
       the title text in the same line-box — e.g.
         <strong>Due today (<s>$199</s> $159)</strong>
       The wrapper inherits the title's font-family, size, and color
       (primary teal label-md, uppercased) so the parenthesized prices
       visually match "DUE TODAY" exactly, then locally drops the
       uppercase transform (numbers shouldn't be cased) and the 700
       weight so the prices read as a regular-weight inline annotation
       rather than competing with the title for emphasis.
       ============================================================ */
    .pricing-row__title-prices {
      text-transform: none;
      font-weight: 400;
      letter-spacing: normal;
      white-space: nowrap;
    }
    .pricing-row__title-price {
      color: inherit;
      font-weight: 400;
    }
    .pricing-row__title-strike {
      color: var(--wag-color-outline-strong);
      text-decoration: line-through;
      text-decoration-thickness: 1px;
      font-weight: 400;
    }

    /* ============================================================
       Small-phone tightening (≤ 374px).

       At ≤374px the base mobile reflow above still leaves the title
       column too narrow to host both the title text AND the 96px-wide
       reserved price area on a single line. "PLUS MEMBERSHIP" (154px
       at 14px with the default 1.2px letter-spacing) and "ANNUAL
       RENEWAL" (148px) wrap to two lines, breaking the clean row
       rhythm.

       Fix has four parts that compound to free ~52px of usable text
       width per row:
         1. Shrink the marker column 32 → 24 and column-gap 16 → 8
            so the body column gets +16px of width.
         2. Drop title font 14 → 13 and tighten letter-spacing 1.2px
            → 0.3px (the title is still recognizably uppercase-tracked
            but ~22px narrower per row).
         3. Drop price font 16 → 14 so the widest price ($14.95/mo)
            shrinks from 83 → 75px, letting us trim the title's
            reserved padding-right 96 → 80.
         4. Hold line-heights so the title's line-box (13 × 1.292 =
            16.8px) still equals the price's (14 × 1.2 = 16.8px) —
            the vertical-midline-alignment trick still works.

       At 295px viewport: body column 215px → title text room
       215 − 80 = 135px → PLUS MEMBERSHIP needs 132px → 3px headroom.

       Lives AFTER the base `.pricing-row__body strong` /
       `.pricing-row__price` rules above so it wins the
       same-specificity cascade. */
    @media (max-width: 374px) {
      .pricing-row {
        grid-template-columns: 24px 1fr;
        column-gap: var(--wag-spacing-sm);
      }
      .pricing-row__marker-col {
        width: 24px;
      }
      .pricing-marker {
        width: 24px;
        height: 24px;
        transform: translateY(-4px);
      }
      .pricing-marker svg { width: 14px; height: 14px; }
      .pricing-row:not(:last-child) .pricing-row__marker-col::after {
        top: 21px;
      }
      .pricing-row__body > strong {
        font-size: 13px;
        line-height: 1.292;
        letter-spacing: 0.3px;
      }
    }

    /* ============================================================
       Savings strip — bordered row sitting directly above the
       Continue CTA. Mirrors Reference's "$150 in TOTAL SAVINGS!
       GLP1RXPLUS50 APPLIED" applied-promo row. Only renders when
       checkout.js computes a positive totalSavings.
       ============================================================ */
    .savings-strip {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: center;
      gap: 6px;
      margin: var(--wag-spacing-md) 0 var(--wag-spacing-sm);
      padding: 10px var(--wag-spacing-md);
      background: var(--wag-color-surface-card-white);
      border: 1px solid var(--wag-color-outline);
      border-radius: var(--wag-rounded-md);
      text-align: center;
    }
    .savings-strip__amount {
      font-family: var(--wag-typography-label-md-font-family);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: var(--wag-color-ink);
    }
    .savings-strip__label {
      font-family: var(--wag-typography-eyebrow-font-family);
      font-size: 11px;
      font-weight: var(--wag-typography-eyebrow-font-weight);
      letter-spacing: var(--wag-typography-eyebrow-letter-spacing);
      line-height: 1.4;
      text-transform: uppercase;
      color: var(--wag-color-primary);
    }

    /* ============================================================
       Downsell link row — sits directly under the Continue CTA.
       Two halves on one line: secondary-grey eyebrow on the left,
       coral underlined link on the right. Wraps to two stacked
       lines on narrow viewports.
       ============================================================ */
    .downsell-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: baseline;
      gap: var(--wag-spacing-sm);
      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);
    }
    .downsell-row__eyebrow {
      color: var(--wag-color-ink);
    }
    .downsell-row__link {
      color: var(--wag-color-accent-coral);
      text-decoration: underline;
      text-underline-offset: 2px;
      font-weight: 600;
    }
    .downsell-row__link:hover {
      text-decoration: none;
    }

    /* ============================================================
       Legal footnotes block — closes the active plan-summary
       section. Multiple small-grey paragraphs (matches Reference's
       "† Weight loss comparison… * Eligibility… Reference cannot
       guarantee…") followed by a single coral "See Safety
       Disclosures" link.
       ============================================================ */
    .legal-footnotes {
      margin: var(--wag-spacing-md) 0 var(--wag-spacing-lg);
    }
    .legal-footnotes p {
      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-component-body-text-secondary-text-color);
    }
    .legal-footnotes p:last-child {
      margin-bottom: 0;
    }
    .legal-footnotes sup {
      font-size: 0.75em;
      line-height: 0;
    }
    .legal-link {
      color: var(--wag-color-primary);
      text-decoration: underline;
      text-underline-offset: 2px;
      font-weight: 600;
    }
    .legal-link:hover {
      text-decoration: none;
    }

    /* ============================================================
       Section stack — stepper of numbered sections (1/2/3/4).
       ============================================================
       Pre-expansion layout:
         Section 1 (plan summary) is `.plan-summary` above this
         stack and renders inline on the cream column.

         Sections 2-4 render as a single full-bleed warm-tan band
         containing collapsed pill rows (one per section), each
         with a grey-disc number marker + the section title.

       As sections become active (post-Continue), the controller
       will swap `.form-section--collapsed` → expanded state and
       move the corresponding template (#tpl-account-pet, #tpl-payment)
       into the section body. The expanded layout uses the same
       header markup with a green-disc marker instead of grey.

       Token discipline: every color resolves to var(--wag-*). The
       grey-disc locked marker uses outline tokens (not a custom
       greyscale) so it stays on-brand. */

    .section-stack {
      display: flex;
      flex-direction: column;
      margin-top: var(--wag-spacing-lg);
    }

    /* The collapsed stack is wrapped in a full-bleed light-cream band
       (negative-margin trick to break out of the centered .wag-page
       column and reach the viewport edges) so the three pill rows sit
       on a single cohesive surface, exactly like Reference's "2 CREATE YOUR
       ACCOUNT / 3 PAYMENT / 4 REVIEW" footer.

       Color: `--wag-color-surface` (#f6f4ee) is the pale cream Reference
       uses for this band, not the darker `--wag-color-surface-warm-tan`
       — that warm-tan token is reserved for accent panels (e.g. plan-
       select cream cards). The band reads as a quiet "queued steps"
       surface that contrasts gently with the white plan-summary column
       above it.

       Padding: generous vertical breathing room so each pill row is
       framed by surface space (Reference uses ~24px top/bottom + 16px
       between rows), and the horizontal gutter matches the .wag-page
       gutter so the pill rows align with the body column above. */
    .section-stack--collapsed {
      margin: var(--wag-spacing-lg) calc(50% - 50vw) 0;
      padding: var(--wag-spacing-lg) max(var(--wag-spacing-gutter), calc(50vw - 280px)) var(--wag-spacing-xxl);
      background: var(--wag-color-surface);
      gap: var(--wag-spacing-sm);
    }

    /* Section header pattern: marker on the left + ALL-CAPS title in
       eyebrow type, primary teal. */

    .form-section {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
    }
    .form-section__header {
      display: flex;
      align-items: center;
      gap: var(--wag-spacing-sm);
      margin: 0;
    }
    /* Section header — UPPERCASE eyebrow vocabulary preserved
       (matches the page's eyebrow grammar), but bumped from the
       12px token to 14px / weight 700 so the section title is
       visibly LARGER than the 14px / weight 600 field labels
       nested inside it. Without this bump, "Account & pet
       information" was rendering SMALLER than "First name",
       breaking the visual hierarchy on mobile.

       Selector specificity note: written as
       `.wag-page h2.form-section__title` (specificity 0,2,1) so
       this rule beats funnel.css's `.wag-page h2 { font-family:
       Newsreader; }` blanket rule (specificity 0,1,1) which is
       intended for the interstitial display headlines, NOT the
       checkout's eyebrow-grammar section labels. Without the
       higher-specificity selector here, the checkout section
       title would inherit Newsreader serif and lose its
       Inter/eyebrow consistency with the rest of the form (since
       funnel.css loads AFTER checkout.css and would win the tie). */
    .wag-page h2.form-section__title,
    .wag-page .form-section--collapsed .form-section__title,
    .form-section__title {
      margin: 0;
      font-family: var(--wag-typography-eyebrow-font-family);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: var(--wag-typography-eyebrow-letter-spacing);
      line-height: var(--wag-typography-eyebrow-line-height);
      color: var(--wag-color-primary);
      text-transform: uppercase;
    }

    /* Collapsed pill row — single white-card row with rounded corners,
       hosting just the header (marker + title). No body content,
       no expand chevron in the pre-expansion design (matches Reference).
       Padding is generous (16px vertical) so each row reads as a
       substantial "step waiting to be opened" rather than a tight
       label. Hairline border + a very soft shadow give the card a
       quiet lift off the cream band beneath it. */
    .form-section--collapsed {
      background: var(--wag-color-surface-card-white);
      border: 1px solid var(--wag-color-outline);
      border-radius: var(--wag-rounded-md);
      padding: 14px var(--wag-spacing-md);
      box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
    }
    .form-section--collapsed .form-section__title {
      color: var(--wag-component-body-text-secondary-text-color);
      /* Inherits the bumped 14px / 700 from `.form-section__title`. */
    }

    /* Active (expanded) section card — same white pill chrome as the
       collapsed state but with vertical padding that frames the
       expanded form body inside. The header (marker + title) sits at
       the top; the form fields, sub-eyebrow, SMS consent, and
       Continue CTA all live below it. Title color and weight match
       collapsed so the marker styling is the only "active vs.
       queued" signal needed (no green-marker active state — matches
       Reference's quiet stepper). */
    .form-section--active {
      background: var(--wag-color-surface-card-white);
      border: 1px solid var(--wag-color-outline);
      border-radius: var(--wag-rounded-md);
      padding: var(--wag-spacing-md) var(--wag-spacing-md) var(--wag-spacing-md);
      box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
    }
    .form-section--active .form-section__header {
      margin-bottom: var(--wag-spacing-md);
      padding-bottom: var(--wag-spacing-md);
      border-bottom: 1px solid var(--wag-color-outline);
    }
    .form-section--active .form-section__title {
      color: var(--wag-component-body-text-secondary-text-color);
      /* Inherits the bumped 14px / 700 from `.form-section__title`. */
    }

    /* Section marker — disc-shaped step marker.

       Active state  (`.marker-numbered`): solid success-green disc
       with white digit (used on section 1 in the pre-expansion view).

       Locked state  (`.marker-numbered--locked`): outlined ring —
       white interior, soft grey 1.5px border, mid-grey digit. Matches
       Reference's "2 / 3 / 4" treatment where the queued steps read as
       quieter empty placeholders, not solid filled discs. */
    .marker-numbered {
      width: 24px;
      height: 24px;
      border-radius: var(--wag-rounded-full);
      background: var(--wag-color-success-green);
      color: var(--wag-color-surface-card-white);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      font-family: var(--wag-typography-label-md-font-family);
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
    }
    /* Locked-marker fill is the same cream tone as the surrounding
       collapsed-band surface (`--wag-color-surface`) so the circle
       reads as a soft cream disc inside the white pill — no border
       ring. Number color matches the pill title (slate-grey
       body-text-secondary) so the marker reads as a unified quiet
       step indicator. Matches Reference's flat cream-disc + grey-digit
       treatment for queued steps. */
    .marker-numbered--locked {
      background: var(--wag-color-surface);
      color: var(--wag-component-body-text-secondary-text-color);
      border: 0;
    }

    /* ============================================================
       Form fields — white-ground, full hairline-border inputs
       (input-text tokens). Matches Reference's bordered-field evidence.
       ============================================================ */

    .field-group {
      display: flex;
      flex-direction: column;
      gap: var(--wag-spacing-md);
    }

    /* Vertical stack hosting multiple sub-groups inside one section
       (e.g. the account fields + a "Pet information" sub-eyebrow +
       the pet block(s) + SMS consent + Continue, all inside Section 2).
       Spacing between adjacent children is generous so the sub-groups
       read as distinct visual blocks. */
    .field-group-stack {
      display: flex;
      flex-direction: column;
      gap: var(--wag-spacing-lg);
    }

    /* Sub-eyebrow inside an active section — used to label sub-groups
       like "Pet information" without introducing a second numbered
       step marker. Same eyebrow type as the section title but a
       smaller size to read as subordinate. */
    .field-group-eyebrow {
      margin: 0;
      /* Sub-section eyebrow (e.g. "Pet information" inside the
         Account & Pet section). Sits one tier below the section
         title in the hierarchy: smaller than the 14px title but
         still LARGER than the 14px field labels would imply for
         a "sub" element, because the previous 11px reading was
         smaller than the field labels and broke the parent/child
         visual relationship. 13px / 700 keeps it scannable on
         mobile while still clearly stepping down from the title. */
      font-family: var(--wag-typography-eyebrow-font-family);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: var(--wag-typography-eyebrow-letter-spacing);
      line-height: 1.4;
      color: var(--wag-component-body-text-secondary-text-color);
      text-transform: uppercase;
    }

    /* SMS consent disclosure line — small body-secondary text with an
       inline coral-deep underlined link. Sits directly above the
       optional opt-in checkbox; no separate box, no top divider. */
    .sms-consent {
      margin: 0;
      font-family: var(--wag-typography-body-sm-font-family);
      font-size: 13px;
      line-height: 1.5;
      color: var(--wag-component-body-text-secondary-text-color);
    }
    .sms-consent__link {
      color: var(--wag-color-primary);
      text-decoration: underline;
      text-underline-offset: 2px;
      font-weight: 600;
    }
    .sms-consent__link:hover {
      text-decoration: none;
    }

    /* SMS marketing opt-in row — checkbox + small body text on a
       single baseline. Checkbox sits flush-top with the first text
       line; the label text wraps under it. */
    .sms-opt-in {
      display: flex;
      align-items: flex-start;
      gap: var(--wag-spacing-sm);
      cursor: pointer;
      font-family: var(--wag-typography-body-sm-font-family);
      font-size: 13px;
      line-height: 1.5;
      color: var(--wag-component-body-text-secondary-text-color);
    }
    .sms-opt-in input[type="checkbox"] {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      margin-top: 2px;
      accent-color: var(--wag-color-primary);
      cursor: pointer;
    }
    .sms-opt-in span {
      flex: 1;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .field > span {
      font-family: var(--wag-typography-body-sm-font-family);
      font-size: var(--wag-typography-body-sm-font-size);
      font-weight: 600;
      color: var(--wag-color-ink);
    }
    .field input,
    .field select {
      width: 100%;
      box-sizing: border-box;
      background: var(--wag-component-input-text-background-color);
      color: var(--wag-component-input-text-text-color);
      border: 1px solid var(--wag-color-outline);
      border-radius: var(--wag-component-input-text-rounded);
      padding: var(--wag-component-input-text-padding);
      font-family: var(--wag-component-input-text-font-family);
      font-size: var(--wag-component-input-text-font-size);
      font-weight: var(--wag-component-input-text-font-weight);
      line-height: var(--wag-component-input-text-line-height);
      transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
      appearance: none;
      -webkit-appearance: none;
    }
    .field input:focus,
    .field select:focus {
      outline: none;
      border-color: var(--wag-color-primary);
      box-shadow: 0 0 0 1px var(--wag-color-primary);
    }

    /* Select chevron — render manually since we killed appearance */
    .field select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23191717' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--wag-spacing-md);
    }
    @media (max-width: 500px) {
      .field-row { grid-template-columns: 1fr; }
    }

    /* ============================================================
       Card-number field — the 4 brand-logo SVGs (Visa / Mastercard /
       Amex / Discover) live INSIDE the input, anchored to the
       right edge and vertically centered. Matches Reference / Stripe
       Elements pattern.

       Coexistence with password-manager extensions:
         Extensions like LastPass, 1Password, and Dashlane inject
         their action icon at the input's inner-right edge, offset
         inward by reading the input's `padding-right`. By giving
         the input a generous `padding-right` (~152px on desktop)
         the extension's icon lands JUST LEFT of our brand logos
         instead of underneath them — exactly the layout in Reference's
         screenshot.

       Structure:
         .field.field-card
           > span (label)
           > .field-card__input-wrap (relative positioning shell)
             > input (with extra padding-right)
             > .card-brands (absolute, right-edge, pointer-events:none)
               > .card-brands__icon × 4
       ============================================================ */
    .field-card__input-wrap {
      position: relative;
      display: block;
    }
    .field-card__input-wrap input {
      /* Reserve the right-edge region for the brand-logo row.
         152px = 4 icons × ~32px (20px tall × 16:10 aspect ratio)
         + 3 gaps × 4px + 10px right-edge gutter + 10px buffer for
         extension icons to fit between cursor and logos. The buffer
         is what lets LastPass/1Password's icon visibly land to the
         LEFT of the brand marks instead of on top of them. */
      padding-right: 152px;
    }
    .card-brands {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 4px;
      /* pointer-events:none keeps the logo strip from intercepting
         clicks meant for the input or for any extension icon that
         renders nearby. */
      pointer-events: none;
    }
    .card-brands__icon {
      display: block;
      height: 20px;
      width: auto;
      /* Upstream flat-pack SVGs ship at 750×471 (16:10), which gives
         each icon a ~32px rendered width at 20px height. Hairline
         radius matches the upstream art's rounded corners. */
      border-radius: 3px;
    }
    /* On narrow viewports the icons shrink and the right-padding
       follows so the input still has room for a 16-digit number plus
       an extension icon. Discover is the first to drop if there's
       truly not enough room (least-common brand of the four). */
    @media (max-width: 420px) {
      .field-card__input-wrap input {
        padding-right: 124px;
      }
      .card-brands__icon {
        height: 18px;
      }
      .card-brands {
        gap: 3px;
      }
    }
    @media (max-width: 360px) {
      .field-card__input-wrap input {
        padding-right: 96px;
      }
      .card-brands__icon:nth-child(4) {
        display: none;
      }
    }

    /* ============================================================
       Pet blocks inside the expanded Section 2 card.

       Single-pet layout (default):
         The parent "PET INFORMATION" sub-eyebrow sits above the
         single pet's fields; no per-pet heading is rendered.

       Multi-pet layout (`.field-group-stack--multi-pet`):
         The parent "PET INFORMATION" eyebrow is hidden (the
         per-pet "PET ONE" / "PET TWO" headings already communicate
         the section). A hairline divider rule physically separates
         Pet One from Pet Two so the eye reads them as two distinct
         forms inside one section, not one long form.
       ============================================================ */
    .pet-block + .pet-block {
      margin-top: var(--wag-spacing-lg);
    }
    .pet-block__heading {
      margin: 0 0 var(--wag-spacing-md);
      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-component-body-text-secondary-text-color);
      text-transform: uppercase;
    }

    /* Multi-pet variant: drop the parent eyebrow, add a divider rule
       above the SECOND (and any subsequent) pet block. The divider
       sits on the same hairline-outline token used by the active
       section header to keep the visual vocabulary consistent. */
    .field-group-stack--multi-pet > .field-group-eyebrow {
      display: none;
    }
    .field-group-stack--multi-pet [data-bind="petBlocks"] .pet-block + .pet-block {
      margin-top: var(--wag-spacing-lg);
      padding-top: var(--wag-spacing-lg);
      border-top: 1px solid var(--wag-color-outline);
    }

    /* ============================================================
       Breed combobox — custom dropdown replacing the native breed
       text input. Renders a bordered text input with a chevron on
       the right and a slim suggestions panel below it.

       Behavior is controlled by checkout.js; this stylesheet only
       handles the visual shell + the dropdown panel positioning.

       Structure:
         .field.breed-combo
           > .breed-combo__label
           > .breed-combo__shell   (relative — anchors the panel)
             > .breed-combo__input (text input, role=combobox)
             > .breed-combo__caret (chevron)
             > .breed-combo__list  (absolute, role=listbox)
               > .breed-combo__option × N
               > .breed-combo__divider × 1-2
       ============================================================ */
    .breed-combo {
      /* Match field's flex-column layout so the label + shell stack
         the same way as standard .field labels. */
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .breed-combo__label > span {
      font-family: var(--wag-typography-body-sm-font-family);
      font-size: var(--wag-typography-body-sm-font-size);
      font-weight: 600;
      color: var(--wag-color-ink);
    }
    .breed-combo__shell {
      position: relative;
    }
    .breed-combo__input {
      /* Identical sizing/border treatment to plain .field input so
         the combobox visually belongs in the same form. Padding-right
         reserves room for the chevron icon. */
      width: 100%;
      box-sizing: border-box;
      background: var(--wag-component-input-text-background-color);
      color: var(--wag-component-input-text-text-color);
      border: 1px solid var(--wag-color-outline);
      border-radius: var(--wag-component-input-text-rounded);
      padding: var(--wag-component-input-text-padding);
      padding-right: 36px;
      font-family: var(--wag-component-input-text-font-family);
      font-size: var(--wag-component-input-text-font-size);
      font-weight: var(--wag-component-input-text-font-weight);
      line-height: var(--wag-component-input-text-line-height);
      transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
      appearance: none;
      -webkit-appearance: none;
    }
    .breed-combo__input::placeholder {
      color: var(--wag-component-body-text-secondary-text-color);
      opacity: 0.65;
    }
    .breed-combo__input:focus {
      outline: none;
      border-color: var(--wag-color-primary);
      box-shadow: 0 0 0 1px var(--wag-color-primary);
    }
    .breed-combo__caret {
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
      color: var(--wag-color-ink);
      pointer-events: none;
      display: grid;
      place-items: center;
      transition: transform 150ms ease-out;
    }
    /* Flip the chevron when the panel is open — `[aria-expanded]`
       on the sibling input is the source of truth, so we use the
       sibling selector against the caret. */
    .breed-combo__input[aria-expanded="true"] ~ .breed-combo__caret {
      transform: translateY(-50%) rotate(180deg);
    }
    .breed-combo__list {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      z-index: 20;
      margin: 0;
      padding: 6px 0;
      list-style: none;
      background: var(--wag-color-surface-card-white);
      border: 1px solid var(--wag-color-outline);
      border-radius: var(--wag-rounded-md);
      box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.18),
                  0 2px 4px -2px rgba(15, 23, 42, 0.08);
      max-height: 280px;
      overflow-y: auto;
      /* iOS smooth scroll inside the panel without breaking
         parent-page scroll containment. */
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .breed-combo__option {
      padding: 10px 16px;
      font-family: var(--wag-typography-body-md-font-family);
      font-size: var(--wag-typography-body-md-font-size);
      line-height: 1.35;
      color: var(--wag-color-ink);
      cursor: pointer;
      user-select: none;
    }
    .breed-combo__option:hover,
    .breed-combo__option.is-active {
      /* Cream highlight matches the section-stack band so the
         active row reads as "in-system" warmth, not a generic
         light-blue/grey hover. */
      background: var(--wag-color-surface);
    }
    .breed-combo__option--pinned {
      font-weight: 600;
      color: var(--wag-color-primary);
    }
    .breed-combo__divider {
      height: 1px;
      background: var(--wag-color-outline);
      margin: 4px 0;
      list-style: none;
    }
    .breed-combo__empty {
      padding: 10px 16px;
      font-family: var(--wag-typography-body-md-font-family);
      font-size: var(--wag-typography-body-md-font-size);
      line-height: 1.4;
      color: var(--wag-component-body-text-secondary-text-color);
      list-style: none;
    }
    .breed-combo__empty strong {
      color: var(--wag-color-primary);
      font-weight: 600;
    }

    /* ============================================================
       PAYMENT INFORMATION — credit-card only, full card-data form
       ============================================================ */

    /* Continue CTA — coral full-pill primary button. In the pre-
       expansion plan-summary view, sits between the savings strip
       and the downsell link / legal footnotes. Token-driven via
       button-primary. */
    .continue-cta {
      display: block;
      width: 100%;
      margin: var(--wag-spacing-md) 0 var(--wag-spacing-sm);
      padding: var(--wag-component-button-primary-padding);
      background: var(--wag-component-button-primary-background-color);
      color: var(--wag-component-button-primary-text-color);
      border: 0;
      border-radius: var(--wag-component-button-primary-rounded);
      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);
      cursor: pointer;
      transition: background-color 120ms ease-out;
    }
    .continue-cta:hover {
      background: var(--wag-component-button-primary-hover-background-color);
    }
    .continue-cta:focus-visible {
      outline: 2px solid var(--wag-color-primary);
      outline-offset: 2px;
    }

    /* ===================================================================
       LRP — Landlord Rejection Protection upsell
       ===================================================================
       Single inline addon card that sits between the Annual renewal
       pricing row and the savings strip. A "Recommended" fallback
       modal (Variant B: question-led, prose) fires once per session
       on Continue click if the user advances without checking the
       inline checkbox.

       Pricing math invariant: the $30 LRP price lives ONLY in this
       card's header. It does NOT roll into the dueToday pricing-row
       price or the savings-strip math (which stay equal to whatever
       the active plan defines). Billing-side rollup happens later in
       the order summary on the server — the checkout view treats
       LRP as a transparent line-item add.

       The "is-flashing" class is added briefly when the modal's
       "Add protection" action auto-checks the inline checkbox, so
       the user notices the card on page B activated the option on
       page A.
       =================================================================== */
    .lrp {
      margin: var(--wag-spacing-md) 0;
      padding: 14px 16px;
      border-radius: 12px;
      background: var(--wag-color-surface-card-white);
      border: 1px solid var(--wag-color-outline);
      transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
    }
    .lrp__head {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 4px;
    }
    /* Keep "Landlord Rejection Protection" on a single line across
       every supported viewport (iPhone SE / XR / 4 inclusive). The
       title claims the full row width via `flex-basis: 100%`, which
       forces the diamond+badge pair to wrap onto their own row above.
       `order: 2` then drops the title back below them visually, so
       the rendered stack reads:
           [♦] [Recommended]
           Landlord Rejection Protection
       The `nowrap` is the actual no-wrap guarantee — even at the
       narrowest supported 320px viewport (iPhone 4), the body has
       ~272px of usable width after the .lrp's 16px side padding ×2,
       which comfortably fits the 15px/700 title (~225px). */
    .lrp__title {
      margin: 0;
      flex: 0 0 100%;
      order: 2;
      font-family: var(--wag-typography-label-lg-font-family);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.25;
      color: var(--wag-color-ink);
      white-space: nowrap;
    }
    .lrp__diamond {
      flex-shrink: 0;
      width: 12px;
      height: 12px;
      color: var(--wag-color-accent-coral);
    }
    /* "Recommended" pill — replaces the coral +$30 price chip
       that used to live in the header. Reframes the card from
       transactional ("add this $30 thing") to advisory
       ("here's our recommended add-on"). The price itself
       moves into the body copy via .lrp__price so it reads as
       a soft callout instead of a hard price tag. */
    .lrp__badge {
      flex-shrink: 0;
      padding: 4px 10px;
      background: rgba(255, 92, 57, 0.10);
      border-radius: 999px;
      font-family: var(--wag-typography-eyebrow-font-family);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--wag-color-accent-coral);
      white-space: nowrap;
    }
    .lrp__body {
      margin: 0 0 10px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--wag-color-ink);
    }
    .lrp__body strong { font-weight: 700; }
    /* Inline price callout inside the body copy
       (e.g. "...by our clinician ($30 one-time)."). Lighter
       weight than the surrounding sentence so the eye reads
       the value proposition first, the price second. */
    .lrp__price {
      color: var(--wag-component-body-text-secondary-text-color);
      font-weight: 600;
      white-space: nowrap;
    }
    .lrp__toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border: 1px solid var(--wag-color-outline);
      border-radius: 10px;
      background: var(--wag-color-surface);
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      transition: border-color 120ms ease-out, background-color 120ms ease-out;
    }
    .lrp__toggle:hover { border-color: var(--wag-color-accent-coral); }
    .lrp input[type="checkbox"] {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      margin: 0;
      accent-color: var(--wag-color-accent-coral);
      cursor: pointer;
    }
    /* :has() — Safari 15.4+/Chrome 105+/Firefox 121+. Falls back
       gracefully (no coral border) on older browsers; the checkbox
       state itself remains visible via the native accent-color. */
    .lrp:has(input:checked) {
      border-color: var(--wag-color-accent-coral);
      box-shadow: 0 0 0 1px var(--wag-color-accent-coral);
    }
    .lrp:has(input:checked) .lrp__toggle {
      background: rgba(255, 92, 57, 0.06);
      border-color: var(--wag-color-accent-coral);
    }
    @keyframes lrpFlash {
      0%   { box-shadow: 0 0 0 1px var(--wag-color-accent-coral); }
      50%  { box-shadow: 0 0 0 6px rgba(255, 92, 57, 0.25); }
      100% { box-shadow: 0 0 0 1px var(--wag-color-accent-coral); }
    }
    .lrp.is-flashing { animation: lrpFlash 800ms ease-out; }

    /* ===================================================================
       LRP small-phone tightening (≤ 374px / iPhone 4-class viewports)

       At 320px the .wag-page gutter (24px ×2) and .lrp's own padding
       (16px ×2) leave 256px of inner content. The default sizes for the
       title (15px/700), toggle label (14px/600 inside a 9px 12px padded
       label with a 20px checkbox), and "Recommended" badge (10px/700 in
       a 4px 10px padded pill with the eyebrow line-height of 26px) all
       overflow that 256px box at the toggle level and stack too tall at
       the badge level. Four coordinated drops keep the same visual
       hierarchy as wider viewports (title > toggle ≈ body > badge)
       while preventing every text node from wrapping AND keeping the
       badge a tight low-height chip that matches the desktop look:

         1. Title 15 → 14 — keeps "Landlord Rejection Protection" on
            one line with headroom against system-font width variance.
         2. Recommended badge 10 → 9, padding 4/10 → 2/8, plus an
            explicit `line-height: 1.2` so the pill is no longer
            blown up by the eyebrow token's 26px line-height.
         3. Toggle label 14 → 11, padding 9/12 → 7/8, gap 10 → 6,
            checkbox 20 → 16, plus `max-width: 100%` so the label box
            can never overflow its .lrp parent.
         4. `white-space: nowrap` on the toggle's text span as a
            belt-and-suspenders guarantee against wrap.

       This block lives AFTER the base .lrp__badge / .lrp__toggle /
       .lrp input[type="checkbox"] declarations so it wins the
       same-specificity cascade when the media query matches.
       =================================================================== */
    @media (max-width: 374px) {
      .lrp__title {
        font-size: 14px;
      }
      .lrp__badge {
        font-size: 9px;
        padding: 2px 8px;
        line-height: 1.2;
        letter-spacing: 0.06em;
      }
      .lrp__toggle {
        font-size: 11px;
        padding: 7px 8px;
        gap: 6px;
        max-width: 100%;
      }
      .lrp__toggle > span {
        white-space: nowrap;
      }
      .lrp input[type="checkbox"] {
        width: 16px;
        height: 16px;
      }
    }

    /* ===================================================================
       LRP fallback modal (Variant B — question-led, prose-only)
       =================================================================== */
    .lrp-modal-scrim {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.55);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 1000;
      animation: lrpScrimFade 180ms ease-out;
    }
    .lrp-modal-scrim.is-open { display: flex; }
    @keyframes lrpScrimFade { from { opacity: 0; } to { opacity: 1; } }
    .lrp-modal {
      position: relative;
      width: 100%;
      max-width: 440px;
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      background: var(--wag-color-surface-card-white);
      border-radius: 16px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.25);
      padding: 28px 24px 24px;
      box-sizing: border-box;
      animation: lrpModalRise 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    @keyframes lrpModalRise {
      from { opacity: 0; transform: translateY(20px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .lrp-modal__close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--wag-component-body-text-secondary-text-color);
      cursor: pointer;
      display: grid;
      place-items: center;
      font-size: 20px;
    }
    .lrp-modal__close:hover { background: var(--wag-color-surface); }
    .lrp-modal__eyebrow-wrap { text-align: center; }
    .lrp-modal__eyebrow {
      display: inline-block;
      margin: 0 auto 12px;
      padding: 4px 10px;
      background: rgba(255, 92, 57, 0.10);
      border-radius: 999px;
      font-family: var(--wag-typography-eyebrow-font-family);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--wag-color-accent-coral);
    }
    .lrp-modal__headline {
      margin: 0 0 12px;
      text-align: center;
      font-family: var(--wag-typography-display-md-font-family);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.25;
      color: var(--wag-color-ink);
    }
    .lrp-modal__body {
      margin: 0 0 18px;
      font-size: 15px;
      line-height: 1.5;
      color: var(--wag-color-ink);
    }
    .lrp-modal__body strong { font-weight: 700; }
    .lrp-modal__cta-primary {
      display: block;
      width: 100%;
      padding: var(--wag-component-button-primary-padding);
      background: var(--wag-component-button-primary-background-color);
      color: var(--wag-component-button-primary-text-color);
      border: 0;
      border-radius: var(--wag-component-button-primary-rounded);
      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);
      cursor: pointer;
      margin: 0;
    }
    /* Reassurance line directly under the primary CTA — green
       shield + "31-day protection of your purchase". Mirrors the
       green guarantee-pill on the checkout body. */
    .lrp-modal__guarantee {
      margin: 8px 0 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: var(--wag-typography-eyebrow-font-family);
      font-size: 11px;
      font-weight: 600;
      color: var(--wag-color-success-green, #5d9a2c);
      letter-spacing: 0.02em;
    }
    .lrp-modal__guarantee svg {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
    }
    .lrp-modal__cta-secondary {
      display: block;
      width: 100%;
      padding: 8px 0;
      background: transparent;
      color: var(--wag-component-body-text-secondary-text-color);
      border: 0;
      font-size: 14px;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
      text-align: center;
    }