/* Combind — Lick 1M launch design system.
 *
 * Mint paper, plum ink, orange accent. No black anywhere, and exactly one
 * shadow in the whole system (the hard offset under the primary button).
 * The signature move is a small tilt-on-hover applied to interactive
 * surfaces — nav CTA, stat cards, buttons.
 *
 * Fonts are self-hosted to match the rest of the site (no CDN dependency).
 * Archivo is a variable font, so one file covers 400-800.
 */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-Variable.ttf") format("truetype-variations"),
       url("../assets/fonts/Archivo-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("../assets/fonts/DMMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("../assets/fonts/DMMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Righteous";
  src: url("../assets/fonts/Righteous-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MuseoModerno";
  src: url("../assets/fonts/MuseoModerno-Variable.ttf") format("truetype-variations"),
       url("../assets/fonts/MuseoModerno-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../assets/fonts/AlbertSans-Variable.ttf") format("truetype-variations"),
       url("../assets/fonts/AlbertSans-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --mint-paper: oklch(0.96 0.022 160);
  --mint-panel: oklch(0.99 0.008 160);
  --mint-tint: oklch(0.94 0.024 160);
  /* Ground for the bento container: a clearly-mint tint under white cards. */
  --mint-bento: oklch(0.925 0.04 160);
  --plum: oklch(0.42 0.15 305);
  /* Shadow-only tone. Deeper than --plum so a plum surface can cast a
     shadow that still reads, without pulling the orange accent into a
     structural role. */
  --plum-deep: oklch(0.30 0.13 305);
  --plum-52: oklch(0.52 0.09 305);
  --plum-58: oklch(0.58 0.07 305);
  --plum-63: oklch(0.63 0.07 305);
  /* Lighter same-hue tone for the sheer face in the Half Dome mark. */
  --plum-face: oklch(0.76 0.07 305);
  --plum-85: oklch(0.85 0.05 315);
  --plum-62: oklch(0.62 0.09 315);
  --divider: oklch(0.9 0.03 305);
  --bar-track: oklch(0.93 0.026 305);
  --bar-baseline: oklch(0.8 0.06 305);
  --orange: oklch(0.76 0.17 60);
  --link-hover: oklch(0.62 0.19 30);
  /* status page: the good colour, a real mint green */
  --mint-good: oklch(0.72 0.15 160);
  --mint-good-deep: oklch(0.55 0.14 160);

  --font-ui: "Archivo", Helvetica, Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* The nav is sticky, so anchor jumps land under it unless targets keep
   clear of it. Roughly the pill's height plus a breath. */
.hero,
.fire-stage,
.section,
.bento,
.waitlist,
.facts {
  scroll-margin-top: 112px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--mint-paper);
  color: var(--plum);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--plum);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  overflow-x: clip;
}

/* ---------- Nav ---------- */

/* The bar sticks to the top. At rest it sits flat on the paper; once the
   page scrolls under it, it becomes a frosted pill with the system's
   border and hard shadow, so it reads as an object floating over content. */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 12px 0;
}

/* Same width as .shell but no overflow clipping, so the dropdown panels
   can hang below the bar. (.shell clips on x, and some engines clip both
   axes once one is set, which would swallow the panels.) */
.nav-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 900px) {
  .nav-shell {
    padding: 0 20px;
  }
}

/* Brand, then the menu left-aligned beside it, CTA pushed right. */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 20px;
  margin: 0 -10px 0 -20px;
  border: 2px solid transparent;
  border-radius: 999px;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.nav-wrap.is-stuck .nav {
  background: color-mix(in oklch, var(--mint-paper) 84%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: var(--plum);
  box-shadow: 4px 4px 0 var(--plum);
}

/* Hamburger: three plum bars, shown only where the menu collapses. */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  margin-left: 4px;
  background: none;
  border: 2px solid var(--plum);
  border-radius: 999px;
  cursor: pointer;
}

.nav-burger i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--plum);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav.is-menu-open .nav-burger i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.is-menu-open .nav-burger i:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav-burger i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-brand {
  display: flex;
  align-items: center;
  margin-right: 22px;
}

.nav-brand:hover {
  color: var(--plum);
}

/* Wordmark: a Righteous c, then "ombinb" in MuseoModerno 900 with the last
   b mirrored so it reads as a d — the mirrored bowl is the tell. Righteous
   has one weight, so the c is stroked to sit at Museo's 900. */
.nav-word {
  font-family: "MuseoModerno", var(--font-ui);
  font-size: 30px;
  font-weight: 900;
  /* Museo 900 sets m and b touching; a hair of tracking opens the pair. */
  letter-spacing: 0.025em;
  line-height: 1;
}

.nav-word .c {
  font-family: "Righteous", var(--font-ui);
  font-weight: 400;
  -webkit-text-stroke: 0.05em var(--plum);
  paint-order: stroke fill;
}

/* The DOM says "d" so copy, search and screen readers get "combind"; the
   eye gets a mirrored b drawn by the pseudo-element. */
.nav-word .flip {
  display: inline-block;
  font-size: 0;
  letter-spacing: 0;
  margin-left: -0.0465em;
}

.nav-word .flip::after {
  content: "b";
  display: inline-block;
  font-size: 30px;
  transform: scaleX(-1);
}

