/* Airlock — landing page.
 *
 * Light editorial. The page is paper; the app is the only black object on it.
 * That inversion is the whole design: every panel mockup is a real, dark,
 * shadow-casting thing sitting on a warm sheet, which is what a notch panel
 * actually is — a screen you look up at, not a slide in a dark deck.
 *
 * The 695 lines of panel-mockup CSS below are unchanged from the dark build.
 * They keep working because `.panel` re-declares the app's own dark tokens for
 * its subtree (see "panel token scope"), so the mockups are theme-independent
 * objects rather than something that has to be re-drawn per surface.
 *
 * Sizes scale through clamp() or a breakpoint, never by redrawing.
 */

/* ---------------------------------------------------------------- fonts --
 * Self-hosted rather than pulled from Google, so `font-src 'self'` holds and
 * the privacy page's "no third-party anything" stays literally true. Space
 * Grotesk ships as a variable font: one file covers 500/600/700, which is why
 * there are two files here (latin, latin-ext) and not six. OFL-1.1, see
 * assets/fonts/OFL.txt.
 */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-ext.woff2") format("woff2");
  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;
}

/* --------------------------------------------------------------- tokens --
 * Every text pair below was measured with the contrast checker before it was
 * written down. The lowest is 4.53:1 (--faint on --paper-2); nothing that
 * carries words is under AA for normal text. If you add a colour, measure it.
 */
:root {
  /* paper — one temperature, warm, three depths */
  --paper-0: #fbf9f5; /* raised: cards, the price block */
  --paper-1: #f3f0e9; /* ground */
  --paper-2: #e8e4d9; /* recessed bands */

  /* ink — warm-neutral, four steps, all AA on both papers */
  --ink: #14161a;    /* 15.91 : 1  headings, primary */
  --body: #43474e;   /*  8.20 : 1  body copy */
  --soft: #5f636b;   /*  5.30 : 1  secondary */
  --faint: #60636a;  /*  5.29 : 1  captions, keycaps, fineprint */

  --rule: rgba(20, 22, 26, 0.11);
  --rule-strong: rgba(20, 22, 26, 0.2);

  /* accent — the app's ice blue is 1.6:1 on paper, so it cannot carry text
     here. It stays for fills and inside panels; text uses the deep end. */
  --accent: #0d6a8a;        /* 5.35 : 1 */
  --accent-deep: #084f68;   /* 7.92 : 1  hover */
  --accent-bright: #5ac8fa; /* fills and panel interiors only */
  --accent-wash: rgba(13, 106, 138, 0.09);

  /* semantic, darkened for paper — the bright versions live on in .panel */
  --amber-bright: #f5a524; /* on the dark band only — 9.6 : 1 there */
  --red-ink: #a53a2a;   /* 5.70 : 1 */
  --amber-ink: #8a5605; /* 5.31 : 1 */
  --green-ink: #1b6d36; /* 5.61 : 1 */

  /* the dark band, and the app's own palette it borrows */
  --dark: #0a0a0b;
  --dark-ink: #eaedf3;   /* 16.87 : 1 */
  --dark-body: #a8b2c0;  /*  9.23 : 1 */
  --dark-faint: #8b93a1; /*  6.39 : 1 */
  --dark-rule: rgba(255, 255, 255, 0.11);

  /* type */
  --display: "Space Grotesk", -apple-system, system-ui, sans-serif;
  --text: -apple-system, "SF Pro Text", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale — eight steps, named. Use weight and colour before reaching
     for a ninth. */
  --t-caption: 12px;
  --t-small: 13px;
  --t-base: 16px;
  --t-lg: 18px;
  --t-xl: 21px;
  --t-2xl: clamp(24px, 2.2vw, 30px);
  --t-3xl: clamp(30px, 3.3vw, 44px);
  --t-display: clamp(44px, 6.4vw, 92px);

  /* spacing — non-linear, so "next value up" is usually the right move */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* elevation — real here for the first time. On near-black a shadow is
     invisible; on paper it is how the panels read as objects. */
  --e1: 0 1px 2px rgba(20, 22, 26, 0.06);
  --e2: 0 2px 4px rgba(20, 22, 26, 0.05), 0 8px 16px rgba(20, 22, 26, 0.06);
  --e3: 0 4px 8px rgba(20, 22, 26, 0.06), 0 18px 36px rgba(20, 22, 26, 0.1);
  --e4: 0 8px 16px rgba(20, 22, 26, 0.08), 0 36px 72px rgba(20, 22, 26, 0.16);

  --radius: 20px;
  --radius-band: 28px;

  /* layout */
  /* % resolves against .page, not the viewport, so a classic scrollbar
     cannot quietly eat the margin the panel ladder is measured against. */
  --pad: clamp(20px, 6.1%, 88px);
  --canvas: 1440px;
  --measure: 62ch;

  /* mockup scale — see the ladder in the responsive section */
  --z-hero: 1.1;
  --z-fig: 0.86;
  --z-agents: 0.9;
}

