/* Copyright 2013 - 2026 Waiterio LLC */

/* ---------- Design tokens ---------- */
:root {
  --brand: #1a9e91;
  --brand-strong: #10776e;
  --brand-ink: #0b5a53;
  --brand-soft: #e7f6f4;
  --brand-glow: rgba(26, 158, 145, 0.18);
  --accent: #3b82f6;
  --link: #10776e;
  --bg: #ffffff;
  --bg-subtle: #f7faf9;
  --bg-muted: #f0f5f4;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --border: #e2eae8;
  --border-strong: #cad7d4;
  --text: #0f1e1c;
  --text-muted: #46605c;
  /* 5.3:1 on white, 4.8:1 on the muted ground: it carries data (holders,
     code labels, table headers), so it has to pass as body text. */
  --text-subtle: #5a706c;
  --code-bg: #0c1a19;
  --code-header: #10211f;
  --code-border: #1d3431;
  --code-text: #d8ebe8;
  --code-muted: #7f9c97;
  --tok-property: #7dd3c8;
  --tok-string: #f2c97d;
  --tok-number: #f59f7a;
  --tok-literal: #c4a7ff;
  --tok-keyword: #ff8fb1;
  --tok-function: #8ec5ff;
  --tok-comment: #6e8a85;
  --tok-flag: #8ec5ff;
  --tok-variable: #c4a7ff;
  --danger: #c2410c;
  --danger-soft: #fff1ea;
  --warning: #a16207;
  --warning-soft: #fdf7e3;
  --info-soft: #eef6ff;
  --shadow-sm: 0 1px 2px rgba(15, 30, 28, 0.06);
  --shadow: 0 1px 2px rgba(15, 30, 28, 0.05), 0 8px 24px rgba(15, 30, 28, 0.06);
  --shadow-lg:
    0 2px 6px rgba(15, 30, 28, 0.06), 0 24px 60px rgba(15, 30, 28, 0.12);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --header-height: 64px;
  --font-sans:
    'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:
    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas,
    'Liberation Mono', monospace;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --brand: #2cc0b0;
  --brand-strong: #5fd6c9;
  --brand-ink: #8be7dc;
  --brand-soft: rgba(44, 192, 176, 0.12);
  --brand-glow: rgba(44, 192, 176, 0.2);
  --link: #3fcfbf;
  --bg: #0a1413;
  --bg-subtle: #0d1918;
  --bg-muted: #10201e;
  --surface: #0f1d1c;
  --surface-raised: #132423;
  --border: #1e3330;
  --border-strong: #2c4642;
  --text: #e6f1ef;
  --text-muted: #a4bab6;
  --text-subtle: #7f9893;
  --code-bg: #071110;
  --code-header: #0b1817;
  --code-border: #1a2e2b;
  --danger: #ff9f7a;
  --danger-soft: rgba(255, 120, 80, 0.1);
  --warning: #f3c969;
  --warning-soft: rgba(243, 201, 105, 0.09);
  --info-soft: rgba(96, 165, 250, 0.09);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 650;
  /* Lines of equal length, so a heading never ends on one short word. */
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

h3 {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
  /* Avoids a single word alone on a paragraph's last line. */
  text-wrap: pretty;
}

li,
dd {
  text-wrap: pretty;
}

/* The browser's own placeholder grey fails contrast on the dark surface. */
::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration: underline;
}

code,
kbd,
pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

:not(pre) > code {
  padding: 0.12em 0.4em;
  border-radius: 5px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.85em;
  white-space: nowrap;
}

img,
svg {
  display: block;
}

[hidden] {
  display: none !important;
}

.icon {
  flex: none;
  display: inline-block;
}

.muted {
  color: var(--text-subtle);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.narrow {
  max-width: 860px;
}

.center {
  text-align: center;
  justify-content: center;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1400px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text) !important;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  text-decoration: none !important;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.site-nav a {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--text);
  background: var(--bg-muted);
}

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

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  min-width: 36px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.icon-button:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.search-button {
  min-width: 190px;
  justify-content: flex-start;
}

.search-button kbd {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.72rem;
  color: var(--text-subtle);
}

.theme-dark,
:root[data-theme='dark'] .theme-light {
  display: none;
}

:root[data-theme='dark'] .theme-dark {
  display: inline-flex;
}

.nav-toggle {
  display: none;
}

/* Locale picker */
.locale-picker {
  position: relative;
}

.locale-picker summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

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

.locale-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 330px;
  max-height: 70vh;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.locale-menu-title {
  margin: 4px 8px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}

.locale-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.locale-menu li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
}

.locale-menu li.is-current {
  background: var(--brand-soft);
}

.locale-country {
  font-size: 0.9rem;
}

.locale-languages {
  display: flex;
  gap: 4px;
}

