/* ==========================================================================
   Neuronyx AI — base styles and components
   Requires tokens.css first. Plain CSS, no build step. Logical properties
   throughout, so <html dir="rtl"> works without extra rules.
   Class reference: STYLEGUIDE.html
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--space-4));
  hanging-punctuation: first last;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, h1, h2, h3, h4, h5, h6, li, dd, figcaption, blockquote { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
hr { border: 0; border-block-start: 1px solid var(--line); }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft-line); color: var(--text); }

/* theme change eases instead of flashing (class set briefly by components.js) */
html.nx-theme-anim, html.nx-theme-anim *, html.nx-theme-anim *::before, html.nx-theme-anim *::after {
  transition: background-color 320ms var(--ease-in-out), border-color 320ms var(--ease-in-out),
              color 320ms var(--ease-in-out), fill 320ms var(--ease-in-out) !important;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Accessibility helpers ---------- */
.sr-only {
  position: absolute !important; 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-4); inset-block-start: var(--space-3);
  z-index: calc(var(--z-nav) + 1);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--inverse); color: var(--text-on-inverse); font-weight: var(--fw-semibold);
  font-size: var(--fs-small); text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
h5, h6 { font-size: var(--fs-body); line-height: 1.4; font-weight: var(--fw-semibold); }

.lead {
  font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead);
  color: var(--text-2); font-weight: var(--fw-regular);
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow);
  color: var(--accent-text);
}
.eyebrow--muted { color: var(--text-3); }
.small { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--ls-small); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--text-3); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-accent { color: var(--accent-text); }
.center { text-align: center; }
.measure { max-inline-size: 38rem; }
.measure-wide { max-inline-size: 48rem; }
.center.measure, .center.measure-wide, .center .measure, .center .measure-wide { margin-inline: auto; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
strong, b { font-weight: var(--fw-semibold); }

/* links */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.link, .prose a {
  color: var(--accent-text);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .link:hover, .prose a:hover { background-size: 100% 1px; }
}
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.3em;
  color: var(--accent-text); font-weight: var(--fw-medium); text-decoration: none;
}
.link-arrow::after {
  content: ""; inline-size: 0.5em; block-size: 0.5em;
  border-block-start: 1.6px solid currentColor; border-inline-end: 1.6px solid currentColor;
  transform: rotate(45deg); margin-inline-start: 0.05em;
  transition: translate var(--dur-spring-snappy) var(--ease-spring-snappy);
}
[dir="rtl"] .link-arrow::after { transform: rotate(-45deg); }
@media (hover: hover) {
  .link-arrow:hover::after { translate: 0.18em 0; }
  [dir="rtl"] .link-arrow:hover::after { translate: -0.18em 0; }
}
.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* inline code + kbd */
code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--fs-code); font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
:not(pre) > code {
  padding: 0.12em 0.4em; border-radius: var(--radius-xs);
  background: var(--fill); border: 1px solid var(--line);
  font-size: 0.88em; letter-spacing: 0; white-space: nowrap;
}
kbd {
  display: inline-block; min-inline-size: 1.6em; padding: 0.05em 0.45em;
  border: 1px solid var(--line-strong); border-block-end-width: 2px; border-radius: var(--radius-xs);
  background: var(--card); font-size: 0.8em; text-align: center; letter-spacing: 0;
}

/* Arabic: own face, no tracking (it breaks joining), taller leading */
:lang(ar) { font-family: var(--font-arabic); letter-spacing: 0 !important; }
:lang(ar) body, body:lang(ar) { line-height: 1.75; }
:lang(ar) :is(h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4) {
  font-family: var(--font-arabic); font-weight: 700; letter-spacing: 0; line-height: 1.3;
}
:lang(ar) .lead { line-height: 1.7; }
:lang(ar) * { letter-spacing: 0 !important; }
.ar { font-family: var(--font-arabic); letter-spacing: 0; line-height: 1.75; }

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-inline-size: calc(var(--container-wide) + var(--gutter) * 2); }
.container--narrow { max-inline-size: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }
.section--alt { background: var(--bg-alt); }
.section--inverse { background: var(--band-inverse); color: var(--text); }  /* author with data-theme="dark" */
.section--hero { padding-block: clamp(3.5rem, 2rem + 7vw, 9rem) var(--section-y); }

.section-header { display: grid; gap: var(--space-4); margin-block-end: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); max-inline-size: 46rem; }
.section-header--center { text-align: center; margin-inline: auto; justify-items: center; }
@media (max-width: 599.98px) {
  .section-header--center { text-align: start; margin-inline: 0; justify-items: start; }
}
.section-header > .lead { max-inline-size: 40rem; }

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.stack > * { min-inline-size: 0; }
.stack--sm { --stack-gap: var(--space-2); }
.stack--lg { --stack-gap: var(--space-7); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }

.grid { display: grid; gap: var(--grid-gap, clamp(1rem, 0.7rem + 1.2vw, 1.5rem)); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--reverse > :first-child { order: 2; }
}

.divider { block-size: 1px; background: var(--line); border: 0; margin-block: var(--space-8); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --btn-h: 2.75rem;                       /* 44 px — touch target */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--btn-h);
  padding-inline: 1.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: -0.005em; line-height: 1;
  text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--dur-spring-snappy) var(--ease-spring-snappy),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
/* feedback on press, instantly */
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.97); transition-duration: var(--dur-instant); }
.btn:focus-visible { outline-offset: 3px; border-radius: var(--radius-pill); }
.btn svg { inline-size: 1.1em; block-size: 1.1em; flex: none; }

.btn--primary { background: var(--inverse); color: var(--text-on-inverse); }
.btn--secondary { background: var(--card); color: var(--text); border-color: var(--line-strong); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--accent { background: var(--accent); color: var(--accent-contrast); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--inverse-hover); }
  .btn--secondary:hover { background: var(--card); border-color: var(--text-3); }
  .btn--ghost:hover { background: var(--fill); }
  .btn--accent:hover { background: var(--accent-hover); }
}
.btn--ghost:active { background: var(--fill-strong); }

.btn--lg { --btn-h: 3.25rem; padding-inline: 1.75rem; font-size: var(--fs-body); }
.btn--sm { --btn-h: 2.25rem; padding-inline: 1rem; font-size: 0.875rem; position: relative; }
.btn--sm::before { content: ""; position: absolute; inset: -4px; } /* keeps a 44 px hit area */
.btn--block { display: flex; inline-size: 100%; }
.btn--icon { inline-size: var(--btn-h); padding: 0; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; inline-size: 1.1rem; block-size: 1.1rem;
  border-radius: 50%; border: 2px solid currentColor; border-color: var(--text-on-inverse) transparent var(--text-on-inverse) var(--text-on-inverse);
  animation: nx-spin 0.8s linear infinite;
}
.btn--secondary.is-loading::after, .btn--ghost.is-loading::after { border-color: var(--text) transparent var(--text) var(--text); }
@keyframes nx-spin { to { transform: rotate(1turn); } }

/* store / app style buttons row */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.center .btn-row, .btn-row--center { justify-content: center; }

/* ==========================================================================
   Navigation bar (translucent material, content scrolls under it)
   ========================================================================== */
.nav {
  position: sticky; inset-block-start: 0; z-index: var(--z-nav);
  background: var(--material-strong);
  transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.nav__inner {
  display: flex; align-items: center; gap: var(--space-5);
  block-size: var(--nav-h);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--text); text-decoration: none; flex: none;
  padding-block: var(--space-2); /* hit area */
  border-radius: var(--radius-xs);
}
.nav__logo { block-size: 1.3125rem; inline-size: auto; }   /* 21 px: small cut (symbol <= 24 px) */
.nav__product {
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 1rem; letter-spacing: -0.02em;
  padding-inline-start: var(--space-2); margin-inline-start: var(--space-1);
  border-inline-start: 1px solid var(--line-strong); line-height: 1.1;
}
.nav__menu { display: contents; }
.nav__links { display: none; align-items: center; gap: var(--space-1); list-style: none; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; min-block-size: 2.25rem; padding-inline: 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem; font-weight: var(--fw-medium); color: var(--text-2); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .nav__link:hover { color: var(--text); } }
.nav__link[aria-current="page"], .nav__link[aria-current="true"] { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.nav__cta { display: none; }

@media (min-width: 900px) {
  :root { --nav-h: 3.75rem; }
  .nav__menu { display: block; margin-inline-start: auto; }
  .nav__links { display: flex; }
  .nav__actions { margin-inline-start: var(--space-2); }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none !important; }
  .nav__panel { display: none !important; }
}

/* icon buttons in the bar */
.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-pill);
  color: var(--text-2); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-spring-snappy) var(--ease-spring-snappy);
}
@media (hover: hover) { .icon-btn:hover { background: var(--fill); color: var(--text); } }
.icon-btn:active { transform: scale(0.92); transition-duration: var(--dur-instant); }
.icon-btn:focus-visible { border-radius: var(--radius-pill); }
.icon-btn svg { inline-size: 1.25rem; block-size: 1.25rem; }