/* ----------------------------------------------------- panel token scope --
 * The mockups are the app, and the app is dark. Rather than fork 695 lines of
 * panel CSS for a light page, the panel re-declares the tokens it draws with,
 * so everything inside it resolves against the app's palette and everything
 * outside resolves against paper.
 */
.panel {
  --ink: #eaedf3;
  --muted: #919cad;
  --dim: #616b7a;
  --dim-2: #6b7686;
  --quiet: #5c6472;
  --rule: rgba(255, 255, 255, 0.09);
  --rule-soft: rgba(255, 255, 255, 0.08);
  --fill: rgba(255, 255, 255, 0.035);
  --fill-line: rgba(255, 255, 255, 0.05);
  --hairline: rgba(255, 255, 255, 0.06);
  --accent: #5ac8fa;
  --accent-hi: #8fdbff;
  --on-accent: #06222c;
  --green: #30d158;
  --on-green: #05260f;
  --amber: #f5a524;
  --red: #ff6b5e;
  --claude: #d97757;
  --code: #f3d9a8;
}

/* ----------------------------------------------------------------- base -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper-1);
  color: var(--body);
  font-family: var(--text);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-deep);
}

img,
svg {
  display: block;
}

h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On the dark band and inside ink blocks the paper accent disappears. */
.band--dark :focus-visible,
.band--ink :focus-visible {
  outline-color: var(--accent-bright);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------- shell --- */
.page {
  max-width: var(--canvas);
  margin: 0 auto;
  background: var(--paper-1);
}

.wrap {
  padding-inline: var(--pad);
}

section[id],
div[id] {
  scroll-margin-top: 88px;
}

/* Bands are the rhythm. A page of 713 words needs its structure carried by
   surface changes rather than by more words, and inset rounded rectangles
   echo the one shape the product already has. */
.band {
  margin-inline: var(--pad);
  border-radius: var(--radius-band);
  padding: clamp(48px, 5.6vw, 84px) clamp(24px, 3.4vw, 56px);
}
.band--tint {
  background: var(--paper-2);
}
.band--dark {
  background: var(--dark);
  color: var(--dark-body);
  /* The three status dots in .points are set inline from the app's palette,
     which only exists inside .panel. On the dark band they are correct as
     drawn, so the band lends them the same values. */
  --red: #ff6b5e;
  --amber: #f5a524;
  --green: #30d158;
}
.band--dark h2,
.band--dark h3 {
  color: var(--dark-ink);
}
.band--ink {
  background: var(--ink);
  color: var(--dark-body);
}
.band--ink h2 {
  color: var(--paper-0);
}

/* ----------------------------------------------------------------- nav --- *
 * Sticky, because the page is 5 screens long and the only action worth taking
 * is in it. It gets a rule and a blur only once you have scrolled past the
 * hero, so it is flat where the page is flat.
 */
.head-sentinel {
  height: 1px;
  margin-bottom: -1px;
}

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper-1) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-head.is-stuck {
  border-bottom-color: var(--rule);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-head {
    background: var(--paper-1);
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.brand:hover {
  color: var(--ink);
}
.brand img {
  width: 26px;
  height: 26px;
}
.brand span {
  font: 700 var(--t-lg) / 1 var(--display);
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s6);
  font: 500 14px/1 var(--text);
}
.nav-links a:not(.btn) {
  color: var(--soft);
}
.nav-links a:not(.btn):hover {
  color: var(--ink);
}

/* -------------------------------------------------------------- buttons -- *
 * One primary treatment on the whole site: ink on paper. The old build had an
 * ice-blue pill that is 1.6:1 against this ground; solid ink is both the
 * highest-contrast and the quietest thing available, which is the right trade
 * for a page whose single action repeats four times.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  padding: 0 28px;
  border-radius: 26px;
  font: 600 var(--t-base) / 1 var(--text);
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn--primary {
  background: var(--ink);
  color: var(--paper-0);
  box-shadow: var(--e2);
}
.btn--primary:hover {
  background: #2c3038;
  color: var(--paper-0);
  box-shadow: var(--e3);
}
.btn--primary:active {
  transform: translateY(1px);
  box-shadow: var(--e1);
}

.btn--ghost {
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-weight: 500;
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: rgba(20, 22, 26, 0.03);
}

/* the inverse, for the dark band and the ink CTA */
.btn--paper {
  background: var(--paper-0);
  color: var(--ink);
}
.btn--paper:hover {
  background: #fff;
  color: var(--ink);
}

.btn--sm {
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  font-size: 14px;
  gap: 7px;
}

/* --------------------------------------------------------------- kicker -- */
.kicker {
  font: 600 var(--t-caption) / 1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.kicker--amber {
  color: var(--amber-ink);
}
.kicker--dark-amber {
  color: var(--amber-bright);
}

.fineprint {
  font: 400 var(--t-small) / 1.5 var(--mono);
  color: var(--faint);
}
.fineprint--dark {
  color: var(--dark-faint);
}

/* ---------------------------------------------------------------- hero --- *
 * Left-aligned, against a centred hero in the old build. Centring three
 * consecutive sections gave the page no stable reading edge; one edge, held
 * from here to the footer, is most of what makes this feel designed.
 */
.hero {
  padding-top: clamp(40px, 5vw, 76px);
  /* Deep enough that the panel, pulled up below, overlaps the band edge and
     not the fineprint. The two clamps are a pair — change one, re-measure. */
  padding-bottom: clamp(88px, 8.5vw, 128px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s5);
  max-width: 940px;
}

.hero-eyebrow {
  margin-bottom: calc(var(--s3) * -1);
}

.hero h1 {
  font: 700 var(--t-display) / 0.97 var(--display);
  letter-spacing: -0.045em;
}

.hero-sub {
  max-width: 34em;
  font: 400 clamp(17px, 1.32vw, 20px) / 1.6 var(--text);
  color: var(--body);
  text-wrap: pretty;
}

.hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s1);
}

