/* Scrinly — marketing site.
 *
 * No framework, no build step, no external requests. The whole page is this
 * file plus one HTML document, which is why it loads in one round trip and why
 * a copy change is a one-file diff.
 *
 * Fonts are the system stack rather than a webfont: a render-blocking request
 * to a font CDN would cost more than it buys on a page whose job is to load
 * instantly.
 */

:root {
  --bg: #08090a;
  --bg-raised: #0d0f11;
  --panel: #101315;
  --panel-2: #14181b;

  --text: #f7f8f8;
  --text-dim: #b4bcc6;
  --text-mute: #8a8f98;
  --text-faint: #62676d;

  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.13);

  --brand: #56c0ef;
  --brand-dim: #2fa7dc;
  --accent: #e8ff5a;
  --lilac: #e5e2f7;

  --radius: 12px;
  --radius-lg: 16px;

  --shell: 1140px;
  --gutter: 24px;

  --syntax-key: #7fd3f7;
  --syntax-str: #a6e3a1;
  --syntax-num: #f0c987;
  --syntax-com: #5c636b;
  --syntax-kw: #c3a6ff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.14;
}

h1 { font-size: clamp(38px, 5.4vw, 62px); letter-spacing: -0.03em; }
h2 { font-size: clamp(27px, 3.1vw, 37px); }
h3 { font-size: 17px; letter-spacing: -0.014em; }

p { margin: 0; }

.lede {
  color: var(--text-mute);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.62;
}

/* An API parameter named inline in prose. Every capability section shows the
   flag a reader would actually send, so home copy maps onto a request body. */
.lede code,
.card__body code,
.section__meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  color: var(--brand);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* --------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}

.nav.is-stuck {
  /* background: rgba(8, 9, 10, 0.72); */
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 56px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand__mark { width: 20px; height: 20px; flex: none; }
.brand em { font-style: normal; color: var(--brand); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  color: var(--text-mute);
}

.nav__links a { transition: color .18s ease; }
.nav__links a:hover { color: var(--text); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.nav__toggle {
  display: none;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--text);
  cursor: pointer;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.btn--primary { background: var(--text); color: #08090a; }
.btn--primary:hover { background: #fff; transform: translateY(-1px); }

.btn--ghost { color: var(--text-dim); border-color: var(--line-2); }
.btn--ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, .3); }

.btn--quiet { color: var(--text-mute); }
.btn--quiet:hover { color: var(--text); }

.btn--lg { height: 40px; padding: 0 20px; font-size: 15px; border-radius: 9px; }

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

.hero {
  position: relative;
  padding: clamp(5px, 11vw, 5px) 0 0;
  text-align: center;
  overflow: hidden;
}

/* The wash behind the hero. Two stacked radials rather than an image, so it
   scales to any viewport and costs nothing to download. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto;
  height: 780px;
  /* background:
    radial-gradient(ellipse 50% 44% at 50% 40%, rgba(86, 192, 239, .22), transparent 66%),
    radial-gradient(ellipse 74% 50% at 50% 10%, rgba(126, 96, 226, .16), transparent 70%); */
  pointer-events: none;
  z-index: 0;
}

.hero > * { position: relative; z-index: 1; }

.hero__title { max-width: 16ch; margin: 0 auto; }
.hero__lede { max-width: 56ch; margin: 22px auto 0; }

.hero__cta {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.hero__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-faint);
}

.hero__visual, .panel__visual {
  margin-top: clamp(44px, 6vw, 72px);
  position: relative;
}

/* Fades the tall product panel into the page instead of ending on a hard
   edge — the same trick the reference design uses. */
.hero__visual::after, .panel__visual::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 190px;
  background: linear-gradient(to bottom, transparent, var(--bg) 88%);
  pointer-events: none;
  z-index: 3;
}

/* The fade assumes a panel tall enough that its bottom is filler. On a short,
   text-dense panel 190px covers real content — the Style Guide sample lost two
   of its headings to it. Those panels opt out. */
.panel__visual--flush::after { display: none; }


/* ------------------------------------------------------------------ section */

.section { padding: clamp(78px, 10vw, 132px) 0; }
.section--tight { padding-top: clamp(52px, 6vw, 76px); }