/* theme toggle: sun <-> moon */
.theme-toggle svg { grid-area: 1 / 1; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-spring-smooth) var(--ease-spring-smooth); }
.theme-toggle .i-moon { opacity: 0; transform: rotate(-60deg) scale(0.6); }
[data-theme-effective="dark"] .theme-toggle .i-sun { opacity: 0; transform: rotate(60deg) scale(0.6); }
[data-theme-effective="dark"] .theme-toggle .i-moon { opacity: 1; transform: none; }
[data-theme-effective="dark"] [data-theme-effective="light"] .theme-toggle .i-sun { opacity: 1; transform: none; }
[data-theme-effective="dark"] [data-theme-effective="light"] .theme-toggle .i-moon { opacity: 0; transform: rotate(-60deg) scale(0.6); }

/* hamburger -> close */
.nav__toggle .bar {
  position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  inline-size: 1.125rem; block-size: 1.5px; margin-inline-start: -0.5625rem; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-spring-smooth) var(--ease-spring-smooth);
}
.nav__toggle .bar:nth-child(1) { transform: translateY(-3.5px); }
.nav__toggle .bar:nth-child(2) { transform: translateY(3.5px); }
.nav__toggle[aria-expanded="true"] .bar:nth-child(1) { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .bar:nth-child(2) { transform: rotate(-45deg); }

/* mobile panel: grows down from the bar, links arrive top-down */
.nav__panel {
  position: fixed; inset-inline: 0; inset-block-start: var(--nav-h); block-size: calc(100dvh - var(--nav-h));
  z-index: calc(var(--z-nav) - 1);
  background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-4) var(--gutter) var(--space-10);
  visibility: hidden; opacity: 0;
  transform-origin: top center;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.nav__panel.is-open { visibility: visible; opacity: 1; transition: opacity var(--dur-base) var(--ease-out), visibility 0s; }
.nav__panel-list { list-style: none; padding: 0; display: grid; }
.nav__panel-link {
  display: flex; align-items: center; min-block-size: 3.25rem;
  font-family: var(--font-display); font-size: 1.625rem; font-weight: var(--fw-semibold); letter-spacing: -0.025em;
  color: var(--text); text-decoration: none;
  border-block-end: 1px solid var(--line);
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-spring-smooth) var(--ease-spring-smooth);
}
.nav__panel.is-open .nav__panel-link { opacity: 1; transform: none; }
.nav__panel.is-open li:nth-child(2) .nav__panel-link { transition-delay: 25ms; }
.nav__panel.is-open li:nth-child(3) .nav__panel-link { transition-delay: 50ms; }
.nav__panel.is-open li:nth-child(4) .nav__panel-link { transition-delay: 75ms; }
.nav__panel.is-open li:nth-child(5) .nav__panel-link { transition-delay: 100ms; }
.nav__panel.is-open li:nth-child(6) .nav__panel-link { transition-delay: 125ms; }
.nav__panel.is-open li:nth-child(7) .nav__panel-link { transition-delay: 150ms; }
.nav__panel-link[aria-current="page"] { color: var(--accent-text); }
.nav__panel-foot { margin-block-start: var(--space-7); display: grid; gap: var(--space-3); }
html.nx-nav-open { overflow: hidden; }
html.nx-nav-open .nav { background: var(--bg); box-shadow: 0 1px 0 var(--line); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--bg-alt);
  color: var(--text-2);
  font-size: var(--fs-small);
  padding-block: var(--space-10) var(--space-7);
  border-block-start: 1px solid var(--line);
}
.footer__top { display: grid; gap: var(--space-8); }
.footer__brand { display: grid; gap: var(--space-4); align-content: start; max-inline-size: 20rem; }
.footer__logo { color: var(--text); block-size: 1.375rem; inline-size: auto; }
.footer__tagline { color: var(--text-2); }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
.footer__heading { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: 0.01em; margin-block-end: var(--space-3); }
.footer__list { list-style: none; padding: 0; display: grid; gap: 0; }
.footer__link {
  display: inline-flex; align-items: center; min-block-size: 2.75rem;
  color: var(--text-2); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .footer__link:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; } }
.footer__bottom {
  margin-block-start: var(--space-9); padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6);
  font-size: var(--fs-caption); color: var(--text-3);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); list-style: none; padding: 0; }
