/* Levity design tokens. The sky here is always daylight: there is no dark variant, so every colour is defined once and nothing redefines it. */ :root { /* Tells the browser to render form controls, scrollbars and the like in light, whatever the viewer's system asks for. */ color-scheme: light; --ink: #10151c; /* Darker than it needs to be on a white panel, because plenty of this text sits straight on the sky, where the old value fell under 4.5:1. */ --muted: #3d4a5c; --line: #dbe7f2; --bg: #f7fbff; --panel: #fff; --blue: #2b8fe6; --positive: #248663; --negative: #b64949; --sky: linear-gradient(180deg, #dcecfb 0%, #eaf4fd 38%, #f7fbff 70%, #fff 100%); --rail: rgba(255, 255, 255, .7); --ease: cubic-bezier(.22, 1, .36, 1); --shadow-card: 0 16px 35px #2c557c0c; --radius-card: 23px; --radius-panel: 28px; /* Component colours that used to invert between themes. They stay tokens so the components keep reading one source rather than scattering literals. */ --pill-ink: #10151c; --pill-ink-hover: #293747; --pill-on: #fff; --rail-border: rgba(255, 255, 255, .8); --art-sheen: #fff8; --art-mix: 36%; --cloud-opacity: .7; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 115px; background: var(--bg); } body { margin: 0; /* * Transparent on purpose. The sky is a fixed layer at z-index -1, and in the * paint order a non-positioned block's background lands *after* the negative * z-index layer — an opaque body paints straight over it. The ground colour * lives on , which paints first and stays behind everything. */ background: transparent; color: var(--ink); font-family: Poppins, ui-sans-serif, system-ui, Arial, sans-serif; font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: 0; background: none; } button:disabled { cursor: not-allowed; opacity: .45; } button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 4px; } h1, h2, h3, h4, p { margin: 0; } h1, h2, h3, h4 { font-weight: 400; } h2 { font-size: 44px; letter-spacing: -2px; line-height: 1.2; } p { color: var(--muted); } [hidden] { display: none !important; } .eyebrow { font-weight: 500; font-size: 10px; letter-spacing: 1.6px; line-height: 1.5; color: var(--muted); text-transform: uppercase; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .skip-link { position: fixed; left: 20px; top: -100px; background: var(--panel); padding: 15px; z-index: 200; border-radius: 12px; } .skip-link:focus { top: 10px; } /* Numbers line up in columns. */ .num { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }