/* Bifrost website. Same "Signal HUD" system as the app (src/styles.css):
   black or paper ground, white or ink at three strengths, one green signal,
   1px hairlines, square corners with brighter corner marks, Space Grotesk.
   Dark is the app's default; light mirrors the app's light theme. */

@font-face {
  font-family: "Space Grotesk Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(assets/fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(assets/fonts/space-grotesk-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  --ink-rgb: 255, 255, 255;
  --bg-rgb: 5, 5, 6;
  --bg: #050506;
  --surface: #0b0b0d;
  --raised: #141417;
  --hover: rgba(var(--ink-rgb), 0.05);
  --border: rgba(var(--ink-rgb), 0.1);
  --border-strong: rgba(var(--ink-rgb), 0.24);
  --text: #f2f2f2;
  --text-2: #a3a3a3;
  --text-3: #6a6a6a;
  --accent: #4ade80;
  --accent-strong: #86efac;
  --accent-ink: #052e16;
  --accent-rgb: 74, 222, 128;
  --accent-soft: rgba(74, 222, 128, 0.12);
  --warn: #fbbf24;
  --warn-rgb: 251, 191, 36;
  --mark: rgba(var(--ink-rgb), 0.78);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  --code-bg: #08080a;
  --font: "Space Grotesk Variable", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap: 1200px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ink-rgb: 0, 0, 0;
  --bg-rgb: 246, 246, 244;
  --bg: #f6f6f4;
  --surface: #ffffff;
  --raised: #ffffff;
  --hover: rgba(0, 0, 0, 0.045);
  --border: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.28);
  --text: #141416;
  --text-2: #55555b;
  --text-3: #75757c;
  --accent: #15803d;
  --accent-strong: #166534;
  --accent-ink: #ffffff;
  --accent-rgb: 21, 128, 61;
  --accent-soft: rgba(21, 128, 61, 0.1);
  --warn: #c27a06;
  --warn-rgb: 194, 122, 6;
  --mark: rgba(0, 0, 0, 0.78);
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
  --code-bg: #fbfbfa;
  color-scheme: light;
}

/* Screenshots exist in both themes; only the matching one is shown (and,
   being lazy, only that one is downloaded). */
:root[data-theme="light"] .t-dark,
:root:not([data-theme="light"]) .t-light {
  display: none !important;
}

/* ------------------------------------------------------------ base */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(var(--accent-rgb), 0.12), transparent 62%),
    var(--bg);
  background-repeat: no-repeat;
  color: var(--text);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s, color 0.2s;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}
p a,
.faq-list a {
  color: var(--accent);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: rgba(var(--accent-rgb), 0.3);
}

.wrap {
  width: min(var(--wrap), calc(100% - 40px));
  margin: 0 auto;
}

.num {
  font-variant-numeric: tabular-nums;
}
.accent {
  color: var(--accent);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 12px;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 14px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ------------------------------------------------------------ HUD primitives */

/* 0 to 1: how far corner marks are drawn. Sections animate it as they arrive. */
@property --mk {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* Section label: the app's uppercase Space Grotesk label. */
.lab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lab.accent {
  color: var(--accent);
}
.idx {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.live-dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink {
  50% {
    opacity: 0.35;
  }
}

/* Panels: square, 1px hairline, and a brighter 2px L on each corner drawn as
   eight background layers (the same technique as the app). */
.panel,
.btn-secondary,
.btn-ghost {
  --mark-len: 12px;
  --mark-w: 2px;
  --ml: calc(var(--mark-len) * var(--mk));
  --cm: linear-gradient(var(--mark), var(--mark));
  background-image: var(--cm), var(--cm), var(--cm), var(--cm), var(--cm), var(--cm), var(--cm), var(--cm);
  background-size:
    var(--ml) var(--mark-w), var(--mark-w) var(--ml),
    var(--ml) var(--mark-w), var(--mark-w) var(--ml),
    var(--ml) var(--mark-w), var(--mark-w) var(--ml),
    var(--ml) var(--mark-w), var(--mark-w) var(--ml);
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  background-repeat: no-repeat;
  background-origin: border-box;
}
.panel {
  background-color: var(--surface);
  border: 1px solid var(--border);
}


.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag-ok {
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--accent);
  background: var(--accent-soft);
}
.tag-warn {
  border-color: rgba(var(--warn-rgb), 0.55);
  color: var(--warn);
  background: rgba(var(--warn-rgb), 0.1);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.btn-sm {
  height: 32px;
  padding: 0 14px;
  font-size: 11px;
}
.btn-md {
  height: 40px;
  padding: 0 18px;
  font-size: 11.5px;
}
.btn-lg {
  height: 50px;
  padding: 0 24px;
  font-size: 12.5px;
}
.btn-primary {
  background-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--accent-strong);
}
.btn-secondary,
.btn-ghost {
  --mark: var(--text);
  --mark-len: 6px;
  --mark-w: 1.5px;
  background-color: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--hover);
  border-color: var(--text-2);
}
.btn-ghost {
  --mark: rgba(var(--ink-rgb), 0.55);
  color: var(--text-2);
}
.btn-ghost:hover:not(:disabled) {
  --mark: var(--text);
  color: var(--text);
  border-color: var(--text-2);
}

.icon-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background-color 0.12s;
}
.icon-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--hover);
}
/* Like the app: the sun shows in dark (switch to light), the moon in light. */
.theme-toggle .i-moon,
:root[data-theme="light"] .theme-toggle .i-sun {
  display: none;
}
:root[data-theme="light"] .theme-toggle .i-moon {
  display: block;
}