/* ---------------------------------------------------------- hero stage --- *
 * The panel overlaps the paper/tint seam rather than sitting inside a section
 * of its own. It reads as descending into the page, which is the one thing the
 * product literally does, and it puts the mockup above the fold on a laptop
 * instead of 900px down.
 */
.hero-stage {
  padding-top: 0;
  padding-bottom: clamp(36px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
}

.hero-stage .stage {
  margin-top: clamp(-88px, -5.5vw, -44px);
}

.shot-label {
  font: 500 var(--t-caption) / 1 var(--mono);
  color: var(--faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.shot-label--dark {
  color: var(--dark-faint);
}
/* ------------------------------------------------------- panel mockups --- *
 * The panel is drawn at its true 640pt width and scaled with `zoom`, which is
 * what the artboard does — unlike a transform, it takes up the space it ends
 * up occupying, so the page below it lands where it should.
 */
.stage {
  display: flex;
  justify-content: center;
  max-width: 100%;
}

.stage > .zoom {
  zoom: var(--z, 1);
}

.stage--hero {
  --z: var(--z-hero);
}
.stage--fig {
  --z: var(--z-fig);
}
.stage--agents {
  --z: var(--z-agents);
}

.panel {
  width: 640px;
  background: #000;
  color: var(--ink);
  border-radius: 0 0 20px 20px;
  padding-bottom: 6px;
  /* The hero centres its own text, and on the artboard that leaks into the
     panel — track title, device names and all — while the three panels in
     sections that do not centre render leading-aligned. The app aligns
     leading; so does this. */
  text-align: left;
}
.panel--lift {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* A real capture standing in for a mockup. Same box as `.panel`: drawn at the
   panel's own width and scaled by the stage's `zoom`, so it occupies exactly
   the space the drawn version did. */
.shot {
  display: block;
  width: 640px;
  height: auto;
  border-radius: 0 0 20px 20px;
}
.shot--lift {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.drop-hero {
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6));
}
.drop-agents {
  filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.5));
}

/* the strip either side of the physical cutout */
.panel-bar {
  height: 32px;
  display: flex;
  align-items: center;
}
.pb-tabs {
  width: 220px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 5px;
}
.pb-cutout {
  width: 200px;
  height: 32px;
  flex: none;
}
.pb-right {
  width: 220px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-right: 10px;
}

.tab {
  width: 36px;
  height: 26px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
}
.tab--wide {
  width: 48px;
  gap: 3px;
}
.tab.is-on {
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink);
}
.tab-count {
  font: 700 11px/1 var(--text);
}