.footer__legal .footer__link { color: var(--text-3); min-block-size: 2.75rem; }
.footer__hint { margin-inline-start: 0.3em; font-size: 0.85em; color: var(--text-3); }
@media (min-width: 720px) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-10); }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card--quiet { background: var(--card-2); border-color: transparent; box-shadow: none; }
.card--flat { box-shadow: none; }
.card--inverse { background: var(--band-inverse); border-color: var(--line); box-shadow: none; }  /* author with data-theme="dark" */
.card--lg { padding: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); border-radius: var(--radius-xl); }
.card--interactive {
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform var(--dur-spring-smooth) var(--ease-spring-smooth),
              box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
}
.card--interactive:active { transform: scale(0.99); transition-duration: var(--dur-fast); }
.card--interactive:focus-visible { border-radius: var(--radius-lg); }
.card__icon {
  display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: var(--radius-sm); background: var(--fill); color: var(--text);
  margin-block-end: var(--space-2);
}
.card__icon svg { inline-size: 1.375rem; block-size: 1.375rem; }
.card__eyebrow { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-3); letter-spacing: 0.01em; }
.card__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-semibold); }
.card__text { color: var(--text-2); font-size: var(--fs-small); line-height: 1.55; }
.card__footer { margin-block-start: auto; padding-block-start: var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
.card__media { margin: calc(clamp(1.5rem, 1.2rem + 1vw, 2rem) * -1); margin-block-end: var(--space-3); border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background: var(--card-2); }

/* bare feature item (no box) */
.feature { display: grid; gap: var(--space-2); align-content: start; }
.feature__icon { color: var(--text); inline-size: 1.75rem; block-size: 1.75rem; margin-block-end: var(--space-2); }
.feature__title { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--fw-semibold); }
.feature__text { color: var(--text-2); font-size: var(--fs-small); }

/* stat */
.stat { display: grid; gap: var(--space-1); }
.stat__value { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); font-weight: var(--fw-semibold); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--text-2); font-size: var(--fs-small); }