.locale-languages a {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.locale-languages a[aria-current='true'],
.locale-languages a:hover {
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.button:active {
  transform: translateY(1px);
}

.button-primary {
  background: var(--brand);
  color: #fff !important;
  box-shadow:
    0 1px 2px rgba(16, 119, 110, 0.4),
    0 6px 18px var(--brand-glow);
}

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

:root[data-theme='dark'] .button-primary {
  color: #04211e !important;
}

:root[data-theme='dark'] .button-primary:hover {
  background: var(--brand-strong);
}

.button-secondary {
  background: var(--surface);
  color: var(--text) !important;
  border-color: var(--border-strong);
}

.button-secondary:hover {
  border-color: var(--text-subtle);
}

/* Always a white button, so its ink is fixed: the --brand-ink token turns
   light in the dark theme and read 1.4:1 here. */
.button-inverse {
  background: #fff;
  color: #0b5a53 !important;
}

/* On the brand band, beside the white button: white ink is 4.6:1 or more on
   every point of the band, and the outline marks the control at 3:1. */
.button-on-brand {
  border-color: rgba(255, 255, 255, 0.72);
  background: transparent;
  color: #fff !important;
}

.button-on-brand:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.button-link {
  height: auto;
  padding: 0;
  color: var(--brand-strong) !important;
  border-radius: 0;
}

.button-block {
  width: 100%;
}

.header-cta {
  height: 36px;
  padding: 0 16px;
  font-size: 0.88rem;
  white-space: nowrap;
}

/* ---------- Sections ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:root[data-theme='dark'] .eyebrow {
  color: var(--brand);
}

.eyebrow .flag {
  font-size: 1.05rem;
}

.lead,
.hero-lead {
  color: var(--text-muted);
  font-size: 1.13rem;
  line-height: 1.65;
}

.section {
  padding: 96px 0;
}

.section-muted {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 44px;
}

.section-heading h2 + .lead {
  margin-top: 14px;
}

.section-more {
  margin-top: 28px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  background:
    radial-gradient(
      900px 420px at 88% -10%,
      var(--brand-glow),
      transparent 70%
    ),
    radial-gradient(
      700px 360px at -10% 10%,
      rgba(59, 130, 246, 0.08),
      transparent 70%
    );
}

.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.hero-compact {
  padding: 72px 0 56px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}

.hero-copy h1 {
  margin-bottom: 20px;
}

/* The API pitch is a section of the home page now, under a second-level
   heading that needs the same air above its lead. */
.hero-copy h2 {
  margin-bottom: 16px;
}

.hero-lead {
  max-width: 620px;
}

.hero h1 + .hero-lead {
  margin-top: 18px;
}

.hero .center .hero-lead {
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 18px;
}

.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--text-subtle);
  font-size: 0.9rem;
}

.hero-note .icon {
  color: var(--brand);
}

.hero-code {
  display: grid;
  gap: 14px;
  min-width: 0;
}

/* Stats */
.stats {
  border-bottom: 1px solid var(--border);
}

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

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 30px 24px;
  border-left: 1px solid var(--border);
}

.stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  color: var(--text-subtle);
  font-size: 0.9rem;
}

.stats-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 26px;
  color: var(--text-muted);
}

.stats-inline strong {
  color: var(--text);
  font-size: 1.3rem;
}

/* Cards and grids */
.source-grid,
.feature-grid,
.usecase-grid,
.country-grid,
.docs-cards {
  display: grid;
  gap: 18px;
}

.source-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.source-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.source-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
}

.source-card header h3 {
  margin-top: 4px;
}

.source-authority {
  font-size: 0.76rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle) !important;
}

.source-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 0;
  padding: 12px 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}

.source-facts dt {
  color: var(--text-subtle);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.source-facts dd {
  margin: 2px 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.source-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.source-id {
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.87rem;
  white-space: nowrap;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.chip {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 550;
}

code.chip {
  font-size: 0.76rem;
}

.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.feature {
  padding: 30px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.feature:nth-child(3n) {
  border-right: 0;
}

.feature:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.feature h3 {
  margin: 16px 0 8px;
}

.feature p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-strong);
}

:root[data-theme='dark'] .feature-icon {
  color: var(--brand);
}

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

.usecase {
  display: flex;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

.usecase .icon {
  margin-top: 3px;
  color: var(--brand);
}

.usecase h3 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.usecase p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.93rem;
}

.country-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.country-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text) !important;
  text-decoration: none !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.country-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.country-card.is-current {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.country-flag {
  grid-row: span 2;
  font-size: 1.7rem;
  line-height: 1;
}

.country-name {
  font-weight: 600;
}

.country-records {
  color: var(--text-subtle);
  font-size: 0.85rem;
}

.checklist {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--text-muted);
}

.checklist .icon {
  margin-top: 3px;
  color: var(--brand);
}

/* FAQ */
.faq {
  display: grid;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  list-style: none;
  font-weight: 600;
  cursor: pointer;
}

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

.faq-item summary .icon {
  color: var(--text-subtle);
  transition: transform 0.2s ease;
}

.faq-item[open] summary .icon {
  transform: rotate(180deg);
}

.faq-item p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--text-muted);
}

