/* datahuru's public site: Codeblock's brand-web style. Dark only, pure
   neutral greys, Inter, and the brand blue on the one action that matters in
   each view. One container, and every space a step on an 8px scale. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --radius: 0.875rem;          /* controls */
  --radius-card: 1.25rem;      /* cards and frames */

  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #171717;
  --muted: #262626;
  --muted-foreground: #a1a1a1;
  --border: #2a2a2a;
  --input: #333333;
  --ring: #fafafa;
  /* The brand blue, for lines, dots and links on black; and a hair deeper
     as a fill, so white text on it passes 4.5:1. */
  --brand: #027bfd;
  --brand-fill: #0070f0;
  --brand-hover: #005fd1;
  --on-brand: #ffffff;
  --success: oklch(0.74 0.15 158);
  --warning: oklch(0.79 0.14 76);
  --info: oklch(0.7 0.14 258);
  --destructive: oklch(0.68 0.17 22.2);

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --content: 1120px;
}

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; scroll-padding-top: var(--s7); -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font: 16px/1.6 var(--font-sans); font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: oklch(0.985 0 0 / 15%); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.9em; }
.mock-dim { color: var(--muted-foreground); }

.wrap { width: min(var(--content), 100% - 2 * var(--s3)); margin-inline: auto; }
.narrow { max-width: 720px; }

.skip-link {
  position: fixed; left: var(--s2); top: var(--s1); z-index: 60;
  padding: var(--s1) var(--s2); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--background); font-size: 14px; font-weight: 600;
  transform: translateY(-80px); transition: transform 0.15s;
}
.skip-link:focus { transform: none; outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---- controls ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 40px; padding: 0 var(--s2); border-radius: var(--radius);
  font: 600 14px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  border: 0; background: transparent; color: var(--foreground);
  box-shadow: inset 0 0 0 1px oklch(0.985 0 0 / 24%);
  transition: background 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--muted); }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* The one filled button: the brand, for the action that matters. */
.btn-primary { background: var(--brand-fill); color: var(--on-brand); box-shadow: none; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { box-shadow: none; color: var(--muted-foreground); }
.btn-ghost:hover { background: transparent; color: var(--foreground); }
.btn-lg { min-height: 52px; padding: 0 var(--s3); font-size: 16px; font-weight: 700; }

.label { font-size: 14px; font-weight: 600; }
.hint { font-size: 14px; color: var(--muted-foreground); }
.hint-err { color: var(--destructive); }
.control {
  min-height: 52px; width: 100%; padding: 0 var(--s2); border-radius: var(--radius);
  border: 1px solid var(--input); background: var(--card); color: var(--foreground);
  font: 16px var(--font-sans);
}
.control::placeholder { color: oklch(0.66 0 0 / 60%); }
.control:focus-visible { outline: none; border-color: var(--foreground); }
.control[aria-invalid="true"] { border-color: var(--destructive); }

.status { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.status-ok { color: var(--success); }
.callout { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s4); padding: var(--s2) var(--s3); border-radius: var(--radius); border: 1px solid oklch(0.74 0.15 158 / 35%); background: oklch(0.74 0.15 158 / 8%); }

/* A window around a screenshot. */
.frame { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--background); }
.frame-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--s2); border-bottom: 1px solid var(--border); background: var(--card); }
.frame-bar > i { width: 9px; height: 9px; border-radius: 999px; background: var(--muted); }
.frame-url { margin-left: var(--s1); font: 12px var(--font-mono); color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame > img { width: 100%; }

/* ---- header ------------------------------------------------------------ */

.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background 0.2s, border-color 0.2s; }
/* The one sanctioned blur: legibility over what scrolls beneath. */
.nav.is-scrolled { background: oklch(0.145 0 0 / 90%); border-bottom-color: var(--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-in { display: flex; align-items: center; gap: var(--s4); height: 72px; }
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; height: 26px; width: auto; }
.nav-links { display: flex; gap: var(--s4); font-size: 15px; font-weight: 500; color: var(--muted-foreground); }
.nav-links a { transition: color 0.15s; }
.nav-links a:hover { color: var(--foreground); }
.nav-cta { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }

/* ---- hero -------------------------------------------------------------- */

.hero { position: relative; isolation: isolate; margin-top: -73px; }
.hero-top { position: relative; padding: calc(var(--s7) + 73px) 0 calc(var(--s8) + var(--s7) + var(--s4)); text-align: center; }
.hero-in { display: flex; flex-direction: column; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: var(--s1); padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: oklch(0.145 0 0 / 70%); font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
.pill-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 4px rgb(2 123 253 / 20%); }
.hero-h { margin-top: var(--s3); font-size: clamp(44px, 7.4vw, 84px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; }
.hero-p { max-width: 620px; margin-top: var(--s3); font-size: 19px; line-height: 30px; color: oklch(0.985 0 0 / 70%); text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--s4); }
.page .actions { justify-content: flex-start; }

/* The night the stack stands in: neutral, with three sparse layers of
   drifting points. */
.sky {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 100%, oklch(0.19 0 0) 0%, oklch(0.145 0 0) 60%);
}
/* Each star layer is a tile of randomly placed stars; the tiles are of
   coprime sizes, so the field never falls into a row or grid a reader could
   see. Two layers breathe, out of step with each other. */