/* ------------------------------------------------------------ rail */
/* The floating section rail: a HUD panel (hairline and corner marks) on a
   frosted background. Icons only; it widens to the right on hover or keyboard
   focus to show the names, over the page rather than pushing it. One mark
   slides to the current section, like the app's sidebar. On phones it
   becomes a dock along the bottom edge. */

.rail {
  --rail-w: 56px;
  --item-h: 40px;
  position: fixed;
  z-index: 60;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--rail-w);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  overflow: hidden;
  background-color: rgba(var(--bg-rgb), 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s;
}
.rail:hover,
.rail:has(:focus-visible) {
  width: 212px;
  background-color: rgba(var(--bg-rgb), 0.74);
}
.rail-brand,
.rail-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(var(--rail-w) - 2px) auto;
  align-items: center;
  width: 100%;
  height: var(--item-h);
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.rail-brand {
  height: calc(var(--item-h) + 8px);
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.rail-brand .brand-mark {
  justify-self: center;
}
.rail-item svg {
  justify-self: center;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-item svg.fill {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
}
.rail-item:hover {
  color: var(--text);
  background-color: var(--hover);
}
.rail-item:focus-visible {
  outline-offset: -3px;
}
.rail-item.on {
  color: var(--text);
}
.rail-item.on svg,
.rail-item.accent svg {
  color: var(--accent);
}
.rail-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rail:hover .rail-label,
.rail:has(:focus-visible) .rail-label {
  opacity: 1;
  transform: none;
  transition-delay: 0.06s;
}
.brand-word {
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.24em;
}
.rail-list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.rail-list::-webkit-scrollbar {
  display: none;
}
.rail-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--item-h);
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
  opacity: 0;
  pointer-events: none;
}
.rail-mark.on {
  opacity: 1;
}
.rail-mark.slide {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s;
}
.rail-foot {
  flex: none;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.stars {
  border: 1px solid var(--border-strong);
  padding: 0 5px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
}
.brand-mark {
  color: var(--accent);
  flex: none;
}
.brand.small {
  font-size: 13px;
  color: var(--text);
}
@media (max-height: 640px) {
  .rail {
    --item-h: 34px;
  }
}

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

.hero {
  position: relative;
  padding: 84px 0 56px;
}
/* The app's faint 24px dot grid, fading out from the top left. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 -120px;
  background-image: radial-gradient(circle, rgba(var(--ink-rgb), 0.13) 1px, transparent 1.3px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 25% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 25% 30%, #000 20%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
h1 {
  margin: 22px 0 0;
  font-size: clamp(42px, 5.8vw, 76px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
  max-width: 11ch;
}
.lede {
  margin: 26px 0 0;
  font-size: 18px;
  color: var(--text-2);
  max-width: 34em;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.fineprint {
  margin: 18px 0 0;
  color: var(--text-3);
  font-size: 14px;
}

/* ------------------------------------------------------------ demo (active transfer) */

/* The one panel with focus gets green, longer marks, like the app's active transfer. */
.focus {
  --mark: var(--accent);
  --mark-len: 16px;
}
.demo-card {
  padding: 18px 22px 20px;
  background-image:
    var(--cm), var(--cm), var(--cm), var(--cm), var(--cm), var(--cm), var(--cm), var(--cm),
    radial-gradient(420px 260px at 22% 45%, rgba(var(--accent-rgb), 0.08), transparent 70%);
  background-size:
    var(--ml) var(--mark-w), var(--mark-w) var(--ml),
    var(--ml) var(--mark-w), var(--mark-w) var(--ml),
    var(--ml) var(--mark-w), var(--mark-w) var(--ml),
    var(--ml) var(--mark-w), var(--mark-w) var(--ml),
    100% 100%;
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right, center;
}
.demo-card[data-state="reconnecting"] {
  --mark: var(--warn);
}
.focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.focus-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 22px 0 6px;
}

