/* BusyIP: Sora display, blue actions, generous surfaces and a shared light/dark palette. */
@font-face { font-family: Inter; src: url('/fonts/inter-latin.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: Sora; src: url('/fonts/sora-semibold.ttf') format('truetype'); font-style: normal; font-weight: 600 800; font-display: swap; }

:root {
  color-scheme: light;

  /* Cool neutral surfaces and blue actions, shared with the reference design. */
  --bg:            #ffffff;
  --bg-subtle:     #f5f7fc;
  --card:          #ffffff;
  --muted-bg:      #edf1f8;
  --fg:            #14223b;
  --fg-muted:      #4d5d76;
  --fg-subtle:     #65738a;
  --border:        #dce3ef;
  --border-strong: #c2ccdc;

  /* Primary actions carry the brand blue. */
  --primary:       #2855d9;
  --primary-fg:    #f5f7fc;
  --primary-hover: #2045b4;

  /* one accent, used sparingly: links, focus, the single highlighted thing */
  --accent:        #2855d9;
  --accent-fg:     #ffffff;
  --accent-subtle: #e4ebff;
  --accent-border: #c6d5ff;

  --ok:            #15803d;
  --ok-subtle:     #f0fdf4;
  --warn:          #b45309;
  --warn-subtle:   #fffbeb;
  --danger:        #b91c1c;
  --danger-subtle: #fef2f2;

  --sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r:    0.625rem;          /* compact controls */
  --r-sm: 0.375rem;
  --r-lg: 1.5rem;
  --r-xl: 1.75rem;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  /* Aliases for names the markup still uses. Kept rather than renamed across 24 views:
     a missed reference is an invisible element, and that is exactly the failure that shipped
     last time -- the stylesheet was served, but the selectors matched nothing. */
  --text: var(--fg);
  --muted: var(--fg-muted);
  --line: var(--border);
  --rule: var(--border);
  --panel: var(--bg-subtle);
  --panel-2: var(--muted-bg);
  --radius: var(--r);
  --good: var(--ok);
  --bad: var(--danger);

  --page: 1200px;
  --measure: 68ch;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Dark mode is an explicit, remembered choice. White is always the default. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Dark blue surfaces preserve hierarchy in low light. */
  --bg:            #101725;
  --bg-subtle:     #161f30;
  --card:          #161f30;
  --muted-bg:      #1c2940;
  --fg:            #f5f7fc;
  --fg-muted:      #b5c1d8;
  --fg-subtle:     #91a0bb;
  --border:        #2a3853;
  --border-strong: #526487;

  /* Primary foreground and background invert for contrast. */
  --primary:       #f5f7fc;
  --primary-fg:    #14223b;
  --primary-hover: #dce3ef;

  /* A lighter blue keeps links and filled actions readable in dark mode. */
  --accent:        #9db8ff;
  --accent-fg:     #101725;
  --accent-subtle: #20376b;
  --accent-border: #365491;

  --ok:            #4ade80;
  --ok-subtle:     #0c2015;
  --warn:          #fbbf24;
  --warn-subtle:   #241b06;
  --danger:        #f87171;
  --danger-subtle: #2a1215;

  /* Shadows do almost nothing on a dark ground — a black shadow on near-black is invisible — so
     they deepen and the borders above do the separating instead. Keeping the light values would
     leave cards with no edge at all. */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .5);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / .6), 0 1px 2px -1px rgb(0 0 0 / .6);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .6), 0 2px 4px -2px rgb(0 0 0 / .6);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .7), 0 4px 6px -4px rgb(0 0 0 / .7);
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
pre, code { overflow-wrap: normal; }
img, svg { display: block; max-width: 100%; }

a, button, input, select, textarea, summary, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
:target, h2[id], h3[id], section[id] { scroll-margin-top: calc(64px + var(--s5)); }

h1,h2,h3,h4 { font-family: Sora, var(--sans); font-weight: 700; letter-spacing:-.025em; line-height:1.15; text-wrap: balance; color: var(--fg); }
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing:-.035em; }
h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
h3 { font-size: 1.125rem; font-weight:600; line-height:1.4; }
h4 { font-size: .9375rem; font-weight:600; }
p { text-wrap: pretty; }

.mono, .num, .amt, .per, .price, .balance-raw, .raw,
.entity-dl dd, .copy-row-value, .secret-value, .pack-bytes {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}

/* ---- layout --------------------------------------------------------------- */
.wrap, .shell { width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--s6); }
.prose { max-width: var(--measure); }
section { padding-block: var(--s20); }
@media (max-width:760px){ section { padding-block: var(--s16); } }
.page { min-height:100vh; display:flex; flex-direction:column; }
.page > main { flex:1; }
main.shell { padding-block: var(--s12) var(--s16); }
.auth-page main.shell { display:grid; place-items:center; }
.center { text-align:center; }
.plain { list-style:none; padding:0; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:var(--s4); top:var(--s3); background:var(--fg); color:var(--bg); padding:var(--s2) var(--s4); border-radius:var(--r); z-index:100; }

.lede, .lead { font-size:1.1875rem; line-height:1.6; color:var(--fg-muted); max-width:56ch; }
.muted, .fine, .hint, .subtle { color:var(--fg-muted); }
.fine, .hint, .tiny { font-size:.875rem; }
.tagline { font-family:var(--mono); font-size:.75rem; color:var(--fg-subtle); }

/* ---- badge / eyebrow ------------------------------------------------------ */
.label, .badge {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:.75rem; font-weight:600; line-height:1;
  padding:6px 10px; border-radius:999px;
  background:var(--muted-bg); color:var(--fg-muted); border:1px solid var(--border);
}
.label-plain { background:transparent; }
.label-accent, .badge-accent { background:var(--accent-subtle); color:var(--accent); border-color:var(--accent-border); }

/* ---- header --------------------------------------------------------------- */
.site-header {
  position:sticky; top:0; z-index:50; background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--border);
}
.site-header .shell, .site-header .wrap { display:flex; align-items:center; gap:var(--s6); height:64px; }
.brand, .brandmark { display:flex; align-items:center; gap:var(--s2); font-weight:700; font-size:1.0625rem; letter-spacing:-.02em; color:var(--fg); text-decoration:none; }
.brand:hover, .brandmark:hover { text-decoration:none; }
.brand img { width:24px; height:24px; border-radius:6px; }
.site-nav { margin-left:auto; display:flex; gap:var(--s5); align-items:center; }
.site-nav a { font-size:.9375rem; font-weight:500; color:var(--fg-muted); }
.site-nav a:hover { color:var(--fg); text-decoration:none; }
/* No markup anywhere writes .hide-sm -- publicNav() emits four plain links -- so
   the rule that hid it styled nothing, and the header kept all four links plus
   the brand on one 64px line. Below ~640px that needs more width than the
   viewport has, and the whole page overflowed horizontally.
   Wrap to two rows instead of hiding links: Pricing and Docs are how someone
   decides to sign up, so neither should disappear on a phone. */
@media (max-width:640px){
  .site-header .shell, .site-header .wrap {
    height:auto; flex-wrap:wrap; gap:var(--s2) var(--s4); padding-block:var(--s3);
  }
  /* The nav must wrap as well as the header. Four links plus a pill CTA measure
     ~308px of content, and a 320px screen leaves 272px inside the padding, so
     without wrapping the CTA hangs 2px past the viewport edge and the document
     scrolls sideways. Confirmed by measurement: a.nav-cta right=321.8 in a
     320px frame. */
  .site-nav { margin-left:auto; width:100%; flex-wrap:wrap; justify-content:space-between; gap:var(--s2) var(--s3); }
  .site-nav a { font-size:.875rem; }
  .nav-cta { min-height:34px; padding:0 var(--s4); }
  :target, h2[id], h3[id], section[id] { scroll-margin-top: var(--s16); }
}

/* ---- buttons -------------------------------------------------------------- */
.btn, .button, .nav-cta, .pack-cta,
.button-secondary, .button-ghost, .button-danger, .button-small, .action-danger {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:40px; padding:0 var(--s5); border-radius:var(--r); border:1px solid transparent;
  background:var(--primary); color:var(--primary-fg);
  font-family:var(--sans); font-size:.9375rem; font-weight:600; letter-spacing:-.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition: background var(--ease) 150ms, border-color var(--ease) 150ms, opacity var(--ease) 150ms;
}
.btn:hover, .button:hover, .nav-cta:hover, .pack-cta:hover { background:var(--primary-hover); color:var(--primary-fg); text-decoration:none; }
.btn-primary, .btn-accent { background:var(--accent); color:var(--accent-fg); }
.btn-primary:hover, .btn-accent:hover { background:color-mix(in oklab, var(--accent) 88%, black); color:var(--accent-fg); }
.btn-ghost, .button-secondary, .button-ghost {
  background:var(--bg); color:var(--fg); border-color:var(--border-strong);
}
.btn-ghost:hover, .button-secondary:hover, .button-ghost:hover { background:var(--muted-bg); color:var(--fg); }
.button-danger, .action-danger { background:var(--danger); color:#fff; }
.button-small { min-height:32px; padding:0 var(--s3); font-size:.8125rem; }
.button-block { width:100%; }
.btn-lg { min-height:48px; padding:0 var(--s6); font-size:1rem; }
.btn-row, .cta-row, .actions { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }

/* ---- hero ----------------------------------------------------------------- */
.hero { padding-block: var(--s24) var(--s20); border-bottom:1px solid var(--border); background:
  radial-gradient(60rem 30rem at 50% -20%, var(--accent-subtle) 0%, transparent 65%); }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s16); align-items:center; }
@media (max-width:1000px){ .hero .wrap { grid-template-columns:1fr; gap:var(--s12); } .hero { padding-block:var(--s16); } }
.hero h1 { margin:var(--s5) 0; }
.hero h1 em { font-style:normal; color:var(--accent); }

