:root {
  --ground: #0f1013;
  --panel: #17181c;
  --panel-raised: #1d1e23;
  --edge: #2c2d33;
  --grid: #26272d;
  --text: #e4e4e6;
  --text-strong: #f3f3f4;
  --muted: #9b9ca4;
  --faint: #6f7079;
  --amber: #e6b45a;
  --amber-ink: #19150c;
  --green: #7ed98a;
  --red: #e26060;
  --blue: #6ea8e6;
  --band-1: #e86060;
  --band-2: #ec9e4e;
  --band-3: #e2d05c;
  --band-4: #7ed98a;
  --band-5: #5ccccc;
  --band-6: #629cec;
  --band-7: #9e7cec;
  --band-8: #e278c4;
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --body: "Ubuntu", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 64ch;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 300 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--text-strong); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; }
[hidden] { display: none !important; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.label {
  font: 500 12px/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
h1, h2, h3 { text-wrap: balance; margin: 0; }
h2 {
  font: 800 clamp(34px, 5vw, 52px)/0.98 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}
h3 { font: 500 19px/1.3 var(--body); color: var(--text-strong); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
section { padding-block: clamp(64px, 9vw, 112px); border-top: 1px solid var(--edge); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 780px; }
.section-head p { margin: 0; color: var(--muted); max-width: var(--measure); }
.section-head p.lead { color: var(--text); font-size: clamp(17px, 1.5vw, 19px); }
.prose { max-width: var(--measure); }
.prose p { color: var(--text); }
.prose p.dim { color: var(--muted); }
.prose h3 { margin: 28px 0 8px; }
.prose ul { padding-left: 1.2em; color: var(--text); }
.prose li { margin-bottom: 0.4em; }
.prose li strong { font-weight: 500; color: var(--text-strong); }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

/* Header */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}
.site-header .wrap { display: grid; gap: 4px; padding-block: 12px 0; }
.wordmark {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  color: var(--text-strong); text-decoration: none;
  font: 800 24px/1 var(--display); letter-spacing: 0.01em;
  white-space: nowrap;
}
.wordmark .mark { flex: none; width: 28px; height: 28px; }
.wordmark sup { font: 400 10px/1 var(--mono); margin-left: 1px; color: var(--muted); }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; margin-left: -2px; }
.site-nav a { color: var(--muted); text-decoration: none; font: 400 14px/1 var(--body); padding: 12px 2px; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--text-strong); }
.site-nav a[aria-current="page"] { color: var(--text-strong); border-bottom-color: var(--amber); }
.site-nav .button { margin-left: auto; margin-bottom: 8px; }
@media (max-width: 640px) { .site-nav { gap: 2px 16px; } .site-nav a { font-size: 13px; } .site-nav .button { margin-left: 0; } }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px;
  border-radius: 6px; border: 1px solid transparent;
  font: 500 15px/1 var(--body); text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.button-primary { background: var(--amber); color: var(--amber-ink); }
.button-primary:hover { background: #f0c574; color: var(--amber-ink); }
.button-quiet { background: transparent; color: var(--text); border-color: var(--edge); }
.button-quiet:hover { border-color: var(--muted); color: var(--text-strong); }
.button:disabled { background: var(--panel); color: var(--faint); border-color: var(--edge); cursor: not-allowed; }
.button:disabled:hover { background: var(--panel); color: var(--faint); }
.site-nav .button { min-height: 34px; padding: 0 14px; font-size: 14px; border-bottom: 0; }
.site-nav .button-primary { color: var(--amber-ink); }

/* Status pill */
.status {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  padding: 6px 12px 6px 10px; border: 1px solid var(--edge); border-radius: 999px;
  font: 400 13px/1 var(--mono); color: var(--muted);
}
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent); }
.status .dot.amber { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent); }
.status .dot.green { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }

/* Hero (home) */
.hero { padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px); border-top: 0; }
.hero-grid { display: grid; gap: 28px; }
.hero-title { display: grid; gap: clamp(10px, 1.5vw, 18px); }
.hero-brand {
  font: 800 clamp(60px, 11vw, 140px)/0.88 var(--display);
  letter-spacing: -0.005em;
  color: var(--text-strong);
}
.hero-brand sup { font: 400 0.16em/1 var(--mono); color: var(--muted); vertical-align: top; margin-left: 0.08em; position: relative; top: 0.6em; }
.hero-tagline {
  display: grid; justify-items: center; text-align: center;
  font: 700 clamp(26px, 4.2vw, 54px)/1.12 var(--display);
  letter-spacing: 0.005em;
  color: var(--text);
}
.tagline-line { display: block; white-space: nowrap; }
@media (max-width: 520px) { .tagline-line { white-space: normal; } }
.rotator { display: inline-block; height: 1.12em; overflow: hidden; vertical-align: bottom; color: var(--amber); }
.rotator-track { display: flex; flex-direction: column; animation: rotate-audience 20s cubic-bezier(0.7, 0, 0.25, 1) infinite; }
.rotator-track span { display: block; height: 1.12em; line-height: 1.12em; white-space: nowrap; text-align: center; }
@keyframes rotate-audience {
  0.00%, 10.00% { transform: translateY(-0.00em); }
  12.50%, 22.50% { transform: translateY(-1.12em); }
  25.00%, 35.00% { transform: translateY(-2.24em); }
  37.50%, 47.50% { transform: translateY(-3.36em); }
  50.00%, 60.00% { transform: translateY(-4.48em); }
  62.50%, 72.50% { transform: translateY(-5.60em); }
  75.00%, 85.00% { transform: translateY(-6.72em); }
  87.50%, 97.50% { transform: translateY(-7.84em); }
  100% { transform: translateY(-8.96em); }
}
@media (prefers-reduced-motion: reduce) { .rotator-track { animation: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-lede { max-width: 62ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--text); margin: 0; }
.hero-lede strong { font-weight: 500; color: var(--text-strong); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-actions .fine { color: var(--faint); font: 400 13px/1.4 var(--mono); }

/* Page hero (subpages) */
.page-hero { padding-block: clamp(40px, 7vw, 80px) clamp(28px, 4vw, 48px); border-top: 0; }
.page-hero .wrap { display: grid; gap: 18px; max-width: 1180px; }
.page-hero h1 { font: 800 clamp(48px, 8vw, 96px)/0.92 var(--display); text-transform: uppercase; color: var(--text-strong); }
.page-hero p { max-width: 62ch; color: var(--text); font-size: clamp(17px, 1.5vw, 20px); margin: 0; }

/* Demo video */
.demo video { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--edge); border-radius: 10px; }

/* Hero video (song take + caption) */
.hero-video { display: grid; gap: 14px; margin-top: clamp(32px, 5vw, 56px); }
.video-title { font: 800 clamp(22px, 2.6vw, 30px)/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-strong); font-style: italic; }
.hero-video video { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--edge); border-radius: 10px; }

/* Screenshot / video slots */
.shot {
  position: relative; margin: 0;
  border: 1px dashed var(--edge); border-radius: 10px;
  background: repeating-linear-gradient(135deg, var(--panel) 0 14px, var(--ground) 14px 28px);
  overflow: hidden;
  aspect-ratio: var(--aspect, 16 / 9);
  display: grid; place-items: center;
}
.shot.is-live { border-style: solid; aspect-ratio: auto; background: #000; display: block; }
.shot .shot-tag { text-align: center; padding: 18px; max-width: 46ch; }
.shot .shot-tag b { display: block; font: 500 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.shot .shot-tag span { display: block; font: 400 13.5px/1.5 var(--mono); color: var(--muted); }
.shot .shot-tag small { display: block; margin-top: 8px; font: 400 12px/1.4 var(--mono); color: var(--faint); }
.shot.is-live .shot-tag { display: none; }
.shot img, .shot video { width: 100%; height: auto; display: block; }
.shot-caption { margin-top: 10px; font-size: 14px; color: var(--muted); max-width: 72ch; }
.shot-caption b { font: 500 13px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-strong); margin-right: 10px; }

/* Zoom preview for screenshots and plugin renders: hover on desktop, double-tap on touch */
.shot img { touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) {
  .shot img, .carousel-slide img { cursor: zoom-in; }
}
.zoom-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  padding: 5vh 5vw;
  background: rgba(6, 7, 9, 0.88);
  opacity: 0; visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.zoom-overlay.is-visible { opacity: 1; visibility: visible; }
.zoom-overlay img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }

/* Feature: text beside a shot */
.feature { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.feature.flip { grid-template-columns: 7fr minmax(280px, 5fr); }
.feature.flip > .feature-text { order: 2; }
.feature-text { display: grid; gap: 14px; align-content: start; }
.feature-text h3 { font: 800 clamp(26px, 3vw, 34px)/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-strong); }
.feature-text p { color: var(--text); max-width: 56ch; }
.feature-text p.dim { color: var(--muted); }
.feature-text ul { list-style: none; margin: 0; padding: 0; display: grid; }
.feature-text li { padding: 11px 0; border-bottom: 1px solid var(--grid); max-width: 60ch; }
.feature-text li:last-child { border-bottom: 0; }
.feature-text li strong { display: block; font-weight: 500; color: var(--text-strong); margin-bottom: 2px; }
.feature-text li span { color: var(--muted); font-size: 16px; }
.feature + .feature { margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--grid); }
.shot-stack { display: grid; gap: 14px; }
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) {
  .feature, .feature.flip { grid-template-columns: 1fr; }
  .feature.flip > .feature-text { order: 0; }
}
@media (max-width: 560px) { .shot-pair { grid-template-columns: 1fr; } }

/* Track-lane layout */
.lanes { display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; }
.lane { display: grid; grid-template-columns: minmax(180px, 250px) 1fr; background: var(--ground); }
.lane-head {
  display: grid; align-content: start; gap: 10px;
  padding: 22px 20px; background: var(--panel);
  border-left: 4px solid var(--lane-color);
}
.lane-head h3 { font: 800 30px/1 var(--display); text-transform: uppercase; color: var(--text-strong); letter-spacing: 0.02em; }
.lane-body { list-style: none; margin: 0; padding: 12px 24px; display: grid; }
.lane-body li { padding: 12px 0; border-bottom: 1px solid var(--grid); max-width: 72ch; }
.lane-body li:last-child { border-bottom: 0; }
.lane-body li > strong { display: block; font-weight: 500; color: var(--text-strong); margin-bottom: 2px; }
.lane-body li span { color: var(--muted); font-size: 16px; }
@media (max-width: 720px) {
  .lane { grid-template-columns: 1fr; }
  .lane-head { border-left: 0; border-top: 4px solid var(--lane-color); padding: 18px 18px 14px; }
  .lane-body { padding: 4px 18px 10px; }
}

/* Inline state tag */
.state { font: 500 11.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.state.built { color: var(--green); }
.state.gated { color: var(--muted); }
li .state { margin-left: 8px; vertical-align: middle; }

/* Plugins */
figure { margin: 0; }
.plugin-carousel { position: relative; max-width: 860px; margin: 40px auto 0; }
.carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 12px; outline: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { box-shadow: 0 0 0 2px var(--amber); }
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }
.carousel-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; gap: 12px; align-content: start; }
.carousel-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; background: var(--ground); border: 1px solid var(--edge); border-radius: 12px; touch-action: pan-x pan-y; }
.carousel-slide figcaption { padding: 0 4px; }
.carousel-slide figcaption b { display: block; font: 500 13px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-strong); margin-bottom: 4px; }
.carousel-slide figcaption span { font-size: 15px; color: var(--muted); }
.carousel-arrow {
  position: absolute; top: 0; height: 0; padding-top: 37.5%; /* centre on the 4:3 frame */
  width: 44px; border: 0; background: none; color: var(--text-strong); cursor: pointer; z-index: 2;
}
.carousel-arrow::before {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(15, 16, 19, 0.72); border: 1px solid var(--edge);
  font: 400 26px/1 var(--body); padding-bottom: 3px;
}
.carousel-arrow.prev { left: 6px; } .carousel-arrow.next { right: 6px; }
.carousel-arrow.prev::before { content: "\2039"; } .carousel-arrow.next::before { content: "\203A"; }
.carousel-arrow:hover::before { border-color: var(--amber); color: var(--amber); }
.carousel-arrow[disabled] { opacity: 0.25; cursor: default; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.carousel-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--edge); cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.carousel-dots button[aria-selected="true"] { background: var(--amber); transform: scale(1.35); }
@media (hover: none) { .carousel-arrow { display: none; } }

.macro-feature { margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--grid); }
.feature-text-solo { max-width: 72ch; }

/* Spec sheet */
.spec { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; border-top: 1px solid var(--edge); margin: 0; }
.spec dt, .spec dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--edge); }
.spec dt { font: 500 12.5px/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-right: 20px; }
.spec dd { color: var(--text); }
.spec dd .mono { color: var(--text-strong); }
@media (max-width: 560px) {
  .spec { grid-template-columns: 1fr; }
  .spec dt { border-bottom: 0; padding-bottom: 2px; }
  .spec dd { padding-top: 0; }
}