/* The reference layout: heading on the left, supporting copy on the right,
   visual spanning the full width beneath. */
.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 56px;
  align-items: start;
  margin-bottom: clamp(34px, 4.4vw, 54px);
}

.section__head .lede { padding-top: 5px; }

.section__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--text-mute);
}

.section__meta b {
  display: block;
  font-weight: 500;
  color: var(--text-dim);
}

.section__meta span { max-width: 30ch; }

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

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.card {
  min-width: 0;
  min-height: 430px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 28px;
}

.card:first-child { padding-left: 0; }
.card:last-child { padding-right: 0; }
.card + .card { border-left: 1px solid var(--line); }

.card__figure {
  color: var(--text-faint);
  font: 500 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
}

.card__art {
  height: 280px;
  display: grid;
  place-items: center;
  color: #626b75;
}

.card__art svg {
  width: min(100%, 240px);
  height: auto;
  overflow: visible;
}

.card__art path,
.card__art rect,
.card__art circle {
  stroke: currentColor;
  stroke-width: .85;
  vector-effect: non-scaling-stroke;
}

.card__art .card__art-detail { color: #333a41; }
.card__art .card__art-accent { color: var(--brand-dim); }
.card__art .card__art-dot { fill: currentColor; stroke: none; }

.card__body { padding: 0; }
.card__body p { margin-top: 8px; color: var(--text-mute); font-size: 14px; }

/* -------------------------------------------------------------- AI agents */

.agent-product__eyebrow {
  color: var(--brand);
  font: 500 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.agent-product__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.agent-product__link:hover {
  border-color: var(--brand-dim);
  background: rgba(86, 192, 239, .06);
  color: var(--text);
}

.agent-product__link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.agent-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--line);
}

.agent-product {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--bg-raised);
}

.agent-product__top { display: flex; align-items: center; gap: 11px; }
.agent-product__icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--brand);
  background: rgba(86, 192, 239, .05);
}

.agent-product__icon svg { width: 19px; height: 19px; }
.agent-product__icon path {
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agent-product h3 {
  margin-top: 25px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
}

.agent-product > p {
  min-height: 88px;
  margin-top: 14px;
  color: var(--text-mute);
  font-size: 13.5px;
}

.agent-clients {
  display: flex;
  min-height: 64px;
  margin: 24px 0 0;
  padding: 14px 2px;
  align-items: center;
  gap: clamp(20px, 3vw, 34px);
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.agent-clients::-webkit-scrollbar { display: none; }

.agent-client {
  display: flex;
  min-width: max-content;
  flex: none;
  align-items: center;
  gap: 8px;
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 500;
}

.agent-client img {
  width: 28px;
  height: 28px;
  flex: none;
  object-fit: contain;
}

.agent-client:last-child img { width: 24px; }

.agent-command {
  flex: none;
  width: 100%;
  height: auto;
  margin: 24px 0 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0b0d0e;
  margin-bottom: 15px !important;
}

.agent-product__link {
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
}

/* ------------------------------------------------------------------- panels */

.panel {
  position: relative;
  /* The hero centres its own text; panels sit inside it and must not inherit
     that, or every code block renders centre-aligned. */
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* background: linear-gradient(180deg, var(--panel-2), var(--bg-raised)); */
  /* box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 40px 90px -40px rgba(0, 0, 0, .9); */
  overflow: hidden;
}

.panel--browser { border-radius: var(--radius-lg); }

.panel__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
}

.dots { display: inline-flex; gap: 6px; }
.dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .13);
}

.urlbar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 11px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-mute);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.panel__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 340px;
}

/* Without min-width:0 a grid child defaults to min-content width, so a long
   line inside .code stretches the column instead of scrolling within it — and
   that widens the whole page on narrow screens. */
.panel__split > * { min-width: 0; }
.panel__split > * + * { border-left: 1px solid var(--line); }

/* --------------------------------------------------------- API workbench */

.developer-workbench { margin-bottom: 24px; }

.developer-operation-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.developer-operation-tabs button,
.monitor-event-tabs button {
  min-width: 0;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text-mute);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.developer-operation-tabs button:hover,
