/* Lanelytic site design: an analytical, official-statistics look. Navy and slate on a cool white,
   hairline borders over shadows, small corners, and every figure and HS code in a monospaced face so
   columns line up. Covers the site frame (top bar, search palette, footer), the home page, the
   header and cards of the data pages, forms and simple pages. Market pages load this after
   brief.css, which holds the data components (tables, charts, key figures) shared with the briefs. */

/* Inter and JetBrains Mono, served from the site (Latin subset, variable weight; licences in /fonts). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f8f9ff;
  --surface: #ffffff;
  --surface-2: #eff4ff;
  --surface-3: #e5eeff;
  --chip: #dce9ff;
  --chip-ink: #1a4682;
  --ink: #0b1c30;
  --ink-2: #434750;
  --ink-3: #66707f;
  --head: #002958;
  --line: #e3e8f1;
  --line-2: #cbd5e1;
  --accent: #006398;
  --accent-strong: #004b73;
  --accent-soft: #cce5ff;
  --primary: #0f3f7a;
  --primary-hover: #002958;
  --primary-ink: #ffffff;
  --navy: #002958;
  --navy-2: #0f3f7a;
  --navy-ink: #eaf1ff;
  --navy-ink-2: #a9c4ee;
  --navy-line: rgb(255 255 255 / 0.14);
  --signal: #5bb8fe;
  --good: #15803d;
  --good-bg: #dcfce7;
  --bad: #b91c1c;
  --bad-bg: #fee2e2;
  --bar: #c5d3ea;
  --bar-latest: #0f3f7a;
  --grid: #e9eef6;
  --axis: #c3c6d1;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-all: #898781;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05);
  --shadow: 0 2px 4px -1px rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.04);
  --shadow-xl: 0 24px 48px -12px rgb(15 23 42 / 0.28);
  --radius: 8px;
  --radius-sm: 4px;
  --font: Inter, "Inter var", InterVariable, ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --nav-h: 64px;
  --tabs-h: 48px;
  color-scheme: light;
  interpolate-size: allow-keywords;
}

/* Dark: the device's setting unless the visitor chose light, or the visitor's choice of dark
   (site.js sets data-theme on <html>). :where() keeps the first rule as weak as plain :root. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --bg: #09111f;
    --surface: #0f1a2c;
    --surface-2: #14223a;
    --surface-3: #1a2b47;
    --chip: #1d3357;
    --chip-ink: #cfe0ff;
    --ink: #e6edf9;
    --ink-2: #b4c0d4;
    --ink-3: #8f9bb1;
    --head: #dce7ff;
    --line: #1f2e47;
    --line-2: #2c3f5f;
    --accent: #93ccff;
    --accent-strong: #cce5ff;
    --accent-soft: #12304f;
    --primary: #aac7ff;
    --primary-hover: #d6e3ff;
    --primary-ink: #002958;
    --navy: #0c2246;
    --navy-2: #143461;
    --navy-ink: #eaf1ff;
    --navy-ink-2: #aac7ff;
    --navy-line: rgb(255 255 255 / 0.12);
    --signal: #7cc6ff;
    --good: #4ade80;
    --good-bg: #0f2e1d;
    --bad: #fca5a5;
    --bad-bg: #3a1618;
    --bar: #2a3b58;
    --bar-latest: #93ccff;
    --grid: #1b2940;
    --axis: #34476a;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 2px 4px -1px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.45);
    --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #09111f;
  --surface: #0f1a2c;
  --surface-2: #14223a;
  --surface-3: #1a2b47;
  --chip: #1d3357;
  --chip-ink: #cfe0ff;
  --ink: #e6edf9;
  --ink-2: #b4c0d4;
  --ink-3: #8f9bb1;
  --head: #dce7ff;
  --line: #1f2e47;
  --line-2: #2c3f5f;
  --accent: #93ccff;
  --accent-strong: #cce5ff;
  --accent-soft: #12304f;
  --primary: #aac7ff;
  --primary-hover: #d6e3ff;
  --primary-ink: #002958;
  --navy: #0c2246;
  --navy-2: #143461;
  --navy-ink: #eaf1ff;
  --navy-ink-2: #aac7ff;
  --navy-line: rgb(255 255 255 / 0.12);
  --signal: #7cc6ff;
  --good: #4ade80;
  --good-bg: #0f2e1d;
  --bad: #fca5a5;
  --bad-bg: #3a1618;
  --bar: #2a3b58;
  --bar-latest: #93ccff;
  --grid: #1b2940;
  --axis: #34476a;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 2px 4px -1px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.45);
  --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body.site {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  font-feature-settings: "cv11", "ss01";
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Inter's x-height (0.546 of the size). Fallback fonts shown before Inter arrives, and the
     monospaced figures inside sentences and table rows, are scaled to it, so text doesn't jump
     when the font swaps and figures read as the same size as the words around them. */
  font-size-adjust: 0.546;
}

