/* ═══ DBS One — the design system ═════════════════════════════════════════ Datche red #D5030C, sampled edge-for-edge from the logo. Fraunces for display, Inter for interface, JetBrains Mono for anything a machine printed. Written once here; every page reads it. ════════════════════════════════ */ :root{ --red:#D5030C; --red-d:#A80209; --red-l:#F2565D; --red-p:#FCA9AD; --red-bg:#FDEEEF; --red-ln:#F7D2D4; --night:#0E1116; --night-2:#141A21; --night-3:#1B222B; --ink:#14161A; --ink-1:#22252B; --ink-2:#3A3D45; --ink-3:#5D606A; --ink-4:#6A6D77; --cream:#F7F6F3; --panel:#FFF; --sunk:#F1F2F0; --bg:#F7F6F3; --rule:#E4E2DC; --rule-2:#EFEDE8; --rule-f:#CDD0D4; --ok:#0F7B5A; --ok-bg:#E8F5EF; --ok-ln:#B9E0CE; --hold:#9A6207; --hold-bg:#FCF3E3; --hold-ln:#EFD9AE; --amber:#F5B92E; --r:12px; --r-s:9px; --r-l:16px; --shadow:0 1px 2px rgba(16,18,22,.05), 0 8px 26px rgba(16,18,22,.07); --shadow-l:0 2px 4px rgba(16,18,22,.06), 0 18px 48px rgba(16,18,22,.11); --ease:cubic-bezier(.22,.61,.36,1); --grid:rgba(16,18,24,.045); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px} body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px; line-height:1.6;color:var(--ink);background:var(--panel); -webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img,svg{max-width:100%} .wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative} /* ── the column grid ────────────────────────────────────────────────────── Four hairlines on the page's own column boundaries, behind everything. It is almost invisible and it is a surprising amount of why a page reads as drawn rather than assembled — every edge on the page now lines up with something. Off on a phone, where four rules in 350px is noise. */ .wrap::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px calc((100% - 64px) / 4)); background-position:32px 0;background-size:calc(100% - 64px) 100%; background-repeat:no-repeat} .wrap > *{position:relative;z-index:1} @media(max-width:820px){.wrap::before{display:none}} .wrap.narrow{max-width:960px} .mono{font-family:'JetBrains Mono',ui-monospace,monospace} .serif{font-family:Fraunces,Georgia,serif} .num{font-variant-numeric:tabular-nums} .skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:10px 16px; z-index:200;border-radius:0 0 8px 0} .skip:focus{left:0} :focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:3px} /* ── type ─────────────────────────────────────────────────────────────── */ h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.022em; line-height:1.08;text-wrap:balance} /* ── the scale, measured against Stripe ──────────────────────────────────── Their h1 is 48px on a 390px phone and 56px on a 1440px desktop — a 17% range. Ours was 38px and 60px: BIGGER than theirs on a desktop and ten pixels smaller on a phone, which is exactly backwards and most of why this read as cramped on a phone and shouty on a laptop. A headline that barely shrinks is the single loudest thing separating a confident mobile layout from a cramped one. Each clamp below hits its floor at 390px and its ceiling at 1440px. */ h1{font-size:clamp(46px,.95vw + 42.3px,56px);line-height:1.1} h2{font-size:clamp(34px,.76vw + 31px,42px);line-height:1.12} h3{font-size:clamp(21px,.29vw + 19.9px,24px);line-height:1.24;letter-spacing:-.018em} /* The look of a fourth-level heading, available as a class. Card and step titles sit inside sections whose head is an h2, so an

there skips a level and the document outline lies about the structure — a screen reader reading the headings alone gets a list with a hole in it. They are h3 elements now, wearing this. */ h4,.h4{font-family:Inter,sans-serif;font-size:17px;font-weight:600; letter-spacing:-.012em;line-height:1.35} p{text-wrap:pretty} .em{color:var(--red)} /* A coloured clause that carries the turn in the sentence gets its own line. Left to wrap, "…the Philippines you / can just ask" strands one word of the phrase on the line above it, which on a phone is the first thing anybody sees. Whatever punctuation ends the sentence goes INSIDE this span: a block element leaves any trailing character behind on a line of its own, and a lone full stop at 56px renders as a large dot under the headline. */ .em.turn{display:block} .onDark .em,.dark .em{color:var(--red-p)} .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--red);font-weight:500;display:flex;gap:10px; align-items:flex-start;line-height:1.5} /* Aligned to the FIRST line, not to the middle of the block: an eyebrow that wraps on a phone otherwise hangs its rule between the two lines. */ .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--red);flex:none; margin-top:.72em} .dark .eyebrow{color:var(--red-l)} .dark .eyebrow::before{background:var(--red-l)} .lede{font-size:clamp(18px,.19vw + 17.3px,20px);line-height:1.58;color:var(--ink-3);max-width:33em} /* ── measure ────────────────────────────────────────────────────────────── Somewhere between 45 and 75 characters a line the eye stops losing its place on the return sweep; past that it does. Measured across the site, FAQ answers were running 88 to 117 characters and one note reached 124, because nothing stopped a paragraph filling an 1122px container. Stripe hold 35-55 throughout. `ch` is the width of a zero in the current font, so this scales with the type rather than freezing a pixel width that is only right at one size. */ .faqa p,.callout p,.bill-note,.probl p,.whatis p,.appfoot, .calc-gap p,.sgroup > .sg-head p,.stepside p,.lede{max-width:33em} /* `em`, not `ch`. A `ch` is the width of a ZERO, and in Inter a zero is around 0.69em while the average character in running prose is about 0.47em — so 64ch measured out at 94 characters a line rather than the 64 it looks like it promises. In em the sum is direct: 33em / 0.47 is roughly 70 characters, at any size, in any of the three faces on this site. */ .dark .lede{color:#B7BCC6} /* ── buttons ──────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px; padding:0 21px;border-radius:var(--r-s);border:1px solid var(--red);background:var(--red); color:#fff;font:inherit;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap; transition:background .15s var(--ease),border-color .15s,transform .12s} .btn:hover{background:var(--red-d);border-color:var(--red-d)} .btn:active{transform:translateY(1px)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-f)} .btn.ghost:hover{background:var(--sunk);border-color:var(--ink-4)} .btn.onDark{background:#fff;color:var(--night);border-color:#fff} .btn.onDark:hover{background:#E8ECF1;border-color:#E8ECF1} .btn.onDark.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)} .btn.onDark.ghost:hover{background:rgba(255,255,255,.1)} .btn.sm{height:38px;padding:0 15px;font-size:14px} .btn.lg{height:54px;padding:0 26px;font-size:16.5px} .tlink{color:var(--red);font-weight:500;display:inline-flex;align-items:center;gap:6px; min-height:34px} .tlink::after{content:"→";transition:transform .16s var(--ease)} .tlink:hover::after{transform:translateX(3px)} /* ── the bar ────────────────────────────────────────────────────────────── Scoped to #nav, never to the element. A breadcrumb is a