/* Self-hosted fonts (SIL Open Font License 1.1, see /fonts/OFL.txt). No third-party requests. */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/space-grotesk-latin-500.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: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/space-grotesk-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/space-grotesk-latin-600.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: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/space-grotesk-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-sans-latin-400.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: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-sans-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-sans-latin-500.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: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-sans-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex-sans-latin-600.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: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex-sans-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-sans-arabic-400.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex-sans-arabic-600.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-latin-400.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: 400; font-display: swap; src: url('/fonts/jetbrains-mono-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono-latin-500.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: 500; font-display: swap; src: url('/fonts/jetbrains-mono-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/*
 * Design tokens: DESIGN.md §5–7. Components use only these values.
 * Each colour is light-dark(<light>, <dark>): the page follows the visitor's system theme
 * (color-scheme: light dark) until they pick one, which sets data-theme on <html>.
 * Code cards stay dark in both themes (color-scheme: dark on the card).
 */
:root {
  color-scheme: light dark;

  --color-ink: light-dark(#f6f8fb, #0a0f1e);
  --color-band: light-dark(#edf1f7, #0d1428);
  --color-deep: light-dark(#e6ebf3, #070b16);
  --color-surface: light-dark(#ffffff, #111a30);
  --color-hairline: light-dark(#e1e6ef, #1a2440);
  --color-line: light-dark(#d5dce8, #22304f);
  --color-ring: light-dark(#c9d2e3, #3a4a70);
  --color-outline: light-dark(#7a879e, #56688f);
  --color-muted: light-dark(#56627a, #9aa6bf);
  --color-soft: light-dark(#2b3650, #c9d2e3);
  --color-mist: light-dark(#0a0f1e, #e8edf7);
  --color-signal: #2fe3c2;
  --color-signal-hover: #5bebd1;
  --color-signal-press: #22c9ab;
  --color-on-signal: #0a0f1e;
  /* Signal as text, icon or thin line: the bright teal fails contrast on light backgrounds. */
  --color-signal-text: light-dark(#087563, #2fe3c2);
  --color-indigo: light-dark(#4f5fd9, #7b8cff);
  --color-deep-teal: #0b8f78;
  --color-danger: light-dark(#c2362f, #ff7a7a);
  /* The logo: the kit's logo-light.svg and logo-dark.svg colours. */
  --color-logo-ring: light-dark(#c9d2e3, #3a4a70);
  --color-logo-core: light-dark(#0b8f78, #2fe3c2);
  --color-logo-pse: light-dark(#0a0f1e, #e8edf7);
  --color-logo-word: light-dark(#4a5876, #9aa6bf);

  --font-display: 'Space Grotesk', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-chip: 8px;
  --radius-header-button: 10px;
  --radius-control: 12px;
  --radius-step: 14px;
  --radius-card: 18px;
  --radius-panel: 20px;
  --radius-cta: 24px;
  --radius-pill: 999px;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-72: 72px;
  --space-96: 96px;
  --space-104: 104px;

  --container: 1200px;
  --gutter: var(--space-32);
  --section-y: var(--space-96);
  --duration-hover: 150ms;
  --duration-menu: 200ms;
  --duration-hero: 900ms;
  --duration-fade: 200ms;
}

:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }
.code-card, .terminal { color-scheme: dark; }

/* Arabic: IBM Plex Sans Arabic for headings and body, no negative tracking (§6). */
:root:lang(ar) {
  --font-display: 'IBM Plex Sans Arabic', 'Space Grotesk', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
}

@media (max-width: 639px) {
  :root {
    --gutter: var(--space-20);
    --section-y: 64px;
  }
}

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

html { scroll-padding-top: var(--space-96); }

body {
  margin: 0;
  background: var(--color-ink);
  color: var(--color-soft);
  font: 400 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; color: var(--color-mist); font-family: var(--font-display); font-weight: 600; }

.display { font-size: clamp(44px, 6.4vw, 68px); line-height: 1.02; letter-spacing: -0.04em; }
.title { font-size: clamp(34px, 4.6vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.title-sm { font-size: clamp(28px, 3.6vw, 36px); line-height: 1.1; letter-spacing: -0.03em; }
.title-cta { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
.title-card { font-size: clamp(22px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -0.01em; }
.title-small { font-size: 20px; line-height: 1.25; }

:lang(ar) :is(.display, .title, .title-sm, .title-cta, .title-card) { letter-spacing: 0; line-height: 1.3; }

[hidden] { display: none !important; }

p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code, pre { font-family: var(--font-mono); }

.lead { max-width: 36rem; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; color: var(--color-soft); }

:focus-visible { outline: 2px solid var(--color-mist); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: var(--space-16); inset-block-start: calc(-1 * var(--space-56)); z-index: 30;
  padding: var(--space-12) var(--space-16); border-radius: var(--radius-control);
  background: var(--color-signal); color: var(--color-on-signal); font-weight: 600;
}
.skip-link:focus { inset-block-start: var(--space-12); }

/* The "→" in links mirrors in right-to-left pages (§10). */
.arrow { display: inline-block; }
[dir='rtl'] .arrow { transform: scaleX(-1); }
.arrow-back { transform: scaleX(-1); }
[dir='rtl'] .arrow-back { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: color, background-color, border-color !important; animation: none !important; }
}

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }
.section-products { padding-block: var(--space-104) var(--space-40); }
.section-compact { padding-block: var(--space-72); }
.section-band { background: var(--color-band); border-block: 1px solid var(--color-hairline); }
.section-head { display: grid; gap: var(--space-16); margin-block-end: var(--space-40); }

.split { display: flex; flex-wrap: wrap; gap: var(--space-56); align-items: center; }
.split > * { flex: 1 1 460px; min-width: 0; }

.grid { display: grid; gap: var(--space-20); }
.grid-products { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-markets { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-security { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: var(--space-32); }
.grid-flow { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--space-14); }
.grid-features { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-12) var(--space-28); }

/* Header (§10) */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--color-ink); border-block-end: 1px solid var(--color-hairline); }
.header-inner { display: flex; align-items: center; gap: var(--space-32); padding-block: var(--space-16); }
.brand { display: inline-flex; flex: none; }
.brand svg { display: block; height: 32px; width: auto; }
.logo-ring { stroke: var(--color-logo-ring); }
.logo-arc { stroke: var(--color-logo-core); }
.logo-dot { fill: var(--color-logo-core); }
.logo-pse { fill: var(--color-logo-pse); }
.logo-word { fill: var(--color-logo-word); }
.site-menu { display: flex; align-items: center; gap: var(--space-32); flex: 1; }
.main-nav { display: flex; align-items: center; gap: var(--space-24); margin-inline: auto; }
.nav-link {
  display: inline-flex; align-items: center; gap: var(--space-4); min-height: 44px; padding: 0;
  border: 0; background: none; color: var(--color-soft); font: 400 15px/1 var(--font-sans); cursor: pointer;
  transition: color var(--duration-hover) ease-out;
}
.nav-link:hover, .nav-link[aria-current='page'] { color: var(--color-mist); }
.nav-link .chevron { transition: transform var(--duration-hover) ease-out; }
.nav-link[aria-expanded='true'] .chevron { transform: rotate(180deg); }
.nav-item { position: relative; }
.header-actions { display: flex; align-items: center; gap: var(--space-20); }
.lang { display: flex; gap: var(--space-12); font-size: 14px; }
.lang a { color: var(--color-muted); transition: color var(--duration-hover) ease-out; }
.lang a:hover, .lang [aria-current] { color: var(--color-mist); }
/* Theme toggle: a moon while the page is light, a sun while it is dark. */
.theme-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: none;
  border: 1px solid var(--color-line); border-radius: var(--radius-header-button); background: none; color: var(--color-soft); cursor: pointer;
  transition: color var(--duration-hover) ease-out, border-color var(--duration-hover) ease-out;
}
.theme-toggle:hover { color: var(--color-mist); border-color: var(--color-outline); }
.theme-toggle .icon-sun, :root[data-theme='dark'] .theme-toggle .icon-moon { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme='light']) .theme-toggle .icon-moon { display: none; }
}
.sign-in { font-size: 14px; color: var(--color-soft); }
.sign-in:hover { color: var(--color-mist); }
.menu-toggle {
  display: none; margin-inline-start: auto; width: 44px; height: 44px; place-items: center;
  border: 1px solid var(--color-outline); border-radius: var(--radius-header-button); background: none; color: var(--color-mist); cursor: pointer;
}

/* Products disclosure panel. Without JavaScript it opens on focus-within. */
.products-panel {
  position: absolute; inset-block-start: calc(100% + var(--space-12)); inset-inline-start: calc(-1 * var(--space-24));
  width: 560px; padding: var(--space-12); display: none; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  background: var(--color-ink); border: 1px solid var(--color-line); border-radius: var(--radius-panel);
}
.products-panel.is-open, html:not(.js) .nav-item:focus-within .products-panel { display: grid; }
.panel-link { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12); border-radius: var(--radius-control); }
.panel-link:hover { background: var(--color-surface); }
.panel-link strong { display: block; color: var(--color-mist); font: 600 15px/1.3 var(--font-display); }
.panel-link span span { color: var(--color-muted); font-size: 14px; }
.panel-all { grid-column: 1 / -1; padding: var(--space-12); color: var(--color-soft); font-size: 14px; font-weight: 500; }
.panel-all:hover { color: var(--color-mist); }

@media (max-width: 899px) {
  .brand svg { height: 28px; }
  .menu-toggle { display: inline-grid; }
  .header-inner { flex-wrap: wrap; }
  .site-menu {
    flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--space-20); padding-block: var(--space-8) var(--space-24);
    transition: opacity var(--duration-menu) ease-out, transform var(--duration-menu) ease-out;
  }
  .js .site-menu:not(.is-open) { display: none; }
  .js .site-menu.is-opening { opacity: 0; transform: translateY(calc(-1 * var(--space-8))); }
  .main-nav { flex-direction: column; align-items: stretch; gap: 0; margin-inline: 0; }
  .nav-link { width: 100%; font-size: 18px; }
  .products-panel { position: static; width: auto; grid-template-columns: 1fr; border: 0; padding: 0 0 var(--space-8); }
  .header-actions { flex-wrap: wrap; justify-content: space-between; }
}

/* Footer (§10) */
.site-footer { border-block-start: 1px solid var(--color-hairline); padding-block: var(--space-56) var(--space-40); }
.footer-grid { display: grid; gap: var(--space-32); grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.footer-col h2 { margin-block-end: var(--space-16); font: 600 15px/1.4 var(--font-sans); color: var(--color-mist); }
.footer-col ul { display: grid; gap: var(--space-8); }
.footer-col a { font-size: 15px; color: var(--color-soft); }
.footer-col a:hover { color: var(--color-mist); text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-12);
  margin-block-start: var(--space-48); padding-block-start: var(--space-24);
  border-block-start: 1px solid var(--color-hairline); font-size: 14px; color: var(--color-muted);
}

/* Buttons and links (§10) */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 15px 22px;
  border: 1px solid transparent; border-radius: var(--radius-control); font: 600 16px/1.2 var(--font-sans); cursor: pointer;
  transition: background-color var(--duration-hover) ease-out, border-color var(--duration-hover) ease-out;
}
.btn-sm { padding: var(--space-12) 18px; font-size: 14px; border-radius: var(--radius-header-button); }
.btn-primary { background: var(--color-signal); color: var(--color-on-signal); }
.btn-primary:hover { background: var(--color-signal-hover); }
.btn-primary:active { background: var(--color-signal-press); }
.btn-secondary { background: transparent; border-color: var(--color-outline); color: var(--color-mist); font-weight: 500; }
.btn-secondary:hover { background: var(--color-surface); }
.text-link { color: var(--color-soft); font-weight: 500; transition: color var(--duration-hover) ease-out; }
.text-link:hover { color: var(--color-mist); text-decoration: underline; text-underline-offset: 4px; }

/* Labels */
.category { font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-signal-text); }
:lang(ar) .category { font-family: var(--font-sans); letter-spacing: 0; font-size: 13px; text-transform: none; }
.eyebrow { font: 400 13px/1.4 var(--font-mono); color: var(--color-signal-text); }
:lang(ar) .eyebrow { font-family: var(--font-sans); font-size: 14px; }
.eyebrow-pill { justify-self: start; padding: var(--space-8) var(--space-14); border: 1px solid var(--color-line); border-radius: var(--radius-pill); }
.tag {
  display: inline-block; padding: 2px var(--space-8); border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  font: 400 12px/1.4 var(--font-mono); color: var(--color-muted); vertical-align: 2px; margin-inline-start: var(--space-8);
}
.tag-standalone { justify-self: start; margin-inline-start: 0; }
.status-line { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 14px; color: var(--color-muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-signal); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); font-size: 14px; color: var(--color-muted); }

/* Chips and the scheme strip */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.chip { padding: var(--space-8) var(--space-12); border: 1px solid var(--color-line); border-radius: var(--radius-chip); font: 500 15px/1.2 var(--font-display); color: var(--color-mist); }
.scheme-strip { border-block: 1px solid var(--color-hairline); padding-block: var(--space-28); }
.scheme-strip .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16) var(--space-24); }
.scheme-strip p { font-size: 14px; color: var(--color-muted); }

/* Product icon: ring and glyph (§8) */
.product-icon { display: block; flex: none; color: var(--color-signal-text); }
.product-icon .ring { stroke: var(--color-ring); }

/* Cards */
.card { display: flex; flex-direction: column; gap: var(--space-14); padding: var(--space-28); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); transition: border-color var(--duration-hover) ease-out; }
.product-card:hover { border-color: var(--color-ring); }
.card > p:not(.category) { color: var(--color-soft); }
.card .text-link { margin-block-start: auto; padding-block-start: var(--space-8); }
.market-card { display: grid; gap: var(--space-16); align-content: start; padding: var(--space-28); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.market-card h3 { font-size: 24px; }
.bullets { display: grid; gap: var(--space-8); }
.bullets li { display: flex; gap: var(--space-12); }
.bullets li::before { content: ''; flex: none; width: 5px; height: 5px; margin-block-start: 0.7em; border-radius: 50%; background: var(--color-muted); }

/* Flow steps */
.flow-step { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-20); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-step); }
.flow-step .num { font: 400 12px/1.4 var(--font-mono); color: var(--color-muted); }
.flow-step strong { color: var(--color-mist); font: 600 19px/1.25 var(--font-display); }
.flow-step span:last-child { font-size: 14px; }
.flow-step.is-highlighted { border-color: var(--color-signal-text); }
.flow-step.is-highlighted .num { color: var(--color-signal-text); }

/* Code cards and the hero animation (§9) */
.code-card { margin: 0; min-width: 0; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-panel); overflow: hidden; }
.code-head { position: relative; display: flex; justify-content: space-between; gap: var(--space-12); padding: var(--space-14) var(--space-20); border-block-end: 1px solid var(--color-line); font: 400 13px/1.4 var(--font-mono); color: var(--color-muted); }
.code-head .endpoint { color: var(--color-signal-text); }
.code-body { margin: 0; overflow-x: auto; font-size: 14px; line-height: 1.7; }
.code-request { padding: 22px var(--space-20); color: var(--color-soft); }
.code-response { padding: 18px var(--space-20); color: var(--color-mist); border-block-start: 1px solid var(--color-line); }
.tok-key { color: var(--color-soft); }
.tok-ok { color: var(--color-signal-text); }
.tok-dim { color: var(--color-muted); }
.progress { position: absolute; inset-inline-start: 0; inset-block-end: -1px; height: 2px; width: 100%; background: var(--color-signal); transform-origin: left; animation: progress-fill var(--duration-hero) ease-out both; }
.status-swap { position: relative; }
.status-processing {
  position: absolute; inset-inline-start: 0; white-space: pre; background: var(--color-surface); color: var(--color-muted);
  animation: fade-out var(--duration-fade) ease-out var(--duration-hero) both;
}
.status-succeeded { color: var(--color-signal-text); animation: fade-in var(--duration-fade) ease-out var(--duration-hero) both; }
@keyframes progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .status-processing { opacity: 0; }
}

.terminal { margin: 0; min-width: 0; background: var(--color-deep); border: 1px solid var(--color-line); border-radius: var(--radius-card); overflow: hidden; }
.terminal .code-body { padding: var(--space-24); line-height: 1.8; color: var(--color-soft); }

/* Security items */
.security-item { display: grid; gap: var(--space-8); align-content: start; padding-block-start: 18px; border-block-start: 2px solid var(--color-signal-text); }
.security-item h3 { font-size: 20px; }
.security-item p { font-size: 15px; }

/* CTA panel */
.cta-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-32); padding: var(--space-56); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-cta); }
.cta-panel > div:first-child { display: grid; gap: var(--space-12); max-width: 36rem; }
@media (max-width: 639px) { .cta-panel { padding: var(--space-32); } }

/* Home hero */
.hero { padding-block: var(--space-96) var(--space-72); }
.hero-copy { display: grid; gap: var(--space-24); justify-items: start; }

/* Page hero for inner pages */
.page-hero { padding-block: var(--space-72) var(--space-40); }
.page-hero .container { display: grid; gap: var(--space-20); justify-items: start; }
.back-link { color: var(--color-muted); font-size: 14px; }
.back-link:hover { color: var(--color-mist); }
.product-title { display: flex; align-items: center; gap: var(--space-20); }
.product-title > div { display: grid; gap: var(--space-8); }
.promise { max-width: 36rem; color: var(--color-mist); font: 600 clamp(22px, 2.6vw, 26px)/1.25 var(--font-display); }

/* Product page */
.capabilities { display: grid; gap: var(--space-16) var(--space-40); grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.capabilities li { display: flex; gap: var(--space-12); color: var(--color-mist); }
.check-badge {
  display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; margin-block-start: 2px;
  border: 1px solid var(--color-ring); border-radius: 50%; color: var(--color-signal-text);
}
.related-card { flex-direction: row; align-items: center; gap: var(--space-16); padding: var(--space-20); }
.related-card strong { display: block; color: var(--color-mist); font: 600 19px/1.25 var(--font-display); }
.related-card span span { font-size: 14px; color: var(--color-muted); }
.related-card .arrow { margin-inline-start: auto; color: var(--color-muted); }
.related-card:hover { border-color: var(--color-ring); }
.related-card:hover .arrow { color: var(--color-signal-text); }

/* Developers and markets pages */
.style-card h3 { font-size: 20px; }
.sdk-list { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.tool-list { display: grid; gap: var(--space-20); margin-block-end: var(--space-24); }
.tool-list li { display: grid; gap: var(--space-4); }
.tool-list strong { color: var(--color-mist); font: 600 19px/1.25 var(--font-display); }
.market-section { display: grid; gap: var(--space-24); padding-block: var(--space-40); border-block-start: 1px solid var(--color-hairline); }
.market-section:first-child { border-block-start: 0; padding-block-start: 0; }
.fact-table { display: grid; gap: var(--space-12); margin: 0; }
.fact-table > div { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: var(--space-16); padding-block: var(--space-12); border-block-end: 1px solid var(--color-hairline); }
.fact-table dt { color: var(--color-muted); font-size: 15px; }
.fact-table dd { margin: 0; color: var(--color-mist); }
@media (max-width: 639px) { .fact-table > div { grid-template-columns: 1fr; gap: var(--space-4); } }

/* Long-form text: security, company, legal */
.prose { display: grid; gap: var(--space-48); max-width: 720px; }
.prose section { display: grid; gap: var(--space-12); }
.prose h2 { font-size: clamp(24px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -0.01em; }
.prose p { font-size: 17px; }
.prose a { color: var(--color-mist); text-decoration: underline; text-underline-offset: 4px; }
.legal-text { white-space: pre-line; max-width: 720px; font-size: 16px; }

.not-found .container { display: grid; gap: var(--space-24); justify-items: start; }

/* Contact form (§10 Form fields, §11 Contact) */
.contact-layout { display: flex; flex-wrap: wrap; gap: var(--space-56); align-items: flex-start; }
.contact-layout > form { flex: 1 1 460px; min-width: 0; }
.contact-layout > aside { flex: 0 1 320px; display: grid; gap: var(--space-12); }

.form { display: grid; gap: var(--space-24); }
.field { display: grid; gap: var(--space-8); }
.field-row { display: grid; gap: var(--space-24); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.label { font-size: 14px; font-weight: 500; color: var(--color-mist); }
.label .required { color: var(--color-muted); font-weight: 400; }

.input {
  width: 100%; padding: var(--space-14) var(--space-16); background: var(--color-surface); color: var(--color-mist);
  border: 1px solid var(--color-outline); border-radius: var(--radius-control); font: 400 16px/1.4 var(--font-sans);
  transition: border-color var(--duration-hover) ease-out;
}
.input:focus { border-color: var(--color-signal-text); }
textarea.input { resize: vertical; min-height: calc(6 * 1.4em + 2 * var(--space-14)); }
select.input { appearance: none; padding-inline-end: var(--space-40); }
.select-wrap { position: relative; }
.select-wrap .chevron { position: absolute; inset-inline-end: var(--space-14); inset-block-start: 50%; translate: 0 -50%; color: var(--color-soft); pointer-events: none; }

.checks-group { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.checks-group legend { margin-block-end: var(--space-8); padding: 0; }
.check-options { display: grid; gap: var(--space-4) var(--space-24); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.check { display: flex; align-items: center; gap: var(--space-12); min-height: 44px; color: var(--color-soft); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-signal); }

.is-invalid .input { border-color: var(--color-danger); }
.field-error { font-size: 14px; color: var(--color-danger); }
.field-error:empty { display: none; }
.form-status { font-size: 15px; }
.form-status:empty { display: none; }
.form-status.is-error, .form-error-target { color: var(--color-danger); }
.form-error-target { display: none; }
.form-error-target:target { display: block; }
.honeypot { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.privacy-note { font-size: 14px; color: var(--color-muted); }
.privacy-note a { color: var(--color-soft); text-decoration: underline; text-underline-offset: 4px; }

.form-success { display: grid; gap: var(--space-16); padding: var(--space-32); border: 1px solid var(--color-signal-text); border-radius: var(--radius-card); }
.form-success h2 { font-size: 24px; }