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; } /* Screen-reader-only. Used for the calculator's settled live-region summary. */ .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 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 */ .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: '— '; } .kicker--inv { color: var(--paper-70); } /* .swr scope is REQUIRED here. `.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, which silently zeroes this margin and jams every heading against its content. Same trap applies to any link rule setting colour — see .calc-cta and .tier-link. */ .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, 0.2vw, 52px); } .swr .sec-intro { max-width: 68ch; color: var(--ink-60); font-size: clamp(15px, 1.15vw, 18px); margin-top: 14px; } .sec-intro--inv { color: var(--paper-70); } /* ------------------------------------------------------------------ hero */ /* No page header/footer: the WordPress theme supplies both. */ .hero { position: relative; min-height: 92svh; background: var(--ink); color: var(--paper); display: grid; place-items: center; overflow: clip; padding: 64px var(--pad) 56px; } /* Decorative diagonal rule field — the financing analogue of the brands marquee, but 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(-45deg, var(--paper) 0 1px, transparent 1px 74px); } /* The headline's ghost variant is transparent with an outline, so whatever sits behind it reads straight through the letterforms — the decorative pattern was drawing lines across the type and making it look broken. Fade the pattern out through the middle, where the centred headline sits, and keep it at the edges where it still does its job. */ .hero-grid { -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 50%, transparent 22%, #000 78%); mask-image: radial-gradient(ellipse 78% 62% at 50% 50%, transparent 22%, #000 78%); } .hero-inner { position: relative; text-align: center; max-width: 1100px; } .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: 28px; } .hero-h1 { display: grid; justify-items: center; } .hero-h1-top { font-family: var(--ff-slab); font-weight: 400; font-size: clamp(17px, 2.5vw, 31px); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; } .hero-h1-word { font-family: var(--ff-display); font-weight: 900; font-size: clamp(46px, 12.4vw, 176px); letter-spacing: -.03em; line-height: .88; text-transform: uppercase; } .hero-h1-word--ghost { color: transparent; -webkit-text-stroke: clamp(1.5px, .3vw, 4px) var(--accent); } .swr .hero-sub { max-width: 680px; margin: 34px auto 0; color: var(--paper-70); font-size: clamp(15px, 1.2vw, 18px); } .hero-stats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 44px auto 0; padding: 0; border-block: 1px solid var(--paper-16); } .hero-stats li { display: grid; gap: 2px; padding: 18px clamp(16px, 3vw, 40px); border-right: 1px solid var(--paper-16); } .hero-stats li:last-child { border-right: 0; } .hero-stats b { font-family: var(--ff-display); font-weight: 900; font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .hero-stats span { font-family: var(--ff-slab); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-40); max-width: 15ch; } .swr .hero-cta { display: inline-block; margin-top: 40px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--ink); background: var(--accent); padding: 16px 30px; text-decoration: none; transition: translate .25s, box-shadow .25s; } .swr .hero-cta:hover { translate: 0 -3px; box-shadow: 0 3px 0 var(--paper-40); } /* ------------------------------------------------------------ calculator */ /* The signature element of the page. Inverted panel, oversized readout. */ .calc { background: var(--ink); color: var(--paper); padding: clamp(50px, 6vw, 92px) 0; } .calc-head { margin-bottom: clamp(26px, 3.5vw, 44px); } .calc-shell { display: grid; grid-template-columns: 1fr minmax(320px, 460px); gap: clamp(28px, 4vw, 64px); align-items: start; } /* Grid items default to min-width:auto and refuse to shrink below their own content. The nowrap chip row inside would then force this column to its full scroll width — measured 513px inside a 335px viewport, pushing the whole page sideways. min-width:0 lets the column shrink so the chips scroll instead. */ .calc-shell > *, .demo-shell > * { min-width: 0; } .calc-chips, .cmp-scroll { min-width: 0; } .calc-field { margin-bottom: clamp(24px, 3vw, 38px); } .swr .calc-label { font-family: var(--ff-slab); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--paper-40); margin-bottom: 14px; } /* price display + typed input */ /* nowrap is load-bearing: the "$" and the figure are separate elements, and a mobile rule once gave the input width:100%, which wrapped the number onto its own line below the "$". They must always sit on one line. */ .calc-price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 18px; flex-wrap: nowrap; } .calc-price-cur { font-family: var(--ff-display); font-weight: 900; font-size: clamp(26px, 3.2vw, 40px); line-height: 1; } .swr .calc-price-in { font-family: var(--ff-display); font-weight: 900; font-size: clamp(38px, 6vw, 74px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: none; border: 0; border-bottom: 2px solid var(--paper-40); color: var(--paper); padding: 0 4px 2px; /* Sized to the content, capped so it can never push the row wider than its column. Never set this to a percentage — see .calc-price-row. */ width: 5.2ch; max-width: 100%; min-width: 0; -moz-appearance: textfield; } .calc-price-in::-webkit-outer-spin-button, .calc-price-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .calc-price-in:focus { outline: 0; border-bottom-color: var(--paper); } /* range slider — restyled from scratch in both engines */ .calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: none; cursor: pointer; display: block; } .calc-range::-webkit-slider-runnable-track { height: 3px; background: var(--paper-16); } .calc-range::-moz-range-track { height: 3px; background: var(--paper-16); } .calc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -11.5px; background: var(--paper); border: 0; border-radius: 0; box-shadow: 4px 4px 0 rgba(0, 0, 0, .6); transition: scale .18s; } .calc-range::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 0; background: var(--paper); box-shadow: 4px 4px 0 rgba(0, 0, 0, .6); } .calc-range:active::-webkit-slider-thumb { scale: 1.14; } .calc-scale { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .16em; color: var(--paper-40); font-variant-numeric: tabular-nums; margin-top: 2px; } .swr .calc-caplin { margin-top: 10px; font-size: 12px; color: var(--paper-70); max-width: 52ch; } /* chip rows — presets, providers, terms */ .calc-chips { display: flex; flex-wrap: wrap; gap: 8px; } .swr .fchip { font: inherit; font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; background: none; color: var(--paper); border: 1px solid var(--paper-40); border-radius: 999px; padding: 9px 16px; cursor: pointer; text-decoration: none; transition: background .2s, color .2s, border-color .2s, opacity .2s; } .fchip:hover { border-color: var(--paper); background: var(--paper-16); } .fchip.is-on { background: var(--paper); color: var(--ink); border-color: var(--paper); } .fchip[disabled] { opacity: .3; cursor: not-allowed; } .fchip[disabled]:hover { background: none; border-color: var(--paper-40); } .fchip--wide { padding-inline: 20px; } /* the readout panel */ .calc-out { border: 1px solid var(--paper-16); padding: clamp(22px, 2.6vw, 34px); position: sticky; top: 20px; } .calc-out-label { font-family: var(--ff-slab); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--paper-40); } /* Must wrap. The figure and its cadence ("× 4 payments") are a flex row, and at 320px a four-figure amount plus the cadence overran the viewport by 12px — the one thing on the page that pushed the document sideways. Wrapping lets the cadence drop to its own line instead. The font floor is 40px rather than 52px for the same reason: "$1,234.56" has to fit inside the readout's padding on the narrowest phones. */ .calc-big { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 2px; flex-wrap: wrap; min-width: 0; font-family: var(--ff-display); font-weight: 900; letter-spacing: -.035em; line-height: .9; font-variant-numeric: tabular-nums; } .calc-big-num { font-size: clamp(40px, 8vw, 96px); } .calc-cadence { font-family: var(--ff-slab); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-70); } .swr .calc-sub { margin-top: 6px; font-size: 13px; color: var(--paper-70); min-height: 1.6em; } .calc-lines { margin: 24px 0 0; padding: 0; list-style: none; } .calc-lines > li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px dotted var(--paper-40); } .calc-lines dt, .calc-lines .k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-70); } .calc-lines .v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .swr .calc-flag { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--paper-40); background: var(--paper-16); font-size: 13px; line-height: 1.5; } .calc-flag[hidden] { display: none; } .swr .calc-note { margin-top: 16px; font-size: 12px; color: var(--paper-40); line-height: 1.55; } .swr .calc-cta { display: block; text-align: center; margin-top: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--ink); background: var(--accent); padding: 15px 22px; text-decoration: none; transition: translate .25s, box-shadow .25s; } .swr .calc-cta:hover { translate: 0 -3px; box-shadow: 0 3px 0 var(--paper-40); } /* ------------------------------------------------------------- providers */ /* Top padding intentionally 0 — see the note above .cmp. */ .prov { padding: 0 0 clamp(50px, 6vw, 92px); background: var(--paper); } .prov-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(18px, 2.4vw, 30px) 0 clamp(22px, 3vw, 34px); } .swr .pchip { font: inherit; font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 11px 22px; cursor: pointer; transition: background .25s, color .25s; } .pchip:hover { background: var(--ink-12); } .pchip.is-on { background: var(--ink); color: var(--paper); } .prov-panel { border: 1px solid var(--ink); } .prov-panel[hidden] { display: none; } .prov-in { display: grid; grid-template-columns: 1fr minmax(300px, 44%); gap: clamp(24px, 3.5vw, 56px); padding: clamp(24px, 3vw, 44px); } .prov-tag { display: inline-block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 900; background: var(--ink); color: var(--paper); padding: 4px 10px; margin-bottom: 14px; } .swr .prov-name { font-family: var(--ff-display); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 4.4vw, 58px); letter-spacing: -.02em; line-height: 1; margin-bottom: 12px; } .prov-headline { font-family: var(--ff-slab); font-weight: 300; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; max-width: 46ch; } .swr .prov-copy { margin-top: 16px; color: var(--ink-60); max-width: 58ch; } .swr .prov-best { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ink-12); font-size: 14px; } .prov-best b { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; display: block; margin-bottom: 4px; color: var(--ink-60); } .prov-specs { margin: 0; } .prov-specs > div { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px dotted var(--ink-30); } .prov-specs > div:first-child { padding-top: 0; } .prov-specs dt { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-60); } .prov-specs dd { margin: 0; font-size: 14.5px; line-height: 1.5; } .swr .prov-bank { margin-top: 14px; font-size: 12px; color: var(--ink-60); font-family: var(--ff-slab); } /* ------------------------------------------------------------ demo/apply */ /* Animated checkout walkthrough. Every visual state is keyed off [data-step] on .demo-ui, so JS only ever writes that one attribute (plus the cursor position). Adding a step means adding CSS here and an entry in registry.json — no new JS. */ .demo { padding: clamp(50px, 6vw, 92px) 0; background: var(--paper); } .demo-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; margin-top: clamp(20px, 3vw, 36px); } .demo-stage { position: sticky; top: 20px; } .demo-ui { position: relative; border: 1px solid var(--ink); background: var(--paper); overflow: hidden; font-size: 13px; } .demo-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--ink); background: var(--ink); } .demo-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--paper-40); } .demo-bar b { margin-left: 8px; font-family: var(--ff-slab); font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-70); } .demo-body { display: grid; grid-template-columns: 1fr 1fr; } .demo-summary { padding: clamp(12px, 1.6vw, 20px); border-right: 1px solid var(--ink-12); } .demo-pay { padding: clamp(12px, 1.6vw, 20px); } .swr .demo-h { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 12px; font-weight: 700; } .demo-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; } .demo-line b { font-variant-numeric: tabular-nums; } .demo-line--prod { align-items: flex-start; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--ink-12); } .demo-thumb { flex: 0 0 auto; width: 34px; height: 34px; background: var(--ink-12); } .demo-prod { flex: 1; font-size: 12px; line-height: 1.35; } .demo-prices { display: grid; justify-items: end; } .demo-prices s { color: var(--ink-30); font-size: 11px; } .demo-prices b { font-variant-numeric: tabular-nums; } .demo-total { border-top: 1px solid var(--ink); margin-top: 4px; padding-top: 10px; font-weight: 900; } .demo-total b { font-size: 17px; } /* coupon field — the caret blinks only while step 1 is typing into it */ .demo-coupon { display: flex; gap: 8px; margin: 12px 0; } .demo-input { flex: 1; border: 1px solid var(--ink-30); padding: 7px 9px; min-height: 32px; display: flex; align-items: center; gap: 1px; font-weight: 700; letter-spacing: .08em; } .demo-caret { width: 1px; height: 14px; background: var(--ink); opacity: 0; } .demo-ui[data-step="1"] .demo-caret { animation: blink .9s steps(1) infinite; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .demo-apply { background: var(--ink); color: var(--paper); padding: 7px 14px; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; display: grid; place-items: center; transition: scale .15s; } .demo-apply.is-hit { scale: .94; } /* Discount line only exists once the code has landed. */ .demo-disc { display: none; } .demo-ui[data-step="1"] .demo-disc, .demo-ui:not([data-step="0"]) .demo-disc { display: flex; } .demo-ui[data-step="0"] .demo-disc { display: none; } .demo-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ink-12); padding: 10px 12px; margin-bottom: 7px; transition: border-color .3s, background .3s, color .3s; } .demo-radio { width: 13px; height: 13px; border: 1px solid var(--ink-30); border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; transition: border-color .3s; } .demo-radio::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); scale: 0; transition: scale .25s cubic-bezier(.5, 1.6, .5, 1); } .demo-opt--bnpl { border-color: var(--ink); font-weight: 700; } /* Selected from step 2 onward. */ .demo-ui[data-step="2"] .demo-opt--bnpl, .demo-ui[data-step="3"] .demo-opt--bnpl, .demo-ui[data-step="4"] .demo-opt--bnpl, .demo-ui[data-step="5"] .demo-opt--bnpl { background: var(--ink); color: var(--paper); } .demo-ui[data-step="2"] .demo-opt--bnpl .demo-radio, .demo-ui[data-step="3"] .demo-opt--bnpl .demo-radio, .demo-ui[data-step="4"] .demo-opt--bnpl .demo-radio, .demo-ui[data-step="5"] .demo-opt--bnpl .demo-radio { border-color: var(--paper); } .demo-ui[data-step="2"] .demo-opt--bnpl .demo-radio::after, .demo-ui[data-step="3"] .demo-opt--bnpl .demo-radio::after, .demo-ui[data-step="4"] .demo-opt--bnpl .demo-radio::after, .demo-ui[data-step="5"] .demo-opt--bnpl .demo-radio::after { background: var(--paper); scale: 1; } /* Provider chips and plan cards slide open as their step arrives. Animating grid-template-rows 0fr→1fr collapses height without a fixed max-height. MUST be minmax(0, Nfr), not a bare Nfr. An `fr` track carries an automatic minimum of its content's min-content size, so a bare `0fr` here resolved to 15.33px — the chips stayed laid out and the row never actually closed. The explicit 0 minimum is what makes the collapse reach zero. */ .demo-provs, .demo-plans { display: grid; grid-template-rows: minmax(0, 0fr); opacity: 0; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1), opacity .35s, margin .45s; margin-top: 0; } /* The single inner wrapper is what gets clipped. It must be the ONLY child — see the matching note in build.mjs. */ .demo-provs-in, .demo-plans-in { overflow: hidden; display: grid; gap: 6px; } .demo-provs-in { grid-auto-flow: column; } .demo-ui[data-step="3"] .demo-provs, .demo-ui[data-step="4"] .demo-provs, .demo-ui[data-step="5"] .demo-provs, .demo-ui[data-step="4"] .demo-plans, .demo-ui[data-step="5"] .demo-plans { grid-template-rows: minmax(0, 1fr); opacity: 1; margin-top: 10px; } .demo-prov { border: 1px solid var(--ink-30); padding: 7px 4px; text-align: center; font-size: 10.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; } .demo-prov.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); } .demo-plan { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border: 1px solid var(--ink-30); padding: 9px 11px; transition: background .3s, color .3s, border-color .3s; } .demo-plan b { font-family: var(--ff-display); font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; } .demo-plan i { font-style: normal; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; } .demo-plan.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); } .demo-plan.is-on i { opacity: .8; } .demo-place { margin-top: 12px; background: var(--ink); color: var(--paper); text-align: center; padding: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; opacity: .35; transition: opacity .3s, scale .15s; } .demo-ui[data-step="5"] .demo-place, .demo-ui[data-step="4"] .demo-place { opacity: 1; } .demo-place.is-hit { scale: .96; } .demo-done { margin-top: 10px; border: 1px solid var(--ink); text-align: center; padding: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; opacity: 0; translate: 0 6px; transition: opacity .4s, translate .4s; } .demo-ui[data-step="5"] .demo-done { opacity: 1; translate: 0; } /* The pointer. JS sets --cx/--cy in pixels relative to .demo-ui. */ .demo-cursor { position: absolute; top: 0; left: 0; z-index: 6; width: 16px; height: 16px; pointer-events: none; translate: calc(var(--cx, 50%) - 3px) calc(var(--cy, 50%) - 2px); transition: translate .75s cubic-bezier(.5, .05, .2, 1); background: var(--ink); clip-path: polygon(0 0, 0 74%, 26% 58%, 44% 92%, 62% 84%, 44% 50%, 74% 46%); filter: drop-shadow(0 0 0 var(--paper)) drop-shadow(1px 1px 0 var(--paper)) drop-shadow(-1px 1px 0 var(--paper)); } .swr .demo-note { margin-top: 12px; font-size: 11.5px; color: var(--ink-60); } /* step list */ .demo-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); } .demo-step { border-bottom: 1px solid var(--ink-12); } .demo-step:last-child { border-bottom: 1px solid var(--ink); } .swr .demo-step-btn { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; width: 100%; text-align: left; padding: 13px 4px; display: grid; gap: 4px; opacity: .42; transition: opacity .35s; } .demo-step.is-on .demo-step-btn { opacity: 1; } .demo-step-cap { font-family: var(--ff-display); font-weight: 900; text-transform: uppercase; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: -.01em; line-height: 1.15; } .demo-step-copy { font-size: 13px; color: var(--ink-60); } .demo-step-bar { display: none; height: 2px; background: var(--ink-12); margin-top: 6px; } .demo-step-bar i { display: block; height: 100%; width: 0; background: var(--ink); } /* Everything from here is opt-in: fin.js adds `js-demo` to once the walkthrough is wired up. Without it the section renders as a plain, fully-expanded explainer with the checkout at its finished state — which is the whole flow in text, so nothing is lost when script is blocked. */ .js-demo .demo-step-btn { opacity: .42; } .js-demo .demo-step.is-on .demo-step-btn { opacity: 1; } .js-demo .demo-step-copy { max-height: 0; overflow: hidden; transition: max-height .4s ease; } .js-demo .demo-step.is-on .demo-step-copy { max-height: 14em; } .js-demo .demo-step-bar { display: block; } .js-demo .demo-step.is-on .demo-step-bar i { width: 100%; transition: width var(--dwell, 4s) linear; } .js-demo .demo-step.is-paused .demo-step-bar i { transition: none; } /* Hidden by design. The prev/pause/next row read as browser chrome sitting in the middle of the page, and it was redundant: every step in the list beside the mock is already a button, so clicking one jumps to that step AND pauses the walkthrough. That keeps a pause mechanism available (WCAG 2.2.2) without the control strip. `display: none` also takes the three buttons out of the tab order — do not switch this to visibility/opacity, which would leave invisible focusable buttons behind. The markup and JS still exist, so this is a one-line revert if it is ever wanted back. */ .demo-ctrls { display: none; gap: 8px; margin-top: 16px; } .swr .demo-btn { font: inherit; font-weight: 900; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 10px 14px; cursor: pointer; min-width: 46px; transition: background .25s, color .25s; } .swr .demo-btn:hover { background: var(--ink); color: var(--paper); } .demo-btn--play { flex: 1; } /* The cursor is an animation prop only — hide it when there is no animation. */ .demo-cursor { display: none; } .js-demo .demo-cursor { display: block; } @media (prefers-reduced-motion: reduce) { .demo-cursor { display: none; } .demo-provs, .demo-plans { transition: none; } } /* --------------------------------------------------------------- compare */ /* Where one white section follows another, the two section paddings stack into ~155-210px of dead space with no background change to justify it. Sections in that position carry NO top padding — the preceding section's padding-bottom supplies the whole gap. Applies to .prov, .cmp, .credit, .trust and .faq. The black sections (.calc, .steps) keep their top padding: there the background flips, so the larger gap reads as intentional. */ .cmp { padding: 0 0 clamp(50px, 6vw, 92px); background: var(--paper); } /* Wide table must scroll inside its own box — the page body never scrolls sideways. The wrapper is focusable so keyboard users can reach the scroll. */ .cmp-scroll { overflow-x: auto; border: 1px solid var(--ink); margin-top: clamp(18px, 2.4vw, 30px); } .cmp-table { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 14px; } .cmp-table th, .cmp-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--ink-12); vertical-align: top; } .cmp-table thead th { background: var(--ink); color: var(--paper); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; position: sticky; top: 0; } .cmp-table tbody th { font-family: var(--ff-display); font-weight: 900; text-transform: uppercase; font-size: 19px; letter-spacing: -.01em; white-space: nowrap; } .cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; } .cmp-table tbody tr { transition: background .2s; } .cmp-table tbody tr:hover { background: var(--ink-12); } .swr .cmp-foot { margin-top: 14px; font-size: 12px; color: var(--ink-60); max-width: 90ch; } /* ----------------------------------------------------------------- steps */ .steps { padding: clamp(50px, 6vw, 92px) 0; background: var(--ink); color: var(--paper); } .step-grid { list-style: none; margin: clamp(20px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border: 1px solid var(--paper-16); border-right: 0; } .step-card { padding: clamp(20px, 2.4vw, 34px); border-right: 1px solid var(--paper-16); display: grid; align-content: start; gap: 10px; transition: background .35s, color .35s; } .step-card:hover { background: var(--paper); color: var(--ink); } .step-card:hover .step-copy { color: var(--ink-60); } .step-rule { height: 3px; background: currentColor; width: 34px; } .swr .step-name { font-family: var(--ff-display); font-weight: 900; text-transform: uppercase; font-size: clamp(19px, 1.8vw, 26px); letter-spacing: -.01em; line-height: 1.1; } .step-copy { font-size: 14px; color: var(--paper-70); } /* ----------------------------------------------------------------- tiers */ .tiers { padding: clamp(50px, 6vw, 92px) 0; background: var(--paper); } .tier-grid { list-style: none; margin: clamp(20px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); border: 1px solid var(--ink); border-right: 0; } .tier-card { padding: clamp(20px, 2.4vw, 34px); border-right: 1px solid var(--ink); display: grid; align-content: start; gap: 8px; transition: background .35s, color .35s; } .tier-card:hover { background: var(--ink); color: var(--paper); } .tier-card:hover .tier-range, .tier-card:hover .tier-copy { color: var(--paper-70); } .tier-card:hover .tier-pay { border-color: var(--paper-16); } .swr .tier-name { font-family: var(--ff-display); font-weight: 900; text-transform: uppercase; font-size: clamp(21px, 2vw, 29px); letter-spacing: -.01em; } .tier-range { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; color: var(--ink-60); } .tier-copy { font-size: 14px; color: var(--ink-60); } .tier-pay { margin-top: 10px; border-top: 1px solid var(--ink-12); padding-top: 12px; display: grid; gap: 7px; } .tier-pay-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .tier-pay-k { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .65; } .tier-pay-v { font-family: var(--ff-display); font-weight: 900; font-variant-numeric: tabular-nums; font-size: 17px; white-space: nowrap; } /* .swr scope: `.swr a { color: inherit }` (0,1,1) would otherwise beat this. */ .swr .tier-link { margin-top: 12px; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; display: flex; justify-content: space-between; gap: 8px; border-top: 1px dotted currentColor; padding-top: 11px; } .tier-link::after { content: '→'; font-weight: 400; transition: translate .25s; } .tier-link:hover::after { translate: 6px 0; } .swr .tier-note { margin-top: 16px; font-size: 12px; color: var(--ink-60); } /* ---------------------------------------------------------------- credit */ .credit { padding: 0 0 clamp(50px, 6vw, 92px); background: var(--paper); } .swr .credit-lede { font-family: var(--ff-slab); font-weight: 300; font-size: clamp(18px, 1.9vw, 27px); line-height: 1.45; max-width: 40ch; margin-top: 6px; } .credit-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(22px, 3vw, 40px); max-width: 1000px; } .credit-cols p { font-size: clamp(15px, 1.15vw, 17px); color: var(--ink-60); } .credit-cols p::first-letter { font-family: var(--ff-slab); font-weight: 700; color: var(--ink); } /* Explicit column counts, not auto-fit. auto-fit reflowed 4 items into 3+1 at some widths, orphaning the last one on its own row, and made the divider edge cases unpredictable. Fixed steps of 4 → 2 → 1 stay balanced. */ .credit-points { list-style: none; margin: clamp(26px, 3.5vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); } /* Balanced gutters. With padding only on the right, each column's text sat flush against the divider to its left but 24px clear of the one on its right, so the rhythm read as lopsided. Pad both sides and drop the padding at the outer edges so the block still lines up with the .wrap margin. */ .credit-points li { padding: 18px clamp(14px, 2vw, 24px); border-right: 1px solid var(--ink-12); } .credit-points li:first-child { padding-left: 0; } .credit-points li:last-child { padding-right: 0; border-right: 0; } .credit-points b { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 7px; } .credit-points span { font-size: 14px; color: var(--ink-60); } /* The myth-buster — inverted callout, deliberately the loudest thing in the section because it is the one claim competitors get wrong. */ .myth { margin-top: clamp(28px, 3.5vw, 48px); background: var(--ink); color: var(--paper); padding: clamp(24px, 3vw, 44px); display: grid; gap: 12px; } .swr .myth-q { font-family: var(--ff-display); font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 3vw, 40px); letter-spacing: -.02em; line-height: 1.05; } .myth-a { color: var(--paper-70); max-width: 72ch; font-size: clamp(14px, 1.1vw, 16px); } /* ----------------------------------------------------------------- trust */ .trust { padding: 0 0 clamp(50px, 6vw, 92px); background: var(--paper); } .trust-grid { list-style: none; margin: clamp(20px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); border: 1px solid var(--ink); border-right: 0; } .trust-card { padding: clamp(20px, 2.4vw, 34px); border-right: 1px solid var(--ink); display: grid; align-content: start; gap: 10px; transition: background .35s, color .35s; } .trust-card:hover { background: var(--ink); color: var(--paper); } .trust-card:hover .trust-copy { color: var(--paper-70); } .swr .trust-name { font-family: var(--ff-display); font-weight: 900; text-transform: uppercase; font-size: clamp(17px, 1.6vw, 23px); letter-spacing: -.01em; line-height: 1.15; } .trust-copy { font-size: 14px; color: var(--ink-60); } /* ------------------------------------------------------------------- faq */ .faq { padding: 0 0 clamp(50px, 6vw, 92px); background: var(--paper); } .faq-list { border-top: 1px solid var(--ink); } .faq-item { border-bottom: 1px solid var(--ink); } .faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 30px; align-items: center; gap: 14px; padding: 20px 4px; } .faq-item summary::-webkit-details-marker { display: none; } .swr .faq-q { font-weight: 700; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.3; } .faq-x { position: relative; width: 18px; height: 18px; justify-self: end; transition: rotate .3s; } .faq-x::before, .faq-x::after { content: ''; position: absolute; top: 50%; left: 50%; translate: -50% -50%; background: var(--ink); } .faq-x::before { width: 100%; height: 2px; } .faq-x::after { width: 2px; height: 100%; } .faq-item[open] .faq-x { rotate: 45deg; } .faq-item summary:hover .faq-q { text-decoration: underline; text-underline-offset: 4px; } .faq-a { padding: 0 4px 26px; color: var(--ink-60); max-width: 70ch; font-size: clamp(14px, 1.15vw, 17px); } /* -------------------------------------------------------------- cta/foot */ .cta { background: var(--ink); color: var(--paper); padding: clamp(54px, 6.5vw, 96px) 0 clamp(40px, 5vw, 68px); } .cta-h a { text-decoration: none; display: inline-block; } .cta-h [data-hword] { display: inline-block; font-family: var(--ff-display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 8.6vw, 128px); letter-spacing: -.03em; line-height: .95; } .cta-h-ghost { color: transparent; -webkit-text-stroke: clamp(1.5px, .25vw, 3px) var(--accent); transition: color .3s; } .cta-h a:hover .cta-h-ghost { color: var(--accent); } .cta-arrow { display: inline-block; font-size: clamp(36px, 6.4vw, 92px); margin-left: 18px; transition: translate .3s; vertical-align: 8px; } .cta-h a:hover .cta-arrow { translate: 18px 0; } /* Display words are separate inline-blocks with a single space between them. At 128px that space measured 6px after the -.03em tracking, and the ghost variant's outline stroke closed what was left — "START A RETURN" rendered as "START ARETURN". Space them in em so it scales with the type. */ .cta-h [data-hword] + [data-hword] { margin-left: .14em; } .cta-links { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .swr .cta-links a { display: inline-block; text-decoration: none; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; border: 1px solid var(--paper-40); padding: 11px 18px; transition: background .25s, color .25s, border-color .25s; } .swr .cta-links a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .cta-policies { list-style: none; margin: clamp(28px, 4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .cta-policies li { border-top: 1px solid var(--paper-16); padding: 16px 16px 16px 0; font-family: var(--ff-slab); font-size: 13px; letter-spacing: .06em; color: var(--paper-70); } /* Required financing disclosure. This is regulated content, not decoration — do not delete it, and keep it on the same page as any APR figure. */ .legal { margin-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--paper-16); padding-top: 18px; } .legal p { font-size: 12px; color: var(--paper-40); max-width: 100ch; line-height: 1.6; } /* ----------------------------------------------------------------- grain */ .grain { position: fixed; inset: -50%; z-index: 100; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .05; } /* ------------------------------------------------- animation start states */ /* Applied only when JS is live AND the user allows motion. Without either the page renders complete and still — nothing depends on script to be readable. */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] { opacity: 0; transform: translateY(24px); } .js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .js [data-hword] { clip-path: inset(0 0 100% 0); } .js [data-hword].is-in { clip-path: inset(0 0 -10% 0); transition: clip-path 1s cubic-bezier(.2,.8,.2,1); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ------------------------------------------------------------ responsive */ @media (max-width: 1020px) { /* Readout drops below the controls and stops being sticky: stacked, a sticky grid item is confined to its own grid area, which is exactly its own height, so it would never actually travel. Same trap as the brands page speed readout — see that file's 1020px block. */ .calc-shell { grid-template-columns: 1fr; } .calc-out { position: static; } .prov-in { grid-template-columns: 1fr; } /* Same sticky-in-a-grid-area trap as .calc-out: once stacked, the stage's grid row is exactly its own height, so sticky would never travel. */ .demo-shell { grid-template-columns: 1fr; } .demo-stage { position: static; } /* Two-up: the right-hand item of each pair closes the row, the left-hand one starts it, and the first pair needs a rule under it. */ .credit-points { grid-template-columns: repeat(2, 1fr); } .credit-points li:nth-child(odd) { padding-left: 0; } .credit-points li:nth-child(even) { padding-right: 0; border-right: 0; } .credit-points li:nth-child(-n+2) { border-bottom: 1px solid var(--ink-12); } } /* Ordered largest-to-smallest below this point. Keep it that way — the 680px block used to sit above the 760px one, which made overrides between them depend on source order rather than on width. */ @media (max-width: 760px) { .hero { min-height: 0; padding-top: 52px; } .hero-stats { border: 0; margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; } .hero-stats li { border: 1px solid var(--paper-16); padding: 14px 12px; } .cta-links { display: grid; } .swr .cta-links a { text-align: center; } } @media (max-width: 680px) { /* The mock checkout is two panels side by side; below this they are too narrow to read as a checkout at all, so stack them. */ .demo-body { grid-template-columns: 1fr; } .demo-summary { border-right: 0; border-bottom: 1px solid var(--ink-12); } .demo-provs-in { grid-auto-flow: row; } } @media (max-width: 560px) { /* Stats stay 2×2 down to the narrowest phone. A single column pushed the four figures into a tall strip that shifted the whole hero below the fold. */ .hero-stats { grid-template-columns: 1fr 1fr; } .hero-stats li { padding: 12px 10px; } .hero-stats span { letter-spacing: .14em; } /* Collapses here rather than at 760px so it steps down in company with the other card grids (.step-grid, .tier-grid, .trust-grid), which hold two columns until ~520px. At 760 this was alone at one column while they were still at two, which read as a mistake. */ .credit-points { grid-template-columns: 1fr; } .credit-points li, .credit-points li:first-child, .credit-points li:last-child { padding-inline: 0; border-right: 0; border-bottom: 1px solid var(--ink-12); } .credit-points li:last-child { border-bottom: 0; } /* Chip rows scroll sideways rather than wrapping into four cramped lines. */ .calc-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .calc-chips::-webkit-scrollbar { display: none; } .fchip { flex: 0 0 auto; } }