.foot-word .flip::after {
  font-size: 24px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: auto;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--plum);
  background: none;
  border: 0;
  padding: 9px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease;
}

.nav-link:hover,
.nav-item.is-open > .nav-link {
  background: var(--mint-tint);
  color: var(--plum);
}

.chev {
  width: 11px;
  height: 11px;
  transition: transform 0.18s ease;
}

.nav-item.is-open .chev {
  transform: rotate(180deg);
}

/* Dropdown: a panel hung under the trigger, holding tiles. A featured
   tile carries the brand colour and its art in the lower half; the rest
   are flat tiles with an arrow. Same border/shadow family as every other
   surface. */
.nav-card {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  padding: 10px;
  background: var(--mint-panel);
  border: 2px solid var(--plum);
  border-radius: 22px;
  box-shadow: 4px 4px 0 var(--plum);
  gap: 10px;
}

/* Invisible bridge over the gap between the trigger and the panel, so the
   pointer never leaves the hover zone on its way down to the tiles. */
.nav-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.nav-item.is-open .nav-card {
  display: grid;
}

@media (hover: hover) {
  .nav-item:hover .nav-card {
    display: grid;
  }
}

.nav-card-products {
  grid-template-columns: 300px 220px;
}

.nav-card-solutions {
  grid-template-columns: 260px 220px;
}

.nav-card-discover {
  grid-template-columns: repeat(2, 210px);
}

.tile-stack {
  display: grid;
  gap: 10px;
}

/* Title top-left, description, art in the lower section, arrow pinned to
   the corner. Text sits at the top; the art takes the room beneath. */
.nav-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  padding: 16px 16px 14px;
  border-radius: 14px;
  background: var(--mint-tint);
  color: var(--plum);
  transition: background 0.14s ease, transform 0.14s ease;
}

.nav-tile:hover {
  background: var(--plum-85);
  color: var(--plum);
  transform: translate(-1px, -1px);
}

.nav-tile b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.nav-tile small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--plum-52);
  max-width: 24ch;
}

.tile-art {
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
  padding-top: 18px;
}

.tile-art-sm {
  width: 44px;
  height: 44px;
  padding-top: 0;
  margin-top: auto;
}

.tile-arrow {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 15px;
}

.nav-tile.is-featured {
  min-height: 300px;
  background: var(--plum);
  color: var(--mint-paper);
}

.nav-tile.is-featured:hover {
  background: var(--plum-deep);
  color: var(--mint-paper);
}

.nav-tile.is-featured small {
  color: var(--plum-85);
}

.nav-tile.is-featured .tile-art {
  padding-top: 26px;
}

.nav-tile.is-light {
  background: var(--mint-panel);
  border: 1.5px solid var(--divider);
  min-height: 300px;
}

.nav-tile.is-light .tile-art-sm {
  width: 64px;
  height: 64px;
}

/* A menu item we don't serve yet: greyed, no pointer, tagged. */
.nav-link.is-muted,
.nav-link.is-muted:hover {
  color: var(--plum-63);
  background: none;
  cursor: default;
}

.soon {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plum);
  background: var(--orange);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 2px;
}

/* Mailing-list block on interior pages: the closer's form on paper. */
.mail {
  margin-top: 40px;
  padding: 26px 26px 22px;
  border: 2px solid var(--plum);
  border-radius: 22px;
  background: var(--mint-panel);
}

.mail-body {
  margin: 0;
  font-size: 17px;
  color: var(--plum-52);
}

.mail .waitlist-form {
  margin-top: 18px;
}

.mail .waitlist-input {
  color: var(--plum);
  border-color: var(--plum);
}

.mail .waitlist-input::placeholder {
  color: var(--plum-58);
}

.mail .waitlist-submit {
  box-shadow: 4px 4px 0 var(--plum);
}

.mail .waitlist-submit:hover {
  box-shadow: 1px 1px 0 var(--plum);
}

.mail .waitlist-msg {
  color: var(--plum-58);
}

.mail .waitlist-msg.is-error {
  color: var(--link-hover);
}

/* Presses into its shadow and swaps to orange as it goes. The shadow stays
   plum in both states so the colour change reads as the button lighting
   up, not as two things moving at once. */
.nav-cta {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  background: var(--plum);
  color: var(--mint-paper);
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--plum-deep);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease;
}

.nav-cta:hover {
  transform: translate(2px, 2px);
  background: var(--orange);
  color: var(--plum);
  box-shadow: 1px 1px 0 var(--plum-deep);
}

/* ---------- Hero ---------- */

/* Two columns, with the art in its own fixed 320px track so it can never
   overlap the headline no matter how the H1 reflows. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
  padding: 64px 0 40px;
}

/* The flowers fill the row the copy sets: the SVG is bottom-anchored and
   scales to fit, so the stems reach the height of the headline block. */
.hero-art {
  align-self: stretch;
  min-height: 0;
}

.hero-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--mint-tint);
  border: 1.5px solid var(--plum);
  border-radius: 999px;
  padding: 7px 14px;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

