/* TalariCloud marketing site.
   Next-generation, Apple-quiet: a deep canvas, a slow aurora, glass surfaces
   with an inner highlight, and huge confident type. Self-contained — fonts ship
   with the page, no external requests. Motion is ambient (the aurora), on
   hover, or on arrival — and everything that arrives is gated behind a class
   only the script adds, so a reader without JavaScript gets the whole page at
   first paint rather than a blank column. See "scroll choreography" below.
   Type: Space Grotesk for display, Inter for everything else.
   Brand: the logo's forest green, #115836, and the same gold the flag uses.
   The palette is the dashboard's — a visitor who signs up should not feel the
   product was made by a different company than the page that sold it. */

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

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-var.woff2") format("woff2");
}

/* ------------------------------------------------------------ tokens */

:root {
  /* --brand-core is the logo's ink, matching --brand-core in the dashboard.
     It is the identity and is never adjusted; the three around it are that
     colour made usable on a near-black canvas, which it is not on its own —
     a forest green dark enough to print disappears against #060a08. So the
     accent lifts, the deep one stays for fills under white text, and the soft
     one lifts further for links and figures. */
  --brand-core: #115836;
  --brand: #1e8e56;
  --brand-deep: #115836;
  --brand-soft: #5dd39e;
  /* Green and gold is the country's own pairing, so the second accent stays
     gold rather than becoming a second green. It is used sparingly — a rule,
     a glyph, the end of a gradient — never for text on the canvas, where it
     is a shade too bright to sit quietly. */
  --gold: #f7bc04;
  --ok: #3ddc91;

  /* The neutral ramp is green-biased by a few points, so it sits under the
     brand instead of against it. The old ramp was biased blue for a blue
     brand, and left on it the greens read as a colour someone changed. */
  --bg: #060a08;
  --bg-2: #0c1410;
  --bg-3: #132019;

  --ink: #eef4f0;
  --muted: #9aa8a1;
  --faint: #6f7d76;

  /* Glass materials: fill, hairline, and the inner top highlight that makes a
     surface read as a lit pane rather than a flat rectangle. */
  --glass: rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.065);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.14);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 30px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);

  --lift-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.22);
  --lift-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 64px rgba(0, 0, 0, 0.45);

  --wrap: 1180px;
  --pad: clamp(18px, 5vw, 56px);
}

* { box-sizing: border-box; margin: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-padding-top: 84px;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11" 1, "ss01" 1;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-soft); text-decoration: none; }
b { font-weight: 650; }

code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 0.88em;
  background: rgba(93, 211, 158, 0.12);
  color: var(--brand-soft);
  padding: 1px 7px;
  border-radius: 7px;
}

.mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; }

::selection { background: rgba(30, 142, 86, 0.32); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand-soft);
  outline-offset: 3px;
  border-radius: 8px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.wrap.narrow { max-width: 840px; }

/* ---------------------------------------------------------- typography */

h1, h2, h3 {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-weight: 600;
}

h1 {
  font-size: clamp(2.7rem, 7.4vw, 5.6rem);
  letter-spacing: -0.045em;
  max-width: 14ch;
  margin: 0 auto;
}

h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  max-width: 22ch;
}

