/* ============================================================================
   Sections — page-level layouts: hero, horizon/dots motifs, route diagram,
   prompts, marquee, stats, split, bento, privacy, timeline, roadmap, cta band,
   auth stage, connector picker, download console, about page.
   ============================================================================ */

/* ── generic section rhythm ─────────────────────────────────────────────── */
.section { padding-block: var(--sp-section); }
.section--tight { padding-block: var(--sp-8); }
.band { background: var(--bg-1); border-block: 1px solid var(--line-1); }

/* ── motif: dot-matrix field (M3) ───────────────────────────────────────── */
.dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(237, 235, 230, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
}

/* ── motif: horizon arc (M1) ────────────────────────────────────────────── */
.horizon {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 160vw;
  max-width: 2200px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border-top: 1px solid rgba(232, 176, 92, 0.55);
  background: radial-gradient(ellipse 60% 22% at 50% 0%, rgba(221, 150, 54, 0.20), transparent 70%);
  pointer-events: none;
}
.horizon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from -90deg at 50% 50%, transparent 42%, rgba(247, 227, 184, 0.9) 50%, transparent 58%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.horizon--invert {
  top: auto;
  bottom: 64%;
  border-top: none;
  border-bottom: 1px solid rgba(232, 176, 92, 0.5);
  background: radial-gradient(ellipse 60% 22% at 50% 100%, rgba(221, 150, 54, 0.18), transparent 70%);
}
.horizon--invert::before {
  background: conic-gradient(from 90deg at 50% 50%, transparent 42%, rgba(247, 227, 184, 0.85) 50%, transparent 58%);
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-9);
}
.hero .dots { z-index: 0; }
.hero .horizon { z-index: 0; }
.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-gold-dim);
  background: rgba(232, 176, 92, 0.05);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--text-2);
}
.hero-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: var(--glow-gold-sm);
  animation: pulse-dot 2s ease-in-out infinite;
}

.hero h1 {
  font-size: var(--fs-display-1);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 700;
  max-width: 16ch;
  margin: var(--sp-5) 0 0;
}
.hero h1 em { font-style: normal; color: var(--gold-300); }
.hero .lede { margin: var(--sp-5) auto 0; text-align: center; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-6);
}
.hero__micro {
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── route spine section (overlaps hero) ────────────────────────────────── */
.route-spine {
  position: relative;
  z-index: 2;
  margin-top: -80px;
  margin-bottom: var(--sp-8);
}
.route-spine .panel-body { padding: clamp(20px, 4vw, 40px); }
.route-diagram { width: 100%; height: auto; display: block; }

.route-wire { fill: none; stroke: var(--line-2); stroke-width: 1; }
.route-pulse {
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 1.5;
  stroke-dasharray: 36 700;
  stroke-dashoffset: 736;
  opacity: 0;
}
.route-pulse.firing { opacity: 1; animation: dash 1.6s linear; }

.route-node-box { fill: var(--bg-3); stroke: var(--line-2); stroke-width: 1; }
.route-node.firing .route-node-box { animation: node-glow 1.6s ease-in-out; }
.route-node-label {
  fill: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
}
.route-hub-box { fill: var(--bg-2); stroke: var(--line-gold-dim); stroke-width: 1; }
.route-hub-label { fill: var(--gold-300); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; }
.route-layer-bar { fill: rgba(232, 176, 92, 0.12); stroke: var(--line-gold-dim); stroke-width: 0.75; }
.route-layer-bar.blink { animation: layer-blink 1.6s ease-in-out; }
.route-layer-label { fill: var(--text-3); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.5px; }
.route-chip { fill: rgba(255, 255, 255, 0.03); stroke: var(--line-1); stroke-width: 1; }
.route-chip-text { fill: var(--text-3); font-family: var(--font-mono); font-size: 9px; }

/* ── example prompts strip ──────────────────────────────────────────────── */
.prompts__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  margin-bottom: var(--sp-6);
}
.prompts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.prompt-chip {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-size: var(--fs-body);
  line-height: 1.5;
  transition: border-color var(--dur-2), background var(--dur-2);
}
.prompt-chip:hover { border-color: var(--line-gold-dim); background: var(--bg-3); }
.prompt-chip::before {
  content: "›";
  color: var(--gold-400);
  font-family: var(--font-mono);
  font-weight: 600;
  flex: none;
}
.prompts__caption {
  margin-top: var(--sp-6);
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-small);
  max-width: 64ch;
  margin-inline: auto;
}