/* ---- the balance card (was the punched stub) ------------------------------ */
.topup {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:var(--s8); box-shadow:var(--shadow-lg);
}
.topup .denom { font-family:var(--sans); font-weight:800; font-size:clamp(3rem,8vw,4.5rem); line-height:1; letter-spacing:-.05em; }
.topup .denom sup { font-size:.3em; vertical-align:super; margin-left:.2em; color:var(--fg-muted); font-weight:600; }
.topup .rows { margin-top:var(--s6); border-top:1px solid var(--border); padding-top:var(--s4); display:grid; gap:var(--s3); }
.topup .rows div { display:flex; justify-content:space-between; align-items:center; font-size:.875rem; }
.topup .rows dt { color:var(--fg-muted); }
.topup .rows dd { font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---- route / steps -------------------------------------------------------- */
.route { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); }
@media (max-width:900px){ .route { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .route { grid-template-columns:1fr; } }
.route > div { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s6); }
.route .n { font-family:var(--mono); font-size:.75rem; font-weight:700; color:var(--accent); }
.route h3 { margin:var(--s3) 0 var(--s2); }
.route p { font-size:.9375rem; color:var(--fg-muted); }

/* ---- cards / grids -------------------------------------------------------- */
.grid { display:grid; gap:var(--s4); }
.g2, .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3, .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:880px){ .g3,.grid-3 { grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .g2,.g3,.grid-2,.grid-3 { grid-template-columns:1fr; } }
.card, .action-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s6);
  transition: box-shadow var(--ease) 150ms, border-color var(--ease) 150ms;
}
.card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.card h3 { margin-bottom:var(--s2); }
.card p { font-size:.9375rem; color:var(--fg-muted); }

/* ---- pricing -------------------------------------------------------------- */
.packs, .pack-grid, .action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); margin-top:var(--s8); }
@media (max-width:880px){ .packs,.pack-grid,.action-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .packs,.pack-grid,.action-grid { grid-template-columns:1fr; } }
.stub, .pack {
  position:relative; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s6);
}
.stub.pick, .pack-featured { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow-md); }
.stub .gb { font-family:var(--sans); font-weight:800; font-size:2rem; letter-spacing:-.03em; line-height:1; }
.stub .amt, .price, .pack-price { font-family:var(--mono); font-size:1.375rem; font-weight:700; margin-top:var(--s2); }
.stub .per, .per-unit, .pack-bytes { font-size:.8125rem; color:var(--fg-muted); margin-top:var(--s1); }
.pick-tag { position:absolute; top:calc(var(--s3) * -1); left:var(--s6); }
.stub ul, .pack ul { list-style:none; padding:0; margin:var(--s5) 0 var(--s6); display:grid; gap:var(--s2); font-size:.9375rem; color:var(--fg-muted); }
.stub li::before, .pack li::before { content:"✓"; color:var(--accent); margin-right:var(--s2); font-weight:700; }
.stub .btn, .stub .button, .pack .button, .pack-cta { margin-top:auto; }
.price-free { font-family:var(--sans); font-weight:800; }