.stars, .stars::before, .stars::after { position: absolute; inset: 0; }
.stars {
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27337%27 height=%27313%27 fill=%27%23fff%27%3E%3Ccircle cx=%27149.8%27 cy=%27173.4%27 r=%270.86%27 fill-opacity=%270.72%27/%3E%3Ccircle cx=%2728.4%27 cy=%27244.4%27 r=%270.54%27 fill-opacity=%270.80%27/%3E%3Ccircle cx=%2715.9%27 cy=%2752.9%27 r=%270.81%27 fill-opacity=%270.64%27/%3E%3Ccircle cx=%27283.3%27 cy=%27144.2%27 r=%270.59%27 fill-opacity=%270.56%27/%3E%3Ccircle cx=%27303.5%27 cy=%27162.6%27 r=%270.50%27 fill-opacity=%270.63%27/%3E%3Ccircle cx=%27322.1%27 cy=%27258.5%27 r=%270.84%27 fill-opacity=%270.75%27/%3E%3C/svg%3E") 0 0 / 337px 313px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%);
}
.stars::before, .stars::after { content: ""; }
.stars::before { background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27173%27 height=%27211%27 fill=%27%23fff%27%3E%3Ccircle cx=%27115.7%27 cy=%274.5%27 r=%270.63%27 fill-opacity=%270.55%27/%3E%3Ccircle cx=%2749.6%27 cy=%27171.5%27 r=%270.60%27 fill-opacity=%270.47%27/%3E%3Ccircle cx=%2789.0%27 cy=%27111.7%27 r=%270.51%27 fill-opacity=%270.48%27/%3E%3C/svg%3E") 0 0 / 173px 211px; animation: twinkle 7s ease-in-out infinite alternate; }
.stars::after { background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27251%27 height=%27227%27 fill=%27%23fff%27%3E%3Ccircle cx=%27184.5%27 cy=%2796.0%27 r=%270.74%27 fill-opacity=%270.61%27/%3E%3Ccircle cx=%27173.5%27 cy=%27226.6%27 r=%270.74%27 fill-opacity=%270.53%27/%3E%3Ccircle cx=%27192.5%27 cy=%27133.6%27 r=%270.80%27 fill-opacity=%270.49%27/%3E%3Ccircle cx=%2759.5%27 cy=%27137.4%27 r=%270.69%27 fill-opacity=%270.53%27/%3E%3C/svg%3E") 0 0 / 251px 227px; animation: twinkle 11s ease-in-out -4s infinite alternate; }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } }

/* The stack and its floor. The drawing keeps its proportions at every
   width, centred on the screen, and runs past its own box on both sides so
   it never ends at the edge of a wide one. */
.flow { position: absolute; left: 50%; bottom: 0; width: clamp(864px, 100vw, 1296px); height: auto; aspect-ratio: 1440 / 400; overflow: visible; transform: translateX(-50%); }
/* The floor: rays to the stack and rows closing up towards it, lit near the
   viewer and gone at the horizon. */
.floor { fill: none; stroke: url(#flow-floor); stroke-width: 1; vector-effect: non-scaling-stroke; }
.floor-0 { stop-color: var(--brand); stop-opacity: 0; }
.floor-1 { stop-color: var(--brand); stop-opacity: 0.22; }
.glow { fill: url(#flow-glow); }
.glow-0 { stop-color: var(--brand); stop-opacity: 0.18; }
.glow-1 { stop-color: var(--brand); stop-opacity: 0; }
/* The mark's three bars, as slabs: dark glass with a lit top edge, and two
   lights at the end of each blinking out of step, as a rack's do. */
.slab { fill: url(#flow-slab); stroke: oklch(1 0 0 / 8%); stroke-width: 1; vector-effect: non-scaling-stroke; }
.slab-0 { stop-color: oklch(0.27 0 0); }
.slab-1 { stop-color: oklch(0.2 0 0); }
.slab-rim { fill: none; stroke: var(--brand); stroke-opacity: 0.65; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.led { fill: var(--brand); opacity: 0.25; animation: blink 2.6s steps(1, end) infinite; }
.l01, .l20 { animation-duration: 3.7s; animation-delay: -1.1s; }
.l10 { animation-duration: 1.9s; animation-delay: -0.4s; }
.l11, .l21 { animation-duration: 4.3s; animation-delay: -2.2s; }
@keyframes blink { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } 70% { opacity: 0.4; } }
/* Lanes in from both edges, faint; along each a short bright packet runs
   into the stack. Coprime durations, so the arrivals never fall into step. */
.lane { fill: none; stroke: oklch(1 0 0 / 7%); stroke-width: 1; vector-effect: non-scaling-stroke; }
.packet { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1.2 98.8; stroke-dashoffset: 100; animation: packet 5s linear infinite; }
.p1 { animation-duration: 7s; animation-delay: -2s; }
.p2 { animation-duration: 6s; animation-delay: -4s; }
.p3 { animation-duration: 5.5s; animation-delay: -1s; }
.p4 { animation-duration: 8s; animation-delay: -5s; }
.p5 { animation-duration: 6.5s; animation-delay: -3s; }
.p6 { animation-duration: 4.5s; animation-delay: -2.5s; }
.p7 { animation-duration: 7.5s; animation-delay: -6s; }
.p8 { animation-duration: 5.8s; animation-delay: -0.5s; }
@keyframes packet { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.plain { fill: var(--background); }

.hero-shot { margin-top: var(--s3); }
.term {
  display: flex; align-items: center; gap: var(--s2);
  height: var(--s6); padding: 0 var(--s4);
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card);
  font: 13px/1 var(--font-mono); color: var(--muted-foreground); white-space: nowrap;
}
.term-cmd { display: inline-flex; gap: 1ch; color: var(--foreground); }
.term-ps { color: var(--muted-foreground); }
.term-type { position: relative; overflow: hidden; }
.term-link { position: relative; flex: 1; min-width: var(--s2); height: 1px; background: var(--border); overflow: hidden; }
.term-link::after { content: ""; position: absolute; inset: 0; background: oklch(1 0 0 / 30%); transform-origin: left; }
.term-step, .term-live { display: inline-flex; align-items: center; gap: var(--s1); }
.term-live { color: var(--success); }
.term-url { margin-left: var(--s1); color: var(--foreground); }
.dot { position: relative; width: 6px; height: 6px; flex-shrink: 0; }
.dot > i { position: absolute; inset: 0; border-radius: 999px; }
.dot-run { opacity: 0; }
.dot-ok { background: var(--success); }
.term-build .dot-run { background: var(--warning); }
.term-roll .dot-run { background: var(--info); }

/* Under the screenshot, what follows, as tabs: each one a section below. */
.tabs { display: flex; justify-content: center; gap: 4px; margin: var(--s3) auto 0; padding: 4px; width: max-content; max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 999px; background: var(--card); }
.tabs a { padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted-foreground); transition: color 0.15s, box-shadow 0.15s; }
.tabs a:hover { color: var(--foreground); box-shadow: inset 0 0 0 1px var(--foreground); }

/* ---- pay strip ---------------------------------------------------------- */

.pay-strip { padding: var(--s7) 0 var(--s6); text-align: center; }
.strip-h { font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
/* Each way to pay: its logo, and its name beneath. The logos are the
   providers' own, at a height that gives each the same visual weight. */
/* The logos alone: each says its own name. */
.strip li { display: flex; align-items: center; justify-content: center; height: 104px; padding: 0 var(--s2); }
.strip li > img, .pay-cards { height: 40px; }
.strip img { width: auto; }
/* Vodacom's M-Pesa mark is tall; a little taller keeps its words legible. */
.strip .pay-mpesa { height: 54px; }
.strip .pay-mixx { height: 42px; }
.strip .pay-airtel { height: 54px; }
/* In grey, lifted to read on black; each in its own colours on hover. */
.strip img { filter: grayscale(1) brightness(1.7) contrast(0.85); opacity: 0.85; transition: filter 0.2s, opacity 0.2s; }
.strip li:hover img { filter: none; opacity: 1; }
.pay-cards { display: flex; align-items: center; gap: 10px; }
.pay-cards .pay-visa { height: 22px; }
.pay-cards .pay-mc { height: 36px; }
.strip li + li { border-left: 1px solid var(--border); }

/* ---- the track and its sections ---------------------------------------- */

/* The sections hang off one line down the left, as stops on a route. A
   packet runs down it, the hero's data carried on through the page. */
.track { position: relative; }
.feat { position: relative; padding: var(--s7) 0; }
.feat + .feat { border-top: 1px solid var(--border); }
.feat-in { position: relative; padding-left: var(--s7); }
.feat-in::before { content: ""; position: absolute; left: 20px; top: calc(-1 * var(--s7)); bottom: calc(-1 * var(--s7)); width: 1px; background: var(--border); }
.feat:first-child .feat-in::before { top: 6px; }
.feat:last-child .feat-in::before { bottom: 0; }
/* The stop: a ring on the line, level with the section's label. */
.feat-in::after { content: ""; position: absolute; left: 14px; top: 6px; width: 13px; height: 13px; border-radius: 999px; border: 1px solid var(--muted-foreground); background: var(--background); }
.track::after {
  content: ""; position: absolute; left: calc((100% - min(var(--content), 100% - 2 * var(--s3))) / 2 + 19px); top: 0; width: 3px; height: 48px; border-radius: 3px;
  background: linear-gradient(transparent, var(--brand)); animation: ride 9s linear infinite;
}
/* Down the whole track: top is a share of the track's own height. */
@keyframes ride { from { top: 0; opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } to { top: calc(100% - 48px); opacity: 0; } }

.chip { display: inline-flex; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted-foreground); }
.feat-head h2, .sec-head h2, .cta h2, .band-h { margin-top: var(--s2); font-size: clamp(32px, 4.2vw, 48px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; }
.lead { max-width: 600px; margin-top: var(--s2); font-size: 18px; line-height: 29px; color: var(--muted-foreground); text-wrap: pretty; }
.feat-shot { margin-top: var(--s5); }
.feat-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s6); align-items: center; }
.feat-split .feat-shot, .feat-split .mock { margin-top: 0; }

.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.points-stack { grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s4); }
.points h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.points p { margin-top: 6px; font-size: 15px; line-height: 24px; color: var(--muted-foreground); }
.points li { padding-left: var(--s2); border-left: 2px solid var(--border); }

/* Small drawings of the dashboard, in its own type: not screenshots, so
   they read at any width. */
.mock { padding: var(--s1) 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); font-size: 15px; }
.mock-row { display: flex; align-items: center; gap: var(--s2); padding: 14px var(--s3); }
.mock-row + .mock-row { border-top: 1px solid var(--border); }
.mock-row > :last-child { margin-left: auto; }
.mock-name { font-weight: 600; min-width: 56px; }
.mock-bal { display: flex; flex-direction: column; gap: 4px; padding: var(--s2) var(--s3) var(--s3); border-bottom: 1px solid var(--border); }
.mock-bal strong { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.mock-log { padding: var(--s3); font: 13.5px/2 var(--font-mono); }
.lv-ok { color: var(--success); }
.lv-warn { color: var(--warning); }
.state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.state::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.state-ok { color: var(--success); background: oklch(0.74 0.15 158 / 12%); }
.state-sleep { color: var(--muted-foreground); background: var(--muted); }
.state-wake { color: var(--warning); background: oklch(0.79 0.14 76 / 12%); }

/* ---- Tanzania ----------------------------------------------------------- */

.band { padding: var(--s8) 0; border-block: 1px solid var(--border); text-align: center; background: radial-gradient(70% 90% at 50% 0%, rgb(2 123 253 / 9%), transparent 70%); }
.band-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s6); text-align: left; }
.band-cells li { padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
.band-cells h3 { font-size: 19px; font-weight: 700; }
.band-cells p { margin-top: var(--s1); color: var(--muted-foreground); }

/* ---- pricing ------------------------------------------------------------ */

.sec { padding: var(--s8) 0; }
.sec-head { text-align: center; }
.sec-head .lead { margin-inline: auto; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); max-width: 880px; margin: var(--s6) auto 0; }
.plan { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5) var(--s4) var(--s4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
.plan-pro { border-color: rgb(2 123 253 / 45%); background: linear-gradient(180deg, rgb(2 123 253 / 7%), var(--card) 45%); }
.plan h3 { font-size: 22px; font-weight: 800; }
.plan-for { color: var(--muted-foreground); }
.plan-price { display: flex; align-items: baseline; gap: var(--s1); margin-top: var(--s1); }
.plan-price .num { font-size: 36px; font-weight: 800; letter-spacing: -0.035em; }
.plan .ticks { flex: 1; }
.ticks { display: grid; gap: 12px; margin-top: var(--s1); }
.ticks li { position: relative; padding-left: 28px; color: oklch(0.985 0 0 / 82%); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 7px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.plan .btn { margin-top: var(--s2); width: 100%; }
.rates { max-width: 880px; margin: var(--s4) auto 0; text-align: center; }
.rates-h { font-size: 14px; font-weight: 600; color: var(--muted-foreground); }
.rates-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--s2) 0; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.rates-row li { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s2); }
.rates-row li + li { border-left: 1px solid var(--border); }
.rates-row strong { font-size: 20px; font-weight: 800; }
.rates-row span:first-child { font-size: 14px; color: var(--muted-foreground); }

/* ---- call to action ----------------------------------------------------- */

.cta { text-align: center; border-top: 1px solid var(--border); }
.cta .narrow { margin-inline: auto; }
.cta .lead { margin-inline: auto; }
.signup { display: flex; flex-direction: column; gap: var(--s1); max-width: 520px; margin: var(--s5) auto 0; text-align: left; }
.signup-row { display: flex; gap: var(--s1); }
.cta .callout { justify-content: center; text-align: left; }

/* ---- a plain page ------------------------------------------------------- */

.page { padding: var(--s7) 0 var(--s8); }
.kicker { font-size: 14px; font-weight: 600; color: var(--brand); }
.page-h { margin-top: var(--s2); font-size: clamp(40px, 6vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.page .ticks { margin-top: var(--s5); gap: var(--s2); font-size: 17px; }
.page .ticks strong { color: var(--foreground); }

/* ---- docs and legal pages ---------------------------------------------- */

.draft { border-bottom: 1px solid oklch(0.79 0.14 76 / 35%); background: oklch(0.79 0.14 76 / 10%); padding: 10px 0; font-size: 14px; color: var(--warning); text-align: center; }
mark.tbc { padding: 0 6px; border-radius: 6px; background: oklch(0.79 0.14 76 / 16%); color: var(--warning); font-size: 0.92em; }
.doc { padding: var(--s6) 0 var(--s8); }
.doc-in { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.side-h { margin-bottom: var(--s1); font-size: 13px; font-weight: 700; }
.side a { padding: 7px 12px; border-radius: 10px; font-size: 15px; color: var(--muted-foreground); transition: color 0.15s, background 0.15s; }
.side a:hover { color: var(--foreground); background: var(--card); }
/* Where you are: a lighter surface and an outline, never the brand. */
.side a[aria-current="page"] { color: var(--foreground); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.prose { max-width: 720px; font-size: 17px; line-height: 1.7; color: oklch(0.985 0 0 / 86%); }
.prose h1 { margin-top: var(--s2); font-size: clamp(36px, 5vw, 52px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; color: var(--foreground); }
.prose h2 { margin-top: var(--s5); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--foreground); }
.prose p, .prose ul, .prose ol { margin-top: var(--s2); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--muted-foreground); }
.prose a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
.prose strong { color: var(--foreground); }
.prose code { padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); font: 0.88em var(--font-mono); }
.updated { margin-top: var(--s1); font-size: 14px; color: var(--muted-foreground); }
.lead-p { font-size: 19px; color: var(--muted-foreground); }
.prose .doc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s5); padding: 0; list-style: none; }
.doc-cards li + li { margin-top: 0; }
.doc-cards a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); text-decoration: none; transition: border-color 0.15s; }
.doc-cards a:hover { border-color: oklch(0.985 0 0 / 30%); }
.doc-cards strong { font-size: 17px; }
.doc-cards span { font-size: 15px; color: var(--muted-foreground); }

/* ---- footer ------------------------------------------------------------- */

/* The page signs off: the brand and where it is, every way back into the
   page, the small print, and the wordmark across the bottom edge. */
.foot { position: relative; overflow: hidden; border-top: 1px solid var(--border); padding-top: var(--s7); font-size: 15px; background: linear-gradient(180deg, var(--background), oklch(0.12 0 0)); }
.foot-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6); }
.foot .brand img { height: 28px; }
.foot-pitch { max-width: 320px; margin-top: var(--s3); font-size: 16px; line-height: 26px; color: var(--muted-foreground); }
.foot-where { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s3); padding: 6px 14px 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; font-weight: 500; color: oklch(0.985 0 0 / 82%); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.foot-cols div { display: flex; flex-direction: column; gap: 12px; }
.foot-h { margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--foreground); }
.foot-cols a { width: fit-content; color: var(--muted-foreground); transition: color 0.15s; }
.foot-cols a:hover { color: var(--foreground); }
.foot-cols a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
.foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); margin-top: var(--s7); padding: var(--s3) 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted-foreground); }
.foot-pay { font-weight: 500; }
/* The wordmark, as wide as the page and cut by its bottom edge. */
.foot-mark { width: min(1600px, 100% - 2 * var(--s3)); margin: var(--s3) auto calc(-1 * clamp(28px, 4.5vw, 72px)); opacity: 0.07; pointer-events: none; user-select: none; }
.foot-mark img { width: 100%; height: auto; }