.ring {
  position: relative;
  width: 200px;
  height: 200px;
}
.ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ring-outer {
  fill: none;
  stroke: rgba(var(--ink-rgb), 0.1);
}
.ring-segs line {
  stroke: rgba(var(--ink-rgb), 0.14);
  stroke-width: 3.2;
  transition: stroke 0.25s;
}
.ring-segs line.v {
  stroke: var(--accent);
}
.ring-segs line.f {
  stroke: var(--accent-strong);
}
:root[data-theme="light"] .ring-segs line.f {
  stroke: #4ade80;
}
.demo-card[data-state="paused"] .ring-segs line.v,
.demo-card[data-state="reconnecting"] .ring-segs line.v {
  stroke: rgba(var(--accent-rgb), 0.5);
}
.ring-ticks line {
  stroke: rgba(var(--ink-rgb), 0.22);
  stroke-width: 1;
}
.ring-ticks line.major {
  stroke: rgba(var(--ink-rgb), 0.4);
}
.ring-cursor {
  fill: var(--accent);
}
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.ring-pct {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ring-pct b {
  font-weight: 500;
}
.ring-pct small {
  font-size: 15px;
  margin-left: 1px;
}
.ring-center .lab {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 10px;
}
.ring-bytes {
  font-size: 12.5px;
  color: var(--text-2);
}

.focus-status {
  font-size: 10.5px;
}
.focus-name {
  margin: 6px 0 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  margin: 20px 0 0;
}
.facts dt {
  font-size: 10px;
}
.facts dd {
  margin: 4px 0 0;
  font-size: 17px;
  white-space: nowrap;
}
.demo-card[data-state="reconnecting"] [data-route],
.demo-card[data-state="reconnecting"] [data-status] {
  color: var(--warn);
}
.demo-card[data-state="paused"] [data-status] {
  color: var(--text-2);
}

/* Link line: two square nodes joined by a wire; green packets run toward
   the receiver while data flows. */
.link-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "rx wire tx"
    "e1 e1 e2";
  align-items: center;
  gap: 8px 0;
  margin-top: 16px;
}
.ll-node {
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border: 1.5px solid var(--accent);
}
.ll-node.rx {
  grid-area: rx;
  background: var(--accent);
}
.ll-node.tx {
  grid-area: tx;
}
.ll-wire {
  grid-area: wire;
  --wire: rgba(var(--accent-rgb), 0.6);
  position: relative;
  height: 6px;
  margin: 0 8px;
  background: linear-gradient(var(--wire), var(--wire)) center / 100% 1.5px no-repeat;
  overflow: hidden;
}
.ll-wire i {
  position: absolute;
  top: 1.25px;
  left: 100%;
  width: 18px;
  height: 3.5px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.7);
  animation: packet 1.8s linear infinite;
}
.ll-wire i:nth-child(2) {
  animation-delay: -0.6s;
}
.ll-wire i:nth-child(3) {
  animation-delay: -1.2s;
}
@keyframes packet {
  from {
    left: 100%;
  }
  to {
    left: -18px;
  }
}
.demo-card:not([data-state="running"]) .ll-wire i {
  display: none;
}
.demo-card[data-state="reconnecting"] .ll-wire {
  background: repeating-linear-gradient(90deg, var(--warn) 0 3px, transparent 3px 7px) center / 100% 1.5px no-repeat;
}
.demo-card[data-state="paused"] .ll-wire {
  --wire: rgba(var(--ink-rgb), 0.25);
}
.ll-end {
  grid-area: e1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  min-width: 0;
}
.ll-end.right {
  grid-area: e2;
  justify-self: end;
}
.ll-tag {
  padding: 1px 5px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.demo-actions [data-toggle] {
  min-width: 110px;
}
.demo-log {
  list-style: none;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  min-height: 98px;
  font-size: 13.5px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.demo-log li {
  display: flex;
  gap: 12px;
}
.demo-log time {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.demo-log li.good {
  color: var(--text);
}
.demo-log li.good time {
  color: var(--accent);
}
.demo-log li.warn time {
  color: var(--warn);
}
.demo-note {
  color: var(--text-3);
  font-size: 13.5px;
  margin: 12px 0 0;
}
.demo-receipt {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background: var(--accent-soft);
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  animation: rise 0.2s ease-out;
}
.demo-receipt div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.demo-receipt dt {
  font-size: 10px;
}
.demo-receipt dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ------------------------------------------------------------ product band */

.shot-band {
  padding: 24px 0 24px;
}
.band {
  position: relative;
  padding-right: 13%;
}
.band-desktop {
  margin: 0;
  padding: 8px;
  box-shadow: var(--shadow);
}
.band-phone,
.live.band-phone {
  position: absolute;
  right: 0;
  bottom: -36px;
  width: 22%;
  margin: 0;
  z-index: 2;
}
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 72px 0 0;
}
.stat-strip div {
  padding: 20px 24px 22px;
}
.stat-strip div + div {
  border-left: 1px solid var(--border);
}
.stat-strip dd {
  margin: 8px 0 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------ live app frames */
/* Each frame holds the real app (website/demo, built from src/ with the demo
   backend) in an iframe drawn at its native size and scaled to fit. The
   screenshot underneath shows until the app is ready. See live.js. */

.live {
  position: relative;
  margin: 0;
}
.live-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1280 / 800;
  background: var(--bg);
  isolation: isolate;
}
.live-screen > .poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.live-screen > iframe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border: 0;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.live.live-on .live-screen > iframe {
  opacity: 1;
}
/* The frames are for watching: this layer keeps clicks, scrolling and
   focus on the page. */
.live-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.live-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 22px;
  height: 22px;
  margin: -3px 0 0 -5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.live-cursor.on {
  opacity: 1;
}
.live-cursor svg {
  display: block;
}
.live-cursor path {
  fill: #0b0b0d;
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.live-cursor::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}
.live-cursor.down::after {
  animation: click-ring 0.45s ease-out;
}
@keyframes click-ring {
  from {
    opacity: 0.9;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* phone */
.live.phone .live-screen {
  aspect-ratio: 390 / 844;
  border-radius: 30px;
  border: 6px solid #111113;
  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.16), var(--shadow);
}

/* On phones the app frames switch to the app's phone layout. The breakpoint
   matches narrowMq in live.js. */
@media (min-width: 641px) {
  .n-only {
    display: none !important;
  }
}
@media (max-width: 640px) {
  .w-only {
    display: none !important;
  }
  .live[data-narrow] {
    width: 100%;
    max-width: 330px;
    margin-inline: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .live[data-narrow] .live-screen {
    aspect-ratio: 390 / 844;
    border-radius: 30px;
    border: 6px solid #111113;
    box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.16), var(--shadow);
  }
}

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

.section {
  padding: 104px 0;
}
h2 {
  margin: 16px 0 0;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 16ch;
}
.section-lede {
  margin: 18px 0 0;
  color: var(--text-2);
  font-size: 18px;
  max-width: 38em;
}
h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* receipt */
.receipt-section {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 56px;
  align-items: start;
}
.receipt-copy {
  position: sticky;
  top: 100px;
}
.rs-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.rs-ico {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid var(--border-strong);
}
.rs-title {
  flex: 1;
  min-width: 0;
}
.rs-title strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
}
.rs-title > span {
  color: var(--text-2);
  font-size: 14px;
}
.rs-row {
  display: grid;
  grid-template-columns: 10em minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 20px;
  align-items: baseline;
  padding: 15px 24px;
  border-bottom: 1px solid var(--border);
}
.rs-row:last-child {
  border-bottom: 0;
}
.rs-row .lab {
  font-size: 10px;
}
.rs-v {
  font-weight: 600;
  font-size: 15px;
}
.rs-why {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}

/* safety words: square chips, uppercase, strong hairline */
.words {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}
.words i {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid var(--border-strong);
  background: rgba(var(--ink-rgb), 0.04);
}
.words.big {
  gap: 8px;
}
.words.big i {
  font-size: clamp(13px, 1.4vw, 16px);
  padding: 6px 12px;
}

.words-section {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}
.device-pair {
  display: grid;
}
.device {
  padding: 20px 22px 22px;
  display: grid;
  gap: 14px;
}
.device-link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding-left: 32px;
}
.device-link span {
  width: 1.5px;
  height: 100%;
  background: rgba(var(--accent-rgb), 0.55);
}
.device-link span:last-child {
  display: none;
}

/* steps */
.steps {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.steps li {
  padding: 26px 24px 28px;
}
.steps li + li {
  border-left: 1px solid var(--border);
}
.step-n {
  display: inline-grid;
  place-items: center;
  height: 22px;
  min-width: 32px;
  padding: 0 6px;
  margin-bottom: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.steps p {
  color: var(--text-2);
  margin: 8px 0 0;
  font-size: 15px;
}
.code-chip {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* features */
.features .wrap > .lab {
  margin-bottom: 28px;
}
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 112px;
}
.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 56px;
  align-items: center;
}
.feature.flip {
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
}
.feature.flip .feature-copy {
  order: 2;
}
.feature h2 {
  margin-top: 0;
  font-size: clamp(30px, 3.3vw, 44px);
}
.feature-copy p {
  color: var(--text-2);
  margin: 20px 0 0;
}
.ticks {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ticks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 500;
}
.ticks li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  transform: rotate(45deg);
  border: 1.5px solid var(--accent);
}
.feature-shot {
  margin: 0;
  padding: 8px;
}
.phones {
  display: flex;
  gap: 22px;
  justify-content: center;
}
.phones figure {
  margin: 0;
  width: min(250px, 44%);
}
.phones figure + figure {
  margin-top: 64px;
}

.tiles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.tiles li {
  padding: 22px 22px 24px;
  transition: background-color 0.15s;
}
.tiles li:hover {
  --mark: var(--text);
}
.tile-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  border: 1px solid var(--border-strong);
  color: var(--accent);
}
.tiles p {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 15px;
}

