/* ============================================================================
   Wave 1 API landing system — implements 28_API_COLOR_TYPOGRAPHY_TRUST_SYSTEM
   and 29_API_LANDING_PAGE_RESPONSIVE_QA.

   Per-product hue is injected by overriding the --brand-* tokens only. Every
   other token, and all layout, is shared so the three sites read as one
   disciplined organisation (22_FRONTEND §Core visual principles).

   Neutral foundation is slate with a slight blue bias — chosen, not inherited.
   ========================================================================== */

:root {
  /* Spacing scale — fixed: 4 8 12 16 24 32 48 64 96 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Type scale — fixed: 12 14 16 18 20 24 32 40-48 */
  --t-xs: 12px; --t-sm: 14px; --t-base: 16px; --t-md: 18px;
  --t-lg: 20px; --t-xl: 24px; --t-2xl: 32px; --t-3xl: clamp(32px, 5vw, 48px);

  /* Widths */
  --w-app: 1240px;      /* application/API surface: 1100-1400 */
  --w-commerce: 1120px; /* pricing/commercial: 1000-1200 */
  --w-read: 720px;      /* reading column: 680-760 */

  /* Neutral foundation */
  --bg: #FFFFFF;
  --bg-sunken: #F6F8FB;
  --surface: #FFFFFF;
  --border: #DDE3EC;
  --border-strong: #C3CCDA;
  --ink: #0F172A;        /* 16.9:1 on white */
  --ink-2: #3F4C60;      /* 8.6:1  on white */
  --ink-3: #5C6880;      /* 5.8:1  on white — lightest text used */

  /* Semantic — never the sole carrier of meaning (28 §Semantic rules) */
  /* Status hues sit at the MIDPOINTS of the twelve-spoke brand wheel — exactly
     15 degrees from either neighbouring product hue, the most an even wheel
     allows. Status therefore never reads as some product's brand colour. */
  --ok: #137464;         /* 5.7:1 on white */
  --ok-bg: #ECF6F4;
  --warn: #786714;       /* 5.6:1 on white */
  --warn-bg: #F6F4EC;
  --crit: #C8213D;       /* 5.6:1 on white */
  --crit-bg: #F6ECEE;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --focus: var(--brand-600);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-base)/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* belt and braces against unintended horizontal scroll */
}
code, kbd, pre, .mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--t-3xl); letter-spacing: -0.03em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); letter-spacing: -0.01em; }
p  { margin: 0; }
a  { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px;
}

.wrap      { width: 100%; max-width: var(--w-app);      margin-inline: auto; padding-inline: var(--s5); }
.wrap-cm   { width: 100%; max-width: var(--w-commerce); margin-inline: auto; padding-inline: var(--s5); }
.read      { max-width: var(--w-read); }               /* 45-80 char line length */
.stack     { display: flex; flex-direction: column; }
.eyebrow {
  font: 600 var(--t-xs)/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
section { padding-block: var(--s8); }
section + section { border-top: 1px solid var(--border); }
.sunken { background: var(--bg-sunken); }

/* ---- header ---- */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
header.site .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 60px; }
.brand { display: flex; align-items: center; gap: var(--s2); white-space: nowrap; font-weight: 700; font-size: var(--t-md); letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--brand-600); flex: none; }
header.site nav { margin-left: auto; display: flex; align-items: center; gap: var(--s5); }
/* :not(.btn) matters. `header.site nav a` scores (0,1,3) and would otherwise
   beat `.btn-primary` at (0,1,0) — which painted the header CTA's label in
   --ink-2 slate on the brand background, making the most important button on
   the page almost unreadable. Found by sampling the rendered pixels. */
header.site nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
header.site nav a:not(.btn):hover { color: var(--ink); text-decoration: underline; }