/* CTA band */
.cta-band {
  padding: 64px 0;
  background:
    radial-gradient(
      600px 300px at 90% 0%,
      rgba(255, 255, 255, 0.08),
      transparent 70%
    ),
    linear-gradient(135deg, #0b5a53, #0e6c64 55%, #10776e);
  color: #fff;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.cta-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 12px;
}

/* The page's focus ring is the brand colour, which the band is made of. */
.cta-band .button:focus-visible {
  outline-color: #fff;
}

.cta-band h2 {
  margin-bottom: 8px;
  color: #fff;
}

/* White on the band's lightest point is 4.6:1; anything fainter, or the
   lighter gradient this replaced (2.7:1 under the heading on a phone), is
   below what body text needs. */
.cta-band p {
  margin: 0;
  color: #fff;
}

/* ---------- Code ---------- */
.code {
  margin: 0;
  min-width: 0;
  border-radius: var(--radius);
  border: 1px solid var(--code-border);
  background: var(--code-bg);
  color: var(--code-text);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-code .code {
  box-shadow: var(--shadow-lg);
}

.code-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--code-border);
  background: var(--code-header);
}

.code-title {
  overflow: hidden;
  color: var(--code-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code-tablist {
  display: flex;
  gap: 2px;
}

.code-tab {
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--code-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.code-tab:hover {
  color: var(--code-text);
}

.code-tab[aria-selected='true'] {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.code-tabs .code-title {
  margin-left: auto;
}

.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--code-muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.code-tabs .code-copy {
  margin-left: 0;
}

.code-copy:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}

.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  font-size: 0.82rem;
  line-height: 1.7;
  tab-size: 2;
}

.code-response pre {
  max-height: 360px;
}

.tok-property {
  color: var(--tok-property);
}
.tok-string {
  color: var(--tok-string);
}
.tok-number {
  color: var(--tok-number);
}
.tok-literal {
  color: var(--tok-literal);
}
.tok-keyword {
  color: var(--tok-keyword);
}
.tok-function {
  color: var(--tok-function);
}
.tok-comment {
  color: var(--tok-comment);
  font-style: italic;
}
.tok-flag {
  color: var(--tok-flag);
}
.tok-variable {
  color: var(--tok-variable);
}
.tok-punctuation {
  color: var(--code-muted);
}

/* ---------- Docs ---------- */
.docs-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  gap: 48px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.docs-shell-wide {
  grid-template-columns: 260px minmax(0, 1fr);
}

.docs-sidebar {
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: 32px 8px 40px 0;
  border-right: 1px solid var(--border);
}

.docs-nav-group + .docs-nav-group {
  margin-top: 26px;
}

.docs-nav-title {
  margin: 0 0 8px;
  padding-left: 10px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.docs-sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-sidebar a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.92rem;
  text-decoration: none;
}

.docs-sidebar a code {
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.8rem;
  color: inherit;
}

.docs-sidebar a:hover {
  color: var(--text);
  background: var(--bg-muted);
}

.docs-sidebar a[aria-current='page'] {
  color: var(--brand-strong);
  background: var(--brand-soft);
  font-weight: 600;
}

:root[data-theme='dark'] .docs-sidebar a[aria-current='page'] {
  color: var(--brand);
}

.method {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(26, 158, 145, 0.14);
  color: var(--brand-strong);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

:root[data-theme='dark'] .method {
  color: var(--brand);
}

.docs-menu-button {
  display: none;
}

.docs-article {
  min-width: 0;
  padding: 40px 0 80px;
}

.docs-article > h1 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  margin-bottom: 14px;
}

.docs-breadcrumbs {
  margin-bottom: 18px;
  color: var(--text-subtle);
  font-size: 0.88rem;
}

.docs-lead {
  max-width: 760px;
  color: var(--text-muted);
  font-size: 1.12rem;
}

.docs-section {
  margin-top: 44px;
}

.docs-section > h2 {
  margin-bottom: 16px;
  font-size: 1.45rem;
}

.docs-section h3 {
  margin: 28px 0 12px;
  font-size: 1.05rem;
}

.docs-section > p,
.docs-section > ul,
.endpoint-main > p {
  max-width: 760px;
  color: var(--text-muted);
}

.docs-section .code {
  margin: 18px 0;
}

.anchored {
  position: relative;
}

.anchor {
  position: absolute;
  left: -1.1em;
  color: var(--text-subtle) !important;
  opacity: 0;
  text-decoration: none !important;
}

.anchored:hover .anchor {
  opacity: 1;
}

.docs-list {
  padding-left: 1.2em;
}

.docs-list li {
  margin: 0.45em 0;
}

.docs-list strong {
  color: var(--text);
}

.docs-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 32px 0 8px;
}

.docs-cards-3 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.docs-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 2px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text) !important;
  text-decoration: none !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.docs-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
}

.docs-card-icon {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-strong);
}

:root[data-theme='dark'] .docs-card-icon {
  color: var(--brand);
}

.docs-card-title {
  font-weight: 600;
}

.docs-card-text {
  color: var(--text-subtle);
  font-size: 0.9rem;
}

.docs-toc {
  position: sticky;
  top: var(--header-height);
  align-self: start;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: 44px 0 40px;
}

.docs-toc-title {
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.docs-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--border);
}

.docs-toc a {
  display: block;
  margin-left: -1px;
  padding: 4px 0 4px 14px;
  border-left: 2px solid transparent;
  color: var(--text-subtle);
  font-size: 0.86rem;
  text-decoration: none;
}

.docs-toc a:hover {
  color: var(--text);
}