h3 {
  font-size: 1.18rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.grad {
  /* Green into gold, the flag's own order. The gold arrives late so it lands
     on the last word or two rather than colouring half the headline. */
  background: linear-gradient(100deg, var(--brand-soft) 0%, var(--brand) 58%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kicker {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-soft);
  margin-bottom: 14px;
}

.section-lede {
  color: var(--muted);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  max-width: 62ch;
  margin-top: 16px;
}

.fine {
  color: var(--faint);
  font-size: 13px;
  margin-top: 22px;
}

/* ----------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 560;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  border: 1px solid var(--line-2);
  background: var(--glass);
  box-shadow: var(--hi);
  transition: transform 0.18s var(--out), background 0.18s var(--ease),
    border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); background: var(--glass-2); border-color: rgba(255,255,255,0.22); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, #2fae72, var(--brand) 55%, var(--brand-deep));
  border-color: rgba(93, 211, 158, 0.55);
  box-shadow: var(--hi), 0 8px 24px rgba(30, 142, 86, 0.32);
}
.btn-primary:hover { box-shadow: var(--hi), 0 12px 32px rgba(30, 142, 86, 0.42); }

.btn-ghost { background: transparent; }

.btn-invert {
  background: var(--ink);
  color: #0c1410;
  border-color: transparent;
}
.btn-invert:hover { background: #fff; }

.btn-lg { padding: 15px 26px; font-size: 16.5px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }

.arrow { transition: transform 0.2s var(--out); display: inline-block; }
.btn:hover .arrow { transform: translateX(3px); }

/* --------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(6, 10, 8, 0.55);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.nav.scrolled {
  background: rgba(6, 10, 8, 0.78);
  border-bottom-color: var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 62px;
}

/* The lockup: the artwork with the name set beside it as live text.

   The artwork carries a wordmark of its own, so the name does appear twice —
   on purpose. Drawn letterforms are a picture: not selectable, not found by
   the browser's own search, not read aloud, and the artwork's first letter is
   ambiguous enough that the name is worth stating outright.

   "Cloud" is set in the mark's own green rather than the gold it used to be.
   Gold is the page's second accent and is deliberately rare — spending it on
   half the company name made it read as decoration — and matching the artwork
   ties the two halves of the lockup together instead. */
.brand {
  display: inline-flex;
  /* Baseline, not centre — see .brand-lockup in the dashboard's stylesheet for
     the measurements. Short version: the artwork's ink sits 61% down its own
     box because the cloud above the letters is mostly air, so centring the two
     boxes lifts the name off the line the drawn letters sit on. Their baseline
     is 97.9% down the image, and an image's baseline is its bottom edge, so
     this lands the two wordmarks on one line. */
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

/* A replaced element with no baseline of its own gets one synthesised from the
   bottom of its border box, which is the whole trick above. Flex items are
   blockified, so `display` here does not change that. */
.brand-logo { height: 30px; width: auto; display: block; }
.brand-logo.sm { height: 22px; }

.brand-name {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 600;
  /* 0.69 of the mark's height: the artwork's own letters are 48% of it, and a
     Space Grotesk cap is about 0.7 of the font size. */
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-name.sm { font-size: 15px; }

/* --brand-soft is #5dd39e, which is exactly the ink talari-mark-dark.png is
   drawn in. Any other brand token would be close but visibly not the same
   green as the logo beside it. */
.brand-cloud { color: var(--brand-soft); }

.nav-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
}

.nav-links a {
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--ink); }

/* The phone menu button. Hidden on desktop, where the links sit inline; a
   44px target on phones (Apple's minimum), drawn as three bars that fold
   into a cross when the menu is open. */
.burger {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px -10px -8px 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex: none;
}

.burger span {
  position: absolute;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s var(--out), opacity 0.18s var(--ease);
}
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(3) { transform: translateY(6px); }
.nav.open .burger span:nth-child(1) { transform: rotate(45deg); }
.nav.open .burger span:nth-child(2) { opacity: 0; }
.nav.open .burger span:nth-child(3) { transform: rotate(-45deg); }

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

.hero {
  position: relative;
  text-align: center;
  padding: clamp(72px, 12vw, 150px) 0 clamp(40px, 6vw, 80px);
  overflow: clip;
}

.hero-inner { position: relative; z-index: 1; }

/* The aurora: three blurred colour fields drifting very slowly. Pure CSS,
   transform-only animation, no layout cost — the one piece of ambient motion. */
.aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px) saturate(120%);
  opacity: 0.75;
}

.aurora i {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: drift 26s var(--ease) infinite alternate;
}

.aurora i:nth-child(1) {
  width: 62vw; height: 62vw; max-width: 760px; max-height: 760px;
  left: 4%; top: -10%;
  background: radial-gradient(circle at 40% 40%, rgba(30, 142, 86, 0.55), transparent 62%);
}
.aurora i:nth-child(2) {
  width: 52vw; height: 52vw; max-width: 640px; max-height: 640px;
  right: 2%; top: 8%;
  /* Gold, kept faint. At the 0.30 it carried under the blue brand it was the
     only warm mass on the page and read as a stain rather than a light, and
     where it crossed the green it went brown. This is enough to keep the
     canvas from being one hue and not enough to be seen as a colour. */
  background: radial-gradient(circle at 60% 40%, rgba(247, 188, 4, 0.13), transparent 60%);
  animation-duration: 32s; animation-delay: -8s;
}
.aurora i:nth-child(3) {
  width: 44vw; height: 44vw; max-width: 540px; max-height: 540px;
  left: 34%; top: 34%;
  background: radial-gradient(circle at 50% 50%, rgba(93, 211, 158, 0.35), transparent 62%);
  animation-duration: 38s; animation-delay: -16s;
}