/* Finder window: a spec list shown as the contents of a .jam folder */
.finder {
  --finder-sel: #2a5bd7;
  --finder-icon: 22px;
  --finder-indent: 56px; /* lines names up under the folder name */
  background: var(--panel); border: 1px solid var(--edge); border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.finder-bar { display: flex; gap: 8px; align-items: center; height: 38px; padding: 0 14px; background: var(--panel-raised); border-bottom: 1px solid var(--edge); }
.finder-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.finder-bar i:nth-child(2) { background: #febc2e; }
.finder-bar i:nth-child(3) { background: #28c840; }
.finder-folder {
  position: relative; display: flex; align-items: center; gap: 8px; margin: 6px 8px 2px; padding: 5px 8px 5px 26px;
  border-radius: 6px; background: var(--finder-sel); color: #fff; font: 500 16px/1.4 var(--body); max-width: none;
}
.finder-folder::before { /* disclosure triangle, open */
  content: ""; position: absolute; left: 10px; top: 50%; margin-top: -3px;
  border: 5px solid transparent; border-top: 6px solid rgba(255, 255, 255, 0.9); border-bottom: 0;
}
.finder-folder::after { /* folder icon, placed before the text via order */
  content: ""; order: -1; flex: none; width: var(--finder-icon); height: calc(var(--finder-icon) * 0.8);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 19'%3E%3Cpath d='M1 3a2 2 0 0 1 2-2h6l2 2h10a2 2 0 0 1 2 2v1H1z' fill='%233f8fe0'/%3E%3Crect x='1' y='5' width='22' height='13' rx='2' fill='%2362aef5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.spec.finder-list { grid-template-columns: minmax(200px, 300px) 1fr; border-top: 0; padding: 0 8px 8px; }
.finder-list dt, .finder-list dd { padding: 9px 0; border-bottom: 1px solid var(--grid); }
.finder-list dt:nth-last-of-type(1), .finder-list dd:last-child { border-bottom: 0; }
.finder-list dt {
  position: relative; padding-left: var(--finder-indent);
  font: inherit; letter-spacing: 0; text-transform: none; color: var(--text-strong);
}
.finder-list dd { padding-left: 12px; padding-right: 8px; color: var(--muted); }
@media (max-width: 720px) {
  .spec.finder-list { grid-template-columns: 1fr; }
  .finder-list dt { border-bottom: 0; padding-bottom: 0; }
  .finder-list dd { padding-top: 2px; padding-left: var(--finder-indent); font-size: 15px; }
  .finder-list dt:nth-last-of-type(1) { border-bottom: 0; }
}

/* Roadmap cards */
.bench { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.bench article { border: 1px dashed var(--edge); border-radius: 10px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.bench article.built { border-style: solid; background: var(--panel); }
.bench h3 { font: 500 18px/1.3 var(--body); color: var(--text-strong); }
.bench p { margin: 0; color: var(--muted); font-size: 15.5px; }
.bench p.note { color: var(--faint); font: 400 13px/1.5 var(--mono); }

/* Build log */
.log { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--edge); margin-left: 6px; }
.log li { position: relative; display: grid; grid-template-columns: 124px 1fr; gap: 4px 20px; padding: 0 0 22px 24px; }
.log li::before { content: ""; position: absolute; left: -5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--panel-raised); border: 1px solid var(--muted); }
.log li.origin::before { background: var(--amber); border-color: var(--amber); }
.log time { font: 400 13.5px/1.6 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.log p { margin: 0; }
@media (max-width: 560px) { .log li { grid-template-columns: 1fr; } }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.plan { border: 1px solid var(--edge); border-radius: 10px; padding: 24px; display: grid; gap: 14px; align-content: start; background: var(--panel); }
.plan.featured { border-color: var(--amber); }
.plan .plan-name { font: 800 30px/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-strong); }
.plan .price { font: 800 clamp(34px, 4vw, 44px)/1 var(--display); color: var(--text-strong); }
.plan .price small { font: 400 14px/1 var(--mono); color: var(--muted); margin-left: 6px; }
.plan .per { font: 400 13px/1.4 var(--mono); color: var(--faint); }
.plan .holds { color: var(--text); font-size: 15.5px; }
.plan .holds strong { font-weight: 500; color: var(--text-strong); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--muted); font-size: 15px; }
.plan li::before { content: "•"; color: var(--faint); margin-right: 8px; }
.plan-note { margin-top: 14px; color: var(--faint); font: 400 13px/1.5 var(--mono); max-width: 80ch; }
.included { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 28px; list-style: none; padding: 0; margin: 0; }
.included li { padding: 12px 0; border-bottom: 1px solid var(--grid); }
.included li strong { display: block; font-weight: 500; color: var(--text-strong); }
.included li span { color: var(--muted); font-size: 15px; }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--edge); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--edge); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative; font-weight: 400; color: var(--text-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 22px/1 var(--mono); color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 20px; color: var(--muted); max-width: var(--measure); }

/* Beta */
.beta-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .beta-grid { grid-template-columns: 1fr; } }
.beta-grid > div > p { color: var(--muted); max-width: 52ch; }
.beta-form { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--edge); border-radius: 10px; background: var(--panel); }
.field { display: grid; gap: 7px; }
.field label { font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select {
  width: 100%; min-height: 46px; padding: 0 14px;
  background: var(--ground); color: var(--text-strong);
  border: 1px solid var(--edge); border-radius: 6px;
  font: 400 16px/1 var(--body);
}
.field input::placeholder { color: var(--faint); }
.field input:focus, .field select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); }
.field input:disabled, .field select:disabled { color: var(--faint); cursor: not-allowed; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 0; font-size: 13.5px; color: var(--faint); }
.form-status { margin: 0; font-size: 15px; min-height: 1.6em; }
.form-status.ok { color: var(--green); }
.form-status.error { color: var(--red); }