.docs-toc a.is-active {
  color: var(--brand-strong);
  border-left-color: var(--brand);
}

.docs-pagination {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.docs-page-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.docs-page-link span {
  color: var(--text-subtle);
  font-size: 0.8rem;
  font-weight: 500;
}

.docs-page-next {
  text-align: right;
}

.docs-page-link:hover {
  border-color: var(--brand);
}

/* Callouts */
.callout {
  display: flex;
  gap: 12px;
  margin: 20px 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--info-soft);
  color: var(--text-muted);
}

.callout > .icon {
  margin-top: 3px;
  color: var(--accent);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout-title {
  margin-bottom: 4px !important;
  color: var(--text);
  font-weight: 600;
}

.callout-warning {
  background: var(--warning-soft);
}

.callout-warning > .icon {
  color: var(--warning);
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.table th,
.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.table th {
  background: var(--bg-subtle);
  color: var(--text-subtle);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Attributes */
.attributes {
  margin: 8px 0 24px;
  border-top: 1px solid var(--border);
}

.attribute {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.attribute dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.attribute-name {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 650;
}

.attribute-type {
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.badge {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 650;
}

.badge-required {
  background: var(--danger-soft);
  color: var(--danger);
}

.attribute dd {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.93rem;
}

.attribute-values {
  margin: 8px 0 0;
  font-size: 0.86rem;
}

/* Endpoint pages */
.endpoint-signature {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
}

.endpoint-signature code {
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.95rem;
}

.endpoint {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 44px;
  align-items: start;
}

.endpoint-code {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: grid;
  gap: 14px;
}

.endpoint-code .code {
  margin: 0;
}

.endpoint-list {
  display: grid;
  gap: 10px;
}

.endpoint-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text) !important;
  text-decoration: none !important;
}

.endpoint-link:hover {
  border-color: var(--brand);
}

.endpoint-link code {
  border: 0;
  background: none;
  padding: 0;
  font-weight: 600;
}

.endpoint-link span:last-child {
  margin-left: auto;
  color: var(--text-subtle);
  font-size: 0.9rem;
}

.endpoint-list-large .endpoint-link {
  padding: 18px 20px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.facts .icon {
  margin-top: 2px;
  color: var(--brand);
}

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

.step {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

.step h3 {
  margin: 16px 0 8px;
}

.step p {
  color: var(--text-muted);
}

.step a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

/* ---------- Forms ---------- */
.signup {
  padding: 72px 0 96px;
  background: radial-gradient(
    800px 380px at 100% 0%,
    var(--brand-glow),
    transparent 70%
  );
}

.signup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: start;
}

.signup-intro h1 {
  margin-bottom: 18px;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
}

.signup-intro .checklist {
  margin-top: 28px;
}

.signup-steps {
  margin-top: 32px;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
}

.signup-steps-title {
  margin-bottom: 8px;
  font-weight: 650;
}

.signup-steps ol {
  margin: 0;
  padding-left: 1.2em;
  color: var(--text-muted);
}

.signup-steps li {
  margin: 6px 0;
}

.signup-card {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.form {
  display: grid;
  gap: 18px;
}

.field {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field label,
.field legend {
  padding: 0;
  font-size: 0.88rem;
  font-weight: 600;
}

.field input[type='text'],
.field input[type='email'],
.field input[type='search'],
.field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.field textarea {
  resize: vertical;
  min-height: 84px;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-glow);
}

.field.has-error input,
.field.has-error textarea {
  border-color: var(--danger);
}

.field-error,
.form-error {
  margin: 0;
  color: var(--danger);
  font-size: 0.85rem;
}

.field-error:empty,
.form-error:empty {
  display: none;
}

.field-hint {
  margin: 4px 0 0;
  color: var(--text-subtle);
  font-size: 0.82rem;
}

.required {
  color: var(--danger);
}

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

.country-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.country-option {
  position: relative;
  font-weight: 500 !important;
}

.country-option input {
  position: absolute;
  opacity: 0;
}

.country-option span {
  display: inline-flex;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.86rem;
  cursor: pointer;
  user-select: none;
}

.country-option input:checked + span {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

:root[data-theme='dark'] .country-option input:checked + span {
  color: var(--brand-strong);
}

.country-option input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.checkbox {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  font-weight: 500 !important;
  color: var(--text-muted);
}

.checkbox input {
  margin-top: 4px;
  accent-color: var(--brand);
}

.button[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.signup-result h2 {
  margin: 14px 0 10px;
  font-size: 1.6rem;
}

.signup-result p {
  color: var(--text-muted);
}

.signup-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink) !important;
  font-size: 0.85rem;
  font-weight: 600;
}

:root[data-theme='dark'] .signup-result-badge {
  color: var(--brand-strong) !important;
}

.key-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 24px;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand-soft);
}

.key-box code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  white-space: normal !important;
  font-size: 0.86rem !important;
}

.key-box .button {
  height: 36px;
  padding: 0 14px;
}

.signup-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* The invitation to a call: after the key, and beside the contact form. */
.signup-call {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 12px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.95rem;
}

.signup-call .button-link:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* The booking page: the text column of the signup page beside the Iterola
   calendar. The frame fills its card to the rounded edge and brings its own
   ground. The calendar does not report its height, so the frame is as tall as
   its tallest step, a full day of times (800px, measured 11 November 2026),
   and never scrolls inside. */
.booking-topics {
  margin: 20px 0 0;
  color: var(--text-muted);
}

.booking-write {
  margin: 28px 0 0;
  font-weight: 550;
}

.booking-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.booking-frame {
  display: block;
  width: 100%;
  height: 860px;
  border: 0;
}

/* Until the script gives the frame its address there is nothing to show. */
.booking-frame[hidden] {
  display: none;
}

.booking-fallback {
  margin: 0;
  padding: 14px 24px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.booking-frame:not([hidden]) + .booking-fallback {
  border-top: 1px solid var(--border);
}

.contact-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 28px 0 0;
  font-weight: 550;
}

/* Legal and coverage */
.legal {
  padding: 64px 0 96px;
}

.legal h1 {
  margin-bottom: 10px;
}

.legal-body h2 {
  margin: 36px 0 12px;
  font-size: 1.25rem;
}

.legal-body p {
  color: var(--text-muted);
}

.coverage-tools {
  margin-bottom: 16px;
}

.search-field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: min(420px, 100%);
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-subtle);
}