.monitor-event-tabs button:hover { color: var(--text); border-color: var(--line-2); }

.developer-operation-tabs button[aria-selected="true"],
.monitor-event-tabs button[aria-selected="true"] {
  border-color: var(--brand);
  background: var(--brand);
  color: #04222f;
}

.developer-operation-tabs button:focus-visible,
.developer-language-tabs button:focus-visible,
.monitor-event-tabs button:focus-visible,
.region-output-tabs button:focus-visible,
.design-output-tabs button:focus-visible,
.capture-output-tabs button:focus-visible,
.diff-output-tabs button:focus-visible,
.monitor-output-tabs button:focus-visible,
.style-guide-output-tabs button:focus-visible,
.developer-copy-dock button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.developer-console {
  overflow: visible;
  border-color: var(--line-2);
  border-radius: 14px;
  background: var(--bg-raised);
  box-shadow: 0 30px 80px -56px rgba(0, 0, 0, .95);
}

.developer-console__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 52px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
}

.developer-language-tabs {
  display: flex;
  min-width: 0;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.developer-language-tabs::-webkit-scrollbar { display: none; }

.developer-language-tabs button,
.region-output-tabs button,
.design-output-tabs button,
.capture-output-tabs button,
.diff-output-tabs button,
.monitor-output-tabs button,
.style-guide-output-tabs button {
  flex: none;
  padding: 7px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.developer-language-tabs button:hover,
.region-output-tabs button:hover,
.design-output-tabs button:hover,
.capture-output-tabs button:hover,
.diff-output-tabs button:hover,
.monitor-output-tabs button:hover,
.style-guide-output-tabs button:hover { color: var(--text); }

.developer-language-tabs button[aria-selected="true"],
.region-output-tabs button[aria-selected="true"],
.design-output-tabs button[aria-selected="true"],
.capture-output-tabs button[aria-selected="true"],
.diff-output-tabs button[aria-selected="true"],
.monitor-output-tabs button[aria-selected="true"],
.style-guide-output-tabs button[aria-selected="true"] {
  background: var(--panel-2);
  color: var(--brand);
  box-shadow: 0 0 0 1px var(--line-2) inset;
}

.developer-console__tools > code {
  overflow: hidden;
  color: var(--text-faint);
  font: 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.developer-code-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: 440px;
  overflow: hidden;
  border-radius: 0 0 14px 14px;
}

.developer-code-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #0b0d0e;
}
.developer-code-pane + .developer-code-pane { border-left: 1px solid var(--line); }

.developer-code {
  flex: 1 1 auto;
  min-height: 0;
  counter-reset: developer-line;
  margin: 0;
  padding: 16px 20px 28px 0;
  overflow: auto;
  color: var(--text-dim);
  font: 11.5px/1.72 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  tab-size: 2;
  scrollbar-color: var(--line-2) transparent;
}

.developer-code:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

pre.developer-code.line-numbers {
  position: relative;
  padding-left: 4.3em;
  counter-reset: linenumber;
}

pre.developer-code.line-numbers > code {
  position: relative;
  display: block;
  min-width: max-content;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  top: 0;
  left: -4.3em;
  width: 3.3em;
  /* border-right: 1px solid var(--line); */
  color: #3f454b;
  letter-spacing: -1px;
  pointer-events: none;
  user-select: none;
}

.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
}

.line-numbers-rows > span::before {
  content: counter(linenumber);
  display: block;
  padding-right: .8em;
  text-align: right;
}

/* Prism token colours use Scrinly's existing syntax palette. */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: var(--syntax-com); }
.token.punctuation { color: var(--text-faint); }
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted { color: var(--syntax-key); }
.token.boolean,
.token.number { color: var(--syntax-num); }
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted { color: var(--syntax-str); }
.token.operator,
.token.entity,
.token.url { color: var(--text-dim); }
.token.atrule,
.token.attr-value,
.token.keyword { color: var(--syntax-kw); }
.token.function,
.token.class-name { color: var(--brand); }
.token.regex,
.token.important,
.token.variable { color: var(--syntax-num); }
.token.bold,
.token.important { font-weight: 600; }
.token.italic { font-style: italic; }