/* Callout */
.callout { border: 1px solid var(--edge); border-left: 4px solid var(--amber); border-radius: 10px; padding: 20px 24px; background: var(--panel); max-width: 80ch; }
.callout p { margin: 0; color: var(--text); }
.callout p + p { margin-top: 8px; }

/* Footer */
.site-footer { border-top: 1px solid var(--edge); padding-block: 36px 48px; color: var(--faint); font-size: 13.5px; }
.site-footer .wrap { display: grid; gap: 10px; }
.site-footer p { margin: 0; max-width: 90ch; }
.site-footer a { color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }

/* Latency lanes as a swipe carousel: one lane per slide. Tiles are never stretched
   to a common height, so there is no spare space: text always starts at the top. */
.lane-carousel { max-width: 980px; margin-top: 0; }
.lane-carousel .carousel-track { align-items: flex-start; }
.lane-carousel .lane { gap: 0; align-content: start; align-items: start; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; }
.lane-carousel .lane-head { align-self: stretch; }
.lane-carousel .lane-body { align-content: start; }
.lane-carousel .carousel-arrow { top: 50%; padding-top: 0; transform: translateY(-50%); }
.lane-carousel .carousel-arrow.prev { left: -56px; } .lane-carousel .carousel-arrow.next { right: -56px; }
@media (max-width: 1120px) { .lane-carousel .carousel-arrow { display: none; } }
@media (max-width: 720px) { .lane-carousel .lane-head { align-self: start; } }

/* Roadmap bench cards as a swipe carousel: one card per slide, same rules as the
   lanes (never stretched, arrows outside the frame on wide screens). */
.card-carousel { display: block; max-width: 760px; margin: 0 auto; }
.card-carousel .carousel-track { align-items: flex-start; }
.card-carousel article.carousel-slide { gap: 8px; }
.card-carousel .carousel-arrow { top: 50%; padding-top: 0; transform: translateY(-50%); }
.card-carousel .carousel-arrow.prev { left: -56px; } .card-carousel .carousel-arrow.next { right: -56px; }
@media (max-width: 900px) { .card-carousel .carousel-arrow { display: none; } }

/* Whole sections as a swipe carousel (made in the site editor: a section pill's ⇄
   joins it with the next one). Each slide is one section's head and body, and
   keeps that section's id so anchors still land. The dots and arrows sit above
   the slides, so the "there's more" signal shows before a tall slide scrolls by.
   Slides are never stretched: a short one just leaves room before the next section. */
.section-carousel { display: flex; flex-direction: column; max-width: none; margin: 0; }
/* The track is pulled out 6px a side and the slides padded back in, so text sits
   where it always did but a glyph's overhang (the W in a label) isn't clipped. */
.section-carousel .carousel-track { align-items: flex-start; border-radius: 0; margin-inline: -6px; }
.section-carousel .carousel-slide { display: block; min-width: 0; padding-inline: 6px; }
.section-carousel .carousel-dots { order: -1; justify-content: flex-start; align-items: center; min-height: 40px; margin: 0 96px 20px 0; }
.section-carousel .carousel-arrow { top: 0; width: 40px; height: 40px; padding-top: 0; }
.section-carousel .carousel-arrow.prev { left: auto; right: 48px; } .section-carousel .carousel-arrow.next { right: 0; }
@media (hover: none) { .section-carousel .carousel-dots { margin-right: 0; } }

/* JAMWire swap: the logo image stands in for the .hero-brand wordmark */
.hero-logo { display: block; width: min(100%, 900px); height: auto; margin: 0 auto; }
.wordmark img.mark { border-radius: 5px; }