/* The marketing site's foundation.

   These are the console's design tokens, verbatim — same names, same values
   (internal/handler/static/console.css). The landing page is the first thing
   a person sees and the console is what they get; they have to be the same
   product, so the palette is not re-derived here, it is shared. Anything the
   marketing site needs beyond the console's vocabulary is layered on top and
   derived from those tokens, never alongside them.

   The rules that follow are the console's components at marketing scale:
   black is the primary action, amber is the accent, cards are white surfaces
   floating on a tinted page with a soft shadow rather than boxes drawn with
   a border. */

:root {
  --font: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --bg: #e6e8ef; --surface: #ffffff; --surface-2: #f3f5f9;
  --ink: #14161c; --ink-2: #565d6b; --ink-3: #8a909d;
  --line: #e9ebef; --line-2: #dde0e6;
  --action: #191b21; --action-2: #2a2d36; --on-action: #ffffff;
  --accent: #ffc400; --accent-2: #ffcf2e; --accent-deep: #8a6a00; --accent-soft: #fff5cf; --accent-wash: #fffbeb; --on-accent: #1e1a08;
  --green: #17924e; --green-soft: #e4f4ea;
  --amber: #b7791f; --amber-soft: #fbf1da;
  --red: #d23b41; --red-soft: #fbe9ea;
  --grey: #8a909d; --grey-soft: #eef0f3;
  --r: 12px; --r-sm: 8px; --r-lg: 20px;
  --shadow: 0 1px 2px rgba(20,22,28,.04), 0 1px 3px rgba(20,22,28,.03);
  --shadow-card: 0 1px 2px rgba(20,22,28,.05), 0 10px 26px -14px rgba(20,22,28,.16);
  --shadow-lg: 0 24px 60px -20px rgba(20,22,28,.34);

  /* Marketing-only, derived. The dark panels (code samples, the broker-vs-proxy
     callout) are the console's terminal surface — .clihint's #171a21 — not a
     second brand colour. They hold in dark mode too, because a terminal reads
     as a terminal on either theme. */
  --panel: #171a21; --panel-2: #1d212a; --panel-line: #2b303a;
  --on-panel: #e8eaef; --on-panel-2: #9aa1af;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0a0c10; --surface: #16191f; --surface-2: #1b1f26;
  --ink: #f0f2f6; --ink-2: #a2a9b6; --ink-3: #6a7180;
  --line: #23272f; --line-2: #2f343d;
  --action: #f0f2f6; --action-2: #dfe3ea; --on-action: #14161c;
  --accent: #ffc400; --accent-2: #ffcf2e; --accent-deep: #f2c94a; --accent-soft: #2b2408; --accent-wash: #1c1a10; --on-accent: #1e1a08;
  --green: #45c47a; --green-soft: #14271b;
  --amber: #e0a53a; --amber-soft: #2a2210;
  --red: #ef5a60; --red-soft: #2b1618;
  --grey: #6a7180; --grey-soft: #21252c;
  --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.7); --shadow-lg: 0 26px 66px -20px rgba(0,0,0,.75);
} }
:root[data-theme="dark"] {
  --bg: #0a0c10; --surface: #16191f; --surface-2: #1b1f26;
  --ink: #f0f2f6; --ink-2: #a2a9b6; --ink-3: #6a7180;
  --line: #23272f; --line-2: #2f343d;
  --action: #f0f2f6; --action-2: #dfe3ea; --on-action: #14161c;
  --accent: #ffc400; --accent-2: #ffcf2e; --accent-deep: #f2c94a; --accent-soft: #2b2408; --accent-wash: #1c1a10; --on-accent: #1e1a08;
  --green: #45c47a; --green-soft: #14271b;
  --amber: #e0a53a; --amber-soft: #2a2210;
  --red: #ef5a60; --red-soft: #2b1618;
  --grey: #6a7180; --grey-soft: #21252c;
  --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.7); --shadow-lg: 0 26px 66px -20px rgba(0,0,0,.75);
}

/* ---- base ---- */