.aurora.small { inset: -40% 0 auto 0; height: 160%; opacity: 0.6; }
.aurora.small i:nth-child(1) { left: 10%; top: 10%; }
.aurora.small i:nth-child(2) { right: 8%; top: 0; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 8%, 0) scale(1.12); }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--glass);
  box-shadow: var(--hi);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 30px;
}

.pulse {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(61, 220, 145, 0.18);
}
.pulse::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--ok);
  animation: ring 2.2s var(--ease) infinite;
}
@keyframes ring {
  from { transform: scale(0.6); opacity: 0.9; }
  to   { transform: scale(1.8); opacity: 0; }
}

.lede {
  color: var(--muted);
  font-size: clamp(1.08rem, 1.7vw, 1.36rem);
  max-width: 58ch;
  margin: 28px auto 0;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* The offer, on its own line directly under the buttons. It used to be one
   clause inside .hero-note — set in the faint grey, between "built by
   developers" and "no lock-in", which is the least-read line on the page and
   no place for the only thing here that is free. Body colour, the gold glyph
   for the eye, and the small print left below it to stay small print. */
.hero-offer {
  margin-top: 18px;
  color: var(--text);
  font-size: 15px;
}
.hero-offer b { font-weight: 600; }

.hero-note {
  margin-top: 8px;
  color: var(--faint);
  font-size: 13.5px;
}

/* ----------------------------------------------------------- terminal */

.terminal {
  margin: clamp(48px, 7vw, 84px) auto 0;
  max-width: 660px;
  text-align: left;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(19, 32, 25, 0.9), rgba(12, 20, 16, 0.95));
  box-shadow: var(--hi), var(--lift-2);
  overflow: hidden;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}
.term-bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.term-bar em {
  margin-left: auto; margin-right: auto;
  font-style: normal; font-size: 12.5px; color: var(--faint);
  font-family: ui-monospace, monospace;
}

.terminal pre {
  margin: 0;
  padding: 18px 20px 20px;
  font-size: 13.5px;
  line-height: 1.85;
  overflow-x: auto;
  color: var(--ink);
}
.terminal code { background: none; padding: 0; color: inherit; font-size: inherit; }
.t-line { display: block; white-space: pre; }
.t-line b { font-weight: 600; }
.dim { color: var(--faint); }
.ok { color: var(--ok); }
.gold { color: var(--gold); }
.link { color: var(--brand-soft); text-decoration: underline; text-decoration-color: rgba(93,211,158,0.4); text-underline-offset: 3px; }

/* ------------------------------------------------------------- stats */

.stats-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stat {
  padding: 30px 22px;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: none; padding-left: 0; }

