/* Copyright 2026 Elysian Intelligence Consultants LLC. All Rights Reserved. */

/* Editorial bands with per-API accents (owner decision, 19 Oct 2026; DESIGN.md "Public site"). The page moves through
   full-width bands: Night for the hero and footer, Abyss for the plates, solid Elysian Teal for the facts. Each API
   keeps one accent hue on its plate, its page and its codes. Teal stays the colour of every action; coral on its own
   still means only an error, and an error always says so in words. */

@font-face { font-family: "Jost"; src: url("/fonts/Jost-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/Jost-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/Jost-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/Jost-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --night: #030e10;
  --abyss: #061b1e;
  --layer: #0a2326;
  --raised: #0c2629;
  --lift: #143539;
  --tint: #0f3236;
  --tint-band: #0e3034;
  --line: #1c3b3f;
  --line-strong: #5c8d92;
  --ink: #f4faf9;
  --muted: #a8c1c2;
  --teal: #2cb0ac;
  --teal-hover: #3cc4c0;
  --cyan: #2fe6e3;
  --critical: #f2806f;
  --on-teal: #021517;
  /* The teal band. Accent hues never sit on it. */
  --band: #2cb0ac;
  --band-ink: #021517;
  --band-muted: #0b3b3c;
  --band-line: #239a96;
  /* One accent per API, from the brand's teal-to-coral family, and the dark wash of each for its page head. HomeSignal's
     lavender is outside the family on purpose: the family has no free hue left that is clearly apart from the others. */
  --hue-cve: #f2806f;
  --hue-tradecheck: #e9b872;
  --hue-labellink: #74d8a4;
  --hue-skillscan: #2fe6e3;
  --hue-edgar: #7fb8ef;
  --hue-housing: #c3a5f5;
  --hue-fire: #f39cc6;
  --wash-cve: #282f2f;
  --wash-tradecheck: #273630;
  --wash-labellink: #183b36;
  --wash-skillscan: #0f3c3f;
  --wash-edgar: #193640;
  --wash-housing: #272a45;
  --wash-fire: #28333b;

  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --display: "Poppins", "Futura", system-ui, sans-serif;
  /* Code is data here, so the system monospace is honest, and it costs no download. */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 40px;
  --s6: 64px;
  --gutter: var(--s5);
  --radius-sm: 2px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { background: var(--abyss); color-scheme: dark; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--abyss);
  color: var(--ink);
  font: 400 16px/26px var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
::selection { background: var(--teal); color: var(--on-teal); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
* { scrollbar-color: var(--line-strong) var(--abyss); scrollbar-width: thin; }
a { color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--teal-hover); }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: 0.875em; }
p code, li code { overflow-wrap: anywhere; }
strong { font-weight: 600; }

.skip { position: absolute; left: var(--s3); top: -48px; z-index: 20; padding: var(--s2) var(--s3); background: var(--teal); color: var(--on-teal); }
.skip:focus { top: var(--s2); }

/* Shell */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--s5);
  height: 64px; padding: 0 var(--gutter);
  background: var(--abyss);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand img { height: 30px; width: auto; }
.wordmark { font-size: 16px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.wordmark b { font: 700 16px/1 var(--display); letter-spacing: 0.04em; }
.wordmark span { font-weight: 300; letter-spacing: 0.14em; }
.topbar nav { height: 100%; }
.topbar nav ul { display: flex; gap: var(--s4); height: 100%; }
.topbar nav a {
  display: flex; align-items: center; height: 100%;
  color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap;
  box-shadow: inset 0 -2px transparent;
  transition: color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.topbar nav a:hover { color: var(--ink); }
.topbar nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px var(--teal); }
.nav-cta { margin-left: auto; }

main { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* Controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 44px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink);
  font: 500 15px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.btn:hover { background: var(--raised); border-color: var(--teal); color: var(--ink); }
.btn.primary { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.btn.primary:hover { background: var(--teal-hover); border-color: var(--teal-hover); color: var(--on-teal); }
.btn.danger { border-color: var(--critical); color: var(--critical); }
.btn.danger:hover { background: var(--critical); color: var(--night); }
.btn:disabled { opacity: 0.5; cursor: progress; }
.topbar .btn { height: 36px; padding: 0 14px; font-size: 14px; }

label, legend { display: block; margin-bottom: 6px; color: var(--muted); font-size: 14px; line-height: 20px; }
input {
  width: 100%; height: 44px; padding: 0 12px;
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  caret-color: var(--teal);
  transition: border-color 160ms var(--ease-out);
}
input:hover { border-color: var(--teal); }
input[aria-invalid="true"] { border-color: var(--critical); }
input::placeholder { color: var(--muted); opacity: 1; }
.field-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.field-row input { flex: 1 1 220px; min-width: 0; }
.field-row input[type="number"] { flex: 0 1 160px; }

/* A check box with its label beside it; the global input rule above is for text fields. */
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s2); align-items: start; }
.consent input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; padding: 0; accent-color: var(--teal); cursor: pointer; }
.consent label { margin: 0; color: var(--ink); font-size: 15px; line-height: 24px; cursor: pointer; }
.consent .note { grid-column: 2; margin-top: 4px; }