.hero h1 {
  margin: 22px 0 0;
  font-size: clamp(56px, 11.2vw, 172px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-weight: 800;
  max-width: 15ch;
  text-wrap: balance;
}

/* The comma lives inside this span so it can never wrap onto its own line. */
.hero h1 .mark {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.02em;
  text-decoration-skip-ink: none;
}

.hero-body {
  margin: 26px 0 0;
  font-size: 21px;
  line-height: 1.45;
  max-width: 46ch;
  color: var(--plum-52);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */

.btn-primary {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  background: var(--orange);
  color: var(--plum);
  border: 2px solid var(--plum);
  padding: 16px 30px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--plum);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Presses into its own shadow. */
.btn-primary:hover {
  color: var(--plum);
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--plum);
}

.btn-quiet {
  font-family: var(--font-mono);
  font-size: 15px;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}

/* ---------- Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 56px 0 24px;
}

/* Same press as the primary button, but the shadow stays in the plum
   family — orange at this size competes with the orange stat numbers and
   reads as flare rather than depth. */
.stat {
  background: var(--plum);
  color: var(--mint-paper);
  border-radius: 22px;
  padding: 28px 26px 24px;
  box-shadow: 5px 5px 0 var(--plum-deep);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stat:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--plum-deep);
}

.stat-num {
  display: block;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--orange);
  line-height: 1;
}

.stat-label {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  opacity: 0.78;
}

/* ---------- Facts (replaces the stat tiles) ---------- */

/* Three short claims with the number as the accent word. A rule above each
   instead of a box, so the firehose stays the only dark slab on screen. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 56px 0 24px;
}

.fact {
  padding: 0 4px;
}

.fact-k {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--plum-58);
}

.fact-h {
  margin: 10px 0 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--plum);
  text-wrap: balance;
}

.fact-h b {
  color: var(--orange);
}

/* ---------- Ticker ---------- */

/* Sits inside the shell as a pill, so it respects the page margins like
   every other surface. */
.ticker {
  margin: 8px 0 0;
  background: var(--orange);
  border: 2px solid var(--plum);
  border-radius: 999px;
  padding: 13px 0;
  overflow: hidden;
}

.ticker-row {
  display: flex;
  width: max-content;
  animation: ticker-scroll 34s linear infinite;
}

/* The row's contents are duplicated in the markup, so -50% lands exactly
   on the start of the second copy — a seamless loop. */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker-item {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--plum);
  padding: 0 18px;
  white-space: nowrap;
}

/* ---------- Benchmarks ---------- */

.bench {
  padding: 96px 0 40px;
}

.bench-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 34px;
}

.section-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--plum-58);
}

.bench h2,
.waitlist h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.bench h2 {
  font-size: clamp(40px, 6vw, 84px);
  max-width: 20ch;
}

.bench-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  max-width: 30ch;
  text-align: right;
  color: var(--plum-58);
}

.bench-card {
  border: 2px solid var(--plum);
  border-radius: 26px;
  background: var(--mint-panel);
  overflow: hidden;
}

.bench-row {
  display: grid;
  grid-template-columns: 240px 1fr 130px;
  gap: 24px;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1.5px solid var(--divider);
  transition: background 0.16s ease;
}

.bench-row:hover {
  background: var(--mint-tint);
}

.bench-name {
  font-size: 17px;
  font-weight: 700;
}

.bench-sub {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--plum-58);
}

.bench-track {
  height: 22px;
  border-radius: 999px;
  background: var(--bar-track);
  overflow: hidden;
}

.bench-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--bar-baseline);
  transform: scaleX(0);
  transform-origin: left;
}

.bench-fill.is-accent {
  background: var(--orange);
}

/* Added by JS on scroll-into-view so the bars grow when the table is
   actually looked at, not while it's still below the fold. */
.bench-fill.is-grown {
  transform: scaleX(1);
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bench-value {
  font-family: var(--font-mono);
  font-size: 16px;
  text-align: right;
}

.bench-legend {
  display: flex;
  gap: 20px;
  padding: 16px 28px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--plum-58);
}

.bench-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bench-legend span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bar-baseline);
}

.bench-legend .is-accent::before {
  background: var(--orange);
}

/* ---------- Plaque (est. 1983) ---------- */

/* A short band ahead of the closer, three lines set like a plaque. Orange
   with plum ink so it reads as a plate, not a second closer, against the
   plum panel that follows. */
.plaque {
  background: var(--orange);
  color: var(--plum);
  border: 2px solid var(--plum);
  border-radius: 34px;
  padding: 52px 56px 50px;
  margin: 72px 0 18px;
  display: grid;
  gap: 14px;
  box-shadow: 6px 6px 0 var(--plum);
}

.plaque-line {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  max-width: 30ch;
  text-wrap: balance;
}

.plaque-lead {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: none;
}

.plaque-free {
  font-weight: 500;
  color: var(--plum-deep);
}

/* ---------- Closer stage (JOIN) ---------- */

.go-line {
  margin: 96px 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plum-58);
}

.go-stage {
  margin-top: 18px;
}

.waitlist.go-close {
  position: relative;
  z-index: 1;
  margin-top: -13vw;
}

@media (max-width: 900px) {
  .go-line {
    margin-top: 64px;
  }

  .waitlist.go-close {
    margin-top: -9vw;
  }
}

/* Closer actions: the dig line as the first step, a mail link as the second. */
.closer-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.closer-cmd {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--mint-paper);
  background: var(--plum-deep);
  border: 2px solid var(--plum-62);
  border-radius: 999px;
  padding: 11px 12px 11px 20px;
}