.stat-num {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat-num small { font-size: 0.5em; margin-left: 3px; letter-spacing: -0.02em; }

.stat p { margin-top: 10px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.stat code { font-size: 0.85em; }

/* ------------------------------------------------------------ developers */

/* Six developer-experience tiles, each led by a one-line "command" so the
   section speaks in the audience's own idiom before it explains anything. */
.dx {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 44px;
}

.dx-item {
  padding: 22px 22px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--hi);
  transition: transform 0.25s var(--out), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.dx-item:hover { transform: translateY(-3px); border-color: rgba(93,211,158,0.35); background: var(--glass-2); }

.dx-cmd {
  display: block;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(6, 10, 8, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  margin-bottom: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dx-item h3 { margin-bottom: 8px; }
.dx-item p { color: var(--muted); font-size: 14.5px; }
.dx-item p code { font-size: 0.86em; }

.dx-line {
  margin-top: 34px;
  text-align: center;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}
.dx-line b { color: var(--ink); }

/* Seven nav links: tighten before the phone breakpoint so they never wrap. */
@media (max-width: 1120px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 14px; }
}

@media (max-width: 1040px) {
  .dx { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dx { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- sections */

.section {
  padding: clamp(72px, 10vw, 136px) 0;
}

.section.dark {
  background:
    radial-gradient(900px 520px at 80% 0%, rgba(30, 142, 86, 0.14), transparent 60%),
    radial-gradient(700px 480px at 10% 100%, rgba(247, 188, 4, 0.08), transparent 55%),
    var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------- how */

.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 44px;
}

.step {
  position: relative;
  padding: 26px 24px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--hi);
}

.step-n {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #0c1410;
  background: linear-gradient(135deg, var(--brand-soft), var(--gold));
  margin-bottom: 16px;
}

.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; }

/* The dashboard window */

.window {
  margin-top: 40px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(19, 32, 25, 0.85), rgba(12, 20, 16, 0.95));
  box-shadow: var(--hi), var(--lift-2), 0 0 0 1px rgba(30,142,86,0.06);
  overflow: hidden;
}

.win-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
}
.win-bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.win-bar em { margin: 0 auto; font-style: normal; font-size: 12.5px; color: var(--faint); font-family: ui-monospace, monospace; }

.win-body {
  display: grid;
  grid-template-columns: 172px 1fr;
}

.win-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 10px;
  border-right: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.win-side i { font-style: normal; padding: 8px 12px; border-radius: 9px; }
.win-side i.on { background: rgba(93,211,158,0.12); color: var(--ink); }

.win-main { padding: 20px 22px 22px; min-width: 0; }

.win-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.win-title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.win-sub { font-size: 12.5px; color: var(--faint); margin-top: 3px; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line-2);
  background: var(--glass);
}
.pill.live { color: var(--ok); border-color: rgba(61,220,145,0.35); }
.pill.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }

.win-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.panel {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
  padding: 14px 16px 16px;
  min-width: 0;
}
.panel.span { grid-column: span 2; }

.panel-title {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 12px;
}
.panel-title em { font-style: normal; font-weight: 450; color: var(--faint); font-size: 12px; }

.timeline { display: grid; gap: 8px; }
.tl {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}
.tl i {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-style: normal; font-size: 11px; font-weight: 700;
  background: rgba(61,220,145,0.16); color: var(--ok);
}
.tl.live i { background: rgba(247,188,4,0.16); color: var(--gold); }
.tl em { font-style: normal; color: var(--faint); font-size: 12.5px; font-family: ui-monospace, monospace; }

.spark { width: 100%; height: 56px; display: block; }
/* The sparkline's colour, which used to be a hex on the SVG itself. A
   presentation attribute cannot hold a var(), so inline it was outside the
   palette and survived the change from blue to green untouched. As CSS it is
   a token like everything else. */
.spark path { stroke: var(--brand-soft); }
#sg stop { stop-color: var(--brand-soft); }

.mem {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  margin-top: 12px; font-size: 12.5px; color: var(--muted);
}
.mem i {
  height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); position: relative; overflow: hidden;
}
.mem i::after {
  content: ""; position: absolute; inset: 0; width: var(--w);
  background: linear-gradient(90deg, var(--brand), var(--brand-soft));
  border-radius: inherit;
}
.mem em { font-style: normal; font-family: ui-monospace, monospace; color: var(--faint); }

.envs { display: grid; gap: 6px; }
.env {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) auto;
  align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,0.03);
  font-size: 12.5px;
}
.env span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--muted);
}

/* -------------------------------------------------------------- bento */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 44px;
}

.card {
  padding: 26px 26px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--hi);
  transition: transform 0.25s var(--out), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--glass-2); }
.card.span-2 { grid-column: span 2; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 15px; }

.mock-timeline {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 20px;
}
.mt-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.03);
  font-size: 13px; font-weight: 500;
}
.mt-step i { font-style: normal; font-weight: 700; color: var(--ok); }
.mt-step.live i { color: var(--gold); }
.mt-step em { font-style: normal; color: var(--faint); font-family: ui-monospace, monospace; font-size: 12px; }

.mock-comment {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}
.mc-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-soft), var(--brand-deep));
  font-weight: 700; color: #fff; flex: none;
}
.mc-head { font-size: 13.5px; }
.mc-head span { color: var(--faint); margin-left: 6px; }
.mc-body { margin-top: 4px; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------ catalog */

.catalog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 44px;
}

.svc {
  padding: 22px 22px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--hi);
  transition: transform 0.25s var(--out), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.svc:hover { transform: translateY(-3px); border-color: rgba(93,211,158,0.35); background: var(--glass-2); }

