/*! GENERATED by tools/scope-css.php from eehp-results-mobile.css — do not edit. */
/* ════════════════════════════════════════════════════════════════
   EEHP — Quiz-Results pages — MOBILE READABILITY LAYER
   ════════════════════════════════════════════════════════════════
   Serves all three protocol results templates (Warhorse / Victory /
   Show Horse). Loads LAST — after the content build's own styles.css
   and after warhorse-wp-layout.css — and leaves both untouched
   (Option-A: build files are generated, never hand-edited).

   WHY THIS FILE EXISTS
   Kenny, 2026-09-18: "please spend most of your time optimizing for
   MOBILE. Our customers skew 40-60, so a larger-than-average font is
   ideal for readability. On mobile specifically, size everything up —
   body text, prices, and especially the checkboxes / toggles."

   The build ships mobile type that is small for that audience: the
   Phoenix / off-season add-on checkboxes are 13x13px with an 11.5px
   label, and the offer box's supporting lines sit at 11-12.5px. Those
   are the two things a 40-60-year-old on a phone struggles with most:
   the smallest tap target on the page is also the one that changes the
   price, and the lines explaining what the price includes are the
   smallest text in the box.

   WHY EVERY RULE CARRIES !important
   Not defensiveness — necessity. The build sets these sizes as INLINE
   style attributes on the generated markup (`style="font-size:11.5px"`,
   `style="width:13px;height:13px"`), and inline styles outrank any
   stylesheet selector regardless of specificity or load order. An
   author-origin !important declaration is the only thing that beats an
   inline declaration. Several of the classes targeted below
   (.maint-price, .inj-extra, .vet-label, .calc-perserving, …) have NO
   stylesheet rule at all in the build — they exist only as inline
   styles, so there is nothing to out-specify.

   SCOPE. Everything is inside a max-width media query, so desktop —
   which Kenny says is in good shape — is byte-for-byte unaffected.
   Two breakpoints:
     <= 700px  the build's own mobile breakpoint. Main work happens here.
     <= 420px  small phones, where the widest price rows need to wrap
               rather than compress.

   WHEN THE NEXT DROP LANDS. If the content build sizes mobile up at
   source, delete the corresponding block here rather than leaving both
   in place — two layers fighting over the same number is how the
   divergence bugs in this project start. Diff the drop's mobile media
   queries first.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {

  /* ── 1. BASE TYPE ──────────────────────────────────────────────
     16px -> 17.5px. The build's line-height (1.65) is already
     generous and is deliberately left alone; raising both at once
     over-airs the long copy sections. */
  body.eehp-ported-page{
    font-size: 17.5px !important;
  }

  /* Gutters come IN as type goes UP, so the wider glyphs keep the same
     measure instead of pushing the price rows into a wrap. The build
     uses 28px side padding at every width. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .wrap, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .wrap-wide, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-wrap{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Sections tighten slightly to pay for the taller text — the page
     gets longer otherwise, and the offer box is already a long scroll. */
  body.eehp-ported-page section{
    padding: 56px 0 !important;
  }

  /* ── 2. HEADINGS + LEAD COPY ───────────────────────────────────
     h1/h2 already use clamp() and scale acceptably; their floors are
     what need lifting, not their curves. Lead paragraphs are the
     "read the whole thing" copy and matter most for this audience. */
  body.eehp-ported-page h1{
    font-size: clamp(34px, 8.5vw, 52px) !important;
  }
  body.eehp-ported-page h2, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .diag-h1{
    font-size: clamp(26px, 6.6vw, 36px) !important;
  }
  body.eehp-ported-page h3{
    font-size: 21px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .diag-lead, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .cta-lead, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-intro p{
    font-size: 17.5px !important;
    line-height: 1.6 !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .bridge{
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    padding: 11px 18px 15px !important;
  }

  /* The all-caps eyebrow is 10px at source — legible only because it is
     short. 12px keeps it subordinate to the h1 while clearing the
     "can't read it at arm's length" threshold. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .overline{
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
  }

  /* ── 3. TRUST STRIP ────────────────────────────────────────────
     The build drops .ts-item to 10px in its own 700px block. That is
     the smallest text on the page and it carries the guarantee. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .ts-item{
    font-size: 12.5px !important;
    padding: 10px 8px !important;
    line-height: 1.35 !important;
  }

  /* ── 4. REVEAL CARD + CONCERN CHIPS ────────────────────────────
     .reveal-coverage is inline-sized at 15px and holds the chips the
     wiring rebuilds from the quiz answers. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .reveal-coverage{
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  /* ── 5. DIAGNOSIS SYMPTOM CARDS ────────────────────────────────
     Quiz-driven .selected/.muted cards. One line of text each, so they
     take a size bump without reflowing. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .sym-card{
    font-size: 16px !important;
    padding: 14px 16px !important;
    gap: 12px !important;
    line-height: 1.4 !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .sym-icon{
    font-size: 20px !important;
  }

  /* ── 6. THE OFFER BOX (.crp-*) ─────────────────────────────────
     The month-by-month breakdown. Everything here is 11.5-13px at
     source; it is the densest region on the page and the one that
     explains what the buyer is actually paying for. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-when{
    font-size: 15.5px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-price{
    font-size: 19px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-row-maint .crp-price{
    font-size: 22px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-name, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .maint-label{
    font-size: 15.5px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-comp, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-gift, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-val{
    font-size: 14.5px !important;
    margin-top: 5px !important;
    line-height: 1.45 !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-bill{
    font-size: 15px !important;
    margin-top: 8px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-row{
    margin-bottom: 18px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-desc{
    margin-top: 8px !important;
  }

  /* Alignment guard. .crp-head is a baseline-aligned space-between row
     ("Month 2" | "$149"). At 15.5px + 19px the two sides no longer fit
     on one line on a narrow phone, and without wrap: the price would
     compress or clip instead of dropping. Wrapping is the correct
     failure mode here, and the gap keeps it from looking accidental. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-head{
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
    align-items: baseline !important;
  }

  /* ── 7. THE TOGGLES — the headline item ────────────────────────
     "especially the checkboxes / toggles (the Phoenix and off-season
     add-on controls)". Two controls, both authored as a bare
     `<label>` (Warhorse/Victory: Phoenix; Show Horse: Phoenix + UDE),
     sometimes with .crp-toggle and sometimes with the same declarations
     written inline on an unclassed label. Both spellings are covered.

     13px -> 24px box, 11.5px -> 16px label, and the whole control gets
     a 44px minimum height — the standard minimum tap target, which a
     13px checkbox misses by a factor of three. This is the only control
     on the page that changes the price, so it is also the one where a
     mis-tap costs the most. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-toggle, body.eehp-ported-page.eehp-ported-page.eehp-ported-page label:has(> .inj-toggle), body.eehp-ported-page.eehp-ported-page.eehp-ported-page label:has(> .ude-toggle){
    font-size: 16px !important;
    padding: 11px 14px !important;
    gap: 11px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    line-height: 1.35 !important;
    /* Long labels ("Use Ulcer Defense Emergency for months 1-2
       instead") need two lines at this size; inline-flex + centre
       would keep the box one line tall and clip. */
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* The box itself. Sized via width/height because the build sets those
     inline; a transform: scale() would not move the hit area with it. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .inj-toggle, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .ude-toggle{
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
  }

  /* The label text sits in a bare <span> next to the input and inherits
     the label's font-size, so it is covered by the rule above — but the
     Show Horse UDE label wraps, and its second line needs the same
     leading as the first. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .inj-toggle + span, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .ude-toggle + span{
    line-height: 1.35 !important;
  }

  /* Struck retail -> member price beside each toggle (new in this drop).
     The pairing only communicates if both halves are legible. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .inj-extra, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .ude-extra{
    font-size: 15px !important;
  }

  /* The white strike line is drawn as a ::after gradient sized off the
     element box, so it follows font-size automatically — no separate
     rule needed, and none should be added. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .mp-strike{
    font-size: 21px !important;
  }

  /* Show Horse's not-show-safe warning on the two off-season toggles.
     It is the reason a competitor would NOT tick the box, so it must be
     at least as readable as the label it qualifies. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .show-horse-warn, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-addon-note{
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  /* ── 8. MAINTENANCE LINE ───────────────────────────────────────
     Inline-styled only; no stylesheet rules exist for these at all.
     "Month 3+" / "Month 4" labels are white as of this drop — colour is
     the build's call and is not touched here, only size. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .maint-when{
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .maint-price{
    font-size: 30px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .maint-unit{
    font-size: 14px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .maint-truevalue, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .maint-ps-line{
    font-size: 14px !important;
  }

  /* ── 9. MONTH-2 FREE PHOENIX + TERM-SPECIFIC LINES ─────────────
     .only-monthly / .only-quarterly / .only-annual / .only-prepay are
     shown and hidden by the term selector, so they must all read
     equally well — a buyer comparing terms switches between them. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .m2-freephx, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .m2-phx-value, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .freephx-line, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .only-monthly, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .only-quarterly, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .only-annual, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .only-prepay{
    font-size: 14.5px !important;
    line-height: 1.45 !important;
  }

  /* ── 10. VET / AUTHORITY BLOCK ─────────────────────────────────*/
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .vet-label{
    font-size: 13px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .vet-desc, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .vet-hindgut{
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* ── 11. THE CALCULATOR + TERM SELECTOR ────────────────────────
     Term selector (monthly / quarterly / annual) and the horse-count
     stepper are the page's other two real controls. Same 44px tap-target
     floor as the toggles. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-freq-toggle, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-view-toggle{
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-fbtn, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-vbtn{
    font-size: 15px !important;
    padding: 12px 18px !important;
    min-height: 44px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-ctrl-label{
    font-size: 14px !important;
  }

  /* Horse-count stepper. 24x26px buttons are below the tap floor and
     sit either side of an input the wiring writes ?eehp_horses= into. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-hc-btn{
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-horse-count{
    padding: 5px 10px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-horse-count input, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-hc-input{
    font-size: 18px !important;
    width: 40px !important;
  }

  /* Comparison columns. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-col{
    padding: 18px 16px 16px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-col-tag{
    font-size: 12.5px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-col-title{
    font-size: 16.5px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-col-sub{
    font-size: 14px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-row-name, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-row-name input{
    font-size: 15.5px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-row-sub{
    font-size: 13.5px !important;
    line-height: 1.4 !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-perserving{
    font-size: 14px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-total-lbl{
    font-size: 13.5px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-total-val{
    font-size: 34px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-feat-list, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-feat{
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-savings-text{
    font-size: 15.5px !important;
    line-height: 1.5 !important;
  }

  /* Editable qty/price cells — inputs under 16px make iOS Safari zoom
     the whole viewport on focus, which on this page means landing
     mid-offer-box at 1.4x with no way back. 16px is the threshold. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-qty input, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-price input, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-row-name input{
    font-size: 16px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-qty button{
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-price-dollar{
    font-size: 14px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-add-btn, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-reset-btn{
    font-size: 14px !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-row-del{
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
  }

  /* ── 12. CTAs ──────────────────────────────────────────────────*/
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .cta-main{
    font-size: 18px !important;
    padding: 18px 24px !important;
    line-height: 1.3 !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .cta-h2{
    font-size: clamp(30px, 7.5vw, 44px) !important;
  }

  /* Sticky bar — fixed chrome, so it is sized up but kept deliberately
     restrained: it steals viewport height from the content behind it. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .sticky-text{
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .sticky-btn{
    font-size: 15px !important;
    padding: 13px 20px !important;
    min-height: 44px !important;
  }

  /* Last-chance banner — a full-width tappable link. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .lc-banner{
    font-size: 15px !important;
    line-height: 1.45 !important;
    padding: 13px 16px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .lc-banner-cta{
    font-size: 15px !important;
  }

  /* ── 13. FAQ ───────────────────────────────────────────────────
     Accordion. The question is the tap target; the answer is long-form
     copy and the most read text on the lower half of the page. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .faq-q{
    font-size: 16.5px !important;
    padding: 18px 46px 18px 0 !important;
    line-height: 1.4 !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .faq-q::after{
    font-size: 26px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .faq-a{
    font-size: 15.5px !important;
    line-height: 1.6 !important;
  }

  /* ── 14. SLIDER CONTROLS ───────────────────────────────────────
     Injected by warhorse-wp-wiring.js, styled in warhorse-wp-layout.css
     at 40px. Below the tap floor, and they sit under a slider people
     swipe past — so the buttons are the fallback for anyone who does
     not realise it swipes. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .tw-nav{
    gap: 20px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .tw-nav-btn{
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .tw-nav-count{
    font-size: 14px !important;
    min-width: 56px !important;
  }

  /* ── 15. REVIEWS ───────────────────────────────────────────────*/
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .review-card{
    font-size: 15.5px !important;
    line-height: 1.55 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   ANY TOUCH DEVICE — TAP TARGETS ONLY
   ════════════════════════════════════════════════════════════════
   The type scale above is keyed to width, deliberately matching the
   build's own 700px breakpoint so the two layers can never disagree
   about a font size. But a tap target is not a width problem: a tablet
   in portrait, or a phone held in landscape, reports 768-900px and would
   otherwise fall back to the 13px checkbox and the 31px-tall label.

   So the controls — and ONLY the controls — get their floor from the
   input type instead. `pointer: coarse` means the primary pointer is a
   finger, which is exactly the condition that makes a 13px checkbox the
   wrong size. Desktop (pointer: fine) never matches this block, so
   Kenny's "desktop is in good shape" holds at every width.

   No font sizes here beyond the two labels that would otherwise be
   unreadably small inside a control that has grown around them.

   NOTE THE min-width. This block covers ONLY the gap above the mobile
   breakpoint — at 700px and below, the width block already sets these
   controls larger, and without the min-width this block (being later in
   the file, equal specificity, also !important) would win on a phone and
   silently shrink the 24px checkbox back to 22px. Scoping it to the gap
   states the intent and removes the dependence on source order.
   ════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) {

  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-toggle, body.eehp-ported-page.eehp-ported-page.eehp-ported-page label:has(> .inj-toggle), body.eehp-ported-page.eehp-ported-page.eehp-ported-page label:has(> .ude-toggle){
    min-height: 44px !important;
    padding: 10px 13px !important;
    gap: 11px !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .inj-toggle, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .ude-toggle{
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }

  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-fbtn, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-vbtn, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-add-btn, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-reset-btn, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .sticky-btn{
    min-height: 44px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-hc-btn{
    width: 38px !important;
    height: 38px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-qty button{
    width: 34px !important;
    height: 34px !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .tw-nav-btn{
    width: 46px !important;
    height: 46px !important;
  }
  /* iOS zooms the viewport on focus of any input below 16px. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-qty input, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-price input, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-row-name input, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-horse-count input, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-hc-input{
    font-size: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   SMALL PHONES (<= 420px)
   iPhone SE / mini class. The scale-up above is kept; what changes is
   that the widest rows are allowed to wrap instead of compressing, and
   the gutters give back a few more pixels.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {

  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .wrap, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .wrap-wide, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-wrap{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* The offer box's price is the one number that must never clip, so at
     this width it gets the line to itself rather than sharing with the
     month label. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-head{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  /* The maintenance row pairs a big price with a struck retail value and
     a per-serving line; at 30px + 21px those overflow a 420px viewport
     while the build's inline white-space:nowrap holds them on one line.
     Released HERE ONLY, and only on the row container — the price and
     its "/mo" unit stay together because they are nested deeper. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .crp-row-maint [style*="nowrap"]{
    white-space: normal !important;
  }
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .maint-price{
    font-size: 27px !important;
  }

  /* Term selector goes full-width in two rows rather than three cramped
     columns, so each term keeps a real tap target. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-fbtn, body.eehp-ported-page.eehp-ported-page.eehp-ported-page .calc-vbtn{
    padding: 12px 14px !important;
    flex: 1 1 auto !important;
  }

  /* Trust strip is a 2-column grid at this width in the build's own
     stylesheet; 12.5px x 2 lines fits, 3 lines does not look intended. */
  body.eehp-ported-page.eehp-ported-page.eehp-ported-page .ts-item{
    font-size: 12px !important;
  }
}