.site a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.site a:hover {
  color: var(--accent-strong);
}

.site :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.site h1,
.site h2,
.site h3 {
  color: var(--head);
}

.site h1 {
  margin: 0;
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.site h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.site h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.container {
  width: min(1536px, 100% - 80px);
  margin-inline: auto;
}

.container.narrow {
  width: min(820px, 100% - 48px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
}

.skip:focus {
  left: 12px;
  top: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

kbd {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--ink-3);
  font: 500 0.6875rem/1.6 var(--mono);
  letter-spacing: 0.02em;
}

/* Small capitals over a section: the design's label style. */
.kicker {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* An HS code, a code-like tag or a data label. */
.code-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: var(--chip);
  color: var(--chip-ink);
  font: 500 0.8125rem/1.6 var(--mono);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Pill with a status dot: launch, source and update notes. */
.pill,
.source-pill,
.launch-pill,
.provenance-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 3px 12px;
  border-radius: 999px;
  font: 500 0.6875rem/1.6 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pill > span:first-child,
.source-pill > span,
.launch-pill > span,
.provenance-tag > span,
.cta-kicker > span,
.ribbon .dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Brand ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--head);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
}

.site a.brand,
.site a.brand:hover {
  color: var(--head);
}

.brand svg {
  width: 28px;
  height: 28px;
}

.logo-bg {
  fill: #0f3f7a;
}

.logo-line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-text {
  display: grid;
  line-height: 1.2;
}

.brand-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-sub {
  display: none;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
}

@media (min-width: 1440px) {
  .brand-sub {
    display: block;
  }
}

.nav-sample {
  padding: 0 6px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site a.nav-sample:hover {
  color: var(--head);
}

.brand-tag {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--ink-2);
  font: 500 0.625rem/1.6 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.launch-pill {
  background: var(--accent-soft);
  color: var(--head);
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--primary);
  box-shadow: var(--shadow-sm);
  color: var(--primary-ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.site a.button,
.site a.button:hover {
  color: var(--primary-ink);
}

.button:hover {
  background: var(--primary-hover);
}

.button svg {
  width: 16px;
  height: 16px;
}

.button.secondary {
  border-color: var(--line-2);
  background: var(--surface);
}

.site a.button.secondary,
.site a.button.secondary:hover,
.button.secondary {
  color: var(--ink);
}

.button.secondary:hover {
  border-color: var(--ink-3);
  background: var(--surface-2);
}

/* On navy cards: a white button. */
.button.light {
  background: #ffffff;
  color: #002958;
}

.site a.button.light,
.site a.button.light:hover {
  color: #002958;
}

.button.light:hover {
  background: var(--accent-soft);
}

.button.small {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.875rem;
}

.button.large {
  min-height: 48px;
  padding: 12px 22px;
  font-size: 1rem;
}

/* ---------- Top bar ---------- */

.nav-shell {
  position: sticky;
  top: 0;
  z-index: 40;
  container-type: scroll-state;
  container-name: nav;
}

.nav-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}

/* A soft shadow once content scrolls under the bar. */
@container nav scroll-state(stuck: top) {
  .nav {
    filter: drop-shadow(0 1px 8px rgb(15 23 42 / 0.06));
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(1536px, 100% - 80px);
  height: var(--nav-h);
  margin-inline: auto;
}

.nav-links {
  display: flex;
  align-self: stretch;
  gap: 2px;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.site .nav-links a:hover {
  color: var(--head);
}

.site .nav-links a[aria-current="page"] {
  border-bottom-color: var(--primary);
  color: var(--head);
  font-weight: 600;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 210px;
  height: 36px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-3);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.search-trigger:hover {
  border-color: var(--ink-3);
}

.search-trigger svg {
  width: 16px;
  height: 16px;
}

.search-trigger kbd {
  margin-left: auto;
}

.nav-cta {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.875rem;
}

.menu-button,
.theme-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.menu-button:hover,
.theme-toggle:hover {
  border-color: var(--ink-3);
  color: var(--head);
}

.menu-button[hidden],
.mobile-menu[hidden],
.theme-toggle[hidden] {
  display: none;
}

.menu-button svg {
  width: 20px;
  height: 20px;
}

.mobile-menu {
  position: relative;
  display: grid;
  gap: 12px;
  width: calc(100% - 32px);
  margin: 0 auto;
  padding: 4px 0 18px;
}

.mobile-menu nav {
  display: grid;
}

.mobile-menu nav a {
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.site .mobile-menu nav a[aria-current="page"] {
  color: var(--head);
  font-weight: 650;
}

@media (max-width: 1439px) {
  .launch-pill,
  .nav-sample {
    display: none;
  }
}

@media (max-width: 1100px) {
  .container,
  .nav {
    width: calc(100% - 48px);
  }
}

@media (max-width: 1279px) {
  .search-trigger {
    min-width: 0;
    width: 36px;
    padding: 0;
    justify-content: center;
  }

  .search-trigger span,
  .search-trigger kbd {
    display: none;
  }
}

@media (min-width: 901px) {
  .menu-button,
  .mobile-menu {
    display: none;
  }
}

@media (max-width: 900px) {
  .nav-links,
  .nav-cta,
  .brand-tag {
    display: none;
  }

  .nav {
    width: calc(100% - 32px);
    gap: 12px;
  }

  .container,
  .container.narrow {
    width: calc(100% - 32px);
  }
}

/* ---------- Search: palette and suggestions ---------- */

.palette {
  width: min(640px, calc(100% - 32px));
  max-height: min(560px, calc(100dvh - 120px));
  margin: 12vh auto auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transform: translateY(-6px);
  transition-property: opacity, transform, display, overlay;
  transition-duration: 0.18s;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;
}

.palette[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

@starting-style {
  .palette[open] {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.palette:modal {
  overscroll-behavior: contain;
}

.palette::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgb(11 28 48 / 0);
  transition-property: background-color, display, overlay;
  transition-duration: 0.18s;
  transition-behavior: allow-discrete;
}

.palette[open]::backdrop {
  background: rgb(11 28 48 / 0.45);
}

@starting-style {
  .palette[open]::backdrop {
    background: rgb(11 28 48 / 0);
  }
}

.palette-form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.palette-form svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.palette-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  outline: none;
}

.palette-form input::placeholder {
  color: var(--ink-3);
}

/* The palette is modal and this field is all it holds, so the caret marks focus; Esc clears and closes. */
.site .palette-form input:focus-visible {
  outline: none;
}

.palette-form input::-webkit-search-cancel-button {
  appearance: none;
}

.palette-results {
  flex: 1;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
}

.palette-results:empty {
  display: none;
}

.palette-results a,
.quick-results a {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
}

.site .palette-results a,
.site .quick-results a {
  color: var(--ink);
}

.palette-results a:hover,
.palette-results a:focus,
.quick-results a:hover,
.quick-results a:focus {
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 var(--primary);
  outline: none;
}

.palette-results strong,
.quick-results strong {
  color: var(--head);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.palette-results span,
.quick-results span,
.quick-results .quick-note,
.palette-results .quick-note {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.quick-note {
  padding: 10px 12px;
}

.site .quick-all {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
}

.palette-hint {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.quick-search {
  position: relative;
  display: flex;
  align-items: center;
}

.quick-search > svg {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  pointer-events: none;
}

.quick-search input {
  width: 100%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.quick-search input::placeholder {
  color: var(--ink-3);
}

.quick-results {
  position: fixed;
  z-index: 70;
  max-height: min(420px, 70vh);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.quick-results[hidden] {
  display: none;
}

/* ---------- Home ---------- */

/* The launch ribbon under the top bar. */
.ribbon {
  background: var(--accent-soft);
  color: var(--head);
}

.ribbon-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  padding: 9px 0;
  font-size: 0.8125rem;
}

.ribbon p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.ribbon .dot {
  display: inline-block;
}

.ribbon-meta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero {
  padding: 48px 0 64px;
  background: linear-gradient(180deg, var(--bg), var(--surface-2) 55%, var(--bg));
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}

.hero-pills .pill {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink-2);
}

.hero-pills .pill.blue {
  background: var(--chip);
  box-shadow: none;
  color: var(--chip-ink);
  text-transform: none;
  letter-spacing: 0.01em;
}

.hero-pills .pill.blue svg {
  width: 14px;
  height: 14px;
}

.site .hero h1 {
  max-width: 1040px;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  text-wrap: balance;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.hero h1 .underline {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
}

.lede {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.65;
}

/* The search command bar. */
.search-card {
  max-width: 900px;
  margin: 30px 0 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.hero-search {
  gap: 8px;
}

.hero-search input {
  min-height: 52px;
  padding: 12px 14px 12px 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 1.0625rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hero-search input:focus {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
}

.hero-search > svg {
  color: var(--accent);
}

.hero-search .button {
  flex: none;
  min-height: 52px;
  padding-inline: 22px;
  font-size: 1rem;
}

.search-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 10px 4px 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.search-foot p {
  margin: 0;
}

.search-foot .mono {
  font-family: var(--mono);
  font-size: 0.75rem;
}

.site .search-foot a {
  font-weight: 600;
  text-decoration: none;
}

/* Popular products, each with its HS code. */
.lanes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 900px;
  margin: 18px 0 0;
}

.lanes-label {
  margin-right: 4px;
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lanes a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 0.875rem;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.site .lanes a {
  color: var(--ink);
}

.site .lanes a:hover {
  border-color: var(--accent);
  color: var(--head);
}

.lanes code {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--chip);
  color: var(--chip-ink);
  font: 500 0.6875rem/1.6 var(--mono);
}

/* Coverage: the size of the data in four figures. */
.coverage {
  border-block: 1px solid var(--line);
  background: var(--surface);
}

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.coverage-grid div {
  display: grid;
  gap: 2px;
  padding: 22px 24px;
  border-left: 1px solid var(--line);
}

.coverage-grid div:first-child {
  padding-left: 0;
  border-left: 0;
}

.coverage-grid b {
  color: var(--head);
  font: 600 1.75rem/1.2 var(--mono);
  letter-spacing: -0.02em;
}

.coverage-grid span {
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Sections */
.band {
  padding: 80px 0;
}

.band.alt {
  background: var(--surface-2);
}

.section-head {
  max-width: 720px;
  margin: 0 0 36px;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head.split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  max-width: none;
}

.section-head.split > div {
  max-width: 720px;
}

.site .section-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.section-head p:not(.kicker) {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 1rem;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
}

.more-link svg {
  width: 16px;
  height: 16px;
}

.section-head .pill {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink-2);
  text-decoration: none;
}

.site .section-head a.pill:hover {
  color: var(--head);
}

/* Questions Lanelytic answers: four cards, each ending in a real data snippet. */
.questions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.question {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.q-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 16px;
}

.q-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--chip);
  color: var(--head);
  font: 600 0.875rem/1 var(--mono);
}

.q-tag {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site .question h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
}

.question > p {
  margin: 0 0 20px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.snippet {
  margin-top: auto;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.snippet p {
  margin: 0;
}

.snippet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.snippet-label,
.snippet-head > span:first-child {
  color: var(--ink-2);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.delta-chip {
  flex: none;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font: 600 0.6875rem/1.6 var(--mono);
}

.delta-chip.down {
  background: var(--bad-bg);
  color: var(--bad);
}

.delta-chip.up {
  background: var(--good-bg);
  color: var(--good);
}

.snippet-figure {
  margin: 6px 0 4px;
  color: var(--head);
  font: 600 1.75rem/1.2 var(--mono);
  letter-spacing: -0.02em;
}

.spark {
  display: block;
  width: 100%;
  height: 44px;
}

.spark .area {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
}

.spark .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.snippet-axis,
.bar-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  color: var(--ink-3);
  font: 400 0.6875rem/1.5 var(--mono);
}

.vs-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
}

.vs-row:last-of-type {
  border-bottom: 0;
}

.cc {
  padding: 0 4px;
  border-radius: 3px;
  background: var(--chip);
  color: var(--chip-ink);
  font: 500 0.6875rem/1.6 var(--mono);
}

.vs-val {
  display: grid;
  text-align: right;
}

.vs-val b {
  color: var(--head);
  font: 600 0.875rem/1.4 var(--mono);
}

.vs-val small {
  color: var(--ink-3);
  font: 400 0.6875rem/1.5 var(--mono);
}

.vs-val small.bad {
  color: var(--bad);
}

.snippet-note {
  margin-top: 8px !important;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent);
  font: 600 0.6875rem/1.5 var(--mono);
}

.alert-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px !important;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--head);
  font-size: 0.8125rem;
  font-weight: 600;
}

.alert-chip svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.bar-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.bar-row b {
  color: var(--head);
  font: 600 0.875rem/1.4 var(--mono);
}

.meter {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 6px;
}

.meter .track {
  fill: var(--surface-3);
}

.meter .fill {
  fill: var(--accent);
}

.ranks {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
}

.ranks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.8125rem;
  counter-increment: rank;
}

.ranks li > span::before {
  content: counter(rank);
  margin-right: 8px;
  color: var(--head);
  font: 700 0.75rem/1 var(--mono);
}

.ranks b {
  color: var(--head);
  font: 600 0.75rem/1.4 var(--mono);
}

.ranks small {
  color: var(--ink-3);
  font-weight: 400;
}

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.step-badge {
  position: absolute;
  top: -12px;
  left: 22px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font: 700 0.75rem/1.6 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.step-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 0 18px;
  border-radius: var(--radius);
  background: var(--chip);
  color: var(--head);
}

.step-icon svg {
  width: 22px;
  height: 22px;
}

.site .steps h3 {
  font-size: 1.1875rem;
}

.steps li > p:not(.step-example) {
  margin: 0 0 18px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.step-example {
  margin: auto 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2);
  color: var(--ink-2);
  font: 400 0.75rem/1.65 var(--mono);
}

.step-example b {
  color: var(--head);
  font-weight: 600;
}

/* The featured brief: a navy chart panel beside the brief's headline figures. */
.brief-card {
  display: grid;
  grid-template-columns: 5fr 7fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.brief-visual {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  background:
    radial-gradient(90% 70% at 100% 0%, rgb(91 184 254 / 0.18), transparent 70%),
    linear-gradient(160deg, #0f3f7a, #002958);
  color: #eaf1ff;
}

.brief-visual p {
  margin: 0;
}

.brief-stamp {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.12);
  font: 600 0.6875rem/1.6 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brief-visual-label {
  margin-top: auto !important;
  color: #a9c4ee;
  font-size: 0.8125rem;
}

.brief-visual-figure {
  color: #ffffff;
  font: 600 2.5rem/1.1 var(--mono);
  letter-spacing: -0.03em;
}

.mini-chart {
  display: block;
  width: 100%;
  height: 120px;
  margin-top: 8px;
}

.mini-chart .g {
  stroke: rgb(255 255 255 / 0.1);
  stroke-width: 1;
}

.mini-chart .duty-line {
  fill: none;
  stroke: #7cc6ff;
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.brief-visual-axis {
  display: flex;
  justify-content: space-between;
  color: #a9c4ee;
  font: 400 0.6875rem/1.5 var(--mono);
}

.brief-body {
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.tag-chip {
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--head);
  font: 500 0.6875rem/1.8 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chips .read {
  color: var(--ink-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site .brief-body h3 {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.brief-body > p {
  margin: 0 0 20px;
  color: var(--ink-2);
}

.brief-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.brief-metrics div {
  display: grid;
  gap: 2px;
}

.brief-metrics span {
  color: var(--ink-2);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brief-metrics b {
  color: var(--head);
  font: 600 1.25rem/1.3 var(--mono);
}

.brief-metrics b.warn {
  color: var(--bad);
}

.brief-metrics small {
  color: var(--ink-3);
  font: 400 0.6875rem/1.5 var(--mono);
}

.brief-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.brief-foot p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.brief-foot p svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

/* Sign-up: a navy card with the free account form. */
.signup-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 40px;
  overflow: hidden;
  padding: 48px;
  border-radius: var(--radius);
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(91 184 254 / 0.16), transparent 70%),
    linear-gradient(160deg, var(--navy-2), var(--navy));
  box-shadow: var(--shadow-lg);
  color: var(--navy-ink-2);
}

.signup-copy {
  align-self: center;
}

.signup-copy .pill {
  margin-bottom: 20px;
  background: rgb(255 255 255 / 0.1);
  color: var(--navy-ink);
}

.signup-copy .pill > span:first-child {
  background: var(--signal);
}

.site .signup-copy h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.signup-lede {
  margin: 16px 0 0;
  color: var(--navy-ink-2);
  font-size: 1.0625rem;
}

.ticks {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ticks li::before {
  content: "✓";
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 800;
}

.signup-copy .ticks li {
  color: var(--navy-ink);
  font: 400 0.875rem/1.6 var(--mono);
}

.signup-copy .ticks li::before {
  background: rgb(124 198 255 / 0.18);
  color: #7cc6ff;
}

.signup-copy .hint {
  margin: 24px 0 0;
  color: var(--navy-ink-2);
  font-size: 0.875rem;
}

.site .signup-copy .hint a {
  color: #ffffff;
}

.form-card {
  align-self: start;
  padding: 26px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xl);
  color: var(--ink);
}

.site .form-card h3 {
  margin: 0;
  font-size: 1.1875rem;
}

.form-card > .hint {
  margin: 4px 0 18px;
}

.hint {
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.field {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.field label,
.field legend {
  padding: 0;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.field input[type="email"],
.field input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  outline: none;
}

.field input::placeholder {
  color: var(--ink-3);
}

.field .hint {
  margin: 0;
}

.radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 400 !important;
}

.radio input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-card .button {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
}

.fine-print {
  margin: 12px 0 0;
  color: var(--ink-3);
  font-size: 0.75rem;
  line-height: 1.5;
}

.more {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.more summary {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.more form {
  margin-top: 14px;
}

/* Pricing */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.plan.featured {
  border: 1px solid var(--primary);
  box-shadow: inset 0 3px 0 var(--primary), var(--shadow-lg);
}

.plan .tag {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font: 600 0.6875rem/1.7 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site .plan h3 {
  margin: 0;
  font-size: 1.0625rem;
}

.price {
  margin: 12px 0 0;
  color: var(--head);
  font: 600 2.25rem/1.1 var(--mono);
  letter-spacing: -0.03em;
}

.price small {
  color: var(--ink-3);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
}

.price-alt {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.plan ul {
  display: grid;
  gap: 8px;
  margin: 20px 0 24px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.plan li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}

.plan .button {
  margin-top: auto;
}

/* Questions and answers */
.faq {
  max-width: 820px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq details:last-child {
  border-bottom: 0;
}

.faq summary {
  position: relative;
  padding: 18px 52px 18px 22px;
  color: var(--head);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 22px;
  color: var(--ink-3);
  font: 400 1.25rem/1 var(--mono);
  transform: translateY(-50%);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--ink-2);
}

/* Answers slide open where the browser can animate to their natural height. */
.faq details::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.25s ease, content-visibility 0.25s allow-discrete;
}

.faq details[open]::details-content {
  height: auto;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 32px 0 0;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
}

.provenance {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.provenance > svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.provenance div {
  flex: 1;
  min-width: 0;
}

.provenance p {
  margin: 0;
  color: var(--ink);
  font-size: 0.875rem;
}

.provenance .provenance-label {
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.provenance .provenance-tag {
  padding: 0;
  color: var(--ink-2);
  font-size: 0.6875rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 32px;
  padding: 36px 0 28px;
}

.footer-brand p {
  max-width: 380px;
  margin: 12px 0 0;
  font-size: 0.875rem;
}

.site-footer nav {
  display: grid;
  align-content: start;
  gap: 8px;
}

.site .site-footer h2 {
  margin: 0 0 4px;
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site .site-footer nav a {
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: none;
}

.site .site-footer nav a:hover {
  color: var(--head);
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 18px 0 28px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font: 400 0.75rem/1.6 var(--mono);
}

.footer-base p {
  margin: 0;
}

/* ---------- Data pages: header, title card, tabs, cards ---------- */

.page-head {
  padding: 24px 0 28px;
}

.head-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 0 0 18px;
}

.crumbs {
  color: var(--ink-3);
  font: 500 0.75rem/1.6 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site .crumbs a {
  color: var(--ink-2);
  text-decoration: none;
}

.site .crumbs a:hover {
  color: var(--head);
  text-decoration: underline;
}

.crumbs span {
  margin: 0 6px;
}

.source-pill {
  background: var(--accent-soft);
  color: var(--head);
  white-space: normal;
}

.page-head .kicker {
  margin-bottom: 8px;
}

.page-head .kicker .code-chip {
  letter-spacing: 0.02em;
  text-transform: none;
}

.hero-sub {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 1rem;
}

.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.hero-metrics li {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.hero-metrics strong {
  margin-right: 4px;
  color: var(--head);
  font: 600 1rem/1.4 var(--mono);
}

/* The product page's source strip: where the figures come from, how fresh they are, and the button
   to track the product. */
.source-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 0 0 16px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.source-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.source-line strong {
  color: var(--ink);
  font-weight: 600;
}

.source-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--head);
  font: 600 0.625rem/1.8 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.source-tag > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.source-meta {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.button-note {
  font-weight: 400;
  opacity: 0.8;
}

/* A product's title card: a navy rule down the left, the code, the name, the answer, key figures. */
.title-card {
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.title-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--ink-3);
  font: 500 0.75rem/1.6 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.title-meta .code-chip {
  letter-spacing: 0.02em;
}

.title-meta .crumbs {
  display: inline;
}

.title-card h1 {
  max-width: 960px;
}

/* The answer first: a pale callout in the title card. */
.site .summary {
  margin: 22px 0 0;
  padding: 16px 20px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: none;
}

.site .summary h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.summary h2::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.summary ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.summary li {
  position: relative;
  padding-left: 18px;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.summary li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--primary);
}

.site .title-card .stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.site .title-card .stat {
  border-color: var(--line);
  background: var(--surface);
}

/* Sticky tabs: one per section, the one being read underlined. */
.tabs {
  position: sticky;
  top: var(--nav-h);
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-block: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}

.tabs-inner {
  display: flex;
  gap: 2px;
  height: var(--tabs-h);
  overflow-x: auto;
  scroll-target-group: auto;
  scrollbar-width: none;
}

.tabs-inner::-webkit-scrollbar {
  display: none;
}

.tabs-inner a {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 0 12px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site .tabs-inner a:hover {
  color: var(--head);
}

.tabs-inner a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

/* The tab whose section is on screen: native where supported, else marked by brief.js. */
.site .tabs-inner a:is(:target-current, [aria-current="true"]) {
  color: var(--head);
  font-weight: 600;
}

.tabs-inner a:is(:target-current, [aria-current="true"])::after {
  transform: scaleX(1);
}

.page-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0 72px;
}

/* brief.css spaces sections and the breadcrumb for the printable briefs; here cards set their own. */
.site .page-body section,
.site .page-body .panel,
.site main > section,
.site main > nav,
.site .title-card,
.site .crumbs {
  margin: 0;
}

.site .panel h2 > svg {
  width: 18px;
  height: 18px;
  margin: 0 10px -2px 0;
  color: var(--accent);
}

.site .page-body h2[id],
.site .page-body section[id],
.site .title-card h2[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--tabs-h) + 20px);
}

.panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.panel > :first-child {
  margin-top: 0;
}

/* One column on narrow screens; minmax(0, 1fr) keeps a wide chart or table from stretching it past
   the screen's edge. */
.grid-2,
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.split-side {
  display: grid;
  align-content: start;
  gap: 20px;
}

@media (min-width: 1100px) {
  .split {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  /* The shorter of the two cards stretches to the other's height. */
  .split-main > .panel,
  .split-side > .panel:only-child {
    height: 100%;
  }
}

@media (min-width: 1000px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.grid-2 > :only-child {
  grid-column: 1 / -1;
}

.site .section-note {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.site .changes li {
  max-width: none;
}

/* Tables sit flush with the card's edges, their heading band running across. */
.site .panel > .table-wrap,
.site .panel > .section-note + .table-wrap {
  margin-inline: -24px;
}

.site .panel .data th:first-child,
.site .panel .data td:first-child {
  padding-left: 24px;
}

.site .panel .data th:last-child,
.site .panel .data td:last-child {
  padding-right: 24px;
}

.site .panel .table-view .data th:first-child,
.site .panel .table-view .data td:first-child {
  padding-left: 12px;
}

.site .panel .table-view .data th:last-child,
.site .panel .table-view .data td:last-child {
  padding-right: 12px;
}

/* The row's name stays in view while a wide table scrolls sideways. */
.site .data tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
}

.site .data a {
  color: var(--head);
  font-weight: 600;
  text-decoration: none;
}

.site .data a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.about summary {
  color: var(--head);
  font-weight: 600;
  cursor: pointer;
}

.about ul {
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* The closing call to action: a navy card, with a one-field sign-up on product pages. */
.site .cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  margin: 8px 0 0;
  padding: 30px 32px;
  border: 0;
  border-radius: var(--radius);
  background:
    radial-gradient(60% 120% at 100% 0%, rgb(91 184 254 / 0.16), transparent 70%),
    linear-gradient(160deg, var(--navy-2), var(--navy));
  box-shadow: var(--shadow-lg);
  color: var(--navy-ink-2);
}

.cta-copy {
  flex: 1 1 380px;
  max-width: 620px;
}

.cta-copy p {
  margin: 0;
}

.cta-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px !important;
  color: var(--navy-ink);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cta-kicker > span {
  background: var(--signal);
}

.site .cta .cta-title {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cta-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  flex: 1 1 360px;
  max-width: 480px;
}

.cta-form input[type="email"] {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #0b1c30;
  font: inherit;
  font-size: 0.9375rem;
}

.cta-form input[type="email"]::placeholder {
  color: #66707f;
}

.cta-form input[type="email"]:focus {
  border-color: var(--signal);
  outline: none;
  box-shadow: 0 0 0 3px rgb(91 184 254 / 0.35);
}

.cta-form .button {
  min-height: 46px;
  background: var(--signal);
  color: #002958;
}

.cta-form .button:hover {
  background: #93ccff;
}

.cta-fine {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--navy-ink-2);
  font: 400 0.6875rem/1.6 var(--mono);
}

.site .cta-fine a,
.site .cta-fine a:hover {
  color: var(--navy-ink);
}

/* The /hs/ finder */
.site .finder {
  max-width: none;
  padding: 24px;
  background: var(--surface);
}

.site .finder input {
  min-height: 52px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 1.0625rem;
}

.site .finder input:focus {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.site .finder-results a {
  border-top-color: var(--line);
}

.site .finder-results strong {
  color: var(--head);
}

.site .finder-results span {
  font-family: var(--mono);
  font-size: 0.75rem;
}

.chapter-tiles {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .chapter-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .chapter-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.chapter-tiles a {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.site .chapter-tiles a:hover {
  border-color: var(--primary);
  background: var(--surface-2);
}

.chapter-tiles strong {
  color: var(--head);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.chapter-tiles span {
  color: var(--ink-3);
  font: 400 0.75rem/1.5 var(--mono);
}

/* ---------- Simple pages: legal, welcome, thanks, 404 ---------- */

.page-plain {
  padding: 48px 0 80px;
}

.prose {
  padding: 36px 40px;
  border-top: 4px solid var(--primary);
}

.prose h1 {
  margin-bottom: 8px;
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem);
}

.prose h2 {
  margin-top: 30px;
}

.prose p,
.prose li {
  color: var(--ink-2);
}

.page-meta {
  margin: 0 0 22px;
  color: var(--ink-3);
  font: 400 0.75rem/1.6 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Details still to fill in on the legal pages. Search the HTML for class="fill" before going live. */
.fill {
  padding: 0 3px;
  border-radius: 3px;
  background: #fde68a;
  color: #3b2a00;
}

/* ---------- Light/dark switch (site.js) ---------- */

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

.theme-toggle[data-mode="light"] .icon-sun,
.theme-toggle[data-mode="dark"] .icon-moon {
  display: none;
}

/* Dark mode: the logo mark keeps its navy, ringed so it holds against the dark bar. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .brand svg {
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgb(170 199 255 / 0.35);
  }
}

:root[data-theme="dark"] .brand svg {
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgb(170 199 255 / 0.35);
}

/* ---------- Narrow screens ---------- */

@media (max-width: 1100px) {
  .questions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brief-card {
    grid-template-columns: 1fr;
  }

  .signup-card {
    grid-template-columns: 1fr;
    padding: 36px;
  }
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .steps,
  .plans {
    grid-template-columns: 1fr;
  }

  .steps {
    gap: 28px;
  }

  .coverage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coverage-grid div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .coverage-grid div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .site .title-card .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .band {
    padding: 56px 0;
  }

  .hero {
    padding: 32px 0 44px;
  }

  .hero-search {
    flex-wrap: wrap;
  }

  .hero-search .button {
    width: 100%;
  }

  .questions,
  .brief-metrics {
    grid-template-columns: 1fr;
  }

  .ribbon-meta {
    display: none;
  }

  .panel,
  .prose,
  .title-card {
    padding: 20px 16px;
  }

  .site .panel > .table-wrap,
  .site .panel > .section-note + .table-wrap {
    margin-inline: -16px;
  }

  .site .panel .data th:first-child,
  .site .panel .data td:first-child {
    padding-left: 16px;
  }

  .site .panel .data th:last-child,
  .site .panel .data td:last-child {
    padding-right: 16px;
  }

  .site .title-card .stat-value {
    font-size: 1.25rem;
  }

  .signup-card,
  .site .cta {
    padding: 26px 20px;
  }

  .brief-body {
    padding: 22px 20px;
  }

  .cta-form {
    grid-template-columns: 1fr;
  }

  .provenance {
    flex-wrap: wrap;
  }

  .source-pill {
    font-size: 0.625rem;
  }
}

/* ---------- Less motion: no movement, quick fades only ---------- */

@media (prefers-reduced-motion: reduce) {
  .palette {
    transform: none;
    transition-duration: 0.1s;
  }

  @starting-style {
    .palette[open] {
      transform: none;
    }
  }

  .faq details::details-content,
  .tabs-inner a::after {
    transition: none;
  }
}

@supports not (font-size-adjust: 0.5) {
  .code-chip,
  .crumbs,
  .title-meta,
  .lanes code {
    font-size: 0.75rem;
  }
}

/* ---------- Print: the content only, on white ---------- */

@media print {
  :root,
  :root[data-theme="dark"] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f7fc;
    --ink: #0b1c30;
    --ink-2: #434750;
    --ink-3: #66707f;
    --head: #002958;
    --line: #e3e8f1;
    --line-2: #cbd5e1;
    --accent: #006398;
    --primary: #0f3f7a;
    --bar: #c5d3ea;
    --bar-latest: #0f3f7a;
    --grid: #e9eef6;
    --axis: #c3c6d1;
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --series-4: #eda100;
    color-scheme: light;
  }

  .nav-shell,
  .tabs,
  .site-footer,
  .palette,
  .source-strip .button,
  .site .cta,
  .ribbon {
    display: none;
  }

  .panel,
  .title-card {
    break-inside: avoid;
    box-shadow: none;
  }
}