.search-field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.coverage-note {
  margin-top: 16px;
  font-size: 0.88rem;
}

/* ---------- Search dialog ---------- */
.search-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 120px));
  margin: 80px auto auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.search-dialog::backdrop {
  background: rgba(5, 15, 14, 0.45);
  backdrop-filter: blur(3px);
}

.search-dialog-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text-subtle);
}

.search-dialog-input input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}

.search-results {
  max-height: 480px;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  list-style: none;
}

.search-results a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text) !important;
  text-decoration: none !important;
}

.search-results a[aria-selected='true'],
.search-results a:hover {
  background: var(--brand-soft);
}

.search-result-title {
  font-weight: 600;
}

.search-result-text {
  display: block;
  overflow: hidden;
  color: var(--text-subtle);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-empty {
  padding: 24px;
  color: var(--text-subtle);
  text-align: center;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 40px;
}

.footer-brand p {
  max-width: 300px;
  margin-top: 14px;
  color: var(--text-subtle);
  font-size: 0.92rem;
}

.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-title {
  margin-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-footer nav a {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 32px;
  border-top: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: 0.85rem;
}

.footer-bottom p {
  margin: 0;
}

/* ---------- Medicine pages ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.section-tight {
  padding: 64px 0;
}

.section-tight .section-heading {
  margin-bottom: 28px;
}

/* Search */
.search-hero h1 {
  max-width: 18ch;
  text-wrap: balance;
}

.search-hero .hero-lead {
  max-width: 62ch;
}

/* The hero keeps the page's left edge and limits its own measure, so the
   heading, the field and the sections below share one margin. */
.search-hero-inner > * {
  max-width: 820px;
}

.medicine-search {
  margin-top: 32px;
}

.medicine-search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 20px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text-subtle);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.medicine-search-field:focus-within {
  border-color: var(--brand);
  box-shadow:
    var(--shadow),
    0 0 0 4px var(--brand-glow);
}

.medicine-search-field input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.08rem;
  caret-color: var(--brand);
}

.medicine-search-field input::placeholder {
  color: var(--text-muted);
}

.medicine-search-field input::-webkit-search-cancel-button {
  appearance: none;
}

.medicine-search-hint {
  margin: 12px 0 0 20px;
  color: var(--text-subtle);
  font-size: 0.9rem;
}

.medicine-results {
  margin-top: 20px;
}

.medicine-results[aria-busy='true'] .result-list {
  opacity: 0.55;
  transition: opacity 0.2s ease 0.15s;
}

.medicine-results:empty {
  margin-top: 0;
}

.result-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.result-list li + li {
  border-top: 1px solid var(--border);
}

.result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 24px;
  align-items: start;
  padding: 14px 20px;
  color: var(--text);
  text-decoration: none !important;
}

.result:hover,
.result:focus-visible {
  background: var(--bg-subtle);
}

.result:focus-visible {
  outline-offset: -2px;
}

