/* ========================================================================== PRBE FUNNEL — MOBILE CORRECTION LAYER Commander's standing order 2026-08-11: "make sure everything is mobile optimized, all traffic will be coming from mobile." This file is ADDITIVE and scoped to <=520px. It never touches the desktop rendering he already approved. It fixes exactly two classes of defect that were measured on a 390x844 iPhone viewport over CDP: 1. TYPE THAT CANNOT BE READ — 8px, 9px, 10px, 10.5px and 11px copy was shipping on the phone. Anything carrying meaning is floored at 12.5px; real reading copy at 13.5px. 2. CONTROLS THE THUMB CANNOT HIT — Apple's HIG floor is 44x44pt. Mute buttons were 30x30, the share rail 28x38, EN/ES toggles 94x35, the bank-list consent checkbox 13x13. Inline links inside a sentence are deliberately NOT stretched to 44px -- that would break line flow. They get a larger font and a visible underline instead, which is the correct affordance for prose. ========================================================================== */ @media (max-width: 520px) { /* ---------- 1. READABILITY FLOOR --------------------------------------- Ordered smallest-first so the intent stays legible. */ /* was 8-10.5px: unreadable at arm's length on a phone */ small, .meta, .chip, .tag, .clogo, .gk, .disc, .nkh, .l, .tier, .acue, .rfk, .step, .hm-cap, .pill-eyebrow { font-size: 12.5px !important; line-height: 1.5 !important; letter-spacing: .01em !important; } /* real reading copy — the words that do the selling */ p, li, figcaption, blockquote, td, .small, .fine, .tw2, .ent, .cnt, .crole, footer, footer a { font-size: 13.5px !important; line-height: 1.62 !important; } /* the testimonial-wall captions: 15 of them shipped at 11.5px */ .tw2 { font-size: 13px !important; line-height: 1.5 !important; } /* section eyebrows should still read as eyebrows, just not as fine print */ h2.sec, h3.sec { font-size: 12.5px !important; letter-spacing: .16em !important; } /* ---------- 2. THUMB TARGETS ------------------------------------------- 44px is the floor, applied with padding so nothing is clipped. */ /* icon buttons: mute toggle on every testimonial tile */ .twmedia .snd, button.snd { width: 44px !important; height: 44px !important; right: 6px !important; bottom: 6px !important; font-size: 17px !important; } /* the share rail — was 28x38, below the floor on both axes */ #sr-copy, #sr-wa, #sr-email, #sr-ig, .sharerail a, .sharerail button { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* language toggles (EN / ES) on proof + testimonios — were 94x35. 🔴 CLASS-NAME COLLISION, found 2026-08-12: the testimonial CARDS on /start and /empezar are `class="card lang en"`, so the bare `a.lang` selector matched them too and forced a whole card to inline-flex + center. That collapsed the card's description to 78px wide x 223px tall — one word per line. This is the ROOT of the letter-stack text the Commander filmed; the earlier desktop.css patch only treated the symptom. Never write a bare utility selector that a content class can accidentally satisfy — exclude the card explicitly. */ .langbar a, .langsw a, a.lang:not(.card), .lang:not(.card) { min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* a card is always a block, whatever utility classes it also carries */ a.card, a.card.lang { display: block !important; } /* every standalone call to action, including the ones that were 38-39px */ a.btn, .btns a, button.gbtn, .cta, a.cta, .offer .btns a, a[class*="btn"], button[class*="btn"] { min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* form fields — 43px was one pixel under, and a missed tap costs a lead */ input[type="text"], input[type="email"], input[type="tel"], select, textarea { min-height: 48px !important; font-size: 16px !important; /* <16px makes iOS Safari ZOOM on focus */ } /* the bank-list consent checkbox was 13x13 — unhittable */ input[type="checkbox"], input[type="radio"] { width: 22px !important; height: 22px !important; min-width: 22px !important; flex: 0 0 22px !important; } /* and give its label a real hit area next to it */ label:has(input[type="checkbox"]), label:has(input[type="radio"]) { min-height: 44px !important; display: flex !important; align-items: center !important; gap: 10px !important; } /* the hamburger */ .ham { min-width: 44px !important; min-height: 44px !important; } /* ---------- 3. INLINE LINKS IN PROSE ----------------------------------- Not stretched (it would break the line), but made obvious and bigger. */ p a, li a, .fine a, footer a, .disc a { font-size: inherit !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-thickness: 1px !important; } /* a phone number is a TAP on a phone — give it real weight */ a[href^="tel:"] { font-size: 15px !important; font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 3px !important; display: inline-block !important; padding: 6px 0 !important; } /* ---------- 4. PHONE-SPECIFIC SAFETY ----------------------------------- */ /* never let a long unbroken string (URL, email) force a sideways scroll */ body { overflow-wrap: break-word; } /* respect the notch / home indicator */ footer { padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important; } /* iOS momentum scrolling inside any horizontal strip */ [class*="rail"], [class*="strip"], [class*="marquee"] { -webkit-overflow-scrolling: touch; } } /* -------------------------------------------------------------------------- 100vh IS A LIE ON MOBILE. iOS Safari counts the URL bar as part of the viewport, so a 100vh stage is taller than what the user can see and the bottom of every act gets cut off. dvh tracks the visible area as the bar collapses. Applied at every width because Android Chrome does the same. -------------------------------------------------------------------------- */ @supports (height: 100dvh) { .cstage, .astage { height: 100dvh !important; } } /* ========================================================================== PASS 2 — the stragglers, fixed by exact selector rather than blanket rule. Each one was located by reading its outerHTML off the live phone viewport, not guessed from the source. ========================================================================== */ @media (max-width: 520px) { /* --- inline style="font-size:9..12px" beat every class selector --------- */ [style*="font-size:12px"], [style*="font-size:11px"], [style*="font-size:10px"], [style*="font-size:9px"] { font-size: 12.5px !important; } /* --- index: the derogatory-items header bar (was 10px, two columns) ----- Raising the type would push two uppercase labels past 390px, so it wraps instead of overflowing. */ .tear .th { flex-wrap: wrap !important; gap: 2px 10px !important; font-size: 12px !important; letter-spacing: 1px !important; } /* --- free-checklist: the header of the PAPER MOCKUP -------------------- Deliberate exception. This element is a drawing of a printed sheet, so its label is decorative rather than copy the buyer must read. Lifted off 9px (unreadable) to 11.5px (legible) without breaking the illusion. */ .paper .ptop b, .paper .ptop span { font-size: 11.5px !important; } /* --- REAL CALLS TO ACTION that are marked up as plain -------------- These carry money or navigation, so they get the full 48px, not the inline-prose treatment. */ .diyline a, /* index: eBooks + Bank List */ .investline a, /* bank-list: BUY ON STRIPE */ .dlnote a, /* thanks: the bonus PDF */ .or a, /* thanks: back to the offer */ .fcap a, /* free-checklist: Watch them*/ a[href$=".pdf"], /* every PDF download */ a[href^="https://buy.stripe.com"], /* every Stripe control */ a[href^="/#"], a[href="/"] { min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 6px 14px !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* the Stripe line is the buy control -- make it unmistakable */ .investline a { font-weight: 800 !important; font-size: 15px !important; color: var(--navy, #0d1b2a) !important; } /* language switcher is a control, not prose */ a[data-es], a[href*="testimonios"].lang, .langbar a { min-height: 44px !important; } /* footer identity link: give it a real block to hit */ footer a[href^="https://battallionrestoration"] { display: inline-block !important; min-height: 44px !important; line-height: 44px !important; } /* tel: link — the single highest-intent tap on a phone */ a[href^="tel:"] { min-height: 44px !important; line-height: 44px !important; padding: 0 !important; } } /* ========================================================================== PASS 3 — the last two. Both were real bugs in my own PASS 1/2 rules. ========================================================================== */ @media (max-width: 520px) { /* min-height does nothing on an INLINE element. The language switcher kept rendering 114x16 because a[data-es] never got a box to grow. */ a[data-es] { display: inline-flex !important; align-items: center !important; min-height: 44px !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* index "HOW PRBE IS DIFFERENT" panel: the two column headers ship at 11px. They are the M1660 no-kickback claim -- the buyer must be able to read it. */ .nk b, .nkg b { font-size: 12.5px !important; letter-spacing: .06em !important; } } /* ========================================================================== PASS 4 — defects found by LOOKING at the rendered phone, not by probing. A DOM probe reports overflow of 0 when the body carries overflow-x:clip, so these were only visible in a screenshot. ========================================================================== */ @media (max-width: 520px) { /* --- the lead-capture form was a FLEX ROW ----------------------------- On a 390px screen the email field collapsed to ~155px and rendered the placeholder as "Email a". A lead you cannot type into is a lost lead. */ .gate form, form#pdfFormTw { flex-direction: column !important; gap: 10px !important; width: 100% !important; } .gate form input[type="email"], form#pdfFormTw input[type="email"], .gate form .gbtn, form#pdfFormTw .gbtn { width: 100% !important; min-height: 50px !important; } /* --- the fixed $17.87 bar is 91px tall over 86px of body padding ------- Five pixels short, which clipped the last CTA on the page. Also has to clear the home indicator on a notched phone. */ body { padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important; } .bar { padding-bottom: env(safe-area-inset-bottom) !important; } /* the bar's own two columns must not squeeze the price into three lines */ .bar .btn, .bar a.btn { white-space: nowrap !important; } } /* ========================================================================== PASS 5 — the black act stage (all widths, not just mobile) The act