.pb-chevron {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.pb-pct {
  font: 600 11px/1 var(--text);
  color: var(--ink);
}

.usage {
  display: flex;
  align-items: center;
  gap: 5px;
}

.panel-body {
  padding: 8px 10px 0;
}

.stack {
  display: flex;
  flex-direction: column;
}
.stack--7 {
  gap: 7px;
}
.stack--8 {
  gap: 8px;
}

/* cards inside the panel */
.card {
  background: var(--fill);
  border: 1px solid var(--fill-line);
  border-radius: 12px;
}
.card--pad {
  padding: 8px 10px;
}

.tag {
  font: 600 10px/1.2 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
}
.tag--muted {
  color: var(--muted);
}
.tag--accent {
  color: var(--accent);
}
.tag--green {
  color: var(--green);
}
.tag--amber {
  color: var(--amber);
}

.num {
  font-variant-numeric: tabular-nums;
  font: 600 10px/1.2 var(--mono);
  color: var(--ink);
}

.hair {
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.ellipsis {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* now playing */
.np {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.02) 46%,
    transparent
  );
}
.np-art {
  width: 96px;
  height: 96px;
  flex: none;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0 4px,
    rgba(255, 255, 255, 0.04) 4px 8px
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.np-art span {
  font: 500 8px/1 var(--mono);
  color: rgba(255, 255, 255, 0.45);
  padding: 4px;
  letter-spacing: 0.04em;
}
.np-title {
  font: 600 17px/1.25 var(--text);
  letter-spacing: -0.01em;
}
.np-artist {
  font: 400 12px/1.4 var(--text);
  color: var(--muted);
  margin-top: 2px;
}
.np-transport {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px 0 8px;
  color: var(--ink);
}
.np-time {
  font-variant-numeric: tabular-nums;
  font: 600 10px/1.2 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-left: 2px;
}
.np-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.np-track > i {
  display: block;
  height: 2px;
  background: var(--accent);
}

/* quick toggles */
.quick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.quick-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--dim);
}
.quick-dot--on {
  background: rgba(90, 200, 250, 0.18);
  border-color: rgba(90, 200, 250, 0.55);
  color: var(--accent);
}
.quick-dot--live {
  background: rgba(90, 200, 250, 0.3);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(90, 200, 250, 0.14);
}
.quick-dot--amber {
  background: rgba(245, 165, 36, 0.2);
  border-color: rgba(245, 165, 36, 0.55);
  color: var(--amber);
}
.quick-dot--neutral {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--ink);
}

.vrule {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.07);
  margin: 0 2px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font: 600 10px/1 var(--text);
  color: var(--muted);
}
.chip--sm {
  height: 20px;
  border-radius: 10px;
}

.dev-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}
.dev-icon {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  flex: none;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.28) 0 2px,
    rgba(255, 255, 255, 0.1) 2px 4px
  );
}
.dev-name {
  flex: 1;
  font: 600 11.5px/1 var(--text);
}

/* per-app levels */
.levels {
  display: flex;
  gap: 6px;
  height: 96px;
}
.level {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.level-bar {
  width: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  position: relative;
  overflow: hidden;
  flex: 1;
}
.level-bar > i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(90, 200, 250, 0.26);
  border-top: 1.5px solid var(--accent);
}
.level-bar--focus {
  box-shadow: inset 0 0 0 1px rgba(90, 200, 250, 0.45);
}
.level-tip {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--ink);
  color: #050608;
  font: 600 10px/20px var(--text);
  white-space: nowrap;
}

