/* ============================================================ SPEEDWAY RIDERS NYC — SHIPPING POLICY Same monochrome system, tokens and typefaces as brands-v2, financing-v2, warranty-v2 and returns-v2. Two inks only; every gray is a tint of one of them. --accent is a single campaign token (today, white) so a sale can swap it in one line. The LAYOUT is deliberately not the returns page's layout — the hero is split rather than centred, the timeline is a horizontal rail rather than a two-column list, and the estimator outputs a proportional bar rather than a verdict panel. Palette and type are shared; structure is per-page. The hardened base below is inherited wholesale and must not be "cleaned up": the .swr specificity rules, min-width:0 on grid children, ordered media queries and the three reveal safety nets each exist because they were broken once. No GSAP, no Lenis. Reveals run on IntersectionObserver and the estimator is plain DOM. ~7 KB of script. ============================================================ */ @font-face { font-family: 'Roboto Var'; src: url('../fonts/roboto-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Slab Var'; src: url('../fonts/roboto-slab-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --ink: #000; --paper: #fff; --accent: #fff; /* campaign token — today, white. */ --ink-60: rgba(0, 0, 0, .6); --ink-30: rgba(0, 0, 0, .28); --ink-12: rgba(0, 0, 0, .12); --ink-06: rgba(0, 0, 0, .05); --paper-70: rgba(255, 255, 255, .7); --paper-40: rgba(255, 255, 255, .4); --paper-16: rgba(255, 255, 255, .16); --paper-08: rgba(255, 255, 255, .08); --ff-display: 'Roboto Var', 'Helvetica Neue', Helvetica, Arial, sans-serif; --ff-body: 'Roboto Var', 'Helvetica Neue', Helvetica, Arial, sans-serif; --ff-slab: 'Roboto Slab Var', 'Roboto Var', Georgia, serif; --pad: clamp(20px, 4vw, 64px); --wrap: 1280px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* `.swr`, not `body.swr`: standalone it matches , and embedded in WordPress it matches the
wrapper in embed.html. */ .swr { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ff-body); font-weight: 400; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; overflow-x: clip; } .swr img { max-width: 100%; height: auto; filter: grayscale(1) contrast(1.06); } .swr a { color: inherit; } .swr h1, .swr h2, .swr h3 { margin: 0; line-height: 1.05; } .swr p { margin: 0; } .swr :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); } .wrap--narrow { max-width: 900px; } /* .swr scope for the same reason as the p-margin rules below: this is applied to both

and

, and the base resets would otherwise zero the -1px. */ .swr .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* SPECIFICITY NOTE — p margins Every rule below that sets a margin on a

carries a .swr prefix, and must keep it. The base reset `.swr p { margin: 0 }` is (0,1,1) and silently beats any bare single-class rule (0,1,0). Without the prefix the margin is dropped with no warning — this had zeroed the hero eyebrow, the hero sub-heading and every section intro on all three sibling pages at once, which is what made the spacing look wrong. The base reset is NOT weakened to :where(), because in WordPress it is what protects against the Rey theme's own p margins. Adding a new margin rule for a

