/* crawlnode.com stylesheet.
 *
 * One file, no preprocessor, no framework. Tokens first, then base, layout,
 * components, page sections, members area, responsive rules. Colours follow
 * the approved mockup: deep navy ground, white type, one green accent.
 * See docs/design-system.md before changing tokens.
 */

/* ---------- Tokens ------------------------------------------------------ */
:root {
  --bg: #0a0e17;
  --bg-2: #0d1320;
  --surface: #111827;
  --surface-2: #161f30;
  --border: #1f2a3d;
  --border-strong: #2b3850;
  --text: #eef2f7;
  --text-2: #c5cfdc;
  --muted: #8b98a9;
  --green: #2fb466;
  --green-600: #29a65c;
  --green-700: #21924f;
  --green-soft: rgba(47, 180, 102, 0.14);
  --green-glow: rgba(47, 180, 102, 0.35);
  --red: #ef5350;
  --red-soft: rgba(239, 83, 80, 0.14);
  --amber: #f5b64a;
  --amber-soft: rgba(245, 182, 74, 0.14);
  --blue: #5b9cf6;
  --blue-soft: rgba(91, 156, 246, 0.14);
  /* Type scale. One ladder, so a card in the members area and a card on the
     marketing site are the same size instead of 0.92rem and 0.95rem. Every
     step is a token; a raw font-size in a rule below is a deliberate one-off
     (the hero, a stat number) and should stay rare. */
  --fs-2xs: 0.78rem;
  --fs-xs: 0.85rem;
  --fs-sm: 0.95rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.3rem;
  --fs-2xl: 1.5rem;
  /* Fluid, for headings that have to hold their shape from 360px to 1440px. */
  --fs-h1: clamp(1.9rem, 1.35rem + 2.1vw, 2.9rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem);
  --fs-h3: clamp(1.1rem, 1.03rem + 0.3vw, 1.25rem);
  --fs-hero: clamp(2.1rem, 1.2rem + 4.2vw, 4.4rem);

  /* Line heights, named for what they are for rather than by number. */
  --lh-tight: 1.15;   /* display and headings */
  --lh-snug: 1.35;    /* short headings, buttons, table cells */
  --lh-normal: 1.6;   /* body copy */
  --lh-code: 1.6;

  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 14px 50px rgba(0, 0, 0, 0.45);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --container: 1120px;
  --header-h: 76px;
}

/* ---------- Base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--text);
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(47, 180, 102, 0.10), transparent 60%),
    radial-gradient(800px 480px at 95% 15%, rgba(91, 156, 246, 0.08), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-md); line-height: var(--lh-snug); }
p { margin: 0 0 1em; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.9em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 0.1em 0.4em; }
pre { margin: 0; }
pre code { display: block; background: none; border: 0; padding: 0; font-size: var(--fs-xs); line-height: var(--lh-code); }
img, svg { max-width: 100%; }

/* ---------- Overflow safety ---------------------------------------------
 * A marketing page that scrolls sideways on a phone reads as broken, and the
 * causes are always the same three things: an unbreakable string in prose, a
 * code block wider than the screen, and a table. Each is handled where it
 * happens rather than by hiding the overflow on <body>, which would only make
 * the symptom invisible and take the horizontal scroll of a wide table with
 * it.
 */
body { overflow-x: clip; }
p, li, dd, dt, td, th, summary, figcaption { overflow-wrap: break-word; }
/* Inline code is usually an endpoint, a header name or a token: exactly the
   strings with no spaces to break at. */