/* calendar */
.evt {
  display: flex;
  align-items: center;
  gap: 8px;
}
.evt-bar {
  width: 3px;
  height: 24px;
  border-radius: 1.5px;
  background: var(--green);
  flex: none;
}
.evt-title {
  font: 600 11.5px/1.3 var(--text);
}
.evt-when {
  font-variant-numeric: tabular-nums;
  font: 500 10px/1.3 var(--text);
  color: var(--muted);
}
.evt-join {
  height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  font: 700 10.5px/1 var(--text);
  flex: none;
}

/* clipboard */
.cb-search {
  flex: 1;
  min-width: 0;
  height: 30px;
  border-radius: 8px;
  background: var(--fill);
  border: 1px solid var(--fill-line);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
}
.cb-search span {
  font: 400 12px/1 var(--text);
  color: var(--dim);
}
.cb-filter {
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(90, 200, 250, 0.18);
  border: 1px solid rgba(90, 200, 250, 0.45);
  display: flex;
  align-items: center;
  font: 600 10.5px/1 var(--text);
  flex: none;
}
.cb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 28px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--fill);
  border: 1px solid var(--fill-line);
}
.cb-item--sel {
  background: rgba(90, 200, 250, 0.14);
  border-color: rgba(90, 200, 250, 0.4);
}
.cb-text {
  flex: 1;
  font: 400 11.5px/1 var(--text);
  color: var(--ink);
}
.cb-key {
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  flex: none;
}

/* shelf */
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.shelf-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.shelf-thumb {
  height: 56px;
  border-radius: 8px;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0 4px,
    rgba(255, 255, 255, 0.04) 4px 8px
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.shelf-thumb span {
  font: 500 8px/1 var(--mono);
  color: rgba(255, 255, 255, 0.45);
  padding: 4px;
}
.shelf-thumb--sel {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.shelf-thumb--plain {
  background: rgba(255, 255, 255, 0.05);
  align-items: center;
}
.shelf-check {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shelf-name {
  font: 500 10px/1.2 var(--text);
  color: var(--ink);
}
.dest {
  background: var(--fill);
  border: 1px solid var(--fill-line);
  border-radius: 12px;
  height: 28px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}
.dest-name {
  font: 600 10px/1.2 var(--text);
}
.dest--drop {
  background: rgba(90, 200, 250, 0.14);
  border-color: rgba(90, 200, 250, 0.45);
  height: auto;
  flex: 1;
  min-height: 0;
  padding: 7px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

/* agent session cards */
.sess {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  background: var(--fill);
  border: 1px solid var(--fill-line);
}
.sess-spine {
  width: 3px;
  flex: none;
}
.sess-main {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
}
.sess-head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sess-title {
  font: 600 13px/1.2 var(--text);
}
.sess-note {
  font: 400 11.5px/1.45 var(--text);
  color: var(--muted);
}
.sess--gate {
  background: rgba(245, 165, 36, 0.07);
  border-color: rgba(245, 165, 36, 0.28);
}
.sess--ok {
  background: rgba(48, 209, 88, 0.07);
  border-color: rgba(48, 209, 88, 0.32);
}
.sess--quiet {
  background: rgba(255, 255, 255, 0.025);
}

.badge {
  height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  background: rgba(245, 165, 36, 0.22);
  border: 1px solid rgba(245, 165, 36, 0.45);
  display: flex;
  align-items: center;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--amber);
  flex: none;
}

.gate {
  border-radius: 12px;
  background: rgba(245, 165, 36, 0.08);
  border: 1px solid rgba(245, 165, 36, 0.3);
  padding: 10px;
}
.gate-cmd {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 9px;
}
.gate-cmd > span:first-child {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
  margin-top: 5px;
}
.gate-cmd code {
  flex: 1;
  min-width: 0;
  font: 500 12px/1.4 var(--mono);
  color: var(--red);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gate-actions {
  display: flex;
  gap: 6px;
}
.act {
  flex: 1;
  height: 29px;
  border-radius: 8px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 12px/1 var(--text);
  cursor: default;
}
.act kbd {
  font: inherit;
  margin-left: 5px;
}
.act--approve {
  background: var(--green);
  color: var(--on-green);
}
.act--approve kbd {
  color: rgba(5, 38, 15, 0.55);
}
.act--deny {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}
.act--deny kbd {
  color: rgba(234, 237, 243, 0.55);
}
.act--always {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--muted);
}
.gate-rule {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: var(--dim);
  font: 400 10px/1.3 var(--text);
}
.gate-rule code {
  font: 500 10px/1.3 var(--mono);
  color: var(--muted);
}

/* The approval demo swaps these two (see app.js). Both live in one grid cell,
   so the panel always stands at the taller state's height and answering the
   gate doesn't yank 106px out from under the section. */
.demo-swap {
  display: grid;
}
.demo-swap > * {
  grid-area: 1 / 1;
  align-self: start;
  transition: opacity 0.18s ease;
}
[data-gate-state="allowed"] .demo-gate,
[data-gate-state="gate"] .demo-allowed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* -------------------------------------------------------------- section -- */
.sec {
  padding-top: clamp(72px, 9vw, 128px);
}
.sec--tight {
  padding-top: clamp(48px, 5.6vw, 80px);
}

.sec-head {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-width: 660px;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.sec-head h2 {
  font: 700 var(--t-3xl) / 1.05 var(--display);
  letter-spacing: -0.035em;
}
.sec-head p {
  font: 400 var(--t-lg) / 1.6 var(--text);
  color: var(--body);
  text-wrap: pretty;
}

/* ------------------------------------------------------------ features -- *
 * The artboard's 01–05 numerals are back, doing the job the big ghosted
 * version could not do in a five-across grid: they sit above each rule as
 * markers, so the count reads at a glance and each cell has an anchor.
 * Numbering is a counter, so the markup carries no hard-coded ordinals.
 */
.gaps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s5) var(--s6);
  counter-reset: gap;
}

.gap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-strong);
  counter-increment: gap;
}
.gap::before {
  content: counter(gap, decimal-leading-zero);
  font: 500 var(--t-caption) / 1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--faint);
}