/* ---- terminal / code ------------------------------------------------------ */
.term, .code { background:#0a0a0a; border:1px solid #262626; border-radius:var(--r-lg); overflow:hidden; }
.term-bar, .code-head {
  display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s4);
  border-bottom:1px solid #262626; font-family:var(--mono); font-size:.75rem; color:#b0b0b0;
}
.term pre, .code pre { margin:0; padding:var(--s5); overflow-x:auto; }
.term code, .code code { font-family:var(--mono); font-size:.8125rem; line-height:1.8; color:#e5e5e5; background:none; padding:0; }
.term .c, .code .c { color:#8f8f8f; }
.term .y, .code .y { color:#5eead4; }
.term .g, .code .g { color:#86efac; }
.copy, .js-copy {
  margin-left:auto; background:transparent; border:1px solid #404040; color:#b0b0b0;
  border-radius:var(--r-sm); padding:3px 10px; font-size:.75rem; cursor:pointer; font-family:var(--sans);
}
.copy:hover, .js-copy:hover { color:#fff; border-color:#737373; }
code:not(pre code) { font-family:var(--mono); font-size:.875em; background:var(--muted-bg); padding:2px 6px; border-radius:var(--r-sm); }

/* ---- honesty band --------------------------------------------------------- */
.honest { background:var(--bg-subtle); border-block:1px solid var(--border); }
.honest .card { background:var(--card); }

/* ---- notices -------------------------------------------------------------- */
.notice, .errors { border:1px solid var(--border); border-radius:var(--r); padding:var(--s4); font-size:.9375rem; }
.notice-good  { background:var(--ok-subtle);     border-color:#bbf7d0; }
.notice-warn  { background:var(--warn-subtle);   border-color:#fde68a; }
.notice-error, .errors { background:var(--danger-subtle); border-color:#fecaca; }
.notice-info  { background:var(--accent-subtle); border-color:var(--accent-border); }
.errors ul { margin:0; padding-left:var(--s5); }
.danger-zone { border:1px solid #fecaca; background:var(--danger-subtle); border-radius:var(--r-lg); padding:var(--s6); }

/* ---- dashboard ------------------------------------------------------------ */
.balance { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s3); }
.balance-primary { font-family:var(--sans); font-weight:800; font-size:clamp(2.25rem,5vw,3.25rem); line-height:1; letter-spacing:-.04em; }
.balance-raw { font-size:.875rem; color:var(--fg-muted); }
/* .kv is a stacked key/value list and gets rules between rows. .stat-row is NOT
   one -- APP_CSS lays it out as a horizontal flex row of stats, so a
   border-bottom on each child drew a short underline beneath every value. */
.kv, .rows { display:grid; gap:0; }
.kv div { display:flex; justify-content:space-between; gap:var(--s4); padding-block:var(--s3); border-bottom:1px solid var(--border); font-size:.9375rem; }
.kv div:last-child { border-bottom:0; }
.kv dt { color:var(--fg-muted); }
.gap-note, .journey-note { font-size:.8125rem; color:var(--fg-muted); }
.secret-reveal { background:var(--accent-subtle); border:1px solid var(--accent-border); border-radius:var(--r); padding:var(--s5); }
.secret-mask { font-family:var(--mono); letter-spacing:.15em; color:var(--fg-subtle); }
.pending { font-family:var(--mono); font-size:.8125rem; color:var(--fg-muted); }

/* ---- docs ----------------------------------------------------------------- */
.docs-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--s12); align-items:start; }
@media (max-width:920px){ .docs-layout { grid-template-columns:1fr; gap:var(--s8); } }
.docs-toc { position:sticky; top:88px; }
.docs-toc ul { list-style:none; padding:0; display:grid; gap:var(--s1); border-left:1px solid var(--border); }
.docs-toc a { display:block; padding:var(--s1) var(--s4); font-size:.875rem; color:var(--fg-muted); border-left:2px solid transparent; margin-left:-1px; }
.docs-toc a:hover { color:var(--fg); text-decoration:none; }
.docs-toc .is-current { color:var(--accent); border-left-color:var(--accent); font-weight:600; }
.docs-body h2 { margin:var(--s12) 0 var(--s4); padding-bottom:var(--s3); border-bottom:1px solid var(--border); }
.docs-body h3 { margin:var(--s8) 0 var(--s3); }
.docs-body p, .docs-body ul, .docs-body ol { max-width:var(--measure); margin-bottom:var(--s4); }
.docs-body ul, .docs-body ol { padding-left:var(--s6); }
.docs-body li { margin-bottom:var(--s2); }
.anchor { color:var(--fg-subtle); margin-left:var(--s2); text-decoration:none; }
.doc-meta, .doc-nav { font-size:.875rem; color:var(--fg-muted); }

/* ---- tables --------------------------------------------------------------- */
.table-wrap { border:1px solid var(--border); border-radius:var(--r-lg); overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.9375rem; }
th, td { text-align:left; padding:var(--s3) var(--s4); border-bottom:1px solid var(--border); vertical-align:top; }
tr:last-child td { border-bottom:0; }
th { font-size:.75rem; font-weight:600; color:var(--fg-muted); text-transform:uppercase; letter-spacing:.04em; background:var(--bg-subtle); }

/* ---- forms ---------------------------------------------------------------- */
label { display:block; font-size:.875rem; font-weight:500; margin-bottom:var(--s2); color:var(--fg); }
input, select, textarea {
  width:100%; min-height:40px; padding:var(--s2) var(--s3);
  background:var(--bg); color:var(--fg);
  border:1px solid var(--border-strong); border-radius:var(--r);
  font:400 .9375rem var(--sans);
  transition: border-color var(--ease) 150ms, box-shadow var(--ease) 150ms;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-subtle); }
input::placeholder { color:var(--fg-subtle); }
.field + .field { margin-top:var(--s5); }
.auth, .login-card, .form-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-md); padding:var(--s8); max-width:440px; margin-inline:auto; width:100%;
}
.search-form, .inline-form { display:flex; gap:var(--s2); flex-wrap:wrap; }
.search-form input, .inline-form input { max-width:320px; }

/* ---- legal ---------------------------------------------------------------- */
/* NOT `.legal` — legalPage() passes bodyClass:'legal', so that class lands on <body>. A
   max-width there constrains the WHOLE PAGE, header included, to a 68ch measure and pins it to
   the left edge because body is the flex container and has no room to centre in. That shipped:
   every legal page rendered as a 720px column against a wall of empty space.
   The measure belongs to the document text, which is .legal-doc. Page width is LEGAL_CSS's
   `body.legal main.shell{max-width:52rem}`. */
.legal-doc { max-width:var(--measure); }
.legal-doc h2 { font-size:1.375rem; margin:var(--s10) 0 var(--s3); }
.legal-doc h3 { margin:var(--s6) 0 var(--s2); }
.legal-doc p, .legal-doc li { margin-bottom:var(--s3); }
.legal-doc ol, .legal-doc ul { padding-left:var(--s6); }
.entity, .entity-dl { font-size:.9375rem; }
/* .entity-dl's LAYOUT lives in LEGAL_CSS (views/legal/shared.mjs), which is injected into
   <head> AFTER the link to this file and therefore wins. It grids on bare dt/dd. Rules for
   those selectors here would be dead code that looks authoritative -- the same trap as the
   duplicated .copy-row. Only the type size is set here, which LEGAL_CSS does not touch. */

/* ---- footer --------------------------------------------------------------- */
.site-footer { border-top:1px solid var(--border); padding-block:var(--s12); margin-top:var(--s20); background:var(--bg-subtle); }
.site-footer .shell { display:grid; gap:var(--s4); }
.site-footer .cols { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:var(--s8); }
@media (max-width:820px){ .site-footer .cols { grid-template-columns:1fr 1fr; } }
.site-footer h4 { font-size:.8125rem; color:var(--fg-muted); margin-bottom:var(--s3); }
.site-footer ul { list-style:none; padding:0; display:grid; gap:var(--s2); }
.site-footer a, .footer-nav a { font-size:.875rem; color:var(--fg-muted); }
.site-footer a:hover, .footer-nav a:hover { color:var(--fg); }
.footer-nav, .operator-footer { display:flex; flex-wrap:wrap; gap:var(--s5); }
.legal-line { margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; font-size:.8125rem; color:var(--fg-muted); }

/* ---- remaining utilities -------------------------------------------------- */
.section { padding-block: var(--s20); }
@media (max-width:760px){ .section { padding-block: var(--s16); } }
.row { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
.alt { color:var(--fg-muted); font-size:.9375rem; }
.check { display:flex; gap:var(--s2); font-size:.9375rem; color:var(--fg-muted); }
.check::before { content:"✓"; color:var(--accent); font-weight:700; flex:none; }

/* A form row: a control and its label. NOT .check -- that one injects a decorative ✓, which on a
   radio reads as "already selected" and pushes the control out of line with its own label. The
   signup use-case list and both consent boxes used it, and the tick sat where the answer goes.
   align-items:flex-start so a label that wraps to two lines still lines up with its control. */
.choice { display:flex; gap:var(--s3); align-items:flex-start; font-size:.9375rem; margin-block:var(--s3); }
.choice input { flex:none; margin-top:.25em; accent-color:var(--accent); width:1rem; height:1rem; }
.choice label { cursor:pointer; }
.mark { color:var(--accent); font-weight:700; }
.where { font-family:var(--mono); font-size:.75rem; color:var(--fg-subtle); }
.pull {
  margin:var(--s8) 0; padding:var(--s2) 0 var(--s2) var(--s6);
  border-left:2px solid var(--accent); font-size:1.0625rem; line-height:1.6; color:var(--fg-muted);
}
.pull strong { color:var(--fg); font-weight:600; }
.uses { border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s5); }
.uses legend { padding-inline:var(--s2); font-size:.8125rem; font-weight:600; color:var(--fg-muted); }
.reason-label { margin-top:var(--s4); }
.journey { display:grid; gap:var(--s2); }
.journey .step { display:flex; gap:var(--s3); align-items:baseline; font-size:.875rem; padding-block:var(--s2); border-bottom:1px solid var(--border); }
.journey .step:last-child { border-bottom:0; }
.journey time { font-family:var(--mono); font-size:.75rem; color:var(--fg-subtle); flex:none; min-width:11ch; }
.landed { font-family:var(--mono); font-size:.75rem; color:var(--ok); }
.badge-good { background:var(--ok-subtle);     color:var(--ok);     border-color:#bbf7d0; }
.badge-warn { background:var(--warn-subtle);   color:var(--warn);   border-color:#fde68a; }
.badge-bad  { background:var(--danger-subtle); color:var(--danger); border-color:#fecaca; }

/* ---- dashboard composition ------------------------------------------------
   The app pages are a vertical stack of `section.card`, each opening with an
   h2. Marketing h2 is clamp(1.65rem, 3vw, 2.25rem), which is a page title, not
   a card title — inside a card it swamps the number underneath it, which is the
   thing the customer actually came to read. Card headings get their own scale.
   -------------------------------------------------------------------------- */
main.shell > h1 { margin-bottom: var(--s6); }
main.shell > section.card,
main.shell > .card,
main.shell > .danger-zone,
main.shell > .notice,
main.shell > .table-wrap { margin-top: var(--s5); }
main.shell > *:first-child { margin-top: 0; }

.card > h2 {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em;
  margin: 0 0 var(--s4);
}
.card > h2:only-child { margin-bottom: 0; }
.card > p:last-child, .card > .hint:last-child { margin-bottom: 0; }

/* The balance is the first thing on the page and the reason the page exists.
   It gets the emphasis; every other card stays quiet. */
.card .balance { margin-bottom: var(--s2); }

/* Everything below this line about .copy-row, .stat-row, .pack, .meter, .balance
   and .actions lives in views/app/layout.mjs APP_CSS instead, which is injected
   into <head> AFTER the link to this file and therefore wins on equal
   specificity. Duplicating those selectors here produced rules that look
   authoritative and are silently dead -- the same failure as the inline
   FALLBACK_CSS that kept overriding this stylesheet. One definition each.

   What stays here is only what APP_CSS does not set: the vertical rhythm of the
   card stack, and the heading scale inside a card. */
.card > .notice { border-radius: var(--r); }

/* ============================================================================
   MOTION AND DEPTH
   ----------------------------------------------------------------------------
   busytruck's identity is not the neutral palette on its own — that part is
   stock shadcn. It is the shadcn base plus a small set of MagicUI devices:
   a beam travelling a card border, a cursor spotlight, ambient particles,
   numbers that count up, sections that blur-fade in on scroll. Without those
   the same tokens read as an unstyled admin panel, which is exactly what the
   first pass of this page looked like.

   Rebuilt here in plain CSS and ~90 lines of vanilla JS, because busyip is
   server-rendered .mjs with no bundler and no React.

   Two rules hold throughout:
     * Content is visible with no JS. Reveal states apply only under `html.js`,
       which motion.js sets on itself. A failed script must never blank a page.
     * prefers-reduced-motion removes movement, not information.
   ========================================================================= */

@property --beam { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* --- border beam: a light travelling the edge of the one card that matters -- */
.beam { position: relative; }
.beam::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--beam),
    transparent 0deg, transparent 25deg,
    var(--accent) 40deg, #5eead4 50deg, var(--accent) 60deg,
    transparent 75deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam-run 7s linear infinite;
}
@keyframes beam-run { to { --beam: 360deg; } }

/* --- cursor spotlight, set by JS as --mx/--my -------------------------------- */
.card, .stub, .route > div { position: relative; isolation: isolate; }
.card::before, .stub::before, .route > div::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  opacity: 0; transition: opacity 240ms var(--ease); pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in oklab, var(--accent) 9%, transparent), transparent 72%);
}
.card:hover::before, .stub:hover::before, .route > div:hover::before { opacity: 1; }

/* --- ambient particles behind the hero --------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
#particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* --- ripple: concentric rings behind the closing call to action -------------- */
.ripple-stage { position: relative; overflow: hidden; }
.ripple-stage > * { position: relative; z-index: 1; }
.ripple-stage::before, .ripple-stage::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%;
  border: 1px solid var(--accent-border); opacity: 0;
  animation: ripple-out 5s ease-out infinite;
}
.ripple-stage::after { animation-delay: 2.5s; }
@keyframes ripple-out {
  0%   { transform: scale(.35); opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* --- shimmer on the eyebrow -------------------------------------------------- */
.shiny {
  background-image: linear-gradient(100deg,
    var(--fg-muted) 40%, var(--accent) 50%, var(--fg-muted) 60%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shiny 6s linear infinite;
}
@keyframes shiny { to { background-position: -220% 0; } }

/* --- blur-fade on scroll ------------------------------------------------------
   Guarded on html.js so the page is fully readable when the script never runs. */
html.js .reveal { opacity: 0; transform: translateY(14px); filter: blur(5px); }
html.js .reveal.is-in {
  opacity: 1; transform: none; filter: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease), filter 620ms var(--ease);
}

/* --- number ticker: hold the width so the layout does not jitter while counting */
.ticker { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .beam::after, .shiny, .ripple-stage::before, .ripple-stage::after { animation: none; }
  .beam::after { background: var(--accent); }
  .shiny { background: none; -webkit-text-fill-color: currentColor; color: var(--fg-muted); }
  html.js .reveal { opacity: 1; transform: none; filter: none; }
  #particles { display: none; }
}

/* --- code that wraps instead of clipping --------------------------------------
   A proxy URI is the one thing on this page a reader needs to see in full, and
   in a 2-column hero it is wider than its column. Horizontal scroll inside a
   dark box reads as a rendering bug: the line simply looks cut off, and nothing
   suggests it can be scrolled. Wrap it, with a hanging indent so a continued
   line is visibly a continuation. */
.term pre, .code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.term code, .code code { display: block; text-indent: -2ch; padding-left: 2ch; }

/* --- the trial card ------------------------------------------------------------
   Tighter: the denomination and the rows were floating apart with a band of
   dead space between them, which made the card read as unfinished. */
.topup { padding: var(--s6); }
.topup .denom { margin-top: var(--s2); }
.topup .rows { margin-top: var(--s5); }

/* --- denomination -------------------------------------------------------------
   `1` set at 4.5rem with `GiB` as a true <sup> put the unit up near the cap
   line at 0.3em, where it collided with the numeral and read as a footnote
   marker rather than a unit. Drop it to the baseline and give it air: it is a
   unit of measure, and the reader has to be able to tell 1 GiB from 1 GB. */
.topup .denom sup {
  font-size: .24em; vertical-align: baseline; margin-left: .22em;
  color: var(--fg-muted); font-weight: 700; letter-spacing: .01em;
}

/* --- "Most bought" ------------------------------------------------------------
   The tag straddles the card's top edge, so it has to sit above the border and
   the beam and carry its own opaque ground, or the border rules straight
   through the middle of the words. */
.pick-tag {
  z-index: 2; background: var(--accent-subtle);
  color: var(--accent); border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--bg);
}

/* --- things the app pages render that the marketing pages never do -------------
   Found by rendering the dashboard and looking at it, not by reading the markup.

   1. `class="button-secondary"` is written with NO base class anywhere in
      views/app. The base rule listed only .btn/.button, so every action button on
      the dashboard rendered at the browser default size — the "Copy", "Rotate"
      and "Rotate and revoke now" controls were ~24px tall next to 40px inputs.
      Fixed above by widening the base selector.
   2. A bare <pre> outside .term/.code had no styling at all, so the paste-ready
      curl line sat on the page as raw text with no container.
   3. h3 inside a card had no top margin and collided with the paragraph above it.
   -------------------------------------------------------------------------- */
.card pre:not(.term pre):not(.code pre) {
  /* A LITERAL, NOT var(--fg). Using the foreground token as a background is an inversion trick to
     get "always dark", and it inverts with the theme: in dark mode --fg is #fafafa, so this box
     turned WHITE with #e5e5e5 text on it and the paste-ready curl line was unreadable. A terminal
     block is dark in both themes on purpose, the same way .term and .code are. */
  background: #0a0a0a; color: #e5e5e5;
  border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--s4);
  overflow-x: auto; margin: var(--s3) 0;
}
.card pre code { font-family: var(--mono); font-size: .8125rem; color: inherit; background: none; padding: 0; }
.card h3 { margin: var(--s6) 0 var(--s2); }
.card h3:first-child { margin-top: 0; }
.card h3 + p, .card h3 + .hint { margin-top: 0; }
.button-small { min-height: 32px; padding: 0 var(--s3); font-size: .8125rem; }

/* --- the entity list on a narrow phone ----------------------------------------
   Measured, not guessed: terms and privacy reported scrollWidth 372 inside a
   320px frame. `.entity-dl dt` reserves a 160px column and the value beside it
   is a monospace address or email that will not break, so the row could not fit
   a 320-360px screen and pushed the whole document sideways. Stack the pairs. */
@media (max-width:560px){
  /* LEGAL_CSS already stacks .entity-dl to one column below 32rem. Only the value wrapping is
     added here, which it does not set. */
  .entity-dl dd { word-break: break-word; }
}

/* --- the nav CTA was grey on near-black ---------------------------------------
   `.site-nav a { color: var(--fg-muted) }` is specificity (0,1,1); `.nav-cta` is
   (0,1,0). The more specific descendant selector won, so the one button in the
   header rendered #5d5d5d text on its #171717 ground -- 2.53:1, well under the
   4.5:1 floor every other pair in this system was measured against. Contrast
   auditing the tokens did not catch it because both colours are individually
   fine; it is the cascade that put them together.
   Match the specificity rather than reach for !important. */
.site-nav a.nav-cta, .site-nav a.btn, .site-nav a.button {
  color: var(--primary-fg);
}
.site-nav a.nav-cta:hover { color: var(--primary-fg); }

/* --- buttons carrying no class at all -----------------------------------------
   18 of them across the operator console and the app forms, all `<button
   type="submit">` with no class. The base rule lists classes only, so every one
   of them rendered as a browser-default button — "Set ceiling" on the health
   page next to a 40px input is the visible case.

   Scoped to :not([class]) rather than a blanket `button` rule, because .copy in
   the terminal chrome and .button-small in a table cell are deliberately smaller
   and a blanket rule would overwrite both. */
button:not([class]) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 40px; padding: 0 var(--s5);
  background: var(--primary); color: var(--primary-fg);
  border: 1px solid transparent; border-radius: var(--r);
  font: 600 .9375rem var(--sans); letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap;
  transition: background var(--ease) 150ms;
}
button:not([class]):hover { background: var(--primary-hover); }

