/* ============================================================================= PAYMINT — mobile.css One stylesheet, injected into on all seven pages. CONTRACT - The pages carry ZERO class attributes and ZERO media queries. Every style is an inline style="" attribute, so EVERY declaration below needs !important, and every selector is built from tag names, structural pseudo-classes, and substring matches on the style attribute. - Selectors are written against the REACT-SERIALIZED attribute, not the source text: a space follows every colon and comma, 0 becomes 0px, shorthands are normalised. Never anchor on a colour, `border: none`, or a box-shadow — those re-serialize to rgb()/longhands. - Nothing sits at the top level. Every rule is inside a media query, so >1024px renders exactly as it does today. - The 77 decorative position:absolute layers (drifting particles, radial glows) are never given layout rules. The only thing done to them is an optional thinning of the animated particle spans at <=480px. PAGE SCOPING There is no body class to hang page rules on, so a page-specific rule that uses a generic anchor (gap:, padding:, align-items:, width:) carries a :has() page guard. Anchors verified unique site-wide by grepping all seven documents (section ids, #pmArea, and one-of-a-kind padding/grid strings) are used bare. Guards, in the order the page blocks appear: HOME body:has(#integrations) DASH body:has(#pmArea) STATUS body:has([style*="210px minmax(0px, 1fr) 70px"]) SIGNUP body:has([style*="minmax(0px, 1.02fr)"]) LOGIN body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) RESET body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) 404 body:has([style*="padding: 72px 40px 96px"]) Login and Reset share the same stage padding; `align-items: baseline` (the password label row) exists on Login and not on Reset, which separates them without depending on the password input's dynamic `type`. CASCADE Every guarded page rule is at least (1,1,1) or (0,2,1), so it always beats the ungarded shared rules above it regardless of source order. Within a block, rules run general -> specific because several padding values are substrings of each other (`padding: 20px` matches `padding: 20px 24px`). CONFLICTS RESOLVED (see the notes at each site) - No blanket repeat(3,)/repeat(4,) collapse. Home's hero checkout card has a legitimate 3-up expiry/CVC/ZIP row; grid collapse is done per page. - No blanket `button { min-height: 44px }` exception needed except one: the Dashboard's 42x24 notification toggle, which is restored below. - No `label { font-size: 11px }`: the Dashboard's three settings labels are 13px sentence case. The micro-label rule matches uppercase labels only. - No html/body `overflow-x: hidden`: every root div already clips, and a scroll container on body risks the sticky headers on Home and Dashboard. - The 1300x820 / 1200x800 glow boxes are left alone. Their gradients are sized in px (620x440 at 50% 42%), so shrinking the BOX changes nothing visible — three drafts proposed three different no-op values. ============================================================================= */ /* ============================================================================= 1. ALL PAGES ============================================================================= */ @media (max-width: 768px) { /* 1.1 Document guards. Deliberately no overflow-x here — see header note. */ html, body { max-width: 100% !important; -webkit-text-size-adjust: 100% !important; } /* 1.2 Root shell. 100vh measures under the mobile URL bar and leaves a dead strip below the fold. Browsers without svh drop this and keep 100vh. */ div[style*="min-height: 100vh"] { min-height: 100svh !important; } /* 1.3 The house side gutter. `padding: 0px 40px` is the header bar on five pages and five sections on Home; the horizontal-only override also covers every longer variant that starts with it (`0px 40px 8px`, `0px 40px 40px`) without touching anyone's vertical rhythm. 40px is 21% of a 390px screen. */ [style*="padding: 0px 40px"] { padding-left: 20px !important; padding-right: 20px !important; } /* 1.4 Long unbroken tokens — echoed emails, merchant names, URLs, amounts — are CLIPPED rather than scrollable under the roots' overflow-x: hidden. */ h1, h2, h3, h4, p, label, a, button { overflow-wrap: break-word !important; } /* 1.5 THE single highest-value rule on the site: anything under 16px makes iOS Safari zoom the viewport on focus, and it never zooms back. Applies to all 13 inputs across Login(2) Signup(3) Dashboard(4) Home(2) Reset(1) Status(1). Per-page padding/width follow in the page blocks. */ input { font-size: 16px !important; min-height: 48px !important; } /* 1.6 Touch floor. The design systematically uses 8-11px vertical padding on 12-13px text, which lands at 31-36px everywhere. The only fixed-size button on the site (Dashboard's 42x24 toggle) is exempted in section 4. */ button { min-height: 44px !important; touch-action: manipulation !important; } header a, footer a { display: inline-flex !important; align-items: center !important; min-height: 44px !important; touch-action: manipulation !important; } } @media (max-width: 480px) { [style*="padding: 0px 40px"] { padding-left: 16px !important; padding-right: 16px !important; } /* Thin the drifting particle field by a third. Anchored on the animation name so it can only ever match a decorative span — never a content node. */ div[style*="pointer-events: none"] > span[style*="pmDrift"]:nth-child(3n) { display: none !important; } } @media (min-width: 769px) and (max-width: 1024px) { [style*="padding: 0px 40px"] { padding-left: 32px !important; padding-right: 32px !important; } /* A tablet is a touch device, and iPadOS zooms sub-16px fields too. */ input { font-size: 16px !important; } button { min-height: 44px !important; touch-action: manipulation !important; } header a, footer a { display: inline-flex !important; align-items: center !important; min-height: 44px !important; } } /* Scoped to <=768px only so desktop rendering is provably untouched. Widening this to all widths is the better accessibility answer once that constraint is lifted. */ @media (prefers-reduced-motion: reduce) and (max-width: 768px) { span[style*="pmDrift"] { animation: none !important; opacity: 0 !important; } [style*="pmRise"] { animation: none !important; } } /* ============================================================================= 2. SHARED COMPONENTS (repeated on some but not all pages) ============================================================================= */ /* --- 2.1 The 1180px glass header bar --------------------------------------- 404, Create Account, Login, Reset, Status. Home and Dashboard have their own header shapes and carry no `max-width: 1180px` anywhere (verified). A locked `height: 70px` cannot hold a wordmark plus "Already have an account? Sign in" at 320px, so the height is freed and floored instead. Gutters come from rule 1.3. */ @media (max-width: 768px) { header > div[style*="max-width: 1180px"] { height: auto !important; min-height: 64px !important; gap: 12px !important; } } @media (max-width: 480px) { header > div[style*="max-width: 1180px"] { min-height: 60px !important; gap: 10px !important; } } /* --- 2.2 Tracked-out uppercase micro-type ---------------------------------- 10.5px at 0.20-0.22em is at the legibility floor on a phone. The uppercase qualifier is required: the Dashboard's three settings labels are 13px sentence case and must not be caught. Tighter tracking pays for the larger size, so the `white-space: nowrap` eyebrows still fit at 320px. */ @media (max-width: 768px) { label[style*="text-transform: uppercase"] { font-size: 11px !important; letter-spacing: 0.18em !important; } } @media (max-width: 480px) { label[style*="text-transform: uppercase"], span[style*="letter-spacing: 0.22em"] { font-size: 11px !important; letter-spacing: 0.16em !important; } } /* --- 2.3 Primary CTA (Login / Reset / Create Account) ----------------------- All three come from a JS `btnStyle` object serialized with `width: 100%; font-size: 14.5px; padding: 15px` — ~47px tall, passing 44px on a technicality. No other button on the site declares a width (verified). */ @media (max-width: 768px) { button[style*="width: 100%"] { font-size: 16px !important; min-height: 52px !important; padding: 14px 16px !important; } } /* --- 2.4 Password label row + Show/Hide toggle (Login / Create Account) ----- The toggle is `padding: 0px` on 11.5px text — a ~34x13px target sitting 16px above the password field. Grow it to 44px, then cancel the layout cost with a negative block margin: a flex item's outer margin-box is what sizes the line, so the row stays 20px and the input does not shift. The `gap: 16px` qualifier is load-bearing — Home has a `align-items: baseline ... margin-bottom: 10px` row of its own, at gap 12px. */ @media (max-width: 1024px) { div[style*="align-items: baseline"][style*="gap: 16px"][style*="margin-bottom: 10px"] { align-items: center !important; min-height: 20px !important; } div[style*="align-items: baseline"][style*="gap: 16px"][style*="margin-bottom: 10px"] > button { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; min-width: 56px !important; padding: 0px !important; margin: -12px 0px !important; font-size: 13px !important; } } /* --- 2.5 The centred auth stage (Login + Reset share this padding) ---------- */ @media (max-width: 768px) { [style*="padding: 64px 40px 96px"] { padding: 44px 20px 64px !important; } } @media (max-width: 480px) { [style*="padding: 64px 40px 96px"] { padding: 32px 16px 48px !important; } } @media (min-width: 769px) and (max-width: 1024px) { [style*="padding: 64px 40px 96px"] { padding: 60px 32px 80px !important; } } /* --- 2.6 Landscape phone: full-height centred pages ------------------------ 844x390 lands in the tablet band by width, but 136-168px of vertical padding pushes the CTA off a 390px-tall screen. Width-capped so an unusually short desktop window is never affected. */ @media (max-width: 1024px) and (max-height: 480px) and (orientation: landscape) { [style*="padding: 64px 40px 96px"], [style*="padding: 56px 40px 72px"], [style*="padding: 72px 40px 96px"] { padding-top: 24px !important; padding-bottom: 32px !important; align-items: flex-start !important; } header > div[style*="max-width: 1180px"] { min-height: 56px !important; } } /* ============================================================================= 3. HOME guard: body:has(#integrations) ============================================================================= */ @media (min-width: 769px) and (max-width: 1024px) { body:has(#integrations) section[style*="padding: 128px 40px"] { padding: 88px 32px !important; } body:has(#integrations) section[style*="padding: 112px 40px"] { padding: 80px 32px 0px !important; } body:has(#integrations) footer > div[style*="padding: 64px 40px 46px"] { padding: 56px 32px 40px !important; } body:has(#integrations) footer > div[style*="padding: 0px 40px 40px"] { padding: 0px 32px 36px !important; } /* 357px of buttons in a ~350px column at 769px. Exactly 2 matches: the hero CTA row and the closing-CTA row. */ body:has(#integrations) [style*="align-items: center; gap: 14px"] { flex-wrap: wrap !important; } /* nav links measured 31px, footer links 15px, preset buttons 35px. */ body:has(#integrations) header nav a, body:has(#integrations) header > div > a { display: inline-flex !important; align-items: center !important; min-height: 40px !important; } body:has(#integrations) footer [style*="flex-direction: column; gap: 10px"] { gap: 2px !important; } /* "Watch it settle" timeline: 4 x 116px cells clip "Card submitted". */ body:has(#integrations) [style*="column-gap: 24px; padding-top: 34px"] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; row-gap: 26px !important; } body:has(#integrations) [style*="right: -24px"] { display: none !important; } /* "Three steps": 213px columns clip the 216px phone mock. */ body:has(#integrations) #how [style*="height: 368px"][style*="padding: 24px"] { padding: 20px !important; } body:has(#integrations) [style*="width: 216px"] { max-width: 100% !important; } /* Pricing: 0.85/1.15 gives a 189px calculator column at 769px. */ body:has(#integrations) #pricing > div[style*="padding: 58px"] { padding: 40px !important; } body:has(#integrations) [style*="minmax(0px, 1fr) 296px"] { column-gap: 32px !important; } body:has(#integrations) [style*="minmax(0px, 0.85fr)"] { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) !important; column-gap: 32px !important; } /* Features: the 300px showcase panel does not fit its 273px column at 769px. */ body:has(#integrations) [style*="minmax(0px, 1.32fr)"] { column-gap: 32px !important; } body:has(#integrations) [style*="170px minmax(0px, 1fr)"] { grid-template-columns: 130px minmax(0px, 1fr) !important; column-gap: 20px !important; } body:has(#integrations) [style*="width: 300px"] { width: 100% !important; max-width: 300px !important; } body:has(#integrations) [style*="padding-top: 106px"] { padding-top: 64px !important; } /* Integrations: 4 cols leaves 72px for "WooCommerce". 12 items / 3 = 4 clean rows, so the i%4 border logic in the markup has to be re-derived. */ body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] > div { padding: 14px 16px !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] > div:not(:nth-child(3n)) { border-right: 1px solid rgba(255, 255, 255, 0.08) !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] > div:nth-child(3n) { border-right: none !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] > div:nth-child(-n+9) { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] > div:nth-child(n+10) { border-bottom: none !important; } /* VALUE-COUPLED PAIR: the marquee bleed strip's negative margin must always equal the CTA panel's padding, or it insets or overhangs. */ body:has(#integrations) [style*="padding: 56px 48px"] { padding: 44px 36px !important; } body:has(#integrations) [style*="margin: -56px -48px 46px"] { margin: -44px -36px 38px !important; } body:has(#integrations) footer > div[style*="minmax(0px, 1.6fr)"] { column-gap: 24px !important; } } @media (max-width: 768px) { /* --- rhythm (side gutters come from rule 1.3) --- */ body:has(#integrations) section[style*="padding: 128px 40px"] { padding: 76px 20px !important; } body:has(#integrations) section[style*="padding: 112px 40px"] { padding: 68px 20px 0px !important; } /* --- sticky header. The 4-link pill nav collapses to 9px wide and its links render OUTSIDE the bar (Features x=335-416 against a 375px viewport), where the root silently clips them. All four anchors (#how, #pricing, #features, #integrations) are repeated verbatim in the footer, so hiding the nav costs no destination. --- */ body:has(#integrations) header { padding: 10px 14px 0px !important; } body:has(#integrations) header > div[style*="height: 62px"] { height: auto !important; min-height: 58px !important; padding: 7px 8px 7px 14px !important; gap: 10px !important; } body:has(#integrations) header nav { display: none !important; } body:has(#integrations) header > div > div > a { padding: 0px 14px !important; } /* --- hero: 2-col grid -> stack. The right-hand demo was clipped and the floating receipt (left: -56px, width: 246px) hung 25px off-screen. --- */ body:has(#integrations) section[style*="minmax(0px, 1.06fr)"] { grid-template-columns: minmax(0px, 1fr) !important; min-height: 0px !important; row-gap: 6px !important; } body:has(#integrations) section[style*="minmax(0px, 1.06fr)"] > div[style*="padding: 64px 0px"] { padding: 30px 0px 0px !important; } body:has(#integrations) section[style*="minmax(0px, 1.06fr)"] h1 { margin-bottom: 22px !important; max-width: 100% !important; } body:has(#integrations) section[style*="minmax(0px, 1.06fr)"] > div[style*="padding-top: 60px"] { padding-top: 6px !important; justify-content: center !important; } /* the 172px well existed only to reserve room for the overlap */ body:has(#integrations) [style*="max-width: 436px"] { padding-bottom: 0px !important; max-width: 460px !important; } /* de-absolutise the receipt so it flows below the card as its own panel. The green success ring (inset: -1px) stays anchored: the card is still a positioned ancestor. */ body:has(#integrations) [style*="left: -56px"] { position: relative !important; left: auto !important; bottom: auto !important; width: 100% !important; margin-top: 16px !important; } body:has(#integrations) [style*="align-items: center; gap: 14px"] { flex-wrap: wrap !important; } /* --- trust band: 4 x 74px columns, one word per line. Two columns, and the JS divider logic re-derived for the new shape. --- */ body:has(#integrations) section[style*="padding: 0px 40px 8px"] [style*="repeat(4, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } body:has(#integrations) section[style*="padding: 0px 40px 8px"] [style*="padding: 34px"] { padding: 24px 14px !important; border-right: none !important; } body:has(#integrations) section[style*="padding: 0px 40px 8px"] [style*="padding: 34px"]:nth-child(odd) { padding-left: 0px !important; border-right: 1px solid rgba(255, 255, 255, 0.08) !important; } body:has(#integrations) section[style*="padding: 0px 40px 8px"] [style*="padding: 34px"]:nth-child(even) { padding-right: 0px !important; } body:has(#integrations) section[style*="padding: 0px 40px 8px"] [style*="padding: 34px"]:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } /* --- "Watch it settle" --- */ body:has(#integrations) [style*="padding: 46px 48px 48px"] { padding: 26px 20px 30px !important; } body:has(#integrations) [style*="gap: 28px; margin-bottom: 30px"] { gap: 8px !important; margin-bottom: 22px !important; } /* the fixed 236px track starved the left column to width: 0, so the clamp(40px, 6.6vw, 96px) amount painted on top of "Subscriber charged" */ body:has(#integrations) [style*="minmax(0px, 1fr) 236px"] { grid-template-columns: minmax(0px, 1fr) !important; row-gap: 20px !important; align-items: stretch !important; padding-bottom: 24px !important; } /* 4 x 32px timeline columns, ~1 character per line */ body:has(#integrations) [style*="column-gap: 24px; padding-top: 34px"] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; column-gap: 18px !important; row-gap: 22px !important; padding-top: 26px !important; } body:has(#integrations) [style*="right: -24px"] { display: none !important; } /* --- "Three steps": 3 x 82px cards around a 216px phone mock. column-gap: 24px is what separates this repeat(3,) from the hero checkout card's expiry/CVC/ZIP row (column-gap: 8px), which must stay three-up. This is the most likely regression on the page if that gap is ever edited. --- */ body:has(#integrations) #how > div:first-child { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; margin-bottom: 30px !important; } body:has(#integrations) #how [style*="repeat(3, minmax(0px, 1fr)); column-gap: 24px"] { grid-template-columns: minmax(0px, 1fr) !important; row-gap: 40px !important; } body:has(#integrations) #how [style*="height: 368px"] { max-width: 460px !important; } body:has(#integrations) [style*="width: 216px"] { max-width: 100% !important; } /* --- pricing + fee calculator. The input column measured 52px wide, the text input 6px, each preset button 22x35. --- */ body:has(#integrations) #pricing > div[style*="padding: 58px"] { padding: 26px 18px 30px !important; } body:has(#integrations) [style*="minmax(0px, 1fr) 296px"] { grid-template-columns: minmax(0px, 1fr) !important; row-gap: 24px !important; margin-bottom: 30px !important; } body:has(#integrations) [style*="gap: 36px"] { gap: 12px !important; } body:has(#integrations) [style*="gap: 36px"] > p { max-width: 100% !important; margin-bottom: 0px !important; } body:has(#integrations) [style*="minmax(0px, 0.85fr)"] { grid-template-columns: minmax(0px, 1fr) !important; row-gap: 30px !important; padding-top: 28px !important; } /* flex: 1 and width: 100% fight without this */ body:has(#integrations) #pricing input { min-width: 0px !important; } body:has(#integrations) #pricing button { padding: 0px 4px !important; } /* "space-between; gap: 24px" not bare "gap: 24px" — the latter also matches `column-gap: 24px` on two grids */ body:has(#integrations) [style*="space-between; gap: 24px"] { gap: 14px !important; } /* --- features: a 170px title track inside a row measuring 136px --- */ body:has(#integrations) [style*="minmax(0px, 1.32fr)"] { grid-template-columns: minmax(0px, 1fr) !important; row-gap: 34px !important; } body:has(#integrations) [style*="170px minmax(0px, 1fr)"] { grid-template-columns: minmax(0px, 1fr) !important; row-gap: 6px !important; padding: 16px 0px 16px 16px !important; } body:has(#integrations) [style*="padding-top: 106px"] { padding-top: 0px !important; } body:has(#integrations) [style*="width: 300px"] { width: 100% !important; max-width: 340px !important; } body:has(#integrations) section#features h2 { margin-bottom: 26px !important; } /* --- integrations directory: 4 x 74px cells, names ellipsized to nothing. 2 columns = 6 clean rows for 12 items; borders re-derived. --- */ body:has(#integrations) #integrations > div:first-child { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; margin-bottom: 22px !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] > div { padding: 13px 12px !important; gap: 10px !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] > div:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.08) !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] > div:nth-child(even) { border-right: none !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] > div:nth-child(-n+10) { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] > div:nth-child(n+11) { border-bottom: none !important; } /* --- closing CTA. Keep these two values in lockstep. --- */ body:has(#integrations) [style*="padding: 56px 48px"] { padding: 34px 20px !important; } body:has(#integrations) [style*="margin: -56px -48px 46px"] { margin: -34px -20px 28px !important; } body:has(#integrations) [style*="gap: 56px; flex-wrap: wrap"] { gap: 26px !important; } /* --- footer: four columns of 38px, links 15px tall --- */ body:has(#integrations) footer > div[style*="minmax(0px, 1.6fr)"] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; column-gap: 20px !important; row-gap: 26px !important; padding: 46px 20px 30px !important; } body:has(#integrations) footer > div[style*="minmax(0px, 1.6fr)"] > div:first-child { grid-column: 1 / -1 !important; } /* scoped under footer: the same substring also matches a feature-panel block */ body:has(#integrations) footer [style*="flex-direction: column; gap: 10px"] { gap: 0px !important; } body:has(#integrations) footer > div[style*="padding: 0px 40px 40px"] { padding: 0px 20px 34px !important; } } @media (max-width: 480px) { body:has(#integrations) section[style*="padding: 128px 40px"] { padding: 60px 16px !important; } body:has(#integrations) section[style*="padding: 112px 40px"] { padding: 56px 16px 0px !important; } /* header: drop the decorative arrow so logo + both auth buttons fit at 320px (measured bar 12-308, logo 25-93, Sign in 160-225, Sign Up 231-301) */ body:has(#integrations) header { padding: 8px 12px 0px !important; } body:has(#integrations) header > div[style*="height: 62px"] { padding: 6px 6px 6px 12px !important; gap: 8px !important; } body:has(#integrations) header > div > a > span { font-size: 19px !important; } body:has(#integrations) header > div > div { gap: 6px !important; } body:has(#integrations) header > div > div > a { font-size: 13px !important; padding: 0px 12px !important; } body:has(#integrations) header > div > div > a + a > span { display: none !important; } /* both button pairs measure ~357px against a ~288-350px column */ body:has(#integrations) [style*="align-items: center; gap: 14px"] { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } body:has(#integrations) [style*="align-items: center; gap: 14px"] > a { display: block !important; text-align: center !important; padding-top: 15px !important; padding-bottom: 15px !important; } body:has(#integrations) section[style*="minmax(0px, 1.06fr)"] > div[style*="padding: 64px 0px"] { padding-top: 22px !important; } body:has(#integrations) [style*="max-width: 436px"] [style*="padding: 22px"] { padding: 18px !important; } body:has(#integrations) [style*="padding: 0px 22px 22px"] { padding: 0px 18px 18px !important; } body:has(#integrations) [style*="padding: 46px 48px 48px"] { padding: 22px 16px 26px !important; } body:has(#integrations) [style*="column-gap: 24px; padding-top: 34px"] { grid-template-columns: minmax(0px, 1fr) !important; row-gap: 12px !important; } body:has(#integrations) [style*="column-gap: 24px; padding-top: 34px"] > div { padding-top: 26px !important; } body:has(#integrations) [style*="column-gap: 24px; padding-top: 34px"] > div > div[style*="min-height: 39px"] { min-height: 0px !important; margin-bottom: 8px !important; } body:has(#integrations) #pricing > div[style*="padding: 58px"] { padding: 22px 16px 26px !important; } body:has(#integrations) [style*="minmax(0px, 1fr) 296px"] > div:last-child { padding: 18px !important; } body:has(#integrations) #pricing input { font-size: 19px !important; } body:has(#integrations) #pricing button { font-size: 12.5px !important; } body:has(#integrations) [style*="space-between; gap: 24px"] { gap: 10px !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] > div { padding: 12px 10px !important; gap: 9px !important; } body:has(#integrations) #integrations [style*="repeat(4, minmax(0px, 1fr))"] > div > span:last-child > span:first-child { font-size: 13px !important; } body:has(#integrations) [style*="padding: 56px 48px"] { padding: 30px 16px !important; } body:has(#integrations) [style*="margin: -56px -48px 46px"] { margin: -30px -16px 24px !important; } body:has(#integrations) footer > div[style*="minmax(0px, 1.6fr)"] { padding: 40px 16px 26px !important; } body:has(#integrations) footer > div[style*="padding: 0px 40px 40px"] { padding: 0px 16px 30px !important; } } /* ============================================================================= 4. DASHBOARD guard: body:has(#pmArea) `aside` and `main` exist only on this page, but the guard is applied uniformly so the general->specific padding ordering below keeps working: `body:has(#pmArea) aside[style]` (1,1,2) still outranks `body:has(#pmArea) [style*="padding: 20px"]` (1,1,1). ============================================================================= */ @media (min-width: 769px) and (max-width: 1024px) { body:has(#pmArea) aside[style] { width: 200px !important; padding: 18px 12px !important; } body:has(#pmArea) header[style] { padding: 0px 20px !important; gap: 14px !important; } body:has(#pmArea) [style*="padding: 40px 44px 72px"] { padding: 28px 24px 56px !important; } body:has(#pmArea) [style*="padding: 26px 28px"] { padding: 22px 20px !important; } body:has(#pmArea) [style*="padding: 26px 28px 22px"] { padding: 22px 20px 18px !important; } body:has(#pmArea) [style*="padding: 24px 26px"] { padding: 22px 20px !important; } /* three 230px cards cannot hold "$1,188.00" at 26px mono plus a badge row */ body:has(#pmArea) [style*="repeat(3,"] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } body:has(#pmArea) [style*="grid-template-columns: 180px"] { grid-template-columns: 150px minmax(0px, 1fr) !important; gap: 14px !important; } /* Table cards become self-contained horizontal scrollers. The min-width is self-regulating: at 1024px it is inert, at 769px the 6-column tables scroll. */ body:has(#pmArea) [style*="border-radius: 10px"][style*="overflow: hidden"]:not([style*="text-overflow"]) { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; scrollbar-width: thin !important; } body:has(#pmArea) [style*="border-radius: 10px"][style*="overflow: hidden"]:not([style*="text-overflow"]) > *, body:has(#pmArea) [style*="border-radius: 10px"][style*="overflow: hidden"]:not([style*="text-overflow"]) [style*="grid-template-columns"] { min-width: 680px !important; } body:has(#pmArea) [style*="padding: 20px 24px"] { justify-content: flex-start !important; gap: 14px !important; } } @media (max-width: 768px) { /* --- shell: a 244px sticky sidebar beside main leaves ~146px of content at 390px, and everything is clipped. Stack it. --- */ body:has(#pmArea) [style*="z-index: 1"][style*="display: flex"][style*="min-height: 100vh"] { flex-direction: column !important; } /*
would size off a 0 basis in a column */ body:has(#pmArea) main[style] { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; } /* --- sidebar -> full-width wrapping bar. Row 1 = brand + user chip, row 2 = the Available balance as one baseline strip, row 3 = the 8 nav items as an edge-bleeding, scroll-snapping tab strip. No JS, no hamburger, all 8 reachable. --- */ body:has(#pmArea) aside[style] { width: 100% !important; height: auto !important; position: static !important; /* was sticky + 100vh: would eat the screen */ top: auto !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; padding: 10px 14px 8px !important; border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important; } body:has(#pmArea) aside > a:first-child { order: 0 !important; flex: 0 1 auto !important; padding: 2px !important; } body:has(#pmArea) aside > div:last-child { order: 1 !important; flex: 0 0 auto !important; margin-top: 0 !important; margin-left: auto !important; border-top: none !important; padding-top: 0 !important; padding-left: 0 !important; gap: 8px !important; } body:has(#pmArea) aside > div:last-child > div:nth-child(2) { flex: 0 1 auto !important; } /* 28x28 sign-out: keep the painted size, grow the hit area to 44x44 */ body:has(#pmArea) aside > div:last-child > a { position: relative !important; } body:has(#pmArea) aside > div:last-child > a::after { content: "" !important; position: absolute !important; inset: -8px !important; } body:has(#pmArea) aside > div:nth-child(2) { order: 2 !important; flex: 1 1 100% !important; padding: 2px 0 0 !important; } body:has(#pmArea) aside > div:nth-child(2) > div { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 4px 10px !important; padding: 9px 12px !important; } body:has(#pmArea) aside > div:nth-child(2) > div > div:nth-child(1) { margin-bottom: 0 !important; } body:has(#pmArea) aside > div:nth-child(2) > div > div:nth-child(2) { margin-bottom: 0 !important; font-size: 18px !important; } body:has(#pmArea) aside > div:nth-child(2) > div > div:nth-child(3) { margin-left: auto !important; } body:has(#pmArea) aside > nav { order: 3 !important; flex: 1 1 100% !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 6px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; scroll-snap-type: x proximity !important; scrollbar-width: none !important; margin: 0 -14px !important; padding: 2px 14px !important; } body:has(#pmArea) aside > nav::-webkit-scrollbar { display: none !important; } body:has(#pmArea) aside > nav > button { flex: 0 0 auto !important; white-space: nowrap !important; padding: 11px 14px !important; scroll-snap-align: start !important; } /* --- top bar: h1 + a 272px search + a 150px button is ~570px of content in 318px. Let it wrap into two rows. The two child groups have IDENTICAL style strings, so only structure separates them. --- */ body:has(#pmArea) header[style] { height: auto !important; min-height: 0 !important; flex-wrap: wrap !important; align-items: center !important; padding: 10px 16px !important; gap: 8px !important; } body:has(#pmArea) header > div:first-child, body:has(#pmArea) header > div:last-child { flex: 1 1 100% !important; min-width: 0 !important; } body:has(#pmArea) header > div:last-child { gap: 8px !important; } body:has(#pmArea) header h1 { font-size: 17px !important; } body:has(#pmArea) header div[style*="max-width: 272px"] { max-width: none !important; flex: 1 1 auto !important; min-height: 44px !important; } body:has(#pmArea) header button { flex: 0 0 auto !important; padding: 11px 14px !important; font-size: 13px !important; } body:has(#pmArea) header input { padding: 11px 0 !important; } /* --- gutters and card padding. ORDER MATTERS: these values are prefixes of one another ("padding: 20px" also matches "20px 24px" and "20px 14px"; "padding: 24px" matches "24px 26px"; "26px 28px" matches "26px 28px 22px"). General first, specific after, then aside/pre at higher specificity. --- */ body:has(#pmArea) [style*="padding: 40px 44px 72px"] { padding: 20px 16px 48px !important; } body:has(#pmArea) [style*="padding: 20px"] { padding: 16px !important; } body:has(#pmArea) [style*="padding: 24px"] { padding: 18px 16px !important; } body:has(#pmArea) [style*="padding: 26px 28px"] { padding: 18px 16px !important; } body:has(#pmArea) [style*="padding: 26px 28px 22px"] { padding: 18px 16px 14px !important; } body:has(#pmArea) [style*="padding: 24px 26px"] { padding: 18px 16px !important; } body:has(#pmArea) [style*="padding: 20px 24px"] { padding: 14px 16px !important; justify-content: flex-start !important; gap: 14px !important; } body:has(#pmArea) [style*="padding: 12px 24px"], body:has(#pmArea) [style*="padding: 13px 24px"], body:has(#pmArea) [style*="padding: 14px 24px"], body:has(#pmArea) [style*="padding: 15px 24px"], body:has(#pmArea) [style*="padding: 16px 24px"] { padding-left: 16px !important; padding-right: 16px !important; } body:has(#pmArea) [style*="padding: 10px 12px"] { padding: 12px !important; } /* settings inputs */ body:has(#pmArea) pre[style] { padding: 14px !important; font-size: 12px !important; line-height: 1.65 !important; } /* --- wide tables scroll INSIDE their own glass panel. The :not() spares the Payment-links URL pill, which shares border-radius: 10px + overflow: hidden but needs it for text-overflow: ellipsis. Verified: this pairing exists on the Dashboard and nowhere else on the site. --- */ body:has(#pmArea) [style*="border-radius: 10px"][style*="overflow: hidden"]:not([style*="text-overflow"]) { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; scrollbar-width: thin !important; } body:has(#pmArea) [style*="border-radius: 10px"][style*="overflow: hidden"]:not([style*="text-overflow"]) > *, body:has(#pmArea) [style*="border-radius: 10px"][style*="overflow: hidden"]:not([style*="text-overflow"]) [style*="grid-template-columns"] { min-width: 680px !important; } body:has(#pmArea) [style*="border-radius: 10px"][style*="overflow: hidden"]:not([style*="text-overflow"])::-webkit-scrollbar { height: 6px !important; } body:has(#pmArea) [style*="border-radius: 10px"][style*="overflow: hidden"]:not([style*="text-overflow"])::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22) !important; border-radius: 999px !important; } body:has(#pmArea) [style*="border-radius: 10px"][style*="overflow: hidden"]:not([style*="text-overflow"])::-webkit-scrollbar-track { background: transparent !important; } /* --- grids that must stack rather than scroll --- */ body:has(#pmArea) [style*="grid-template-columns: 180px"] { grid-template-columns: minmax(0px, 1fr) !important; gap: 8px !important; align-items: start !important; } body:has(#pmArea) [style*="repeat(3,"] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } /* auto-fit minmax(158px) would drop to one column at 326px; force a 2x2 */ body:has(#pmArea) [style*="minmax(158px,"] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; column-gap: 16px !important; row-gap: 18px !important; } /* repeat(auto-fit, minmax(360px, 1fr)) already collapses on its own */ /* --- donut cards: an 88/124px ring beside its figures leaves ~164px for rows needing ~191px. [display: flex] is what excludes the hero stat grid, whose serialized `row-gap: 22px` contains the same substring. --- */ body:has(#pmArea) [style*="gap: 22px"][style*="display: flex"] { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; } /* --- disputes banner --- */ body:has(#pmArea) [style*="padding: 22px 24px"] { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding: 18px 16px !important; } body:has(#pmArea) [style*="padding: 22px 24px"] > div:last-child { text-align: left !important; } /* --- transaction filter row. align-items: center is required, or this also catches the link-card price row (align-items: baseline, same gap and margin-bottom). --- */ body:has(#pmArea) [style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"] { flex-wrap: wrap !important; row-gap: 8px !important; } body:has(#pmArea) [style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"] > button { padding: 11px 14px !important; } body:has(#pmArea) [style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"] > div { flex: 1 1 100% !important; margin-left: 0 !important; } /* --- remaining touch targets --- */ body:has(#pmArea) button[style*="padding: 7px 13px"] { padding: 11px 13px !important; } /* 7d/14d/30d/90d */ /* THE ONE EXEMPTION to the global 44px button floor: this pill's painted size is load-bearing. Keep 42x24 and grow the hit area to 58x48 with ::after. */ body:has(#pmArea) button[style*="width: 42px"][style*="height: 24px"] { min-height: 0 !important; position: relative !important; } body:has(#pmArea) button[style*="width: 42px"][style*="height: 24px"]::after { content: "" !important; position: absolute !important; inset: -12px -8px !important; } body:has(#pmArea) [style*="justify-content: flex-end"][style*="gap: 20px"] { justify-content: flex-start !important; gap: 6px 14px !important; } /* DELIBERATELY ABSENT: the chart box keeps height: 250px. Its gridlines, end marker, hover dots and hover card are positioned in pixels computed against 250 in overviewVals(); any height change desynchronises them from the SVG. Only the horizontal gutter is retuned, at <=480px. */ } @media (max-width: 480px) { body:has(#pmArea) [style*="padding: 40px 44px 72px"] { padding: 16px 14px 40px !important; } body:has(#pmArea) header[style] { padding: 9px 14px !important; } body:has(#pmArea) header h1 { font-size: 16px !important; } body:has(#pmArea) aside[style] { padding: 9px 12px 8px !important; } body:has(#pmArea) aside > nav { margin: 0 -12px !important; padding: 2px 12px !important; } /* 2-up leaves ~150px, too narrow for "$1,188.00" at 26px */ body:has(#pmArea) [style*="repeat(3,"] { grid-template-columns: repeat(1, minmax(0px, 1fr)) !important; } /* chart: reclaim the 52px y-axis gutter (height untouched) and drop 3 of the 6 date labels, which otherwise shrink-wrap onto two lines each */ body:has(#pmArea) [style*="left: 52px"] { left: 38px !important; } body:has(#pmArea) [style*="width: 40px"][style*="text-align: right"] { width: 30px !important; } body:has(#pmArea) [style*="left: 0px"][style*="right: 0px"][style*="gap: 12px"] { gap: 8px !important; } body:has(#pmArea) [style*="margin: 12px 0px 0px 52px"] { margin-left: 38px !important; } body:has(#pmArea) [style*="margin: 12px 0px 0px 52px"] > span:nth-child(2), body:has(#pmArea) [style*="margin: 12px 0px 0px 52px"] > span:nth-child(3), body:has(#pmArea) [style*="margin: 12px 0px 0px 52px"] > span:nth-child(5) { display: none !important; } body:has(#pmArea) [style*="min-width: 178px"] { min-width: 148px !important; padding: 9px 11px !important; } /* Settings "Your rate": a 32px figure beside wrapping copy */ body:has(#pmArea) [style*="padding: 18px 20px"] { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding: 16px !important; } body:has(#pmArea) pre[style] { font-size: 11.5px !important; padding: 12px !important; } } /* ============================================================================= 5. STATUS guard: body:has([style*="210px minmax(0px, 1fr) 70px"]) ============================================================================= */ @media (min-width: 769px) and (max-width: 1024px) { /* At 769px the three fixed tracks (210 + 70 + 2x26 gap = 332px) leave the strip ~305px against a 313.5px min-content, so the 90 bars still spill. Narrow the fixed tracks rather than restructuring the row. */ body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="grid-template-columns: 210px minmax(0px, 1fr) 70px"] { grid-template-columns: 148px minmax(0px, 1fr) 58px !important; column-gap: 16px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) [style*="padding: 64px 40px 92px"] { padding: 56px 28px 76px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) [style*="padding: 26px 40px"] { padding-left: 28px !important; padding-right: 28px !important; } } @media (max-width: 768px) { body:has([style*="210px minmax(0px, 1fr) 70px"]) [style*="padding: 64px 40px 92px"] { padding: 44px 20px 64px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) [style*="padding: 26px 40px"] { padding: 22px 20px !important; gap: 10px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) header > div > div { gap: 18px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) header > div > div > a { font-size: 14px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) h1 { margin: 0px 0px 26px -0.012em !important; } /* status banner: stop it fighting for two columns, and reset the right block's text-align once it drops to its own line */ body:has([style*="210px minmax(0px, 1fr) 70px"]) h1 + div { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; padding: 20px 18px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) h1 + div > div:last-child { text-align: left !important; } /* 3-up metric row: keep three across, but stop the 34px monospace figures bursting their 24px padding. The margin qualifier keeps this off any other repeat(3,) grid. */ body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="repeat(3, minmax(0px, 1fr))"][style*="margin: 14px 0px 44px"] { gap: 10px !important; margin: 12px 0px 30px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="repeat(3, minmax(0px, 1fr))"][style*="margin: 14px 0px 44px"] > div { padding: 16px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="repeat(3, minmax(0px, 1fr))"][style*="margin: 14px 0px 44px"] > div > div:last-child { font-size: 27px !important; } /* "Components" heading + the 7/30/90 toggle: give the three buttons the full row as equal thumb-sized targets (they were ~37px tall) */ body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="align-items: flex-end"][style*="justify-content: space-between"] { gap: 14px !important; margin-bottom: 14px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="align-items: flex-end"] > div[style*="gap: 7px"] { width: 100% !important; gap: 8px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) button[style*="padding: 9px 15px"] { flex: 1 1 0 !important; padding: 12px 10px !important; font-size: 13px !important; text-align: center !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 6px 26px 20px"] { padding: 4px 16px 16px !important; border-radius: 14px !important; } /* THE TABLE. 210 + 70 + 52 = 332px of fixed track does not fit a 326px content box, so the 1fr strip track is crushed to zero and the row still overruns the card. Two tracks: name left, uptime right, and the 90-bar strip gets its own full-width second line. Deliberately NOT six independent scrollers — that would desync the shared time axis and the hover tooltips never fire on touch anyway. */ body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="grid-template-columns: 210px minmax(0px, 1fr) 70px"] { grid-template-columns: minmax(0px, 1fr) auto !important; column-gap: 12px !important; } /* header row: drop the orphaned "Last N days" caption */ body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="grid-template-columns: 210px minmax(0px, 1fr) 70px"][style*="padding: 16px 0px 13px"] > span:nth-child(2) { display: none !important; } /* axis row: single track so "N days ago / Today" spans full width */ body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="grid-template-columns: 210px minmax(0px, 1fr) 70px"][style*="padding: 16px 0px 4px"] { grid-template-columns: minmax(0px, 1fr) !important; } /* the six data rows (uniquely "padding: 17px 0px" from c.rowStyle) */ body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 17px 0px"] { row-gap: 12px !important; padding: 14px 0px !important; align-items: center !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 17px 0px"] > div:first-child { grid-row: 1 !important; grid-column: 1 !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 17px 0px"] > span:last-child { grid-row: 1 !important; grid-column: 2 !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 17px 0px"] > div:nth-child(2) { grid-row: 2 !important; grid-column: 1 / -1 !important; } /* the 90 bars refuse to go below their 2px min-width; flex: 1 1 0 still grows them, so this floor only engages when space is genuinely tight */ body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="align-items: stretch"] > span[data-day], body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="align-items: stretch"] > span[style*="min-width: 2px"] { min-width: 1px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 20px 2px 0px"] { gap: 12px 18px !important; padding: 16px 0px 0px !important; } /* incident history: a 150px date column leaves ~174px for title, badge, body and the "Affected:" line */ body:has([style*="210px minmax(0px, 1fr) 70px"]) h2[style*="margin: 60px 0px 20px"] { margin: 40px 0px 16px -0.01em !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="grid-template-columns: 150px minmax(0px, 1fr)"] { grid-template-columns: minmax(0px, 1fr) !important; row-gap: 8px !important; padding: 20px 0px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="grid-template-columns: 150px minmax(0px, 1fr)"] > div:first-child { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 10px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="grid-template-columns: 150px minmax(0px, 1fr)"] > div:first-child > div { margin-bottom: 0px !important; } /* subscribe card: the input is a hard width: 230px in a ~266px content box */ body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 28px 30px"] { padding: 22px 18px !important; gap: 16px !important; margin-top: 34px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 28px 30px"] > div:last-child { width: 100% !important; gap: 10px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) input[type="text"] { width: 100% !important; flex: 1 1 100% !important; min-height: 46px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) button[style*="padding: 14px 22px"] { width: 100% !important; min-height: 46px !important; } } @media (max-width: 480px) { body:has([style*="210px minmax(0px, 1fr) 70px"]) [style*="padding: 64px 40px 92px"] { padding: 34px 16px 52px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) [style*="padding: 26px 40px"] { padding: 20px 16px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) h1 { margin: 0px 0px 22px -0.012em !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) h1 + div { padding: 18px 16px !important; gap: 14px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) h1 + div > div:first-child { gap: 12px !important; } /* 62px of content width cannot hold a 34px monospace figure: stack, and read each card as one label/value line instead of a tall box */ body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="repeat(3, minmax(0px, 1fr))"][style*="margin: 14px 0px 44px"] { grid-template-columns: minmax(0px, 1fr) !important; gap: 8px !important; margin: 10px 0px 26px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="repeat(3, minmax(0px, 1fr))"][style*="margin: 14px 0px 44px"] > div { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; padding: 14px 16px !important; min-height: 62px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="repeat(3, minmax(0px, 1fr))"][style*="margin: 14px 0px 44px"] > div > div:first-child { margin-bottom: 0px !important; font-size: 10.5px !important; max-width: 58% !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="repeat(3, minmax(0px, 1fr))"][style*="margin: 14px 0px 44px"] > div > div:last-child { font-size: 26px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 6px 26px 20px"] { padding: 2px 14px 14px !important; } /* Only the 90-day strip is tight (gap: 1.5px is the days > 60 branch of stripStyle); the 30d (3px) and 7d (6px) strips are left alone. With gap 1px and a 1px floor, 90 bars need 179px against ~326px available at 390px. */ body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="align-items: stretch"][style*="gap: 1.5px"] { gap: 1px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="align-items: stretch"] > span[data-day], body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="align-items: stretch"] > span[style*="min-width: 2px"] { min-width: 1px !important; height: 26px !important; border-radius: 1px !important; } /* the JS clamps the tooltip's centre to 84px from each edge, so its rendered width must stay under 168px to remain inside the strip */ body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="bottom: calc(100% + 12px)"] { min-width: 148px !important; max-width: 70vw !important; padding: 11px 13px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 17px 0px"] > div:first-child > div > div:first-child { font-size: 13.5px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 17px 0px"] > span:last-child { font-size: 12.5px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 28px 30px"] { padding: 20px 16px !important; } body:has([style*="210px minmax(0px, 1fr) 70px"]) div[style*="padding: 28px 30px"] > div:last-child { flex-direction: column !important; align-items: stretch !important; } } /* ============================================================================= 6. CREATE ACCOUNT guard: body:has([style*="minmax(0px, 1.02fr)"]) ============================================================================= */ @media (min-width: 769px) and (max-width: 1024px) { [style*="padding: 56px 40px 72px"] { padding: 48px 28px 64px !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="minmax(0px, 1.02fr)"] { column-gap: 40px !important; } } @media (max-width: 768px) { /* body region: "padding: 56px 40px 72px" is unique to this page. flex-start so a form taller than the viewport is never centred off-screen. */ [style*="padding: 56px 40px 72px"] { padding: 36px 20px 56px !important; align-items: flex-start !important; } /* THE STACK. minmax(0px, 1.02fr) minmax(0px, 0.98fr) with column-gap: 72px leaves 238px to split at 390px — a ~121px form column and a ~117px card. The `gap` shorthand also zeroes the inline column-gap. The 560px cap stops a 768px tablet rendering a 700px-wide text field; DOM order already puts the form first, which is the right mobile priority. */ body:has([style*="minmax(0px, 1.02fr)"]) div[style*="minmax(0px, 1.02fr)"] { grid-template-columns: minmax(0px, 1fr) !important; gap: 34px !important; align-items: stretch !important; max-width: 560px !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="max-width: 430px"] { max-width: 100% !important; width: 100% !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="justify-content: flex-end"] { justify-content: center !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="max-width: 400px"] { max-width: 100% !important; padding: 26px 22px 28px !important; } /* the h1 carries a malformed 4th margin value (-0.012em, an author typo for letter-spacing) that bleeds it past the gutter */ body:has([style*="minmax(0px, 1.02fr)"]) h1 { margin: 0 0 12px !important; } body:has([style*="minmax(0px, 1.02fr)"]) h1 + p { font-size: 15px !important; margin: 0 0 28px !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="gap: 18px"] { gap: 16px !important; } /* password strength meter: a 3px hairline under a 10px glow is invisible on a phone. Background/box-shadow stay with the JS object so the colour ramp and the 260ms transition still run. */ body:has([style*="minmax(0px, 1.02fr)"]) div[style*="gap: 5px"] { gap: 6px !important; margin-top: 12px !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="gap: 5px"] > span { height: 4px !important; border-radius: 3px !important; min-width: 0 !important; } /* requirement chips + strength word: a full-score password needs ~300px in a 288px column. Let the row wrap rather than crush the chips. */ body:has([style*="minmax(0px, 1.02fr)"]) div[style*="margin-top: 9px"] { flex-wrap: wrap !important; gap: 6px 12px !important; margin-top: 10px !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="gap: 14px"] { gap: 6px 12px !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="gap: 14px"] > span, body:has([style*="minmax(0px, 1.02fr)"]) div[style*="margin-top: 9px"] > span { font-size: 12px !important; } /* terms row: the whole row is the toggle, so guarantee 44px and make the 17px box read as a control. Anchored on width/height — the only properties the terms-on/terms-off style object never rewrites. */ body:has([style*="minmax(0px, 1.02fr)"]) div[style*="gap: 11px"][style*="cursor: pointer"] { align-items: flex-start !important; gap: 12px !important; padding: 8px 0 !important; min-height: 44px !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="cursor: pointer"] > span[style*="width: 17px"] { width: 20px !important; height: 20px !important; font-size: 12px !important; border-radius: 6px !important; margin-top: 0 !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="gap: 11px"][style*="cursor: pointer"] > span:last-child { font-size: 13px !important; line-height: 1.5 !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="border-radius: 9px"] { padding: 12px 14px !important; } /* benefit rows are `14px minmax(0px, 1fr)` — the tick + copy pairing is correct at any width, so this grid is tightened, never collapsed. */ body:has([style*="minmax(0px, 1.02fr)"]) div[style*="grid-template-columns: 14px"] { padding: 12px 0 !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="padding-top: 22px"] { padding-top: 18px !important; } } @media (max-width: 480px) { [style*="padding: 56px 40px 72px"] { padding: 28px 16px 44px !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="minmax(0px, 1.02fr)"] { gap: 28px !important; max-width: 100% !important; } /* 36px at line-height 0.9 puts two wrapped lines almost on top of each other */ body:has([style*="minmax(0px, 1.02fr)"]) h1 { line-height: 0.95 !important; margin: 0 0 10px !important; } body:has([style*="minmax(0px, 1.02fr)"]) h1 + p { font-size: 14.5px !important; margin: 0 0 24px !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="max-width: 400px"] { padding: 22px 18px 24px !important; border-radius: 18px !important; } /* card eyebrow. The direct-child combinator is what keeps this off the identically-sized 10px checkbox glyph — do not loosen it. */ body:has([style*="minmax(0px, 1.02fr)"]) div[style*="max-width: 400px"] > span { font-size: 11px !important; letter-spacing: 0.16em !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="grid-template-columns: 14px"] { padding: 11px 0 !important; column-gap: 10px !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="gap: 14px"] { gap: 4px 10px !important; } body:has([style*="minmax(0px, 1.02fr)"]) div[style*="gap: 14px"] > span, body:has([style*="minmax(0px, 1.02fr)"]) div[style*="margin-top: 9px"] > span { font-size: 11.5px !important; } } /* ============================================================================= 7. LOGIN guard: body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) Stage padding, header bar, inputs, primary CTA and the Show/Hide toggle all come from sections 1 and 2. What is left is this page's card rhythm. ============================================================================= */ @media (max-width: 768px) { body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) div[style*="gap: 11px"][style*="margin-bottom: 26px"] { margin-bottom: 22px !important; } body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) h1 { margin-bottom: 12px !important; } body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) h1 + p { margin-bottom: 30px !important; } /* field stack. The gap qualifier is mandatory — the root shell is also a flex column, and would otherwise be caught. */ body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) div[style*="flex-direction: column"][style*="gap: 20px"] { gap: 18px !important; } body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) input { padding: 13px 14px !important; border-radius: 10px !important; appearance: none !important; -webkit-appearance: none !important; } /* conditional error panel — only rendered when hasError. Submit with an empty password to see it. */ body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) div[style*="align-items: flex-start"] { padding: 12px 13px !important; } body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) div[style*="align-items: flex-start"] > span { font-size: 13px !important; } /* links row. flex-wrap is the disambiguator — the header bar and the password row also use space-between, but neither wraps. */ body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] { align-items: center !important; gap: 12px 20px !important; min-height: 44px !important; } body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] > a { display: inline-flex !important; align-items: center !important; min-height: 44px !important; touch-action: manipulation !important; } /* "No account? Create one" — the span must NOT become a flex container, or its text node and its anchor become separate flex items and the space in the sentence disappears. Block + line-height gives the 44px box; inline padding on the anchor grows the touch region without moving the line. */ body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] > span { display: block !important; min-height: 44px !important; line-height: 44px !important; } body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] > span > a { padding: 13px 6px !important; margin: 0px -6px !important; touch-action: manipulation !important; } } @media (max-width: 480px) { body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) header a[style*="font-size: 12.5px"] { font-size: 13px !important; } body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) div[style*="gap: 11px"][style*="margin-bottom: 26px"] { margin-bottom: 18px !important; } body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) h1 + p { font-size: 15px !important; margin-bottom: 26px !important; } body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) div[style*="flex-direction: column"][style*="gap: 20px"] { gap: 16px !important; } body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] > a, body:has([style*="padding: 64px 40px 96px"]):has([style*="align-items: baseline"]) div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] > span { font-size: 13px !important; } } /* ============================================================================= 8. RESET PASSWORD guard: body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) Both states (isRequest / isSent) are covered by the same rules — they share the eyebrow row, the h1 clamp, the body copy, the glass panel and the footer line. No `>` combinator ever crosses an . ============================================================================= */ @media (min-width: 769px) and (max-width: 1024px) { /* resend countdown (resendStyle -> background: transparent; padding: 0px) */ body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) div[style*="justify-content: space-between"][style*="padding-top: 18px"] > button { display: inline-flex !important; align-items: center !important; margin: -12px 0px !important; } } @media (max-width: 768px) { /* The glass panel, BOTH states in one rule. `border-radius: 18px` is NOT unique site-wide — Home has two 18px-radius panels of its own — so this must stay behind the page guard. */ body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) div[style*="border-radius: 18px"] { padding: 22px 18px 24px !important; } body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) input { padding: 13px 14px !important; border-radius: 10px !important; } /* zero padding on 12.5px text is a ~15px target. The negative margin keeps the row's own 18px top padding from visually doubling. */ body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) div[style*="justify-content: space-between"][style*="padding-top: 18px"] > button { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; padding: 0px 2px !important; margin: -12px -2px !important; font-size: 13px !important; } /* the countdown label is dynamic and nowrap; let it drop rather than clip */ body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) div[style*="justify-content: space-between"][style*="padding-top: 18px"] { flex-wrap: wrap !important; gap: 4px 12px !important; } /* the sent state prints the user's own address into body copy; an email is one unbreakable token and would be clipped, not scrolled (rule 1.4 covers the wrapping). Font size distinguishes this p from the 404's 15.5px one. */ body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) p[style*="margin: 0px 0px 34px"] { margin: 0px 0px 26px !important; font-size: 14.5px !important; } body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) p[style*="margin: 22px 0px 0px"] { margin: 18px 0px 0px !important; font-size: 13px !important; line-height: 1.75 !important; } /* the sent state puts two links inside one sentence */ body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) p a { display: inline-block !important; padding: 3px 0px !important; } } @media (max-width: 480px) { body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) div[style*="border-radius: 18px"] { padding: 20px 16px 22px !important; border-radius: 16px !important; } body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) header a span[style*="font-size: 21px"] { font-size: 19px !important; } body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) div[style*="margin-bottom: 24px"] { margin-bottom: 18px !important; } /* clamp(34px, 4.2vw, 52px) already pins to its 34px floor at 390px — correct, do not fight it. Only the 0.92 leading and -0.05em tracking need air now that the headline runs to two or three lines. */ body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) h1 { line-height: 0.98 !important; letter-spacing: -0.04em !important; } body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) label { margin-bottom: 8px !important; } body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) div[style*="padding: 11px 13px"] { padding: 10px 12px !important; margin-top: 12px !important; } body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) div[style*="padding: 11px 13px"] span { font-size: 12.5px !important; line-height: 1.45 !important; } body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) div[style*="align-items: flex-start"][style*="gap: 12px"] { gap: 10px !important; padding-bottom: 16px !important; } body:has([style*="padding: 64px 40px 96px"]):not(:has([style*="align-items: baseline"])) button[style*="width: 100%"] { margin-top: 16px !important; } } /* ============================================================================= 9. 404 guard: body:has([style*="padding: 72px 40px 96px"]) ============================================================================= */ @media (min-width: 769px) and (max-width: 1024px) { [style*="padding: 72px 40px 96px"] { padding: 64px 40px 80px !important; } /* the CTAs compute to ~44.1px — right on the limit, with no margin for a different font fallback */ body:has([style*="padding: 72px 40px 96px"]) [style*="gap: 16px"][style*="flex-wrap: wrap"] > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; } } @media (max-width: 768px) { /* 40px gutters leave a 310px column; the h1 needs ~322px at its 26px clamp floor and so wraps purely because of the gutter */ [style*="padding: 72px 40px 96px"] { padding: 56px 20px 64px !important; } [style*="padding: 22px 40px"] { padding: 20px 20px !important; gap: 10px !important; } body:has([style*="padding: 72px 40px 96px"]) header a:last-child { font-size: 13px !important; padding: 0px 4px !important; margin-right: -4px !important; /* keeps it flush to the new gutter */ } /* the two CTAs still fit side by side down to ~440px, so they are NOT stacked here — only raised to a real 48px target */ body:has([style*="padding: 72px 40px 96px"]) [style*="gap: 16px"][style*="flex-wrap: wrap"] > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; padding: 12px 22px !important; } } @media (max-width: 480px) { [style*="padding: 72px 40px 96px"] { padding: 40px 18px 52px !important; } [style*="padding: 22px 40px"] { padding: 18px 18px !important; } /* The numeral's clamp(96px, 15vw, 208px) never leaves its floor on a phone — 15vw only overtakes 96px above a 640px viewport — so it is a flat 96px at 320px and at 480px alike. Re-anchor the ramp to the phone range: 320 -> 88px, 390 -> 101px, 430 -> 112px, 480 -> 125px. Worst case ~189px inside a 444px column, so there is no overflow risk. Two selectors for redundancy: line-height is the stable hook, the clamp string the backup. */ body:has([style*="padding: 72px 40px 96px"]) [style*="line-height: 0.78"], body:has([style*="padding: 72px 40px 96px"]) [style*="clamp(96px, 15vw, 208px)"] { font-size: clamp(88px, 26vw, 128px) !important; margin-bottom: 20px !important; } /* line-height: 0.98 is a display setting that assumes one line */ body:has([style*="padding: 72px 40px 96px"]) h1 { line-height: 1.06 !important; margin-bottom: 14px !important; } body:has([style*="padding: 72px 40px 96px"]) p { margin-bottom: 26px !important; } /* ~366px of buttons against 354px available: flex-wrap fires anyway, so make it a deliberate full-bleed stack rather than a ragged two-line drop */ body:has([style*="padding: 72px 40px 96px"]) [style*="gap: 16px"][style*="flex-wrap: wrap"] { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } body:has([style*="padding: 72px 40px 96px"]) [style*="gap: 16px"][style*="flex-wrap: wrap"] > a { width: 100% !important; min-height: 50px !important; font-size: 15px !important; padding: 14px 20px !important; } /* space-between already breaks the two 12px spans onto separate flex lines; state the stack explicitly and tighten the inherited 20px gap */ body:has([style*="padding: 72px 40px 96px"]) [style*="padding: 22px 40px"] { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; } /* "Email support" is inline in running text: padding grows the hit area, the equal negative margin keeps the sentence on its baseline */ body:has([style*="padding: 72px 40px 96px"]) [style*="padding: 22px 40px"] a { display: inline-block !important; padding: 6px 2px !important; margin: -6px -2px !important; } } /* ============================================================================= OPEN RISKS — verify these in a browser 1. :has() carries every page block. If it is ever unsupported, the page blocks silently no-op and only sections 1-2 apply: degraded, not broken. Sanity check: document.querySelectorAll('body:has(#pmArea)').length. 2. Home's `[style*="align-items: center; gap: 14px"]` (2 matches: hero CTA row + closing CTA row) depends on declaration ORDER surviving serialization. If someone reorders the source, it silently stops matching. 3. Home's `#how [style*="repeat(3, minmax(0px, 1fr)); column-gap: 24px"]` is separated from the hero checkout card's 3-up expiry/CVC/ZIP row only by the column gap (24 vs 8). If that gap changes, #how reverts to three 82px columns — the most likely regression on the site. 4. The Dashboard's nth-child work (aside children 1-4, header groups, the six x-axis labels) assumes sc-for/sc-if compile to React Fragments with no wrapper element. Confirmed in support.js today. 5. Status bars: confirm `gap: 1.5px` really serializes fractionally. If it rounds, the 90-day gap override misses; the fallback is a blanket `gap: 1px` on the strip, at the cost of welding the 7-day bars together. 6. Chrome evaluates media queries against window.innerWidth, which INCLUDES the classic scrollbar. A desktop QA pass at a "1024px window" is really testing ~1009px of layout. ============================================================================= */