.gap-icon {
  color: var(--accent);
  margin-top: var(--s1);
}
.gap h3 {
  font: 600 var(--t-lg) / 1.3 var(--display);
  letter-spacing: -0.02em;
}
.gap p {
  flex: 1;
  font: 400 15px/1.55 var(--text);
  color: var(--soft);
  text-wrap: pretty;
}

/* A keycap, not a caption. It was 12px grey text at 3.76:1 before. */
.gap-key {
  font: 500 var(--t-caption) / 1 var(--mono);
  color: var(--body);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 5px 8px;
}

/* ------------------------------------------------- panels, on paper -- *
 * The panel shadows above were tuned for a near-black page, where they are
 * essentially invisible. On paper a dark object needs a real shadow or it
 * looks pasted on, and it needs a warm one or it looks grey. These override
 * the three treatments rather than editing the panel block, which stays as
 * the app drew it.
 */
.panel--lift {
  box-shadow: 0 4px 10px rgba(20, 22, 26, 0.1),
    0 24px 48px rgba(20, 22, 26, 0.18);
}
.drop-hero {
  filter: drop-shadow(0 12px 24px rgba(20, 22, 26, 0.12))
    drop-shadow(0 40px 70px rgba(20, 22, 26, 0.2));
}
/* The agents panel sits on the dark band, so it keeps the dark treatment. */
.drop-agents {
  filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.55));
}

/* ------------------------------------------------------------- figures -- *
 * Two dark panels on paper. The caption is the claim and the panel is the
 * evidence, so the claim goes first and the panel sits under it — the old
 * build had the panel float on a stage with the sentence below, which reads
 * as a gallery label rather than an argument.
 */
.figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 3.4vw, 56px);
  align-items: start;
}

.figures figure {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.figures figcaption {
  font: 400 var(--t-base) / 1.6 var(--text);
  color: var(--soft);
  max-width: 44ch;
  text-wrap: pretty;
}
.figures figcaption b {
  display: block;
  font: 600 var(--t-xl) / 1.3 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--s2);
}

/* -------------------------------------------------------------- agents -- *
 * The one dark band on the page, and the only section that keeps the app's
 * own palette wholesale. It is the differentiator, it contains the live gate
 * demo, and after four screens of paper it lands like a light going out.
 */