.svc svg {
  width: 26px; height: 26px;
  fill: none; stroke: var(--brand-soft); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 14px;
}

.svc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.svc-name { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.svc-name b { color: var(--brand-soft); font-weight: 600; }
.svc-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ok);
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(61,220,145,0.35);
}
.svc p { color: var(--muted); font-size: 14.5px; }

/* ------------------------------------------------------------- stacks */

.stacks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 44px;
}

.stack-col {
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--hi);
}
.stack-col h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; font-size: 1.05rem; }
.stack-col h3 small { font-family: "Inter", sans-serif; font-weight: 450; font-size: 12.5px; color: var(--faint); letter-spacing: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.03);
  font-size: 13.5px; font-weight: 500;
  color: var(--ink);
}

.escape {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 16px;
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(600px 240px at 0% 50%, rgba(30,142,86,0.12), transparent 60%),
    var(--glass);
  box-shadow: var(--hi);
}
.escape h3 { margin-bottom: 8px; }
.escape p { color: var(--muted); font-size: 15px; }
.escape pre {
  margin: 0;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(6,10,8,0.7);
  font-size: 13px; line-height: 1.7;
  overflow-x: auto;
  color: var(--ink);
}
.escape code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* ------------------------------------------------------------- moving */
/* The honest half of the migration section. Deliberately plainer than the
   cards above it — a warning that looks like a feature card reads as a
   feature, and this one has to be believed. */

.moving-note {
  margin-top: 16px;
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--hi);
}
.moving-note h3 { margin-bottom: 14px; }
.moving-note ul { list-style: none; display: grid; gap: 14px; }
.moving-note li {
  padding-left: 18px;
  position: relative;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}
.moving-note li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.moving-note b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- why */

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 44px;
}

.why {
  padding: 28px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  box-shadow: var(--hi);
}
.why .stat-num { font-size: clamp(2.2rem, 3.6vw, 3.1rem); }
.why p { color: var(--muted); margin-top: 12px; font-size: 15px; }

.latency { margin-top: 20px; display: grid; gap: 10px; }
.lat-row {
  display: grid; grid-template-columns: 110px 1fr 52px; align-items: center; gap: 12px;
  font-size: 13px; color: var(--muted);
}
.lat-row i {
  height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); position: relative; overflow: hidden;
}
.lat-row i::after {
  content: ""; position: absolute; inset: 0; width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-soft));
}
.lat-row i.slow::after { background: linear-gradient(90deg, #e05a5a, #ff8a8a); }
.lat-row em { font-style: normal; text-align: right; font-family: ui-monospace, monospace; color: var(--ink); }

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

/* A section heading below an h2 — used for "Managed data" under the plan
   cards, so the two price tables read as one section rather than two. */
.sub {
  margin-top: 64px;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
}

.narrow-lede { font-size: 1rem; margin-top: 10px; }

/* A table without <table>: four columns on desktop collapsing to a stacked
   card per row on a phone, where a four-column table would either scroll
   sideways or squeeze the price into two lines. */
.db-table {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
  overflow: hidden;
}

.db-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 14px 20px;
  align-items: baseline;
  border-top: 1px solid var(--line);
}

.db-row:first-child { border-top: none; }

.db-head {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.db-row > span:last-child { font-variant-numeric: tabular-nums; }


/* The "what it is for" line under each plan name. A tier called "Dev" says
   nothing on its own — the first person to read this table asked what it
   meant, which is as clear a signal as a page ever gives. */
.db-for {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--faint);
  margin-top: 3px;
  max-width: 34ch;
}


.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 44px;
  align-items: stretch;
}