/* ==========================================================================
   Badges
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-block-size: 1.5rem; padding-inline: 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--fill); color: var(--text-2);
  font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-semibold); letter-spacing: 0.01em; line-height: 1;
  white-space: nowrap; vertical-align: middle;
}
.badge--accent { background: var(--accent-soft); color: var(--accent-text); }
.badge--solid { background: var(--accent); color: var(--accent-contrast); }
.badge--inverse { background: var(--inverse); color: var(--text-on-inverse); }
.badge--outline { background: transparent; border: 1px solid var(--line-strong); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--soon { background: transparent; border: 1px dashed var(--line-strong); color: var(--text-3); }
.badge--dot::before { content: ""; inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%; background: currentColor; }
.badge--live::before {
  content: ""; inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 0 var(--success-soft); animation: nx-live 2.4s var(--ease-out) infinite;
}
@keyframes nx-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing { display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 960px) { .pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 959.98px) { .pricing--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .pricing--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 52rem; margin-inline: auto; } }
.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}
.price-card--featured { border: 1.5px solid var(--text); box-shadow: var(--shadow-lg); }
.price-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: 1.75rem; }
.price-card__name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: -0.015em; }
.price-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15em 0.35em; margin-block: var(--space-5) var(--space-2); }
.price-card__from { inline-size: 100%; font-size: var(--fs-caption); color: var(--text-3); font-weight: var(--fw-medium); }
.price-card__amount { font-family: var(--font-display); font-size: clamp(2.5rem, 2.1rem + 1.4vw, 3.25rem); font-weight: var(--fw-semibold); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-card__amount--text { font-size: clamp(2rem, 1.8rem + 0.9vw, 2.5rem); letter-spacing: -0.03em; }
.price-card__period { color: var(--text-2); font-size: var(--fs-small); }
.price-card__desc { color: var(--text-2); font-size: var(--fs-small); min-block-size: 3em; }
.price-card__cta { margin-block: var(--space-6); }
.price-card__features { list-style: none; padding: 0; display: grid; gap: var(--space-3); font-size: var(--fs-small); padding-block-start: var(--space-6); border-block-start: 1px solid var(--line); }
.price-card__features-title { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-3); margin-block-end: calc(var(--space-1) * -1); }
.price-card__features li:not(.price-card__features-title) { position: relative; padding-inline-start: 1.875rem; line-height: 1.45; }
.price-card__features li .badge { margin-inline-start: var(--space-1); vertical-align: 0.05em; }
.price-card__features li:not(.price-card__features-title)::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.1em; inline-size: 1.125rem; block-size: 1.125rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.4l3.6 3.6 7.4-8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.4l3.6 3.6 7.4-8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.price-card__features li.is-soon { color: var(--text-3); }
.price-card__features li.is-soon::before { opacity: 0.5; }
.price-card__note { margin-block-start: auto; padding-block-start: var(--space-6); font-size: var(--fs-caption); color: var(--text-3); }
.pricing-note { margin-block-start: var(--space-7); text-align: center; color: var(--text-3); font-size: var(--fs-caption); }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--card);
  background-image:
    linear-gradient(to right, var(--card), var(--card)), linear-gradient(to right, var(--card), var(--card)),
    linear-gradient(to right, var(--fill-strong), transparent), linear-gradient(to left, var(--fill-strong), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 1.25rem 100%, 1.25rem 100%, 0.75rem 100%, 0.75rem 100%;
  background-attachment: local, local, scroll, scroll;
}
.table { inline-size: 100%; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.table caption { caption-side: top; text-align: start; padding: var(--space-4) var(--space-5) 0; font-size: var(--fs-caption); color: var(--text-3); }
.table th, .table td { padding: 0.875rem var(--space-5); text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); }
.table thead th { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-3); letter-spacing: 0.01em; white-space: nowrap; background: transparent; }
.table tbody th { font-weight: var(--fw-medium); color: var(--text); min-inline-size: 10rem; }
.table tbody tr:last-child > * { border-block-end: 0; }
.table td { color: var(--text-2); }
.table .num, .table td.num, .table th.num { text-align: end; white-space: nowrap; }
.table--compact th, .table--compact td { padding: 0.625rem var(--space-4); }
.table code { white-space: nowrap; }
@media (hover: hover) { .table--hover tbody tr:hover > * { background: var(--fill); } }
.table .yes::before, .table .no::before { content: ""; display: inline-block; inline-size: 1rem; block-size: 1rem; vertical-align: -0.15em; background: currentColor; }
.table .yes { color: var(--text); }
.table .yes::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.4l3.6 3.6 7.4-8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.4l3.6 3.6 7.4-8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.table .no { color: var(--text-disabled); }
.table .no::before { block-size: 1.5px; inline-size: 0.75rem; vertical-align: 0.3em; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: var(--space-5); }
.form__grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: var(--space-2); align-content: start; }
.label { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text); }
.label .optional { color: var(--text-3); font-weight: var(--fw-regular); }
.input, .textarea, .select {
  inline-size: 100%; min-block-size: 3rem;
  padding: 0.75rem 0.95rem;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 1rem; /* 16 px — no iOS zoom */
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  appearance: none; -webkit-appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
@media (hover: hover) { .input:hover, .textarea:hover, .select:hover { border-color: var(--text-3); } }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--text);
  box-shadow: 0 0 0 4px var(--fill-strong);
}
.textarea { min-block-size: 8.5rem; resize: vertical; }
.select {
  padding-inline-end: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%2378716C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 1.1rem; background-position: right 0.85rem center;
}
[dir="rtl"] .select { background-position: left 0.85rem center; }
.hint { font-size: var(--fs-caption); color: var(--text-3); }
.field__error { display: none; font-size: var(--fs-caption); color: var(--danger); font-weight: var(--fw-medium); }
/* inline validation after the user has interacted (no red on page load) */
.input:user-invalid, .textarea:user-invalid, .select:user-invalid,
.field.is-invalid .input, .field.is-invalid .textarea, .field.is-invalid .select { border-color: var(--danger); }
.input:user-invalid:focus, .textarea:user-invalid:focus, .field.is-invalid .input:focus { box-shadow: 0 0 0 4px var(--danger-soft); }
.field:has(:user-invalid) .field__error, .field.is-invalid .field__error { display: block; }
.input:disabled, .textarea:disabled, .select:disabled { opacity: 0.55; cursor: not-allowed; }
.input--ltr { direction: ltr; text-align: start; }
[dir="rtl"] .input[type="email"], [dir="rtl"] .input[type="tel"], [dir="rtl"] .input[type="url"] { direction: ltr; text-align: end; }