.agents {
  margin-top: clamp(72px, 9vw, 128px);
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: clamp(40px, 4.4vw, 72px);
  align-items: center;
}

.agents-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.agents-copy h2 {
  font: 700 var(--t-2xl) / 1.1 var(--display);
  letter-spacing: -0.03em;
}
.agents-copy > p {
  font: 400 var(--t-base) / 1.65 var(--text);
  color: var(--dark-body);
  text-wrap: pretty;
}

.points {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s2);
}
.point {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--dark-rule);
  font: 400 15px/1.55 var(--text);
  color: var(--dark-body);
}
.point i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  transform: translateY(-1px);
}
.point b {
  color: var(--dark-ink);
  font-weight: 600;
}

.aside {
  margin-top: var(--s2);
  font: 400 var(--t-small) / 1.6 var(--text);
  color: var(--dark-faint);
}

.agents-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
}

/* --------------------------------------------------------------- quote -- */
.quote {
  padding-top: clamp(72px, 9vw, 128px);
}
.quote p {
  max-width: 22ch;
  font: 700 clamp(30px, 4vw, 58px) / 1.1 var(--display);
  letter-spacing: -0.04em;
  color: var(--ink);
  text-wrap: balance;
}
.quote span {
  color: var(--faint);
}

/* --------------------------------------------------------------- price -- *
 * The price is the only raised surface on the site. On the old build this was
 * the one light band in a dark page and it arrived unannounced; here it is
 * the one thing that lifts off the paper, which is a quieter way to say the
 * same "this is the decision" thing.
 */
.price {
  margin-top: clamp(72px, 9vw, 128px);
}

.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 4.4vw, 72px);
  align-items: start;
}

.price-col {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  background: var(--paper-0);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--e3);
  padding: clamp(28px, 3vw, 44px);
}
.price-col h2 {
  font: 700 var(--t-2xl) / 1.08 var(--display);
  letter-spacing: -0.03em;
}
.price-col > p {
  font: 400 15px/1.6 var(--text);
  color: var(--soft);
  text-wrap: pretty;
}
.price-col .btn {
  align-self: flex-start;
  margin-top: var(--s1);
}

.price-tag {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.price-tag b {
  font: 700 clamp(48px, 5vw, 72px) / 0.9 var(--display);
  letter-spacing: -0.05em;
  color: var(--ink);
}
.price-tag span {
  font: 400 var(--t-small) / 1.5 var(--mono);
  color: var(--faint);
}

/* ----------------------------------------------------------------- faq --- */
.faq {
  display: flex;
  flex-direction: column;
}

.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) 0;
  cursor: pointer;
  list-style: none;
  font: 600 var(--t-base) / 1.4 var(--display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font: 400 var(--t-xl) / 1 var(--mono);
  color: var(--faint);
  flex: none;
  transition: transform 0.18s ease;
}
.faq details[open] summary::after {
  content: "−";
}
.faq summary:hover {
  color: var(--accent-deep);
}
.faq details p {
  padding-bottom: var(--s5);
  max-width: 52ch;
  font: 400 15px/1.65 var(--text);
  color: var(--soft);
  text-wrap: pretty;
}

/* ------------------------------------------------------------ download -- */
.get {
  margin-top: clamp(72px, 9vw, 128px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s5);
}
.get h2 {
  font: 700 var(--t-3xl) / 1.05 var(--display);
  letter-spacing: -0.04em;
}
.get > p {
  max-width: 46ch;
  font: 400 var(--t-lg) / 1.6 var(--text);
  color: var(--dark-body);
  text-wrap: pretty;
}

/* -------------------------------------------------------------- footer -- */
.foot {
  margin-top: clamp(56px, 6vw, 88px);
  padding-block: var(--s6) var(--s7);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s5);
}
.foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 var(--t-small) / 1.5 var(--text);
  color: var(--faint);
}
.foot-brand img {
  flex: none;
}
.foot-links {
  display: flex;
  gap: var(--s5);
  font: 500 var(--t-small) / 1 var(--text);
  flex-wrap: wrap;
}
.foot-links a {
  color: var(--soft);
}
.foot-links a:hover {
  color: var(--ink);
}

/* ------------------------------------------------------ document pages -- *
 * Privacy, terms, refunds. Same shell as the landing page; the body copy is
 * carried over verbatim, because it was written carefully and rewriting legal
 * text to match a new typeface is how a claim quietly stops being true.
 */