.price-card {
  position: relative;
  padding: 28px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--hi);
  display: flex; flex-direction: column; gap: 18px;
}
.price-card.featured {
  border-color: rgba(93,211,158,0.45);
  background:
    radial-gradient(500px 260px at 50% 0%, rgba(30,142,86,0.18), transparent 60%),
    var(--glass-2);
  box-shadow: var(--hi), var(--lift-2);
  transform: translateY(-8px);
}
.tag {
  position: absolute; top: -13px; left: 26px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #0c1410;
  background: linear-gradient(135deg, var(--brand-soft), var(--gold));
}
.price {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: clamp(1.85rem, 2.6vw, 2.5rem);
  letter-spacing: -0.04em; line-height: 1.05;
}
.price span { font-family: "Inter", sans-serif; font-size: 15px; font-weight: 450; color: var(--muted); letter-spacing: 0; }
.price-card ul { list-style: none; padding: 0; display: grid; gap: 10px; color: var(--muted); font-size: 14.5px; }
.price-card li { padding-left: 23px; text-indent: -23px; }
.price-card li::before { content: "✓"; color: var(--ok); margin-right: 9px; font-weight: 700; }
/* The trial line on the Starter card. It swaps the green tick for the gold
   ✦ rather than adding one beside it: two markers in a row read as clutter,
   and the point of the gold is that it is the only one on the card. */
.price-card li.offer::before { content: "✦"; color: var(--gold); }
.price-card .btn { justify-content: center; margin-top: auto; }
/* The "tell us what you need" card. Same box as a plan — it is one more thing
   you can choose — but it quotes no number, so the price slot carries words
   at a size that does not shout over the real prices beside it. */
.price-card.quote { border-style: dashed; background: transparent; }
.price.quiet {
  font-size: 1.5rem;
  color: var(--brand-soft);
  letter-spacing: -0.02em;
}
.price-card p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ---------------------------------------------------------------- faq */

.faq { margin-top: 36px; display: grid; gap: 10px; }

.faq details {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--hi);
  padding: 0 20px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.faq details[open] { border-color: var(--line-2); background: var(--glass-2); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-weight: 560;
  font-size: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: "Space Grotesk", sans-serif;
  font-size: 22px; line-height: 1; color: var(--brand-soft);
  transition: transform 0.25s var(--out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 20px; font-size: 15px; }

/* ---------------------------------------------------------------- cta */

.cta {
  position: relative;
  text-align: center;
  padding: clamp(80px, 12vw, 150px) 0;
  overflow: clip;
  border-top: 1px solid var(--line);
}
.cta .wrap { position: relative; z-index: 1; }
.cta h2 { margin: 0 auto; }
.cta p { color: var(--muted); margin: 18px auto 30px; font-size: clamp(1.02rem, 1.5vw, 1.2rem); }

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

.footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 40px;
  color: var(--faint);
  font-size: 13.5px;
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer a { color: var(--muted); }
.footer-places {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  line-height: 1.9;
}
.footer-places span { white-space: nowrap; }

/* ---------------------------------------------------------- beta form */

.beta-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  width: 100%;
  /* Wide on a desktop, where the pitch sits beside the form; the phone
     breakpoint below narrows it to the form alone. */
  max-width: min(900px, calc(100vw - 32px));
  /* The page resets every margin to zero, which takes the browser's own
     `margin: auto` off the dialog and pins it to the top-left corner. */
  margin: auto;
}

/* `display: flex` on the panels would otherwise beat the browser's
   `[hidden] { display: none }` and show the form and the thank-you at once. */
.beta-dialog [hidden] {
  display: none !important;
}

.beta-dialog::backdrop {
  background: rgba(4, 7, 5, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.beta-dialog[open] { animation: beta-in 0.34s var(--out); }

@keyframes beta-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
}

/* One lit pane holding both halves. */
.beta-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 40%),
    var(--bg-2);
  box-shadow: var(--hi), var(--lift-2);
  overflow: hidden;
}

/* The pitch: the aurora's green pooled in one corner, the flag's gold just
   touching the other, and four things a developer wants to hear. */
.beta-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 44px 40px;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(30, 142, 86, 0.32), transparent 65%),
    radial-gradient(ellipse 60% 50% at 95% 100%, rgba(247, 188, 4, 0.10), transparent 70%),
    rgba(255, 255, 255, 0.015);
}

.beta-aside .kicker { margin-bottom: 0; }

.beta-aside-title {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.beta-points {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--muted);
  font-size: 15px;
}

.beta-points li { display: flex; align-items: center; gap: 12px; }

.beta-tick {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--ok);
  background: rgba(61, 220, 145, 0.14);
  border: 1px solid rgba(61, 220, 145, 0.35);
}

.beta-aside-fine { color: var(--faint); font-size: 13px; margin-top: 6px; }

.beta-main { min-width: 0; }