/* ── marquee band ───────────────────────────────────────────────────────── */
.marquee-band { padding-block: var(--sp-7); }

/* ── stats band ─────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--line-1);
}
.stat:last-child { border-right: none; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.stat__num--anchor { color: var(--gold-200); }
.stat__label {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.4;
}

/* ── facts row (connector detail pages) ─────────────────────────────────── */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fact { padding: var(--sp-6) var(--sp-5); border-right: 1px solid var(--line-1); }
.fact:last-child { border-right: none; }
.fact__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--gold-200);
}
.fact__l {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* linkable connector cards (detail "other connectors" + landing bento) */
.road-card--link {
  opacity: 1;
  display: block;
  transition: opacity var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.road-card--link:hover { opacity: 1; border-color: var(--line-gold); transform: translateY(-2px); }
.bento__more {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--dur-1);
}
.bento__cell:hover .bento__more { color: var(--gold-300); }

/* ── split (routing) ────────────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-8);
  align-items: start;
}
.split--reverse { grid-template-columns: 5fr 7fr; }
.split__sticky { position: sticky; top: 120px; }
.split__sticky h2 { margin-bottom: var(--sp-4); }

.layer-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  box-shadow: var(--inner-edge);
}
.layer-card + .layer-card { margin-top: var(--sp-4); }
.layer-card__idx {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gold-300);
}
.layer-card h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.layer-card p { color: var(--text-2); font-size: var(--fs-small); }
.routing__closing {
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-2);
  line-height: 1.6;
}

/* ── connectors bento ───────────────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--sp-4);
}
.bento__cell {
  position: relative;
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  box-shadow: var(--inner-edge);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2);
}
.bento__cell:hover {
  transform: translateY(-3px);
  border-color: var(--line-gold);
  box-shadow: var(--glow-gold-sm), var(--inner-edge);
}
.bento__cell--wide { grid-column: span 6; }
.bento__hub {
  grid-column: span 6;
  grid-row: span 2;
  overflow: hidden;
  justify-content: space-between;
}
.bento__hub .dots { -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 80%, #000, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 70% 80%, #000, transparent 80%); }
.bento__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); position: relative; z-index: 1; }
.bento__cell h3 { font-size: 1.0625rem; position: relative; z-index: 1; }
.bento__hub h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: var(--sp-5); }
.bento__cell p { color: var(--text-2); font-size: var(--fs-small); position: relative; z-index: 1; }
.bento__hub p { max-width: 42ch; font-size: var(--fs-body); }

/* ── privacy ────────────────────────────────────────────────────────────── */
.privacy__claim { font-size: var(--fs-display-2); line-height: 1.05; max-width: 14ch; margin-bottom: var(--sp-4); }
.privacy__intro { margin-bottom: var(--sp-6); }
.privacy__list { margin-top: var(--sp-6); }
.privacy__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line-1);
}
.privacy__item:last-child { border-bottom: 1px solid var(--line-1); }
.privacy__tick { color: var(--gold-400); font-family: var(--font-mono); }
.privacy__item h3 { font-size: 1rem; margin-bottom: 6px; }
.privacy__item p { color: var(--text-2); font-size: var(--fs-small); }

.payload { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.9; }
.payload .k { color: var(--gold-300); }
.payload .s { color: var(--text-1); }
.payload .c { color: var(--text-3); }
.payload .ghost { color: var(--text-3); text-decoration: line-through; opacity: 0.7; }

/* ── roadmap ────────────────────────────────────────────────────────────── */
.roadmap__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.road-card {
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  opacity: 0.72;
  transition: opacity var(--dur-2), border-color var(--dur-2);
}
.road-card:hover { opacity: 1; border-color: var(--line-gold-dim); }
.road-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-bottom: 6px; }
.road-card h4 { font-size: 0.9375rem; font-weight: 600; }
.road-card p { font-size: var(--fs-small); color: var(--text-3); line-height: 1.45; }