/* --- the requeue control in a table cell --------------------------------------
   Eight columns, so the action cell is the narrowest thing on the page and the
   reason field wrapped under its own button. Give the input a floor and stop the
   cell wrapping; the table already scrolls inside .table-wrap. */
.inline-form { flex-wrap: nowrap; align-items: center; gap: var(--s2); }
td:has(> .inline-form) { white-space: nowrap; }

/* A text input, NOT a button. It was given .button-small, which is in the button
   base selector, so it rendered as a black pill with a black placeholder — an
   unusable input that looked like a second button. Inputs get input styling. */
.reason-input {
  width: 8.5rem; min-height: 32px; padding: 0 var(--s2);
  font-size: .8125rem; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
}

/* The timestamp wrapped over five lines in a narrow column. */
td.when { white-space: nowrap; font-size: .8125rem; }


/* A small button, for copy controls that sit inside a card or a code-block header where a
   40px control would dominate the thing it is attached to. Added with the MCP page, which
   uses one per snippet. */
.btn-sm { min-height: 32px; padding: 0 var(--s3); font-size: .8125rem; }

/* --- the closing questionnaire ---------------------------------------------------------------------
   Inside the danger zone, so it inherits that panel's tint. Kept visually quieter than the
   confirmation controls below it: the reason matters to us, the confirmation matters to them. */
.close-reasons{ border:1px solid var(--border); border-radius:var(--r); padding:var(--s4) var(--s5);
  margin:0 0 var(--s5); background:var(--bg); }
.close-reasons legend{ font-weight:650; padding:0 var(--s2); }
.close-reasons .req{ font-weight:400; font-size:.8125rem; color:var(--danger); }
.close-reasons .choice{ display:flex; gap:.6rem; align-items:center; font-weight:400; margin:0 0 var(--s2); }
.close-reasons .choice input{ width:auto; margin:0; flex:0 0 auto; }
.close-reasons textarea{ margin-top:var(--s2); }

/* --- the operator filter bar -----------------------------------------------------------------------
   A second row under the search box. Quieter than the search: search answers "where is this one
   customer", filters answer "which group", and the first is the more urgent question. */
.filter-form{ margin-top:var(--s3); }
.filter-form select{ width:auto; min-width:11rem; }

/* --- sign out ------------------------------------------------------------------------------------
   Sits between the nav and the theme toggle, quiet by default: leaving is not the action the header
   should be advertising, but it has to be findable without hunting. */
.nav-signout{ display:inline-flex; margin-left:var(--s3); }
.nav-signout button{ white-space:nowrap; }
@media (max-width:640px){ .nav-signout{ margin-left:var(--s2); } }

