/* ========================================================================== ds-site.css — shared chrome for inner pages on the green design system. Requires ds.css (tokens) and ds-components.css (buttons, .nav primitives). Scoped under .ds. This file exists so an inner page can drop the legacy tokens.css + site.css pair entirely — those carry the purple palette, and loading them alongside ds.css produced the split-personality look the redesign is removing. Contains only what EVERY inner page needs: reset, wrap, brand, mobile nav, page hero, section shell, footer. Page-specific rules live in their own file (ds-banks.css, ds-auth.css, …). ========================================================================== */ /* ========================================================================== RESET — site.css used to provide this. Kept minimal. ========================================================================== */ body.ds { margin: 0; overflow-x: clip; } .ds *, .ds *::before, .ds *::after { box-sizing: border-box; } .ds a { color: inherit; text-decoration: none; } .ds img, .ds input, .ds button, .ds select { max-width: 100%; } .ds .hidden { display: none !important; } .ds ::selection { background: var(--c-green-soft); color: var(--c-ink); } /* One visible focus ring for the whole page. Green, offset, never removed. */ .ds a:focus-visible, .ds button:focus-visible, .ds input:focus-visible, .ds [tabindex]:focus-visible { outline: 2px solid var(--c-green); outline-offset: 3px; border-radius: var(--r-control); } .ds .wrap { position: relative; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--wrap-pad); } .ds main { position: relative; z-index: 1; } /* ========================================================================== AUTH STATE — decided before first paint, never after it. The header used to be swapped by JS: the page painted "Sign in / Get started free", then a script at the bottom of the document found the elements and hid them. Behind four blocking scripts that swap was visible for a second or more, so a signed-in visitor watched the site tell them they were logged out. Now a one-line script in reads the token and stamps `.is-auth` on the root element, and these two rules do the swap. Nothing changes after paint, whatever the network does. The footer's "Get started" column is annotated the same way — it was static markup and showed "Create account / Sign in" to people who already had an account. ========================================================================== */ html:not(.is-auth) [data-auth="in"] { display: none !important; } html.is-auth [data-auth="out"] { display: none !important; } /* Announced to screen readers, never drawn. index.html carried this inline; it lives here now because the converter markup depends on it and three pages ship that markup. */ .ds .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip link — keyboard users land here first. */ .ds .skip { position: absolute; left: var(--s-4); top: -60px; z-index: 100; padding: var(--s-3) var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line-2); border-radius: var(--r-control); font-size: var(--fs-label); font-weight: var(--fw-semi); transition: top var(--t-fast) var(--ease-out); } .ds .skip:focus { top: var(--s-4); } /* ========================================================================== LEDGER RULES — the shared structural device (see ds-home.css rule 1). Drawn once, behind everything, so the column grid is continuous. ========================================================================== */ .ds .rules { position: fixed; inset: 0; z-index: 0; pointer-events: none; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--wrap-pad); background: linear-gradient(to right, transparent calc(20% - .5px), rgba(10,20,16,.045) calc(20% - .5px), rgba(10,20,16,.045) calc(20% + .5px), transparent calc(20% + .5px)), linear-gradient(to right, transparent calc(40% - .5px), rgba(10,20,16,.045) calc(40% - .5px), rgba(10,20,16,.045) calc(40% + .5px), transparent calc(40% + .5px)), linear-gradient(to right, transparent calc(60% - .5px), rgba(10,20,16,.045) calc(60% - .5px), rgba(10,20,16,.045) calc(60% + .5px), transparent calc(60% + .5px)), linear-gradient(to right, transparent calc(80% - .5px), rgba(10,20,16,.045) calc(80% - .5px), rgba(10,20,16,.045) calc(80% + .5px), transparent calc(80% + .5px)); background-clip: content-box; } @media (max-width: 900px) { .ds .rules { display: none; } } /* ========================================================================== NAV — same markup and behaviour as the homepage header. ========================================================================== */ .ds .nav { z-index: 60; } .ds .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-ink); flex: none; } .ds .brand-name { font-size: 16.5px; font-weight: var(--fw-strong); letter-spacing: -.022em; white-space: nowrap; } .ds .brand-name i { font-style: normal; color: var(--c-ink-3); font-weight: var(--fw-medium); } .ds .nav-toggle { display: none; } @media (max-width: 960px) { .ds .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--c-line-2); border-radius: var(--r-control); background: var(--c-surface); color: var(--c-ink); cursor: pointer; order: 3; } .ds .nav-toggle span, .ds .nav-toggle span::before, .ds .nav-toggle span::after { content: ""; display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) linear; } .ds .nav-toggle span { position: relative; } .ds .nav-toggle span::before { position: absolute; top: -5px; } .ds .nav-toggle span::after { position: absolute; top: 5px; } .ds .nav-toggle[aria-expanded="true"] span { background: transparent; } .ds .nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); } .ds .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); } .ds .nav-links { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--c-surface); border-bottom: 1px solid var(--c-line); box-shadow: var(--e-float); padding: var(--s-2) var(--wrap-pad) var(--s-4); display: none; } .ds .nav-links.is-open { display: flex; } .ds .nav-links a { padding: var(--s-3) 0; font-size: 16px; } .ds .nav-links a::after { display: none; } .ds .nav-cta .btn-ghost { display: none; } } /* The wordmark yields before the menu button does: the mark still identifies the site, and the brand link keeps its aria-label. */ @media (max-width: 520px) { .ds .brand-name { font-size: 14.5px; } .ds .nav-cta { gap: var(--s-2); } } @media (max-width: 430px) { .ds .brand-name { display: none; } .ds .nav-cta .btn-sm .ico { display: none; } } /* ========================================================================== SHARED TYPE PRIMITIVES ========================================================================== */ /* A field label, not a decorative tag: mono, because it names a part of the product, and ruled, because everything here is ruled. */ .ds .eyebrow { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--c-green-text); margin: 0 0 var(--s-4); } .ds .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--c-green); flex: none; } /* Any figure that came out of a statement. */ .ds .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .ds .hsec { position: relative; padding: clamp(56px, 8vw, 104px) 0; } .ds .hsec-soft { background: var(--c-bg-soft); } .ds .hsec-sunk { background: var(--c-bg-sunk); } .ds .hsec-head { max-width: 62ch; } .ds .hsec-head h2 { font-size: var(--fs-h2); font-weight: var(--fw-strong); letter-spacing: var(--tr-head); line-height: var(--lh-head); margin: 0 0 var(--s-4); text-wrap: balance; } .ds .hsec-head p { font-size: var(--fs-body-l); color: var(--c-ink-2); margin: 0; max-width: 58ch; } /* ========================================================================== PAGE HERO — inner-page opener. Type-led, left aligned, no centred stack. ========================================================================== */ .ds .phero { position: relative; padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); } .ds .phero h1 { font-size: var(--fs-h1); font-weight: var(--fw-strong); letter-spacing: var(--tr-display); line-height: var(--lh-head); margin: 0 0 var(--s-4); max-width: 20ch; text-wrap: balance; } .ds .phero h1 em { font-style: normal; color: var(--c-green-text); /* Underscored with a column rule — the same device the hero figure uses. */ box-shadow: inset 0 -2px 0 var(--c-green-line); } .ds .phero p { font-size: var(--fs-body-l); color: var(--c-ink-2); margin: 0; max-width: 62ch; } /* ========================================================================== FOOTER ========================================================================== */ .ds .foot { background: var(--c-bg-soft); border-top: 1px solid var(--c-line); padding: var(--s-9) 0 var(--s-6); position: relative; z-index: 1; } .ds .foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); } .ds .foot-brand p { margin: var(--s-4) 0 0; color: var(--c-ink-2); font-size: 14px; max-width: 34ch; } .ds .foot-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); } .ds .foot h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-faint); margin: 0 0 var(--s-4); font-weight: 500; } .ds .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); } /* :not(.btn) matters. `.ds .foot a` is one element more specific than `.ds .btn-primary`, so without it the footer's link colour and 14.5px size won every tie inside the CTA buttons — slate text on the solid green fill, about 1.9:1. */ .ds .foot a:not(.btn) { color: var(--c-ink-2); text-decoration: none; font-size: 14.5px; } .ds .foot a:not(.btn):hover { color: var(--c-green-text); } .ds .foot-bottom { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--c-line); font-size: 12.5px; color: var(--c-ink-3); } /* Five columns need more room than four did. Below 1080px the brand block takes its own full-width row rather than squeezing the four link columns into 90px each. */ @media (max-width: 1080px) { .ds .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s-7); } .ds .foot-brand { grid-column: 1 / -1; } .ds .foot-brand p { max-width: 52ch; } } @media (max-width: 780px) { .ds .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== RHYTHM — same fix as ds-home.css, kept in sync. `.ds .hsec-head p { margin: 0 }` outweighs `.ds .eyebrow`'s bottom margin (equal specificity, declared later) and the eyebrow is a

, so inside a section head it would otherwise sit flush against the headline. ========================================================================== */ .ds .hsec-head .eyebrow, .ds .phero .eyebrow { margin-bottom: var(--s-5); } .ds .hsec-head h2 { margin-bottom: var(--s-5); } .ds .hsec-head { margin-bottom: var(--s-8); } .ds .hsec-head + * { margin-top: 0; } /* ========================================================================== FAQ — a ruled accordion, shared by /support and /referral. No card, no chevron circle. Lives here because two pages now use it. ========================================================================== */ .ds .faq-list { border-top: 1px solid var(--c-line-2); } .ds .faq-list details { border-bottom: 1px solid var(--c-line); } .ds .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: var(--fw-semi); letter-spacing: -.01em; color: var(--c-ink); transition: color var(--t-fast) var(--ease-inout); } .ds .faq-list summary::-webkit-details-marker { display: none; } .ds .faq-list summary:hover { color: var(--c-green-text); } .ds .faq-list summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t-normal) var(--ease-out); color: var(--c-ink-3); } .ds .faq-list details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .ds .faq-list .ans { padding: 0 0 var(--s-5); max-width: 76ch; } .ds .faq-list .ans p { margin: 0 0 var(--s-3); color: var(--c-ink-2); line-height: var(--lh-body); } .ds .faq-list .ans p:last-child { margin-bottom: 0; } .ds .faq-list .ans code { font-family: var(--font-mono); font-size: .92em; background: var(--c-bg-sunk); padding: 1px 5px; border-radius: 5px; color: var(--c-ink); } @media (prefers-reduced-motion: reduce) { .ds .faq-list summary::after { transition: none; } }