/* ---- buttons: exactly one primary per decision area (28 §CTA) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5); border-radius: var(--radius);
  font: 600 var(--t-base)/1 ui-sans-serif, system-ui, sans-serif;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn-primary { background: var(--brand-700); color: #fff; }
.btn-primary:hover { background: var(--brand-800); }
.btn-primary:active { background: var(--brand-900); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--ink-3); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ---- hero ---- */
.hero { padding-block: var(--s8) var(--s7); }
.hero-grid { display: grid; gap: var(--s7); align-items: start; }
.hero h1 { margin-bottom: var(--s4); }
.hero .lede { font-size: var(--t-md); color: var(--ink-2); margin-bottom: var(--s5); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s5); font-size: var(--t-sm); color: var(--ink-3); }
.hero-meta b { color: var(--ink-2); font-weight: 600; }

/* ---- live proof panel ---- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); background: var(--bg-sunken); }
.panel-head .label { font: 600 var(--t-xs)/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.panel-body { padding: var(--s4); }
label.field { display: block; font: 600 var(--t-sm)/1.4 ui-sans-serif, system-ui, sans-serif; color: var(--ink-2); margin-bottom: var(--s2); }
textarea, input[type=text] {
  width: 100%; font: var(--t-sm)/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 6px; padding: var(--s3);
  resize: vertical;
}
pre.out {
  margin: 0; padding: var(--s4); background: #0F172A; color: #E6EAF2;
  border-radius: 6px; font-size: var(--t-sm); line-height: 1.6;
  overflow-x: auto; /* code scrolls INSIDE its container (29 §Mobile) */
  max-height: 420px; overflow-y: auto;
}
pre.out .k { color: #93C5FD; } pre.out .s { color: #86EFAC; } pre.out .n { color: #FDBA74; }
.hint { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s3); }

/* status chips — icon + text, never colour alone */
.chip { display: inline-flex; align-items: center; align-self: start; gap: 6px; padding: 3px 9px; border-radius: 999px;
        font: 600 var(--t-xs)/1.5 ui-sans-serif, system-ui, sans-serif; border: 1px solid; }
.chip-ok   { color: var(--ok);   background: var(--ok-bg);   border-color: var(--ok); }
.chip-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }
.chip-crit { color: var(--crit); background: var(--crit-bg); border-color: var(--crit); }
.chip-info { color: var(--brand-800); background: var(--brand-50); border-color: var(--brand-300); }

/* ---- generic cards ---- */
.grid { display: grid; gap: var(--s4); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s5); }
.card h3 { margin-bottom: var(--s2); }
.card p { color: var(--ink-2); font-size: var(--t-sm); }
.steps { counter-reset: step; display: grid; gap: var(--s4); }
.steps li { counter-increment: step; list-style: none; display: grid; grid-template-columns: 32px 1fr; gap: var(--s4); align-items: start; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; align-self: start;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-50); color: var(--brand-800);
  border: 1px solid var(--brand-300);
  font: 600 var(--t-sm)/1 ui-sans-serif, system-ui, sans-serif;
}
.steps ul { margin: 0; padding: 0; }

/* ---- endpoints ---- */
.ep { display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); align-items: baseline;
      padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.ep:last-child { border-bottom: 0; }
.ep .m { font: 600 var(--t-xs)/1.4 ui-monospace, monospace; color: var(--brand-800); background: var(--brand-50);
         border: 1px solid var(--brand-300); border-radius: 4px; padding: 2px 6px; text-align: center; }
.ep code { font-size: var(--t-sm); color: var(--ink); word-break: break-all; }
.ep .d { grid-column: 2; font-size: var(--t-sm); color: var(--ink-3); }