.note { color: var(--muted); font-size: 14px; line-height: 22px; }
.note:empty { display: none; }
.error { padding: 10px 12px; border: 1px solid var(--critical); color: var(--critical); font-size: 15px; line-height: 22px; }
.error[hidden] { display: none; }

/* Type */
h1 {
  font: 700 clamp(32px, 4.4vw, 50px) / 1.08 var(--display);
  letter-spacing: -0.005em; text-transform: uppercase; text-wrap: balance;
}
h1 span { display: block; }
.descriptor { color: var(--muted); font-weight: 300; font-size: 19px; line-height: 30px; max-width: 60ch; }
.code-tag { color: var(--muted); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; }
.section-title { font-size: 20px; font-weight: 500; line-height: 28px; margin-bottom: var(--s3); }
.plate-name { font: 700 26px/30px var(--display); letter-spacing: -0.005em; text-transform: uppercase; }
.plate-name a { color: var(--ink); text-decoration: none; }
.plate-name a:hover { color: var(--teal); }

/* Code */
.code {
  margin: 0; padding: var(--s3);
  background: var(--raised); border: 1px solid var(--line);
  color: var(--ink); font: 13px/21px var(--mono);
  overflow-x: auto; white-space: pre; tab-size: 2;
}
.code code { font-size: inherit; }

/* Hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6);
  padding: var(--s6) 0; border-bottom: 1px solid var(--line);
}
.hero-copy { display: flex; flex-direction: column; gap: var(--s4); }
.signup { display: flex; flex-direction: column; gap: var(--s2); max-width: 520px; margin-top: var(--s2); }
.signup[hidden] { display: none; }
.signup .btn { align-self: flex-start; }
.specimen { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.specimen figcaption { font-size: 14px; color: var(--muted); }
.specimen .json { max-height: 380px; overflow-y: auto; }

/* The issued key: the one thing on the site the visitor must act on, so it carries the cyan. */
.issued { display: flex; flex-direction: column; gap: var(--s3); max-width: 640px; padding: var(--s4); border: 1px solid var(--cyan); }
.issued[hidden] { display: none; }
.issued h2 { font-size: 20px; font-weight: 600; }
.issued .store strong { color: var(--cyan); }
.key-row { display: flex; gap: var(--s2); align-items: stretch; }
.key { flex: 1; min-width: 0; padding: 11px 12px; background: var(--raised); border: 1px solid var(--line-strong); color: var(--cyan); font-size: 15px; overflow-wrap: anywhere; user-select: all; }

/* Plates and callouts */
.guide { padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
/* Four columns at most: five or more squeezed the plate text. Seven APIs then read four on top, three below. */
.plates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.plate { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s4) var(--s5); }
.plate .descriptor { font-size: 16px; line-height: 25px; }
.plate .more { margin-top: auto; padding-top: var(--s2); font-weight: 500; }
.guide-foot { margin-top: var(--s3); }

.callouts { counter-reset: callout; }
.callouts li {
  counter-increment: callout;
  position: relative;
  padding: 12px 0 12px 24px; border-top: 1px solid var(--line);
  font-size: 15px; line-height: 23px;
}
/* Positioned, not a grid column: a callout mixes text and inline elements, and each would become its own grid cell. */
.callouts li::before { content: counter(callout); position: absolute; left: 0; color: var(--teal); font-weight: 600; }
.callouts.wide { max-width: 80ch; }
.callouts.wide li { font-size: 16px; line-height: 26px; padding: 16px 0 16px 28px; }
.live { color: var(--ink); font-weight: 500; }
.live.failed { color: var(--critical); }

.facts, .price-line { padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
.price-line p { max-width: 80ch; font-size: 17px; line-height: 28px; }

/* Page heads and narrow pages */
.page-head { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6) 0 var(--s5); }
.narrow { display: flex; flex-direction: column; gap: var(--s4); max-width: 720px; padding: var(--s6) 0; }
.narrow .signup { max-width: none; }

/* Pricing */
.pricing { margin-bottom: var(--s2); }
.pricing .plate { gap: var(--s3); }
.price { font-size: 17px; color: var(--muted); }
.price b { color: var(--ink); font: 700 34px/40px var(--display); margin-right: 6px; }
.pricing .plate .btn { margin-top: auto; align-self: flex-start; }