/* security */
.sees {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 44px;
}
.sees-col {
  padding: 24px 26px 26px;
}
.sees-col + .sees-col {
  border-left: 1px solid var(--border);
}
.sees-col h3 {
  margin-bottom: 14px;
  font-size: 11px;
}
.sees-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--text-2);
  font-size: 15px;
}
.sees-col li {
  padding-left: 14px;
  position: relative;
}
.sees-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 1.5px;
  background: var(--text-3);
}
.sec-list {
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 28px;
}
.sec-list strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.sec-list strong::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 14px;
}
.sec-list span {
  color: var(--text-2);
  font-size: 15px;
}

/* compare */
.table-wrap {
  margin-top: 40px;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  font-size: 15px;
}
th,
td {
  text-align: left;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}
tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}
thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
tbody th {
  font-weight: 600;
}
td {
  color: var(--text-2);
}
.us {
  color: var(--text);
  font-weight: 600;
  background: var(--accent-soft);
}
thead .us {
  color: var(--accent);
  box-shadow: inset 0 2px 0 var(--accent);
}

/* download */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.dl {
  padding: 26px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  transition: background-color 0.15s, border-color 0.15s;
}
.dl:hover {
  --mark: var(--text);
  background-color: var(--raised);
  border-color: var(--border-strong);
}
.dl-head {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  color: var(--accent);
}
.dl-name {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dl-meta {
  color: var(--text-2);
  font-size: 14.5px;
  flex: 1;
}
.dl .btn {
  margin-top: 18px;
}
.dl.recommended {
  --mark: var(--accent);
  --mark-len: 16px;
  border-color: rgba(var(--accent-rgb), 0.45);
}
.dl.recommended .tag {
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--accent);
  background: var(--accent-soft);
}
.install-help {
  margin-top: 16px;
}
.install-help summary {
  cursor: pointer;
  padding: 16px 22px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.install-help summary::-webkit-details-marker {
  display: none;
}
.install-help summary .lab {
  color: var(--text);
}
.install-help summary::after,
.faq-list summary::after {
  content: "+";
  color: var(--accent);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.install-help[open] summary::after,
.faq-list details[open] summary::after {
  content: "−";
}
.install-body {
  padding: 0 22px 20px;
  color: var(--text-2);
  font-size: 15px;
  max-width: 60em;
}
.install-body p {
  margin: 0;
}
.install-body ul {
  margin: 12px 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}
.install-body b {
  color: var(--text);
  font-weight: 600;
}

/* open source */
.oss {
  padding: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}
.oss p:not(.lab) {
  color: var(--text-2);
  margin: 18px 0 0;
}
.code {
  margin: 0;
  background: var(--code-bg);
  border: 1px solid var(--border);
  padding: 22px 24px;
  overflow-x: auto;
  font: 13.5px/1.75 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--text);
}
.code .c {
  color: var(--text-3);
}

/* faq */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 64px;
}
.faq-list details {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.faq-list details:first-child {
  border-top: 1px solid var(--border);
}
.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary:hover {
  color: var(--accent);
}
.faq-list p {
  color: var(--text-2);
  margin: 12px 0 0;
  max-width: 42em;
}

/* footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 30px 0 44px;
  color: var(--text-3);
  font-size: 14px;
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.footer nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer a:hover {
  color: var(--text);
}

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

@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .demo {
    max-width: 640px;
  }
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sec-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .feature,
  .feature.flip,
  .oss,
  .faq,
  .receipt-section,
  .words-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .feature.flip .feature-copy {
    order: 0;
  }
  .receipt-copy {
    position: static;
  }
  .words-section .device-pair {
    order: 2;
  }
  .rs-row {
    grid-template-columns: 9em minmax(0, 1fr);
  }
  .rs-why {
    grid-column: 2;
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps li:nth-child(3) {
    border-left: 0;
  }
  .steps li:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
  .sees {
    grid-template-columns: minmax(0, 1fr);
  }
  .sees-col + .sees-col {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .dl-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-strip div:nth-child(3) {
    border-left: 0;
  }
  .stat-strip div:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }
  .hero {
    padding: 48px 0 32px;
  }
  .lede,
  .section-lede {
    font-size: 16.5px;
  }
  .cta-row .btn {
    flex: 1 1 100%;
  }
  .section {
    padding: 72px 0;
  }
  .feature-list {
    gap: 80px;
  }
  .demo-card {
    padding: 16px;
  }
  .focus-body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 18px;
  }
  .focus-info {
    width: 100%;
  }
  .focus-info,
  .focus-name {
    text-align: center;
  }
  .facts dd {
    font-size: 15.5px;
  }
  .demo-actions .btn {
    flex: 1 1 0;
  }
  .band {
    padding-right: 0;
  }
  .band-phone,
  .live.band-phone {
    display: none;
  }
  .stat-strip {
    margin-top: 28px;
  }
  .stat-strip div {
    padding: 16px;
  }
  .stat-strip dd {
    font-size: 20px;
  }
  .rs-head,
  .rs-row {
    padding-inline: 16px;
  }
  .rs-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .rs-why {
    grid-column: 1;
  }
  .steps,
  .tiles,
  .sec-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .steps li + li {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .oss {
    padding: 24px;
  }
  #history .feature-shot {
    max-width: 320px;
    margin-inline: auto;
  }
  .footer nav {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Packets hold still, as in the app. */
  .ll-wire i:nth-child(2),
  .ll-wire i:nth-child(3) {
    display: none;
  }
  .ll-wire i {
    left: 40%;
  }
}