.doc {
  max-width: 72ch;
  padding-block: clamp(32px, 4vw, 56px) clamp(72px, 9vw, 128px);
}

.back {
  display: inline-block;
  margin-bottom: clamp(32px, 4vw, 56px);
  font: 500 14px/1 var(--text);
  color: var(--soft);
}
.back:hover {
  color: var(--ink);
}

.doc h1 {
  font: 700 clamp(36px, 4vw, 56px) / 1.05 var(--display);
  letter-spacing: -0.035em;
}

.updated {
  margin-top: var(--s3);
  font: 400 var(--t-small) / 1 var(--mono);
  color: var(--faint);
}

.doc h2 {
  margin-top: clamp(40px, 4.4vw, 60px);
  font: 600 clamp(20px, 1.7vw, 24px) / 1.3 var(--display);
  letter-spacing: -0.02em;
}

.doc p,
.doc li {
  font: 400 var(--t-base) / 1.75 var(--text);
  color: var(--body);
  text-wrap: pretty;
}
.doc p {
  margin-top: var(--s4);
}
.doc ul {
  margin: var(--s4) 0 0;
  padding-left: 20px;
}
.doc li {
  margin-top: var(--s2);
}
.doc li::marker {
  color: var(--faint);
}
.doc strong {
  color: var(--ink);
  font-weight: 600;
}
.doc code {
  font: 400 14px/1.5 var(--mono);
  color: var(--ink);
  background: var(--paper-2);
  border-radius: 4px;
  padding: 2px 5px;
}

/* ----------------------------------------------------------- responsive --- *
 * Two regimes.
 *
 * Above 900px the bands are inset rounded rectangles and the wide sections run
 * two-up. Below it the bands go edge-to-edge — a card that has to hold a
 * 640pt mockup has no business also spending 48px a side on padding — and the
 * panel zoom ladder takes over.
 *
 * `zoom` needs a plain number and CSS cannot compute a ratio, so the scale is
 * a ladder of rungs, not a fluid calc(). Every rung is chosen so 640 × zoom
 * still fits the content box at the narrow end of its range; the tightest has
 * 32px to spare (0.8, measured at 621px). If you change --pad, .band padding, or a rung, re-measure —
 * the failure mode is a mockup poking out of the page, and `overflow-x:
 * hidden` on body will hide it from you rather than break the build.
 */

/* two-up → one-up, at the width where each column stops fitting a panel */
@media (max-width: 1340px) {
  .figures {
    grid-template-columns: 1fr;
    gap: clamp(48px, 6vw, 80px);
  }
  .figures figcaption {
    max-width: 56ch;
  }
}

@media (max-width: 1240px) {
  .agents {
    grid-template-columns: 1fr;
    gap: clamp(32px, 4vw, 48px);
  }
  .agents-copy {
    max-width: 620px;
  }
}

@media (max-width: 1100px) {
  :root {
    --z-hero: 0.95;
  }
  .gaps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s6) var(--s6);
  }
}

@media (max-width: 980px) {
  .price-grid {
    grid-template-columns: 1fr;
  }
}

/* bands lose their inset; the ladder starts */
@media (max-width: 900px) {
  :root {
    --z-hero: 0.8;
    --z-fig: 0.8;
    --z-agents: 0.8;
  }
  .band {
    margin-inline: 0;
    border-radius: 0;
    padding-inline: var(--pad);
  }
  .nav-links {
    gap: var(--s5);
  }
}

@media (max-width: 760px) {
  .gaps {
    grid-template-columns: repeat(2, 1fr);
  }
  .foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 620px) {
  :root {
    --z-hero: 0.6;
    --z-fig: 0.6;
    --z-agents: 0.6;
  }
  .nav-links a:not(.btn) {
    display: none;
  }
  .hero-cta .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  :root {
    --z-hero: 0.48;
    --z-fig: 0.48;
    --z-agents: 0.48;
  }
  .gaps {
    grid-template-columns: 1fr;
  }
  .quote p {
    max-width: none;
  }
}

@media (max-width: 390px) {
  :root {
    --z-hero: 0.38;
    --z-fig: 0.38;
    --z-agents: 0.38;
  }
}