.developer-copy-dock {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -19px;
  display: flex;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(13, 15, 17, .96);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .95);
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.developer-copy-dock button {
  padding: 7px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.developer-copy-dock button:hover { color: var(--text); background: var(--panel-2); }
.developer-copy-dock button + button { border-left: 1px solid var(--line); }

/* The regions example shows every crop from one real response as a continuous
   full-width evidence reel, with request/response examples alongside it. */
.regions-showcase-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

.regions-showcase-bleed .panel {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.regions-explorer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 640px;
}

.regions-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}

.regions-body > * { min-width: 0; overflow: hidden; }

/* --- the crops: the actual bytes the API returned ----------------------- */
.region-crops {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.region-output-bar,
.design-output-bar,
.capture-output-bar,
.diff-output-bar,
.monitor-output-bar,
.style-guide-output-bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 7px 12px;
  /* border-bottom: 1px solid var(--line);
  background: var(--panel); */
}

.region-output-tabs,
.design-output-tabs,
.capture-output-tabs,
.diff-output-tabs,
.monitor-output-tabs,
.style-guide-output-tabs {
  display: flex;
  max-width: 100%;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.region-output-tabs::-webkit-scrollbar,
.design-output-tabs::-webkit-scrollbar,
.capture-output-tabs::-webkit-scrollbar,
.diff-output-tabs::-webkit-scrollbar,
.monitor-output-tabs::-webkit-scrollbar,
.style-guide-output-tabs::-webkit-scrollbar { display: none; }

.design-explorer { overflow: hidden; }
.design-explorer [hidden] { display: none !important; }
.regions-explorer [hidden] { display: none !important; }

.design-code-panel,
.capture-code-panel,
.diff-code-panel,
.monitor-code-panel,
.style-guide-code-panel {
  position: relative;
  min-height: 440px;
  background: #0b0d0e;
}

.design-code-panel,
.regions-code-panel {
  display: flex;
  flex-direction: column;
}

.design-code-panel {
  height: 440px;
  min-height: 440px;
  max-height: 440px;
  overflow: hidden;
}

.design-code-split,
.capture-code-split,
.diff-code-split { height: 440px; border-radius: 0; }

.design-code-split,
.regions-code-split {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.design-code-panel .developer-copy-dock,
.capture-code-panel .developer-copy-dock,
.diff-code-panel .developer-copy-dock,
.monitor-code-panel .developer-copy-dock,
.style-guide-code-panel .developer-copy-dock { bottom: 12px; }

.design-code-panel .developer-copy-dock,
.regions-code-panel .developer-copy-dock {
  position: static;
  align-self: center;
  flex: none;
  margin: 8px 0 10px;
  transform: none;
}

.style-guide-explorer { overflow: hidden; }
.style-guide-explorer [hidden] { display: none !important; }
.style-guide-code-split { height: 440px; border-radius: 0; }

.capture-code-panel {
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
}

.regions-motion-toggle {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text-mute);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.regions-motion-toggle:hover { color: var(--text); border-color: var(--line-2); }
.regions-motion-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.regions-code-panel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #0b0d0e;
}

.regions-code-split { height: 100%; border-radius: 0; }
.regions-code-panel .developer-copy-dock { bottom: 12px; }

.region-crops__scroll {
  position: relative;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 0;
  padding: 18px 0;
  cursor: grab;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.region-crops__scroll::-webkit-scrollbar { display: none; }
.region-crops__scroll:active { cursor: grabbing; }

.region-crops__scroll:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.region-carousel__track {
  display: flex;
  width: max-content;
}

.region-carousel__group {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-right: 16px;
}

.region-crop {
  flex: 0 0 clamp(320px, 32vw, 540px);
  min-width: 0;
}

.region-crop figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
}

.region-crop figcaption b { color: var(--brand); font-weight: 500; }
.region-crop figcaption span { color: var(--text-faint); }

.region-crop img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 490px;
  object-fit: contain;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #050607;
}