/* Buy */
.buy { display: flex; flex-direction: column; gap: var(--s2); }
.buy fieldset { margin: var(--s4) 0 0; padding: var(--s4) 0 0; border: 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s3); }
.buy legend { float: left; width: 100%; margin: 0; color: var(--ink); font-size: 20px; line-height: 28px; font-weight: 500; }
.buy legend + * { clear: left; }
.buy fieldset .btn { align-self: flex-start; }

/* API pages */
.api { display: flex; flex-direction: column; gap: var(--s6); padding: var(--s6) 0; }
.api-head { display: flex; flex-direction: column; gap: var(--s3); }
.lede { max-width: 72ch; font-size: 17px; line-height: 28px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.api-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s6); }
.api-grid section > .section-title:not(:first-child) { margin-top: var(--s5); }
.example { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.notice { max-width: 80ch; padding: var(--s4); border: 1px solid var(--line-strong); }
.notice h2 { font-size: 18px; font-weight: 600; margin-bottom: var(--s2); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 23px; }
th { text-align: left; color: var(--muted); font-weight: 500; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); }
td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td code { white-space: nowrap; }

/* Docs and legal */
.doc { display: flex; flex-direction: column; gap: var(--s3); max-width: 820px; padding: var(--s6) 0; }
.doc > p, .doc > .callouts { max-width: 72ch; }
.doc .section-title { margin: var(--s5) 0 0; }
.soon { max-width: 72ch; padding: 12px var(--s3); border: 1px solid var(--line-strong); background: var(--raised); }
/* Reserves the widget's height, so the form does not jump when it loads. */
.cf-turnstile { min-height: 65px; }
.terms .version { color: var(--muted); font-size: 15px; }
.terms .toc ol { columns: 2 240px; column-gap: var(--s5); padding-left: 1.6em; }
.terms .toc li { padding: 2px 0; break-inside: avoid; }
.terms p, .terms .terms-list, .terms .definitions { max-width: 72ch; }
.terms .subclause { padding-left: var(--s3); }
.terms .conspicuous { font-weight: 600; }
.terms .terms-list { list-style: none; padding-left: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.terms .definitions { display: flex; flex-direction: column; gap: var(--s2); }
.terms .definitions dt { display: inline; font-weight: 600; }
.terms .definitions dd { display: inline; margin: 0; }
.terms [id] { scroll-margin-top: 80px; }
.terms .legal-table { max-width: 72ch; }
.terms th, .terms td { padding: 10px 16px 10px 0; }
.terms th { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line-strong); }
.terms .postal { font-style: normal; }
.recovery { display: flex; flex-direction: column; gap: var(--s2); max-width: 72ch; }
.limits { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5) 0; }
.notices { display: flex; flex-direction: column; gap: var(--s3); max-width: 80ch; }
.notices h3, .notices h4, .doc h3 { font-size: 17px; font-weight: 600; line-height: 26px; margin-top: var(--s3); }
.notices blockquote { margin: 0; padding: var(--s2) var(--s3); border-left: 3px solid var(--teal); background: var(--raised); display: flex; flex-direction: column; gap: var(--s2); }
.code.license { white-space: pre-wrap; }
caption { text-align: left; font-weight: 600; padding: var(--s3) 0 var(--s2); color: var(--ink); }
.legal address { font-style: normal; margin-bottom: var(--s2); }

/* Footer */
.footer {
  display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--s5);
  max-width: 1240px; margin: var(--s6) auto 0; padding: var(--s5) var(--gutter);
  border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 22px;
}
.footer h2 { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: var(--s2); }
.footer li { padding: 3px 0; }
/* 24px tall at least (WCAG 2.2 target size): an inline link is only as tall as its text line. */
.footer a:not(.brand), td a { display: inline-block; min-height: 24px; line-height: 24px; }
.footer a:not(.brand) { color: var(--muted); text-decoration: none; }
.footer a:not(.brand):hover { color: var(--ink); text-decoration: underline; }
.footer-brand { display: flex; flex-direction: column; gap: var(--s3); }
.footer-brand .brand { color: var(--ink); }
.legal { grid-column: 1 / -1; padding-top: var(--s4); border-top: 1px solid var(--line); }

/* Bands. A solid band runs the full width: a spread box-shadow paints it past the content column and clip-path trims
   it to the section's height. The API head needs a hue edge as well, so it uses a viewport-wide pseudo-element, and the
   body clips the sideways overflow (clip, not hidden, keeps the sticky top bar working). */
