/* RostoPay — global responsive overrides for the static HTML site. The pages ship with fixed inline styles (grids, 72px padding, 40px+ type). This stylesheet is injected at the END of and uses !important to beat inline styles on tablet and mobile breakpoints, while leaving the desktop layout untouched. IMPORTANT: browsers normalize the inline style attribute to add a space after every colon (`max-width: 1200px`, not `max-width:1200px`), so all attribute selectors below match the *serialized* form. */ /* Invisible scrollbar everywhere */ ::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } html { scrollbar-width: none !important; -ms-overflow-style: none !important; } html, body { -webkit-overflow-scrolling: touch; } /* No horizontal scrolling on any page / any viewport. `clip` (not `hidden`) so it never turns html/body into a scroll container and never breaks vertical page scrolling. */ html, body { max-width: 100% !important; overflow-x: clip !important; overflow-y: visible !important; } /* Fallback for older Safari (< 16) which does not support overflow-x: clip */ @supports not (overflow-x: clip) { html, body { overflow-x: hidden !important; } } @media (max-width: 900px) { html, body { max-width: 100vw; overflow-x: hidden; } img, video, svg, canvas, iframe { max-width: 100%; height: auto; } } /* Prevent overly-long words from forcing horizontal overflow. Scope excludes nav/footer link text — those should stay intact. */ @media (max-width: 900px) { main h1, main h2, main h3, main h4, main p, header h1, header h2, header h3, header p, section h1, section h2, section h3, section p { overflow-wrap: anywhere; word-break: normal; } /* Grid items default to min-width: auto, which lets them exceed a 1fr track. Reset so `grid-template-columns: 1fr` actually constrains the child column width to the track. */ [style*="grid-template-columns"] > * { min-width: 0 !important; max-width: 100% !important; } } /* ---------------- Tablet (≤ 1024px) ---------------- */ @media (max-width: 900px) { nav[style*="max-width: 1200px"], header[style*="max-width: 1200px"], section[style*="max-width: 1200px"], footer[style*="max-width: 1200px"], div[style*="max-width: 1200px"] { padding-left: 32px !important; padding-right: 32px !important; box-sizing: border-box !important; } header[style*="max-width: 1200px"] > div[style*="border-radius"], section[style*="max-width: 1200px"] > div[style*="border-radius"], div[style*="border-radius: 32px"], div[style*="border-radius: 28px"] { padding-left: 40px !important; padding-right: 40px !important; } /* Two-column grids collapse to one column on tablet */ [style*="grid-template-columns: 1.05fr 0.95fr"], [style*="grid-template-columns: 1.15fr 0.85fr"], [style*="grid-template-columns: 1fr 1.1fr"], [style*="grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 40px !important; } /* 3-col and 4-col grids -> 2 cols on tablet */ [style*="grid-template-columns: repeat(3, 1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Hide the horizontal link row on tablet too — keeps the CTA row clean */ nav[style*="max-width: 1200px"] > div[style*="font-size: 14px"][style*="font-weight: 600"] { display: none !important; } /* Hide Sign in + Enroll (burger drawer handles them) at tablet too */ nav[style*="max-width:1200px"] > div[style*="flex-shrink:0"], nav[style*="max-width: 1200px"] > div[style*="flex-shrink: 0"], nav > div:has(> a[href*="Signin"]), nav > div:has(> a[href*="Enroll"]) { display: none !important; } } /* ---------------- Mobile (≤ 640px) ---------------- */ @media (max-width: 640px) { nav[style*="max-width: 1200px"], header[style*="max-width: 1200px"], section[style*="max-width: 1200px"], footer[style*="max-width: 1200px"], div[style*="max-width: 1200px"] { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } section[style*="max-width: 1200px"] { padding-top: 56px !important; padding-bottom: 56px !important; } header[style*="max-width: 1200px"] > div[style*="border-radius"], section[style*="max-width: 1200px"] > div[style*="border-radius"], div[style*="border-radius: 32px"], div[style*="border-radius: 28px"] { padding: 40px 20px !important; border-radius: 22px !important; } /* Catch-all: every grid becomes single column */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 24px !important; } /* Nav layout: allow wrapping */ nav[style*="max-width: 1200px"] { flex-wrap: wrap !important; gap: 12px !important; padding-top: 14px !important; padding-bottom: 14px !important; } /* Nav's inner link groups: wrap and center */ nav[style*="max-width: 1200px"] > div[style*="display: flex"] { flex-wrap: wrap !important; justify-content: center !important; gap: 10px 14px !important; max-width: 100% !important; } /* Hide the long horizontal link row on mobile — dropdowns still work via CTA */ nav[style*="max-width: 1200px"] > div[style*="font-size: 14px"][style*="font-weight: 600"] { display: none !important; } /* Headings: fluid downsize */ h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.12 !important; } h2 { font-size: clamp(22px, 6vw, 32px) !important; line-height: 1.18 !important; } h3 { font-size: clamp(18px, 5vw, 22px) !important; line-height: 1.25 !important; } /* Any inline max-width on copy elements collapses */ p[style*="max-width"], h1[style*="max-width"], h2[style*="max-width"], h3[style*="max-width"], span[style*="max-width"] { max-width: 100% !important; } /* CTA button groups: wrap */ div[style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; } /* Fixed-width phone/screen mockups keep aspect but never overflow */ div[style*="width: 340px"], div[style*="width: 360px"], div[style*="width: 380px"], div[style*="width: 400px"], div[style*="max-width: 340px"], div[style*="max-width: 380px"], div[style*="max-width: 400px"] { max-width: 100% !important; } /* Heavy card padding -> lighter */ div[style*="padding: 32px"], div[style*="padding: 40px"], div[style*="padding: 48px"], div[style*="padding: 56px"], div[style*="padding: 64px"] { padding: 24px !important; } /* Decorative absolute blobs sometimes force scroll */ div[style*="position: absolute"][style*="filter: blur"] { display: none !important; } /* Phone-mockup scale transforms often need to reset on tiny widths */ div[style*="transform: scale(0.76)"], div[style*="transform: scale(0.8)"], div[style*="transform: scale(0.85)"] { transform: none !important; height: auto !important; } /* Footer: compact 2-column grid instead of endless vertical list */ footer > div[style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 20px !important; padding: 40px 20px !important; text-align: left !important; } footer > div[style*="grid-template-columns"] > div:first-child { grid-column: 1 / -1; text-align: left !important; } footer > div[style*="grid-template-columns"] > div:first-child p, footer > div[style*="grid-template-columns"] > div:first-child img { margin-left: 0 !important; margin-right: 0 !important; } footer a { font-size: 13px !important; } footer > div[style*="grid-template-columns"] > div { gap: 8px !important; } /* ---- Hero nav: hide Sign in + Enroll on mobile; burger handles it ---- */ nav[style*="max-width:1200px"] > div[style*="flex-shrink:0"], nav[style*="max-width: 1200px"] > div[style*="flex-shrink: 0"], nav > div:has(> a[href*="Signin"]), nav > div:has(> a[href*="Enroll"]) { display: none !important; } /* ---- Hero phone mockup: contain and shrink to viewport ---- */ header[style*="max-width: 1200px"] div[style*="height: 620px"] { height: auto !important; max-width: 100% !important; transform: scale(0.62) !important; transform-origin: top center !important; margin-bottom: -308px !important; } /* Cut the extra breathing room under the hero on phones */ header[style*="max-width: 1200px"] { padding-bottom: 12px !important; } header[style*="max-width: 1200px"] div[style*="height: 620px"] iframe { max-width: 100%; } div[style*="max-width: 1200px"]:has(> div[style*="gap: 48px"][style*="display: flex"]) { padding-top: 10px !important; padding-bottom: 4px !important; } /* ---- Trusted rails: single row, tight (higher specificity to beat flex-wrap:wrap) ---- */ div[style*="max-width: 1200px"] > div[style*="gap: 48px"][style*="display: flex"] { gap: 10px !important; flex-wrap: nowrap !important; justify-content: space-around !important; align-items: center !important; } div[style*="max-width: 1200px"] > div[style*="gap: 48px"] > span[style*="TRUSTED RAILS"], div[style*="max-width: 1200px"] > div[style*="gap: 48px"] > span:first-child { display: block !important; flex-basis: 100% !important; text-align: center !important; font-size: 10px !important; margin-bottom: 6px !important; order: -1 !important; } /* Force parent to wrap-onto-two-rows only for the label */ div[style*="max-width: 1200px"] > div[style*="gap: 48px"][style*="display: flex"] { flex-wrap: wrap !important; } div[style*="max-width: 1200px"] > div[style*="gap: 48px"] img { height: 18px !important; max-width: 22% !important; object-fit: contain !important; flex: 1 1 22% !important; } /* ---- Man biovital section: scale the whole figure so the orb + badges keep their exact desktop anchoring on the face ---- */ section[data-screen-label="Debit quote"] > div[style*="gap: 48px"] { overflow: visible !important; } section[data-screen-label="Debit quote"] div[style*="max-width: 340px"] { width: 340px !important; max-width: 340px !important; flex: 0 0 340px !important; transform: scale(.74); transform-origin: top center; margin: 0 auto -178px !important; -webkit-mask-image: none !important; mask-image: none !important; } /* Keep the outer badges from pushing the viewport sideways */ section[data-screen-label="Debit quote"] div[style*="max-width: 340px"] > div[style*="right: -104px"] { right: -60px !important; } section[data-screen-label="Debit quote"] div[style*="max-width: 340px"] > div[style*="left: -34px"] { left: -18px !important; } section[data-screen-label="Debit quote"] div[style*="max-width: 340px"] > div[style*="right: -44px"] { right: -22px !important; } /* Receipt card flows right under him and covers the leg crop */ section[data-screen-label="Debit quote"] div[style*="padding-top: 264px"] { padding-top: 0 !important; margin-top: -74px !important; } section[data-screen-label="Debit quote"] div[style*="padding-top: 264px"] > div[style*="top: 0"][style*="left: 50%"] { position: relative !important; z-index: 4 !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; width: 100% !important; max-width: 300px !important; margin: 0 auto 28px !important; } /* ---- "Why rostopay" woman section: flow the woman naturally + navy band ---- */ section[data-screen-label="Why rostopay"] { padding-bottom: 0 !important; overflow: hidden; } section[data-screen-label="Why rostopay"] > div[style*="height: 710px"] { height: auto !important; padding-top: 24px !important; padding-bottom: 0 !important; display: flex; flex-direction: column; align-items: center; background: transparent; } /* Feature cards: stack in a natural column at the top */ section[data-screen-label="Why rostopay"] > div[style*="height: 710px"] > div[style*="width: 272px"] { position: static !important; width: 100% !important; max-width: 340px !important; margin: 10px auto !important; animation: none !important; order: 1; } /* Radial glow: hide it (was tied to fixed positioning) */ section[data-screen-label="Why rostopay"] > div[style*="height: 710px"] > div[style*="width: 300px"][style*="border-radius"] { display: none !important; } /* Woman image wrapper: flow at end, cropped by container overflow to hide legs */ section[data-screen-label="Why rostopay"] > div[style*="height: 710px"] > div[style*="width: 545px"] { position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; width: 88% !important; max-width: 360px !important; margin: 72px auto -20px !important; max-height: 380px; overflow: hidden; order: 2; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); } } /* ---------------- Extra-small (≤ 380px) ---------------- */ @media (max-width: 380px) { nav[style*="max-width: 1200px"], header[style*="max-width: 1200px"], section[style*="max-width: 1200px"], footer[style*="max-width: 1200px"], div[style*="max-width: 1200px"] { padding-left: 12px !important; padding-right: 12px !important; } h1 { font-size: 26px !important; } h2 { font-size: 22px !important; } div[style*="gap: 48px"] img[alt="Plaid"], div[style*="gap: 48px"] img[alt="Polygon"], div[style*="gap: 48px"] img[alt="Stripe"], div[style*="gap: 48px"] img[alt="Sieve"] { height: 15px !important; } } /* ---------------- Tablet + mobile (≤1024px): "Why rostopay" woman section ---------------- */ @media (max-width: 900px) { section[data-screen-label="Why rostopay"] { padding-bottom: 0 !important; overflow: hidden; } section[data-screen-label="Why rostopay"] > div[style*="height: 710px"] { height: auto !important; padding-top: 24px !important; padding-bottom: 0 !important; display: flex; flex-direction: column; align-items: center; background: transparent; } section[data-screen-label="Why rostopay"] > div[style*="height: 710px"] > div[style*="width: 272px"] { position: static !important; width: 100% !important; max-width: 420px !important; margin: 10px auto !important; animation: none !important; order: 1; } section[data-screen-label="Why rostopay"] > div[style*="height: 710px"] > div[style*="width: 300px"][style*="border-radius"] { display: none !important; } /* scan orb + status chips are re-positioned by _whyoverlay.js */ section[data-screen-label="Why rostopay"] [data-rp-overlay] { display: block !important; z-index: 4; } section[data-screen-label="Why rostopay"] [data-rp-chip] { display: inline-flex !important; white-space: nowrap; z-index: 5; } section[data-screen-label="Why rostopay"] > div[style*="height: 710px"] > div[style*="width: 545px"] { position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; width: 88% !important; max-width: 420px !important; margin: 72px auto -20px !important; max-height: 440px; overflow: hidden; order: 2; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); } section[data-screen-label="Why rostopay"] > div[style*="height: 710px"] > div[style*="width: 545px"] img { width: 100% !important; height: auto !important; } } /* Hide hero badge on mobile */ @media (max-width: 640px) { [data-rp-hero-badge] { display: none !important; } } /* ---------------- Man figure on very small phones ---------------- */ @media (max-width: 400px) { section[data-screen-label="Debit quote"] div[style*="max-width: 340px"] { transform: scale(.66); margin: 0 auto -232px !important; } section[data-screen-label="Debit quote"] div[style*="padding-top: 264px"] { margin-top: -66px !important; } } /* ---------------- Why rostopay: cards overflowing on phones/tablets ---------------- The wrapper's inline style has no spaces (height:710px), so the earlier attribute selectors never matched. Match both spellings and keep the stacked cards inside the viewport. */ @media (max-width: 900px) { section[data-screen-label="Why rostopay"] > div:is([style*="height:710px"], [style*="height: 710px"]) { height: auto !important; padding: 24px 0 0 !important; display: flex !important; flex-direction: column; align-items: center; width: 100% !important; max-width: 100% !important; overflow: visible; } section[data-screen-label="Why rostopay"] > div:is([style*="height:710px"], [style*="height: 710px"]) > div:is([style*="width:272px"], [style*="width: 272px"]) { position: static !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; width: 100% !important; max-width: 420px !important; margin: 8px auto !important; animation: none !important; box-sizing: border-box !important; order: 1; } section[data-screen-label="Why rostopay"] > div:is([style*="height:710px"], [style*="height: 710px"]) > div:is([style*="width:300px"], [style*="width: 300px"])[style*="border-radius"] { display: none !important; } section[data-screen-label="Why rostopay"] > div:is([style*="height:710px"], [style*="height: 710px"]) > div:is([style*="width:545px"], [style*="width: 545px"]) { position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; width: 88% !important; max-width: 420px !important; margin: 28px auto -20px !important; max-height: 440px; overflow: hidden; order: 2; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); } } /* ---------------- Tablet only (641–900px): "Debit quote" man section ---------------- Desktop keeps the 0.85fr/1.15fr split. On tablet the man overflowed to the left and the badges were clipped, so stack the composition. */ @media (min-width: 641px) and (max-width: 900px) { section[data-screen-label="Debit quote"] > div:is([style*="grid-template-columns:0.85fr 1.15fr"], [style*="grid-template-columns: 0.85fr 1.15fr"]) { grid-template-columns: 1fr !important; gap: 8px !important; align-items: center !important; overflow: visible !important; } section[data-screen-label="Debit quote"] div:is([style*="max-width:340px"], [style*="max-width: 340px"]) { margin: 0 auto !important; } /* Fade the bottom so the photo's leg crop is not visible */ section[data-screen-label="Debit quote"] div:is([style*="max-width:340px"], [style*="max-width: 340px"]) > img { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%); } /* Receipt card back into normal flow above the copy */ section[data-screen-label="Debit quote"] div:is([style*="padding-top:264px"], [style*="padding-top: 264px"]) { padding-top: 0 !important; } section[data-screen-label="Debit quote"] div:is([style*="padding-top:264px"], [style*="padding-top: 264px"]) > div:is([style*="top:0"], [style*="top: 0"]):is([style*="left:50%"], [style*="left: 50%"]) { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: 100% !important; max-width: 300px !important; margin: 0 auto 32px !important; z-index: 4 !important; } } /* Tablet only: soften the woman's leg crop so it dissolves before the navy band */ @media (min-width: 641px) and (max-width: 900px) { section[data-screen-label="Why rostopay"] > div:is([style*="height:710px"], [style*="height: 710px"]) > div:is([style*="width:545px"], [style*="width: 545px"]) { max-height: 470px !important; margin-bottom: -30px !important; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%) !important; mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%) !important; } } /* Tablet only: footer cannot collapse into one long list */ @media (min-width: 641px) and (max-width: 900px) { footer > div:is([style*="grid-template-columns:1.3fr"], [style*="grid-template-columns: 1.3fr"]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 30px 24px !important; padding: 44px 32px 38px !important; text-align: left !important; align-items: start !important; } footer > div:is([style*="grid-template-columns:1.3fr"], [style*="grid-template-columns: 1.3fr"]) > div:first-child { grid-column: 1 / -1 !important; max-width: 100% !important; text-align: left !important; } footer > div:is([style*="grid-template-columns:1.3fr"], [style*="grid-template-columns: 1.3fr"]) > div:first-child p, footer > div:is([style*="grid-template-columns:1.3fr"], [style*="grid-template-columns: 1.3fr"]) > div:first-child img { margin-left: 0 !important; margin-right: 0 !important; } footer > div:is([style*="grid-template-columns:1.3fr"], [style*="grid-template-columns: 1.3fr"]) > div { min-width: 0 !important; gap: 8px !important; } footer > div:is([style*="grid-template-columns:1.3fr"], [style*="grid-template-columns: 1.3fr"]) a, footer > div:is([style*="grid-template-columns:1.3fr"], [style*="grid-template-columns: 1.3fr"]) span { font-size: 13px !important; line-height: 1.35 !important; } footer > div:is([style*="padding:0 72px 40px"], [style*="padding: 0 72px 40px"]) { padding: 0 32px 34px !important; } } /* ================= Content repair: comparison / data tables ================= _tables.js tags grid-based tables (.rp-cmp) and copies the column header onto each cell (data-rp-label). On phones and tablets each row becomes a readable card with its column labels; desktop keeps the original table. */ @media (max-width: 900px) { .rp-cmp { overflow: hidden !important; } .rp-cmp > .rp-cmp-head { display: none !important; } .rp-cmp > .rp-cmp-row { display: block !important; grid-template-columns: none !important; gap: 0 !important; padding: 6px 0 12px !important; } .rp-cmp > .rp-cmp-row > * { display: block !important; max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: anywhere !important; } .rp-cmp > .rp-cmp-row > .rp-cmp-key { font-size: 15px !important; line-height: 1.35 !important; padding: 14px 18px 8px !important; } .rp-cmp > .rp-cmp-row > *[data-rp-label] { margin: 0 14px 8px !important; padding: 10px 14px !important; border-radius: 12px !important; font-size: 13px !important; line-height: 1.5 !important; } .rp-cmp > .rp-cmp-row > *[data-rp-label]::before { content: attr(data-rp-label); display: block; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .62; margin-bottom: 5px; } .rp-cmp > .rp-cmp-row:last-child { border-bottom: 0 !important; } /* Code samples: never push the page sideways, scroll inside the block. */ pre, [style*="white-space: pre"], [style*="white-space:pre"] { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; font-size: 11.5px !important; line-height: 1.65 !important; } /* Late-hydrated inline values (support.js) must wrap, not overflow. */ .sc-interp { overflow-wrap: anywhere !important; max-width: 100% !important; } } /* ---------- Docs page: sidebar + toolbar on phone/tablet ---------- */ @media (max-width: 900px) { .rp-docs-nav { flex-wrap: wrap !important; padding: 10px 18px !important; gap: 10px !important; justify-content: space-between !important; } /* the fake search field has no function on touch — free the space */ .rp-docs-nav > div:nth-child(2) { display: none !important; } .rp-docs-nav > div:last-child { gap: 10px !important; font-size: 12.5px !important; flex-wrap: wrap !important; } .rp-docs-nav > div:last-child > a:nth-of-type(2) { display: none !important; } .rp-docs-nav > div:last-child button { padding: 7px 11px !important; font-size: 12px !important; } .rp-docs-side { position: static !important; height: auto !important; max-height: none !important; overflow: visible !important; border-right: 0 !important; border-bottom: 1px solid #EEF3F9 !important; padding: 16px 20px 20px !important; background: #FBFDFF !important; } .rp-docs-side > div { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 2px 12px !important; } .rp-docs-side > div > span[style*="letter-spacing: 0.1em"] { grid-column: 1 / -1 !important; padding-top: 12px !important; } .rp-docs-side a { font-size: 13px !important; padding: 6px 8px !important; } } /* ── Facewallet comparison table — phone only ─────────────────────────── Desktop keeps the 4-column grid. On phones the grid is rebuilt as stacked cards: attribute title, then Leather wallet, Apple & Google, and rostopay Facewallet always last and highlighted. */ @media (max-width: 640px) { div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] { display: block !important; } /* attribute title */ div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+1) { display: block !important; margin: 18px 0 8px 12px !important; padding: 0 !important; border: 0 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #2F7A50 !important; } div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+2), div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+3), div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+4) { display: block !important; margin: 0 0 8px 12px !important; padding: 10px 14px !important; border: 1px solid #E4EBF3 !important; border-radius: 12px !important; font-size: 13.5px !important; line-height: 1.45 !important; } div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+2)::before, div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+3)::before, div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+4)::before { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #9AA7B8; } div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+2)::before { content: "Leather wallet"; } div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+3)::before { content: "Apple & Google Wallet"; } /* rostopay always last of each group */ div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+4) { background: #081831 !important; border-color: #081831 !important; color: #fff !important; margin-bottom: 4px !important; } div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+4)::before { content: "rostopay Facewallet · winner"; color: #2DD48F; } div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+4) span { display: inline !important; } /* original header row is redundant once each cell is labelled */ div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(-n+4) { display: none !important; } div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+4) span[style*="color:#2DD48F"], div[style*="grid-template-columns: 1fr 1fr 1.1fr 1.25fr"] > *:nth-child(4n+4) span { margin-right: 4px; } } /* Zero Device section (mobile + tablet) */ @media (max-width: 900px){ #zero-device{padding:8px 18px 64px !important;} #zero-device > div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important;gap:14px !important;} #zero-device h2{font-size:27px !important;} #zero-device > div[style*="background:#081831"]{grid-template-columns:1fr !important;gap:24px !important;padding:26px 20px !important;border-radius:20px !important;} } /* ---------------- Mobile polish pass ---------------- */ @media (max-width: 900px) { /* Check-mark bullet rows ("✓ text"): keep the tick inline with its text instead of wrapping the whole sentence to the next line. */ div[style*="display: flex"][style*="gap: 12px"][style*="align-items: center"][style*="font-size: 17px"] { flex-wrap: nowrap !important; align-items: flex-start !important; font-size: 16px !important; line-height: 1.45 !important; } div[style*="display: flex"][style*="gap: 12px"][style*="align-items: center"][style*="font-size: 17px"] > span:first-child { flex: 0 0 auto !important; } /* Comfortable tap targets for footer / nav text links */ footer a { display: inline-block; padding: 5px 0; } } /* Phones: keep the top Enroll CTA from covering the logo */ @media (max-width: 900px) { .rp-top-cta { font-size: 11.5px !important; padding: 0 12px !important; height: 34px !important; letter-spacing: 0 !important; top: 22px !important; right: 62px !important; } .rp-top-cta img { display: none !important; } .rp-burger { top: 20px !important; width: 38px !important; height: 38px !important; } } @media (max-width: 480px) { .rp-top-cta { font-size: 11px !important; padding: 0 11px !important; height: 32px !important; top: 23px !important; right: 58px !important; } .rp-burger { top: 20px !important; width: 36px !important; height: 36px !important; } nav[style*="max-width: 1200px"] > a img, nav[style*="max-width:1200px"] > a img { max-width: 118px !important; height: auto !important; } } /* Mobile: code samples wrap instead of hiding text behind a hidden scrollbar */ @media (max-width: 900px) { div[style*="overflow-x: auto"] > div[style*="white-space: pre"], div[style*="overflow-x:auto"] > div[style*="white-space:pre"] { white-space: pre-wrap !important; word-break: break-word !important; font-size: 11.5px !important; line-height: 1.75 !important; } } /* Mobile: let text inside wrapping flex rows shrink instead of jumping to a new line (keeps "✓ text", numbered steps and icon+label rows inline). */ @media (max-width: 900px) { div[style*="display: flex"][style*="gap"] > div, div[style*="display:flex"][style*="gap"] > div, div[style*="display: flex"][style*="gap"] > span, div[style*="display:flex"][style*="gap"] > span { min-width: 0; } } @media (max-width: 900px) { div[style*="gap:12px"][style*="align-items:flex-start"], div[style*="gap: 12px"][style*="align-items: flex-start"] { flex-wrap: nowrap !important; } div[style*="gap:12px"][style*="align-items:flex-start"] > *, div[style*="gap: 12px"][style*="align-items: flex-start"] > * { min-width: 0 !important; } } /* Footer language selector: identical box and left alignment in every language and at every breakpoint (no layout shift when switching EN ↔ pt-BR). */ [data-rp-lang-switch] { min-height: 56px !important; text-align: left !important; justify-content: flex-start !important; } [data-rp-lang-switch] a { font-weight: 500 !important; white-space: nowrap; } @media (max-width: 900px) { [data-rp-lang-switch] { padding: 14px 18px 18px !important; min-height: 62px !important; flex-wrap: wrap !important; } } /* ── Footer typography: one small, discreet scale matching the language row ── */ footer, footer p, footer span, footer a, footer li, footer div { font-size: 12px !important; line-height: 20px !important; letter-spacing: 0 !important; } footer a { font-weight: 500 !important; color: #42526B !important; text-decoration: none; } footer a:hover { color: #0A2540 !important; } /* Column headings: same size, muted, slightly stronger */ footer span[style*="font-weight:700"], footer span[style*="font-weight: 700"] { font-weight: 600 !important; color: #9AA7B8 !important; margin-bottom: 2px !important; } /* Brand block + legal copy */ footer p { font-weight: 400 !important; color: #9AA7B8 !important; margin-top: 0 !important; } footer p[style*="font-weight:700"], footer p[style*="font-weight: 700"] { font-weight: 600 !important; color: #42526B !important; } footer img[alt="rostopay"] { height: 26px !important; margin-bottom: 10px !important; } /* Consistent vertical rhythm, same 8px step as the language row */ footer div[style*="flex-direction:column"], footer div[style*="flex-direction: column"] { gap: 8px !important; } /* Mobile/tablet: floating "HOJE / TODAY" settlement balloon must not sit over the heading text above the card — flow it below the card instead. */ @media (max-width: 900px) { [style*="top:-24px"][style*="right:-20px"], [style*="top: -24px"][style*="right: -20px"] { position: static !important; display: block !important; margin: 12px 0 0 !important; animation: none !important; padding: 10px 14px !important; box-shadow: 0 10px 24px rgba(10, 37, 64, 0.18) !important; } } /* Mobile/tablet: hero identity chip ("Identidade verificada / Identity verified") overflows to the left and lands on the man's face — park it above the photo. */ @media (max-width: 900px) { [style*="top:56px"][style*="right:-104px"], [style*="top: 56px"][style*="right: -104px"] { top: -16px !important; right: auto !important; left: 0 !important; font-size: 10px !important; padding: 6px 10px !important; width: max-content !important; max-width: 100% !important; animation: none !important; } }