.regions-note {
  margin-top: 18px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.regions-note a { color: var(--text-mute); }

/* A missing data file leaves the capture and hides the empty pane. */
.is-unavailable .region-crops { display: none; }

@media (prefers-reduced-motion: reduce) {
  .region-carousel__group[aria-hidden="true"] { display: none; }
  .regions-motion-toggle { display: none; }
}

/* --------------------------------------------------------------- visual diff */

.diff-showcase {
  min-width: 0;
  background: var(--bg-raised);
}

/* The evidence view declares display:grid below, so make the tab panels'
   mutually exclusive state explicit instead of relying on the browser's
   default [hidden] stylesheet. */
.diff-showcase [hidden] { display: none !important; }

.diff-visualizations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
}

.diff-source {
  min-width: 0;
  margin: 0;
  background: var(--bg);
}

.diff-source figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.diff-source figcaption span:last-child {
  overflow: hidden;
  color: var(--text-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.diff-source-stage {
  height: 500px;
  overflow: auto;
  background: #050607;
  scrollbar-color: var(--line-2) transparent;
}

.diff-source-stage:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.diff-source-stage img {
  display: block;
  width: 100%;
  min-width: 480px;
  height: auto;
}

.monitor-event-console {
  position: relative;
  padding: 24px 18px 38px;
  background: var(--bg);
}

.monitor-proof { overflow: hidden; }
.monitor-proof [hidden] { display: none !important; }
.monitor-request-split { height: 500px; border-radius: 0; }

.monitor-event-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.monitor-event-payload {
  margin-top: 12px;
  height: 330px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0b0d0e;
}

.developer-copy-dock--event { bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
  .developer-operation-tabs button,
  .monitor-event-tabs button { transition: none; }
}

/* ---------------------------------------------------------------------- code */

.code {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-dim);
  tab-size: 2;
}

.code b { font-weight: 400; }
.k { color: var(--syntax-key); }
.s { color: var(--syntax-str); }
.n { color: var(--syntax-num); }
.c { color: var(--syntax-com); }
.kw { color: var(--syntax-kw); }
.pun { color: var(--text-faint); }

.code__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  /* border-bottom: 1px solid var(--line); */
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mute);
}

.pill--ok { color: #86e0a8; border-color: rgba(134, 224, 168, .28); }

/* ------------------------------------------------------------------- device */

.devices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  padding: 26px;
}

.device {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
}

.device__top {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
}

.device__top i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.12); }

.device__body { padding: 12px; display: grid; gap: 7px; }

.skel { height: 7px; border-radius: 3px; background: rgba(255, 255, 255, .07); }
.skel--wide { width: 100%; }
.skel--lg { height: 34px; background: rgba(86, 192, 239, .13); }
.skel--img { height: 52px; background: rgba(255,255,255,.05); }

.device__cap {
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--text-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* -------------------------------------------------------------------- crawl */

.crawl { padding: 8px 0; }

.crawl__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 22px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}

.crawl__row:last-child { border-bottom: 0; }
.crawl__depth { color: var(--text-faint); font-size: 11px; }
.crawl__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crawl__num { color: var(--text-faint); font-size: 12px; }

.dot {
  width: 6px; height: 6px; border-radius: 50%; justify-self: center;
  background: #86e0a8;
}
.dot--wait { background: var(--syntax-num); }
.dot--idle { background: rgba(255,255,255,.2); }

/* ------------------------------------------------------------------- design */

.swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px 24px 4px; }

.swatch { width: 62px; }
.swatch i {
  display: block; height: 44px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.09);
}
.swatch span {
  display: block; margin-top: 6px; font-size: 10.5px; color: var(--text-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.typerow {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 24px; border-top: 1px solid rgba(255,255,255,.045);
}
.typerow b { font-weight: 500; letter-spacing: -0.02em; }
.typerow span { font-size: 11.5px; color: var(--text-faint); font-family: ui-monospace, Menlo, monospace; }

/* ---------------------------------------------------------------------- doc */

.doc { padding: 24px 28px; font-size: 13.5px; line-height: 1.75; color: var(--text-dim); }
.doc h4 { font-size: 14px; margin: 18px 0 6px; color: var(--text); }
.doc h4:first-child { margin-top: 0; }
.doc p { color: var(--text-mute); }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--brand);
  background: rgba(86,192,239,.09); padding: 1px 5px; border-radius: 4px;
}
.doc .tag {
  display: inline-block; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--line); border-radius: 4px;
  padding: 0 6px; margin-right: 8px;
}