/* ------------------------------------------------------------ full-screen sections */
/* Every section (and each feature block) is one screen tall and settles into
   place with gentle snapping (scroll-snap-type: y proximity on html), so
   stopping between sections still works. A section taller than the screen
   is scaled down to fit by main.js (--fit), never below 60%; below that it
   simply runs taller than the screen. */

:root {
  --screen-pad: clamp(24px, 5.5vh, 64px);
  --rail-space: 96px;
}
/* Keep content clear of the rail; on wide screens it stays centred. */
main,
.footer {
  padding-left: clamp(0px, calc(var(--rail-space) - (100vw - var(--wrap) - 40px) / 2), var(--rail-space));
}
.screen,
.section.screen,
.hero.screen,
.shot-band.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--screen-pad) 0;
  scroll-snap-align: start;
}
.fit {
  width: 100%;
  flex: none;
  transform: scale(var(--fit, 1));
  transform-origin: 50% 50%;
  /* The scaled box gives back the height it no longer uses. */
  margin-block: calc(var(--fit-gap, 0px) / -2);
}
.fit-live .fit {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.receipt-copy {
  position: static;
}
.receipt-section {
  align-items: center;
}

/* ------------------------------------------------------------ arrival */
/* As a screen arrives, its parts rise in one after another and the corner
   marks draw out from the corners. main.js tags the parts (.rv, --i) and
   toggles .in. Nothing is hidden without JavaScript or with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .screen {
    transition: --mk 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
  }
  .js .screen:not(.in) {
    --mk: 0;
  }
  .js .rv {
    --d: calc(var(--i, 0) * 70ms);
    transition:
      opacity 0.6s ease var(--d),
      transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d),
      filter 0.6s ease var(--d),
      background-color 0.15s,
      border-color 0.15s;
  }
  .js .screen:not(.in) .rv {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
}

/* ------------------------------------------------------------ phones */
@media (max-width: 760px) {
  :root {
    --screen-pad: 40px;
  }
  main,
  .footer {
    padding-left: 0;
  }
  .screen,
  .section.screen,
  .hero.screen,
  .shot-band.screen {
    padding-bottom: 92px;
  }
  .footer {
    padding-bottom: 96px;
  }
  /* The rail becomes a dock along the bottom edge. */
  .rail {
    --item-h: 48px;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    transform: none;
    width: auto;
    max-height: none;
    flex-direction: row;
    padding: 0 4px;
  }
  .rail:hover,
  .rail:has(:focus-visible) {
    width: auto;
  }
  .rail-brand,
  .rail-label,
  .rail-foot a {
    display: none;
  }
  .rail-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .rail-item {
    width: 44px;
    grid-template-columns: 44px;
  }
  .rail-foot {
    display: flex;
    margin: 0 0 0 4px;
    padding: 0 0 0 4px;
    border-top: 0;
    border-left: 1px solid var(--border);
  }
  .rail-mark {
    width: 44px;
    box-shadow: inset 0 2px 0 var(--accent);
  }
}

/* Scrolling always lands on a section (mandatory snapping); the footer is a
   stop of its own so the end of the page stays reachable. */
.footer {
  scroll-snap-align: end;
}

/* ------------------------------------------------------------ overview (hero + live app) */
.hero2 {
  display: grid;
  gap: clamp(24px, 4vh, 40px);
}
.hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: end;
}
.hero2 h1 {
  margin-top: 16px;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.02;
  max-width: 14ch;
}
.hero2 .lede {
  margin: 0;
  font-size: 17px;
  max-width: 36em;
}
.hero2 .cta-row {
  margin-top: 22px;
}
.hero2 .fineprint {
  margin-top: 14px;
  font-size: 13.5px;
}
.hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.hero-stage .band-phone {
  bottom: -28px;
}
/* The simulated transfer, compact beside the live app. */
.hero-stage .demo-card {
  padding: 14px 18px 16px;
}
.hero-stage .focus-head {
  padding-bottom: 10px;
}
.hero-stage .focus-body {
  gap: 18px;
  padding: 14px 0 2px;
}
.hero-stage .ring {
  width: 156px;
  height: 156px;
}
.hero-stage .ring-pct {
  font-size: 27px;
}
.hero-stage .ring-pct small {
  font-size: 12px;
}
.hero-stage .ring-bytes {
  font-size: 11px;
}
.hero-stage .focus-name {
  font-size: 16px;
}
.hero-stage .facts {
  gap: 10px 14px;
  margin-top: 12px;
}
.hero-stage .facts dd {
  font-size: 14.5px;
  white-space: normal;
}
.hero-stage .link-line {
  margin-top: 10px;
}
.hero-stage .demo-actions {
  margin-top: 12px;
}
.hero-stage .demo-log {
  margin-top: 12px;
  padding-top: 10px;
  min-height: 74px;
  font-size: 12.5px;
}
.hero-stage .demo-log li:nth-child(n + 4) {
  display: none;
}
.hero-stage .demo-note {
  margin-top: 8px;
  font-size: 12.5px;
}
@media (max-width: 1080px) {
  .hero-head,
  .hero-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .hero-stage .demo {
    max-width: 560px;
  }
}