.copy.is-dark {
  color: var(--mint-paper);
  background: transparent;
  border-color: var(--plum-62);
}

.copy.is-dark:hover,
.copy.is-dark.is-done {
  color: var(--plum);
  background: var(--orange);
  border-color: var(--orange);
}

.closer-mail {
  display: inline-block;
  text-decoration: none;
}

@media (max-width: 900px) {
  .closer-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .closer-cmd {
    justify-content: space-between;
    font-size: 13.5px;
  }

  .closer-mail {
    text-align: center;
  }
}

/* The closer's escape hatch: the one line that proves there is no signup. */
.waitlist-skip {
  margin: 22px 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--plum-85);
  max-width: 60ch;
}

.waitlist-skip code {
  color: var(--orange);
}

/* ---------- Waitlist ---------- */

.waitlist {
  position: relative;
  background: var(--plum);
  color: var(--mint-paper);
  border-radius: 34px;
  padding: 84px 56px;
  overflow: hidden;
  margin-bottom: 96px;
}

/* Decorative ring, deliberately clipped by the panel's rounded corner. */
.waitlist::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -110px;
  width: 340px;
  height: 340px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  pointer-events: none;
}

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

.waitlist h2 {
  font-size: clamp(40px, 6vw, 78px);
  max-width: 22ch;
}

.waitlist-body {
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.5;
  max-width: 40ch;
  color: var(--plum-85);
}

.waitlist-form {
  display: flex;
  gap: 12px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.waitlist-input {
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 15px 20px;
  border-radius: 999px;
  border: 2px solid var(--plum-62);
  background: transparent;
  color: var(--mint-paper);
  min-width: 280px;
  flex: 1 1 280px;
  max-width: 420px;
}

.waitlist-input::placeholder {
  color: var(--plum-85);
  opacity: 0.7;
}

.waitlist-input:focus {
  outline: none;
  border-color: var(--orange);
}

/* Shadow goes darker than the plum panel it sits on — same rule as the
   rest of the page. Plain --plum would vanish against the panel, so this
   uses the deeper shadow tone. */
.waitlist-submit {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  background: var(--orange);
  color: var(--plum);
  border: none;
  padding: 15px 30px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--plum-deep);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.waitlist-submit:hover {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--plum-deep);
}

.waitlist-submit[disabled] {
  opacity: 0.65;
  cursor: default;
  transform: none;
  box-shadow: 4px 4px 0 var(--plum-deep);
}

.waitlist-msg {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  min-height: 1.2em;
  color: var(--plum-85);
}

.waitlist-msg.is-error {
  color: var(--orange);
}

/* ---------- Footer ---------- */

/* Columns mirror the nav groups; a hairline splits sub-groups; a thin
   base row carries the wordmark, tagline and legal line. */
.site-foot {
  margin-top: 40px;
  padding: 56px 0 40px;
}

.foot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.foot-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--plum-58);
}

.foot-col a,
.foot-col .is-muted {
  font-size: 15px;
  font-weight: 500;
  color: var(--plum);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.foot-col a:hover {
  color: var(--link-hover);
}

.foot-col .is-muted {
  color: var(--plum-63);
  cursor: default;
}

.foot-col hr {
  width: 100%;
  max-width: 180px;
  border: 0;
  border-top: 1.5px solid var(--divider);
  margin: 6px 0;
}

.ext {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--plum-58);
}

.foot-code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--plum);
  background: var(--mint-tint);
  border: 1.5px solid var(--plum);
  border-radius: 8px;
  padding: 6px 10px;
}

.foot-note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--plum-58);
}

.foot-base {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--plum-58);
}

.foot-base p {
  margin: 0;
}

.foot-word {
  font-size: 24px;
  color: var(--plum);
}

.foot-base .foot-legal {
  margin-left: auto;
  display: flex;
  gap: 18px;
  align-items: center;
}

.foot-legal a {
  color: var(--plum-58);
}

.foot-legal a:hover {
  color: var(--link-hover);
}

/* ---------- Interior pages (about / docs / news) ---------- */

.page-head {
  padding: 56px 0 8px;
}

.page-head h1 {
  margin: 14px 0 0;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 800;
  max-width: 18ch;
  text-wrap: balance;
}

.prose {
  max-width: 62ch;
  padding: 8px 0 96px;
}

.prose-lede {
  margin: 24px 0 0;
  font-size: 21px;
  line-height: 1.5;
  color: var(--plum-52);
}

.prose h2 {
  margin: 52px 0 0;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 800;
  max-width: 24ch;
  text-wrap: balance;
}

.prose p {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--plum-52);
}

.prose-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--plum-58);
}

/* Pull quote: the name story, set apart with a rule and more air. */
.prose-pull {
  margin: 44px 0 0;
  padding: 18px 0 18px 22px;
  border-left: 3px solid var(--orange);
  font-size: 15px;
  color: var(--plum);
}

/* The About page's whole statement, in the pull-quote voice at reading size. */
.page-head h1.about-pull {
  margin: 28px 0 0;
  max-width: 34ch;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-wrap: pretty;
}