.check {
  display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-small); color: var(--text-2); cursor: pointer;
  min-block-size: 2.75rem; padding-block: 0.6rem; margin-block: -0.6rem; /* 44 px row, same visual rhythm */
  -webkit-tap-highlight-color: transparent;
}
.check input {
  flex: none; appearance: none; -webkit-appearance: none; margin: 0;
  inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.1em;
  border: 1.5px solid var(--line-strong); border-radius: 0.375rem; background: var(--card);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check input[type="radio"] { border-radius: 50%; }
.check input::after {
  content: ""; inline-size: 0.75rem; block-size: 0.75rem; background: var(--text-on-inverse);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.4l3.6 3.6 7.4-8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.4l3.6 3.6 7.4-8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0); transition: transform var(--dur-spring-snappy) var(--ease-spring-bounce);
}
.check input[type="radio"]::after { -webkit-mask: none; mask: none; border-radius: 50%; inline-size: 0.5rem; block-size: 0.5rem; }
.check input:checked { background: var(--inverse); border-color: var(--inverse); }
.check input:checked::after { transform: scale(1); }
.check input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form__hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form__status {
  display: none; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  font-size: var(--fs-small); line-height: 1.5;
}
.form__status::before { content: ""; flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.05em; background: currentColor; }
.form__status.is-success { display: flex; background: var(--success-soft); color: var(--success); }
.form__status.is-success::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M6.4 10.3l2.5 2.5 4.8-5.2' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M6.4 10.3l2.5 2.5 4.8-5.2' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.form__status.is-error { display: flex; background: var(--danger-soft); color: var(--danger); }
.form__status.is-error::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M10 5.8v5.2M10 13.6v.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M10 5.8v5.2M10 13.6v.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.form__status a { color: inherit; font-weight: var(--fw-semibold); }

/* ==========================================================================
   Callouts
   ========================================================================== */
.callout {
  display: grid; gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--card-2); border: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--text-2);
}
.callout__title { font-weight: var(--fw-semibold); color: var(--text); }
.callout--accent { background: var(--accent-soft); border-color: var(--accent-soft-line); }
.callout--accent .callout__title { color: var(--accent-text); }
.callout--warning { background: var(--warning-soft); border-color: transparent; }
.callout--warning .callout__title { color: var(--warning); }

/* ==========================================================================
   Code blocks (docs) — always LTR
   ========================================================================== */
.code {
  direction: ltr; text-align: left;
  border: 1px solid var(--code-line); border-radius: var(--radius-md);
  background: var(--code-bg); color: var(--code-text);
  overflow: hidden; max-inline-size: 100%; min-inline-size: 0;
}
.code__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-block-size: 2.75rem; padding-inline: var(--space-4) var(--space-1);
  border-block-end: 1px solid var(--code-line);
  font-family: var(--font-body); font-size: var(--fs-caption); color: var(--code-comment);
}
.code__title { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-medium); }
.code__copy {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-block-size: 2.75rem; padding-inline: 0.85rem; border-radius: var(--radius-sm);
  color: var(--code-comment); font-size: var(--fs-caption); font-weight: var(--fw-medium);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .code__copy:hover { background: var(--fill); color: var(--code-text); } }
.code__copy svg { inline-size: 0.95rem; block-size: 0.95rem; }
.code__copy.is-copied { color: var(--success); }
.code pre, pre.code {
  margin: 0; padding: var(--space-4) var(--space-5);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  font-size: 0.8125rem; line-height: 1.7; tab-size: 2; letter-spacing: 0;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
@media (min-width: 640px) { .code pre, pre.code { font-size: var(--fs-code); } }
.code pre code { font-size: inherit; background: none; border: 0; padding: 0; white-space: pre; }
/* a cue that more is off to the side: components.js adds .has-more-end / .has-more-start */
.code pre.has-more-end, .table-wrap.has-more-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.code pre.has-more-start, .table-wrap.has-more-start {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}
.code pre.has-more-start.has-more-end, .table-wrap.has-more-start.has-more-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}
[dir="rtl"] .table-wrap.has-more-end {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}
[dir="rtl"] .table-wrap.has-more-start {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.tk-c { color: var(--code-comment); font-style: italic; }
.tk-k { color: var(--code-keyword); }
.tk-s { color: var(--code-string); }
.tk-n { color: var(--code-number); }
.tk-p { color: var(--code-key); }

/* API endpoint line */
.endpoint {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--bg-inset); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-code); direction: ltr; letter-spacing: 0;
  overflow-wrap: anywhere;
}
.method {
  display: inline-flex; align-items: center; min-block-size: 1.5rem; padding-inline: 0.5rem;
  border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em;
  background: var(--fill-strong); color: var(--text);
}
.method--post { background: var(--accent-soft); color: var(--accent-text); }
.method--get { background: var(--success-soft); color: var(--success); }
.method--delete { background: var(--danger-soft); color: var(--danger); }