/* ---- motion ------------------------------------------------------------- */

/* The terminal line replays the deploy: a push typed, each step in turn, the
   live address last; it rests before it clears. Only opacity and transform
   move. */
.run .term-type::after {
  content: ""; position: absolute; inset: 0;
  background: var(--card); box-shadow: inset 2px 0 0 var(--foreground);
  animation: t-type 12s infinite;
}
.run .term-type { animation: t-out 12s infinite; }
.run .term-link::after { animation: t-link 12s var(--ease) infinite; }
.run .term-link:nth-of-type(2)::after { animation-name: t-link2; }
.run .term-link:nth-of-type(3)::after { animation-name: t-link3; }
.run .term-build { animation: t-build 12s var(--ease) infinite; }
.run .term-roll { animation: t-roll 12s var(--ease) infinite; }
.run .term-live { animation: t-live 12s var(--ease) infinite; }
.run .term-build .dot-run { animation: t-build-run 12s infinite; }
.run .term-build .dot-ok { animation: t-build-ok 12s infinite; }
.run .term-roll .dot-run { animation: t-roll-run 12s infinite; }
.run .term-roll .dot-ok { animation: t-roll-ok 12s infinite; }

@keyframes t-type { 0%, 3% { transform: translateX(0); animation-timing-function: steps(20, end); } 13%, 100% { transform: translateX(100%); } }
@keyframes t-out { 0%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes t-link { 0%, 15% { transform: scaleX(0); opacity: 1; } 21%, 92% { transform: scaleX(1); opacity: 1; } 97%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes t-link2 { 0%, 38% { transform: scaleX(0); opacity: 1; } 44%, 92% { transform: scaleX(1); opacity: 1; } 97%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes t-link3 { 0%, 58% { transform: scaleX(0); opacity: 1; } 64%, 92% { transform: scaleX(1); opacity: 1; } 97%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes t-build { 0%, 20% { opacity: 0; transform: translateX(-4px); } 23%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes t-roll { 0%, 43% { opacity: 0; transform: translateX(-4px); } 46%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes t-live { 0%, 63% { opacity: 0; transform: translateX(-4px); } 67%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes t-build-run { 0%, 22% { opacity: 1; } 26% { opacity: 0.35; } 30% { opacity: 1; } 34% { opacity: 0.35; } 36% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes t-build-ok { 0%, 36% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes t-roll-run { 0%, 45% { opacity: 1; } 49% { opacity: 0.35; } 53% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes t-roll-ok { 0%, 56% { opacity: 0; } 58%, 100% { opacity: 1; } }

/* Reveals are opt-in: nothing is hidden unless the script is running to
   show it again. */
.js .reveal { opacity: 0; transform: translateY(var(--s2)); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

.pill, .hero-h, .hero-p, .hero .actions, .term, .hero-shot, .tabs { animation: rise 0.8s var(--ease) both; }
.hero-h { animation-delay: 60ms; }
.hero-p { animation-delay: 120ms; }
.hero .actions { animation-delay: 180ms; }
.term { animation-delay: 240ms; }
.hero-shot { animation-name: settle; animation-duration: 1s; animation-delay: 300ms; }
.tabs { animation-delay: 360ms; }
@keyframes rise { from { opacity: 0; transform: translateY(var(--s1)); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(var(--s3)) scale(0.985); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  /* Still, the packets would be dashes stopped wherever they started. */
  .packet, .track::after { display: none; }
}

/* ---- small screens ------------------------------------------------------ */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .feat-split { grid-template-columns: 1fr; gap: var(--s5); }
  .points { grid-template-columns: 1fr; }
  .band-cells { grid-template-columns: 1fr; }
  .doc-in { grid-template-columns: 1fr; gap: var(--s4); }
  .side { position: static; flex-direction: row; flex-wrap: wrap; }
  .side-h { width: 100%; }
  .prose .doc-cards { grid-template-columns: 1fr; }
  .strip, .rates-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip li:nth-child(3), .rates-row li:nth-child(3) { border-left: 0; }
  .strip li:nth-child(n + 3), .rates-row li:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .hero-top { padding: calc(var(--s6) + 73px) 0 calc(var(--s8) + var(--s6)); }
  .flow { transform: translateX(-50%); }
  .hero-p { font-size: 17px; line-height: 28px; }
  .nav-cta .btn-ghost { display: none; }
  .feat-in { padding-left: var(--s5); }
  .feat-in::before { left: 10px; }
  .feat-in::after { left: 4px; }
  .track::after { display: none; }
  .plans { grid-template-columns: 1fr; }
  .term { flex-direction: column; align-items: flex-start; gap: 12px; height: auto; padding: var(--s2) var(--s3); }
  .term-link { display: none; }
  .signup-row { flex-direction: column; }
  .foot-top { grid-template-columns: 1fr; gap: var(--s5); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
}
.strip-note { margin-top: var(--s2); }