/* ═══════════════════════════════════════════════════════════════════════════ THE PHONE FLOOR — the public site Nakul, 16 Oct 2026: "even jo website ka bhi phone view hai usko bahut accha karne ki koshish karo, dekho usme koi bug toh nahi hai." Measured at 375x812 before any of this was written. Two things the page got right and this file does not touch: nothing scrolls sideways, and every wide table already scrolls inside its own box. What was wrong was smaller and more ordinary. WHAT WAS MEASURED, AND WHAT IT MEANT - "Explore loan options" and "Talk to Nakul's team" — the two links the whole homepage is built to earn — were 18px tall with 11px text. A thumb is about 9mm. They were the hardest things on the page to press and the only ones that matter. - The grievance email and the phone number in the regulatory block were 35px. Somebody with a complaint, on a phone, tapping to call. - Seventeen footer links and six story links, all just under the floor. - "Your Money, Your Future" — the brand's own line — set at 8.5px. - Section eyebrows ("01 / BORROW", "THE TRADE-OFF") at 9px. 44px IS APPLE'S PUBLISHED MINIMUM and 36 is the lowest anything here was allowed to stay. Raising a link's min-height does not move the text or reflow the page — it grows the box the finger lands in, which is the whole point. WHAT THIS FILE DELIBERATELY LEAVES ALONE Eleven small labels sit inside .mf-shaft, the motion-graphics section, where the whole slab is transform-scaled to about 61% on a phone. Their 8.5px is small because the illustration around them is small. Raising only the type there would make the labels wrong against the drawing they belong to, and the fix is to the composition, not the font size. Left as it is, on purpose, and worth looking at together. LOADED LAST so an equal-specificity rule here wins without !important. ═══════════════════════════════════════════════════════════════════════════ */ /* iOS inflates text inside narrow blocks in landscape unless this is pinned. Not a width rule, so it sits outside the media query. */ html { -webkit-text-size-adjust: 100%; } /* ═══════════════════════════════════════════════════════════════════════════ EVERY PAGE, NOT JUST THE HOMEPAGE All 23 shipped pages were measured at 375x812 after the homepage was done. Four of them were worse than the homepage had been: about.html scrolled sideways by 262px — one inline grid in the body said 1fr 1fr and never collapsed, so two 288px cards sat side by side on a 375px screen. Fixed in that file, because an inline style beats any stylesheet rule and no sheet could have reached it. contact.html six form fields at 14px — the lead form, zooming on every tap. credit-cards.html thirteen fields under 16px, 68 Apply buttons at 32px, sixteen filter chips at 29px, and 408 labels at 9–9.5px. loans.html 93 controls under the floor, four fields under 16px. The rules below are the ones that are safe to apply everywhere: a font-size floor on form fields, a height floor on buttons and on controls that are already their own block, and a size floor on label classes. They change no layout above 480px and none at all on desktop. WHAT IS DELIBERATELY NOT HERE: a tap floor on links inside running text. privacy-policy and terms-conditions report ~20 small links each, and nearly all of them are words inside a sentence. Giving those 44px of height would break the paragraphs they live in, and a reader tapping a word mid-sentence is not the case the 44px rule exists for. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { /* The single highest-value rule in this file. iOS Safari zooms the page in on focus for any field under 16px and never zooms back out. THE ONE !important IN THIS FILE, AND IT IS EARNED. Written plainly, this rule is `input` — specificity (0,0,1) — and it lost to every .form-input and #marketing-view .field on the site. Measured: contact.html's six fields and credit-cards.html's thirteen stayed at 12–15px with the plain rule in place. There is also no page that legitimately wants a sub-16px field on a phone, so there is nothing here for a later rule to need to win back. Raising specificity with a :root:root:root hack would do the same job while hiding why. */ input, select, textarea { font-size: 16px !important; } button { min-height: 44px; touch-action: manipulation; } /* Controls that are a link by markup and a button by behaviour. Named one by one rather than blanket-matching a, so a link inside a paragraph is left where it belongs. */ .btn-back, .btn-apply, .chip, .logo, .brand, .hw-logo, .md-brand, .md-back, .lc-more, .theme-btn, .cc-tile a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; } /* A checkbox is a tap target like any other, and 16px of it is not one. The label beside it usually works too, but not every one of these has a