/* parameter list */
.params { list-style: none; padding: 0; display: grid; border-block-start: 1px solid var(--line); }
.params li { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-block-end: 1px solid var(--line); }
.param__name { font-family: var(--font-mono); font-size: var(--fs-code); font-weight: 600; color: var(--text); letter-spacing: 0; }
.param__type { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); margin-inline-start: var(--space-2); font-weight: 400; }
.param__req { font-size: 0.6875rem; font-weight: var(--fw-semibold); color: var(--accent-text); margin-inline-start: var(--space-2); }
.param__desc { font-size: var(--fs-small); color: var(--text-2); }

/* ==========================================================================
   Docs layout (single page with sticky table of contents)
   ========================================================================== */
.docs { display: grid; gap: var(--space-8); padding-block: var(--space-9) var(--section-y); }
.docs__toc { display: none; }
@media (min-width: 1024px) {
  .docs { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-10); }
  .docs__toc {
    display: block; position: sticky; inset-block-start: calc(var(--nav-h) + var(--space-7));
    align-self: start; max-block-size: calc(100dvh - var(--nav-h) - var(--space-9)); overflow-y: auto;
    font-size: var(--fs-small);
  }
}
.docs__toc-title { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-3); margin-block-end: var(--space-3); }
.docs__toc-list { list-style: none; padding: 0; display: grid; gap: 0; border-inline-start: 1px solid var(--line); }
.docs__toc-list .docs__toc-list { border: 0; padding-inline-start: var(--space-3); }
.docs__toc-link {
  display: flex; align-items: center; min-block-size: 2.75rem; padding: 0.35rem var(--space-4); margin-inline-start: -1px;
  border-inline-start: 1.5px solid transparent;
  color: var(--text-2); text-decoration: none; line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .docs__toc-link:hover { color: var(--text); } }
.docs__toc-link.is-active { color: var(--text); border-inline-start-color: var(--text); font-weight: var(--fw-medium); }
.docs__content { min-inline-size: 0; max-inline-size: 55rem; }
.docs__section { padding-block-start: var(--space-9); }
.docs__section:first-child { padding-block-start: 0; }

/* long-form text */
.prose { color: var(--text-2); }
.prose > * + * { margin-block-start: var(--space-4); }
.prose h2 { color: var(--text); margin-block-start: var(--space-10); font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); }
.prose h3 { color: var(--text); margin-block-start: var(--space-8); font-size: var(--fs-h3); }
.prose h4 { color: var(--text); margin-block-start: var(--space-7); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-block-start: var(--space-3); }
.prose :is(h2, h3, h4):first-child { margin-block-start: 0; }
.prose ul, .prose ol { padding-inline-start: 1.25rem; display: grid; gap: var(--space-2); }
.prose li::marker { color: var(--text-3); }
.prose strong { color: var(--text); }
.prose .code, .prose .table-wrap, .prose .callout, .prose .endpoint { margin-block: var(--space-6); }
.prose blockquote { padding-inline-start: var(--space-5); border-inline-start: 2px solid var(--line-strong); color: var(--text); }
.prose hr { margin-block: var(--space-9); }
.anchor { color: var(--text-3); text-decoration: none; margin-inline-start: 0.35em; opacity: 0; transition: opacity var(--dur-fast); }
:is(h2, h3):hover .anchor, .anchor:focus-visible { opacity: 1; }

/* ==========================================================================
   Segmented control / tabs (e.g. cURL | Python | JavaScript)
   ========================================================================== */