* { box-sizing: border-box; }
/* The UA's [hidden] is a bare attribute selector, so any class rule that sets
   a display value beats it and the element stays on screen while .hidden
   reports true. console.css carries the same guard for the same reason. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
/* The console fills the whole viewport with --bg because it is app chrome
   behind floating cards. A marketing page is not chrome — held edge to edge
   for a full scroll, that same tint reads flat and dead. So the page's base
   is --surface and --bg comes back as .band: alternating recessed sections
   that give the scroll a rhythm and put the tint back under the cards that
   need it. Same two tokens, same relationship, opposite default. */
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; }
code { font-family: var(--mono); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 26px; }

/* Marketing type is louder than the console's, but the tracking and weights
   are the console's: -.02em to -.035em, 700–800. Nothing here goes to the
   850-weight, -.046em setting the old landing used — that read as a
   different typeface next to the app. */
h1, h2, h3 { margin: 0; letter-spacing: -.025em; font-weight: 800; }
h1 { font-size: 64px; line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: 32px; line-height: 1.1; }
h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
.lead { color: var(--ink-2); font-size: 16px; margin: 14px 0 0; max-width: 62ch; }
/* The section eyebrow, built as the console's .badge.pending rather than as
   coloured text. This matters: --accent-deep is #8a6a00, a dark mustard that
   the console only ever uses as ink ON an amber fill (.badge.pending,
   .scope.all, .panel-h .cnt). Set loose as a text colour it reads muddy, and
   six muddy labels down a page is most of why the palette felt dead. As a
   pill it is the accent doing what it does next door — a small block of
   colour — and it repeats the brand at every section head. */
.eyebrow { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft); border-radius: 20px; padding: 5px 12px; }

/* The console's row-avatar tints (.ov .av.c0/.c1/.c2). Six cards in a grid all
   wearing the same amber chip is monotony; these are the product's own
   secondary hues, so reaching for them is not inventing a palette.

   The dark values are carried as tokens rather than as a second set of
   selectors, because ":root:not([data-theme='light']) .c0" written outside a
   prefers-color-scheme query matches in light mode too — it is only safe
   nested inside the query, alongside the rest of the dark palette.

   Amber gets a class of its own (.ca) rather than being a default on the
   component that uses it: a component default like ".bcard .ico" carries two
   classes of specificity and would silently beat every single-class tint
   below it. Every tinted thing names its tint. */