/* -------------------------------------------------------------------- chart */

.chart { padding: 24px 26px; }
.chart__legend {
  display: flex; gap: 18px; margin-top: 14px;
  font-size: 12px; color: var(--text-faint);
}
.chart__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

.meter {
  height: 8px; border-radius: 999px; background: rgba(255,255,255,.07);
  overflow: hidden; margin: 14px 0 8px;
}
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }

/* ------------------------------------------------------------------ pricing */

.pricing__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 34px;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px;
  background: var(--bg-raised);
}

.seg button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  border: none;
  background: none;
  color: var(--text-mute);
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.seg button[aria-pressed="true"] { background: var(--text); color: #08090a; }
.seg em { font-style: normal; font-size: 12px; opacity: .72; margin-left: 4px; }

.pricing__hint { font-size: 13px; color: var(--text-faint); }

.pricing {
  display: grid;
  /* Four across. Five made every column too narrow to read, so Prime moves to
     its own full-width card below — see .tier--wide. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  /* Stretch, not start: the feature lists are different lengths and ragged
     card bottoms read as a layout bug rather than as content. */
  align-items: stretch;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--bg-raised));
  padding: 22px 20px 24px;
  min-width: 0;
}

/* The featured tier lifts rather than growing, so the grid stays aligned. */
.tier--featured {
  border-color: rgba(86, 192, 239, .45);
  box-shadow: 0 0 0 1px rgba(86, 192, 239, .12), 0 24px 60px -30px rgba(86, 192, 239, .5);
}

.tier__flag {
  position: absolute;
  top: -1px; right: 16px;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #04222f;
  background: var(--brand);
  border-radius: 999px;
  padding: 2px 9px;
}

.tier h3 { font-size: 16px; }
.tier__blurb { margin-top: 5px; font-size: 13px; color: var(--text-faint); min-height: 34px; }

.tier__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 14px;
}

.tier__price b {
  font-size: 31px;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.tier__price span { font-size: 13px; color: var(--text-faint); }

.tier__sub { margin-top: 3px; font-size: 12.5px; color: var(--text-faint); min-height: 19px; }

.tier__cta { width: 100%; margin-top: 18px; }

.tier__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  font-size: 13px;
  color: var(--text-mute);
}

.tier__list b { color: var(--text); font-weight: 500; }

.tier__capacity-label {
  margin-top: 5px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: .02em;
}

.tier__capacity {
  font-size: 12px;
  line-height: 1.45;
}

.tier__capacity-note {
  margin-top: 16px;
  color: var(--text-faint);
  font-size: 12px;
  text-align: center;
}

/* Prime, as a full-width card under the row of four.
 *
 * Same border, radius and background as a tier so it reads as part of the same
 * set — only the axis changes: identity, then features spread horizontally,
 * then price and CTA held at the right. */
.tier--wide {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) auto;
  align-items: center;
  gap: 30px;
  margin-top: 12px;
  padding: 24px 26px;
  border-color: var(--line-2);
  background:
    radial-gradient(ellipse 42% 150% at 88% 50%, rgba(86, 192, 239, .09), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--bg-raised));
}

.tier--wide .tier__blurb { min-height: 0; max-width: 46ch; }

/* Horizontal, and without the divider a stacked card needs. */
.tier--wide .tier__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 0;
  gap: 9px 22px;
}

.tier--wide .tier__capacity-label { grid-column: 1 / -1; }

.tier--wide .tier__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 170px;
}

.tier--wide .tier__price { margin-top: 0; }
.tier--wide .tier__sub { min-height: 0; }
.tier--wide .tier__cta { width: auto; padding: 0 26px; margin-top: 14px; }

@media (max-width: 980px) {
  .tier--wide {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 30px;
  }
  /* The list takes a full row of its own, so source order stacks it as
     name -> features -> price and CTA. That puts the price immediately above
     the button, which is the right reading order once it is no longer a
     single line. */
  .tier--wide .tier__list { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .tier--wide { grid-template-columns: minmax(0, 1fr); }
  .tier--wide .tier__buy { align-items: flex-start; }
  .tier--wide .tier__cta { width: 100%; }
}

.pricing__foot {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--text-faint);
  max-width: 78ch;
}

