/* Self-hosted brand fonts (SIL OFL 1.1, licenses in fonts/), latin and latin-ext subsets only:
   the page never contacts a font CDN. Only these weights ship; the browser maps the rest. */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/familjen-grotesk-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/familjen-grotesk-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/onest-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/onest-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/onest-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/onest-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geist-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geist-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/geist-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/geist-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --surface: #f4f5f8;
  --surface-raised: #ffffff;
  --line: #d7dbe3;
  --line-strong: #737d8c;
  --ink: #12141c;
  --ink-muted: #4e5566;
  --magenta: #b0185a;
  --magenta-soft: #fbe8f0;
  --on-magenta: #ffffff;

  --font-display: "Familjen Grotesk", "Onest", system-ui, sans-serif;
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0e1116; --surface-raised: #161a21; --line: #262c36; --line-strong: #6a7484;
    --ink: #e9ecf2; --ink-muted: #9ca4b3; --magenta: #f06ba2; --magenta-soft: #3d1426; --on-magenta: #1a0610;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 15px/24px var(--font-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
figure { margin: 0; }
img { max-width: 100%; }
a { color: var(--magenta); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
[id] { scroll-margin-top: 24px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-muted); }
.label { font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.wrap { max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.mark { display: inline-block; flex: none; }
.mark path { stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding-block: 20px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 700 20px/1 var(--font-display); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.brand .mark { color: var(--magenta); }
.nav-menu { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav-links { display: flex; gap: 20px; font-size: 14px; }
.nav-links a { color: var(--ink-muted); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.nav-toggle path { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; transform-origin: 12px 12px; }
.nav-toggle[aria-expanded="true"] .bar-top { transform: rotate(45deg) translateY(5px); }
.nav-toggle[aria-expanded="true"] .bar-mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar-bot { transform: rotate(-45deg) translateY(-5px); }
@media (prefers-reduced-motion: no-preference) { .nav-toggle path { transition: transform 0.15s ease, opacity 0.15s ease; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-md); padding: 11px 18px; font: 600 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn-primary { background: var(--magenta); color: var(--on-magenta); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--surface-raised); }
.btn-sm { padding: 7px 12px; font-size: 14px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.logo { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 12px 6px 8px; background: var(--surface-raised); font-size: 14px; }
.foot { border-top: 1px solid var(--line); padding-block: 28px; font-size: 13px; color: var(--ink-muted); }
.foot-in { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.foot-in .brand { font-size: 16px; }
.foot-in nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.foot-in a { color: var(--ink-muted); text-decoration: none; }
.foot-in a:hover { color: var(--ink); }
.h-xl { font: 700 clamp(40px, 6.2vw, 68px)/1.02 var(--font-display); letter-spacing: -0.025em; }
.h-lg { font: 700 clamp(28px, 3.6vw, 40px)/1.1 var(--font-display); letter-spacing: -0.015em; }
.h-md { font: 600 20px/28px var(--font-sans); }
.lede { font-size: 18px; line-height: 28px; color: var(--ink-muted); max-width: 34em; }
.section { padding-block: clamp(48px, 7vw, 88px); }
.section-flush { padding-top: 0; }
.section-head { display: grid; gap: 12px; margin-bottom: 32px; max-width: 42em; }

.cA-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding-block: 48px 72px; }
.cA-hero-copy { display: grid; gap: 24px; min-width: 0; }
.cA-eyebrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cA-diagram { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 20px; min-width: 0; }
.cA-diagram-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cA-diagram svg { width: 100%; height: auto; display: block; }
.beam-in { stroke: var(--line-strong); }
.beam-inside { stroke: var(--line-strong); stroke-dasharray: 3 6; }
.beam-out { stroke: var(--magenta); }
.beam-fee { stroke: var(--ink-muted); }
.prism { stroke: var(--ink); fill: none; }
.flow { stroke: var(--surface-raised); stroke-dasharray: 2 26; opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) { .flow { animation: flow 2.4s linear infinite; } }
@keyframes flow { to { stroke-dashoffset: -56; } }
.readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.readout { display: grid; gap: 4px; padding-top: 12px; border-top: 2px solid var(--line-strong); min-width: 0; }
.readout.out { border-top: 4px solid var(--magenta); padding-top: 10px; }
.readout.fee { border-top: 1px solid var(--ink-muted); padding-top: 13px; }
.readout .amt { font: 500 20px/28px var(--font-mono); font-variant-numeric: tabular-nums; }
.readout.out .amt { color: var(--magenta); }
.txline { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--ink-muted); border-top: 1px solid var(--line); padding-top: 14px; }
.netswitch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.netswitch button { border: 0; background: transparent; border-radius: 6px; padding: 4px 10px; font-size: 13px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; color: var(--ink-muted); }
.netswitch button[aria-pressed="true"] { background: var(--magenta-soft); color: var(--magenta); font-weight: 600; }
.netswitch .logo { width: 16px; height: 16px; }
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.promise { padding: 32px 28px 32px 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.promise + .promise { padding-left: 28px; border-left: 1px solid var(--line); }
.promise .fact { font: 500 13px/20px var(--font-mono); color: var(--magenta); background: var(--magenta-soft); border-radius: var(--r-sm); padding: 2px 8px; justify-self: start; }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.way { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.way .demo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; font: 400 13px/20px var(--font-mono); overflow-x: auto; white-space: nowrap; }
.split-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.split-grid .section-head { margin: 0; }
.splits { display: grid; gap: 18px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; min-width: 0; }
.split-row { display: grid; gap: 8px; }
.split-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.split-bar { display: flex; gap: 3px; height: 14px; }
.split-bar span { border-radius: 3px; }
.w70 { flex: 70; }
.w50 { flex: 50; }
.w30 { flex: 30; }
.w20 { flex: 20; }
.seg1 { background: var(--magenta); }
.seg2 { background: var(--magenta-soft); border: 1.5px solid var(--magenta); }
.seg3 { background: repeating-linear-gradient(135deg, var(--magenta) 0 2px, transparent 2px 6px); border: 1.5px solid var(--magenta); }
.split-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-muted); }
.split-legend .mono { color: var(--ink); }
.split-note { font-size: 13px; }
.priceband { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 56px; align-items: center; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 48px); }
.bigplus { display: block; font: 600 clamp(18px, 2.2vw, 24px)/1.2 var(--font-sans); letter-spacing: 0; color: var(--ink); margin-top: 8px; }
.bigpct { font: 700 clamp(72px, 11vw, 132px)/0.9 var(--font-display); letter-spacing: -0.04em; color: var(--magenta); }
.examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.ex { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: grid; gap: 2px; font-size: 13px; color: var(--ink-muted); min-width: 0; }
.ex .mono { color: var(--ink); font-size: 14px; }
.final { display: flex; flex-wrap: wrap; gap: 24px; align-items: end; justify-content: space-between; padding-block: 56px; border-top: 1px solid var(--line); }
.final-copy { display: grid; gap: 12px; max-width: 36em; }

@media (max-width: 900px) {
  .cA-hero, .split-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .promises { grid-template-columns: minmax(0, 1fr); }
  .promise, .promise + .promise { padding: 24px 0; border-left: 0; }
  .promise + .promise { border-top: 1px solid var(--line); }
  .ways { grid-template-columns: minmax(0, 1fr); }
  .nav-links .hide-md { display: none; }
}
@media (max-width: 640px) {
  .nav { gap: 12px; padding-block: 14px; }
  .nav-menu { flex-basis: 100%; flex-wrap: wrap; gap: 12px 20px; margin-left: 0; }
  .nav-links { flex-wrap: wrap; gap: 8px 20px; }
  .nav-links .hide-md { display: inline; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav-menu { display: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; padding-block: 4px 8px; border-top: 1px solid var(--line); }
  .js .nav-toggle[aria-expanded="true"] + .nav-menu { display: flex; }
  .js .nav-links { flex-direction: column; flex-wrap: nowrap; gap: 0; font-size: 16px; }
  .js .nav-links a, .js .nav-links .hide-md { display: block; padding-block: 12px; border-bottom: 1px solid var(--line); }
  .js .nav-menu .btn { padding: 11px 18px; font-size: 15px; }
}
@media (max-width: 560px) {
  .readouts, .examples { grid-template-columns: minmax(0, 1fr); }
  .priceband { grid-template-columns: minmax(0, 1fr); }
  .way .demo { white-space: normal; overflow-wrap: anywhere; }
}