.prose a {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .shell {
    padding: 0 20px;
  }

  /* Art drops away entirely rather than squeezing — the headline is the
     point at this width. */
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 40px 0 32px;
  }

  .hero-art {
    display: none;
  }

  .hero h1 {
    max-width: 100%;
  }

  .stats {
    grid-template-columns: 1fr;
    padding: 40px 0 24px;
  }

  /* Stacked, the three claims turn into three more headlines. At this
     width they become a spec list: label left, claim right, hairlines. */
  .facts {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 36px 0 12px;
    border-top: 1.5px solid var(--divider);
  }

  .fact {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
    padding: 14px 4px;
    border-bottom: 1.5px solid var(--divider);
  }

  .fact-k {
    font-size: 11px;
  }

  .fact-h {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-wrap: pretty;
  }

  .fact-h b {
    font-weight: 800;
  }

  .bench {
    padding: 64px 0 32px;
  }

  .bench-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }

  .bench-note {
    text-align: left;
  }

  /* Name over bar over value, so nothing gets crushed to a sliver. */
  .bench-row {
    grid-template-columns: minmax(0, 1fr) 90px;
    gap: 12px 16px;
    padding: 18px 20px;
  }

  .bench-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .waitlist {
    padding: 56px 24px;
    border-radius: 26px;
  }

  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
  }

  .foot-base {
    margin-top: 40px;
  }

  .foot-base .foot-legal {
    margin-left: 0;
  }

  .plaque {
    padding: 36px 24px 34px;
    border-radius: 26px;
    margin-top: 48px;
  }

  /* At this width the panel is narrow enough that the full-size ring lands
     behind the form instead of tucking into the corner — shrink it and push
     it further out so it stays a corner accent. */
  .waitlist::after {
    width: 200px;
    height: 200px;
    right: -70px;
    bottom: -70px;
  }

  .waitlist-form {
    flex-direction: column;
    align-items: stretch;
  }

  /* Main axis is vertical here, so the desktop `flex: 1 1 280px` would make
     the input 280px *tall*. Reset it and let width do the work instead. */
  .waitlist-input {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .nav {
    padding: 8px 8px 8px 16px;
    margin: 0 -8px 0 -16px;
  }

  .nav-brand {
    margin-right: auto;
  }

  .nav-cta {
    font-size: 13px;
    padding: 10px 14px;
  }

  .nav-burger {
    display: flex;
  }

  /* One card holds every group: the trigger buttons become headings and
     the dropdown cards flatten into plain lists beneath them. */
  .nav-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 12px;
    background: var(--mint-panel);
    border: 2px solid var(--plum);
    border-radius: 22px;
    box-shadow: 4px 4px 0 var(--plum);
  }

  .nav.is-menu-open .nav-menu {
    display: flex;
  }

  .nav-link.is-muted {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
  }

  .nav-item .nav-link,
  .nav-menu > .nav-link {
    width: 100%;
    font-size: 17px;
    font-weight: 700;
    padding: 12px 12px 6px;
    background: none;
    cursor: default;
  }

  .chev {
    display: none;
  }

  .nav-card,
  .nav-item.is-open .nav-card {
    display: block;
    position: static;
    padding: 0 4px 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .tile-stack {
    display: contents;
  }

  .nav-tile,
  .nav-tile.is-featured,
  .nav-tile.is-light {
    min-height: 0;
    padding: 8px 8px;
    background: transparent;
    border: 0;
    color: var(--plum);
  }

  .nav-tile.is-featured small {
    color: var(--plum-52);
  }

  .nav-tile small {
    max-width: none;
  }

  .tile-art,
  .tile-arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-row {
    animation: none;
    /* Without the marquee the duplicated copy would just sit there, so
       pull the row back to a normal centered line of text. */
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .bench-fill.is-grown {
    transition: none;
  }

  /* Drop the positional shift but keep the shadow collapsing, so hover is
     still legible without anything sliding across the screen. */
  .nav-cta:hover,
  .stat:hover,
  .btn-primary:hover,
  .waitlist-submit:hover {
    transform: none;
  }
}

/* ======================================================================
   sms board — the message-bus launch page. Same system: mint paper, plum
   ink, orange accent, hard offset shadows, tilt-on-hover. New surfaces
   are the grammar card (a bench-card sibling), the firehose terminal (the
   one plum panel that carries running text) and the feature grid.
   ====================================================================== */

/* Generic section chrome — the benchmarks section written once so the
   other numbered sections can reuse it. */
.section {
  padding: 96px 0 24px;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 34px;
}

.section h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-size: clamp(40px, 6vw, 84px);
  max-width: 20ch;
}

.section-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  max-width: 34ch;
  text-align: right;
  color: var(--plum-58);
}

/* ---------- Grammar card ---------- */

.grammar-card {
  border: 2px solid var(--plum);
  border-radius: 26px;
  background: var(--mint-panel);
  overflow: hidden;
}

.grammar-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 72px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1.5px solid var(--divider);
  transition: background 0.16s ease;
}

.grammar-row:hover {
  background: var(--mint-tint);
}

.q {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--plum-58);
}

.q-word {
  color: var(--plum);
  font-weight: 500;
}

/* Tags carry the accent everywhere they appear: here, in the firehose,
   and in the chips. */