/* ── final CTA band ─────────────────────────────────────────────────────── */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: var(--sp-9);
}
.cta-band .horizon { z-index: 0; }
.cta-band__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cta-band h2 { font-size: var(--fs-display-2); max-width: 20ch; }
.cta-band p { margin-top: var(--sp-4); max-width: 56ch; color: var(--text-2); }
.cta-band .hero__cta { margin-top: var(--sp-6); }

/* ── auth stage (signup / login) ────────────────────────────────────────── */
.auth-stage {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
  padding-block: var(--sp-8);
}
.auth-stage .dots { z-index: 0; }
.auth-stage .horizon { top: 88%; z-index: 0; opacity: 0.6; }
.form-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: var(--sp-7);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel), var(--inner-edge);
}
.form-card h1 { font-size: 1.75rem; margin-bottom: var(--sp-2); }
.form-card .form-sub { color: var(--text-2); font-size: var(--fs-small); margin-bottom: var(--sp-6); line-height: 1.6; }
.form-card form { margin-top: var(--sp-2); }
.form-card .form-foot { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--text-2); text-align: center; }
.form-card .form-foot a { color: var(--gold-300); }

/* ── page header (authed app pages) ─────────────────────────────────────── */
.page-head { padding-top: var(--sp-8); padding-bottom: var(--sp-6); }
.page-head h1 { font-size: var(--fs-display-2); }
.page-head .lede { margin-top: var(--sp-4); }

/* ── connector picker ───────────────────────────────────────────────────── */
.picker { padding-bottom: var(--sp-9); }
.connector-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.connector-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  box-shadow: var(--inner-edge);
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
}
/* real checkbox, hidden but focusable — never display:none */
.connector-card > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.cc-check {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--bg-0);
  transition: background var(--dur-2), border-color var(--dur-2);
}
.cc-check::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 3px auto 0;
  background: var(--gold-ink);
  clip-path: polygon(14% 47%, 38% 70%, 86% 16%, 96% 28%, 40% 92%, 4% 58%);
  opacity: 0;
  transition: opacity var(--dur-1);
}
/* sibling selector keeps the tick working without :has() */
.connector-card > input[type="checkbox"]:checked ~ .cc-check { background: var(--gold-400); border-color: var(--gold-400); }
.connector-card > input[type="checkbox"]:checked ~ .cc-check::after { opacity: 1; }

.connector-card:has(input:checked) {
  border-color: var(--line-gold);
  background: var(--bg-3);
  box-shadow: var(--glow-gold-sm), var(--inner-edge);
}
.connector-card:has(input:focus-visible) { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.connector-card:hover { border-color: var(--line-gold-dim); }

.cc-body strong { display: block; font-size: 1.0625rem; font-family: var(--font-display); }
.cc-body p { margin-top: 6px; color: var(--text-2); font-size: var(--fs-small); }
.cc-env { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.cc-tag { margin-top: var(--sp-3); }

/* mandatory (locked) card */
.connector-card.mandatory {
  cursor: default;
  position: relative;
  overflow: hidden;
}
.connector-card.mandatory .dots { z-index: 0; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 80% 50%, #000, transparent 80%); mask-image: radial-gradient(ellipse 80% 80% at 80% 50%, #000, transparent 80%); }
.connector-card.mandatory .cc-check { background: var(--gold-400); border-color: var(--gold-400); }
.connector-card.mandatory .cc-check::after { opacity: 1; }
.connector-card.mandatory > *:not(.dots) { position: relative; z-index: 1; }
.picker form button[type="submit"] { width: auto; margin-top: var(--sp-7); }

/* ── download page ──────────────────────────────────────────────────────── */
.download { padding-bottom: var(--sp-9); }
.download .panel { margin-top: var(--sp-6); }
.download__meta { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-3); }
.download h2 { font-size: 1.375rem; margin-top: var(--sp-8); margin-bottom: var(--sp-4); }

.manifest { border: 1px solid var(--line-1); border-radius: var(--r-md); overflow: hidden; }
.manifest__row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line-1);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}
.manifest__row:first-child { border-top: none; }
.manifest__idx { color: var(--text-3); }
.manifest__slug { color: var(--text-1); }
.manifest__state { color: var(--gold-300); font-size: 0.625rem; letter-spacing: 0.12em; }