.beta-form,
.beta-done {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 40px 36px;
}

/* Beside the pitch the form's own kicker would say "Private beta" twice. */
.beta-kicker-mobile { display: none; margin-bottom: -6px; }

.beta-form h3,
.beta-done h3 { font-size: 1.7rem; letter-spacing: -0.03em; }

.beta-lede { color: var(--muted); font-size: 15px; margin-top: -4px; }

.beta-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
}

.beta-field em { font-style: normal; font-weight: 400; color: var(--faint); }

.beta-field input,
.beta-field textarea {
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--hi);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}

.beta-field input::placeholder,
.beta-field textarea::placeholder { color: var(--faint); }

.beta-field input:focus,
.beta-field textarea:focus {
  outline: none;
  border-color: var(--brand-soft);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--hi), 0 0 0 4px rgba(93, 211, 158, 0.18);
}

.beta-field textarea { resize: vertical; min-height: 84px; }

/* Off-screen rather than display:none, so a bot's DOM walk still finds it. */
.beta-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.beta-error {
  color: #ff9a92;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 95, 86, 0.12);
  border: 1px solid rgba(239, 95, 86, 0.3);
}

.beta-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.beta-fine { color: var(--faint); font-size: 13px; }

.beta-close {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.beta-close:hover { color: var(--ink); background: var(--glass-2); }

.beta-done { text-align: center; align-items: center; justify-content: center; min-height: 100%; padding: 56px 40px 48px; }
.beta-done p { color: var(--muted); max-width: 36ch; }

.beta-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: var(--ok);
  background: rgba(61, 220, 145, 0.14);
  border: 1px solid rgba(61, 220, 145, 0.4);
  box-shadow: 0 0 0 8px rgba(61, 220, 145, 0.06);
}

.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* Phone and small tablet: the form is the whole screen and stands on its
   own — the version that was already right. */
@media (max-width: 720px) {
  .beta-dialog { max-width: min(520px, calc(100vw - 32px)); }
  .beta-panel { grid-template-columns: minmax(0, 1fr); }
  .beta-aside { display: none; }
  .beta-kicker-mobile { display: block; }
  .beta-form { padding: 30px 30px 28px; }
  .beta-done { padding: 44px 30px 36px; min-height: 0; }
}

@media (max-width: 480px) {
  .beta-form, .beta-done { padding: 26px 20px 22px; }
}

/* --------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .card.span-2 { grid-column: span 2; }
  .catalog { grid-template-columns: repeat(2, 1fr); }
  /* Two-up before one-up, so the cards keep a readable width all the way
     down rather than becoming full-width slabs at the first breakpoint. */
  .pricing { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav-inner { gap: 10px; }
  .nav-inner > .btn { margin-left: auto; }
  .burger { display: inline-flex; }

  /* The links become a glass dropdown anchored under the bar, opened by the
     burger. Hidden state is fully inert (no taps, no focus) until open. */
  .nav-links {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 6px var(--pad) 14px;
    background: rgba(6, 10, 8, 0.92);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--lift-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s var(--ease), transform 0.22s var(--out),
      visibility 0s linear 0.22s;
  }
  .nav.open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.18s var(--ease), transform 0.22s var(--out), visibility 0s;
  }
  .nav-links a {
    display: block;
    padding: 14px 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:last-child { border-bottom: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: none; padding: 22px 0; border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: none; }
  .stat:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; }
  .win-body { grid-template-columns: 1fr; }
  .win-side { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); padding: 10px; }
  .win-side i { white-space: nowrap; }
  .win-grid { grid-template-columns: 1fr; }
  .panel.span { grid-column: auto; }
  .stacks, .why-grid { grid-template-columns: 1fr; }
  .escape { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .db-head { display: none; }
  .db-row { grid-template-columns: 1fr auto; row-gap: 4px; padding: 16px 18px; }
  .db-row > span:nth-child(2)::before { content: "Memory "; color: var(--faint); }
  .db-row > span:nth-child(3)::before { content: "Storage "; color: var(--faint); }
  .db-row > span:nth-child(2), .db-row > span:nth-child(3) { font-size: 13px; }
  .db-for { margin-top: 5px; max-width: none; }
  .price-card.featured { transform: none; }
  .aurora { filter: blur(56px); opacity: 0.65; }
}