.q-tag {
  color: var(--plum);
  font-weight: 500;
  background: var(--orange);
  border-radius: 6px;
  padding: 1px 5px;
  white-space: nowrap;
}

.q-zone {
  color: var(--plum-63);
}

.grammar-verb {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  border: 1.5px solid var(--plum);
  border-radius: 999px;
  padding: 5px 0;
}

.grammar-verb.is-post {
  background: var(--plum);
  color: var(--mint-paper);
}

.grammar-meaning {
  font-size: 16px;
  line-height: 1.45;
  color: var(--plum-52);
}

.grammar-meaning b {
  color: var(--plum);
  font-weight: 700;
}

.grammar-legend {
  display: flex;
  gap: 20px;
  padding: 16px 28px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--plum-58);
}

.grammar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.grammar-legend span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--plum);
  flex: none;
}

.grammar-legend .is-post::before {
  background: var(--plum);
}

/* ---------- Spec sheet (replaces the grammar card) ---------- */

/* The name is the headline, set large in mono; the verb sits in the left
   margin; the meaning is a caption. Hairlines between, a rule on top. */
.spec-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1.5px solid var(--divider);
  align-items: start;
}

.spec-row:first-child {
  border-top: 2px solid var(--plum);
}

.spec-v {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--plum-58);
  padding-top: 8px;
}

.spec-v.is-post {
  color: var(--orange);
}

.spec-name {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.spec-name .q-tag {
  font-size: 0.85em;
  vertical-align: 0.05em;
}

.spec-m {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--plum-52);
  max-width: 60ch;
}

.spec-m b {
  color: var(--plum);
  font-weight: 700;
}

/* ---------- Chips (tag picker) ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.chip {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--plum);
  background: var(--mint-tint);
  border: 1.5px solid var(--plum);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.chip:hover {
  transform: translate(1px, 1px);
}

.chip.is-on {
  background: var(--orange);
  box-shadow: 3px 3px 0 var(--plum);
}

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

.fire {
  background: var(--plum);
  color: var(--mint-paper);
  border-radius: 26px;
  padding: 22px 28px 24px;
  box-shadow: 6px 6px 0 var(--plum-deep);
  overflow: hidden;
}

.fire-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--plum-62);
}

.fire-dots {
  display: inline-flex;
  gap: 6px;
  flex: none;
}

.fire-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--plum-62);
}

.fire-dots i:first-child {
  background: var(--orange);
}

.fire-cmd {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--plum-85);
  margin-right: auto;
  overflow-wrap: anywhere;
}

.fire-cmd span {
  color: var(--mint-paper);
}

.fire-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plum-85);
  flex: none;
}

.fire-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  animation: fire-pulse 1.6s ease-in-out infinite;
}

@keyframes fire-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Fixed height: new posts push old ones out the bottom instead of growing
   the panel, so the card never jumps as the feed moves. */
.fire-lines {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
  height: 24em;
  overflow: hidden;
  /* Fade the last line out so a row cut by the fixed height never shows
     as a half-line. */
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
}

.fire-line {
  display: grid;
  grid-template-columns: 9ch minmax(0, 1fr);
  gap: 24px;
  padding: 3px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fire-line.is-new {
  animation: fire-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fire-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.fire-ago {
  color: var(--plum-85);
  opacity: 0.85;
  white-space: nowrap;
}

.fire-tag {
  color: var(--orange);
}

.fire-empty {
  color: var(--plum-85);
}

.fire-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1.5px solid var(--plum-62);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--plum-85);
  max-width: 78ch;
}

/* ---------- Feature grid ---------- */

.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Title top-left, text, then the glyph parked at the bottom with room
   around it. Text takes the slack so the art sits on one baseline across
   a row. */
.feat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  border: 2px solid var(--plum);
  border-radius: 24px;
  background: var(--mint-panel);
  padding: 30px 28px 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.16s ease;
}

.feat p {
  flex: 1;
}

.feat-art {
  display: block;
  width: 84px;
  height: 84px;
  margin-top: 32px;
}

.feat:hover {
  background: var(--mint-tint);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--plum);
}

.feat-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--plum-58);
}

.feat h3 {
  margin: 14px 0 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.feat p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--plum-52);
}

/* ---------- Bento (03 — why DNS) ---------- */

/* The bento: a soft plum-tinted container holding white cards. The
   section title is the first cell. */