/* --- the theme toggle ---------------------------------------------------------------------------
   Created by /theme.js and absent without scripting, because a control that cannot work is worse
   than no control — the page still follows the operating system through prefers-color-scheme.
   Sized to the 40px touch target the nav links already use. */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-left:var(--s2); flex:0 0 auto;
  background:transparent; color:var(--fg-muted);
  border:1px solid var(--border); border-radius:var(--r-sm);
  cursor:pointer; padding:0;
  transition: color var(--ease) 150ms, border-color var(--ease) 150ms, background var(--ease) 150ms;
}
.theme-toggle:hover{ color:var(--fg); border-color:var(--border-strong); background:var(--muted-bg); }
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Website system: shared branding and responsive marketing compositions. */
.brand { font-family:Sora,var(--sans); font-size:26px; letter-spacing:-1.5px; gap:10px; }
.brand img { width:32px; height:32px; border-radius:9px; }
.brand-dot { color:var(--accent); }
.site-header .shell { height:78px; gap:20px; }
.site-nav { gap:23px; }
.site-nav a { font-size:13px; white-space:nowrap; }
.site-nav a.is-current { color:var(--accent); }
.site-nav .nav-cta { border-radius:999px; min-height:40px; padding:10px 19px; }
.btn,.button { border-radius:999px; min-height:46px; padding:12px 22px; font-size:14px; font-weight:600; gap:10px; }
.btn-ghost { background:var(--card); color:var(--fg); border:1px solid var(--border); }
.btn-primary { box-shadow:0 3px 0 rgb(0 0 0 / 7%); }
.menu-toggle { display:none; }
.marketing-page main.shell { padding-block:0; }
.marketing-page h1 { font-size:clamp(42px,4.65vw,64px); letter-spacing:-.055em; line-height:1.12; font-weight:600; }
.marketing-page h2 { font-size:clamp(28px,3vw,39px); letter-spacing:-.045em; line-height:1.2; font-weight:600; }
.marketing-page h3 { font-size:21px; letter-spacing:-.035em; line-height:1.3; }
.marketing-page p { color:var(--fg-muted); line-height:1.75; }
.marketing-page .lede { font-size:17px; line-height:1.8; margin-block:24px; max-width:58ch; }
.web-split > * { min-width:0; }
.web-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.web-hero { padding:82px 0 66px; gap:38px; }
.web-hero h1 { margin-top:24px; }
.web-hero h1 em { font-style:normal; color:var(--accent); }
.hero-kicker { display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.04em; font-weight:600; padding:8px 12px; border-radius:99px; border:1px solid var(--border); background:var(--card); }
.hero-kicker::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.hero-proof { display:flex; gap:20px; margin-top:20px; font-size:12px; color:var(--fg-muted); flex-wrap:wrap; }
.hero-proof span { display:flex; align-items:center; gap:5px; }
.hero-proof svg { color:var(--accent); }
.trial-detail { display:inline-block; margin-top:10px; color:var(--fg-muted); font-size:11px; text-underline-offset:3px; }
.network-stage { padding:28px 20px 18px; border-radius:28px; background:#e4ebff; color:#14223b; min-width:0; }
.network-window { border-radius:18px; border:1px solid #d4dff3; background:#fff; overflow:hidden; box-shadow:0 24px 65px -28px #19366155; }
.network-heading { padding:17px 16px; display:flex; gap:12px; justify-content:space-between; align-items:center; border-bottom:1px solid #edf1f8; font-size:11px; font-weight:600; }
.network-heading > span:first-child { display:flex; gap:7px; align-items:center; }
.preview-label { font-size:9px; color:#4d5d76; border:1px solid #dce3ef; border-radius:99px; padding:3px 7px; }
.network-map { position:relative; }
.network-map > svg { width:100%; height:auto; }
.map-client { position:absolute; left:6%; top:40%; display:grid; justify-items:center; gap:7px; padding:12px 9px; background:#fff; border:1px solid #dce3ef; border-radius:12px; box-shadow:0 4px 10px #14223b08; font-size:9px; }
.map-client svg { color:#2855d9; }
.map-exit { display:flex; gap:8px; align-items:center; position:absolute; right:4%; padding:11px 10px; border-radius:12px; border:1px solid #dce3ef; background:#fff; font-size:10px; box-shadow:0 4px 10px #14223b08; }
.map-exit svg { color:#2855d9; }
.map-exit strong,.map-exit span { display:block; }
.map-exit span { color:#65738a; font-size:8px; margin-top:2px; }
.map-exit.residential { top:15%; }
.map-exit.mobile { bottom:13%; }
.map-exit.mobile svg { color:#a85b21; }
.network-person { padding:18px 15px; border-top:1px solid #edf1f8; display:flex; gap:12px; align-items:center; }
.network-person strong { font-size:11px; display:block; }
.network-person > div > span { font-size:9px; color:#4d5d76; display:block; margin-top:3px; }
.network-person > svg { margin-left:auto; color:#2855d9; flex-shrink:0; }
.people-avatars { display:flex; padding-left:5px; }
.people-avatars span { width:28px; height:28px; display:grid; place-items:center; font-size:10px; font-weight:700; border-radius:50%; background:#e4ebff; color:#2855d9; margin-left:-5px; border:2px solid white; }
.people-avatars span:nth-child(2) { background:#faeadb; color:#89471b; }
.people-avatars span:nth-child(3) { background:#dcefe6; color:#2e654a; }
.network-receipt { margin:17px 0 0 24px; padding:18px; background:#14223b; color:#fff; border-radius:14px; display:flex; gap:12px; align-items:center; box-shadow:0 12px 24px -16px #14223b60; }
.network-receipt strong { font-size:13px; font-weight:600; }
.network-receipt span { display:block; color:#b5c1d8; font-size:10px; margin-top:4px; }
.receipt-icon { padding:7px; background:#263d61; border-radius:10px; color:#9db8ff; }
.marketing-page .preview-caption { font-size:9px; color:#4b6085; text-align:center; margin-top:15px; }
.trust-strip { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--border); padding:25px 0; gap:22px; }
.trust-strip span { color:var(--fg-muted); font-size:12px; text-align:center; }
.trust-strip span + span { border-left:1px solid var(--border); }
.trust-strip strong { display:block; color:var(--fg); font-size:13px; font-weight:600; margin-bottom:5px; }
.web-section { padding-block:70px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:34px; }
.section-heading p { font-size:14px; max-width:360px; }
.eyebrow { display:block; text-transform:uppercase; font-size:10px; font-weight:650; letter-spacing:.13em; color:var(--fg-muted); margin-bottom:16px; }
.web-grid { display:grid; gap:22px; }
.web-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.web-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.web-card,.product-card,.use-card { display:block; padding:30px; border:1px solid var(--border); border-radius:24px; background:var(--card); color:var(--fg); }
.product-card,.use-card { transition:border-color .2s,box-shadow .2s; }
.product-card:hover,.use-card:hover { border-color:var(--accent); box-shadow:0 10px 30px rgb(18 42 35 / 5%); text-decoration:none; }
.web-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; color:var(--accent); background:var(--accent-subtle); margin-bottom:22px; flex-shrink:0; }
.web-icon.warm { color:#89471b; background:#faeadb; }
.product-card-top { display:flex; align-items:start; justify-content:space-between; gap:14px; }
.product-tag { padding:5px 9px; border-radius:99px; background:var(--bg-subtle); color:var(--fg-muted); font-size:10px; border:1px solid var(--border); }
.product-card p,.web-card p,.use-card p { font-size:14px; margin-top:14px; }
.text-link { display:inline-flex; gap:9px; align-items:center; color:var(--accent); font-weight:600; font-size:13px; margin-top:22px; }
.product-card-art { position:relative; background:var(--accent-subtle); border-radius:16px; padding:28px 25px 54px; display:flex; align-items:center; justify-content:center; gap:20px; color:var(--accent); margin-top:26px; }
.product-card-art > span { background:var(--card); padding:16px; border-radius:18px; border:1px solid var(--border); }
.product-card-art i { width:90px; height:0; border-top:2px dashed currentColor; opacity:.45; }
.product-card-art small { position:absolute; bottom:17px; font-size:9px; letter-spacing:.09em; text-align:center; }
.mobile-art { background:var(--muted-bg); }
.people-band { padding:55px; border-radius:28px; background:#14223b; color:#e4ebfa; margin-block:10px; }
.people-band h2,.people-band h3 { color:#e4ebfa; }
.people-band .eyebrow { color:#9db8ff; }
.people-band p { color:#b5c1d8; font-size:15px; margin-block:20px; }
.people-band .btn { margin-top:5px; background:#263b5b; color:#e4ebfa; border-color:#425373; }
.people-principles { display:grid; gap:23px; }
.people-principles > div { display:flex; gap:19px; }
.people-principles > div > span { font-size:11px; color:#9db8ff; width:36px; height:36px; border:1px solid #425373; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.people-principles h3 { font-size:17px; margin-top:5px; }
.people-principles p { font-size:13px; margin:8px 0 0; }
.steps article { position:relative; padding:10px 24px 0 0; }
.step-number { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--card); border:1px solid var(--accent-border); color:var(--accent); font-size:12px; margin-bottom:22px; }
.steps h3 { font-size:18px; }
.steps p { font-size:14px; margin-top:12px; }
.integration-panel { border-block:1px solid var(--border); }
.integration-panel .code { margin:0; border-radius:16px; background:#14223b; color:#e4ebfa; overflow:hidden; }
.integration-panel .code-head { background:#1d3253; border:0; color:#b5c1d8; padding:13px 18px; }
.integration-panel .code-head button { background:#314b73; color:#fff; border-color:#526487; }
.integration-panel pre { padding:23px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:2; color:#e4ebfa; background:transparent; }
.integration-panel pre code { color:inherit; background:none; }
.protocol-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.protocol-tags span { border:1px solid var(--border); border-radius:6px; padding:5px 9px; font-family:var(--mono); font-size:10px; color:var(--fg-muted); }
.integration-note { display:flex; align-items:center; gap:10px; margin-top:15px; font-size:11px; }
.use-card h3 { font-size:17px; }
.web-price { border:1px solid var(--border); border-radius:24px; background:var(--card); padding:28px; display:flex; flex-direction:column; }
.web-price.featured { border:2px solid var(--accent); padding:27px; }
.price-card-heading { display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:18px; font-weight:600; }
.price-card-heading .product-tag { color:var(--accent); background:var(--accent-subtle); border-color:transparent; font-weight:500; font-size:9px; }
.price-amount { font-family:Sora,var(--sans); font-size:40px; letter-spacing:-.055em; margin-top:27px; }
.web-price p { font-size:12px; margin-top:7px; }
.web-price ul { list-style:none; padding:22px 0; margin:22px 0 0; border-top:1px solid var(--border); font-size:13px; color:var(--fg-muted); display:grid; gap:12px; }
.web-price li::before { content:'✓'; color:var(--accent); margin-right:10px; }
.web-price .btn { margin-top:auto; }
.web-note { font-size:12px; margin-top:24px; max-width:90ch; }
.capacity-note { display:flex; gap:22px; align-items:center; padding:28px; border:1px solid var(--border); border-radius:20px; }
.capacity-note .web-icon { margin:0; }
.capacity-note h3 { font-size:16px; }
.capacity-note p { font-size:13px; margin-top:8px; }
.capacity-note .text-link { flex:0 0 175px; margin:0; font-size:12px; }
.web-faq { border-top:1px solid var(--border); }
.web-faq details { border-bottom:1px solid var(--border); padding:0; background:transparent; border-radius:0; margin:0; }
.web-faq summary { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:21px 0; cursor:pointer; font-size:14px; font-weight:600; list-style:none; }
.web-faq summary::-webkit-details-marker { display:none; }
.web-faq summary > span { color:var(--accent); font-size:22px; font-weight:400; }
.web-faq details[open] summary > span { transform:rotate(45deg); }
.web-faq p { font-size:14px; padding:0 25px 22px 0; }
.web-cta { padding:65px 24px; text-align:center; border-radius:28px; background:var(--accent-subtle); margin-bottom:32px; }
.web-cta h2 { font-size:clamp(30px,3.8vw,46px); }
.web-cta p { margin:23px 0; font-size:15px; }
.web-cta small { display:block; margin-top:18px; font-size:10px; color:var(--fg-muted); }
.web-intro { padding-block:75px 35px; }
.web-intro h1 { max-width:20ch; }
.web-card h2 { font-size:22px; }
.web-card .eyebrow { margin-top:4px; }
.product-emblem { background:var(--accent-subtle); border-radius:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:45px 25px; color:var(--accent); text-align:center; }
.product-emblem > svg { margin-bottom:25px; }
.product-emblem > span { font-family:Sora,var(--sans); font-size:22px; }
.product-emblem p { font-size:15px; margin-top:15px; }
.pricing-page .packs { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.pricing-page .stub,.pricing-page .pack { padding:25px 20px; border-radius:22px; }
.pricing-page .pick-tag { font-size:10px; }
.pricing-page .section { padding-block:40px; }
.pricing-page main > h1 { max-width:22ch; font-size:clamp(36px,4vw,54px); letter-spacing:-.05em; }
.site-footer { background:var(--muted-bg); margin-top:42px; padding-block:50px 24px; }
.site-footer .shell { display:grid; grid-template-columns:1fr 1.1fr; gap:35px 75px; }
.site-footer .brand { font-size:26px; color:var(--fg); }
.footer-brand .tagline { font-family:var(--sans); font-size:13px; max-width:340px; margin-top:16px; line-height:1.8; }
.footer-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:16px 24px; align-content:start; }
.footer-nav a { font-size:12px; }
.site-footer .fine { grid-column:1/-1; border-top:1px solid var(--border); padding-top:22px; font-size:11px; display:flex; justify-content:space-between; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
section[id],article[id] { scroll-margin-top:100px; }
@media (max-width:1050px) {
  .site-nav { gap:14px; }
  .site-nav a { font-size:12px; }
  .site-header .shell { gap:15px; }
  .web-split { gap:35px; }
  .network-stage { padding:24px 14px 16px; }
  .web-hero { padding-block:60px; }
  .pricing-page .packs { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:850px) {
  .site-header .shell { height:auto; min-height:72px; flex-wrap:wrap; padding-block:15px; }
  .site-nav { flex-wrap:wrap; justify-content:flex-start; width:100%; padding-block:10px; }
  .has-menu .site-nav { display:none; order:4; margin-left:0; flex-direction:column; align-items:stretch; gap:3px; }
  .has-menu.menu-open .site-nav { display:flex; }
  .has-menu .site-nav a { padding:12px 16px; font-size:14px; }
  .menu-toggle { display:block; margin-left:auto; padding:9px 14px; border:1px solid var(--border); background:var(--card); border-radius:99px; font:600 12px var(--sans); color:var(--fg); cursor:pointer; }
  .site-header .theme-toggle { margin:0; }
  .web-split { grid-template-columns:1fr; }
  .web-hero { gap:40px; }
  .hero-copy { max-width:600px; }
  .marketing-page h1 { font-size:clamp(43px,7.5vw,64px); }
  .network-stage { width:100%; max-width:550px; justify-self:center; }
  .web-grid.three { gap:15px; }
  .web-card,.product-card,.use-card { padding:24px; }
  .section-heading { align-items:start; }
  .section-heading p { max-width:260px; }
  .people-band { padding:40px; }
  .capacity-note { flex-wrap:wrap; }
  .capacity-note > div:nth-child(2) { flex:1; }
  .capacity-note .text-link { flex-basis:calc(100% - 70px); margin-left:70px; }
  .site-footer .shell { gap:30px; grid-template-columns:1fr; }
  .web-intro.web-split { grid-template-columns:1.3fr 1fr; gap:24px; }
  .web-intro h1 { font-size:40px; }
}
@media (max-width:600px) {
  .shell,.wrap { padding-inline:20px; }
  .web-hero { padding-block:38px; }
  .marketing-page h1 { font-size:clamp(36px,9.6vw,54px); }
  .marketing-page .lede { font-size:16px; }
  .hero-kicker { font-size:10px; }
  .hero-proof { gap:15px; font-size:11px; }
  .cta-row { gap:10px; }
  .cta-row .btn { padding-inline:17px; font-size:12px; }
  .trust-strip { grid-template-columns:1fr 1fr; gap:20px 10px; }
  .trust-strip span { font-size:11px; }
  .trust-strip span:nth-child(3) { border-left:0; }
  .trust-strip strong { font-size:12px; }
  .web-section { padding-block:45px; }
  .section-heading { flex-direction:column; gap:15px; margin-bottom:25px; }
  .section-heading .text-link { margin-top:0; }
  .section-heading p { max-width:none; }
  .web-grid.two,.web-grid.three,.web-intro.web-split { grid-template-columns:1fr; }
  .product-card-art i { width:55px; }
  .product-card-art { gap:15px; }
  .people-band { padding:30px 24px; border-radius:22px; }
  .steps article { padding:0 0 0 65px; min-height:105px; }
  .steps .step-number { position:absolute; left:0; top:0; }
  .network-heading { padding:14px 11px; font-size:10px; }
  .network-person { padding:14px 10px; gap:8px; }
  .network-person strong { font-size:10px; }
  .network-person > div > span { font-size:8px; }
  .network-person > svg { display:none; }
  .network-receipt { margin-left:12px; padding:15px; }
  .network-receipt strong { font-size:12px; }
  .network-receipt span { font-size:9px; }
  .network-map .map-exit { padding:8px; font-size:9px; right:3%; }
  .map-exit span { font-size:7px; }
  .map-exit svg { width:18px; }
  .map-client { padding:8px; font-size:8px; }
  .capacity-note { padding:22px; gap:15px; }
  .capacity-note .web-icon { display:none; }
  .capacity-note .text-link { margin-left:0; }
  .web-cta { padding:42px 20px; }
  .web-cta small { line-height:1.7; }
  .web-intro { padding-block:45px 10px; }
  .footer-nav { grid-template-columns:1fr 1fr; gap:18px; }
  .site-footer .fine { flex-direction:column; gap:8px; }
  .pricing-page .packs { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .product-card,.use-card { transition:none; } }

/* Keep long code samples inside their column at phone widths. */
.docs-layout > * { min-width:0; }
.docs-body { overflow-wrap:anywhere; }
.docs-toc ol { list-style:none; padding:0; margin-top:16px; }
.docs-toc h2 { font-size:14px; }
@media(max-width:920px) { .docs-layout { grid-template-columns:minmax(0,1fr); } .docs-toc { position:static; } }
.docs-body pre { max-width:100%; overflow-x:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:20px; border-radius:16px; background:#14223b; color:#e4ebfa; }
.docs-body pre code { color:inherit; background:none; }
.pricing-page section > p { margin-block:16px; max-width:85ch; line-height:1.8; }
.pricing-page .center .cta-row { justify-content:center; }
.pricing-page .pack-cta { padding:0; background:none; border:0; box-shadow:none; }

/* BusyIP editorial identity: one type system, useful motion, and clear navigation. */
body { font-optical-sizing:auto; }
:root { --space-section:clamp(44px,6vw,80px); }
::selection { background:#c6d5ff; color:#14223b; }
.brand { font-size:28px; letter-spacing:-1.7px; }
.brand img { width:35px; height:35px; }
.site-header { background:color-mix(in srgb,var(--card) 94%,transparent); backdrop-filter:blur(18px); border-bottom-color:color-mix(in srgb,var(--border) 75%,transparent); }
.site-header .shell { gap:26px; height:82px; }
.site-nav { gap:26px; }
.site-nav > a,.nav-dropdown > summary { font-size:13px; font-weight:550; color:var(--fg-muted); }
.nav-dropdown { position:relative; border:0; padding:0; margin:0; background:transparent; }
.nav-dropdown > summary { display:flex; align-items:center; gap:7px; cursor:pointer; list-style:none; padding:15px 0; }
.nav-dropdown > summary::-webkit-details-marker { display:none; }
.nav-dropdown > summary svg { transition:transform .18s; }
.nav-dropdown[open] > summary svg { transform:rotate(180deg); }
.nav-dropdown[open] > summary,.nav-dropdown.is-current > summary { color:var(--accent); }
.nav-popover { position:absolute; top:calc(100% + 10px); left:-26px; width:360px; padding:22px; background:var(--card); border:1px solid var(--border); border-radius:20px; box-shadow:0 18px 55px rgb(20 34 59 / 12%); }
.nav-popover .eyebrow { font-size:9px; margin:0 8px 13px; }
.nav-popover > a { display:flex; align-items:center; gap:13px; padding:13px 8px; border-radius:10px; white-space:normal; }
.nav-popover > a:hover { background:var(--bg-subtle); }
.nav-popover strong { display:block; font-size:13px; font-weight:650; color:var(--fg); }
.nav-popover small { display:block; font-size:10px; color:var(--fg-muted); margin-top:4px; line-height:1.6; }
.nav-product-symbol { display:grid; place-items:center; width:37px; height:37px; border-radius:11px; background:var(--accent-subtle); color:var(--accent); font-family:Sora,var(--sans); font-size:13px; flex-shrink:0; }
.nav-product-symbol.warm { color:#89471b; background:#faeadb; }
.nav-popover > .nav-popover-foot { margin-top:12px; padding:15px 8px 0; border-top:1px solid var(--border); border-radius:0; justify-content:space-between; font-size:11px; color:var(--accent); }
.site-nav .nav-cta { min-height:42px; padding:11px 20px; }
.marketing-page h1 { font-size:clamp(44px,4.9vw,68px); }
.web-hero { padding-block:82px 72px; gap:42px; }
.web-hero h1 { font-size:clamp(44px,4.35vw,63px); max-width:none; }
.web-hero .lede { font-size:16px; line-height:1.9; margin:27px 0; }
.hero-kicker { font-size:10px; letter-spacing:.07em; padding:9px 12px; }
.hero-proof { margin-top:23px; }
.network-stage { padding:27px 21px 18px; background:linear-gradient(145deg,#edf2ff,#e4ebff); box-shadow:inset 0 0 0 1px #2855d908; }
.network-controls { display:flex; justify-content:center; gap:4px; margin-top:18px; padding:4px; border-radius:999px; border:1px solid #cbd7f0; background:#dce5f9; }
.network-controls:empty { display:none; }
.network-controls button { appearance:none; border:0; background:transparent; color:#405370; font:600 10px var(--sans); border-radius:999px; padding:8px 12px; cursor:pointer; flex:1; white-space:nowrap; transition:background .2s,color .2s,box-shadow .2s; }
.network-controls button[aria-pressed="true"] { background:#fff; color:#2855d9; box-shadow:0 2px 5px #14223b0a; }
.network-controls button:hover { color:#2855d9; }
.marketing-page .network-explanation { font-size:10px; color:#405370; margin-top:12px; text-align:center; }
.marketing-page .preview-caption { font-size:8px; margin-top:8px; }
.network-map .map-exit { transition:transform .25s,border-color .25s,box-shadow .25s; }
.network-stage[data-network="residential"] .map-exit.residential,.network-stage[data-network="mobile"] .map-exit.mobile { transform:translateY(-3px); border-color:#2855d9; box-shadow:0 8px 20px #2855d91c; }
.network-stage[data-network="mobile"] .map-exit.mobile { border-color:#a85b21; }
.network-map .map-client { z-index:1; }
@keyframes hero-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes network-travel { from { stroke-dashoffset:52; } to { stroke-dashoffset:0; } }
@keyframes network-breathe { 0%,100% { r:29; opacity:1; } 55% { r:37; opacity:.35; } }
@media(prefers-reduced-motion:no-preference) {
  .hero-copy > * { animation:hero-enter .65s cubic-bezier(.2,.7,.2,1) both; }
  .hero-copy > :nth-child(2) { animation-delay:.08s; }
  .hero-copy > :nth-child(3) { animation-delay:.16s; }
  .hero-copy > :nth-child(4) { animation-delay:.24s; }
  .hero-copy > :nth-child(n+5) { animation-delay:.32s; }
  .network-window { animation:hero-enter .85s .12s cubic-bezier(.2,.7,.2,1) both; }
  .network-receipt { animation:hero-enter .8s .32s cubic-bezier(.2,.7,.2,1) both; }
  .network-route { animation:network-travel 2s .3s 2 linear; }
  .network-pulse { animation:network-breathe 1.35s .3s 3 ease-in-out; }
  .product-emblem .emblem-orbit { animation:hero-enter .8s ease-out both; }
  .nav-dropdown[open] .nav-popover { animation:hero-enter .18s ease-out; }
}
.web-section { padding-block:var(--space-section); }
.web-grid { gap:24px; }
.product-card,.web-card,.use-card { padding:32px; }
.product-card:hover,.use-card:hover,.guide-card:hover { box-shadow:0 14px 40px -20px rgb(20 34 59 / 20%); }
.web-card h2,.web-card h3,.use-card h3 { text-wrap:pretty; }
.text-link { line-height:1.6; }
.text-link svg { flex-shrink:0; transition:transform .18s; }
a:hover > .text-link svg,a.text-link:hover svg { transform:translateX(3px); }
.breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding-top:27px; font-size:10px; line-height:1.6; color:var(--fg-subtle); }
.breadcrumbs a { color:var(--fg-muted); }
.breadcrumbs [aria-current] { color:var(--fg); }
.breadcrumbs + .web-intro { padding-top:38px; }
.web-intro .intro-fine { font-size:11px; margin-top:18px; }
.editorial-intro { max-width:950px; padding-bottom:48px; }
.editorial-intro h1 { max-width:18ch; }
.editorial-intro .lede { max-width:62ch; }
.editorial-rule { display:flex; flex-wrap:wrap; gap:12px 28px; padding-top:24px; margin-top:32px; border-top:1px solid var(--border); color:var(--fg-muted); font-size:11px; }
.editorial-rule span::before { content:'✓'; color:var(--accent); margin-right:7px; }
.soft-section { padding:48px; background:var(--bg-subtle); border:1px solid var(--border); border-radius:28px; margin-block:22px; }
.page-contents { display:flex; gap:28px; flex-wrap:wrap; padding:20px 0; border-block:1px solid var(--border); margin-top:20px; }
.page-contents a { font-size:11px; font-weight:600; color:var(--fg-muted); }
.page-contents a:hover { color:var(--accent); }
.emblem-orbit { display:grid; place-items:center; position:relative; width:174px; height:174px; border:1px solid var(--accent-border); border-radius:50%; margin:14px 0 28px; }
.emblem-orbit::before { content:''; position:absolute; inset:17px; border-radius:50%; border:1px dashed var(--accent-border); }
.orbit-node { position:absolute; display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--accent-border); background:var(--card); border-radius:12px; box-shadow:0 5px 12px #14223b08; }
.orbit-node-one { top:5px; right:0; }
.orbit-node-two { bottom:10px; left:-3px; }
.control-stack { display:grid; gap:24px; }
.control-stack article { display:flex; align-items:start; gap:18px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.control-stack article:last-child { border-bottom:0; padding-bottom:0; }
.control-stack .web-icon { margin:0; }
.control-stack h3 { font-size:17px; margin:4px 0 10px; }
.control-stack p { font-size:13px; }
.workflow-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:45px; row-gap:30px; list-style:none; padding:0; }
.workflow-steps li { display:flex; align-items:start; gap:20px; padding-bottom:25px; border-bottom:1px solid var(--border); }
.workflow-steps .step-number { flex-shrink:0; margin:0; }
.workflow-steps h3 { font-size:18px; margin:7px 0 13px; }
.workflow-steps p { font-size:14px; }
.card-index { display:block; font-family:var(--mono); color:var(--accent); font-size:12px; margin-bottom:28px; }
.measurement-section { border-block:1px solid var(--border); }
.quality-checks { list-style:none; display:grid; gap:0; padding:14px 30px; border:1px solid var(--border); background:var(--card); border-radius:24px; }
.quality-checks li { display:flex; gap:16px; align-items:center; font-size:14px; line-height:1.7; padding:19px 0; border-bottom:1px solid var(--border); color:var(--fg-muted); }
.quality-checks li:last-child { border-bottom:0; }
.quality-checks svg { color:var(--accent); flex-shrink:0; }
.comparison-table { background:var(--card); }
.comparison-table caption { padding:20px 24px; text-align:left; font-size:12px; color:var(--fg-muted); }
.comparison-table th,.comparison-table td { padding:18px 24px; font-size:13px; line-height:1.7; }
.comparison-table thead { background:var(--accent-subtle); }
.comparison-table thead th { color:var(--accent); font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:14px; }
.comparison-table tbody th { width:27%; font-family:var(--sans); text-transform:none; letter-spacing:0; color:var(--fg); font-weight:550; }
.comparison-table tbody td { color:var(--fg-muted); }
.field-note { display:flex; gap:20px; align-items:start; padding:30px; background:var(--accent-subtle); border:1px solid var(--accent-border); border-radius:20px; margin-block:26px; }
.field-note .web-icon { background:var(--card); margin:0; }
.field-note .eyebrow { color:var(--accent); margin-bottom:10px; }
.field-note p { font-size:14px; }
.connection-choice { display:grid; gap:16px; }
.connection-choice > a { display:flex; align-items:center; gap:18px; padding:25px; border:1px solid var(--border); border-radius:20px; background:var(--card); color:var(--fg); }
.connection-choice > a:hover { border-color:var(--accent); text-decoration:none; }
.connection-choice .web-icon { margin:0; }
.connection-choice h3 { font-size:18px; }
.connection-choice p { font-size:12px; margin-top:8px; }
.connection-choice > a > svg { margin-left:auto; color:var(--accent); flex-shrink:0; }
.workflow-preview { border:1px solid var(--border); border-radius:28px; background:var(--bg-subtle); padding:34px; }
.workflow-preview-top { display:flex; align-items:center; justify-content:space-between; color:var(--accent); }
.workflow-preview-top .eyebrow { margin:0; }
.workflow-preview-route { display:flex; align-items:center; justify-content:center; gap:14px; padding:42px 0; }
.workflow-preview-route > span:not(.route-connector) { display:grid; justify-items:center; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:17px; padding:20px 12px; color:var(--accent); font-size:10px; min-width:110px; }
.route-connector { width:60px; border-top:2px dashed var(--accent-border); }
.workflow-preview h2 { font-size:24px; }
.workflow-preview p { font-size:13px; margin-top:15px; }
.workflow-preview-foot { border-top:1px solid var(--border); margin-top:25px; padding-top:18px; color:var(--fg-muted); font-size:10px; }
.guide-card { display:block; border:1px solid var(--border); border-radius:24px; background:var(--card); overflow:hidden; color:var(--fg); transition:border-color .2s,box-shadow .2s; }
.guide-card:hover { border-color:var(--accent); color:var(--fg); text-decoration:none; }
.guide-art { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:start; gap:20px; background:var(--accent-subtle); color:var(--accent); padding:35px; min-height:180px; }
.guide-card:nth-child(even) .guide-art { background:var(--muted-bg); }
.guide-art > svg { z-index:1; padding:11px; width:62px; height:62px; box-sizing:content-box; background:var(--card); border:1px solid var(--accent-border); border-radius:20px; }
.guide-art > span:not(.guide-art-number) { z-index:1; text-transform:uppercase; font-size:10px; letter-spacing:.1em; font-weight:600; }
.guide-art-number { position:absolute; right:25px; top:3px; font-family:Sora,var(--sans); font-size:158px; line-height:1.3; letter-spacing:-.1em; color:var(--accent); opacity:.1; }
.guide-card-copy { padding:28px 32px 32px; }
.guide-card h3 { font-size:23px; text-wrap:pretty; }
.guide-card p { font-size:14px; line-height:1.75; margin-top:17px; }
.guide-card .text-link { margin-top:24px; }
.related-reading { display:flex; gap:30px; justify-content:space-between; align-items:center; padding:35px; margin-bottom:50px; border:1px solid var(--border); background:var(--bg-subtle); border-radius:24px; }
.related-reading h2 { font-size:26px; }
.related-reading p { max-width:65ch; font-size:14px; margin-top:14px; }
.related-reading .btn { flex-shrink:0; }
.developer-banner { display:flex; gap:25px; align-items:center; border:1px solid var(--border); border-radius:24px; padding:30px; margin-block:10px 55px; }
.developer-banner .web-icon { margin:0; }
.developer-banner h2 { font-size:21px; }
.developer-banner p { font-size:13px; margin-top:10px; }
.developer-banner .btn { flex-shrink:0; margin-left:auto; }
.editorial-list { list-style:none; display:grid; gap:26px; margin:0; padding:0; }
.editorial-list li { display:flex; gap:18px; align-items:start; }
.editorial-list li > span { font-family:var(--mono); color:var(--accent); font-size:12px; padding-top:5px; }
.editorial-list h3 { font-size:18px; }
.editorial-list p { font-size:14px; margin-top:10px; }
.resource-link-list { border-top:1px solid var(--border); }
.resource-link-list > a { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; border-bottom:1px solid var(--border); color:var(--fg); font-size:14px; font-weight:550; }
.resource-link-list > a > span { display:flex; gap:14px; align-items:center; }
.resource-link-list svg { color:var(--accent); flex-shrink:0; }
.article-intro { max-width:880px; }
.article-intro h1 { font-size:clamp(36px,4.5vw,57px); max-width:25ch; }
.article-intro .lede { font-size:18px; max-width:74ch; }
.article-meta { display:flex; flex-wrap:wrap; gap:12px 22px; font-size:11px; color:var(--fg-muted); padding:20px 0; border-block:1px solid var(--border); margin-top:30px; }
.article-layout { display:grid; grid-template-columns:235px minmax(0,1fr); align-items:start; gap:65px; padding-block:25px 50px; }
.article-sidebar { position:sticky; top:115px; }
.article-sidebar nav { display:grid; gap:5px; }
.article-sidebar nav a { font-size:12px; line-height:1.6; color:var(--fg-muted); border-left:2px solid var(--border); padding:9px 14px; }
.article-sidebar nav a[aria-current] { color:var(--accent); border-color:var(--accent); font-weight:600; background:var(--accent-subtle); }
.article-sidebar-note { background:var(--bg-subtle); border:1px solid var(--border); border-radius:16px; padding:20px; margin-top:28px; }
.article-sidebar-note strong { font-size:13px; }
.article-sidebar-note p { font-size:12px; margin-top:10px; }
.article-sidebar-note .text-link { font-size:12px; margin-top:14px; }
.guide-prose { min-width:0; max-width:760px; }
.guide-prose > section { padding:25px 0; }
.guide-prose > section:first-child { padding-top:0; }
.guide-prose h2 { font-size:27px; line-height:1.35; margin-bottom:20px; }
.guide-prose p,.guide-prose li { font-size:15px; line-height:1.95; color:var(--fg-muted); }
.guide-prose p + p { margin-top:18px; }
.guide-prose ul,.guide-prose ol { padding-left:22px; }
.guide-prose li { padding-left:5px; margin-bottom:12px; }
.guide-prose a { text-decoration:underline; text-underline-offset:3px; }
.guide-prose .table-wrap { margin:22px 0; }
.guide-prose table { min-width:510px; }
.guide-prose th,.guide-prose td { font-family:var(--sans); letter-spacing:0; text-transform:none; font-size:13px; line-height:1.7; padding:16px; }
.guide-prose caption { text-align:left; padding:16px; font-size:12px; }
.article-source { margin-top:30px; padding:25px; border:1px solid var(--border); border-radius:18px; background:var(--bg-subtle); }
.article-source p,.article-source > a { font-size:13px; }
.article-source > a { display:inline-block; margin-top:14px; }
.site-footer { padding:64px 0 26px; margin-top:65px; background:var(--bg-subtle); }
.site-footer .shell { grid-template-columns:.8fr 2.2fr; column-gap:60px; row-gap:45px; }
.site-footer .brand { font-size:30px; gap:11px; }
.site-footer .brand img { width:38px; height:38px; }
.footer-statement { font-family:Sora,var(--sans); color:var(--fg); font-size:30px; line-height:1.3; letter-spacing:-.05em; margin:24px 0 18px; }
.footer-brand .tagline { font-size:12px; line-height:1.8; max-width:245px; }
.footer-protocols { display:flex; gap:8px; margin-top:22px; }
.footer-protocols span { font-size:8px; font-family:var(--mono); border:1px solid var(--border); border-radius:5px; padding:5px 7px; color:var(--fg-muted); }
.footer-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; }
.footer-column { display:flex; flex-direction:column; gap:14px; }
.footer-column h2 { font-family:var(--sans); font-size:11px; font-weight:650; letter-spacing:0; margin:0 0 10px; line-height:1.5; }
.footer-column a { font-size:11px; line-height:1.6; }
.footer-bottom { display:flex; justify-content:space-between; gap:25px; grid-column:1/-1; border-top:1px solid var(--border); padding-top:23px; }
.footer-bottom p,.footer-bottom a { color:var(--fg-muted); font-size:10px; }
.web-cta { margin-top:35px; margin-bottom:0; padding-block:75px; background:var(--accent-subtle); }
.web-cta .eyebrow { color:var(--accent); }
@media(max-width:1100px) {
  .site-header .shell { gap:20px; }
  .site-nav { gap:20px; }
  .nav-popover { left:auto; right:-25px; }
  .site-footer .shell { grid-template-columns:1fr; }
  .footer-brand { display:grid; grid-template-columns:.7fr 1fr 1fr; gap:15px 25px; align-items:center; }
  .footer-brand .brand { grid-row:1; }
  .footer-statement { margin:0; }
  .footer-brand .tagline { margin:0; }
  .footer-protocols { margin:0; grid-column:1; }
  .article-layout { gap:38px; grid-template-columns:205px minmax(0,1fr); }
}
@media(max-width:850px) {
  .site-header .shell { height:auto; min-height:76px; }
  .has-menu .site-nav { gap:0; }
  .nav-dropdown > summary { padding:14px 16px; font-size:14px; justify-content:space-between; }
  .nav-popover { position:static; width:auto; box-shadow:none; border:0; padding:12px 10px; background:var(--bg-subtle); border-radius:12px; margin-bottom:12px; }
  .has-menu .nav-popover a { padding:12px; }
  .has-menu .site-nav > a { border-bottom:1px solid var(--border); border-radius:0; }
  .has-menu .site-nav .nav-cta { border-radius:99px; margin-top:12px; text-align:center; border:0; }
  .web-hero { padding-block:50px; }
  .web-hero h1 { font-size:clamp(48px,7.5vw,68px); max-width:14ch; }
  .network-stage { max-width:540px; padding:28px 22px 20px; }
  .soft-section { padding:32px; }
  .article-layout { grid-template-columns:minmax(0,1fr); gap:35px; }
  .article-sidebar { position:static; }
  .article-sidebar nav { grid-template-columns:repeat(2,minmax(0,1fr)); padding:22px; border:1px solid var(--border); border-radius:20px; }
  .article-sidebar nav .eyebrow { grid-column:1/-1; }
  .article-sidebar-note { display:none; }
  .guide-prose { max-width:none; }
  .related-reading { padding:26px; }
  .developer-banner { flex-wrap:wrap; gap:20px; }
  .developer-banner > div:nth-child(2) { flex:1; }
  .developer-banner .btn { margin-left:68px; }
  .web-card,.product-card,.use-card { padding:26px; }
  .web-grid.three { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
  .site-header .shell { gap:12px; min-height:72px; }
  .brand { font-size:25px; }
  .brand img { width:31px; height:31px; }
  .web-hero { padding-block:37px 42px; gap:38px; }
  .web-hero h1 { font-size:clamp(37px,9.7vw,54px); }
  .web-hero .lede { font-size:15px; margin-block:23px; }
  .network-stage { padding:22px 14px 17px; }
  .network-controls { padding:3px; gap:2px; }
  .network-controls button { padding:8px 6px; font-size:9px; }
  .marketing-page .network-explanation { font-size:9px; }
  .marketing-page .preview-caption { font-size:7px; }
  .web-grid { gap:18px; }
  .breadcrumbs { font-size:9px; gap:7px; padding-top:20px; }
  .breadcrumbs + .web-intro { padding-top:28px; }
  .editorial-intro h1 { font-size:39px; }
  .editorial-rule { gap:12px; flex-direction:column; font-size:10px; margin-top:25px; }
  .page-contents { gap:16px 22px; padding-block:18px; }
  .page-contents a { font-size:10px; }
  .soft-section { padding:26px 20px; border-radius:22px; }
  .workflow-steps { grid-template-columns:minmax(0,1fr); gap:24px; }
  .workflow-steps li { gap:16px; }
  .workflow-steps h3 { font-size:17px; }
  .workflow-steps p { font-size:13px; }
  .control-stack { gap:20px; }
  .control-stack article { gap:15px; }
  .control-stack h3 { font-size:16px; }
  .control-stack .web-icon { width:40px; height:40px; border-radius:11px; }
  .quality-checks { padding:8px 20px; border-radius:20px; }
  .quality-checks li { font-size:13px; gap:12px; }
  .comparison-table table { min-width:560px; }
  .comparison-table th,.comparison-table td { padding:14px 18px; font-size:12px; }
  .comparison-table caption { font-size:11px; }
  .field-note { padding:22px; gap:14px; }
  .field-note .web-icon { display:none; }
  .field-note p { font-size:13px; }
  .connection-choice > a { padding:19px; gap:13px; }
  .connection-choice p { font-size:11px; }
  .connection-choice h3 { font-size:17px; }
  .connection-choice .web-icon { width:40px; height:40px; }
  .workflow-preview { padding:25px 20px; }
  .workflow-preview-route { gap:10px; padding-block:30px; }
  .workflow-preview-route > span:not(.route-connector) { min-width:85px; font-size:9px; padding:18px 9px; }
  .route-connector { width:30px; }
  .guide-art { padding:26px; min-height:170px; }
  .guide-art > svg { width:42px; height:42px; }
  .guide-art-number { font-size:140px; }
  .guide-card-copy { padding:25px; }
  .guide-card h3 { font-size:21px; }
  .guide-card p { font-size:13px; }
  .related-reading { flex-direction:column; align-items:start; padding:25px; }
  .related-reading h2 { font-size:23px; }
  .developer-banner { padding:24px; }
  .developer-banner .web-icon { display:none; }
  .developer-banner .btn { margin:0; }
  .editorial-list h3 { font-size:17px; }
  .resource-link-list > a { font-size:13px; }
  .article-intro h1 { font-size:35px; }
  .article-intro .lede { font-size:16px; }
  .article-meta { gap:10px 16px; font-size:10px; }
  .article-sidebar nav { grid-template-columns:minmax(0,1fr); padding:20px; }
  .article-sidebar nav a { font-size:12px; }
  .guide-prose h2 { font-size:24px; }
  .guide-prose p,.guide-prose li { font-size:14px; line-height:1.9; }
  .site-footer { padding-top:42px; margin-top:45px; }
  .footer-brand { display:block; }
  .footer-statement { margin:22px 0 16px; font-size:30px; }
  .footer-protocols { margin-top:18px; }
  .footer-nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 20px; }
  .footer-column h2 { font-size:11px; }
  .footer-column a { font-size:11px; }
  .footer-bottom { flex-direction:column; gap:12px; }
  .web-cta { padding:48px 22px; margin-top:25px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-copy > *,.network-window,.network-receipt,.network-route,.network-pulse { animation:none; }
  .nav-dropdown > summary svg,.network-controls button,.network-map .map-exit,.text-link svg { transition:none; }
}
/* The reference and purchase pages share the same editorial polish. */
.docs-page main > h1 { font-size:clamp(38px,4.5vw,58px); letter-spacing:-.05em; }
.docs-page main > .lede { font-size:17px; line-height:1.8; max-width:64ch; margin-bottom:45px; }
.docs-page .docs-toc { border:1px solid var(--border); border-radius:18px; padding:22px 15px; background:var(--bg-subtle); }
.docs-page .docs-toc h2 { padding-inline:12px; }
.docs-page .docs-toc a { font-size:12px; line-height:1.8; padding-block:6px; }
.docs-page .docs-body section { padding-bottom:20px; }
.docs-page .docs-body h2 { font-size:27px; margin-top:45px; line-height:1.35; }
.docs-page .docs-body section:first-child h2 { margin-top:0; }
.docs-page .docs-body p,.docs-page .docs-body li { font-size:14px; line-height:1.85; }
.docs-page .docs-body .notice { border-radius:15px; margin-block:22px; }
.docs-page table.errors { background:var(--card); }
.docs-page .code-head,.mcp-page .term-bar { background:#1d3253; color:#b5c1d8; border-color:#31496b; }
.docs-page .term,.docs-page .code,.mcp-page .term { border-color:#31496b; background:#14223b; border-radius:16px; }
.mcp-page .hero { padding-block:65px; background:none; }
.mcp-page .wrap { padding-inline:0; }
.mcp-page .hero h1 { max-width:14ch; }
.mcp-page .topup { padding:32px; border-radius:24px; background:var(--accent-subtle); }
.mcp-page .hero .wrap { gap:55px; }
.mcp-page section:not(.hero) { padding-block:45px; }
.mcp-page .beam::after { display:none; }
.mcp-page .shiny { animation:none; background:none; -webkit-text-fill-color:currentColor; }
.pricing-page main > h1 { max-width:23ch; }
.pricing-page .packs { margin-bottom:26px; }
.pricing-page .pack,.pricing-page .stub { border-color:var(--border); box-shadow:none; }
.pricing-page .pack-featured,.pricing-page .stub.pick { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.pricing-page .section > h2 { font-size:29px; margin-bottom:20px; }
.pricing-page .table-wrap { margin-block:24px; background:var(--card); }
@media(max-width:600px) {
  .docs-page main > .lede { font-size:15px; }
  .docs-page .docs-body h2 { font-size:24px; }
  .mcp-page .hero { padding-block:38px; }
  .mcp-page .hero h1 { font-size:40px; }
  .pricing-page .section > h2 { font-size:25px; }
}