? Prefix it with .swr and verify in the browser that getComputedStyle reports the value you wrote. */ /* ---------------------------------------------------------- kickers, heads */ .swr .kicker { font-family: var(--ff-slab); font-weight: 500; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 12px; color: var(--ink-60); } .kicker::before { content: '— '; } /* MUST stay .swr-scoped. `.swr .kicker` above is (0,2,0) and a bare `.kicker--inv` is (0,1,0), so the base colour wins and this renders black text on the black sections. That shipped once — the estimator and timeline kickers and both section intros were invisible. Any modifier of a .swr-scoped rule needs the same prefix. */ .swr .kicker--inv { color: var(--paper-70); } /* .swr scope is REQUIRED. `.swr h1,.swr h2,.swr h3 { margin:0 }` is (0,1,1) and outranks a lone .sec-h (0,1,0) regardless of source order, silently zeroing this margin. Any heading rule setting margin or line-height needs .swr, and so does any link rule setting colour. */ .swr .sec-h { font-family: var(--ff-display); font-weight: 900; font-size: clamp(32px, 5.2vw, 68px); letter-spacing: -.02em; text-transform: uppercase; margin-bottom: clamp(15px, .2vw, 52px); } .swr .sec-intro { max-width: 68ch; color: var(--ink-60); font-size: clamp(15px, 1.15vw, 18px); margin-top: 14px; } .swr .sec-intro--inv { color: var(--paper-70); } /* .swr required — see .kicker--inv */ /* ------------------------------------------------------- section rhythm */ /* ONE gap between every pair of sections, whatever the backgrounds are. All the breathing room lives on the BOTTOM by default, so a run of same-background sections produces exactly one gap, never two stacked paddings. Where the background changes, the gap is split in half across the boundary so each colour block still has interior padding and the distance between content blocks stays --sect-y. Measured before this: gaps ran 37px to 171px. Do not reintroduce a `padding-top` on `.sect` — that is what made them uneven. */ :root { --sect-y: clamp(56px, 6.2vw, 96px); } .sect { padding-top: 0; padding-bottom: var(--sect-y); } .sect--ink { background: var(--ink); color: var(--paper); } /* Colour boundaries — half the gap on each side. `:has()` is the cleanest way to catch the section BEFORE a change; where it is unsupported the rule is skipped and that one gap is merely larger, never broken. */ .sect--ink, .hero + .sect, .sect--ink + .sect { padding-top: calc(var(--sect-y) / 2); } .sect--ink, .sect:has(+ .sect--ink) { padding-bottom: calc(var(--sect-y) / 2); } /* BOTH selectors are required — the two builds nest the CTA differently: index.html

…sections…
then .cta OUTSIDE main → the last section has no next sibling, so :has(+ .cta) fails embed.html
…sections… .cta
, no
at all → :has(+ .cta) matches, main > … does not Drop either one and the final gap on that build comes out 1.5x the rest. */ main > .sect:last-child, .sect:has(+ .cta) { padding-bottom: calc(var(--sect-y) / 2); } /* ------------------------------------------------------------------ hero */ /* No page header/footer: the WordPress theme supplies both. Split and left-aligned — deliberately not the centred stack used on the returns and warranty pages. */ .hero { position: relative; background: var(--ink); color: var(--paper); overflow: clip; padding: clamp(72px, 9vw, 132px) 0 0; } /* Decorative route grid, pure CSS so it costs no DOM and no script. */ .hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .1; background-image: repeating-linear-gradient(90deg, var(--paper) 0 1px, transparent 1px 96px), repeating-linear-gradient(0deg, var(--paper) 0 1px, transparent 1px 96px); } .hero-inner { position: relative; } .hero-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: end; } .hero-split > * { min-width: 0; } .swr .hero-eyebrow { font-family: var(--ff-slab); font-weight: 500; font-size: clamp(11px, 1.1vw, 13px); letter-spacing: .3em; text-transform: uppercase; color: var(--paper-70); margin-bottom: 26px; } .hero-h1 { display: block; } .hero-h1-top { display: block; font-family: var(--ff-slab); font-weight: 400; font-size: clamp(17px, 2.4vw, 30px); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; } .hero-h1-word { display: block; font-family: var(--ff-display); font-weight: 900; font-size: clamp(52px, 11.6vw, 158px); letter-spacing: -.035em; line-height: .86; text-transform: uppercase; } .hero-h1-word--ghost { color: transparent; -webkit-text-stroke: clamp(1.5px, .3vw, 4px) var(--accent); } .swr .hero-sub { max-width: 60ch; margin-top: 30px; color: var(--paper-70); font-size: clamp(15px, 1.2vw, 18px); } /* Primary action plus the two shop routes. A policy page still has to sell — the live page put "Shop All E-Scooters / E-Bikes" here and it earns its place. Laid out with flex + gap, so no margin-collapse games between the buttons. */ .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; } .swr .hero-cta { display: inline-block; font-family: var(--ff-slab); font-weight: 500; font-size: clamp(12px, 1.1vw, 14px); letter-spacing: .2em; text-transform: uppercase; padding: 16px 30px; border: 1px solid var(--paper-40); text-decoration: none; color: var(--paper); transition: background .25s ease, color .25s ease, border-color .25s ease; } .swr .hero-cta:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); } /* Secondary: quieter than the bordered button, so the estimator stays primary. */ .swr .hero-shop { font-family: var(--ff-slab); font-size: clamp(12px, 1.1vw, 14px); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-70); text-decoration: none; border-bottom: 1px solid var(--paper-40); padding-bottom: 3px; transition: color .2s ease, border-color .2s ease; } .swr .hero-shop:hover { color: var(--paper); border-bottom-color: var(--accent); } /* The promise card — the right half of the split. */ .hero-promise { border: 1px solid var(--paper-16); padding: clamp(24px, 2.6vw, 34px); } .swr .hero-promise-label { font-family: var(--ff-slab); font-weight: 500; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--paper-40); margin-bottom: 14px; } .hero-promise-copy { font-size: clamp(14px, 1.05vw, 16px); color: var(--paper-70); } /* Stat bar, full width under the split. */ .hero-stats { list-style: none; margin: clamp(48px, 6vw, 84px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--paper-16); } .hero-stats li { min-width: 0; padding: clamp(22px, 2.4vw, 34px) clamp(14px, 1.6vw, 26px) clamp(30px, 3.2vw, 44px); border-right: 1px solid var(--paper-16); } .hero-stats li:last-child { border-right: 0; } .hero-stats b { display: block; font-family: var(--ff-display); font-weight: 900; font-size: clamp(34px, 4.6vw, 62px); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; } .hero-stats span { display: block; margin-top: 10px; font-size: clamp(11px, .95vw, 13px); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-40); } /* -------------------------------------------------------------- overview */ .over-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); margin-top: 34px; } .over-cols > * { min-width: 0; } .over-cols p { color: var(--ink-60); font-size: clamp(15px, 1.1vw, 17px); } /* ------------------------------------------------------------- estimator */ /* The signature block. Outputs a proportional two-part bar — processing, then transit — because the thing customers get wrong is forgetting that processing happens before the carrier clock starts. */ .est-head { max-width: 900px; margin-bottom: clamp(34px, 4vw, 56px); } .est-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); align-items: start; } .est-shell > * { min-width: 0; } .est-field { margin-bottom: clamp(24px, 2.6vw, 34px); } .est-field:last-child { margin-bottom: 0; } .swr .est-label { font-family: var(--ff-slab); font-weight: 500; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--paper-40); margin-bottom: 14px; } .est-chips { display: flex; flex-wrap: wrap; gap: 10px; } .schip { font: inherit; font-size: clamp(13px, 1vw, 15px); background: transparent; color: var(--paper-70); border: 1px solid var(--paper-16); border-radius: 0; padding: 12px 18px; cursor: pointer; text-align: left; transition: border-color .2s ease, color .2s ease, background .2s ease; } .schip:hover { border-color: var(--paper-40); color: var(--paper); } .schip.is-on { background: var(--accent); color: var(--ink); border-color: var(--accent); font-weight: 700; } .schip small { display: block; font-size: 11px; letter-spacing: .06em; opacity: .72; margin-top: 3px; font-weight: 400; } /* Output panel. */ .est-out { border: 1px solid var(--paper-16); padding: clamp(24px, 2.8vw, 38px); } .est-out-label { font-family: var(--ff-slab); font-weight: 500; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--paper-40); } .swr .est-total { font-family: var(--ff-display); font-weight: 900; font-size: clamp(46px, 7vw, 92px); letter-spacing: -.035em; line-height: .95; margin: 12px 0 4px; font-variant-numeric: tabular-nums; } .est-total-u { font-family: var(--ff-slab); font-weight: 400; font-size: clamp(13px, 1.1vw, 16px); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-70); } /* The proportional bar. Two segments, distinguished by fill vs hatch — never by colour, because there is no colour. */ .est-bar { display: flex; width: 100%; height: 20px; margin: clamp(24px, 2.6vw, 34px) 0 0; border: 1px solid var(--paper-40); overflow: hidden; } .est-bar-seg { min-width: 2px; transition: flex-grow .45s cubic-bezier(.4, 0, .2, 1); } .est-bar-seg--proc { background-image: repeating-linear-gradient(45deg, var(--paper) 0 2px, transparent 2px 7px); } .est-bar-seg--transit { background: var(--paper); } .est-key { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } .est-key li { display: flex; align-items: baseline; gap: 12px; font-size: clamp(13px, 1vw, 15px); } .est-key-swatch { flex: 0 0 auto; width: 22px; height: 11px; border: 1px solid var(--paper-40); transform: translateY(1px); } .est-key-swatch--proc { background-image: repeating-linear-gradient(45deg, var(--paper) 0 2px, transparent 2px 7px); } .est-key-swatch--transit { background: var(--paper); } .est-key-name { color: var(--paper-70); } .est-key-val { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .swr .est-note { margin-top: clamp(20px, 2.2vw, 28px); padding-top: 18px; border-top: 1px solid var(--paper-16); font-size: clamp(12px, .95vw, 14px); color: var(--paper-40); } /* ------------------------------------------------------------- processing */ .proc-lead { border-left: 2px solid var(--ink); padding-left: clamp(18px, 2vw, 28px); margin-top: clamp(30px, 3.4vw, 48px); max-width: 72ch; } .swr .proc-lead-h { font-family: var(--ff-display); font-weight: 900; font-size: clamp(19px, 1.8vw, 26px); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 10px; } .proc-lead p { color: var(--ink-60); } /* Semantic
    — genuinely ordered — but no 01/02/03 display numerals, per the house rule for these pages. Sequence is carried by the rule above each card. */ .proc-steps { list-style: none; margin: clamp(38px, 4.4vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); } .proc-steps > li { min-width: 0; border-top: 2px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 14px; transition: transform .45s cubic-bezier(.22, 1, .36, 1); } .proc-steps > li:hover { transform: translateY(-4px); } .swr .proc-name { font-family: var(--ff-display); font-weight: 900; font-size: clamp(17px, 1.5vw, 22px); text-transform: uppercase; letter-spacing: -.01em; } .proc-copy { color: var(--ink-60); font-size: clamp(14px, 1.02vw, 16px); } /* ------------------------------------------------------------------ icons */ /* One monoline family, inheriting currentColor so the same markup works on the white and the black sections. The stroke is scaled with the box via vector-effect so a large icon does not render a proportionally fatter line — that inconsistency is what makes an icon set look assembled rather than drawn. */ .ico { display: block; width: 30px; height: 30px; flex: 0 0 auto; color: var(--ink); overflow: visible; } .ico--lg { width: 42px; height: 42px; } .sect--ink .ico, .cta .ico { color: var(--paper); } /* The draw-on. Base state is FULLY DRAWN — the dash is only applied under `.js`, and `reveals-done` clears it. An icon can never be left half-drawn or invisible by a failed animation, which is the rule everything on this page now follows. */ .js [data-reveal] .ico path, .js [data-reveal] .ico circle, .js [data-reveal] .ico rect { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1) .12s; } .js [data-reveal].is-in .ico path, .js [data-reveal].is-in .ico circle, .js [data-reveal].is-in .ico rect { stroke-dashoffset: 0; } /* ------------------------------------------------------- callout (shared) */ /* One callout treatment reused across the page, so there is a single visual grammar for "read this bit carefully". */ .callout { margin-top: clamp(34px, 4vw, 56px); border: 1px solid var(--ink-12); border-left: 4px solid var(--ink); padding: clamp(20px, 2.4vw, 32px); background: var(--ink-06); } .swr .callout-h { font-family: var(--ff-display); font-weight: 900; font-size: clamp(15px, 1.3vw, 19px); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 8px; } .callout p { color: var(--ink-60); font-size: clamp(14px, 1.02vw, 16px); } .callout--inv { border-color: var(--paper-16); border-left-color: var(--accent); background: var(--paper-08); } .callout--inv p { color: var(--paper-70); } .callout--loud { border-left-width: 6px; background: var(--ink); border-color: var(--ink); color: var(--paper); } .callout--loud p { color: var(--paper-70); } /* Second paragraph inside a callout. A class, not an inline style — inline styles dodge the .swr p reset and so hide whether the cascade is actually working, which is the bug this file's specificity note is about. */ .swr .callout-more { margin-top: 10px; } /* ---------------------------------------------------------------- methods */ /* A real . It scrolls sideways INSIDE its own wrapper; the page body never does. */ .tbl-scroll { margin-top: clamp(30px, 3.6vw, 52px); overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 2px solid var(--ink); } .tbl { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; } .tbl th, .tbl td { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--ink-12); vertical-align: top; } /* Row highlight on hover. Uses a box-shadow inset rather than a background so it cannot wash out the tabular-nums alignment or the row rules. */ .tbl tbody tr { transition: box-shadow .3s ease; } .tbl tbody tr:hover { box-shadow: inset 0 0 0 100vw var(--ink-06); } .tbl th { font-family: var(--ff-slab); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-60); padding-top: 16px; padding-bottom: 14px; } .tbl-name { font-weight: 700; font-size: clamp(15px, 1.15vw, 17px); } .tbl-detail { display: block; margin-top: 5px; font-weight: 400; font-size: 13px; color: var(--ink-60); } .tbl-cost { font-family: var(--ff-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(15px, 1.3vw, 19px); } .tbl td { font-size: clamp(14px, 1.02vw, 16px); color: var(--ink-60); } .tbl td.tbl-strong { color: var(--ink); } /* --------------------------------------------------------------- carriers */ .car-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); margin-top: clamp(30px, 3.6vw, 52px); } .car-col { min-width: 0; border: 1px solid var(--ink-12); padding: clamp(24px, 2.8vw, 38px); transition: border-color .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1); } .car-col:hover { border-color: var(--ink); transform: translateY(-4px); } .car-col .ico { margin-bottom: 20px; } .swr .car-name { font-family: var(--ff-display); font-weight: 900; font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.03em; text-transform: uppercase; } .swr .car-role { font-family: var(--ff-slab); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-60); margin: 8px 0 16px; } .car-copy { color: var(--ink-60); font-size: clamp(14px, 1.02vw, 16px); } .car-track { display: block; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ink-12); font-family: var(--ff-slab); font-size: 13px; letter-spacing: .06em; } /* --------------------------------------------------------------- timeline */ /* A horizontal rail — deliberately a different shape from the returns page's two-column stack. Scrolls sideways inside itself below 1020px. */ .rail-scroll { margin-top: clamp(34px, 4vw, 58px); overflow-x: auto; -webkit-overflow-scrolling: touch; } .rail { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); min-width: 100%; } /* An accent line that draws across the rail on reveal. It sits OVER the permanent border-top on each li, so if the animation never runs the rail is still fully drawn — additive only, never a start-state that hides. */ .rail::after { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--accent); transform-origin: 0 50%; } .js .rail::after { transform: scaleX(0); transition: transform 1.5s cubic-bezier(.16, 1, .3, 1) .15s; } .js [data-reveal].is-in .rail::after, .js.reveals-done .rail::after { transform: scaleX(1); } .rail > li { min-width: 0; position: relative; padding: 34px clamp(16px, 1.8vw, 28px) 0 0; border-top: 2px solid var(--paper-40); } /* The node sitting on the rail. Scales up in sequence behind the drawing line; the delay is per-node so it reads as the line arriving, not as five things appearing at once. Base state is full size — .js supplies the start. */ .rail > li::before { content: ''; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--accent); } .js .rail > li::before { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.4, .5, 1); } .js [data-reveal].is-in .rail > li::before, .js.reveals-done .rail > li::before { transform: scale(1); } .js [data-reveal].is-in .rail > li:nth-child(1)::before { transition-delay: .25s; } .js [data-reveal].is-in .rail > li:nth-child(2)::before { transition-delay: .5s; } .js [data-reveal].is-in .rail > li:nth-child(3)::before { transition-delay: .75s; } .js [data-reveal].is-in .rail > li:nth-child(4)::before { transition-delay: 1s; } .js [data-reveal].is-in .rail > li:nth-child(5)::before { transition-delay: 1.25s; } .rail-when { display: block; font-family: var(--ff-display); font-weight: 900; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; text-transform: uppercase; } .rail-sub { display: block; margin: 4px 0 14px; font-family: var(--ff-slab); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-40); } .rail-what { display: block; font-weight: 700; font-size: clamp(14px, 1.1vw, 17px); margin-bottom: 8px; } .rail-copy { color: var(--paper-70); font-size: clamp(13px, 1vw, 15px); } /* Region strip under the rail. */ .reg { list-style: none; margin: clamp(38px, 4.4vw, 62px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--paper-16); } .reg > li { min-width: 0; padding: 26px clamp(14px, 1.6vw, 26px) 0 0; } .reg-days { display: block; font-family: var(--ff-display); font-weight: 900; font-size: clamp(30px, 3.6vw, 50px); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; } .reg-unit { font-size: .42em; letter-spacing: .12em; } .reg-name { display: block; margin-top: 12px; font-weight: 700; font-size: clamp(13px, 1.05vw, 16px); } .reg-detail { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-40); } /* --------------------------------------------------------------- tracking */ .trk-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); margin-top: clamp(30px, 3.6vw, 52px); } .trk-cols > * { min-width: 0; } .swr .sub-h { font-family: var(--ff-display); font-weight: 900; font-size: clamp(17px, 1.6vw, 23px); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 18px; } /* Shared key/value list, used by tracking, changes, lost. */ .kv { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .kv > li { border-top: 1px solid var(--ink-12); padding: 16px 0; } .kv > li:last-child { border-bottom: 1px solid var(--ink-12); } /* Icon variant. min-width:0 on the body or a long value pushes the row wide. */ .kv--ico { display: flex; align-items: flex-start; gap: 16px; } .kv-body { min-width: 0; } .kv--ico .ico { width: 24px; height: 24px; margin-top: 2px; } .kv b { display: block; font-weight: 700; font-size: clamp(14px, 1.08vw, 16px); margin-bottom: 5px; } .kv span { display: block; color: var(--ink-60); font-size: clamp(13px, 1.02vw, 15px); } /* ---------------------------------------------------------------- coverage */ .cov-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); margin-top: clamp(30px, 3.6vw, 52px); } .cov-split > * { min-width: 0; } .cov-lead { font-family: var(--ff-slab); font-weight: 400; font-size: clamp(19px, 2vw, 30px); line-height: 1.3; letter-spacing: -.01em; } /* Excluded list. The rule is carried by a strikethrough-style bar, not a colour and not an emoji — there is neither on this page. */ .cov-out { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .cov-out > li { border: 1px solid var(--ink-12); padding: 10px 15px; font-size: clamp(12px, 1vw, 14px); color: var(--ink-60); display: flex; align-items: center; gap: 10px; } .cov-out > li::before { content: ''; width: 14px; height: 2px; background: var(--ink); flex: 0 0 auto; } /* ---------------------------------------------------------------- changes */ .chg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); margin-top: clamp(30px, 3.6vw, 52px); } .chg-cols > * { min-width: 0; } .swr .chg-intro { color: var(--ink-60); font-size: clamp(14px, 1.05vw, 16px); margin-bottom: 18px; } /* Plain ordered list, no display numerals. Sequence comes from the rules. */ .steps-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .steps-plain > li { border-top: 1px solid var(--ink-12); padding: 15px 0; font-size: clamp(14px, 1.05vw, 16px); color: var(--ink-60); } .steps-plain > li:last-child { border-bottom: 1px solid var(--ink-12); } /* ----------------------------------------------------------------- damage */ /* Vertical rail. Each step is a rule plus a name — ordered semantically by
      , never by a printed numeral. */ .dmg-steps { list-style: none; margin: clamp(30px, 3.6vw, 52px) 0 0; padding: 0; } .dmg-steps > li { border-top: 2px solid var(--ink); padding: 22px 0 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(16px, 2.4vw, 44px); } .dmg-steps > li:last-child { border-bottom: 2px solid var(--ink); } /* The icon rides with the step name, so the two read as one unit at every width instead of the icon orphaning into its own column on mobile. */ .dmg-head { display: flex; align-items: flex-start; gap: 16px; min-width: 0; } .swr .dmg-name { font-family: var(--ff-display); font-weight: 900; font-size: clamp(18px, 1.9vw, 27px); text-transform: uppercase; letter-spacing: -.02em; min-width: 0; } .dmg-copy { color: var(--ink-60); font-size: clamp(14px, 1.05vw, 16px); min-width: 0; } /* ------------------------------------------------------------------- lost */ .lost-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); margin-top: clamp(30px, 3.6vw, 52px); } .lost-cols > * { min-width: 0; } /* Sits directly under a .sub-h, so it takes no top margin of its own. */ .swr .lost-transit { color: var(--ink-60); font-size: clamp(14px, 1.05vw, 16px); } /* ---------------------------------------------------------------- refused */ .ref-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); margin-top: clamp(30px, 3.6vw, 52px); } .ref-cols > * { min-width: 0; } .bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .bullets > li { position: relative; padding-left: 26px; color: var(--ink-60); font-size: clamp(14px, 1.05vw, 16px); } .bullets > li::before { content: ''; position: absolute; left: 0; top: .62em; width: 12px; height: 2px; background: var(--ink); } .swr .ref-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ink-12); color: var(--ink-60); font-size: clamp(13px, 1.02vw, 15px); } /* -------------------------------------------------------------------- faq */ .faq-list { margin-top: clamp(28px, 3.4vw, 48px); border-top: 1px solid var(--ink-12); } .faq-item { border-bottom: 1px solid var(--ink-12); } .faq-item > summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; align-items: flex-start; gap: 20px; } .faq-item > summary::-webkit-details-marker { display: none; } .swr .faq-q { font-family: var(--ff-display); font-weight: 700; font-size: clamp(15px, 1.32vw, 20px); line-height: 1.3; letter-spacing: -.01em; flex: 1 1 auto; min-width: 0; } .faq-x { flex: 0 0 auto; position: relative; width: 15px; height: 15px; margin-top: 4px; } .faq-x::before, .faq-x::after { content: ''; position: absolute; background: var(--ink); transition: transform .25s ease, opacity .25s ease; } .faq-x::before { top: 6px; left: 0; width: 15px; height: 2px; } .faq-x::after { left: 6px; top: 0; width: 2px; height: 15px; } .faq-item[open] .faq-x::after { transform: rotate(90deg); opacity: 0; } .faq-a { padding: 0 44px 24px 0; color: var(--ink-60); font-size: clamp(14px, 1.06vw, 16px); max-width: 78ch; } /* -------------------------------------------------------------------- cta */ /* Half-gap on top like every other colour boundary; the generous bottom is the end of the page, not a gap between two things. */ .cta { background: var(--ink); color: var(--paper); padding-top: calc(var(--sect-y) / 2); padding-bottom: clamp(48px, 5vw, 72px); } .swr .cta-h { font-family: var(--ff-display); font-weight: 900; font-size: clamp(40px, 8.4vw, 118px); letter-spacing: -.035em; line-height: .9; text-transform: uppercase; margin: 6px 0 0; } .swr .cta-h a { text-decoration: none; color: inherit; display: inline-block; } .cta-h-ghost { color: transparent; -webkit-text-stroke: clamp(1.5px, .3vw, 4px) var(--accent); } .cta-arrow { display: inline-block; margin-left: .12em; transition: transform .3s ease; } .swr .cta-h a:hover .cta-arrow { transform: translateX(.14em); } .swr .cta-lead { max-width: 62ch; margin-top: 30px; color: var(--paper-70); font-size: clamp(15px, 1.15vw, 18px); } .cta-contact { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 34px; } .cta-contact li { font-family: var(--ff-slab); font-size: clamp(14px, 1.15vw, 17px); } .swr .cta-contact a { text-decoration: none; border-bottom: 1px solid var(--paper-40); padding-bottom: 2px; } .swr .cta-contact a:hover { border-bottom-color: var(--accent); } .cta-links { list-style: none; margin: clamp(38px, 4.4vw, 62px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .swr .cta-links a { display: inline-block; text-decoration: none; border: 1px solid var(--paper-16); padding: 12px 20px; font-family: var(--ff-slab); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; transition: border-color .2s ease, background .2s ease, color .2s ease; } .swr .cta-links a:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); } .cta-policies { list-style: none; margin: clamp(38px, 4.4vw, 62px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 28px; border-top: 1px solid var(--paper-16); } .cta-policies li { min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--paper-16); font-size: clamp(12px, 1vw, 14px); color: var(--paper-70); } .legal { margin-top: clamp(38px, 4.4vw, 62px); padding-top: 24px; border-top: 1px solid var(--paper-16); } .legal p { font-size: clamp(11px, .92vw, 13px); line-height: 1.65; color: var(--paper-40); max-width: 108ch; } .swr .legal-meta { margin-top: 14px; font-family: var(--ff-slab); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-40); } /* ------------------------------------------------------------------ grain */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: .028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ----------------------------------------------------------------- reveal */ /* Start-states are applied ONLY when the `js` class is present, which ship.js adds only when prefers-reduced-motion is not set. Without script, or with reduced motion, content is visible from the first paint and can never be left stuck invisible. */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* The headline words get a MASK wipe rather than a fade — the type slides up from behind its own baseline, which reads as deliberate typesetting instead of a generic fade-in. The clip is on a wrapper span so the transform and the clip never fight over the same element. */ .js [data-hword] { opacity: 0; transform: translateY(.16em); clip-path: inset(0 0 110% 0); transition: opacity .9s ease, transform 1s cubic-bezier(.16, 1, .3, 1), clip-path 1s cubic-bezier(.16, 1, .3, 1); } .js [data-hword].is-in { opacity: 1; transform: none; clip-path: inset(-.2em 0 -.2em 0); } /* HARD FAILSAFE — the `transition: none` matters as much as the opacity. Adding `.is-in` is NOT sufficient on its own: in a non-compositing context (a hidden pane, a backgrounded tab, some embeds, a screenshot service) a running transition can freeze at its START value, so the element keeps computing `opacity: 0` even though the class is correctly applied. This was caught with 90 of 96 targets invisible while every one of them reported `is-in: true` — the page rendered with holes where the kickers and intros should be. Removing the transition forces the final value immediately. ship.js adds `reveals-done` on a timer and whenever the page becomes visible. Do not delete this block to "clean up" the !importants. */ .js.reveals-done [data-reveal], .js.reveals-done [data-hword] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } /* Icons draw with stroke-dashoffset, which hides them just as completely as opacity does. EVERY property used as an animation start-state must be reset here — if you add a new one to the reveal rules above, add it here in the same edit or you have built the invisible-content bug again. */ .js.reveals-done .ico path, .js.reveals-done .ico circle, .js.reveals-done .ico rect { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; } /* PSEUDO-ELEMENTS NEED THEIR OWN RESET — they are not matched by the [data-reveal] rules above, and this was missed once: the rail line stayed at scaleX(0) because the failsafe set the final transform but left the 1.5s transition in place for it to freeze on. `transition: none` is the load- bearing half of every rule in this block, not the transform. */ .js.reveals-done .rail::after, .js.reveals-done .rail > li::before { transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ------------------------------------------------------------ responsive */ /* Ordered widest-first-fallthrough. Do not reorder: several rules below depend on being able to override an earlier breakpoint. */ @media (max-width: 1020px) { .hero-split { grid-template-columns: minmax(0, 1fr); align-items: start; } .hero-promise { margin-top: 8px; } .est-shell { grid-template-columns: minmax(0, 1fr); } .trk-cols, .lost-cols, .cov-split { grid-template-columns: minmax(0, 1fr); } .proc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rail { grid-auto-columns: minmax(215px, 1fr); } } @media (max-width: 760px) { .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-stats li:nth-child(2n) { border-right: 0; } .hero-stats li:nth-child(-n+2) { border-bottom: 1px solid var(--paper-16); } .over-cols { grid-template-columns: minmax(0, 1fr); } .proc-steps { grid-template-columns: minmax(0, 1fr); } .car-cols, .chg-cols, .ref-cols { grid-template-columns: minmax(0, 1fr); } .reg { grid-template-columns: minmax(0, 1fr); } .reg > li { padding: 22px 0; border-bottom: 1px solid var(--paper-16); } .dmg-steps > li { grid-template-columns: minmax(0, 1fr); gap: 10px; } .faq-a { padding-right: 0; } .cta-contact { gap: 10px 22px; } } @media (max-width: 420px) { .est-chips { gap: 8px; } .schip { padding: 11px 14px; } .cta-policies { grid-template-columns: minmax(0, 1fr); } }