.result-main,
.result-aside {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.result-aside {
  justify-items: end;
  text-align: right;
}

.result-name {
  color: var(--link);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.result:hover .result-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.result-detail,
.result-holder,
.result-kind {
  color: var(--text-subtle);
  font-size: 0.87rem;
  overflow-wrap: anywhere;
}

.result-detail {
  color: var(--text-muted);
}

.result-message {
  margin: 0;
  padding: 18px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

/* A search that failed is not one that found nothing. */
.result-message.is-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  border-style: solid;
  border-color: var(--danger);
  color: var(--danger);
}

.result-caption {
  margin: 0 0 10px 4px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.search-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 8px 0 0 20px;
  font-size: 0.9rem;
}

.search-codes-label {
  color: var(--text-muted);
}

.search-codes a {
  font-weight: 600;
}

.result-more {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.code-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.87rem;
  white-space: nowrap;
}

.code-pair-label {
  color: var(--text-subtle);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.code-pair code {
  font-variant-numeric: tabular-nums;
}

/* Code lookups */
.lookup-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lookup-links a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none !important;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}

.lookup-links a:hover {
  border-color: var(--brand);
}

.lookup-links a:hover .icon {
  transform: translateX(3px);
}

.lookup-links .icon {
  color: var(--brand-strong);
  transition: transform 0.15s ease;
}

.lookup-code {
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}

.lookup-title {
  font-weight: 550;
}

.lookup-about {
  display: grid;
  gap: 4px;
}

.lookup-about > * {
  max-width: 820px;
}

.lookup-about p {
  /* About 75 characters of this face; 70ch ran to 98. */
  max-width: 56ch;
  color: var(--text-muted);
}

.lookup-about h2 {
  margin-bottom: 14px;
}

.lookup-about h3 {
  margin: 28px 0 12px;
}

.lookup-example {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.lookup-sources {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.lookup-sources li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

/* Breadcrumbs */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  color: var(--text-subtle);
  font-size: 0.9rem;
}

.breadcrumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--border-strong);
}

.breadcrumbs [aria-current] {
  max-width: 48ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Record and name pages */
.record-hero {
  padding-bottom: 44px;
}

.record-name {
  max-width: 28ch;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.record-subtitle {
  max-width: none;
}

.record-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.record-codes .code-pair {
  font-size: 0.95rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.record-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}

.record-main > h2 {
  margin-bottom: 18px;
  font-size: 1.45rem;
}

.record-heading {
  margin: 36px 0 12px;
}

.record-facts {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--border);
}

.record-facts > div {
  display: grid;
  grid-template-columns: minmax(140px, 0.38fr) minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.record-facts dt {
  color: var(--text-subtle);
  font-size: 0.92rem;
}

.record-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.document-list,
.name-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.document-list a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.record-raw {
  margin-top: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.record-raw summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  list-style: none;
  font-weight: 600;
  cursor: pointer;
}

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

.record-raw[open] summary .icon {
  transform: rotate(180deg);
}

.record-raw .code {
  margin: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  border-width: 1px 0 0;
}

.record-raw pre {
  max-height: 520px;
}

.provenance {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.provenance h2 {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.provenance-source {
  margin: 0 0 4px;
}

.provenance-attribution {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.provenance-facts {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.provenance-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.provenance-facts dt {
  color: var(--text-subtle);
  font-size: 0.9rem;
}

.provenance-facts dd {
  margin: 0;
  text-align: right;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.provenance-limits {
  margin-top: 20px;
}

.provenance-limits h3 {
  margin-bottom: 8px;
  font-size: 0.92rem;
}

.provenance-limits ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.provenance-limits li + li {
  margin-top: 6px;
}

.record-api .code {
  min-width: 0;
}

.record-api h2 + .lead {
  margin-top: 14px;
}

.records-table {
  table-layout: fixed;
}

/* By class, because the holder and status columns are left out when no
   listed record has one; the codes take whatever remains. */
.records-table .records-name {
  width: 39%;
}

.records-table .records-holder {
  width: 24%;
}

.records-table .records-status {
  width: 17%;
}

.records-table td {
  overflow-wrap: break-word;
}

/* A long label ("Número de registro") beside a long code does not fit the
   column, and wrapping only that pair left the cell half stacked. */
.record-codes-cell .code-pair {
  display: grid;
  /* The code keeps its own width; stretched, it reads as an input field. */
  justify-items: start;
  gap: 2px;
  white-space: normal;
}

.record-codes-cell .code-pair + .code-pair {
  margin-top: 8px;
}

.record-link {
  font-weight: 600;
}

.record-detail {
  display: block;
  margin-top: 2px;
  color: var(--text-subtle);
  font-size: 0.87rem;
}

.name-facets {
  display: grid;
  gap: 28px;
  /* The jump link at the top of the list lands here, below the fixed header. */
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.name-facet h3 {
  margin-bottom: 10px;
  color: var(--text-subtle);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.name-facet ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.name-facet li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.name-facet li > :first-child {
  min-width: 0;
}

.name-facet-count {
  flex: none;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.pagination > :last-child {
  justify-self: end;
}

.pagination > :first-child {
  justify-self: start;
}

.pagination-current {
  color: var(--text-subtle);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* The way from the top of a name's list to its breakdown, which sits beside
   the list on a wide screen and after all of it on a narrow one. */
.name-jump {
  display: none;
}

@media (max-width: 1024px) {
  .record-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .provenance {
    position: static;
  }

  .name-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    font-weight: 600;
  }
}

@media (max-width: 720px) {
  .section-tight {
    padding: 48px 0;
  }

  .medicine-search-field {
    padding-left: 16px;
  }

  .medicine-search-field > .icon {
    display: none;
  }

  .medicine-search-hint,
  .search-codes {
    margin-left: 4px;
  }

  .result {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 14px 16px;
  }

  .result-aside {
    justify-items: start;
    text-align: left;
  }

  .record-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  /* Every row the same shape: wrapping only the long ones left some
     publishers at the right edge and others under the name. */
  .lookup-sources li {
    flex-direction: column;
    gap: 2px;
  }

  .records-table thead {
    display: none;
  }

  .records-table tr {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
  }

  .records-table td {
    padding: 0;
    border: 0;
  }

  .records-table td:empty {
    display: none;
  }

  .records-table,
  .records-table tbody {
    display: block;
  }
}

/* ---------- Pricing ---------- */
.pricing-hero h1 {
  max-width: 20ch;
  text-wrap: balance;
}

.pricing-notice {
  display: inline-block;
  margin: 0 0 24px;
  padding: 10px 16px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 550;
}

.pricing-notice[data-outcome='cancelled'] {
  border-color: var(--border-strong);
  background: var(--bg-muted);
  color: var(--text-muted);
}

/* The free plan beside the larger ones: a narrow card that is complete in
   itself, and a wide one that leads to a call. */
.plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.plan {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 20px;
  padding: 28px 24px 32px;
  border-left: 1px solid var(--border);
}

.plan:first-child {
  border-left: 0;
}

.plan-larger {
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  padding: 28px 32px 32px;
}

.plan h2 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.plan-audience {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
}

.plan-amount {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plan-period {
  color: var(--text-subtle);
  font-size: 0.92rem;
}

/* A plan is a quarter of the grid, and a translated label can be longer than
   that ("Kostenlosen Schlüssel erhalten"): the button wraps instead of
   pushing the card's contents past its padding. */
.plan > * {
  min-width: 0;
}

.plan .button {
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 8px 16px;
  white-space: normal;
  text-align: center;
}

.plan-features {
  display: grid;
  align-content: start;
  gap: 10px;
  margin: 4px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  font-size: 0.93rem;
}

.plan-features li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.plan-features .icon {
  margin-top: 4px;
  color: var(--brand-strong);
}

.plan-note {
  margin: 18px 0 0;
  font-size: 0.9rem;
}

/* What the API applies to each larger plan. Rows are ruled, not boxed: the
   table already sits in the plans panel. */
.plan-levels {
  align-self: start;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.plan-levels th,
.plan-levels td {
  padding: 14px 0 14px 24px;
  border-top: 1px solid var(--border);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.plan-levels th:first-child {
  padding-left: 0;
}

.plan-levels thead th {
  padding-top: 0;
  padding-bottom: 10px;
  border-top: 0;
  color: var(--text-subtle);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: bottom;
}

/* The plan and what it is for get the room; numbers need little. */
.plan-levels thead th:first-child {
  width: 36%;
}

.plan-levels thead th:last-child {
  width: 28%;
}

.plan-levels .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.plan-levels td.numeric {
  white-space: nowrap;
}

.plan-level-name {
  display: block;
  font-weight: 650;
}

.plan-level-audience {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.plan-level-none {
  color: var(--text-subtle);
}

.plan-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.plan-call p {
  flex: 1 1 300px;
  max-width: 58ch;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.5;
}

/* After `.plan .button`, which makes the free card's button fill its card. */
.plan-call .button {
  flex: none;
  width: auto;
  white-space: nowrap;
}

/* The checkout and billing-portal forms below are not on the page since
   11 November 2026, when prices came off it "for now". Their styles and the
   behaviour in client.js stay for the day they return. */

.billing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
}

.billing-forms {
  display: grid;
  gap: 28px;
}

.billing-card {
  display: grid;
  gap: 20px;
}

.plan-choice {
  gap: 8px;
}

.plan-choice legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Written under .plan-choice: an option is a label inside a .field, and
   `.field label` would otherwise take its padding away. */
.plan-choice .plan-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

/* Hover tints the row; only the chosen one takes the brand border. */
.plan-choice .plan-option:hover {
  background: var(--bg-subtle);
}

.plan-choice .plan-option:has(input:checked),
.plan-choice .plan-option:has(input:checked):hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.plan-choice .plan-option:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Drawn, not native: the browser's unselected radio is a grey disc on the
   dark surface. */
.plan-choice .plan-option input {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  /* The ring is the control's boundary and has to read at 3:1 or better:
     the subtle text colour gives 5.3:1 on white and 5.6:1 on the dark
     surface, where a border token gave 1.4:1. */
  border: 1.5px solid var(--text-subtle);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}

.plan-choice .plan-option input:checked {
  border-color: var(--brand);
  background: radial-gradient(var(--brand) 0 45%, var(--surface) 50%);
}

/* The ring is on the whole option, not on the radio inside it. */
.plan-choice .plan-option input:focus {
  box-shadow: none;
}

.plan-option-name {
  font-weight: 600;
}

.plan-option-price {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.billing-portal h3 {
  margin-bottom: 6px;
}

.billing-portal > .muted {
  margin-bottom: 14px;
  font-size: 0.92rem;
}

.billing-portal-row,
.export-row {
  display: flex;
  gap: 10px;
}

.billing-portal-row input,
.export-row input,
.billing-card input[type='password'] {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

/* After the rule that draws the field, which it has to override. */
.billing-card input[type='password'][aria-invalid='true'],
.billing-portal-row input[aria-invalid='true'] {
  border-color: var(--danger);
}

.billing-card .form-error:empty,
.billing-portal .form-error:empty {
  display: none;
}

/* Export control of a list page */
.list-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 18px;
}

.list-heading h2 {
  font-size: 1.45rem;
}

.export {
  display: grid;
  justify-items: end;
  gap: 12px;
}

.export > .button {
  height: 38px;
  padding: 0 16px;
  font-size: 0.9rem;
}

.export-form {
  display: grid;
  gap: 8px;
  width: min(440px, 100%);
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}

.export-form label {
  font-size: 0.9rem;
  font-weight: 600;
}

.export-form .muted {
  margin: 0;
  font-size: 0.87rem;
}

.export-status {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.export-status:empty {
  display: none;
}

.export-status[data-state='error'] {
  color: var(--danger);
}

.export-status[data-state='done'] {
  color: var(--text);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .billing-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 900px) {
  .plan-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan {
    border-left: 0;
  }

  .plan + .plan {
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 640px) {
  .plan-larger {
    padding: 28px 24px 32px;
  }

  /* Four columns do not fit a phone: each plan becomes a block, and every
     value carries the heading of its column. The roles in the markup keep it
     a table for assistive technology. */
  .plan-levels thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .plan-levels,
  .plan-levels tbody,
  .plan-levels tr,
  .plan-levels th,
  .plan-levels td {
    display: block;
  }

  .plan-levels tr {
    padding: 18px 0;
    border-top: 1px solid var(--border);
  }

  .plan-levels tbody tr:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .plan-levels th,
  .plan-levels td {
    padding: 0;
    border-top: 0;
  }

  .plan-levels td,
  .plan-levels td.numeric {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    text-align: right;
    white-space: normal;
  }

  .plan-levels td::before {
    flex: none;
    max-width: 55%;
    color: var(--text-muted);
    text-align: left;
    content: attr(data-label);
  }

  .plan-call .button {
    width: 100%;
  }

  .billing-portal-row,
  .export-row {
    flex-direction: column;
  }

  /* In a column the row's `flex: 1` would size the field's height from a
     basis of zero and collapse it to a sliver. */
  .billing-portal-row input,
  .export-row input {
    flex: none;
    width: 100%;
  }

  .export {
    justify-items: stretch;
    width: 100%;
  }
}

/* ---------- Responsive ---------- */
/* The search box keeps its label only where every translated header fits
   with it (Spanish needs about 1,280px). */
@media (max-width: 1320px) {
  .search-button {
    min-width: 0;
  }

  .search-button .search-label,
  .search-button kbd {
    display: none;
  }
}

@media (max-width: 1240px) {
  .docs-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .docs-toc {
    display: none;
  }
}

@media (max-width: 1024px) {
  .hero-grid,
  .split,
  .signup-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .endpoint-code {
    position: static;
  }

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

  .feature:nth-child(3n) {
    border-right: 1px solid var(--border);
  }

  .feature:nth-child(2n) {
    border-right: 0;
  }

  .feature:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--border);
  }

  .feature:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .docs-cards-3,
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* The navigation folds into the menu button before the longest translated
   labels would crowd the header (Spanish needs about 1,130px). */
@media (max-width: 1200px) {
  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    box-shadow: var(--shadow);
  }

  body[data-nav-open] .site-nav {
    display: flex;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

@media (max-width: 900px) {
  .header-cta {
    display: none;
  }

  .docs-shell,
  .docs-shell-wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .docs-sidebar {
    display: none;
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  body[data-docs-open] .docs-sidebar {
    display: block;
  }

  .docs-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.9rem;
    justify-self: start;
  }

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

  .stat:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

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

@media (max-width: 640px) {
  /* Sides only. As a shorthand this also zeroed the top and bottom padding
     of the footer rows, which are containers, so on a phone the footer sat
     against whatever came before it. */
  .container,
  .docs-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Four figures in two short rows, not a screen of their own. */
  .stat {
    padding: 16px;
  }

  .stat-value {
    font-size: 1.45rem;
  }

  .stat-label {
    font-size: 0.82rem;
  }

  .section {
    padding: 64px 0;
  }

  .hero {
    padding: 56px 0 48px;
  }

  .feature-grid,
  .usecase-grid,
  .docs-cards,
  .docs-cards-3,
  .facts,
  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .feature:last-child {
    border-bottom: 0 !important;
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Side by side while both fit; once they wrap, each fills its row. */
  .cta-actions {
    width: 100%;
  }

  .cta-actions .button {
    flex: 1 1 auto;
  }

  .signup-card {
    padding: 22px;
  }

  .header-inner {
    gap: 12px;
  }

  .header-actions {
    gap: 6px;
  }

  .locale-menu {
    position: fixed;
    left: 16px;
    right: 16px;
    width: auto;
    top: calc(var(--header-height) + 8px);
  }

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

  .docs-pagination {
    flex-direction: column;
  }

  .endpoint-link {
    flex-wrap: wrap;
  }

  .endpoint-link span:last-child {
    margin-left: 0;
    width: 100%;
  }

  .code-tabs .code-title {
    display: none;
  }

  .code-tabs .code-copy {
    margin-left: auto;
  }
}

/* The phone header keeps its gutter: the globe alone opens the locale menu. */
@media (max-width: 480px) {
  .locale-current {
    display: none;
  }
}

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

[data-profile-form] {
  margin-top: 32px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}