/* ---- pricing ---- */
.tiers { display: grid; gap: var(--s4); }
.tier { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.tier.featured { border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600); }
.tier .name { font-weight: 700; font-size: var(--t-md); }
.tier .price { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tier .price span { font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
/* NOT a grid. `<li><strong>250</strong> monitored entities included</li>` is
   three grid items — the ::before marker, the <strong>, and the trailing text
   node — so with two tracks the text wrapped into the 18px marker column and
   rendered one character per line. A positioned marker keeps the whole li a
   single inline flow, however many elements the copy happens to contain. */
.tier ul li { position: relative; padding-left: 26px; }
.tier ul li::before { content: "✓"; position: absolute; left: 0; top: 0;
                      color: var(--ok); font-weight: 700; }
.tier .btn { margin-top: auto; }
.tier-note { font-size: var(--t-xs); color: var(--ink-3); }

/* ---- faq ---- */
details.faq { border-bottom: 1px solid var(--border); }
details.faq summary { cursor: pointer; padding: var(--s4) 0; font-weight: 600; font-size: var(--t-md); list-style: none; display: flex; gap: var(--s3); align-items: center; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; margin-left: auto; color: var(--ink-3); font-weight: 400; font-size: var(--t-lg); }
details.faq[open] summary::after { content: "−"; }
details.faq .body { padding-bottom: var(--s4); color: var(--ink-2); }

footer.site { background: var(--bg-sunken); border-top: 1px solid var(--border); padding-block: var(--s7); }
footer.site .cols { display: grid; gap: var(--s5); }
footer.site a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); display: block; padding: 3px 0; }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
footer.site .legal { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border); font-size: var(--t-xs); color: var(--ink-3); }

/* ---- responsive: 320 / 375 / 390 / 430 → 1280 / 1440 / 1920 ---- */
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .tiers  { grid-template-columns: repeat(2, 1fr); }
  footer.site .cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
@media (min-width: 1120px) { .tiers { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 899px) {
  header.site nav a.nav-hide { display: none; } /* collapse cleanly, keep the CTA reachable */
  section { padding-block: var(--s7); }
}
@media (max-width: 380px) { :root { --s5: 16px; } .btn { padding-inline: var(--s4); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


/* ---- stretch, wrap and overflow (29 §Mobile) ------------------------------
   A grid or flex child stretches to its track unless told otherwise. With
   border-radius:999px that turns a small pill into a tall ellipse — which is
   exactly what the eyebrow tags and step markers were rendering as. Anything
   pill-shaped that sits in a track gets align-self:start.

   Wide content is the other half: tables and code will not reflow, so they get
   their own scroll container and the PAGE never scrolls sideways. Verified with
   a headless probe that reports every element wider than the viewport at
   320/375/390/430. */
.cost .tag, .chain .step, .badges .chip, .tier .chip { align-self: start; }

.scroller, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroller > table, .table-scroll > table { min-width: 100%; border-collapse: collapse; }

/* A long unbroken token — a URL, a hash, an sku — must not set the page width.
   `break-word`, NOT `anywhere`: `anywhere` also shrinks the box's min-content
   width, so inside a `1fr` grid column it collapses the track to one character
   and breaks ordinary prose down the page a letter at a time. `break-word`
   breaks a long token only when it would actually overflow, and leaves
   intrinsic sizing alone. */
p, li, td, dd, .desc, .hint, .tier-note, code { overflow-wrap: break-word; }

@media (max-width: 420px) {
  /* The header must still fit on one line at the narrowest widths: shrink the
     gaps and the CTA rather than letting either wrap and clip. */
  header.site .wrap { gap: var(--s3); padding-inline: var(--s4); }
  header.site nav   { gap: var(--s3); }
  .brand            { font-size: var(--t-base); }
  header.site nav .btn { padding-inline: var(--s3); font-size: 13px; }
}

@media (max-width: 400px) {
  /* Below 400 the brand, a text link and the CTA no longer fit together and the
     button pushed 26px past the edge at 320. The CTA is the reason the header
     exists, so the remaining text links go and it keeps its full label. */
  header.site nav a:not(.btn) { display: none; }
  header.site nav .btn { padding-inline: var(--s4); }
}