@media (max-width: 600px) {
  .bento, .catalog { grid-template-columns: 1fr; }
  .card.span-2 { grid-column: auto; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .terminal pre { font-size: 12.5px; }
  .lat-row { grid-template-columns: 90px 1fr 48px; }
  .env { grid-template-columns: 1fr auto; }
  .env span:nth-child(2) { display: none; }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aurora i { transform: none; }
  html { scroll-behavior: auto; }
  /* The script does not add `.reveals` under reduced motion, so this should
     never apply. It is here because the cost of being wrong is a blank page:
     with transitions off, anything left in the hidden state stays hidden. */
  .reveals [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}
/* ------------------------------------------------- scroll choreography

   The page used to show everything at first paint and move only ambiently.
   That was a deliberate decision and it is being changed deliberately: a
   marketing page that rewards scrolling feels like a product that rewards
   using, and this is the cheapest honest way to say so.

   Two rules govern all of it.

   Nothing is hidden that cannot be brought back. The hiding state lives
   behind `.reveals`, a class a script adds to <html> before first paint, so
   a reader with no JavaScript — or one where it threw — gets the old page
   with everything visible rather than a blank column. The same is true of
   `prefers-reduced-motion`: the class is never added at all.

   Nothing animates that carries meaning on arrival. Headings, ledes and
   cards rise a little; prices, status pills and the terminal transcript do
   not move, because a number sliding into place is harder to read, not
   easier. ------------------------------------------------------------- */

.reveals [data-reveal] {
  opacity: 0;
  /* Small. A long travel reads as a slide deck; 14px reads as the page
     settling. The blur is what makes it feel like focus rather than
     position, and is the one part that is unmistakably Apple's. */
  transform: translate3d(0, 14px, 0);
  filter: blur(6px);
  transition:
    opacity 0.7s var(--out),
    transform 0.7s var(--out),
    filter 0.7s var(--out);
  /* Staggered by the script, one step per sibling, capped so a nine-card
     grid does not take three seconds to finish arriving. */
  transition-delay: var(--reveal-delay, 0ms);
}

.reveals [data-reveal].seen {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Once arrived, stop promising the compositor a layer it no longer needs. */
.reveals [data-reveal]:not(.seen) { will-change: opacity, transform, filter; }

/* --- Scroll-linked hero -----------------------------------------------
   Pure CSS, on the compositor, and entirely optional: where scroll timelines
   are unsupported — Safari and Firefox at the time of writing, which is most
   of the people this page is for — the @supports block never applies and the
   hero is simply static. It is a garnish, so it is written as one: nothing
   below depends on it having run. */
@supports (animation-timeline: view()) {
  .reveals .hero-inner {
    animation: hero-settle linear both;
    animation-timeline: view();
    /* Starts the moment the hero's top passes the viewport's top, finishes
       when it is 70% gone — so the effect is over before the next section
       arrives and never fights with that section's own reveal. */
    animation-range: exit 0% exit 70%;
  }

  .reveals .aurora i {
    animation-name: drift, aurora-lift;
    animation-timeline: auto, view();
    animation-range: normal, cover 0% cover 100%;
  }
}

@keyframes hero-settle {
  from { transform: none; opacity: 1; }
  to { transform: translate3d(0, -40px, 0) scale(0.985); opacity: 0.55; }
}

@keyframes aurora-lift {
  from { translate: 0 6%; }
  to { translate: 0 -6%; }
}

/* --- Pointer sheen -----------------------------------------------------
   A soft highlight that follows the cursor across a card. The position comes
   from two custom properties the script writes on pointermove; everything
   else is CSS, so the work per frame is one paint of one element rather than
   a layout.

   `hover: hover` and `pointer: fine` on purpose: on a touch screen there is
   no cursor to follow, the properties never update, and a highlight frozen
   in a corner looks like a rendering fault. */
@media (hover: hover) and (pointer: fine) {
  .dx-item,
  .svc,
  .price-card { position: relative; }

  .dx-item::after,
  .svc::after,
  .price-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    background: radial-gradient(
      260px circle at var(--sheen-x, 50%) var(--sheen-y, 50%),
      rgba(93, 211, 158, 0.13),
      transparent 70%
    );
  }

  .dx-item:hover::after,
  .svc:hover::after,
  .price-card:hover::after { opacity: 1; }
}