/* ========================================================================== receive-sms.css — design system for the /receive-sms country directory -------------------------------------------------------------------------- SCOPING CONTRACT: this file loads on a site with ~43,000 other PHP pages that share ONE Bootstrap 4.6.2 theme. Therefore EVERY selector in this file begins with `.rs-page`. There are no element selectors, no `:root`, and no bare utility classes. If you add a rule, it starts with `.rs-page` or it does not belong here. THE ONE EXCEPTION: `html.rs-js .rs-page …`. The grid's collapsed state is a JS-only affordance and must not exist when JS is off, which is a fact about the DOCUMENT, not about anything inside .rs-page — so it cannot be expressed from `.rs-page` inward. `html.rs-js` is set by an inline script, so the state is correct on first paint. It is still fully scoped: every such selector contains `.rs-page` and matches nothing outside it. §9 is the only place it is used. scope-check.js allows exactly this prefix and nothing else. Fonts: the platform system stack already used by the site. No webfonts, no @import, no CDN, no image files. The only asset is a <1KB inline SVG data: URI used as the hero texture. !important TALLY — three sites, each justified where it is written: 1. §1b .rs-page [hidden] / .is-hidden -> must beat EVERY author `display` in this file; without it the whole filter UI is inert. 2. §2 .rs-sr-only { position } -> beats Bootstrap's .position-* 3. §16 prefers-reduced-motion block -> beats every transition above it plus Bootstrap's own .fade / .collapsing. Nothing else in this file may use it. ========================================================================== */ /* -------------------------------------------------------------------------- 1. SCOPE ROOT + DESIGN TOKENS -------------------------------------------------------------------------- */ .rs-page { /* brand ------------------------------------------------------------ */ --rs-brand: #0f766e; --rs-brand-600: #0d5f59; --rs-brand-700: #0a4a45; --rs-brand-050: #ecfdf9; --rs-brand-100: #d2f5ee; --rs-brand-rgb: 15, 118, 110; --rs-on-brand: #ffffff; --rs-accent: #f5a524; --rs-accent-rgb: 245, 165, 36; /* ink + surfaces --------------------------------------------------- */ --rs-ink: #0b1220; --rs-ink-2: #475569; --rs-ink-3: #94a3b8; --rs-ink-rgb: 11, 18, 32; --rs-surface: #ffffff; --rs-surface-2: #fbfdfe; --rs-bg: #f7f9fb; --rs-bg-rgb: 247, 249, 251; --rs-line: #e6ebf1; --rs-line-2: #d7e0ea; /* hero ink --------------------------------------------------------- */ --rs-hero-base: #060d14; --rs-hero-ink: #ffffff; --rs-hero-ink-2: rgba(255, 255, 255, 0.76); --rs-hero-ink-3: rgba(255, 255, 255, 0.58); --rs-hero-line: rgba(255, 255, 255, 0.16); --rs-hero-brand: #5eead4; /* geometry --------------------------------------------------------- */ --rs-radius: 14px; --rs-radius-sm: 10px; --rs-radius-pill: 999px; --rs-maxw: 1180px; /* elevation -------------------------------------------------------- */ --rs-shadow-1: 0 1px 2px rgba(var(--rs-ink-rgb), 0.05), 0 1px 3px rgba(var(--rs-ink-rgb), 0.05); --rs-shadow-2: 0 6px 16px -6px rgba(var(--rs-ink-rgb), 0.16), 0 2px 6px -2px rgba(var(--rs-ink-rgb), 0.08); --rs-shadow-3: 0 24px 48px -18px rgba(var(--rs-ink-rgb), 0.28), 0 8px 20px -12px rgba(var(--rs-ink-rgb), 0.16); /* type scale (fluid) ------------------------------------------------ */ --rs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rs-fs-h1: clamp(2rem, 1.32rem + 2.7vw, 3.25rem); --rs-fs-h2: clamp(1.5rem, 1.16rem + 1.35vw, 2.125rem); --rs-fs-h3: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem); --rs-fs-lead: clamp(1.02rem, 0.96rem + 0.34vw, 1.1875rem); --rs-fs-body: clamp(0.9375rem, 0.915rem + 0.11vw, 1rem); --rs-fs-sm: 0.8125rem; --rs-fs-xs: 0.75rem; /* rhythm ----------------------------------------------------------- */ --rs-sp-1: 4px; --rs-sp-2: 8px; --rs-sp-3: 12px; --rs-sp-4: 16px; --rs-sp-5: 24px; --rs-sp-6: 32px; --rs-sp-7: 48px; --rs-sp-8: 72px; --rs-section-y: clamp(40px, 5.6vw, 72px); /* motion ----------------------------------------------------------- */ --rs-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --rs-dur: 0.18s; /* country grid ------------------------------------------------------ */ --rs-card-min: 148px; --rs-card-h: 80px; --rs-card-pad: 11px; --rs-gap: 10px; --rs-rows: 4; font-family: var(--rs-font); font-size: var(--rs-fs-body); line-height: 1.6; color: var(--rs-ink); background: var(--rs-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .rs-page *, .rs-page *::before, .rs-page *::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- 1b. THE HIDDEN STATE — the single rule the whole filter UI stands on -------------------------------------------------------------------------- receive-sms.js hides an element by setting BOTH `el.hidden = true` and the `.is-hidden` class, and it deliberately never writes an inline `display`. That contract only holds if this stylesheet honours it, because: - the only `[hidden] { display:none }` in play is the USER-AGENT rule, and any author `display` beats it — `.rs-card { display:grid }`, `.rs-btn { display:inline-flex }`, `.rs-moreWrap`, `.rs-empty`, `.rs-alpha__reset`, `.rs-search__clear` are all author declarations; - Bootstrap 4.6 (unlike Bootstrap 5) ships NO `[hidden]` rule of its own, so there is no framework safety net underneath us. Without this rule the search, the Popular chip and the letter filter all look broken in exactly the same way: #rsCount says "Showing 8 of 223" while all 223 cards stay on screen. !important is load-bearing here, not laziness. This rule has to win against an arbitrary author `display` declared anywhere in this file, at any specificity, in any source order — including rules added later by someone who has never read this comment. Specificity cannot promise that; the important flag can. It is applied ONLY to `display`, and ONLY to elements that something has explicitly marked hidden. */ .rs-page [hidden], .rs-page .is-hidden { display: none !important; } /* -------------------------------------------------------------------------- 2. LAYOUT PRIMITIVES -------------------------------------------------------------------------- */ .rs-page .rs-shell { width: 100%; max-width: var(--rs-maxw); margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); } .rs-page .rs-section { padding-block: var(--rs-section-y); } .rs-page .rs-browser, .rs-page .rs-pro, .rs-page .rs-faq { padding-block: var(--rs-section-y); scroll-margin-top: 84px; } .rs-page .rs-secthead { max-width: 68ch; margin: 0 0 clamp(20px, 3vw, 32px); } .rs-page .rs-eyebrow { display: inline-block; margin: 0 0 12px; font-size: var(--rs-fs-xs); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rs-brand-600); } .rs-page .rs-h2 { margin: 0; font-size: var(--rs-fs-h2); font-weight: 700; line-height: 1.14; letter-spacing: -0.021em; color: var(--rs-ink); } .rs-page .rs-sub { margin: 10px 0 0; max-width: 66ch; font-size: var(--rs-fs-lead); line-height: 1.68; color: var(--rs-ink-2); } .rs-page .rs-grid-2, .rs-page .rs-grid-3 { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: 1fr; } .rs-page .rs-sr-only { position: absolute !important; /* beats Bootstrap's .position-* utilities */ width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link — SECOND documented exception to the .rs-page scoping contract. It is bare `.rs-skip`, with no `.rs-page` ancestor, because the anchor sits ABOVE the navbar include so it is the first focusable element in the document — a skip link that is not the first tab stop is pointless. It cannot carry `rs-page` itself either: receive-sms.js resolves its scope root with `document.querySelector('.rs-page')`, so an earlier .rs-page silently unbinds the filter chips. `rs-skip` appears on exactly one element on one page, so a bare selector leaks into nothing. Off-screen until it is focused, then a real, visible target. It must NOT use .rs-sr-only: that clips the element even while focused, so a keyboard user tabs onto something they cannot see. Positioned relative to the viewport rather than a containing block, because .rs-page establishes no positioning context of its own. */ .rs-skip { position: fixed; top: 0; left: 50%; z-index: 1080; /* above Bootstrap's .navbar (1030) and .sticky-top (1020) */ transform: translate(-50%, -120%); padding: 12px 22px; border-radius: 0 0 10px 10px; /* literal: --rs-* tokens live on .rs-page, which is not an ancestor of this element */ background: #0f766e; color: #ffffff; font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-decoration: none; box-shadow: 0 24px 48px -18px rgba(11, 18, 32, 0.28); transition: transform 0.18s ease; } .rs-skip:focus, .rs-skip:focus-visible { transform: translate(-50%, 0); outline: 2px solid #ffffff; outline-offset: -5px; color: #ffffff; text-decoration: none; } /* -------------------------------------------------------------------------- 3. BUTTONS -------------------------------------------------------------------------- */ .rs-page .rs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px; border: 1px solid transparent; border-radius: var(--rs-radius-sm); font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; text-align: center; text-decoration: none; cursor: pointer; user-select: none; background: transparent; color: var(--rs-ink); transition: transform var(--rs-dur) var(--rs-ease), background-color var(--rs-dur) var(--rs-ease), border-color var(--rs-dur) var(--rs-ease), color var(--rs-dur) var(--rs-ease), box-shadow var(--rs-dur) var(--rs-ease); } .rs-page .rs-btn:hover { text-decoration: none; } .rs-page .rs-btn:active { transform: translateY(1px); } .rs-page .rs-btn:focus-visible { outline: 2px solid var(--rs-brand); outline-offset: 2px; } .rs-page .rs-btn[disabled], .rs-page .rs-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; } .rs-page .rs-btn--primary { background: var(--rs-brand); border-color: var(--rs-brand); color: var(--rs-on-brand); box-shadow: 0 1px 2px rgba(var(--rs-ink-rgb), 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .rs-page .rs-btn--primary:hover { background: var(--rs-brand-600); border-color: var(--rs-brand-600); color: var(--rs-on-brand); box-shadow: 0 8px 18px -8px rgba(var(--rs-brand-rgb), 0.55); } .rs-page .rs-btn--ghost { background: transparent; border-color: var(--rs-line-2); color: var(--rs-ink); } .rs-page .rs-btn--ghost:hover { background: var(--rs-surface); border-color: var(--rs-brand); color: var(--rs-brand-600); } .rs-page .rs-btn--soft { background: var(--rs-brand-050); border-color: var(--rs-brand-100); color: var(--rs-brand-600); } .rs-page .rs-btn--soft:hover { background: var(--rs-brand-100); border-color: var(--rs-brand); color: var(--rs-brand-700); } .rs-page .rs-btn--lg { min-height: 52px; padding: 14px 28px; font-size: 1rem; border-radius: 12px; } /* -------------------------------------------------------------------------- 4. HERO — light-on-deep, layered mesh + hairline grid -------------------------------------------------------------------------- */ .rs-page .rs-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--rs-hero-base); color: var(--rs-hero-ink); } .rs-page .rs-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(64% 86% at 10% -6%, rgba(45, 212, 191, 0.30), transparent 62%), radial-gradient(52% 72% at 92% 4%, rgba(var(--rs-accent-rgb), 0.16), transparent 64%), radial-gradient(90% 110% at 52% 118%, rgba(13, 95, 89, 0.42), transparent 68%), linear-gradient(180deg, #0a1620 0%, #060d14 62%); } /* hairline grid texture — inline SVG data: URI, ~200 bytes */ .rs-page .rs-hero__bg::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M44 0H0v44' fill='none' stroke='%23fff' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E"); -webkit-mask-image: radial-gradient(72% 82% at 50% 20%, #000 0%, transparent 78%); mask-image: radial-gradient(72% 82% at 50% 20%, #000 0%, transparent 78%); } /* soft hand-off into the page background */ .rs-page .rs-hero__bg::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 120px; background-image: linear-gradient( 180deg, rgba(var(--rs-bg-rgb), 0) 0%, rgba(var(--rs-bg-rgb), 1) 100% ); } .rs-page .rs-hero__inner { position: relative; padding-block: clamp(40px, 7vw, 92px) clamp(48px, 7vw, 88px); animation: rs-rise 0.5s var(--rs-ease) both; } .rs-page .rs-hero .rs-eyebrow { color: var(--rs-hero-brand); } .rs-page .rs-hero__title { margin: 0; max-width: 19ch; font-size: var(--rs-fs-h1); font-weight: 700; line-height: 1.05; letter-spacing: -0.032em; color: var(--rs-hero-ink); text-wrap: balance; } .rs-page .rs-hero__lead { margin: clamp(14px, 2vw, 20px) 0 0; max-width: 58ch; font-size: var(--rs-fs-lead); line-height: 1.68; color: var(--rs-hero-ink-2); } .rs-page .rs-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 32px); } .rs-page .rs-hero__actions .rs-btn--ghost { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.24); color: var(--rs-hero-ink); } .rs-page .rs-hero__actions .rs-btn--ghost:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.42); color: var(--rs-hero-ink); } .rs-page .rs-hero__actions .rs-btn:focus-visible { outline-color: var(--rs-hero-brand); } /* breadcrumb -------------------------------------------------------------- */ .rs-page .rs-crumb { margin: 0 0 clamp(16px, 2.4vw, 26px); font-size: var(--rs-fs-sm); } .rs-page .rs-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; } .rs-page .rs-crumb li { display: flex; align-items: center; gap: 6px; color: var(--rs-ink-2); } .rs-page .rs-crumb li + li::before { content: "\203A"; color: var(--rs-ink-3); font-size: 0.95em; line-height: 1; } .rs-page .rs-crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .rs-page .rs-crumb a:hover { color: var(--rs-brand-600); border-bottom-color: currentColor; text-decoration: none; } .rs-page .rs-hero .rs-crumb li { color: var(--rs-hero-ink-3); } .rs-page .rs-hero .rs-crumb li + li::before { color: rgba(255, 255, 255, 0.34); } .rs-page .rs-hero .rs-crumb a:hover { color: var(--rs-hero-ink); } .rs-page .rs-crumb a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; } /* stats ------------------------------------------------------------------- */ .rs-page .rs-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: clamp(30px, 4.4vw, 46px) 0 0; padding: 0; list-style: none; background: var(--rs-hero-line); border: 1px solid var(--rs-hero-line); border-radius: var(--rs-radius); overflow: hidden; } .rs-page .rs-hero__stats .rs-stat { background: rgba(255, 255, 255, 0.035); padding: 16px 18px; } .rs-page .rs-stat { display: flex; flex-direction: column; gap: 2px; } .rs-page .rs-stat__num { font-size: clamp(1.375rem, 1.1rem + 1.05vw, 2rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--rs-ink); } .rs-page .rs-stat__label { font-size: var(--rs-fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rs-ink-2); } .rs-page .rs-hero__stats .rs-stat__num { color: var(--rs-hero-ink); } .rs-page .rs-hero__stats .rs-stat__label { color: var(--rs-hero-ink-3); } /* -------------------------------------------------------------------------- 5. TRUST BAR -------------------------------------------------------------------------- */ .rs-page .rs-trust { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px clamp(16px, 3vw, 36px); max-width: var(--rs-maxw); margin: 0 auto; padding: 18px clamp(16px, 4vw, 28px); list-style: none; border-bottom: 1px solid var(--rs-line); } .rs-page .rs-trust__item { display: inline-flex; align-items: center; gap: 9px; font-size: var(--rs-fs-sm); font-weight: 600; letter-spacing: -0.005em; color: var(--rs-ink-2); } .rs-page .rs-trust__item .fa { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; font-size: 0.8125rem; color: var(--rs-brand-600); background: var(--rs-brand-050); } /* -------------------------------------------------------------------------- 6. TOOLBAR — search + filter chips -------------------------------------------------------------------------- */ .rs-page .rs-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .rs-page .rs-search { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; } .rs-page .rs-search__icon { position: absolute; left: 17px; z-index: 1; font-size: 0.9375rem; color: var(--rs-ink-2); pointer-events: none; transition: color var(--rs-dur) var(--rs-ease); } .rs-page .rs-search__input { -webkit-appearance: none; appearance: none; width: 100%; min-height: 52px; padding: 12px 48px 12px 46px; font-family: inherit; font-size: 1rem; line-height: 1.4; color: var(--rs-ink); background: var(--rs-surface); border: 1px solid var(--rs-line-2); border-radius: 12px; box-shadow: var(--rs-shadow-1); transition: border-color var(--rs-dur) var(--rs-ease), box-shadow var(--rs-dur) var(--rs-ease); } .rs-page .rs-search__input::placeholder { color: var(--rs-ink-2); opacity: 0.72; } .rs-page .rs-search__input::-webkit-search-cancel-button, .rs-page .rs-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; } .rs-page .rs-search__input:hover { border-color: var(--rs-ink-3); } .rs-page .rs-search__input:focus { outline: 0; border-color: var(--rs-brand); box-shadow: 0 0 0 4px rgba(var(--rs-brand-rgb), 0.16); } .rs-page .rs-search__input:focus + .rs-search__clear, .rs-page .rs-search:focus-within .rs-search__icon { color: var(--rs-brand-600); } .rs-page .rs-search__clear { position: absolute; right: 8px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; font-size: 0.875rem; color: var(--rs-ink-2); background: transparent; cursor: pointer; transition: background-color var(--rs-dur) var(--rs-ease), color var(--rs-dur) var(--rs-ease); } .rs-page .rs-search__clear:hover { background: var(--rs-bg); color: var(--rs-ink); } .rs-page .rs-search__clear:focus-visible { outline: 2px solid var(--rs-brand); outline-offset: 2px; } /* chips ------------------------------------------------------------------- */ .rs-page .rs-chips { display: flex; flex-wrap: wrap; gap: 8px; } .rs-page .rs-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--rs-line-2); border-radius: var(--rs-radius-pill); font-family: inherit; font-size: var(--rs-fs-sm); font-weight: 600; color: var(--rs-ink-2); background: var(--rs-surface); cursor: pointer; white-space: nowrap; transition: transform var(--rs-dur) var(--rs-ease), background-color var(--rs-dur) var(--rs-ease), border-color var(--rs-dur) var(--rs-ease), color var(--rs-dur) var(--rs-ease); } .rs-page .rs-chip:hover { border-color: var(--rs-brand); color: var(--rs-brand-600); } .rs-page .rs-chip:active { transform: translateY(1px); } .rs-page .rs-chip:focus-visible { outline: 2px solid var(--rs-brand); outline-offset: 2px; } .rs-page .rs-chip.is-active { background: var(--rs-brand); border-color: var(--rs-brand); color: var(--rs-on-brand); } /* count badge inside a chip ("All 223" / "Top coverage 24") ---------------- Two rules that must both hold: 1. NO JUMP on toggle. Every metric here — margin, padding, font-size, weight, line-height — is identical in the idle and .is-active states. Only two COLOURS change, and colour cannot reflow, so activating a chip can never resize it or shove its neighbour along the row. 2. NO CONTRAST CLIFF. Subdued is done with size and weight, never by fading the text toward its background — a 12px count at 2.5:1 is decoration, not information. The active pair needs no dark-mode override because --rs-brand-700 and --rs-on-brand flip together: light mode paints white on deep teal, dark mode near-black on mint. Measured ratios are in the verification log; all four states clear WCAG AA (4.5) for normal-size text. The chip is `display:inline-flex`, so this is a flex item and the markup's whitespace before it is stripped — the gap must be a margin. */ .rs-page .rs-chip__n { flex: 0 0 auto; margin-left: 7px; padding: 1px 7px; border-radius: var(--rs-radius-pill); font-size: 0.75rem; font-weight: 700; line-height: 1.5; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--rs-ink-2); background: var(--rs-line); transition: color var(--rs-dur) var(--rs-ease), background-color var(--rs-dur) var(--rs-ease); } .rs-page .rs-chip.is-active .rs-chip__n { color: var(--rs-on-brand); background: var(--rs-brand-700); } /* -------------------------------------------------------------------------- 7. ALPHABET NAVIGATION -------------------------------------------------------------------------- */ .rs-page .rs-alpha { display: flex; gap: 6px; margin: 0 0 16px; padding-bottom: 4px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100% ); } .rs-page .rs-alpha::-webkit-scrollbar { width: 0; height: 0; display: none; } .rs-page .rs-alpha__btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; scroll-snap-align: center; border: 1px solid var(--rs-line); border-radius: var(--rs-radius-sm); font-family: inherit; font-size: 0.875rem; font-weight: 700; line-height: 1; text-transform: uppercase; text-decoration: none; color: var(--rs-ink-2); background: var(--rs-surface); cursor: pointer; transition: transform var(--rs-dur) var(--rs-ease), background-color var(--rs-dur) var(--rs-ease), border-color var(--rs-dur) var(--rs-ease), color var(--rs-dur) var(--rs-ease); } .rs-page .rs-alpha__btn:hover { border-color: var(--rs-brand); color: var(--rs-brand-600); background: var(--rs-brand-050); text-decoration: none; } .rs-page .rs-alpha__btn:active { transform: translateY(1px); } .rs-page .rs-alpha__btn:focus-visible { outline: 2px solid var(--rs-brand); outline-offset: 2px; } .rs-page .rs-alpha__btn.is-active { background: var(--rs-brand); border-color: var(--rs-brand); color: var(--rs-on-brand); box-shadow: 0 6px 14px -8px rgba(var(--rs-brand-rgb), 0.7); } .rs-page .rs-alpha__btn.is-empty { opacity: 0.4; pointer-events: none; cursor: default; background: transparent; border-style: dashed; border-color: var(--rs-line); color: var(--rs-ink-2); } .rs-page .rs-alpha__reset { min-width: 0; padding: 0 16px; font-size: var(--rs-fs-sm); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--rs-brand-600); background: var(--rs-brand-050); border-color: var(--rs-brand-100); } /* -------------------------------------------------------------------------- 8. RESULT COUNT -------------------------------------------------------------------------- */ .rs-page .rs-count { margin: 0 0 12px; font-size: var(--rs-fs-sm); color: var(--rs-ink-2); font-variant-numeric: tabular-nums; } .rs-page .rs-count b { font-weight: 700; color: var(--rs-ink); } /* -------------------------------------------------------------------------- 9. COUNTRY GRID + CARDS (223 nodes — transform/opacity only) -------------------------------------------------------------------------- */ .rs-page .rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--rs-card-min), 1fr)); gap: var(--rs-gap); align-items: stretch; } /* COLLAPSED: ~4 rows + a sliver of the 5th, faded out by a mask. -------------------------------------------------------------------------- THE ONE SELECTOR IN THIS FILE THAT DOES NOT START WITH `.rs-page`, and the reason is the whole point of the rule. Clipping the grid is a JS-ONLY affordance: it hides 219 of 223 countries behind a "Show all" button, so it may only ever exist where that button can work. `html.rs-js` is set by an inline script in , before any body content. Keying off it means: - no JS -> the class is never added, this rule never matches, and the visitor gets the full grid and all 223 countries. (Previously the server emitted `is-collapsed` unconditionally, which left a no-JS visitor with a 421px grid and a dead button.) - JS -> the clip applies on FIRST PAINT, because it is driven by markup the server already sent (`data-rs-collapse`) plus a class set before render — not by a deferred script. No flash of the full ~3,700px grid. `data-rs-collapse` is the live signal: PHP emits it only when there are enough cards to be worth collapsing (main hub yes, letter hubs no), and the JS EXPANDS by removing the attribute. The `.is-collapsed` class is kept as a legacy hook for the same toggle — but it is gated on `html.rs-js` too, so that a stale cached page still carrying the old server-side class cannot re-create the no-JS trap. Nothing collapses this grid without JavaScript. */ html.rs-js .rs-page .rs-grid[data-rs-collapse], html.rs-js .rs-page .rs-grid.is-collapsed { max-height: calc( var(--rs-rows) * (var(--rs-card-h) + var(--rs-gap)) + var(--rs-card-h) * 0.45 ); overflow: hidden; -webkit-mask-image: linear-gradient( 180deg, #000 0, #000 64%, rgba(0, 0, 0, 0.5) 84%, transparent 100% ); mask-image: linear-gradient( 180deg, #000 0, #000 64%, rgba(0, 0, 0, 0.5) 84%, transparent 100% ); } .rs-page .rs-card { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: var(--rs-card-h); padding: var(--rs-card-pad); border: 1px solid var(--rs-line); border-radius: var(--rs-radius-sm); background: var(--rs-surface); color: var(--rs-ink); text-decoration: none; transition: transform var(--rs-dur) var(--rs-ease), border-color var(--rs-dur) var(--rs-ease); } /* the hover shadow lives on a pseudo-element so it composites as opacity instead of repainting a box-shadow across a 223-node grid */ .rs-page .rs-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--rs-shadow-2); opacity: 0; transition: opacity var(--rs-dur) var(--rs-ease); } .rs-page .rs-card:hover, .rs-page .rs-card:focus-visible { transform: translateY(-2px); border-color: rgba(var(--rs-brand-rgb), 0.42); text-decoration: none; color: var(--rs-ink); } .rs-page .rs-card:hover::after, .rs-page .rs-card:focus-visible::after { opacity: 1; } .rs-page .rs-card:focus-visible { outline: 2px solid var(--rs-brand); outline-offset: 2px; } .rs-page .rs-card:active { transform: translateY(0); } .rs-page .rs-card__flag { display: block; flex: 0 0 auto; width: 30px; height: 20px; border-radius: 4px; overflow: hidden; background: var(--rs-bg); box-shadow: 0 0 0 1px rgba(var(--rs-ink-rgb), 0.08); } .rs-page .rs-card__flag img { display: block; width: 100%; height: 100%; object-fit: cover; } .rs-page .rs-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rs-page .rs-card__name { display: block; overflow: hidden; font-size: 0.875rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.012em; color: var(--rs-ink); white-space: nowrap; text-overflow: ellipsis; } .rs-page .rs-card__meta { display: flex; flex-direction: column; gap: 0; min-width: 0; font-size: 0.6875rem; line-height: 1.5; font-variant-numeric: tabular-nums; } .rs-page .rs-card__svc { display: block; overflow: hidden; color: var(--rs-ink-2); white-space: nowrap; text-overflow: ellipsis; } .rs-page .rs-card__price { display: block; font-weight: 700; color: var(--rs-brand-600); white-space: nowrap; } .rs-page .rs-card__go { display: flex; align-items: center; justify-content: center; width: 18px; font-size: 1rem; line-height: 1; color: var(--rs-ink-3); opacity: 0; transform: translateX(-5px); transition: transform var(--rs-dur) var(--rs-ease), opacity var(--rs-dur) var(--rs-ease); } .rs-page .rs-card:hover .rs-card__go, .rs-page .rs-card:focus-visible .rs-card__go { opacity: 1; transform: translateX(0); color: var(--rs-brand); } /* -------------------------------------------------------------------------- 10. EMPTY STATE + "SHOW ALL" -------------------------------------------------------------------------- */ .rs-page .rs-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(32px, 6vw, 56px) 20px; text-align: center; border: 1px dashed var(--rs-line-2); border-radius: var(--rs-radius); background: var(--rs-surface); } .rs-page .rs-empty__title { margin: 0; font-size: var(--rs-fs-h3); font-weight: 650; letter-spacing: -0.015em; color: var(--rs-ink); } .rs-page .rs-moreWrap { display: flex; justify-content: center; margin-top: 20px; } /* the mask already fades into whitespace, so the button tucks up under it — same html.rs-js gate as the clip it belongs to */ html.rs-js .rs-page .rs-grid[data-rs-collapse] ~ .rs-moreWrap, html.rs-js .rs-page .rs-grid.is-collapsed ~ .rs-moreWrap { margin-top: 4px; } /* -------------------------------------------------------------------------- 11. PANELS · BADGES · TABLES -------------------------------------------------------------------------- */ .rs-page .rs-panel { /* min-width:0 is inert for a block, but a panel is also used as a grid item in .rs-grid-3 — where the default `min-width:auto` would let a wide, unwrappable child (the code sample) push the column past its track. */ min-width: 0; padding: clamp(18px, 2.6vw, 28px); border: 1px solid var(--rs-line); border-radius: var(--rs-radius); background: var(--rs-surface); box-shadow: var(--rs-shadow-1); } .rs-page .rs-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--rs-brand-100); border-radius: var(--rs-radius-pill); font-size: var(--rs-fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rs-brand-600); background: var(--rs-brand-050); } .rs-page .rs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--rs-fs-sm); font-variant-numeric: tabular-nums; } .rs-page .rs-table th, .rs-page .rs-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--rs-line); vertical-align: middle; } .rs-page .rs-table th { font-size: var(--rs-fs-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--rs-ink-2); background: var(--rs-bg); border-bottom-color: var(--rs-line-2); } .rs-page .rs-table tbody tr:last-child td { border-bottom: 0; } .rs-page .rs-table tbody tr:hover td { background: var(--rs-brand-050); } /* -------------------------------------------------------------------------- 12. PRO SECTION (markup owned by includes-web/receive-sms-pro.php) styled defensively — unknown children still inherit a sane rhythm -------------------------------------------------------------------------- */ .rs-page .rs-pro { background: var(--rs-surface); border-top: 1px solid var(--rs-line); border-bottom: 1px solid var(--rs-line); } .rs-page .rs-pro p { color: var(--rs-ink-2); line-height: 1.72; } .rs-page .rs-pro__grid { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); } .rs-page .rs-pro__item { padding: clamp(18px, 2.4vw, 24px); border: 1px solid var(--rs-line); border-radius: var(--rs-radius); background: var(--rs-surface-2); } .rs-page .rs-pro__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; font-size: 1.0625rem; color: var(--rs-brand-600); background: var(--rs-brand-050); box-shadow: inset 0 0 0 1px var(--rs-brand-100); } .rs-page .rs-pro__title { margin: 0 0 8px; font-size: var(--rs-fs-h3); font-weight: 650; line-height: 1.3; letter-spacing: -0.018em; color: var(--rs-ink); } .rs-page .rs-pro__text { margin: 0; font-size: var(--rs-fs-sm); line-height: 1.7; color: var(--rs-ink-2); } .rs-page .rs-pro__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .rs-page .rs-pro__li { position: relative; padding-left: 28px; font-size: var(--rs-fs-sm); line-height: 1.65; color: var(--rs-ink-2); } .rs-page .rs-pro__li::before { content: "\2713"; position: absolute; top: 1px; left: 0; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 0.625rem; font-weight: 700; color: var(--rs-brand-600); background: var(--rs-brand-050); } .rs-page .rs-pro__steps { counter-reset: rs-step; display: grid; gap: clamp(14px, 2vw, 20px); margin: 0; padding: 0; list-style: none; } .rs-page .rs-pro__step { position: relative; padding: clamp(16px, 2.2vw, 22px); padding-top: 46px; border: 1px solid var(--rs-line); border-radius: var(--rs-radius); background: var(--rs-surface-2); } .rs-page .rs-pro__num { position: absolute; top: clamp(16px, 2.2vw, 22px); left: clamp(16px, 2.2vw, 22px); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; font-size: var(--rs-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rs-on-brand); background: var(--rs-brand); } .rs-page .rs-pro__media { border-radius: var(--rs-radius); overflow: hidden; border: 1px solid var(--rs-line); background: var(--rs-bg); } .rs-page .rs-pro__media img { display: block; width: 100%; height: auto; } .rs-page .rs-pro__note { margin: 14px 0 0; font-size: var(--rs-fs-xs); line-height: 1.65; color: var(--rs-ink-2); } .rs-page .rs-pro__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3vw, 30px); } /* code sample ------------------------------------------------------------- `
` is authored by receive-sms-pro.php. A 
   inherits the UA's `white-space: pre` and `overflow: visible`, so at 360px
   the sample's longest line measured 687px wide and dragged the DOCUMENT
   scrollWidth to 730 — a horizontal scrollbar on the whole page.

   Decision: keep `white-space: pre` and scroll INSIDE the box rather than
   switching to `pre-wrap`. These are shell commands; wrapping one mid-flag
   renders a line that reads like a different command, and a reader who
   copies the visible break gets something that does not run. A contained
   scroller keeps every line intact and keeps the overflow local. */
.rs-page .rs-codewrap {
  min-width: 0;
}

.rs-page .rs-code {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 16px 0;
  padding: clamp(13px, 1.8vw, 17px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-radius-sm);
  background: var(--rs-surface-2);
  font-size: var(--rs-fs-sm);
  line-height: 1.75;
  color: var(--rs-ink-2);
  tab-size: 2;
}

/* left inline: the 
 is the scroll container, so the code's overflowing
   inline boxes define its scrollable width. Do not give this a `display` that
   shrink-wraps or blocks — that is what makes the scroller measure right. */
.rs-page .rs-code code {
  padding: 0;
  border: 0;
  background: none;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}

/* --------------------------------------------------------------------------
   13. FAQ (Bootstrap 4 collapse — do not restyle .collapse itself)
   -------------------------------------------------------------------------- */

.rs-page .rs-faq__item {
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-radius);
  background: var(--rs-surface);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color var(--rs-dur) var(--rs-ease);
}

.rs-page .rs-faq__item:hover {
  border-color: var(--rs-line-2);
}

.rs-page .rs-faq__q {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.rs-page .rs-faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 16px clamp(16px, 2.2vw, 22px);
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.012em;
  text-align: left;
  color: var(--rs-ink);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--rs-dur) var(--rs-ease),
    color var(--rs-dur) var(--rs-ease);
}

.rs-page .rs-faq__btn:hover {
  background: var(--rs-brand-050);
  color: var(--rs-brand-700);
}

.rs-page .rs-faq__btn:focus-visible {
  outline: 2px solid var(--rs-brand);
  outline-offset: -2px;
}

.rs-page .rs-faq__btn .fa {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--rs-brand-600);
  background: var(--rs-brand-050);
  transition: transform 0.22s var(--rs-ease),
    background-color var(--rs-dur) var(--rs-ease),
    color var(--rs-dur) var(--rs-ease);
}

.rs-page .rs-faq__btn[aria-expanded="true"] {
  color: var(--rs-brand-700);
}

.rs-page .rs-faq__btn[aria-expanded="true"] .fa {
  transform: rotate(180deg);
  color: var(--rs-on-brand);
  background: var(--rs-brand);
}

/* swap the FontAwesome 4.7 plus glyph (\f067) for minus (\f068) when open */
.rs-page .rs-faq__btn[aria-expanded="true"] .fa-plus::before {
  content: "\f068";
}

.rs-page .rs-faq__aInner {
  padding: 0 clamp(16px, 2.2vw, 22px) 20px;
  font-size: var(--rs-fs-body);
  line-height: 1.75;
  color: var(--rs-ink-2);
  border-top: 1px solid var(--rs-line);
  padding-top: 16px;
}

.rs-page .rs-faq__aInner p {
  margin: 0 0 12px;
}

.rs-page .rs-faq__aInner p:last-child {
  margin-bottom: 0;
}

.rs-page .rs-faq__aInner a {
  color: var(--rs-brand-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   14. BREAKPOINTS
   --------------------------------------------------------------------------
   The grid has no column count of its own — `auto-fill` divides whatever the
   .rs-shell content box turns out to be by --rs-card-min + --rs-gap. So the
   count is a RESULT, not a setting, and it moves with things this file does
   not own: the shell's max-width (1180), its padding (up to 28px a side), and
   whether the platform draws a classic ~15px scrollbar or an overlay one.

   MEASURED in Chromium (not derived on paper):
       360 -> 2 · 768 -> 4 · 1024 -> 4 · 1440 -> 6

   An earlier version of this comment claimed 1024 -> 5. That was arithmetic
   done without the scrollbar and without the host page's body box: five
   180px tracks plus four 14px gaps need 956px, and 1024 leaves 952–968
   depending on those two, so 1024 sits ON the boundary and can render either
   way. It is deliberately NOT tuned to force 5 — buying it would mean
   trimming --rs-card-min to win by single-digit pixels, which the next
   scrollbar or padding change would take straight back. 4 wide cards at
   1024 is a fine outcome; a layout that hinges on 4px is not.
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .rs-page {
    --rs-gap: 12px;
    --rs-card-pad: 12px;
  }

  .rs-page .rs-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rs-page .rs-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rs-page .rs-pro__grid,
  .rs-page .rs-pro__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rs-page .rs-card__flag {
    width: 34px;
    height: 23px;
  }
}

@media (min-width: 768px) {
  .rs-page .rs-toolbar {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .rs-page .rs-chips {
    flex: 0 0 auto;
  }

  /* enough room to wrap: drop the scroller, the snap and the edge fade */
  .rs-page .rs-alpha {
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (min-width: 900px) {
  .rs-page {
    --rs-card-min: 180px;
    --rs-card-h: 82px;
    --rs-gap: 14px;
    --rs-card-pad: 13px;
  }

  .rs-page .rs-card__name {
    font-size: 0.9375rem;
  }

  .rs-page .rs-card__meta {
    font-size: 0.71875rem;
  }

  .rs-page .rs-grid-3,
  .rs-page .rs-pro__grid,
  .rs-page .rs-pro__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .rs-page {
    --rs-card-min: 170px;
  }
}

/* --------------------------------------------------------------------------
   15. DARK MODE — tokens only, and ONLY inside .rs-page.
       The rest of this site is light-only; nothing here may escape the scope.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  .rs-page {
    --rs-brand: #2dd4bf;
    --rs-brand-600: #5eead4;
    --rs-brand-700: #99f6e4;
    --rs-brand-050: #10312e;
    --rs-brand-100: #17453f;
    --rs-brand-rgb: 45, 212, 191;
    --rs-on-brand: #04211d;

    --rs-ink: #e9eef5;
    --rs-ink-2: #a9b7c8;
    --rs-ink-3: #6b7c90;
    --rs-ink-rgb: 0, 0, 0;
    --rs-surface: #111a24;
    --rs-surface-2: #16212c;
    --rs-bg: #080c12;
    --rs-bg-rgb: 8, 12, 18;
    --rs-line: #223041;
    --rs-line-2: #2e3f52;

    --rs-hero-base: #05090e;

    --rs-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --rs-shadow-2: 0 8px 20px -8px rgba(0, 0, 0, 0.72),
      0 2px 8px -3px rgba(0, 0, 0, 0.5);
    --rs-shadow-3: 0 28px 56px -20px rgba(0, 0, 0, 0.85),
      0 10px 24px -14px rgba(0, 0, 0, 0.6);
  }

  .rs-page .rs-hero__bg {
    background-image:
      radial-gradient(64% 86% at 10% -6%, rgba(45, 212, 191, 0.24), transparent 62%),
      radial-gradient(52% 72% at 92% 4%, rgba(245, 165, 36, 0.13), transparent 64%),
      radial-gradient(90% 110% at 52% 118%, rgba(13, 95, 89, 0.34), transparent 68%),
      linear-gradient(180deg, #070f16 0%, #05090e 62%);
  }

  .rs-page .rs-btn--primary:hover {
    background: var(--rs-brand-600);
    border-color: var(--rs-brand-600);
  }

  .rs-page .rs-card__flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  .rs-page .rs-hero__stats .rs-stat {
    background: rgba(255, 255, 255, 0.045);
  }

  .rs-page .rs-table tbody tr:hover td,
  .rs-page .rs-faq__btn:hover {
    background: rgba(var(--rs-brand-rgb), 0.09);
  }

  .rs-page .rs-search__clear:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* --------------------------------------------------------------------------
   16. MOTION
   -------------------------------------------------------------------------- */

@keyframes rs-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* !important is required here: this kill-switch must beat every declaration
   above it (all of which are more specific than `.rs-page *`) as well as
   Bootstrap's own .fade / .collapsing transitions inside the FAQ accordion. */
@media (prefers-reduced-motion: reduce) {
  .rs-page,
  .rs-page *,
  .rs-page *::before,
  .rs-page *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .rs-page .rs-card:hover,
  .rs-page .rs-card:focus-visible,
  .rs-page .rs-btn:active,
  .rs-page .rs-chip:active,
  .rs-page .rs-alpha__btn:active {
    transform: none;
  }

  .rs-page .rs-card__go {
    transform: none;
  }

  .rs-page .rs-faq__btn[aria-expanded="true"] .fa {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   17. PRINT — flat directory, no chrome
   -------------------------------------------------------------------------- */

@media print {
  .rs-page {
    --rs-card-min: 130px;
    background: #fff;
    color: #000;
  }

  .rs-page .rs-toolbar,
  .rs-page .rs-alpha,
  .rs-page .rs-moreWrap,
  .rs-page .rs-hero__actions,
  .rs-page .rs-hero__bg,
  .rs-page .rs-empty {
    display: none;
  }

  .rs-page .rs-hero {
    background: #fff;
    color: #000;
  }

  .rs-page .rs-hero__title,
  .rs-page .rs-hero__lead,
  .rs-page .rs-hero__stats .rs-stat__num,
  .rs-page .rs-hero__stats .rs-stat__label,
  .rs-page .rs-hero .rs-crumb li,
  .rs-page .rs-hero .rs-eyebrow {
    color: #000;
  }

  .rs-page .rs-hero__inner {
    animation: none;
    padding-block: 12px;
  }

  /* paper gets the whole directory — must match BOTH collapse keys, and comes
     later in source so it wins at equal specificity */
  html.rs-js .rs-page .rs-grid[data-rs-collapse],
  html.rs-js .rs-page .rs-grid.is-collapsed {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .rs-page .rs-card,
  .rs-page .rs-panel,
  .rs-page .rs-faq__item {
    break-inside: avoid;
    box-shadow: none;
    border-color: #bbb;
  }

  .rs-page .rs-card::after {
    display: none;
  }

  .rs-page .rs-card__go {
    display: none;
  }

  /* paper cannot be scrolled sideways — on print, and ONLY on print, the code
     sample wraps so the whole sample survives the page */
  .rs-page .rs-code {
    overflow: visible;
    background: #fff;
    border-color: #bbb;
    color: #000;
  }

  .rs-page .rs-code code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .rs-page .rs-faq__a {
    display: block;
    height: auto;
  }
}