.bento { margin: 80px 0 8px; padding: 22px; background: var(--mint-bento); border-radius: 34px; }
.bento-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bento-title { padding: 26px 24px 18px; align-self: end; }
.bento-title h2 { margin: 0; font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; }
.bento-title .mark { color: var(--orange); }
.bento-sub { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--plum-52); max-width: 32ch; }
.bento-card { display: flex; flex-direction: column; min-height: 300px; padding: 26px 24px 24px; background: var(--mint-panel); border: 1.5px solid var(--divider); border-radius: 22px; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.bento-card:hover { border-color: var(--plum); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--plum); }
.bento-card.is-wide { grid-column: span 3; flex-direction: row; align-items: flex-end; gap: 28px; }
.bento-card.is-wide > .bento-art, .bento-card.is-wide > h3, .bento-card.is-wide > p { flex: none; }
.bento-card.is-wide .bento-mini { margin-left: auto; }
.bento-art { width: 96px; height: 96px; margin: 0 0 auto; }
.bento-card h3 { margin: 28px 0 0; font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.01em; }
.bento-card p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--plum-52); }
/* wide card: text block then a mini firehose */
.bento-card.is-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); grid-template-rows: 1fr auto auto; column-gap: 28px; row-gap: 0; }
.bento-card.is-wide .bento-art { grid-column: 1; grid-row: 1; align-self: start; }
.bento-card.is-wide h3 { grid-column: 1; grid-row: 2; }
.bento-card.is-wide p { grid-column: 1; grid-row: 3; }
.bento-mini { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 20px; background: var(--plum); color: var(--mint-paper); border-radius: 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; }
.bento-mini span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bento-mini i { font-style: normal; color: var(--plum-85); margin-right: 8px; }
.bento-mini b { font-weight: 400; color: var(--orange); }
@media (max-width: 900px) {
  .bento { margin-top: 56px; padding: 12px; border-radius: 26px; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card, .bento-card.is-wide { grid-column: span 1; min-height: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; padding: 20px; }
  .bento-art, .bento-card.is-wide .bento-art { width: 64px; height: 64px; grid-row: 1 / span 2; margin: 0; }
  .bento-card h3, .bento-card.is-wide h3 { grid-column: 2; grid-row: 1; margin: 2px 0 0; }
  .bento-card p, .bento-card.is-wide p { grid-column: 2; grid-row: 2; }
  .bento-mini { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; }
}

/* ---------- Quickstart ---------- */

.quick {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.code-stack {
  display: grid;
  gap: 14px;
}

.code {
  border: 2px solid var(--plum);
  border-radius: 18px;
  background: var(--mint-panel);
  overflow: hidden;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1.5px solid var(--divider);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--plum-58);
}

.copy {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--plum);
  background: var(--mint-tint);
  border: 1.5px solid var(--plum);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}

.copy:hover {
  background: var(--orange);
  transform: translate(1px, 1px);
}

.copy.is-done {
  background: var(--orange);
}

.code pre {
  margin: 0;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.55;
  overflow-x: auto;
  color: var(--plum);
}

/* On desktop the rules ride along as the code stack scrolls past, held
   just under the sticky nav, and stop at the bottom of the section. The
   grid row is as tall as the code stack, so sticky has that room to move. */
@media (min-width: 901px) {
  .rules {
    position: sticky;
    top: 104px;
  }
}

.rules {
  border: 2px solid var(--plum);
  border-radius: 22px;
  background: var(--orange);
  padding: 24px 26px 26px;
  box-shadow: 6px 6px 0 var(--plum);
}

.rules .section-eyebrow {
  color: var(--plum);
}

.rules ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.rules li {
  font-size: 15.5px;
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}

.rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--plum);
}

.rules b {
  font-weight: 700;
}

/* ---------- Hero D: quiet headline, full-bleed SMS, firehose riding over it ---------- */
.sms-word { display: block; width: 100%; height: auto; }
.sms-word text { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.06em; fill: var(--orange); stroke: var(--plum); stroke-width: 5; paint-order: stroke fill; stroke-linejoin: round; }
.hero-quiet { display: block; padding: 56px 0 8px; }
.hero-quiet h1 { font-size: clamp(44px, 6.8vw, 100px); line-height: 0.92; max-width: 18ch; }
.hero-quiet .hero-body { max-width: 60ch; }
.hero-quiet .hero-actions { margin-top: 32px; }
.sms-stage { margin-top: 56px; overflow: hidden; }
.sms-word-stage { width: 100vw; }
/* The hero word as artwork: full viewport width, height follows the image
   (1584x672), so the card below overlaps its lower third. */
.sms-image { display: block; width: 100vw; height: auto; }
/* Pull the card up over the lower third of the letters. The letters are
   ~33.7vw tall (1104:372), so -13vw lands the card across their baseline. */
.fire-stage { position: relative; z-index: 1; margin-top: -13vw; }
.fire-stage .chips { justify-content: flex-start; }
.fire-stage .chip { background: var(--mint-panel); }
.fire-stage .chip.is-on { background: var(--orange); }
.fire-stage + .stats, .fire-stage + .facts { padding-top: 48px; }
@media (max-width: 900px) {
  .hero-quiet { padding-top: 40px; }
  .sms-stage { margin-top: 36px; }
  .fire-stage { margin-top: -9vw; }
}

/* ---------- Responsive (sms) ---------- */

@media (max-width: 900px) {
  .section {
    padding: 64px 0 24px;
  }

  .section-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }

  .section-note {
    text-align: left;
  }

  .spec-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 18px 0;
  }

  .spec-v {
    padding-top: 0;
  }

  .grammar-row {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px 16px;
    padding: 18px 20px;
  }

  .grammar-row .q {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .fire {
    padding: 18px 18px 20px;
    border-radius: 20px;
  }

  .fire-head {
    flex-wrap: wrap;
    gap: 12px;
  }

  .fire-lines {
    font-size: 13.5px;
    height: 30em;
  }

  .fire-line {
    grid-template-columns: 9ch minmax(0, 1fr);
    gap: 16px;
  }

  .feat-grid,
  .quick {
    grid-template-columns: 1fr;
  }

  /* The six cards become a list: glyph on the left like a row icon,
     title and text to the right, hairline dividers between rows. */
  .feat-grid {
    gap: 0;
    border-top: 1.5px solid var(--divider);
  }

  .feat {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 18px;
    align-items: start;
    min-height: 0;
    padding: 22px 4px;
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid var(--divider);
    border-radius: 0;
  }

  .feat:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
  }

  .feat-num {
    display: none;
  }

  .feat-art {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 60px;
    height: 60px;
    margin: 0;
  }

  .feat h3 {
    grid-column: 2;
    margin: 4px 0 0;
    font-size: 24px;
  }

  .feat p {
    grid-column: 2;
    margin-top: 6px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fire-live i {
    animation: none;
  }

  .fire-line.is-new {
    animation: none;
  }

  .chip:hover,
  .copy:hover,
  .feat:hover {
    transform: none;
  }
}