:root { --c0-bg: #eef0ff; --c0-ink: #4a52c9; --c1-bg: #e6f6ef; --c1-ink: #17924e; --c2-bg: #fdeef0; --c2-ink: #c2414a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --c0-bg: #1e2140; --c0-ink: #9aa2ff; --c1-bg: #14271b; --c1-ink: #45c47a; --c2-bg: #2b1618; --c2-ink: #ef8a8f;
} }
:root[data-theme="dark"] { --c0-bg: #1e2140; --c0-ink: #9aa2ff; --c1-bg: #14271b; --c1-ink: #45c47a; --c2-bg: #2b1618; --c2-ink: #ef8a8f; }
.ca { background: var(--accent-soft); color: var(--accent-deep); }
.c0 { background: var(--c0-bg); color: var(--c0-ink); }
.c1 { background: var(--c1-bg); color: var(--c1-ink); }
.c2 { background: var(--c2-bg); color: var(--c2-ink); }
@media (max-width: 900px) { h1 { font-size: 42px; } h2 { font-size: 26px; } }

/* ---- buttons ----
   console.css's .btn, at the same three sizes plus two marketing ones. The
   hierarchy is the console's and is not negotiable per surface: .action is
   near-black and means "act here" (the console's Request access button),
   .primary is amber and means "this is the one we recommend", plain .btn is
   everything else. */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 13.5px; font-weight: 600; border-radius: var(--r-sm); text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.btn:hover { background: var(--bg); }
.btn svg { width: 16px; height: 16px; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.lg { height: 46px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
.btn.lg svg { width: 18px; height: 18px; }
.btn.xl { height: 52px; padding: 0 26px; font-size: 16px; border-radius: var(--r); }
.btn.xl svg { width: 19px; height: 19px; }
.btn.action { background: var(--action); border-color: var(--action); color: var(--on-action); }
.btn.action:hover { background: var(--action-2); border-color: var(--action-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface); color: var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- surfaces ----
   The console's card: a white surface floating on the tinted page, held by a
   shadow rather than outlined by a border. .card-tight is the console's
   .panel radius for anything smaller than a feature tile. */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.card-tight { border-radius: var(--r); box-shadow: var(--shadow); }

/* Console .badge, unchanged. */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.badge .d { width: 6px; height: 6px; border-radius: 50%; }
.badge.pending { background: var(--accent-soft); color: var(--accent-deep); } .badge.pending .d { background: var(--accent); }
.badge.active { background: var(--green-soft); color: var(--green); } .badge.active .d { background: var(--green); }
.badge.expired { background: var(--grey-soft); color: var(--ink-2); } .badge.expired .d { background: var(--grey); }
.badge.revoked { background: var(--red-soft); color: var(--red); } .badge.revoked .d { background: var(--red); }

/* Console .envpill / .lchip: a stated fact, not a control. */
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; padding: 6px 13px; }
.tag .d { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.tag.ok .d { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

/* ---- nav ----
   The console's .topbar treatment: the page tint at 72%, saturated and
   blurred, closed by a hairline. */

nav.site { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 76%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
nav.site .row { display: flex; align-items: center; gap: 26px; height: 64px; }
nav.site .links { display: flex; align-items: center; gap: 22px; margin-left: 6px; }
nav.site .links > a { font-size: 14px; color: var(--ink-3); font-weight: 600; transition: color .12s; }
nav.site .links > a:hover, nav.site .links > a.on { color: var(--ink); }

/* Everything that is a section of the home page lives behind one "Product"
   menu; only Docs and API — which are their own pages — stay at top level.
   Mixed together they read as peers, so from /docs a click on "Pricing" threw
   you back to the home page with no warning. The panel is the console's
   popover: surface, hairline, --shadow-lg, 6px of padding. */
nav.site .menu { position: relative; }
nav.site .menu > button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-3); transition: color .12s; }
nav.site .menu > button:hover, nav.site .menu.open > button { color: var(--ink); }
nav.site .menu > button svg { width: 13px; height: 13px; transition: transform .16s; }
nav.site .menu.open > button svg { transform: rotate(180deg); }
nav.site .menu .pop { position: absolute; top: calc(100% + 15px); left: -12px; min-width: 268px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; z-index: 40; }
nav.site .menu .pop a { display: block; padding: 9px 11px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; color: var(--ink); }
nav.site .menu .pop a:hover { background: var(--bg); }
nav.site .menu .pop a .d { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
nav.site .spacer { flex: 1; }
nav.site .gh { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; border: 1px solid var(--line-2); border-radius: var(--r-sm); height: 38px; padding: 0 13px; background: var(--surface); }
nav.site .gh .star { color: var(--accent-deep); }
@media (max-width: 820px) { nav.site .links { display: none; } }

/* Brand lockup — the console rail's .mark, scaled down. */
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.mark { width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; box-shadow: var(--shadow); flex: none; }
.mark svg { width: 17px; height: 17px; }

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

footer.site { border-top: 1px solid var(--line); margin-top: 40px; padding: 40px 0; }
footer.site .row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
footer.site .muted { color: var(--ink-3); font-size: 13.5px; }
footer.site .fl { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
footer.site .fl a { color: var(--ink-2); font-size: 13.5px; }
footer.site .fl a:hover { color: var(--ink); }

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

section.blk { padding: 72px 0; }
.sec-head { max-width: 640px; }
.sec-head h2 { margin-top: 12px; }

/* A recessed section. Alternate these down the page: the tint is what makes a
   white card read as a card, so the sections carrying cards want it and the
   prose sections do not. */
/* The console has no gradients — every surface is a flat fill separated by a
   hairline. So the page gets its rhythm from alternating flat bands, not from
   a wash. Do not reintroduce a gradient here to add "warmth": the accent
   already does that job, as a fill.

   --surface-2, not --bg. --bg (#e6e8ef) is the console's app chrome and it is
   sized for a 76px rail and a topbar, not for a full-width band a screen
   tall. At that size the blue-grey stops reading as a plane and starts
   fighting the amber, which is warm. --surface-2 (#f3f5f9) is the console's
   own lighter tint — the one it uses for a nested panel — and it changes the
   plane just enough for a white card to read, without putting a slab of
   colour on the page. The hairlines do the separating; the tint only
   supports the cards. */
section.band { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.band + section.band { border-top: 0; }