.segmented {
  position: relative; display: inline-flex; padding: 3px; gap: 0;
  background: var(--fill); border-radius: var(--radius-pill);
  isolation: isolate; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented__btn {
  position: relative; z-index: 1; flex: none;
  min-block-size: 2.25rem; padding-inline: 1rem; border-radius: var(--radius-pill);
  font-size: 0.875rem; font-weight: var(--fw-medium); color: var(--text-2);
  transition: color var(--dur-base) var(--ease-out);
}
.segmented__btn[aria-selected="true"] { color: var(--text); }
.segmented__btn:focus-visible { border-radius: var(--radius-pill); outline-offset: -2px; }
.segmented__indicator {
  position: absolute; z-index: 0; inset-block: 3px; inset-inline-start: 0;
  inline-size: var(--seg-w, 0px); translate: var(--seg-x, 0px) 0;
  background: var(--segment-thumb); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: translate var(--dur-spring-smooth) var(--ease-spring-smooth), inline-size var(--dur-spring-smooth) var(--ease-spring-smooth);
}
.segmented:not(.is-ready) .segmented__btn[aria-selected="true"] { background: var(--segment-thumb); box-shadow: var(--shadow-sm); }
.tab-panel[hidden] { display: none; }
.tabs { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.tab-panel { min-inline-size: 0; }
.tabs > .segmented { justify-self: start; }

/* ==========================================================================
   FAQ / disclosure
   ========================================================================== */
.faq { border-block-start: 1px solid var(--line); }
.faq__item { border-block-end: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-block-size: 3.5rem; padding-block: var(--space-4);
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: -0.012em;
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; flex: none; inline-size: 0.6rem; block-size: 0.6rem;
  border-block-end: 1.6px solid var(--text-2); border-inline-end: 1.6px solid var(--text-2);
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--dur-spring-smooth) var(--ease-spring-smooth);
}
.faq__item[open] .faq__q::after { transform: translateY(25%) rotate(-135deg); }
.faq__a { padding-block-end: var(--space-5); color: var(--text-2); max-inline-size: 44rem; }
.faq__q:focus-visible { outline-offset: 2px; }

/* ==========================================================================
   Reveal on scroll (components.js adds .is-revealed). Hidden only when JS runs.
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform 900ms var(--ease-spring-smooth);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="scale"] { transform: scale(0.97); }
html.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ==========================================================================
   Logo: inline lockup, intro animation, thinking loader (from the brand kit)
   ========================================================================== */
.logo { color: var(--text); fill: currentColor; block-size: 1.5rem; inline-size: auto; }
.logo--md { block-size: 2.5rem; }
.logo--lg { block-size: clamp(3rem, 2rem + 4vw, 5rem); }
.logo-std { display: var(--logo-std, inline); }   /* standard cut: dark ink on light */
.logo-rev { display: var(--logo-rev, none); }     /* reversed cut: light ink on dark */
.footer__home { display: inline-block; inline-size: max-content; color: var(--text); border-radius: var(--radius-xs); }
.nx-intro { display: block; inline-size: 100%; max-inline-size: 48.75rem; block-size: auto; aspect-ratio: 1300 / 400; margin-inline: auto; }

.nx-think { display: inline-block; vertical-align: middle; color: var(--text); }
.nx-think svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.nx-press .d { transform-origin: 142px 95px; animation: nx-press 1.2s infinite; }
.nx-press.nx-small .d { animation-name: nx-press-small; }
@keyframes nx-press {
  0%        { opacity: 1;   transform: scale(1);     animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  45%       { opacity: .28; transform: scale(1.045); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  80%, 100% { opacity: 1;   transform: scale(1); }
}
@keyframes nx-press-small {
  0%        { opacity: 1;   animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  45%       { opacity: .28; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  80%, 100% { opacity: 1; }
}
.nx-seq .w { animation: nx-seq 1.6s infinite backwards; }
.nx-seq .w1 { transform-origin: 60px 126px; }
.nx-seq .w2 { transform-origin: 142px 95px; animation-delay: .16s; }
.nx-seq .w3 { transform-origin: 196px 126px; animation-delay: .32s; }
@keyframes nx-seq {
  0%        { opacity: .22; transform: scale(1.05); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  24%       { opacity: 1;   transform: scale(1);    animation-timing-function: linear; }
  62%       { opacity: 1;   transform: scale(1);    animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  88%, 100% { opacity: .22; transform: scale(1.05); }
}
@keyframes nx-calm { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ==========================================================================
   Reduced motion: no travel, no springs, only short cross-fades
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  html.js [data-reveal] { transform: none !important; transition: opacity 240ms ease !important; transition-delay: 0ms !important; }
  .btn, .icon-btn, .card--interactive, .nav__panel-link, .segmented__indicator, .theme-toggle svg, .nav__toggle .bar, .link-arrow::after, .faq__q::after, .check input::after {
    transition-property: opacity, color, background-color, border-color, box-shadow !important;
    transition-duration: 160ms !important;
  }
  .btn:active, .icon-btn:active, .card--interactive:hover, .card--interactive:active { transform: none !important; }
  .nav__panel-link { transform: none !important; }
  .badge--live::before { animation: none; }
  .nx-think .w { animation: none; transform: none; opacity: 1; }
  .nx-think .d, .nx-press.nx-small .d, .nx-seq .w2 { animation: nx-calm 2.4s ease-in-out infinite; transform: none; }
  .btn.is-loading::after { animation-duration: 1.6s; }
}

/* Windows high contrast */
@media (forced-colors: active) {
  .btn, .card, .price-card, .input, .textarea, .select, .badge { border: 1px solid CanvasText; }
  .nav { border-block-end: 1px solid CanvasText; }
}

/* Print */
@media print {
  .nav, .footer, .nav__panel, .skip-link, .theme-toggle, .code__copy { display: none !important; }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; }
}