code { overflow-wrap: anywhere; }
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre code { overflow-wrap: normal; white-space: pre; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.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; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--green); color: #052a12; padding: 0.5rem 0.9rem; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.container { width: min(var(--container), 100% - 2.5rem); margin: 0 auto; }
.section { padding: 5rem 0; }
.section-tight { padding-top: 1rem; }
.section-alt { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-narrow { max-width: 640px; margin: 0 auto; text-align: center; padding: 6rem 1.25rem; }
.section-head { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.page-head { padding-bottom: 1rem; }
.eyebrow { color: var(--green); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.75rem; }
.lead { font-size: var(--fs-lg); color: var(--text-2); }
.accent { color: var(--green); }
.fine-print { color: var(--muted); font-size: var(--fs-sm); text-align: center; max-width: 720px; margin: 1.5rem auto 0; }
.empty { color: var(--muted); }
.bullets { padding-left: 1.2rem; }
.bullets li { margin-bottom: 0.5rem; }
.cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }

/* ---------- Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1.3rem; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: var(--fs-sm); line-height: var(--lh-snug); white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:disabled { opacity: 0.65; cursor: default; transform: none; }
.btn-primary { background: var(--green); color: #05230f; box-shadow: 0 6px 20px var(--green-glow); }
.btn-primary:hover { background: var(--green-600); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--text-2); background: rgba(255, 255, 255, 0.03); }
.btn-lg { padding: 0.9rem 1.6rem; font-size: 1.05rem; border-radius: 12px; }
.btn-sm { padding: 0.45rem 0.9rem; font-size: var(--fs-xs); }
.btn-block { width: 100%; }

/* ---------- Header ----------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(10, 14, 23, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner { display: flex; align-items: center; height: 100%; gap: 2.5rem; }
.logo { display: inline-flex; align-items: baseline; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.logo:hover { text-decoration: none; }
.logo-crawl { color: var(--green); }
.logo-node { color: #fff; }
.site-nav { display: flex; align-items: center; gap: 2rem; flex: 1; }
.site-nav > a { color: var(--text-2); font-weight: 500; font-size: var(--fs-md); padding: 0.35rem 0; border-bottom: 2px solid transparent; }
.site-nav > a:hover { color: #fff; text-decoration: none; }
.site-nav > a.is-active { color: #fff; border-bottom-color: var(--green); }
.site-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.nav-signin { color: var(--text-2); font-weight: 500; }
.nav-signin:hover { color: #fff; text-decoration: none; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.4rem; }
.nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }

/* ---------- Policies --------------------------------------------------- */
/* Long-form prose in one readable column, under the same head as any page. */
.prose { max-width: 760px; }
.prose h2 { font-size: var(--fs-2xl); margin-top: 2.5rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: #fff; margin-top: 1.5rem; }
.prose p, .prose li { color: var(--text-2); }
.policy-meta { color: var(--muted); font-size: var(--fs-sm); margin: 1rem 0 0; }

/* ---------- Footer ----------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 3.5rem 0 1.5rem; margin-top: 2rem; }
.site-footer-inner { display: grid; grid-template-columns: 1.1fr 2.4fr; gap: 3rem; }
.site-footer-brand p { color: var(--muted); max-width: 320px; margin-top: 1rem; }
.site-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.site-footer-cols h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.9rem; }
.site-footer-cols a { display: block; color: var(--text-2); margin-bottom: 0.55rem; }
.site-footer-cols a:hover { color: #fff; }
.site-footer-legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-xs); }

/* ---------- Alerts / flash --------------------------------------------- */
.flash-stack { margin-top: 1.25rem; display: grid; gap: 0.6rem; scroll-margin-top: calc(var(--header-h) + 1rem); outline: 0; }
.alert { padding: 0.8rem 1rem; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); }
.alert-success { border-color: rgba(47, 180, 102, 0.5); background: var(--green-soft); }
.alert-error { border-color: rgba(239, 83, 80, 0.5); background: var(--red-soft); }
.alert-info { border-color: rgba(91, 156, 246, 0.5); background: var(--blue-soft); }
/* An action inside a banner is a form, so that a button that says it sends
   something sends it on the first click. It has to sit on the line of text. */
.alert-action { display: inline-block; margin: 0 0.4rem; vertical-align: baseline; }
/* A button that belongs in a sentence. Used where the thing being done is an
   action rather than a destination, so it must not be an <a href="#">. */
.link-button { background: 0; border: 0; padding: 0; color: var(--green); font: inherit; cursor: pointer; text-decoration: underline; }
.link-button:hover { color: #fff; }

/* Anything a link or a redirect can land on clears the sticky header, which
   would otherwise cover the heading the reader was sent to. */
.card[id], section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* ---------- Hero + demo ------------------------------------------------- */
/* The cluster's glow and rings are wider than the column they sit in, by
   design. They are cut off at the edge of the hero rather than being
   allowed to make the page scroll sideways. */
.hero { padding: 4.5rem 0 3.5rem; text-align: center; overflow: hidden; overflow: clip; }
.hero-title { font-size: var(--fs-hero); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; color: #fff; margin-bottom: 1.25rem; }
.hero-lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--text-2); max-width: 880px; margin: 0 auto 2.5rem; }

.demo { max-width: 1120px; margin: 0 auto; }
.demo-label { display: block; font-size: var(--fs-xl); font-weight: 600; margin-bottom: 0.6rem; color: var(--text); }
.demo-status { margin: 0.8rem 0 0; color: var(--muted); font-size: var(--fs-sm); min-height: 1.5em; }
.demo-status.is-ok { color: var(--green); }
.demo-status.is-warn { color: var(--amber); }
.demo-status.is-error { color: var(--red); }

.chips { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2.25rem 0 0; text-align: left; }
.chips li { display: flex; align-items: center; gap: 0.9rem; justify-content: center; }
.chip-icon { width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.chip-icon svg { width: 44px; height: 44px; }
.chip-icon-home { color: var(--green); }
.chip-text { display: flex; flex-direction: column; line-height: var(--lh-snug); }
.chip-text strong { font-size: var(--fs-lg); font-weight: 600; color: #fff; }
.chip-text span { color: var(--muted); font-size: var(--fs-sm); }

.browser-frame {
  border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; background: #1a2233;
  box-shadow: var(--shadow); text-align: left;
}
.browser-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.9rem 0; background: #1a2233; }
.traffic { display: inline-flex; gap: 6px; margin-right: 0.35rem; margin-bottom: 0.5rem; }
.traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.t-red { background: #ff5f57; } .t-yellow { background: #febc2e; } .t-green { background: #28c840; }
.browser-tab { display: flex; align-items: center; gap: 0.6rem; background: #0f1522; padding: 0.55rem 0.9rem; border-radius: 10px 10px 0 0; min-width: 230px; max-width: 340px; }
.tab-favicon { width: 18px; height: 18px; flex: none; }
.tab-title { flex: 1; font-size: var(--fs-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-close { color: var(--muted); font-size: var(--fs-lg); line-height: 1; }
.tab-new { color: var(--muted); font-size: 1.4rem; line-height: 1; margin-bottom: 0.4rem; }
.browser-address { display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0.9rem; background: #0f1522; border-bottom: 1px solid var(--border); }
.address-nav { display: inline-flex; gap: 0.75rem; }
.address-nav svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The tab strip and the toolbar are drawn rather than real, so they take no
   text caret: the address is a label for where the browser is, not somewhere
   to type. The field is the prompt on the page under them. */
.browser-bar, .browser-address { cursor: default; user-select: none; }
.address-box { flex: 1; display: flex; align-items: center; gap: 0.6rem; background: #1a2233; border-radius: 999px; padding: 0.45rem 1rem; font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; cursor: default; }
.address-box svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; }
.address-box span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.address-menu { color: var(--muted); font-size: var(--fs-xl); line-height: 1; }
.browser-viewport { position: relative; overflow: hidden; background: #f6f7f9; aspect-ratio: 16 / 9.5; min-height: 300px; }
.browser-viewport img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top center; background: #fff; }
/* Cropped to the page area: demo.js sets the width and translate so the
   remote Chrome's own tab strip and toolbar sit outside the viewport. */
.browser-viewport img.is-cropped { inset: auto; top: 0; left: 0; height: auto; max-width: none; object-fit: unset; transform-origin: 0 0; }
.viewport-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.viewport-placeholder p { color: #7a8594; font-size: var(--fs-lg); max-width: 420px; margin: 0; }
.viewport-placeholder strong { color: #2a3441; }
.viewport-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 14, 23, 0.55); backdrop-filter: blur(2px); }
.overlay-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; padding: 1.5rem 2rem; text-align: center; max-width: 440px; box-shadow: var(--shadow); }
.overlay-text { margin: 0; color: var(--text); font-weight: 500; }
.overlay-actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.spinner { display: block; width: 28px; height: 28px; margin: 0 auto 0.8rem; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--green); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.viewport-timer { position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(10, 14, 23, 0.85); color: var(--green); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- The demo's browser: one object you type into ----------------------- */
/* A slow highlight travels the frame's border, which is what makes it read
   as live before anything has been pressed. The angle is a registered
   property so it can be animated; a browser without @property gets the same
   border standing still. */
@property --demo-orbit { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes demo-orbit { to { --demo-orbit: 360deg; } }
.demo .browser-frame {
  position: relative; border-color: transparent;
  background:
    linear-gradient(#1a2233, #1a2233) padding-box,
    conic-gradient(from var(--demo-orbit), var(--border-strong) 0deg, var(--border-strong) 210deg, var(--green) 300deg, var(--border-strong) 360deg) border-box;
  box-shadow: 0 0 80px rgba(47, 180, 102, 0.10), var(--shadow);
  animation: demo-orbit 9s linear infinite;
  transition: box-shadow 0.3s ease;
}
.demo .browser-frame:focus-within { box-shadow: 0 0 0 3px var(--green-soft), 0 0 100px rgba(47, 180, 102, 0.20), var(--shadow); }
.demo .browser-frame.is-launching { animation-duration: 2.4s; }
.demo .browser-frame.is-live { box-shadow: 0 0 0 2px rgba(47, 180, 102, 0.75), 0 0 120px rgba(47, 180, 102, 0.26), var(--shadow); }

/* ---- The cluster: the browser among the nodes it could be running on ----- */
/* A drawing of the fleet. The cards and their names are illustration; the
   states are real: `.is-launching` and `.is-live` are set by demo.js when
   the API has handed the demo a browser, and that is when one node lights
   up and the line to it is drawn. Below 1100px there is no room for nodes
   beside a browser wide enough to use, so they go and the pill stays. */
.cluster { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr) 190px; margin-bottom: 2.75rem; }
.cluster::before { content: ""; position: absolute; left: -8%; right: -8%; bottom: -70px; height: 300px; background: radial-gradient(ellipse 55% 60% at 50% 100%, rgba(47, 180, 102, 0.20), transparent 70%); pointer-events: none; }
.cluster-main { position: relative; z-index: 1; min-width: 0; }
/* Two rings on the ground under the browser. */
.cluster-main::before, .cluster-main::after { content: ""; position: absolute; left: -7%; right: -7%; bottom: -30px; height: 96px; border: 1px solid rgba(47, 180, 102, 0.45); border-radius: 50%; z-index: -1; pointer-events: none; }
.cluster-main::after { left: -15%; right: -15%; bottom: -46px; height: 128px; border-color: rgba(47, 180, 102, 0.18); }
.cluster-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cluster-lines path { fill: none; stroke: rgba(47, 180, 102, 0.32); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.cluster-lines .cluster-link { stroke: var(--green); stroke-width: 2.5; stroke-dasharray: none; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 6px rgba(47, 180, 102, 0.9)); transition: opacity 0.5s ease; }
.cluster.is-launching .cluster-link, .cluster.is-live .cluster-link { opacity: 1; }
.cluster-side { position: relative; }
.cluster-node { position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.7rem; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.cluster-node b { font-weight: 400; transition: color 0.4s ease; }
/* The ring each node stands on. */
.cluster-node::before { content: ""; position: absolute; left: 50%; top: 52px; width: 172px; height: 54px; margin-left: -86px; border: 1px solid rgba(47, 180, 102, 0.26); border-radius: 50%; }
/* The card: a slab seen at an angle, three lines of something and a light. */
.cluster-node i { position: relative; display: block; width: 108px; height: 74px; border: 1px solid #3a4a66; border-radius: 14px; background: linear-gradient(155deg, #243149, #0e1522); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); transform: perspective(520px) rotateY(var(--tilt, 18deg)) rotateX(10deg); transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.cluster-node i::before { content: ""; position: absolute; left: 20px; top: 21px; width: 40px; height: 5px; border-radius: 3px; background: rgba(170, 182, 198, 0.7); box-shadow: 5px 11px 0 rgba(170, 182, 198, 0.45), 0 22px 0 rgba(47, 180, 102, 0.6); }
.cluster-node i::after { content: ""; position: absolute; right: 14px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(47, 180, 102, 0.8); }
/* The node this session was given, once it has been given one. */
.cluster.is-launching .cluster-node.is-yours i, .cluster.is-live .cluster-node.is-yours i { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 44px rgba(47, 180, 102, 0.6), 0 16px 30px rgba(0, 0, 0, 0.5); }
.cluster.is-launching .cluster-node.is-yours b, .cluster.is-live .cluster-node.is-yours b { color: #fff; }
.cluster-node.is-yours::after { content: ""; position: absolute; left: 50%; bottom: calc(100% - 26px); width: 130px; height: 125px; margin-left: -65px; background: linear-gradient(to top, rgba(47, 180, 102, 0.38), transparent); clip-path: polygon(22% 100%, 78% 100%, 100% 0, 0 0); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.cluster.is-live .cluster-node.is-yours::after { opacity: 1; }
/* The pill above the browser: which node the session is on. */
.cluster-pick { position: relative; display: flex; align-items: center; gap: 0.75rem; width: max-content; max-width: 100%; margin: 0 auto 1.15rem; padding: 0.4rem 0.9rem 0.4rem 0.4rem; border: 1px solid var(--border-strong); border-radius: 14px; background: rgba(17, 24, 39, 0.9); text-align: left; }
.cluster-pick::after { content: ""; position: absolute; left: 50%; top: 100%; height: 1.15rem; border-left: 1px dashed rgba(47, 180, 102, 0.7); }
.cluster-pick-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; }
.cluster-pick-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cluster-pick-text { display: flex; flex-direction: column; min-width: 9.5rem; line-height: 1.3; }
.cluster-pick-text span { color: var(--muted); font-size: var(--fs-2xs); }
.cluster-pick-text strong { color: var(--green); font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; }
.cluster-pick-more { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) {
  .cluster { display: block; }
  .cluster-side, .cluster-lines { display: none; }
  .cluster::before { left: 0; right: 0; }
  .cluster-main::before { left: 1%; right: 1%; }
  .cluster-main::after { display: none; }
}

/* Chrome's own layout in the site's colours: a dark tab strip, the active
   tab and the toolbar in one lighter tone so they read as a single surface,
   and the address bar a darker pill set into it. */
.demo .browser-bar { background: #0b101b; padding: 0.5rem 0.75rem 0; gap: 0.6rem; }
.demo .traffic { margin-bottom: 0.45rem; }
.demo .browser-tab { position: relative; background: #1a2233; border-radius: 10px 10px 0 0; padding: 0.5rem 0.7rem 0.55rem; min-width: 210px; max-width: 280px; gap: 0.5rem; }
/* The two small curves where a Chrome tab meets the toolbar. */
.demo .browser-tab::before, .demo .browser-tab::after { content: ""; position: absolute; bottom: 0; width: 10px; height: 10px; }
.demo .browser-tab::before { left: -10px; background: radial-gradient(circle at 0 0, transparent 9.5px, #1a2233 10px); }
.demo .browser-tab::after { right: -10px; background: radial-gradient(circle at 100% 0, transparent 9.5px, #1a2233 10px); }
.demo .tab-favicon { width: 16px; height: 16px; }
.demo .tab-title { font-size: var(--fs-xs); }
.demo .tab-close { font-size: var(--fs-md); }
.demo .tab-new { font-size: 1.25rem; margin-bottom: 0.45rem; }
.demo .browser-address { background: #1a2233; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 0.4rem 0.7rem; gap: 0.45rem; }
.demo .address-nav { gap: 0.15rem; }
.demo .address-nav svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; }
/* Nothing to go back or forward to in a tab that has just opened. */
.demo .address-nav svg:nth-child(-n+2) { opacity: 0.4; }
/* The scheme sits beside the field, not in it: one less thing to type, and
   the https is visibly already there before anyone starts. */
.demo-scheme { flex: none; color: var(--muted); font-size: var(--fs-sm); user-select: none; }
.demo .address-box { min-width: 0; min-height: 36px; background: #0d1320; padding: 0 0.25rem 0 0.8rem; gap: 0.5rem; overflow: hidden; }
.address-text { flex: 1; min-width: 0; color: var(--text-2); font-size: var(--fs-sm); }
.demo .address-box .omni-star { width: 18px; height: 18px; stroke-width: 1.7; stroke-linejoin: round; margin: 0 0.35rem 0 0.1rem; }
.address-tools { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; }
.address-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--border-strong); display: inline-flex; align-items: center; justify-content: center; }
.address-avatar svg { width: 16px; height: 16px; fill: none; stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; }
.demo .address-menu { padding: 0 0.25rem; }

/* An aspect ratio turns a minimum height into a minimum width, and beside
   the rail, or on a phone, that width is more than the browser has. So the
   page area follows its ratio alone, and is given a height only in the
   states and at the widths that need one. */
.demo .browser-viewport { min-height: 0; }
/* An empty tab and a launch in progress have no picture to take a ratio
   from, so they are given a height; and the empty tab is laid out in the
   flow, so its prompt and shortcuts make it taller rather than being cut
   when a narrow width wraps them. */
.demo .browser-frame.is-idle .browser-viewport, .demo .browser-frame.is-launching .browser-viewport { aspect-ratio: auto; min-height: 440px; }
.demo .browser-frame.is-idle .viewport-placeholder { position: static; min-height: inherit; }
/* An empty tab, not a white page: the frame is dark until a site fills it. */
.demo .browser-viewport { background-color: #0d1320; background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px); background-size: 22px 22px; }
.demo .viewport-placeholder { flex-direction: column; gap: 1.5rem; }
.demo .viewport-placeholder p { color: var(--muted); max-width: 460px; }
.viewport-placeholder kbd { font-family: var(--mono); font-size: 0.85em; background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; padding: 0.05em 0.45em; color: var(--text); }
/* The prompt on the empty tab: the one thing on it that says "type here".
   It breathes until it has been used, has a caret blinking in it even when
   it is not focused, and carries a pointer that names what it is for. */
.demo-prompt-form { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; width: min(100%, 580px); }
.demo-prompt-label { color: #fff; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; }
/* A bright point runs round the prompt's border, quicker and brighter than
   the one on the browser's frame, because this is the thing to look at: a
   border that moves is not part of a picture. It stops once the prompt has
   been used. A browser without @property gets the same border standing
   still. */
@property --prompt-orbit { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes prompt-orbit { to { --prompt-orbit: 360deg; } }
.demo-prompt {
  position: relative; display: flex; align-items: center; gap: 0.55rem; width: 100%; min-height: 60px; padding: 0.4rem 0.45rem 0.4rem 1rem;
  border: 2px solid transparent; border-radius: 16px; cursor: text; text-align: left;
  background:
    linear-gradient(#0b101b, #0b101b) padding-box,
    conic-gradient(from var(--prompt-orbit), rgba(47, 180, 102, 0.35) 0deg, rgba(47, 180, 102, 0.35) 180deg, var(--green) 265deg, #c4ffdc 325deg, rgba(47, 180, 102, 0.35) 360deg) border-box;
  box-shadow: 0 0 0 4px var(--green-soft), 0 0 40px rgba(47, 180, 102, 0.18);
  animation: prompt-orbit 2.4s linear infinite, demo-breathe 2.6s ease-in-out infinite;
}
@keyframes demo-breathe { 50% { box-shadow: 0 0 0 8px rgba(47, 180, 102, 0.08), 0 0 64px rgba(47, 180, 102, 0.32); } }
.demo.is-used .demo-prompt { animation: none; background: linear-gradient(#0b101b, #0b101b) padding-box, linear-gradient(var(--green), var(--green)) border-box; }
.demo-prompt:focus-within { animation: prompt-orbit 2.4s linear infinite; box-shadow: 0 0 0 4px rgba(47, 180, 102, 0.30), 0 0 64px rgba(47, 180, 102, 0.30); }
.demo-prompt-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.demo-prompt .demo-scheme { font-size: var(--fs-lg); }
.demo-prompt input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font-size: var(--fs-lg); padding: 0.5rem 0; caret-color: var(--green); }
.demo-prompt input::placeholder { color: var(--muted); }
.demo-prompt input:read-only { color: var(--text-2); }
.demo-prompt .btn { flex: none; padding: 0.7rem 1.2rem; border-radius: 12px; }
/* A caret for a field that has not been clicked yet. The real one takes
   over the moment the field is focused or holds anything. */
.demo-prompt-caret { flex: none; width: 2px; height: 1.5rem; margin-right: -0.4rem; background: var(--green); animation: demo-caret 1.1s steps(2) infinite; }
@keyframes demo-caret { 50% { opacity: 0; } }
.demo-prompt:focus-within .demo-prompt-caret, .demo-prompt:has(input:not(:placeholder-shown)) .demo-prompt-caret { display: none; }
/* The pointer: a tag above the field with a tail that points into it. */
.demo-prompt-pointer { position: absolute; left: 3.1rem; bottom: calc(100% + 0.6rem); padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--green); color: #05230f; font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; pointer-events: none; animation: demo-bob 1.6s ease-in-out infinite; }
.demo-prompt-pointer::after { content: ""; position: absolute; left: 1.1rem; top: 100%; border: 6px solid transparent; border-top-color: var(--green); border-bottom: 0; }
@keyframes demo-bob { 50% { transform: translateY(-4px); } }
.demo.is-used .demo-prompt-pointer { display: none; }
/* The label sits where the pointer would, so it moves over to make room. */
.demo-prompt-form .demo-prompt-label { margin-bottom: 1.6rem; }
.demo.is-used .demo-prompt-form .demo-prompt-label { margin-bottom: 0; }
.demo .viewport-placeholder p.demo-prompt-hint { margin: 0; font-size: var(--fs-sm); }
/* The hint says what the device in hand can actually do. */
.only-touch { display: none; }
@media (hover: none), (pointer: coarse) { .only-touch { display: inline; } .only-keys { display: none; } }
/* The end of a demo. The last capture stays as a dimmed backdrop, the page
   area becomes as tall as the card on it, and the card carries the way to
   a key first and the prompt for another site under it. The key is the
   primary action here, so the prompt's own button steps back. */
.demo .browser-frame.is-ended .browser-viewport { aspect-ratio: auto; }
.demo .browser-frame.is-ended .browser-viewport img:not(.is-cropped) { object-fit: cover; }
.demo .browser-frame.is-ended .viewport-overlay { position: relative; inset: auto; min-height: inherit; padding: 1.5rem 1rem; }
.demo .browser-frame.is-ended .overlay-card { width: min(100%, 600px); max-width: none; padding: 1.5rem; }
.is-ended .demo-prompt-form { width: 100%; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--border); gap: 0.7rem; }
.is-ended .demo-prompt-form .demo-prompt-label { margin-bottom: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.is-ended .demo-prompt { min-height: 52px; box-shadow: none; }
.is-ended .demo-prompt:focus-within { box-shadow: 0 0 0 3px var(--green-soft); }
.is-ended .demo-prompt .btn { background: none; border: 1px solid var(--border-strong); color: var(--text); box-shadow: none; }
.is-ended .demo-prompt .btn:hover { border-color: var(--green); }
.is-ended .demo-prompt-hint { display: none; }

/* Shortcuts, as on Chrome's new tab page: a round mark and a name. */
.ntp-shortcuts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.75rem; margin: 0; padding: 0; }
.ntp-shortcut { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; width: 5.75rem; padding: 0.65rem 0.25rem; background: none; border: 0; border-radius: 12px; color: var(--text-2); font-size: var(--fs-xs); cursor: pointer; transition: background-color 0.15s ease; }
.ntp-shortcut:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: #fff; }
.ntp-shortcut:disabled { opacity: 0.5; cursor: default; }
.ntp-icon { width: 46px; height: 46px; border-radius: 50%; background: #1a2233; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg); font-weight: 700; color: var(--green); }
.demo .viewport-placeholder strong { color: var(--text); }
.demo .viewport-overlay { background: rgba(10, 14, 23, 0.6); }
/* While a browser is being claimed, a sweep crosses the empty page. */
.demo .browser-frame.is-launching .browser-viewport::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(47, 180, 102, 0.10) 50%, transparent 70%); background-size: 220% 100%; animation: demo-sweep 1.6s linear infinite; }
@keyframes demo-sweep { from { background-position: 220% 0; } to { background-position: -220% 0; } }
/* The first capture is wiped in from the top behind a scan line. */
.browser-viewport img.is-revealing { animation: demo-reveal 0.7s ease-out both; }
@keyframes demo-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.browser-viewport.is-scanning::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--green); box-shadow: 0 0 18px 4px rgba(47, 180, 102, 0.6); animation: demo-scan 0.7s ease-out both; }
@keyframes demo-scan { from { top: 0; opacity: 1; } to { top: 100%; opacity: 0; } }

/* The launch steps: each moves when the request behind it is answered. */
.launch { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; text-align: left; }
.launch li { display: flex; align-items: center; gap: 0.7rem; color: var(--muted); font-size: var(--fs-sm); }
.launch-mark { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); }
.launch-what { flex: 1; }
.launch-ms { font-family: var(--mono); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.launch li.is-active { color: var(--text); }
.launch li.is-active .launch-mark { border-top-color: var(--green); animation: spin 0.9s linear infinite; }
.launch li.is-done { color: var(--text-2); }
.launch li.is-done .launch-mark { border-color: var(--green); background: var(--green-soft); }
.launch li.is-done .launch-mark::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.launch li.is-done .launch-ms { color: var(--green); }
.launch li.is-warn, .launch li.is-warn .launch-ms { color: var(--amber); }
.launch li.is-warn .launch-mark { border-color: var(--amber); }
.launch li.is-failed { color: var(--red); }
.launch li.is-failed .launch-mark { border-color: var(--red); }

/* The call log: the API calls behind the picture, as the server made them.
   Four lines tall from the start, so nothing below it moves as they arrive. */
.demo-console { background: #0b101b; border-top: 1px solid var(--border); padding: 0.65rem 0.95rem; min-height: 7.2rem; font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.75; text-align: left; overflow-x: auto; }
.demo-console p { margin: 0; white-space: nowrap; }
.demo-console p.demo-console-idle { color: var(--muted); white-space: normal; }
.demo-console-idle::before { content: "\203A  "; color: var(--green); }
.demo-console-line { display: flex; gap: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Columns keep their width: a line too long for the frame scrolls in the
   log rather than squeezing one column under the next. */
.demo-console-line > span { flex: none; }
.demo-console-line .c-path { color: var(--text); min-width: 9.5rem; }
.demo-console-line .c-status { min-width: 2.4rem; }
.demo-console-line.is-ok .c-status { color: var(--green); }
.demo-console-line.is-bad .c-status { color: var(--red); }
.demo-console-line.is-pending .c-status::after { content: "\2026"; animation: demo-blink 1s steps(2) infinite; }
@keyframes demo-blink { 50% { opacity: 0.25; } }

/* What the demo was, as API calls: shown under the frame once it has ended. */
.demo-next { margin-top: 1.75rem; text-align: left; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem; }
.demo-next h2 { font-size: var(--fs-xl); margin-bottom: 0.4rem; }
.demo-next p { color: var(--text-2); font-size: var(--fs-sm); }
.demo-next .code-panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); margin: 1rem 0 1.25rem; }
.demo-next .cta-row { justify-content: flex-start; }


/* ---------- How it works ------------------------------------------------ */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 2.5rem; }
.steps li { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.step-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.steps strong { display: block; color: #fff; margin-bottom: 0.2rem; }
.steps span:not(.step-num) { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-normal); }

.code-tabs { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.code-tabs-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.code-tabs-bar button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; padding: 0.8rem 1.25rem; margin-bottom: -1px; }
.code-tabs-bar button[aria-selected="true"] { color: #fff; border-bottom-color: var(--green); }
.code-panel { position: relative; padding: 1.25rem 1.5rem; overflow-x: auto; background: var(--surface); }
.guide-body .code-panel { border: 1px solid var(--border-strong); border-radius: var(--radius); margin: 1rem 0 1.5rem; }
/* Tabbed samples in a guide: the frame is the tabs', so its panels drop theirs. */
.guide-body .code-tabs { margin: 1rem 0 1.5rem; box-shadow: none; }
.guide-body .code-tabs .code-panel { border: 0; border-radius: 0; margin: 0; }
.copy-btn { position: absolute; top: 0.75rem; right: 0.75rem; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-2); border-radius: 8px; padding: 0.3rem 0.7rem; font-size: var(--fs-2xs); font-weight: 600; }
.copy-btn.is-done { color: var(--green); border-color: var(--green); }

/* ---------- Cards ------------------------------------------------------- */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem; margin-bottom: 1.25rem; }
.cards-grid .card { margin: 0; }
.card h2 { font-size: var(--fs-xl); margin-bottom: 0.6rem; }
.card h3 { color: #fff; margin-bottom: 0.4rem; }
.card p:last-child { margin-bottom: 0; }
.card.notice { border-color: rgba(47, 180, 102, 0.4); background: linear-gradient(180deg, var(--green-soft), transparent 120%); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 1.1rem; }
.card-head h2 { margin: 0; }
.card-head p { margin: 0; font-size: var(--fs-sm); }
.card h3 + .table-wrap, .card h3 { margin-top: 1.5rem; }

/* Usage meters. A bar only appears where the plan sets an allowance: with
   nothing to fill, a full-width track reads as a limit that is not there. */
.usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.usage-stat { display: flex; flex-direction: column; gap: 0.3rem; }
.usage-label { color: var(--muted); font-size: var(--fs-xs); }
.usage-value { color: #fff; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.usage-of { color: var(--muted); font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0; }
.meter { display: block; height: 5px; margin-top: 0.4rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.meter-warm > span { background: var(--amber); }
.meter-hot > span { background: var(--red); }
/* Usage charts: one series each, current period in the accent, earlier ones recessive. */
.usage-first { margin: 0 0 1rem; }
.charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; margin: 1.5rem 0 0.5rem; }
.chart { margin: 0; }
.chart-title { color: var(--muted); font-size: var(--fs-xs); margin-bottom: 0.35rem; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { stroke: var(--border-strong); stroke-width: 1; }
.chart-limit { stroke: var(--amber); stroke-width: 1; opacity: 0.8; }
.chart-tick { fill: var(--muted); font-size: 10px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart-value { fill: var(--text); font-size: 11px; font-weight: 600; font-family: var(--font); }
.chart-bar path { fill: rgba(139, 152, 169, 0.42); transition: fill 0.15s ease; }
.chart-bar.is-current path { fill: var(--green); }
.chart-bar:hover path { fill: var(--text-2); }
.chart-bar.is-current:hover path { fill: var(--green-600); }
.chart-hit { fill: transparent; }
td > .meter { max-width: 140px; }

.cta-band { padding: 4rem 0; }
.cta-band-inner { text-align: center; background: linear-gradient(135deg, rgba(47, 180, 102, 0.18), rgba(91, 156, 246, 0.10)); border: 1px solid var(--border-strong); border-radius: 20px; padding: 3.5rem 2rem; }
.cta-band-inner p { color: var(--text-2); font-size: var(--fs-lg); margin-bottom: 1.75rem; }

/* ---------- What we offer ------------------------------------------------ */
.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.offer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; }
.offer-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 1rem;
  border-radius: 12px; background: var(--green-soft); color: var(--green);
}
.offer-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.offer h3 { color: #fff; margin-bottom: 0.4rem; }
.offer p { color: var(--text-2); font-size: var(--fs-sm); margin: 0; }

/* ---------- Plan strip (home) -------------------------------------------- */
.plan-strip { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.plan-strip a {
  display: flex; flex-direction: column; gap: 0.3rem; height: 100%;
  padding: 1.4rem 1.25rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.plan-strip a:hover { text-decoration: none; border-color: var(--border-strong); transform: translateY(-2px); }
.plan-strip .is-featured a { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-soft); }
.plan-strip-name { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.plan-strip-price { color: #fff; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: var(--lh-tight); }
.plan-strip-period { color: var(--muted); font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; margin-left: 0.25rem; }
.plan-strip-browsers { color: var(--text-2); font-size: var(--fs-sm); }

/* ---------- Pricing: the configurator ------------------------------------ */
/* The headline above the configurator is a sentence, not a label. It fits
   one line at desktop width until the product's name is in it, so the two
   lines are balanced rather than left with "price." on its own. */
.page-head .section-head { max-width: 880px; }
.page-head .section-head h1 { text-wrap: balance; }
/* One slider and the price it comes to. The summary is the one object on
   the page with the highlighted-plan treatment, because it is the only thing
   on it anybody has to decide. */
.configurator {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem; align-items: stretch;
  max-width: 940px; margin: 0 auto;
}
/* A grid or flex child is min-width:auto by default, so it refuses to shrink
   below its own content and overflows the column instead of wrapping. On
   /pricing the configurator gets the whole container and never hits it; inside
   a members card it is about 65px narrower, and at 320px these two panels
   stayed 305px wide and pushed the page into a sideways scroll. Letting them
   shrink is the whole fix -- the content inside wraps once it is allowed to. */
.config-controls, .config-summary, .config-label, .config-includes li { min-width: 0; }
.config-label label, .config-includes li span { min-width: 0; }
.config-controls {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.9rem 1.75rem; display: flex; flex-direction: column; gap: 1.75rem;
}
.config-field { display: flex; flex-direction: column; gap: 0.6rem; }
.config-label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.config-label label { font-weight: 600; color: var(--text); }
.config-label .muted { font-weight: 400; font-size: var(--fs-sm); }
.config-value {
  min-width: 2.75rem; text-align: center; font-size: var(--fs-xl); font-weight: 700; color: #fff;
  background: var(--green-soft); border: 1px solid var(--green); border-radius: var(--radius);
  padding: 0.1rem 0.6rem; line-height: 1.4;
}
.config-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--fs-2xs); }
.config-hint { color: var(--muted); font-size: var(--fs-sm); margin: 0; min-height: 3em; }
/* Naming the shortcuts stops them reading as the only counts on offer: the
   track itself runs 1..max and every whole number on it can be bought. */
.config-presets-label { margin: 0.9rem 0 0.35rem; color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; }
.config-presets { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.config-preset {
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-2);
  border-radius: 999px; padding: 0.25rem 0.85rem; font-size: var(--fs-xs); cursor: pointer;
}
.config-preset:hover { border-color: var(--green); color: var(--text); }
.config-preset.is-on { background: var(--green-soft); border-color: var(--green); color: #fff; }
.config-facts { list-style: none; border-top: 1px solid var(--border); padding-top: 1.1rem; margin: auto 0 0; }
.config-facts li { position: relative; padding-left: 1.5rem; margin-bottom: 0.4rem; color: var(--text-2); font-size: var(--fs-sm); }
.config-facts li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.config-summary {
  background: var(--surface); border: 1px solid var(--green); border-radius: var(--radius-lg);
  box-shadow: 0 0 0 3px var(--green-soft), var(--shadow);
  padding: 1.9rem 1.75rem; display: flex; flex-direction: column;
}
.config-total { display: flex; align-items: baseline; gap: 0.15rem; }
.config-amount { font-size: 3.2rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.config-breakdown { color: var(--muted); font-size: var(--fs-sm); margin: 0.35rem 0 1.25rem; }
.config-includes { list-style: none; border-top: 1px solid var(--border); margin-bottom: 1.5rem; flex: 1; }
.config-includes li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-2); }
.config-includes li:last-child { border-bottom: 0; }
.config-includes strong { color: #fff; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.config-trust { color: var(--muted); font-size: var(--fs-xs); text-align: center; margin: 0.75rem 0 0; }

/* One control, styled once for both engines. The track is the plain border
   colour and the thumb is the accent, so a slider reads as something to move
   rather than as decoration. */
.configurator input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; padding: 0;
  background: var(--border-strong); border: 0; border-radius: 999px; cursor: pointer;
}
.configurator input[type="range"]:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.configurator input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--green);
}
.configurator input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--green);
  border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--green);
}
.configurator input[type="range"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* Standard node beside GPU node. */
.kind-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 880px; margin: 0 auto; }
.kind { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 1.6rem; }
.kind-feature { border-color: var(--border-strong); }
.kind h3 { font-size: var(--fs-xl); margin-bottom: 0.4rem; }
.kind-price { display: flex; align-items: baseline; gap: 0.15rem; margin-bottom: 0.75rem; }
.kind-list { list-style: none; margin-top: 1rem; }
.kind-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.45rem; color: var(--text-2); font-size: var(--fs-sm); }
.kind-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
/* The same list for the side being compared against: a dash, not a tick. */
.kind-list-plain li::before { top: 0.75em; width: 0.7rem; height: 0; border-left: 0; border-bottom-color: var(--muted); transform: none; }
.kind .code-panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 1rem; padding: 0.9rem 1rem; }
/* The cards are grid children, so a line of code inside one would otherwise
   hold the card wider than a 320px screen. It scrolls in its panel instead. */
.kind { min-width: 0; }

/* ---------- Pricing ------------------------------------------------------ */
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.75rem; }
.plan-highlight { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft), var(--shadow); }
.plan-badge { position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%); background: var(--green); color: #05230f; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 999px; }
.plan h2, .plan h3 { font-size: var(--fs-xl); margin-bottom: 0.25rem; }
.plan-tagline { color: var(--muted); min-height: 3em; }
.plan-price { display: flex; align-items: baseline; gap: 0.15rem; margin: 0.5rem 0 1rem; }
.plan-currency { font-size: var(--fs-xl); color: var(--text-2); }
.plan-amount { font-size: 2.8rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.plan-period { color: var(--muted); margin-left: 0.4rem; }
.plan-limits { list-style: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0.9rem 0; margin-bottom: 1rem; color: var(--text); font-weight: 500; }
.plan-limits li { padding: 0.15rem 0; }
.plan-features { list-style: none; margin-bottom: 1.75rem; flex: 1; }
.plan-features li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: var(--text-2); }
.plan-features li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.plans-grid-compact .plan { padding: 1.5rem 1.4rem; margin-bottom: 1.25rem; }
.plans-grid-compact .plan-amount { font-size: 2.1rem; }
.plan-addons { margin-bottom: 0.9rem; }
.plan-addons label { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0; font-size: var(--fs-sm); color: var(--text-2); }
.plan-addons input { width: 4.5rem; padding: 0.35rem 0.5rem; font-size: var(--fs-sm); text-align: right; }

/* Four tiers need less room per card than three did. */
.plans-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.15rem; }
.plans-grid-4 .plan { padding: 1.75rem 1.35rem; }
.plans-grid-4 .plan h2 { font-size: var(--fs-xl); }
.plans-grid-4 .plan-amount { font-size: 2.4rem; }
.plans-grid-4 .plan-tagline { font-size: var(--fs-sm); min-height: 4.5em; }
.plans-grid-4 .plan-features li { font-size: var(--fs-sm); }
.plan-limits strong { color: #fff; }

/* The custom tier: one wide band, because it has no price to compare. */
.plan-wide {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 2rem; align-items: center;
  margin-top: 1.5rem; padding: 2rem 1.75rem;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
}
.plan-wide-head h2, .plan-wide-head h3 { font-size: var(--fs-xl); margin-bottom: 0.25rem; }
.plan-wide-head p { color: var(--muted); margin: 0; }
.plan-wide-features { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 1.5rem; margin: 0; padding: 0; }
.plan-wide-features li { position: relative; padding-left: 1.5rem; color: var(--text-2); font-size: var(--fs-sm); }
.plan-wide-features li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }

/* Add-ons */
.addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.addon { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; }
.addon h3 { margin-bottom: 0.5rem; }
.addon p { color: var(--text-2); margin: 0; }
.addon p + p { margin-top: 0.75rem; }
.addon-price { display: flex; align-items: baseline; gap: 0.1rem; margin: 0 0 0.9rem; }
.addon-amount { font-size: 2.1rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.addon-tba { font-size: var(--fs-lg); font-weight: 700; color: #fff; }
.addon-rates { list-style: none; margin: 0 0 0.9rem; padding: 0.75rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.addon-rates li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; color: var(--text-2); font-size: var(--fs-sm); }
.addon-rates li span:last-child { color: var(--text); font-weight: 600; white-space: nowrap; }

/* Comparison table. Seventeen rows of numbers is a wall; the bands are what
   make it scan, and the first column stays put while the plans scroll under
   it on a narrow screen. */
.table.compare th[scope="row"] { font-weight: 500; color: var(--text-2); text-align: left; white-space: normal; }
.table.compare tbody th[scope="row"] { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.table.compare .compare-group th {
  position: static; background: var(--bg-2); color: var(--green);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding-top: 1.1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-strong);
}
.table.compare th[scope="row"] .muted { display: block; font-size: var(--fs-xs); }
.table.compare td { text-align: center; white-space: nowrap; }
.table.compare thead th + th { text-align: center; }
.table.compare .yes { color: var(--green); font-weight: 600; }
.table.compare .no { color: var(--muted); }

.faq { max-width: 760px; margin: 0 auto; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 0 1.25rem; margin-bottom: 0.75rem; }
.faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; list-style: none; position: relative; padding-right: 2rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 0.85rem; color: var(--green); font-size: var(--fs-xl); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--text-2); padding-bottom: 1rem; }

/* ---------- Guides -------------------------------------------------------- */
.guide-layout { display: grid; grid-template-columns: 220px 1fr; gap: 3rem; align-items: start; }
/* A grid child is min-width:auto, so without this the longest line of code
   in the guide sets the width of its column, and on a phone that is half as
   wide again as the screen. Allowed to shrink, the code scrolls inside its
   own panel instead and the prose wraps to the screen. */
.guide-layout > * { min-width: 0; }
.guide-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); display: flex; flex-direction: column; gap: 0.4rem; }
.guide-toc a { color: var(--text-2); padding: 0.35rem 0.75rem; border-left: 2px solid var(--border); }
.guide-toc a:hover { color: #fff; border-left-color: var(--green); text-decoration: none; }
.guide-toc a[aria-current="true"] { color: #fff; border-left-color: var(--green); font-weight: 600; }
.guide-body h2 { font-size: var(--fs-2xl); margin-top: 2.5rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.guide-body h2:first-child { margin-top: 0; }
.guide-body p { color: var(--text-2); }
.guide-body h3 { color: #fff; margin-top: 1.75rem; }
.guide-body .table-wrap { margin: 1rem 0 1.5rem; }
/* A reference table whose terms are code: each stays on one line while there
   is a second column to give way. Stacked, it wraps like any other. */
@media (min-width: 641px) { .table-terms td:first-child { white-space: nowrap; } }
.tag { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); background: var(--green-soft); border-radius: 999px; padding: 0.1rem 0.5rem; margin-left: 0.35rem; vertical-align: middle; }

/* ---------- Tables ---------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { background: var(--bg-2); color: var(--muted); font-weight: 600; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; }
.table tr:last-child td { border-bottom: 0; }
.badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 600; }
.badge-ok { background: var(--green-soft); color: var(--green); }
.badge-off { background: var(--red-soft); color: var(--red); }
.badge-info { background: var(--blue-soft); color: var(--blue); }

/* ---------- Forms ------------------------------------------------------------ */
.form h1 { font-size: 1.8rem; }
.form h2 { font-size: var(--fs-xl); }
.form-intro { color: var(--muted); }
.form-row { margin-bottom: 1.1rem; }
.form-row label { display: block; font-weight: 500; margin-bottom: 0.4rem; }
.form-row small { display: block; color: var(--muted); margin-top: 0.35rem; font-size: var(--fs-xs); }
.optional { color: var(--muted); font-weight: 400; font-size: var(--fs-xs); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 0.7rem 0.9rem; color: var(--text); outline: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.form-row input:disabled { color: var(--muted); }
.form-row textarea { resize: vertical; }
.form-foot { color: var(--muted); margin: 1.1rem 0 0; text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth-section { padding: 4rem 0 6rem; }
.auth-layout { display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 440px; padding: 2rem; }
.support-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 2rem; align-items: start; }

/* ---------- Members ----------------------------------------------------------- */
.members-shell { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; padding: 2.5rem 0 4rem; align-items: start; }
.members-nav { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.members-nav nav { display: flex; flex-direction: column; gap: 0.2rem; }
.members-nav nav a { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; border-radius: 10px; color: var(--text-2); font-weight: 500; }
.members-nav nav a:hover { background: var(--surface); color: #fff; text-decoration: none; }
.members-nav nav a.is-active { background: var(--green-soft); color: var(--green); }
.members-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.members-nav-logout { margin-top: 1.5rem; padding-left: 0.8rem; }
.members-main { min-width: 0; }
.page-title { margin-bottom: 1.75rem; }
.page-title h1 { font-size: 1.9rem; margin-bottom: 0.25rem; }
.page-title p { color: var(--muted); margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 0.2rem; }
.stat-label { color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.stat-value { font-size: 1.6rem; font-weight: 700; color: #fff; }
.stat-link { font-size: var(--fs-sm); margin-top: 0.3rem; }

/* ---------- Errors ------------------------------------------------------------ */
.error-page h1 { margin-bottom: 1rem; }

/* ---------- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .site-header-inner { gap: 1.25rem; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--border);
    padding: 0.5rem 1.25rem 1.25rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav > a { padding: 0.8rem 0; border-bottom: 1px solid var(--border); }
  .site-nav > a.is-active { border-bottom-color: var(--border); color: var(--green); }
  .site-nav-actions { margin: 1rem 0 0; justify-content: space-between; }
  .steps, .cards-grid, .plans-grid, .plans-grid-4, .addon-grid, .offer-grid, .plan-strip { grid-template-columns: 1fr 1fr; }
  .demo .browser-frame.is-idle .browser-viewport, .demo .browser-frame.is-launching .browser-viewport { min-height: 340px; }
  .configurator { grid-template-columns: 1fr; }
  .plan-wide { grid-template-columns: 1fr; gap: 1.25rem; }
  .guide-layout, .support-layout, .site-footer-inner { grid-template-columns: 1fr; }
  .guide-toc { position: static; flex-direction: row; flex-wrap: wrap; }
  .guide-toc a { border-left: 0; border-bottom: 2px solid var(--border); }
  .guide-toc a[aria-current="true"] { border-bottom-color: var(--green); }
  .members-shell { grid-template-columns: 1fr; gap: 1.5rem; }
  .members-nav { position: static; }
  .members-nav nav { flex-direction: row; flex-wrap: wrap; }
  .members-nav-logout { margin-top: 0.75rem; padding-left: 0; }
}
@media (max-width: 640px) {
  .section { padding: 3.5rem 0; }
  .hero { padding-top: 3rem; }
  /* A reference table whose second column is a paragraph does not survive
     being squeezed into 360px, and scrolling it sideways to read prose is
     worse than not having a table. Each row becomes a block: the endpoint
     as its own line, the description under it. */
  .table-wrap.is-stacked { border: 0; border-radius: 0; overflow: visible; }
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { border-bottom: 1px solid var(--border); padding: 0.9rem 0; }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { border: 0; padding: 0; }
  .table-stack td:first-child { margin-bottom: 0.4rem; }
  /* The footer on a phone: four groups in one column was a screen and a
     half of scrolling past links. Two by two, with rows tall enough to
     tap, and the brand line no longer pushing them down the page. */
  .site-footer { padding: 2.5rem 0 1.25rem; }
  .site-footer-inner { gap: 1.75rem; }
  .site-footer-brand p { margin-top: 0.6rem; max-width: none; font-size: var(--fs-sm); }
  .site-footer-cols { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
  .site-footer-cols h3 { margin-bottom: 0.4rem; }
  .site-footer-cols a { margin-bottom: 0; padding: 0.45rem 0; }
  .site-footer-legal { margin-top: 1.75rem; text-align: center; }
  /* On a narrow panel the first lines of code run under the copy button,
     so the button gets a row of its own above them. */
  .code-panel:has(.copy-btn) { padding-top: 3rem; }
  .table-stack td:first-child code { font-size: var(--fs-sm); }
  .chips, .steps, .cards-grid, .plans-grid, .plans-grid-4, .addon-grid, .stat-grid, .offer-grid, .kind-grid { grid-template-columns: 1fr; }
  .config-controls, .config-summary { padding: 1.5rem 1.25rem; }
  .config-amount { font-size: 2.6rem; }
  .usage-grid { grid-template-columns: 1fr 1fr; }
  .charts-grid { grid-template-columns: 1fr; }
  .plan-wide-features { grid-template-columns: 1fr; }
  .chips li { justify-content: flex-start; }
  .cluster { margin-bottom: 2rem; }
  /* The address bar keeps the whole toolbar: the arrows, the star and the
     profile are the first things to go. The field is 16px so a phone does
     not zoom the page when it is tapped. */
  .demo .address-nav, .demo .address-tools, .demo .address-box .omni-star { display: none; }
  .demo .browser-address { padding: 0.45rem 0.5rem; }
  .demo .address-box { min-height: 42px; padding-right: 0.3rem; }
  .demo .browser-frame.is-idle .browser-viewport, .demo .browser-frame.is-launching .browser-viewport { min-height: 300px; }
  .demo .viewport-placeholder { padding: 1.25rem 1rem; gap: 1rem; }
  .demo-prompt { flex-wrap: wrap; padding: 0.4rem 0.6rem 0.6rem 0.8rem; }
  .demo-prompt input { flex: 1 1 8rem; }
  .demo-prompt .btn { flex: 1 0 100%; }
  .demo-prompt-pointer { display: none; }
  .demo-prompt-form .demo-prompt-label { margin-bottom: 0; font-size: var(--fs-lg); }
  .demo-console-line { gap: 0.6rem; }
  .demo-console-line .c-path { min-width: 0; }
  .browser-tab { min-width: 0; }
  .browser-viewport { min-height: 240px; }
  .plan-highlight { transform: none; }
}

/* ---------- Small phones -------------------------------------------------
 * Below about 420px the gutter matters more than the grid: content that can
 * scroll inside itself does, and everything else gets narrower rather than
 * wider than the screen.
 */
@media (max-width: 480px) {
  .container { width: min(var(--container), 100% - 1.75rem); }
  .section { padding: 2.75rem 0; }
  .plan-strip { grid-template-columns: 1fr; }
  .plan-strip a { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.6rem; padding: 1rem 1.1rem; }
  .plan-strip-name { flex: 1 0 100%; }
  .plan-strip-price { font-size: var(--fs-xl); }
  .section-head { margin-bottom: 1.75rem; }
  .demo-label { font-size: var(--fs-md); }
  .browser-viewport { min-height: 190px; }
  .viewport-placeholder p { font-size: var(--fs-sm); }
  /* A tab bar with three languages is wider than the screen; let it scroll
     inside its own panel instead of the page scrolling under it. */
  .code-tabs-bar { overflow-x: auto; scrollbar-width: none; }
  .code-tabs-bar::-webkit-scrollbar { display: none; }
  .code-tabs-bar button { flex: none; padding: 0.7rem 1rem; }
  .code-panel { padding: 1rem; }
  .demo-next { padding: 1.1rem 1rem; }
  .ntp-shortcuts { gap: 0.25rem; }
  /* Every call is a POST; on a phone the column that says so makes room. */
  .demo-console-line .c-method { display: none; }
  .ntp-shortcut { width: 4.9rem; }
  .demo .browser-tab { min-width: 0; }
  .faq summary { font-size: var(--fs-sm); }
  .guide-toc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .guide-toc::-webkit-scrollbar { display: none; }
  .guide-toc a { white-space: nowrap; }
  .cta-row .btn, .cta-band-inner .btn { width: 100%; }
  .cta-band-inner { padding: 2.25rem 1.25rem; }
  .card { padding: 1.25rem 1.1rem; }
  .plan { padding: 1.5rem 1.25rem; }
  .faq details { padding: 0 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn:hover { transition: none; transform: none; }
  .spinner { animation-duration: 2s; }
  .demo .browser-frame, .demo .browser-frame.is-launching .browser-viewport::before, .demo-console-line.is-pending .c-status::after { animation: none; }
  .browser-viewport img.is-revealing, .browser-viewport.is-scanning::after { animation: none; }
  .launch li.is-active .launch-mark { animation-duration: 2s; }
  .ntp-shortcut { transition: none; }
  .demo-prompt, .demo-prompt-caret, .demo-prompt-pointer { animation: none; }
}

/* ---------- Admin --------------------------------------------------------------- */
.admin-who { padding: 0.4rem 0.8rem 0.9rem; border-bottom: 1px solid var(--border); margin-bottom: 0.6rem; }
.admin-who strong { display: block; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-who span { display: block; margin-top: 0.25rem; }
.members-nav-secondary { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.2rem; }
.members-nav-secondary a { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; border-radius: 10px; color: var(--text-2); font-weight: 500; }
.members-nav-secondary a:hover { background: var(--surface); color: #fff; text-decoration: none; }
.members-nav-secondary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-title h1 .badge { vertical-align: middle; margin-left: 0.35rem; font-size: var(--fs-2xs); }
.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }
a.stat { color: inherit; }
a.stat:hover { text-decoration: none; border-color: var(--border-strong); }
.stat-sub { color: var(--muted); font-size: var(--fs-xs); margin-top: 0.2rem; }
.stat-value-sm { font-size: var(--fs-md); word-break: break-word; }
.admin-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.admin-columns > .card, .admin-columns > div > .card { margin-bottom: 1.25rem; }
.admin-columns-top { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.form-sub h3 { font-size: var(--fs-md); margin-bottom: 0.4rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.form-check { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1rem; font-weight: 500; cursor: pointer; }
.form-check input { width: 18px; height: 18px; accent-color: var(--green); }
.form-checks { display: flex; flex-direction: column; gap: 0; margin-top: 0.5rem; }
/* Endpoint gates: many short labels, so they read as a block rather than a
   column the eye has to travel down. */
.form-checks-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1rem; }
.form-checks-grid .form-check { margin-bottom: 0.55rem; font-weight: 400; }
.form-checks-grid code { font-size: var(--fs-xs); }
.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filters input, .filters select { background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0.55rem 0.8rem; color: var(--text); outline: 0; min-width: 0; }
.filters input[type="search"] { flex: 1; min-width: 220px; }
.filters input:focus, .filters select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.filters-clear { color: var(--muted); font-size: var(--fs-sm); }
.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tabs a { padding: 0.5rem 0.9rem; color: var(--text-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: #fff; text-decoration: none; }
.tabs a.is-active { color: var(--green); border-bottom-color: var(--green); }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .table-wrap { border: 0; border-radius: 0; }
.card-flush .pagination { margin: 0; padding: 0.9rem 1.2rem; border-top: 1px solid var(--border); }
.card-pad { padding: 1.5rem 1.6rem; margin: 0; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.fine-print-left { color: var(--muted); font-size: var(--fs-sm); margin: 1rem 0 0; }
.table-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.table-actions form { display: inline; margin: 0; }
.btn-xs { padding: 0.25rem 0.6rem; font-size: var(--fs-2xs); border-radius: 8px; }
.btn-danger { color: var(--red); border-color: rgba(239, 83, 80, 0.5); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn.is-done { color: var(--green); border-color: var(--green); }
.badge-warn { background: var(--amber-soft); color: var(--amber); }
.badge-muted { background: var(--surface-2); color: var(--muted); }
.pagination { display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; margin-top: 1rem; flex-wrap: wrap; }
.pagination-info { color: var(--muted); font-size: var(--fs-sm); }
.pagination .is-disabled { opacity: 0.45; pointer-events: none; }
/* A call to action with nothing to act on: the configurator's, at zero nodes. */
.btn.is-disabled { opacity: 0.5; pointer-events: none; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.1rem; margin: 0; }
.kv dt { color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding-top: 0.2rem; }
.kv dd { margin: 0; }
.reveal { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.reveal-value { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.75rem; }
.reveal-value code { font-size: var(--fs-md); padding: 0.5rem 0.8rem; word-break: break-all; user-select: all; }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip-list code { font-size: var(--fs-2xs); }
.host-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.msg-excerpt summary { cursor: pointer; list-style: none; }
.msg-excerpt summary::-webkit-details-marker { display: none; }
.msg-excerpt summary::after { content: " +"; color: var(--green); }
.msg-excerpt[open] summary::after { content: " –"; }
.msg-excerpt p { white-space: pre-wrap; margin: 0.5rem 0 0; color: var(--text-2); font-size: var(--fs-sm); max-width: 520px; }
.cta-row-left { justify-content: flex-start; margin-top: 0.5rem; }
/* A key configuration read as rows: on a request page, inside an issue form, under a plan pick. */
.key-config { font-size: var(--fs-sm); }
.key-config dd { color: var(--text-2); }
.key-config-panel { margin: 0.25rem 0 1.1rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); }
.key-config-panel summary { font-weight: 500; }
.key-config-panel .key-config { margin-top: 0.75rem; }
.key-config-panel .fine-print-left { margin-top: 0.75rem; }
.key-config-diff { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.admin-columns-wide { grid-template-columns: 3fr 2fr; }
/* Inline role change on the users list and the team page. */
.role-form { display: inline-flex; gap: 0.35rem; align-items: center; margin: 0; }
.role-form select { background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.25rem 0.5rem; color: var(--text); font-size: var(--fs-xs); outline: 0; }
.role-form select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
@media (max-width: 960px) {
  .stat-grid-4 { grid-template-columns: 1fr 1fr; }
  .admin-columns, .admin-columns-wide, .form-grid { grid-template-columns: 1fr; }
  .form-grid-3 { grid-template-columns: 1fr 1fr; }
  .form-checks-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .stat-grid-4, .kv, .form-grid-3, .form-checks-grid { grid-template-columns: 1fr; }
  .kv dt { padding-top: 0.5rem; }
}

/* ---------- Plans before prices are published ------------------------------ */
.plan-price-tba { display: block; margin: 0.5rem 0 1rem; }
.plan-tba { display: block; font-size: var(--fs-xl); font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: var(--lh-tight); }
.plan-tba-note { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 0.3rem; }
.plans-grid-compact .plan-tba { font-size: var(--fs-lg); }

/* ---------- Live browser (members) ------------------------------------------ */
.console-key-form { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0.35rem 0 0; }
.console-start-form { margin-top: 0.25rem; }
.console-start-row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.console-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.console-field > span { color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.console-field input, .console-field select { background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0.6rem 0.8rem; color: var(--text); outline: 0; min-width: 0; }
.console-field input:focus, .console-field select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.console-field-grow { flex: 1 1 240px; }
.console-field-country input { width: 5.5rem; text-transform: uppercase; }
.console-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0 0 0.6rem; }
.console-tab { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px 10px 0 0; padding: 0.5rem 0.6rem 0.5rem 0.9rem; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; }
.console-tab:hover { color: #fff; border-color: var(--border-strong); }
.console-tab.is-active { color: #fff; border-color: var(--green); background: var(--green-soft); }
.console-tab-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console-tab-close { color: var(--muted); font-size: var(--fs-lg); line-height: 1; padding: 0 0.2rem; border-radius: 6px; }
.console-tab-close:hover { color: var(--red); background: var(--red-soft); }
.console-stage { margin-bottom: 1rem; }
.console-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; background: #0f1522; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.console-nav { display: inline-flex; gap: 0.25rem; }
.console-nav-btn { background: none; border: 0; border-radius: 8px; padding: 0.35rem; color: var(--muted); display: inline-flex; }
.console-nav-btn:hover { background: var(--surface-2); color: #fff; }
.console-nav-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.console-address { flex: 1 1 260px; display: flex; align-items: center; gap: 0.6rem; background: #1a2233; border-radius: 999px; padding: 0.3rem 0.4rem 0.3rem 1rem; min-width: 0; }
.console-address svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; }
.console-address input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font-size: var(--fs-sm); }
.console-address input::placeholder { color: var(--muted); }
.console-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.console-toggle { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: var(--fs-xs); cursor: pointer; white-space: nowrap; }
.console-toggle input { accent-color: var(--green); }
.console-viewport { position: relative; overflow: hidden; background: #f6f7f9; aspect-ratio: 16 / 10; min-height: 320px; cursor: crosshair; outline: 0; }
.console-viewport:focus-visible { box-shadow: inset 0 0 0 3px var(--green); }
.console-viewport.is-busy { cursor: progress; }
.console-viewport img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; background: #fff; user-select: none; -webkit-user-drag: none; }
.console-pill { position: absolute; left: 50%; bottom: 0.75rem; transform: translateX(-50%); max-width: 90%; background: rgba(10, 14, 23, 0.9); color: var(--green); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.3rem 0.85rem; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.console-pill.is-warn { color: var(--amber); }
.console-ripple { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--green); pointer-events: none; animation: console-ripple 0.55s ease-out forwards; }
@keyframes console-ripple { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.console-keys { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem 0.9rem; border-top: 1px solid var(--border); background: var(--bg-2); }
.console-type { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.console-type input { flex: 1 1 260px; min-width: 0; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0.5rem 0.8rem; color: var(--text); outline: 0; font-size: var(--fs-sm); }
.console-type input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.console-keyrow { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.console-key { background: var(--surface); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 8px; padding: 0.3rem 0.6rem; color: var(--text-2); font-size: var(--fs-2xs); font-weight: 600; min-width: 2.2rem; }
.console-key:hover { color: #fff; border-color: var(--text-2); }
.console-key:active { transform: translateY(1px); border-bottom-width: 1px; }
.console-status { padding: 0.6rem 0.9rem; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-2); }
@media (max-width: 640px) {
  .console-tools { margin-left: 0; }
  .console-viewport { min-height: 220px; cursor: pointer; }
}
.console-admin-head { margin-bottom: 0; }
/* Connected keys, the recipe and the proxy test on the Live browser page; key health on the dashboard. */
.key-chips { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.key-chip { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; padding: 0.6rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); }
.key-chip-name { flex: 1 1 200px; }
.key-chip-form { margin: 0; }
.console-connect-more { margin-top: 0.9rem; }
.console-connect-more summary { cursor: pointer; color: var(--text-2); font-weight: 500; }
.console-connect-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.console-connect-form input { flex: 1 1 240px; min-width: 0; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0.5rem 0.8rem; color: var(--text); outline: 0; }
.console-connect-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.console-connect-form small { flex-basis: 100%; }
.recipe-steps { margin: 0 0 1rem; padding-left: 1.4rem; font-size: var(--fs-sm); color: var(--text-2); }
.recipe-steps li { margin-bottom: 0.3rem; word-break: break-word; }
.recipe-steps code { font-size: var(--fs-2xs); }
.recipe-code { margin-top: 1rem; }
.recipe-code .code-panel { max-height: 480px; overflow: auto; }
.recipe-code pre { margin: 0; font-size: var(--fs-2xs); line-height: var(--lh-code); }
.notice-warn { border-color: rgba(245, 182, 74, 0.5); background: linear-gradient(180deg, var(--amber-soft), transparent 120%); }
.key-health { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: var(--fs-sm); }
.key-health li { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.key-health li > span:last-child { color: var(--text-2); }
/* Dashboard: what a new account does first, in order, ticked as it goes. */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; counter-reset: checklist; }
.checklist li { position: relative; padding-left: 2.6rem; counter-increment: checklist; }
.checklist li::before { content: counter(checklist); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.checklist li.is-done::before { content: "\2713"; background: var(--green-soft); border-color: var(--green); color: var(--green); }
.checklist strong { display: block; color: #fff; }
.checklist li.is-done strong { color: var(--text-2); font-weight: 500; }
.checklist p { margin: 0.15rem 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.checklist .cta-row { margin-top: 0.7rem; }
.reveal .code-panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); margin: 0.75rem 0 0; }
.usage-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .usage-grid-3 { grid-template-columns: 1fr; } }
/* What the last click selected, what is being typed, and a list's options. */
.console-ring { position: absolute; border: 2px solid var(--blue); border-radius: 3px; box-shadow: 0 0 0 2px rgba(91, 156, 246, 0.25); pointer-events: none; transition: left 0.08s ease, top 0.08s ease, width 0.08s ease, height 0.08s ease; }
.console-ring.is-editable { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-soft); }
.console-typing { position: absolute; right: 0.75rem; bottom: 0.75rem; max-width: 60%; background: rgba(10, 14, 23, 0.9); color: var(--text); border: 1px solid var(--green); border-radius: 8px; padding: 0.25rem 0.6rem; font-family: var(--mono); font-size: var(--fs-xs); white-space: pre; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.console-typing::after { content: "▍"; color: var(--green); animation: console-caret 1s steps(2) infinite; }
@keyframes console-caret { 50% { opacity: 0; } }
.console-choose { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 0.9rem; border-top: 1px solid var(--border); background: var(--blue-soft); font-size: var(--fs-sm); }
.console-choose label { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 260px; }
.console-choose select { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.35rem 0.6rem; color: var(--text); outline: 0; }