.steps-list, .slug-list { list-style: none; padding: 0; margin: 0; }

/* ── about page ─────────────────────────────────────────────────────────── */
.about-hero { position: relative; overflow: hidden; padding-top: var(--sp-9); padding-bottom: var(--sp-7); }
.about-hero .horizon { top: 90%; z-index: 0; }
.about-hero__inner { position: relative; z-index: 1; }
.about-hero h1 { font-size: var(--fs-display-1); line-height: 1; letter-spacing: -0.035em; max-width: 18ch; }
.about-hero .lede { margin-top: var(--sp-5); max-width: 62ch; }

.prose { max-width: 64ch; }
.prose p { color: var(--text-2); font-size: var(--fs-body-lg); line-height: 1.75; }
.prose p + p { margin-top: var(--sp-4); }

.honesty__list { display: grid; gap: var(--sp-4); }
.honesty__item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); }
.honesty__item .privacy__tick { margin-top: 2px; }
.honesty__item p { color: var(--text-2); font-size: var(--fs-small); }
.honesty__item strong { color: var(--text-1); }

.manifest-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  overflow: hidden;
}
.manifest-table__cell {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line-1);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}
.manifest-table__cell:nth-child(-n+2) { border-top: none; }
.manifest-table__cell:nth-child(odd) { border-right: 1px solid var(--line-1); }
.manifest-table__k { color: var(--text-3); letter-spacing: 0.08em; }
.manifest-table__v { color: var(--gold-300); }

.why-lite {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.why-lite__cell {
  padding: var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  box-shadow: var(--inner-edge);
}
.why-lite__cell h3 { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.why-lite__cell p { color: var(--text-2); font-size: var(--fs-small); }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento__hub { grid-column: span 6; grid-row: auto; }
  .bento__cell { grid-column: span 3; }
  .bento__cell--wide { grid-column: span 6; }
  .roadmap__grid { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .split--reverse { grid-template-columns: 1fr; }
  .split__sticky { position: static; }
  .why-lite { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .hero { min-height: auto; padding-top: var(--sp-7); padding-bottom: var(--sp-8); }
  .route-spine { margin-top: -40px; }
  /* keep the route diagram legible — scroll it instead of shrinking labels to dust */
  .route-spine .panel-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .route-diagram { min-width: 560px; }
  .prompts__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: none; border-bottom: 1px solid var(--line-1); }
  .stat:nth-child(odd) { border-right: 1px solid var(--line-1); }
  .stat:last-child { border-bottom: none; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact { border-right: none; border-bottom: 1px solid var(--line-1); }
  .fact:nth-child(odd) { border-right: 1px solid var(--line-1); }
  .fact:nth-child(n+3) { border-bottom: none; }
  .bento { grid-template-columns: 1fr; }
  .bento__hub, .bento__cell, .bento__cell--wide { grid-column: 1 / -1; }
  .bento__cell { min-width: 0; }
  .connector-grid { grid-template-columns: 1fr; }
  .roadmap__grid { grid-template-columns: repeat(2, 1fr); }
  /* min-width:0 lets the 1fr tracks actually shrink so cards don't overflow */
  .road-card { min-width: 0; }
  .manifest-table { grid-template-columns: 1fr; }
  .manifest-table__cell:nth-child(2) { border-top: 1px solid var(--line-1); }
  .manifest-table__cell:nth-child(odd) { border-right: none; }
  .why-lite { grid-template-columns: 1fr; }
  .manifest__row { grid-template-columns: 36px 1fr auto; }
}

@media (max-width: 480px) {
  .hero__cta .btn, .cta-band .btn { width: 100%; }
  /* two-up roadmap is too tight on phones — give each card the full row */
  .roadmap__grid { grid-template-columns: 1fr; }
}