body { overflow-x: clip; }
.topbar {
  border-bottom: 0;
  background:
    linear-gradient(90deg, var(--hue-cve) 0 14.29%, var(--hue-tradecheck) 14.29% 28.57%, var(--hue-labellink) 28.57% 42.86%, var(--hue-skillscan) 42.86% 57.14%, var(--hue-edgar) 57.14% 71.43%, var(--hue-housing) 71.43% 85.71%, var(--hue-fire) 85.71%)
    bottom / 100% 2px no-repeat,
    var(--night);
}
.hero, .page-head, .facts, .price-line, .footer { box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); background: var(--bg); border-bottom: 0; }
.hero, .page-head, .footer { --bg: var(--night); }
.price-line { --bg: var(--tint-band); }
.footer { margin-top: 0; border-top: 0; }
.footer .legal { border-top-color: var(--line); }

/* The teal band: dark type, dark numerals and links, a dark focus ring, a Night primary button. */
.facts, .pricing .plate:first-child { --bg: var(--band); background: var(--band); color: var(--band-ink); }
.facts :focus-visible, .pricing .plate:first-child :focus-visible { outline-color: var(--band-ink); }
.facts a { color: var(--band-ink); }
.facts .callouts li, .pricing .plate:first-child .callouts li { border-top-color: var(--band-line); }
.facts .callouts li::before, .pricing .plate:first-child .callouts li::before { color: var(--band-muted); }
.pricing .plate:first-child .price { color: var(--band-muted); }
.pricing .plate:first-child .price b { color: var(--band-ink); }
.pricing .plate:first-child .btn.primary { background: var(--night); border-color: var(--night); color: var(--ink); }
.pricing .plate:first-child .btn.primary:hover { background: var(--abyss); border-color: var(--abyss); }

/* Per-API accents. --hue and --wash are set once per API, so every rule below reads the colour from the nearest data-api. */
[data-api="cve"], .specimen { --hue: var(--hue-cve); --wash: var(--wash-cve); }
[data-api="tradecheck"] { --hue: var(--hue-tradecheck); --wash: var(--wash-tradecheck); }
[data-api="labellink"] { --hue: var(--hue-labellink); --wash: var(--wash-labellink); }
[data-api="skillscan"] { --hue: var(--hue-skillscan); --wash: var(--wash-skillscan); }
[data-api="edgar"] { --hue: var(--hue-edgar); --wash: var(--wash-edgar); }
[data-api="housing"] { --hue: var(--hue-housing); --wash: var(--wash-housing); }
[data-api="fire"] { --hue: var(--hue-fire); --wash: var(--wash-fire); }

.plate {
  background: linear-gradient(180deg, var(--wash, var(--layer)), var(--layer) 160px);
  box-shadow: inset 0 2px var(--hue, var(--teal));
  transition: background-color 160ms var(--ease-out);
}
.plate[data-api]:hover { background: var(--lift); }
.plate .code-tag, .plate .callouts li::before, .plate .more, .plate-name a:hover { color: var(--hue, var(--teal)); }
.plate .more:hover { color: var(--ink); }
.pricing .plate:nth-child(2) { --hue: var(--teal); }
.pricing .plate:nth-child(3) { --hue: var(--teal-hover); }
.pricing .plate:nth-child(4) { --hue: var(--cyan); }
.pricing .plate:first-child { box-shadow: none; }

.api-head { position: relative; isolation: isolate; }
.api-head::before {
  content: ""; position: absolute; z-index: -1;
  inset: calc(-1 * var(--s6)) calc(50% - 50vw) calc(-1 * var(--s5));
  background: linear-gradient(var(--hue) 0 2px, var(--wash) 2px);
}
.api .code-tag, .api .callouts li::before { color: var(--hue); }

.json .k { color: var(--teal); }
.json .n, .json .l { color: var(--hue, var(--cyan)); }
.notice { background: var(--layer); }

@media (max-width: 1100px) {
  .hero, .api-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .topbar { flex-wrap: wrap; height: auto; gap: 0 var(--s3); padding-top: 10px; }
  .topbar nav { order: 3; width: 100%; height: 44px; overflow-x: auto; }
  .topbar nav ul { gap: var(--s4); }
  .hero, .guide, .facts, .price-line, .api, .narrow, .doc { padding-block: var(--s5); }
  .api { gap: var(--s5); }
  .descriptor { font-size: 17px; line-height: 27px; }
  .field-row { flex-wrap: wrap; }
  .signup .btn, .buy .field-row .btn { flex: 1 1 auto; }
  .key-row { flex-direction: column; }
  .plates { grid-template-columns: minmax(0, 1fr); }
  .plate { padding: var(--s4) var(--s3) var(--s5); }
  .footer { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .footer-brand { grid-column: 1 / -1; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  td { border: 0; padding: 2px 0; }
  td code { white-space: normal; overflow-wrap: anywhere; }
  .terms td { padding: 4px 0; }
  .terms td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
}

@media (max-width: 380px) {
  .wordmark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}