/* ------------------------------------------------------------ features carousel */
/* The section is as tall as its pages (one screen each) with a snap stop per
   page, and its view stays pinned while you scroll through it. main.js turns
   the scroll position into --p (0 to pages-1), which slides the strip
   sideways, so each scroll step brings the next page in from the side. */
.features {
  position: relative;
  height: calc(var(--slides, 6) * 100vh);
  height: calc(var(--slides, 6) * 100dvh);
}
.car-stop {
  position: absolute;
  left: 0;
  top: calc(var(--k) * 100vh);
  top: calc(var(--k) * 100dvh);
  width: 1px;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  pointer-events: none;
}
.car-view {
  --bar-h: 76px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.car-strip {
  display: flex;
  height: 100%;
  transform: translate3d(calc(var(--p, 0) * -100%), 0, 0);
  will-change: transform;
}
.slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--screen-pad) 0 calc(var(--screen-pad) + var(--bar-h));
  /* main.js fades and shrinks pages a little as they move away */
  opacity: var(--o, 1);
  transform: scale(var(--s, 1));
}
.car-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  border-top: 1px solid var(--border);
}
.car-bar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.car-name {
  color: var(--text);
  margin-left: 6px;
  min-width: 9em;
}
.car-dashes {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.car-dashes button {
  position: relative;
  width: 64px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-3);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.car-dashes button::before,
.car-dashes i {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  height: 2px;
}
.car-dashes button::before {
  right: 0;
  background: var(--border-strong);
}
.car-dashes i {
  width: calc(var(--fill, 0) * 100%);
  background: var(--accent);
}
.car-dashes span {
  position: absolute;
  left: 0;
  top: 15px;
}
.car-dashes button:hover {
  color: var(--text);
}
.car-dashes button:hover::before {
  background: var(--text-2);
}
.car-dashes button.on {
  color: var(--accent);
}
.car-count {
  color: var(--text-3);
  font-size: 13px;
  white-space: nowrap;
}
.car-count b {
  color: var(--text);
  font-weight: 600;
}
.car-arrows {
  display: flex;
  gap: 8px;
}
/* The page leaving and the page arriving both rise in with the arrival
   animation, so the screen settles like the others. */
.slide .feature h2 {
  margin-top: 0;
}
@media (max-width: 760px) {
  .car-view {
    --bar-h: 64px;
  }
  .slide {
    padding-bottom: calc(var(--screen-pad) + var(--bar-h) + 70px);
    padding-top: 28px;
  }
  .car-bar {
    bottom: 70px;
  }
  .car-bar-inner {
    gap: 12px;
  }
  .car-bar .lab,
  .car-count {
    display: none;
  }
  .car-dashes {
    margin-left: 0;
    flex: 1;
    gap: 4px;
  }
  .car-dashes button {
    width: auto;
    flex: 1;
  }
  .car-dashes span {
    display: none;
  }
  .car-arrows {
    margin-left: auto;
  }
  /* A smaller app frame, so a page fits on a phone screen. */
  .slide .live[data-narrow] {
    max-width: 190px;
  }
  .slide .feature {
    gap: 18px;
  }
  .slide .phones figure {
    width: min(150px, 44%);
  }
}

/* ------------------------------------------------------------ FAQ */
/* One answer open at a time (details name="faq"), shown at full size and
   never scaled. The list starts at a fixed place, so opening an answer only
   moves the questions under it. */
.faq-screen.screen {
  justify-content: flex-start;
  padding-top: clamp(32px, 9vh, 96px);
}
.faq-list details {
  padding: 13px 0;
}
.faq-list summary {
  font-size: 16px;
  align-items: center;
}
.faq-list summary::after {
  font-size: 20px;
}
.faq-list p {
  margin-top: 8px;
  font-size: 15px;
}
.faq-list details[open] summary {
  color: var(--accent);
}
:root {
  interpolate-size: allow-keywords;
}
.faq-list details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), content-visibility 0.3s allow-discrete;
}
.faq-list details[open]::details-content {
  block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
  .faq-list details::details-content {
    transition: none;
  }
}

/* Arrival works on carousel pages too. */
@media (prefers-reduced-motion: no-preference) {
  .js .slide {
    transition: --mk 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
  }
  .js .slide:not(.in) {
    --mk: 0;
  }
  .js .slide:not(.in) .rv {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
}