/* ---------- Status page ---------- */

.st-page .page-head {
  padding-bottom: 28px;
}

/* Verdict: a plum screen with a dot that carries the state. */
.st-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px 30px;
  color: var(--plum);
  background: var(--mint-tint);
  border: 2px solid var(--plum);
  border-radius: 26px;
  box-shadow: 6px 6px 0 var(--plum);
}

.st-verdict {
  display: flex;
  align-items: center;
  gap: 18px;
}

.st-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--plum-62);
  flex: none;
  box-shadow: 0 0 0 5px oklch(0.62 0.09 315 / 0.35);
}

.st-banner[data-state="ok"] .st-dot { background: var(--mint-good); box-shadow: 0 0 0 5px oklch(0.72 0.15 160 / 0.3); }
.st-banner[data-state="degraded"] .st-dot { background: var(--orange); box-shadow: 0 0 0 5px oklch(0.76 0.17 60 / 0.3); }
.st-banner[data-state="down"] .st-dot { background: var(--link-hover); box-shadow: 0 0 0 5px oklch(0.62 0.19 30 / 0.3); }
.st-banner[data-state="unknown"] .st-dot { background: var(--plum-85); }

.st-title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.st-sub {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--plum-52);
}

.st-dig {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--plum);
  background: var(--orange);
  border: 2px solid var(--plum);
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: 3px 3px 0 var(--plum);
}

.st-meta {
  margin: 16px 4px 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--plum-58);
}

/* Components: a paper card, one row per check, 90 ticks each. */
.st-card {
  margin-top: 36px;
  padding: 22px 28px 10px;
  border: 2px solid var(--plum);
  border-radius: 26px;
  background: var(--mint-panel);
}

.st-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.st-head .section-eyebrow {
  margin: 0;
}

.st-legend {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--plum-58);
}

.st-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.st-legend span::before {
  content: "";
  width: 6px;
  height: 12px;
  border-radius: 2px;
  background: var(--mint-good);
}

.st-legend .is-degraded::before { background: var(--orange); }
.st-legend .is-down::before { background: var(--link-hover); }

.st-comp {
  padding: 22px 0 18px;
  border-top: 1.5px solid var(--divider);
}

.st-comp:first-child {
  border-top: 0;
  margin-top: 10px;
}

.st-comp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.st-name {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
}

.st-desc {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--plum-58);
}

.st-right {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.st-state.is-operational { color: var(--mint-good-deep); }
.st-state.is-degraded { color: var(--orange); }
.st-state.is-down { color: var(--link-hover); }
.st-state.is-unknown { color: var(--plum-58); }

.st-lat {
  color: var(--plum-58);
  font-variant-numeric: tabular-nums;
}

.st-ticks {
  display: flex;
  gap: 3px;
  margin-top: 14px;
  height: 30px;
}

.st-tick {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
  background: var(--mint-good);
}

.st-tick.is-degraded { background: var(--orange); }
.st-tick.is-down { background: var(--link-hover); }
.st-tick.is-none { background: var(--bar-track); }

.st-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--plum-58);
}

.st-up {
  color: var(--plum);
  background: var(--mint-tint);
  border-radius: 999px;
  padding: 2px 10px;
}

/* Incidents */
.st-incidents {
  margin-top: 56px;
}

.st-inc {
  padding: 22px 0 8px;
  border-top: 1.5px solid var(--divider);
  max-width: 72ch;
}

.st-inc h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.st-inc h3::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

.st-inc.is-major h3::before { background: var(--link-hover); }

.st-inc-meta {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--plum-58);
}

.st-update {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 4px 14px;
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--plum-52);
}

.st-update b {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plum);
  padding-top: 4px;
}

.st-update small {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--plum-58);
}

.st-none {
  font-size: 16px;
  color: var(--plum-52);
}

.st-how {
  margin: 48px 0 96px;
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--plum-52);
}

.st-how code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--plum);
}

@media (max-width: 900px) {
  .st-banner {
    padding: 20px 20px;
    border-radius: 22px;
  }

  .st-dig {
    width: 100%;
    text-align: center;
    font-size: 13px;
  }

  .st-card {
    padding: 18px 18px 6px;
    border-radius: 22px;
  }

  .st-ticks {
    gap: 2px;
    height: 24px;
  }

  .st-comp-head {
    flex-direction: column;
    gap: 6px;
  }

  .st-update {
    grid-template-columns: 1fr;
  }

  .st-update small {
    grid-column: 1;
  }
}