.pricing__foot a { color: var(--brand); }

/* Four tiers, so 2x2 rather than 3+1 — an orphaned last card looks broken. */
@media (max-width: 1080px) {
  .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier__blurb, .tier__sub { min-height: 0; }
}

@media (max-width: 460px) {
  .pricing { grid-template-columns: minmax(0, 1fr); }
}

.foot__legal {
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
  padding: 28px 0;
}
.foot__legal a { color: var(--text-mute); }
.foot__legal a:hover { color: var(--text); }

/* -------------------------------------------------------------------- legal */

/* Long-form prose for /terms, /privacy, /acceptable-use and /bot. Deliberately
   narrow: these are read, not scanned, and a 90ch line is where comprehension
   goes to die. */
.legal { max-width: 70ch; padding: 64px 0 96px; }
.legal__kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 12px;
}
.legal h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; margin-bottom: 12px; }
.legal__meta { font-size: 13px; color: var(--text-faint); margin-bottom: 40px; }
.legal h2 {
  font-size: 19px; letter-spacing: -.01em;
  margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--line);
}
.legal h3 { font-size: 15px; margin: 24px 0 8px; color: var(--text); }
.legal p, .legal li { color: var(--text-dim); font-size: 14.5px; line-height: 1.75; }
.legal p { margin-bottom: 14px; }
.legal ul, .legal ol { margin: 0 0 16px 20px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--brand); }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--brand);
  background: rgba(86,192,239,.09); padding: 1px 5px; border-radius: 4px;
}
.legal pre {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px); padding: 16px 18px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.6; color: var(--text-dim); margin-bottom: 16px;
}
.legal__note {
  border-left: 2px solid var(--brand); padding: 2px 0 2px 16px;
  margin: 20px 0; color: var(--text-mute); font-size: 13.5px;
}
.legal__toc { margin-bottom: 8px; }
.legal__toc a { display: inline-block; margin: 0 14px 8px 0; font-size: 13.5px; }

/* -------------------------------------------------------------------- shots */

.shots__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.shots__hint { font-size: 13px; color: var(--text-faint); }

/* One shared baseline so the three captures read as one row of devices rather
   than three unrelated images. Every file is 720px tall, so aligning on height
   and letting width follow the aspect ratio keeps them true to their viewport. */
.shots {
  display: flex;
  align-items: flex-end;
  justify-content: start;
  gap: 28px;
  flex-wrap: wrap;
}

.shot { margin: 0; text-align: center; }

.shot img {
  display: block;
  height: 360px;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-raised);
}

.shot figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-faint);
}
.shot figcaption b {
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mute);
  margin-bottom: 2px;
}

@media (max-width: 760px) {
  /* The desktop capture carries the point on a narrow screen; the other two
     shrink past legibility long before it does. */
  .shots { gap: 18px; }
  .shot img { height: 210px; }
  .shot--tablet { display: none; }
}

/* ---------------------------------------------------------------------- faq */

/* Was the changelog grid. The changelog now lives in the docs, and an answer
   needs more width than a dated one-liner did — hence 320px rather than 210px. */
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq__item {
  background: var(--bg);
  padding: 22px 22px 24px;
  transition: background .2s ease;
}
.faq__item:hover { background: var(--bg-raised); }
.faq__item h3 { margin: 0 0 8px; font-size: 15px; }
.faq__item p { font-size: 13.5px; color: var(--text-mute); }
.faq__item p + p { margin-top: 9px; }
.faq__item code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .9em;
  color: var(--brand);
}

/* -------------------------------------------------------------------- claim */

.claims {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
}

.claim {
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 232px;
  position: relative;
  overflow: hidden;
}

