/* ============================================================ raxo-bundle.css - compiled stylesheet bundle (DO NOT HAND-EDIT) Built from, in cascade order: assets/fonts.css -> assets/tailwind.css -> assets/raxo-ios.css REBUILD after editing any source: python "F:\Claude\RAXO-Locksmiths-Workspace\_dev\tools\_build_css_bundle.py" THEN bump ?v= on every page referencing /wp-content/themes/alex/assets/raxo-bundle.css and re-record: _audit_css_version.py --record (editing a source WITHOUT rebuilding fails _audit_css_version.py / _verify_all) ============================================================ */ /* ---- begin fonts.css ---- */ /* Self-hosted webfonts — Session 28 (A3, LCP fix). Replaces the render-blocking fonts.googleapis.com + fonts.gstatic.com chain (two third-party origins) that delayed the hero-text LCP ~2.45s on mobile. Latin subset only — matches the prior Google Fonts request exactly. Inter v20 is a variable font (weight axis 100–900) → one file covers 400/500/700/800 used across the site. JetBrains Mono pinned at 600 (.mono). Files live in /wp-content/themes/alex/assets/fonts/ and are long-cached by netlify.toml. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/wp-content/themes/alex/assets/fonts/inter-latin.woff2') format('woff2'); } /* Cyrillic (RU): inter-latin.woff2 has no Cyrillic glyphs, so Russian text used to fall through to the Arial fallback (heavier, narrower, 'mechanical'). This subset is declared after the Latin face so it wins for Cyrillic only, and the browser downloads it only on pages that actually contain Cyrillic text. Inter variable (OFL), wght 100-900. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/wp-content/themes/alex/assets/fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/wp-content/themes/alex/assets/fonts/jetbrains-mono-latin-600.woff2') format('woff2'); } /* Metric-matched fallbacks (CLS fix, 2026-07-23): until the webfont arrives, text renders in a size-adjusted local face whose line boxes match the webfont's, so font-display:swap no longer re-wraps the page on slow connections. Metrics are the standard capsize-derived Inter->Arial set. */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; } @font-face { font-family: 'JetBrains Mono Fallback'; src: local('Courier New'); size-adjust: 105.06%; ascent-override: 97.06%; descent-override: 28.58%; line-gap-override: 0%; } /* ==================================================================== RAXO — UI / accessibility override layer Added 2026-06-24 (run-06 design pass · P0 colour-contrast remediation). Brings the primary CTA, prices, star ratings, links and carets up to WCAG AA. Mechanism: this file is linked sitewide (all 42 deployable pages) and loads BEFORE tailwind.css, so these rules use !important to win over the Tailwind utilities. Fully reversible — delete this block to revert. The canonical long-term home is the Tailwind config (a two-token orange); this override layer is the zero-risk way to ship the fix without a CSS rebuild. Scoping: colours are DEEPENED for light backgrounds (where the bright brand values fail on white) and RESTORED to the bright values inside dark sections (.bg-navy / .bg-slate2 / .text-paper) where they already pass and the deepened ones would fail. A trailing .bg-white rule re-deepens white cards/pills that sit inside a dark section. ==================================================================== */ /* Orange fills (CTA buttons AND solid badges like the make-page "TOP" trim pill) — deepen the orange so the white label clears AA (#FF6B1A + #fff = 2.85 -> #C84A0C + #fff = 4.73). */ .bg-orange1, .hover\:bg-orange1:hover { background-color:#C84A0C !important; } /* Orange text / prices / step-numbers on light — darken (#FF6B1A on white = 2.85 -> #C2410C on white ~= 5.0). */ .text-orange1, .hover\:text-orange1:hover { color:#C2410C !important; } /* …keep the bright brand orange inside dark sections. 2026-09-04 (Lighthouse color-contrast): #FF6B1A measured 4.29 on the rgba(255,255,255,.05) card (#2A354D) inside .bg-slate2 -> lifted to #FF7A33 (4.71 there, 5.5 on .bg-slate2, 6.4 on .bg-navy). Text only; the .bg-orange1 fill above is unchanged. */ .bg-navy .text-orange1, .bg-slate2 .text-orange1, .text-paper .text-orange1, .bg-navy .hover\:text-orange1:hover, .bg-slate2 .hover\:text-orange1:hover, .text-paper .hover\:text-orange1:hover { color:#FF7A33 !important; } /* Star ratings — amber-400 fails on white (1.67). Darken on light, keep bright on dark. */ .text-amber-400 { color:#B45309 !important; } .bg-navy .text-amber-400, .bg-slate2 .text-amber-400, .text-paper .text-amber-400 { color:#FBBF24 !important; } /* Inline link blue — fails on white (3.48), marginal on navy (4.44). Darken on light, lighten on dark. (border-blue1 / focus rings are untouched.) */ .text-blue1, .hover\:text-blue1:hover { color:#1F6FB2 !important; } .bg-navy .text-blue1, .bg-slate2 .text-blue1, .text-paper .text-blue1, .bg-navy .hover\:text-blue1:hover, .bg-slate2 .hover\:text-blue1:hover, .text-paper .hover\:text-blue1:hover { color:#7DB8EF !important; } /* Green check marks / "NEW" badge — emerald-600 fails on white (3.77). Darken on light, brighten on dark. (The hero/CTA pills use emerald-400 on dark — untouched.) */ .text-emerald-600 { color:#047857 !important; } .bg-navy .text-emerald-600, .bg-slate2 .text-emerald-600, .text-paper .text-emerald-600 { color:#34D399 !important; } /* Red "scam" ✗ markers — red-400 is marginal on the dark comparison card (4.43). Brighten on dark. */ .bg-navy .text-red-400, .bg-slate2 .text-red-400, .text-paper .text-red-400 { color:#FCA5A5 !important; } /* Disclosure / accordion carets (slate-400 on white = 2.56). */ .chev { color:#475569 !important; } /* Muted secondary text — slate-400 fails on white (2.56): breadcrumbs, mobile-nav labels, captions, disclosure carets. Darken to slate-500 on light; keep slate-400 on dark. */ .text-slate-400 { color:#5B6777 !important; } .bg-navy .text-slate-400, .bg-slate2 .text-slate-400, .text-paper .text-slate-400 { color:#94A3B8 !important; } /* 2026-09-04 (Lighthouse color-contrast): the muted shade #64748B measures 4.26 on the iOS paper background (#F2F2F7) at 12-13 px, below AA 4.5. #5B6777 is the smallest lift that clears it with margin (5.15 on paper, 5.75 on white); applied to the slate-400 remap above AND the raw slate-500 utility (eyebrows, captions, "plus tax" footnotes, ~1,000 uses). Dark sections restore slate-400's own value, same pattern as above. */ .text-slate-500 { color:#5B6777 !important; } .bg-navy .text-slate-500, .bg-slate2 .text-slate-500, .text-paper .text-slate-500 { color:#94A3B8 !important; } /* Same audit: the /50 paper eyebrow on the rgba(255,255,255,.05) card inside .bg-slate2 composites to #9198A5 on #2A354D = 4.22. Alpha .6 composites to #A6ABB6 = 5.32 there and ~6.4 on .bg-navy. */ .text-paper\/50 { color:rgba(248,250,252,.6) !important; } /* White cards/pills keep the deepened values even when nested in a dark section (must follow the dark-section restores above). */ .bg-white .text-orange1 { color:#C2410C !important; } .bg-white .text-amber-400 { color:#B45309 !important; } .bg-white .text-blue1 { color:#1F6FB2 !important; } .bg-white .text-emerald-600 { color:#047857 !important; } /* ==================================================================== RAXO — Audit II utilities (Readability · GEO) Added 2026-06-26 (RAXO run-17 · Readability/SEO/GEO audit implementation). Purely ADDITIVE — brand-new class names only. No Tailwind utility is overridden and no !important is used, so the before-tailwind load order is irrelevant (these selectors don't exist in tailwind.css). Fully reversible: delete this block to revert. · R2 fuller type scale — fluid --step tokens + role classes · R4 measure cap — .measure / .measure-tight (character-based) · R7 card hierarchy — .card-flat / .card-outline / .card-feature · G1 GEO key-facts — .key-facts definition-list grid (LIGHT bg only) · S1 breadcrumb trail — .crumbs Place .key-facts / .t-stat (navy ink) on LIGHT sections only. ==================================================================== */ :root{ --step--1: clamp(.8125rem, .78rem + .15vw, .875rem); /* fine print 13–14 */ --step-0 : clamp(1rem, .96rem + .2vw, 1.0625rem); /* body 16–17 */ --step-1 : clamp(1.125rem, 1.05rem + .4vw, 1.25rem); /* LEAD para */ --step-2 : clamp(1.5rem, 1.3rem + 1vw, 2.25rem); /* H2 */ --step-3 : clamp(2rem, 1.6rem + 2vw, 3rem); /* H1 */ --step-4 : clamp(2.75rem, 2rem + 3.6vw, 4.25rem); /* DISPLAY / stat */ } /* role classes — assign by meaning, not by size */ .t-lead { font-size:var(--step-1); line-height:1.5; color:#334155; max-width:54ch; } .t-display { font-size:var(--step-4); line-height:1.02; letter-spacing:-.03em; font-weight:900; } .t-stat { font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace; font-weight:700; font-size:var(--step-4); line-height:1; letter-spacing:-.02em; font-feature-settings:"tnum" 1; } /* R4 — measure cap. Use by REPLACING max-w-2xl/3xl on body prose (never alongside a Tailwind max-w). */ .measure { max-width:64ch; } /* ~62–66 chars at 16px */ .measure-tight { max-width:54ch; } /* ledes / intros */ /* R7 — card hierarchy (visible importance at a glance). */ .card-flat { background:#F8FAFC; border:1px solid #EEF2F7; border-radius:14px; } .card-outline { background:#fff; border:1px solid #E2E8F0; border-radius:16px; box-shadow:0 1px 2px rgba(15,23,42,.04); } .card-feature { background:#fff; border:1px solid #FFD9C2; border-radius:18px; box-shadow:0 18px 40px -22px rgba(200,74,12,.45); position:relative; } .card-feature::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:#C84A0C; border-radius:18px 18px 0 0; } /* G1 — GEO key-facts definition list: atomic, labelled, quotable. Outcome-level facts only. */ .key-facts{ margin:0; display:grid; grid-template-columns:1fr; gap:0; border:1px solid #E2E8F0; border-radius:14px; overflow:hidden; background:#fff; } @media (min-width:640px){ .key-facts{ grid-template-columns:1fr 1fr; } } .key-facts > div{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 15px; border-top:1px solid #EEF2F7; } .key-facts > div:first-child{ border-top:none; } @media (min-width:640px){ .key-facts > div:nth-child(2){ border-top:none; } } .key-facts dt{ font-size:var(--step--1); font-weight:600; color:#475569; } .key-facts dd{ margin:0; font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace; font-weight:700; color:#0B1E3F; text-align:right; } /* S1 — visible breadcrumb trail (mirrors the BreadcrumbList JSON-LD). */ .crumbs{ font-size:13px; line-height:1.4; color:#64748B; } .crumbs a{ color:#475569; text-decoration:none; } .crumbs a:hover{ text-decoration:underline; text-underline-offset:2px; } .crumbs [aria-current="page"]{ color:#0B1E3F; font-weight:600; } /* ---- end fonts.css ---- */ /* ---- begin tailwind.css ---- */ *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,"Inter Fallback",system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:JetBrains Mono,"JetBrains Mono Fallback",ui-monospace,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-x-0{left:0;right:0}.bottom-0{bottom:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.col-span-2{grid-column:span 2/span 2}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-\[5px\]{margin-top:5px}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-\[4\/5\]{aspect-ratio:4/5}.aspect-square{aspect-ratio:1/1}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-28{height:7rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.h-px{height:1px}.min-h-8{min-height:2rem}.min-h-\[360px\]{min-height:360px}.min-h-screen{min-height:100vh}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-28{width:7rem}.w-9{width:2.25rem}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[640px\]{min-width:640px}.min-w-\[720px\]{min-width:720px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-\[80\%\]{max-width:80%}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.list-decimal{list-style-type:decimal}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-2{row-gap:.5rem}.space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-softgray>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity,1))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-4{border-bottom-width:4px}.border-l-2{border-left-width:2px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-amber-400\/30{border-color:rgba(251,191,36,.3)}.border-amber-500\/30{border-color:rgba(245,158,11,.3)}.border-blue1{--tw-border-opacity:1;border-color:rgb(58 141 222/var(--tw-border-opacity,1))}.border-emerald-200{--tw-border-opacity:1;border-color:rgb(167 243 208/var(--tw-border-opacity,1))}.border-emerald-300{--tw-border-opacity:1;border-color:rgb(110 231 183/var(--tw-border-opacity,1))}.border-emerald-400\/30{border-color:rgba(52,211,153,.3)}.border-emerald-400\/40{border-color:rgba(52,211,153,.4)}.border-emerald-500\/30{border-color:rgba(16,185,129,.3)}.border-navy{--tw-border-opacity:1;border-color:rgb(11 30 63/var(--tw-border-opacity,1))}.border-orange1{--tw-border-opacity:1;border-color:rgb(255 107 26/var(--tw-border-opacity,1))}.border-orange1\/30{border-color:rgba(255,107,26,.3)}.border-orange1\/40{border-color:rgba(255,107,26,.4)}.border-red-400\/30{border-color:hsla(0,91%,71%,.3)}.border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity,1))}.border-softgray{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-softgray\/80{border-color:rgba(229,231,235,.8)}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/15{border-color:hsla(0,0%,100%,.15)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.bg-amber-400{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity,1))}.bg-amber-400\/10{background-color:rgba(251,191,36,.1)}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-amber-500\/\[0\.04\]{background-color:rgba(245,158,11,.04)}.bg-blue1{--tw-bg-opacity:1;background-color:rgb(58 141 222/var(--tw-bg-opacity,1))}.bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(209 250 229/var(--tw-bg-opacity,1))}.bg-emerald-400{--tw-bg-opacity:1;background-color:rgb(52 211 153/var(--tw-bg-opacity,1))}.bg-emerald-400\/10{background-color:rgba(52,211,153,.1)}.bg-emerald-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-emerald-500\/15{background-color:rgba(16,185,129,.15)}.bg-emerald-500\/\[0\.04\]{background-color:rgba(16,185,129,.04)}.bg-navy{--tw-bg-opacity:1;background-color:rgb(11 30 63/var(--tw-bg-opacity,1))}.bg-orange1{--tw-bg-opacity:1;background-color:rgb(255 107 26/var(--tw-bg-opacity,1))}.bg-paper{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-slate-50\/60{background-color:rgba(248,250,252,.6)}.bg-slate2{--tw-bg-opacity:1;background-color:rgb(31 42 68/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/15{background-color:hsla(0,0%,100%,.15)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-white\/\[0\.04\]{background-color:hsla(0,0%,100%,.04)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-navy{--tw-gradient-from:#0b1e3f var(--tw-gradient-from-position);--tw-gradient-to:rgba(11,30,63,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-slate2{--tw-gradient-to:#1f2a44 var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pb-10{padding-bottom:2.5rem}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-10{padding-left:2.5rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pt-10{padding-top:2.5rem}.pt-12{padding-top:3rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.font-sans{font-family:Inter,"Inter Fallback",system-ui,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[30px\]{font-size:30px}.text-\[32px\]{font-size:32px}.text-\[34px\]{font-size:34px}.text-\[36px\]{font-size:36px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.italic{font-style:italic}.leading-\[1\.05\]{line-height:1.05}.leading-\[1\.08\]{line-height:1.08}.leading-\[1\.1\]{line-height:1.1}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-widest{letter-spacing:.1em}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-amber-900{--tw-text-opacity:1;color:rgb(120 53 15/var(--tw-text-opacity,1))}.text-blue1{--tw-text-opacity:1;color:rgb(58 141 222/var(--tw-text-opacity,1))}.text-emerald-300{--tw-text-opacity:1;color:rgb(110 231 183/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-emerald-700{--tw-text-opacity:1;color:rgb(4 120 87/var(--tw-text-opacity,1))}.text-emerald-800{--tw-text-opacity:1;color:rgb(6 95 70/var(--tw-text-opacity,1))}.text-emerald-900{--tw-text-opacity:1;color:rgb(6 78 59/var(--tw-text-opacity,1))}.text-ink{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.text-navy{--tw-text-opacity:1;color:rgb(11 30 63/var(--tw-text-opacity,1))}.text-orange1{--tw-text-opacity:1;color:rgb(255 107 26/var(--tw-text-opacity,1))}.text-paper{--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity,1))}.text-paper\/25{color:rgba(248,250,252,.25)}.text-paper\/50{color:rgba(248,250,252,.5)}.text-paper\/55{color:rgba(248,250,252,.55)}.text-paper\/60{color:rgba(248,250,252,.6)}.text-paper\/70{color:rgba(248,250,252,.7)}.text-paper\/75{color:rgba(248,250,252,.75)}.text-paper\/80{color:rgba(248,250,252,.8)}.text-paper\/85{color:rgba(248,250,252,.85)}.text-paper\/90{color:rgba(248,250,252,.9)}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.text-slate2{--tw-text-opacity:1;color:rgb(31 42 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.decoration-1{text-decoration-thickness:1px}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-bar{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-bar{--tw-shadow:0 -8px 24px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 -8px 24px -12px var(--tw-shadow-color)}.shadow-card{--tw-shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.18);--tw-shadow-colored:0 1px 2px var(--tw-shadow-color),0 8px 24px -12px var(--tw-shadow-color)}.shadow-card,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-4{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-orange1\/70{--tw-ring-color:rgba(255,107,26,.7)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (max-width:767px){.cmp-vs thead{display:none}.cmp-vs tbody,.cmp-vs td,.cmp-vs th,.cmp-vs tr{display:block;width:auto}.cmp-vs tr{padding:14px 18px}.cmp-vs th[scope=row]{padding:0 0 8px!important;font-size:15px}.cmp-vs td{padding:6px 0 0!important}.cmp-vs td:before{content:attr(data-label);display:block;margin-bottom:1px;font:700 11px/1.4 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#475569}}.placeholder\:text-paper\/60::-moz-placeholder{color:rgba(248,250,252,.6)}.placeholder\:text-paper\/60::placeholder{color:rgba(248,250,252,.6)}.hover\:border-orange1:hover{--tw-border-opacity:1;border-color:rgb(255 107 26/var(--tw-border-opacity,1))}.hover\:bg-blue1\/10:hover{background-color:rgba(58,141,222,.1)}.hover\:bg-navy:hover{--tw-bg-opacity:1;background-color:rgb(11 30 63/var(--tw-bg-opacity,1))}.hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:bg-white\/15:hover{background-color:hsla(0,0%,100%,.15)}.hover\:bg-white\/5:hover{background-color:hsla(0,0%,100%,.05)}.hover\:text-blue1:hover{--tw-text-opacity:1;color:rgb(58 141 222/var(--tw-text-opacity,1))}.hover\:text-navy:hover{--tw-text-opacity:1;color:rgb(11 30 63/var(--tw-text-opacity,1))}.hover\:text-orange1:hover{--tw-text-opacity:1;color:rgb(255 107 26/var(--tw-text-opacity,1))}.hover\:text-paper:hover{--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-blue1:focus{--tw-border-opacity:1;border-color:rgb(58 141 222/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.group:hover .group-hover\:text-orange1{--tw-text-opacity:1;color:rgb(255 107 26/var(--tw-text-opacity,1))}.group:hover .group-hover\:underline{text-decoration-line:underline}@media (min-width:640px){.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:768px){.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-7{grid-column:span 7/span 7}.md\:col-span-8{grid-column:span 8/span 8}.md\:col-span-9{grid-column:span 9/span 9}.md\:mt-0{margin-top:0}.md\:mt-12{margin-top:3rem}.md\:mt-14{margin-top:3.5rem}.md\:mt-16{margin-top:4rem}.md\:mt-8{margin-top:2rem}.md\:block{display:block}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:grid{display:grid}.md\:hidden{display:none}.md\:h-9{height:2.25rem}.md\:min-w-\[640px\]{min-width:640px}.md\:min-w-full{min-width:100%}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:items-start{align-items:flex-start}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-10{gap:2.5rem}.md\:gap-4{gap:1rem}.md\:gap-5{gap:1.25rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem*var(--tw-space-y-reverse))}.md\:p-10{padding:2.5rem}.md\:p-12{padding:3rem}.md\:p-6{padding:1.5rem}.md\:p-7{padding:1.75rem}.md\:p-8{padding:2rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.md\:pb-12{padding-bottom:3rem}.md\:pb-16{padding-bottom:4rem}.md\:pb-20{padding-bottom:5rem}.md\:pl-14{padding-left:3.5rem}.md\:pt-16{padding-top:4rem}.md\:pt-20{padding-top:5rem}.md\:text-left{text-align:left}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:text-xs{font-size:.75rem;line-height:1rem}.md\:leading-\[1\.05\]{line-height:1.05}.md\:leading-\[1\.0\]{line-height:1}}@media (min-width:1024px){.lg\:col-span-1{grid-column:span 1/span 1}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:gap-7{gap:1.75rem}.lg\:text-\[15px\]{font-size:15px}} /* ---- end tailwind.css ---- */ /* ---- begin raxo-ios.css ---- */ /* ============================================================================ RAXO iOS skin — "1b Bold Brand Cards" presentation layer (additive). ---------------------------------------------------------------------------- ADD-ON, NOT A REWRITE. This file only *styles* existing markup and a few additive hooks. It is activated by ``. Removing the body class OR this fully reverts the page to its previous design — no content, URL, or JSON-LD depends on it. Colours use the site's AA tokens (bright #FF6B1A only on dark; #E2580E / #C2410C on light). ============================================================================ */ /* ---- 1. iOS grouped background (light sections become the iOS grey) -------- */ body.ios { background:#F2F2F7; } body.ios .bg-paper { background:#F2F2F7; } /* hero (.bg-navy) and dark bands (.bg-slate2) intentionally keep their colour */ /* ---- 2. Navy translucent chrome nav --------------------------------------- */ body.ios-chrome #topbar{ background:rgba(11,30,63,.72); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid rgba(255,255,255,.12); } body.ios-chrome #topbar.shadow-card{ box-shadow:0 .5px 0 rgba(255,255,255,.10); } body.ios-chrome #topbar nav[aria-label="Primary"] a{ color:rgba(255,255,255,.9); } body.ios-chrome #topbar nav[aria-label="Primary"] a:hover{ color:#FF8A4C; } /* logo: swap dark wordmark for the light one on the navy bar */ body.ios-chrome .logo-dark{ display:none; } body.ios-chrome .logo-light{ display:inline-block; } /* header Text (outline) + hamburger sit on navy */ body.ios-chrome #topbar [data-raxo-header-sms]{ color:#fff; border-color:rgba(255,255,255,.28); } body.ios-chrome #topbar [data-raxo-header-sms]:hover{ color:#FF8A4C; border-color:#FF8A4C; } body.ios-chrome #menuToggle{ color:#fff; border-color:rgba(255,255,255,.28); } /* mobile drawer on navy */ body.ios-chrome #mobileNav{ background:rgba(11,30,63,.98); border-color:rgba(255,255,255,.08); } body.ios-chrome #mobileNav a{ color:rgba(255,255,255,.92); } body.ios-chrome #mobileNav a:hover{ color:#FF8A4C; } body.ios-chrome #mobileNav p{ color:rgba(255,255,255,.5); } body.ios-chrome #mobileNav svg{ color:rgba(255,255,255,.5); } /* logo variants: default (non-iOS) shows the existing dark logo only */ .logo-light{ display:none; } /* ---- 3. iOS large-title type rhythm (mobile) ------------------------------ */ @media (max-width:767px){ body.ios main h1{ letter-spacing:-.02em; line-height:1.12; } body.ios main h2{ font-size:26px; line-height:1.16; letter-spacing:-.012em; } } /* ---- 4. Rounded iOS cards + refined shadow -------------------------------- */ body.ios .rounded-2xl{ border-radius:18px; } body.ios .rounded-3xl{ border-radius:22px; } body.ios .shadow-card{ box-shadow:0 1px 2px rgba(11,30,63,.06), 0 12px 26px -18px rgba(11,30,63,.40); } /* ---- 5. Situation grid (1b hero-follow) ----------------------------------- */ .sit-wrap{ margin-top:0; } .sit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (min-width:768px){ .sit-grid{ grid-template-columns:repeat(4,1fr); gap:16px; } } .sit-card{ display:flex; flex-direction:column; gap:8px; background:#fff; border-radius:18px; padding:16px 16px 15px; border:1px solid rgba(11,30,63,.05); box-shadow:0 1px 2px rgba(11,30,63,.06), 0 12px 26px -18px rgba(11,30,63,.40); color:inherit; text-decoration:none; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease; } .sit-card:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -20px rgba(11,30,63,.45); border-color:rgba(226,88,14,.35); } .sit-card:active{ transform:translateY(0); } .sit-card .ic{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#E2580E; color:#fff; box-shadow:0 6px 14px -6px rgba(255,107,26,.7); } .sit-card .ic svg{ width:22px; height:22px; } .sit-card h3{ font-weight:700; color:#0B1E3F; font-size:17px; letter-spacing:-.01em; } .sit-card .desc{ color:#6E6E73; font-size:14px; line-height:1.35; } .sit-card .price{ margin-top:auto; font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:600; color:#C2410C; font-size:15px; } /* ---- 6. Segmented control (Popular / All prices) — both panels stay in DOM - */ .seg{ display:inline-flex; background:rgba(120,120,128,.12); border-radius:11px; padding:3px; gap:2px; } .seg button{ border:0; background:transparent; cursor:pointer; font:600 14px/1 'Inter',system-ui,sans-serif; color:#0B1E3F; padding:9px 16px; border-radius:8px; min-height:34px; transition:background .15s ease, box-shadow .15s ease; } .seg button[aria-selected="true"]{ background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.16); } .seg-panel[hidden]{ display:none; } /* hidden = display:none but text stays in the DOM (indexable) */ /* featured "Most common" price card */ .price-featured{ border:1.5px solid #FFD9C2 !important; box-shadow:0 16px 34px -22px rgba(200,74,12,.55) !important; position:relative; } .price-featured .pill-common{ display:inline-flex; align-items:center; gap:6px; background:#C84A0C; color:#fff; font:700 10px/1 'Inter',system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px; } /* ---- 7. Sticky iOS bottom bar (Text + Call) ------------------------------- */ body.ios-chrome nav[aria-label="Quick contact"]{ background:rgba(255,255,255,.82); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-top:.5px solid rgba(60,60,67,.16); } /* ---- 8. Quote-flow overlay ------------------------------------------------ */ #raxo-quote[hidden]{ display:none; } #raxo-quote{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; } @media (min-width:768px){ #raxo-quote{ align-items:center; } } .rq-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.42); opacity:0; transition:opacity .25s ease; } #raxo-quote.open .rq-scrim{ opacity:1; } .rq-sheet{ position:relative; width:100%; max-width:440px; max-height:92vh; overflow:auto; background:#F2F2F7; border-radius:22px 22px 0 0; transform:translateY(100%); transition:transform .3s cubic-bezier(.2,.85,.2,1); padding:0 0 22px; } @media (min-width:768px){ .rq-sheet{ border-radius:22px; margin:0 16px; } } #raxo-quote.open .rq-sheet{ transform:translateY(0); } .rq-grabber{ width:38px; height:5px; border-radius:3px; background:rgba(60,60,67,.3); margin:10px auto 0; } .rq-head{ display:flex; align-items:center; gap:10px; padding:12px 16px 6px; } .rq-head .rq-title{ flex:1; text-align:center; font-weight:700; color:#0B1E3F; font-size:16px; } .rq-back, .rq-close{ background:transparent; border:0; cursor:pointer; color:#0B1E3F; font-size:15px; font-weight:600; min-width:44px; min-height:34px; } .rq-progress{ height:4px; background:rgba(60,60,67,.12); border-radius:999px; margin:0 16px 10px; overflow:hidden; } .rq-progress > i{ display:block; height:100%; width:33%; background:#E2580E; border-radius:999px; transition:width .3s ease; } .rq-body{ padding:4px 16px 0; } .rq-step[hidden]{ display:none; } .rq-step h2{ font-size:20px; font-weight:800; color:#0B1E3F; letter-spacing:-.01em; margin:6px 2px 12px; } .rq-pill{ display:inline-flex; align-items:center; gap:6px; background:rgba(226,88,14,.10); color:#C2410C; border:1px solid rgba(226,88,14,.3); border-radius:999px; padding:4px 10px; font:600 12px/1 'JetBrains Mono',ui-monospace,monospace; text-transform:uppercase; letter-spacing:.04em; } .rq-field{ background:#fff; border-radius:14px; padding:10px 14px; margin-bottom:10px; border:1px solid rgba(11,30,63,.06); } .rq-field label{ display:block; font:600 12px/1 'Inter',system-ui,sans-serif; text-transform:uppercase; letter-spacing:.05em; color:#6E6E73; margin-bottom:4px; } .rq-field select, .rq-field input{ width:100%; border:0; background:transparent; font-size:17px; color:#0B1E3F; outline:none; } .rq-primary{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:52px; border:0; border-radius:15px; background:#E2580E; color:#fff; font-weight:700; font-size:17px; cursor:pointer; margin-top:6px; } .rq-primary[disabled]{ opacity:.45; cursor:not-allowed; } .rq-secondary{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:48px; border:1.5px solid rgba(11,30,63,.2); border-radius:15px; background:#fff; color:#0B1E3F; font-weight:700; font-size:16px; cursor:pointer; margin-top:8px; text-decoration:none; } /* urgent "call now" button — for stressed / in-a-hurry callers (rush + lockout steps) */ .rq-call{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:54px; border:0; border-radius:15px; background:#C84A0C; color:#fff; font-weight:800; font-size:17px; text-decoration:none; cursor:pointer; margin-top:8px; box-shadow:0 12px 26px -12px rgba(200,74,12,.75); } .rq-call:hover{ background:#b34209; } .rq-call:active{ transform:translateY(1px); } .rq-call svg{ flex:none; } .rq-send{ background:#34C759; border:0; color:#fff; } .rq-summary{ background:#fff; border-radius:14px; padding:4px 14px; margin-bottom:12px; } .rq-summary .row{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:.5px solid rgba(60,60,67,.14); font-size:15px; } .rq-summary .row:last-child{ border-bottom:0; } .rq-summary .row span:first-child{ color:#6E6E73; } .rq-summary .row span:last-child{ color:#0B1E3F; font-weight:600; text-align:right; } .rq-bubble{ background:#34C759; color:#fff; border-radius:18px 18px 18px 6px; padding:12px 14px; font-size:15px; line-height:1.4; margin:4px 0 12px; } .rq-note{ color:#6E6E73; font-size:13px; line-height:1.4; margin:10px 2px 0; } .rq-mini{ display:block; width:100%; text-align:center; background:transparent; border:0; color:#1F6FB2; font-weight:600; font-size:14px; padding:10px; cursor:pointer; margin-top:2px; } /* ============================================================================ 9. Section rebuilds (faithful 1b composition) — added in the aesthetics pass ============================================================================ */ /* ---- Hero: punchy hook + keyword subhead + Meet-Leo card --------------------- */ body.ios .hero-hook{ margin-top:14px; font-size:28px; line-height:1.08; font-weight:800; letter-spacing:-.022em; color:#fff; } @media (min-width:768px){ body.ios .hero-hook{ margin-top:20px; font-size:54px; } } body.ios .hero-h1{ margin-top:8px; font-size:16px; line-height:1.32; font-weight:600; letter-spacing:0; color:rgba(248,250,252,.72); } @media (min-width:768px){ body.ios .hero-h1{ font-size:19px; margin-top:12px; } } @media (min-width:768px){ body.ios .hero-h1{ font-size:19px; } } .meet-leo{ display:inline-flex; align-items:center; gap:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:10px 14px 10px 10px; } .meet-leo img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.25); } .meet-leo .nm{ font-weight:700; color:#fff; font-size:15px; line-height:1.2; } .meet-leo .rt{ color:rgba(248,250,252,.75); font-size:13px; margin-top:2px; } .meet-leo .stars{ color:#FBBF24; letter-spacing:1px; } /* desktop shows the big portrait + the rating link instead, so hide the card there (needed because .meet-leo's display overrides Tailwind's .md\:hidden by source order) */ @media (min-width:768px){ .meet-leo{ display:none !important; } } /* ---- Brand chips (navy pills, replaces the bullet list) ---------------------- */ .brand-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } body.ios .brand-chips{ margin-top:0; } .brand-chip{ display:inline-flex; align-items:center; gap:6px; background:#0B1E3F; color:#fff; border-radius:999px; padding:9px 15px; font-size:14px; font-weight:600; text-decoration:none; transition:background .15s ease, transform .1s ease; } .brand-chip:hover{ background:#1F2A44; } .brand-chip:active{ transform:translateY(1px); } .brand-chip.muted{ background:rgba(11,30,63,.06); color:#334155; } .brand-chip .tag-new{ color:#047857; font-size:10px; font-weight:800; letter-spacing:.04em; } /* ---- How-it-works: iOS timeline --------------------------------------------- */ .tl{ margin-top:28px; } .tl-step{ position:relative; padding-left:56px; padding-bottom:24px; } .tl-step:last-child{ padding-bottom:0; } .tl-step::before{ content:""; position:absolute; left:19px; top:6px; bottom:-6px; width:2px; background:rgba(226,88,14,.25); } .tl-step:last-child::before{ display:none; } .tl-num{ position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#E2580E; color:#fff; font:600 15px/1 'JetBrains Mono',ui-monospace,monospace; box-shadow:0 6px 14px -6px rgba(255,107,26,.7); } .tl-step h3{ font-weight:700; color:#0B1E3F; font-size:17px; letter-spacing:-.01em; } .tl-step p{ color:#3C3C43; font-size:15px; line-height:1.45; margin-top:4px; } .tl-step p a{ color:#1F6FB2; font-weight:600; } /* how-it-works — defined step cards (m22) */ .steps{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:28px; } @media (min-width:768px){ .steps{ grid-template-columns:repeat(3,1fr); gap:20px; } } .step-card{ position:relative; background:#fff; border:1px solid rgba(11,30,63,.10); border-radius:18px; padding:22px 20px; box-shadow:0 1px 2px rgba(11,30,63,.05), 0 16px 32px -26px rgba(11,30,63,.45); } .step-card .step-n{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:rgba(200,74,12,.10); color:#C2410C; font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:700; font-size:18px; } .step-card h3{ margin-top:14px; font-weight:800; color:#0B1E3F; font-size:17px; letter-spacing:-.01em; } .step-card p{ margin-top:6px; color:#3C3C43; font-size:14.5px; line-height:1.5; } .step-card p em{ font-style:normal; font-weight:700; color:#0B1E3F; } /* flow arrow between the step cards on desktop */ @media (min-width:768px){ .step-card:not(:last-child)::after{ content:"→"; position:absolute; right:-15px; top:30px; z-index:2; color:#C2410C; font-weight:700; font-size:18px; } } /* ---- Calmer folded explainer cards (dealer comparison / scam checklist) ----- */ details.fold, details.fold-dark{ border-radius:16px; } details.fold{ background:#fff; border:1px solid rgba(11,30,63,.08); box-shadow:0 1px 2px rgba(11,30,63,.06), 0 12px 26px -20px rgba(11,30,63,.35); } details.fold-dark{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); } details.fold > summary, details.fold-dark > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; font-weight:700; font-size:16px; min-height:52px; } details.fold > summary{ color:#0B1E3F; } details.fold-dark > summary{ color:#fff; } details.fold > summary::-webkit-details-marker, details.fold-dark > summary::-webkit-details-marker{ display:none; } details.fold[open] > summary{ border-bottom:.5px solid rgba(60,60,67,.14); } details.fold-dark[open] > summary{ border-bottom:.5px solid rgba(255,255,255,.12); } details.fold .fold-body, details.fold-dark .fold-body{ padding:16px 18px; } details.fold .cmp-wrap{ border:0 !important; box-shadow:none !important; border-radius:12px; overflow:hidden; } details.fold > summary .chev, details.fold-dark > summary .chev{ color:#8E8E93; } /* ============================================================================ 10. iOS grouped drawer menu (.im-*) — the hamburger drawer as an inset grouped table (mission-02). Additive, no JS. Light base = #mobileNav …; dark = body.ios-chrome #mobileNav … (written to out-rank the §2 overrides body.ios-chrome #mobileNav a / p above). Two row grammars only: single-column chevron rows (.im-row) and 2-col chevron-less cells (.im-cell). ============================================================================ */ #mobileNav.ios-menu{ background:#F2F2F7; /* Self-contained scroll: the drawer can be taller than the phone (7 services + 10 brands + 4 "more" rows), and it lives inside the position:sticky header, so cap it to the space under the 56px (h-14) top bar and let it scroll on its own. The top bar stays put; every item is now reachable. dvh line wins where it's supported (accounts for mobile browser chrome); vh line is the fallback. */ max-height:calc(100vh - 56px); max-height:calc(100dvh - 56px); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } #mobileNav.ios-menu > nav{ padding:16px 20px 24px; } /* --- quick actions (action pair, distinct from the destination lists) ------ */ #mobileNav .im-cta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } #mobileNav .im-btn{ display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:14px; font:700 16px/1.2 'Inter',system-ui,sans-serif; text-decoration:none; transition:background .12s ease; } #mobileNav .im-btn-outline{ color:#0B1E3F; border:1.5px solid rgba(11,30,63,.45); background:transparent; } body.ios-chrome #mobileNav .im-btn-outline{ color:#fff; border-color:rgba(255,255,255,.45); } /* the filled button takes .bg-orange1 + text-white in markup so it inherits the AA-remediated orange from fonts.css (#C84A0C) — one orange language sitewide */ /* --- section labels --------------------------------------------------------- */ #mobileNav .im-label{ margin:24px 2px 8px; font:700 12px/1 'Inter',system-ui,sans-serif; text-transform:uppercase; letter-spacing:.06em; color:#6E6E73; } body.ios-chrome #mobileNav .im-label{ color:rgba(255,255,255,.55); } #mobileNav .im-cta + .im-label{ margin-top:20px; } /* --- grouped cards ----------------------------------------------------------- */ #mobileNav .im-group{ list-style:none; margin:0; padding:0; background:#fff; border:1px solid rgba(11,30,63,.08); border-radius:16px; overflow:hidden; /* lift the white cards off the grey backdrop so the groups read as distinct, scannable blocks (was flat white-on-white before) */ box-shadow:0 1px 2px rgba(11,30,63,.05), 0 10px 22px -16px rgba(11,30,63,.35); } body.ios-chrome #mobileNav .im-group{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); } /* --- single-column rows (chevron grammar) ------------------------------------ */ #mobileNav .im-row{ position:relative; display:flex; align-items:center; min-height:48px; padding:12px 40px 12px 16px; font:600 16px/1.3 'Inter',system-ui,sans-serif; color:#1C1C1E; text-decoration:none; transition:background .12s ease; } #mobileNav .im-strong{ font-weight:700; } body.ios-chrome #mobileNav .im-row{ color:rgba(255,255,255,.92); } /* inset hairline between rows (iOS grouped-table look; none under the last row) */ #mobileNav .im-group li + li .im-row::before{ content:""; position:absolute; left:16px; right:0; top:0; border-top:.5px solid rgba(60,60,67,.14); } body.ios-chrome #mobileNav .im-group li + li .im-row::before{ border-top-color:rgba(255,255,255,.12); } /* CSS chevron — maps 1:1 to the single-column grammar */ #mobileNav .im-row::after{ content:""; position:absolute; right:18px; top:50%; width:8px; height:8px; border-right:2px solid #C7C7CC; border-top:2px solid #C7C7CC; transform:translateY(-50%) rotate(45deg); } body.ios-chrome #mobileNav .im-row::after{ border-color:rgba(255,255,255,.35); } /* --- the one 2-col exception: the brand grid (chevron-less grammar) ---------- */ #mobileNav .im-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; border-top:.5px solid rgba(60,60,67,.14); } body.ios-chrome #mobileNav .im-grid{ border-top-color:rgba(255,255,255,.12); } #mobileNav .im-cell{ display:block; min-height:48px; padding:13px 16px 12px; font:600 16px/1.4 'Inter',system-ui,sans-serif; color:#1C1C1E; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .12s ease; } body.ios-chrome #mobileNav .im-cell{ color:rgba(255,255,255,.92); } #mobileNav .im-grid .im-span{ grid-column:1 / -1; } /* grid hairlines: horizontal full-width from row 2 on; vertical divider on left cells */ #mobileNav .im-grid li:nth-child(n+3) .im-cell{ border-top:.5px solid rgba(60,60,67,.14); } #mobileNav .im-grid li:nth-child(odd):not(.im-span) .im-cell{ border-right:.5px solid rgba(60,60,67,.14); } body.ios-chrome #mobileNav .im-grid li:nth-child(n+3) .im-cell{ border-top-color:rgba(255,255,255,.12); } body.ios-chrome #mobileNav .im-grid li:nth-child(odd):not(.im-span) .im-cell{ border-right-color:rgba(255,255,255,.12); } /* --- press + keyboard states -------------------------------------------------- */ #mobileNav .im-row:active, #mobileNav .im-cell:active, #mobileNav .im-btn-outline:active{ background:rgba(11,30,63,.06); } body.ios-chrome #mobileNav .im-row:active, body.ios-chrome #mobileNav .im-cell:active, body.ios-chrome #mobileNav .im-btn-outline:active{ background:rgba(255,255,255,.08); } #mobileNav a:focus-visible{ outline:2px solid #0B1E3F; outline-offset:-2px; background:rgba(11,30,63,.06); } body.ios-chrome #mobileNav a:focus-visible{ outline-color:rgba(255,255,255,.6); background:rgba(255,255,255,.08); } @media (prefers-reduced-motion: reduce){ #mobileNav .im-row, #mobileNav .im-cell, #mobileNav .im-btn{ transition:none; } } /* ============================================================================ 11. Homepage coherence + quote-sheet stress fixes (mission-04, additive). Kickers = the drawer-label grammar promoted to page sections; surface alternation + uniform rhythm are homepage-only (body.ios) and mobile-only. The .rq-close rules below intentionally override §8's text-button close. ============================================================================ */ /* --- kicker orientation labels --------------------------------------------- */ .kicker{ display:flex; align-items:center; gap:8px; font:700 12px/1 'Inter',system-ui,sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#C84A0C; margin-bottom:10px; } .kicker::before{ content:""; width:16px; height:3px; border-radius:2px; background:#E2580E; flex:none; } .bg-slate2 .kicker, .bg-navy .kicker{ color:#FF8A4C; } .bg-slate2 .kicker::before, .bg-navy .kicker::before{ background:#FF8A4C; } /* --- mobile section rhythm + surface alternation (homepage = body.ios) ------ */ @media (max-width:767px){ body.ios .sec-white{ background:#fff; } body.ios main#top > section.bg-paper > .max-w-6xl, body.ios main#top > section.bg-paper > .max-w-3xl{ padding-top:2.5rem; padding-bottom:2.5rem; } } /* --- quote sheet: iOS close chip (overrides §8 .rq-close) -------------------- */ .rq-head{ position:relative; padding-right:64px; min-height:44px; } .rq-close{ position:absolute; top:10px; right:12px; width:32px; height:32px; min-width:32px; min-height:32px; padding:0; border-radius:50%; background:rgba(0,0,0,.07); display:flex; align-items:center; justify-content:center; color:#6E6E73; font-size:18px; font-weight:600; line-height:1; } .rq-close::before{ content:""; position:absolute; inset:-8px; border-radius:50%; } /* 48px hit area */ .rq-close:hover{ background:rgba(0,0,0,.11); } /* --- quote sheet: rush step + focus rings ------------------------------------ */ /* the hidden attribute must always win over component display rules (e.g. .rq-secondary's display:flex) — §8 guarded .rq-step[hidden] only */ #raxo-quote [hidden]{ display:none; } .rq-rush-note{ color:#3C3C43; font-size:15px; line-height:1.45; margin:2px 2px 12px; } .rq-step h2:focus{ outline:none; } #raxo-quote a:focus-visible, #raxo-quote button:focus-visible{ outline:2px solid #C84A0C; outline-offset:2px; } /* ===================================================================== */ /* §11 — m22 homepage reorg (1b "Control Center" look, Direction A: */ /* compressed hero + situation picker in the first mobile screen). */ /* ===================================================================== */ /* compact Leo credential — keeps the named human + face in-fold without the tall portrait card eating the first screen (portrait relocates to the proof band below) */ .hero-cred{ display:inline-flex; align-items:center; gap:10px; margin-top:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:5px 15px 5px 5px; text-decoration:none; } .hero-cred img{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.25); } .hero-cred .nm{ font-weight:700; color:#fff; font-size:14px; } .hero-cred .stars{ color:#FBBF24; letter-spacing:1px; font-size:13px; } .hero-cred .rt{ color:rgba(248,250,252,.8); font-size:13px; } /* the ONE bright element on the navy hero — the situation-picker card */ .picker-card{ background:#F2F2F7; border-radius:24px; padding:18px 16px 16px; box-shadow:0 26px 60px -30px rgba(0,0,0,.65); } .picker-h{ font-weight:800; color:#0B1E3F; font-size:19px; letter-spacing:-.015em; } .picker-card h2.picker-h{ font-size:19px; line-height:inherit; letter-spacing:-.015em; } /* 2026-09-04: picker heading is an

now (heading order); keep the

metrics against `body.ios main h2` (26px) */ /* keep the picker tiles 2x2 even on desktop (it sits in a narrow hero column) */ @media (min-width:768px){ .picker-card .sit-grid{ grid-template-columns:1fr 1fr; } } .picker-sub{ color:#6E6E73; font-size:13px; margin-top:3px; line-height:1.35; } /* color-coded situation-tile icon chips (override the single-orange .ic) */ .sit-card .ic.ic-lockout{ background:rgba(224,50,42,.12); color:#E0322A; box-shadow:none; } .sit-card .ic.ic-akl{ background:rgba(200,74,12,.12); color:#C2410C; box-shadow:none; } .sit-card .ic.ic-spare{ background:rgba(30,158,74,.12); color:#1E9E4A; box-shadow:none; } .sit-card .ic.ic-fob{ background:rgba(29,111,224,.12); color:#1D6FE0; box-shadow:none; } /* in-hero mono price + trust teaser line (a real price in-fold; styled as plain text, not a fake button — addresses the 14% dead-click rate) */ .price-line{ font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:600; font-size:12.5px; color:#0B1E3F; line-height:1.6; margin-top:14px; } .price-line b{ color:#C2410C; } .price-line .sep{ color:#C7C7CC; padding:0 2px; } .price-line .ok{ color:#1E9E4A; } /* "find your make" chip strip — surfaces the top-tapped brands on-page so mobile users stop opening the hamburger to hunt them */ .make-strip{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .make-chip{ flex:none; display:inline-flex; align-items:center; white-space:nowrap; background:#fff; border:1px solid rgba(11,30,63,.10); border-radius:999px; padding:6px 13px; font:600 13px/1 'Inter',system-ui,sans-serif; color:#0B1E3F; text-decoration:none; transition:border-color .15s ease, color .15s ease; } .make-chip:hover{ border-color:rgba(226,88,14,.4); color:#C2410C; } .make-chip.all{ background:#0B1E3F; color:#fff; border-color:#0B1E3F; } /* "Meet Leo" owner band under the hero — portrait + story + trust pills */ .proof-band{ border-top:1px solid rgba(255,255,255,.10); } .proof-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; } .proof-photo{ margin:0; flex:none; } .proof-photo img{ display:block; width:100%; max-width:190px; aspect-ratio:4/5; object-fit:cover; border-radius:18px; border:1px solid rgba(255,255,255,.16); box-shadow:0 22px 50px -28px rgba(0,0,0,.8); } .proof-photo figcaption{ margin-top:10px; font:600 13px/1.3 'Inter',system-ui,sans-serif; color:rgba(248,250,252,.7); } .proof-eyebrow{ display:flex; align-items:center; gap:8px; font:700 12px/1 'Inter',system-ui,sans-serif; text-transform:uppercase; letter-spacing:.09em; color:#FF8A4C; margin-bottom:12px; } .proof-eyebrow::before{ content:""; width:16px; height:3px; border-radius:2px; background:#FF8A4C; flex:none; } .proof-copy .lead{ color:rgba(248,250,252,.9); font-size:16px; line-height:1.6; max-width:40ch; } .proof-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding:0; list-style:none; } .proof-pills li{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); font-size:13.5px; color:rgba(248,250,252,.9); } .proof-pills .ok{ color:#34D399; font-weight:700; } @media (min-width:768px){ .proof-inner{ flex-direction:row; align-items:center; gap:44px; } .proof-photo img{ max-width:250px; } .proof-copy{ flex:1; } .proof-copy .lead{ font-size:17px; max-width:56ch; } } /* featured "MOST COMMON" price card + inline price list (grafted into Pricing) */ .feat-price{ background:#0B1E3F; color:#fff; border-radius:18px; padding:20px; } .feat-price .badge{ display:inline-block; background:#FF7A2F; color:#0B1E3F; font:800 10px/1 'Inter',system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:4px 9px; } .feat-price .lbl{ margin-top:10px; font-weight:700; font-size:15px; } .feat-price .amt{ font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:700; font-size:40px; line-height:1; margin-top:4px; } .feat-price .amt small{ font-size:14px; font-weight:600; color:rgba(255,255,255,.7); } .price-list{ border:1px solid rgba(11,30,63,.10); border-radius:18px; overflow:hidden; background:#fff; } .price-list .row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid rgba(60,60,67,.10); font-size:14px; color:#3C3C43; } .price-list .row:first-child{ border-top:0; } .price-list .row .amt{ font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:600; color:#C2410C; white-space:nowrap; } /* neighbourhood chips (service area) */ .hood-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; } .hood-chip{ background:#F2F2F7; color:#3C3C43; border-radius:999px; padding:5px 11px; font-size:12.5px; } .hood-chip.more{ background:rgba(226,88,14,.10); color:#C2410C; font-weight:600; } /* scroll-spy active nav underline (desktop) */ @media (min-width:768px){ header#topbar nav a.nav-active{ color:#0B1E3F; position:relative; } header#topbar nav a.nav-active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#FF6B1A; border-radius:2px; } } /* Filled CTA buttons → the 1b button orange #C84A0C (white text passes AA at ~4.7:1; the site's bright orange1 #FF6B1A was ~2.85:1 and read brighter than the deep-orange price/kicker accents). Scoped to the homepage's 1b look. */ body.ios .btn.bg-orange1{ background-color:#C84A0C; } body.ios .btn.bg-orange1:hover{ background-color:#AD400A; } /* ============================================================================ §12. iOS "1b Bold Brand Cards" component vocabulary (.ios-*) ---------------------------------------------------------------------------- Shared class set for the restyled Pricing + Service-template pages. Values are lifted VERBATIM from the prototype (RAXO-iOS-Prototype.dc.html — screen 3a pricing ~L819-895, screen 4a service ~L936-1000). Scoped under body.ios so nothing outside the restyled pages is touched. Additive + idempotent: every selector is new; re-appending this block is a no-op. The prototype nests the whole page under `font-size:17px;line-height:1.45`, so its `.NNem` sizes resolve against 17px — we re-establish that base on .ios-sec / .ios-navyband and express the child sizes in em to stay pixel-faithful on mobile. ============================================================================ */ /* ---- section shell: iOS grouped grey + the 17px em base ------------------- */ body.ios .ios-sec{ background:#F2F2F7; font-size:17px; line-height:1.45; color:#0F172A; } /* ---- navy intro / hero band ------------------------------------------------ */ body.ios .ios-navyband{ background:#0B1E3F; color:#fff; padding:18px 20px 24px; } body.ios .ios-navyband h1{ font-size:1.7em; line-height:1.15; font-weight:800; letter-spacing:-.015em; color:#fff; margin:8px 0 0; } body.ios .ios-navyband p{ font-size:.92em; color:rgba(255,255,255,.82); line-height:1.5; margin:10px 0 0; } /* ---- eyebrow (uppercase orange kicker on navy) ----------------------------- */ body.ios .ios-eyebrow{ font-size:.72em; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#FF8A4C; } /* ---- grouped white list container ------------------------------------------ */ body.ios .ios-group{ background:#fff; border-radius:16px; overflow:hidden; } /* ---- group label (uppercase muted, sits above a list) ---------------------- */ body.ios .ios-label{ font-size:.76em; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:#6E6E73; padding:0 4px 7px; } /* ---- list row -------------------------------------------------------------- */ body.ios .ios-row{ position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:13px 15px; } /* .5px inset hairline between rows (none under the last) — left inset 15px. Pseudo-element (not border-image) to match this file's .im-row hairline grammar and keep the inset crisp at .5px. */ body.ios .ios-row:not(:last-child)::after{ content:""; position:absolute; left:15px; right:0; bottom:0; border-bottom:.5px solid rgba(60,60,67,.16); } /* ---- row variant with a 32px leading icon tile ----------------------------- */ body.ios .ios-row--icon{ align-items:center; /* icon rows center on their tile, not baseline */ } /* separator inset ~59px (15px pad + 32px tile + 12px gap) on icon rows */ body.ios .ios-row--icon:not(:last-child)::after{ left:59px; } /* ---- mono price ------------------------------------------------------------ */ body.ios .ios-price{ font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:600; color:#C2410C; white-space:nowrap; } /* ---- featured card + "Most common" pill ------------------------------------ */ body.ios .ios-featured{ position:relative; background:#fff; border-radius:18px; padding:18px; border:1.5px solid #FFD9C2; box-shadow:0 16px 34px -22px rgba(200,74,12,.55); } body.ios .ios-pill-common{ position:absolute; top:-10px; left:18px; background:#C84A0C; color:#fff; font-size:.64em; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; } /* ---- plain white iOS card -------------------------------------------------- */ body.ios .ios-card{ background:#fff; border-radius:16px; padding:16px; } /* ---- how-it-works vertical timeline ---------------------------------------- */ body.ios .ios-timeline{ position:relative; padding-left:40px; } /* 2px connecting line at left:15px (stops short top+bottom like the proto) */ body.ios .ios-timeline::before{ content:""; position:absolute; left:15px; top:6px; bottom:24px; width:2px; background:rgba(255,107,26,.25); } body.ios .ios-tl-step{ position:relative; margin-bottom:15px; } body.ios .ios-tl-step:last-child{ margin-bottom:0; } /* 32px numbered orange disc */ body.ios .ios-tl-disc{ position:absolute; left:-40px; top:0; width:32px; height:32px; border-radius:50%; background:#FF6B1A; color:#fff; font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:600; font-size:.82em; display:flex; align-items:center; justify-content:center; } /* final green check disc */ body.ios .ios-tl-check{ position:absolute; left:-40px; top:0; width:32px; height:32px; border-radius:50%; background:#047857; color:#fff; font-weight:700; font-size:.9em; display:flex; align-items:center; justify-content:center; } body.ios .ios-tl-step > .ios-tl-title{ font-weight:700; font-size:1em; color:#0F172A; } body.ios .ios-tl-step > .ios-tl-desc{ font-size:.85em; color:#6E6E73; line-height:1.45; margin-top:2px; } /* ---- 32px green check tile for "what to have ready" rows ------------------- */ body.ios .ios-checktile{ width:32px; height:32px; flex:none; border-radius:8px; background:rgba(4,120,87,.12); color:#047857; font-weight:800; display:flex; align-items:center; justify-content:center; } /* ---- desktop: cap the 17px em base so grouped lists stay readable ---------- */ @media (min-width:768px){ body.ios .ios-sec{ font-size:18px; } /* the navy band's own em base (it may sit outside .ios-sec) */ body.ios .ios-navyband{ font-size:17px; } } /* ============================================================================ WHITE CHROME (site-wide) — 2026-07-13 (m67b, Leo: "header should be white") Supersedes §2 "Navy translucent chrome nav" above. Previously only the homepage carried this (as an inline