.claim--lilac { background: var(--lilac); color: #17161d; }
.claim--accent { background: var(--accent); color: #14170a; }

.claim q {
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.32;
  letter-spacing: -0.02em;
  quotes: none;
  font-weight: 500;
}

.claim__foot {
  margin-top: 26px;
  font-size: 13px;
  opacity: .68;
}

.claim__foot b { display: block; font-weight: 500; opacity: 1; }

/* ---------------------------------------------------------------------- cta */

.cta {
  position: relative;
  text-align: center;
  padding: clamp(90px, 12vw, 150px) 0;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset: auto 0 -55% 0;
  height: 620px;
  background: radial-gradient(ellipse 46% 58% at 50% 100%, rgba(86, 192, 239, .17), transparent 70%);
  pointer-events: none;
}

.cta > * { position: relative; }
.cta h2 { font-size: clamp(31px, 4.4vw, 50px); }
.cta__row { display: flex; justify-content: center; gap: 10px; margin-top: 28px; flex-wrap: wrap; }

/* ------------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--line);
  padding: 54px 0 40px;
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: 36px 24px;
}

.foot__col h4 {
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
  margin-bottom: 14px;
}

.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot__col a { font-size: 14px; color: var(--text-mute); transition: color .16s ease; }
.foot__col a:hover { color: var(--text); }
.foot__col .brand { font-size: 20px; }

.foot__blurb { font-size: 13.5px; color: var(--text-faint); margin-top: 14px; max-width: 30ch; }

.foot__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-faint);
}

/* ------------------------------------------------------------------- reveal */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ 404 page */

.oops {
  min-height: 74vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 18px;
}

.oops__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--brand);
}

/* ------------------------------------------------------------- breakpoints */

@media (max-width: 920px) {
  .section__head { grid-template-columns: 1fr; gap: 16px; }
  .claims { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot__col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__actions .btn--quiet { display: none; }

  .cards { grid-template-columns: minmax(0, 1fr); }
  .card,
  .card:first-child,
  .card:last-child {
    min-height: 390px;
    padding: 38px 0;
  }
  .card:first-child { padding-top: 0; }
  .card + .card { border-left: 0; border-top: 1px solid var(--line); }
  .card__art { height: 250px; }
  .card__body p { max-width: 48ch; }
  .agent-products { grid-template-columns: minmax(0, 1fr); }
  .agent-product > p { min-height: 0; }

  /* minmax(0, 1fr), not 1fr — see the min-width note above. */
  .panel__split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .panel__split > * + * { border-left: 0; border-top: 1px solid var(--line); }
  .developer-operation-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .developer-code-split { grid-template-columns: minmax(0, 1fr); height: auto; }
  .developer-code-pane { height: 330px; }
  .developer-code-pane + .developer-code-pane { border-left: 0; border-top: 1px solid var(--line); }
  .monitor-event-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regions-explorer { height: auto; }
  .region-crops__scroll { max-height: 560px; }
  .region-crop { flex-basis: min(82vw, 520px); }
  .monitor-request-split { height: auto; }
  .diff-visualizations {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    overflow-x: auto;
  }
  .diff-source-stage { height: 390px; }

  .crawl__row { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .crawl__row .crawl__depth { display: none; }

  .hero__visual::after, .panel__visual::after { height: 120px; }
}

@media (max-width: 520px) {
  :root { --gutter: 18px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .section__meta { gap: 14px; }
  .section__meta span { max-width: none; }
  .diff-source figcaption { min-height: 42px; padding-inline: 10px; }
  .diff-source figcaption span:last-child { display: none; }
  .diff-source-stage { height: 300px; }
  .diff-source-stage img { min-width: 400px; }
  .developer-console__tools { align-items: flex-start; flex-direction: column; gap: 3px; }
  .developer-language-tabs { width: 100%; }
  .developer-operation-tabs button { min-height: 44px; padding-inline: 9px; }
  .monitor-event-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .monitor-event-tabs::-webkit-scrollbar { display: none; }
  .monitor-event-tabs button { flex: 0 0 156px; min-height: 44px; }
  .region-output-bar { align-items: flex-start; flex-direction: column; }
  .design-output-tabs,
  .capture-output-tabs,
  .diff-output-tabs,
  .monitor-output-tabs,
  .style-guide-output-tabs { width: 100%; }
}

/* Opened by the nav toggle on small screens. */
.nav__links.is-open {
  display: flex;
  position: absolute;
  inset: 56px 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px var(--gutter) 20px;
  background: rgba(8, 9, 10, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav__links.is-open a { padding: 8px 0; font-size: 15px; }