/* ─────────────────────────────────────────────────────────────────────────
   site.css — page-level styles for the gowire.ai marketing site.

   ds.css holds the Industry design system (tokens + component classes) and
   should be treated as vendor code: retune it, do not bolt page styles onto
   it. Everything specific to these pages lives here.

   The class names below replace the long inline `style="..."` attributes the
   original Claude Design export carried, so templates stay readable.
   ───────────────────────────────────────────────────────────────────────── */

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
}
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-900); }

/* — layout — */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.section { padding: 0 0 64px; }
.section-last { padding: 0 0 72px; }

/* — masthead / nav — */
.site-nav { padding-inline: max(24px, calc((100% - 1200px) / 2 + 24px)); flex-wrap: wrap; }
.site-nav .nav-brand { color: inherit; display: flex; align-items: center; gap: 10px; }
.site-nav a[aria-current="page"] { color: var(--color-text); }

/* — headings — */
.kicker {
  display: block; font-size: 13px; line-height: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700); margin-bottom: 12px;
}
.rule { height: 1px; border: 0; background: var(--color-divider); margin: 0 0 24px; }
.rule-lg { margin-bottom: 32px; }
.rule-sm { margin-bottom: 12px; }

.page-header { padding: 72px 0 48px; }
.page-title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(40px, 5.8vw, 78px); line-height: 1.03; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0 0 0 -0.05em; max-width: 22ch;
}
.page-title-wide { max-width: none; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.04; }
.section-title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.08; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0;
}
.card-title-sm {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 22px; line-height: 24px; letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0;
}
.card-title-md {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 24px; line-height: 26px; letter-spacing: 0.02em; text-transform: uppercase;
  margin: 20px 0 0;
}

/* — body copy — */
.lede { font-size: 19px; line-height: 30px; margin: 0; color: var(--color-text); }
.prose { font-size: 16px; line-height: 27px; margin: 24px 0 0; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.prose + .prose { margin-top: 20px; }
.body-sm { font-size: 15px; line-height: 24px; margin: 12px 0 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.note { font-size: 14px; line-height: 22px; margin: 16px 0 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* — split rows: narrow column of copy beside a wide panel — */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); }
.split-top { align-items: start; }
.split-end { align-items: end; }
.split-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split .measure { max-width: 44ch; }

/* — card grids — */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.pad-card { padding: 24px; }

/* Hairline grids: 1px gaps over the divider colour read as ruled cells. */
.ruled { display: grid; gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.ruled-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ruled-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ruled > * { background: var(--color-bg); }
.ruled-inset { border: 0; }

/* — numbered belief cards — */
.belief-no {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 44px; line-height: 1; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  font-feature-settings: 'tnum' 1;
}

/* — timeline — */
.timeline-row {
  border-bottom: 1px solid var(--color-divider);
  display: grid; grid-template-columns: 110px minmax(0, 4fr) minmax(0, 6fr);
  gap: 24px; padding: 20px 24px; align-items: baseline;
}
.timeline-row:last-child { border-bottom: 0; }
.timeline-year {
  font-family: var(--font-heading); font-weight: 600; font-size: 26px;
  letter-spacing: 0.02em; color: var(--color-accent-700); font-feature-settings: 'tnum' 1;
}
.timeline-title {
  font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 24px;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.timeline-body { font-size: 15px; line-height: 23px; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* — offices — */
.office-row { padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 20px; align-items: baseline; }
.office-city { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; }
.office-body { display: block; font-size: 14px; line-height: 21px; margin-top: 6px; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.office-count {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  text-align: right; color: var(--color-accent-700); font-feature-settings: 'tnum' 1;
}

/* — investors — */
.investor-cell { padding: 24px 20px; }
.investor-name {
  display: block; font-family: var(--font-heading); font-weight: 600; font-size: 20px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.investor-round {
  display: block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; margin-top: 8px; color: var(--color-accent-700);
}

/* — image frames — */
.frame { position: relative; }
.frame-4-3 { aspect-ratio: 4 / 3; }
.frame-4-5 { aspect-ratio: 4 / 5; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-empty {
  display: grid; place-items: center; height: 100%; padding: 16px; text-align: center;
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* — team — */
.person-name {
  display: block; font-family: var(--font-heading); font-weight: 600; font-size: 20px;
  line-height: 22px; letter-spacing: 0.02em; text-transform: uppercase; margin-top: 14px;
}
.person-detail { display: block; font-size: 14px; line-height: 20px; margin-top: 4px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* — facts / stats — */
.fact-cell { padding: 24px; }
.fact-value { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: 0.02em; font-feature-settings: 'tnum' 1; }
.fact-label { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-top: 12px; color: var(--color-accent-700); }
.fact-note { font-size: 14px; line-height: 20px; margin: 8px 0 0; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* — teams / process / benefits — */
.team-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.team-size, .step-when {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap; color: var(--color-accent-700); font-feature-settings: 'tnum' 1;
}
.step-row { padding: 20px 24px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px; gap: 20px; align-items: baseline; }
.step-no { font-family: var(--font-heading); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: 0.02em; color: color-mix(in srgb, var(--color-accent) 55%, transparent); font-feature-settings: 'tnum' 1; }
.step-title { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 22px; letter-spacing: 0.02em; text-transform: uppercase; }
.step-body { display: block; font-size: 15px; line-height: 22px; margin-top: 6px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.step-when { text-align: right; }
.benefit-cell { padding: 20px 24px; }
.benefit-tag { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-700); }
.benefit-body { font-size: 15px; line-height: 22px; margin: 8px 0 0; }

/* — roles table — */
.roles-table { table-layout: fixed; }
.roles-table th { font-size: 13px; font-weight: 600; padding: 12px 24px 12px 0; }
.roles-table th:first-child { padding-left: 24px; }
.roles-table td { padding: 14px 24px 14px 0; font-size: 15px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.roles-table td:first-child { padding-left: 24px; font-size: 16px; font-weight: 600; color: var(--color-text); }
.roles-table td:last-child { text-align: right; }
.roles-table td:last-child a { font-size: 14px; font-weight: 600; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.filter { cursor: pointer; white-space: nowrap; border: 1px solid var(--color-divider); background: none; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.filter[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent); color: #f2f2f3; }

/* — closing call to action — */
.cta { padding: clamp(28px, 4vw, 48px); background: var(--color-accent-900); }
.cta-title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0; color: #f2f2f3; max-width: 30ch;
}
.cta-body { font-size: 16px; line-height: 26px; margin: 20px 0 0; max-width: 52ch; color: color-mix(in srgb, #f2f2f3 78%, transparent); }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.cta .btn-secondary { color: #f2f2f3; border-color: color-mix(in srgb, #f2f2f3 45%, transparent); }
.cta .btn-secondary:hover { background: color-mix(in srgb, #f2f2f3 12%, transparent); color: #f2f2f3; }

/* — footer — */
.site-footer { border-top: 1px solid var(--color-divider); }

/* — stub pages — */
.stub { padding: 96px 0 120px; max-width: 60ch; }

/* — responsive: the source design was drawn at 1440px; these collapse it — */
@media (max-width: 980px) {
  .split, .split-flip { grid-template-columns: minmax(0, 1fr); }
  .grid-3, .ruled-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4, .ruled-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-row { grid-template-columns: 80px minmax(0, 1fr); }
  .timeline-row .timeline-body { grid-column: 2; }
}
@media (max-width: 620px) {
  .grid-3, .grid-4, .ruled-3, .ruled-4 { grid-template-columns: minmax(0, 1fr); }
  .page-header { padding: 48px 0 32px; }
  .timeline-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .timeline-row .timeline-body { grid-column: auto; }
  .office-row, .step-row { grid-template-columns: minmax(0, 1fr); }
  .office-count, .step-when { text-align: left; }
  .roles-table, .roles-table thead, .roles-table tbody, .roles-table tr, .roles-table th, .roles-table td { display: block; }
  .roles-table thead { display: none; }
  .roles-table tr { border-bottom: 1px solid var(--color-divider); padding: 12px 0; }
  .roles-table td { padding: 2px 24px; }
  .roles-table td:last-child { text-align: left; }
}

/* — utilities — */
.self-start { align-self: start; }
.measure-wide { max-width: 68ch; }
.mt-20 { margin-top: 20px; }
.mb-28 { margin-bottom: 28px; }
.hero-aside { font-size: 16px; line-height: 26px; margin: 0; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
/* Text for screen readers only — used to give repeated "Apply" links a
   distinct accessible name without changing the visible design. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.note.mb-28 { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Home, Product, Developers, Company, Legal, API reference, Brand
   ═══════════════════════════════════════════════════════════════════════ */

.wrap-wide { max-width: 1440px; padding: 0 clamp(20px, 4vw, 56px); }

.nav-badge {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; color: var(--color-accent-700);
}

/* — home hero — */
.hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding: 88px 0 64px; }
.hero-title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(44px, 6vw, 84px); line-height: 1.04; letter-spacing: 0.01em;
  text-transform: uppercase; margin: 0 0 0 -0.052em;
}
.hero-title span { display: block; }
.hero-lede { font-size: 17px; line-height: 28px; max-width: 54ch; margin: 28px 0 0; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; }

/* — quote panel — */
.quote-panel { padding: 24px; }
.quote-row { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 8px; }
.quote-field + .quote-field { margin-top: 16px; }
.quote-out {
  display: flex; align-items: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 22px;
  letter-spacing: 0.02em; font-feature-settings: 'tnum' 1;
}
.quote-table { margin-top: 24px; }
.quote-table td { font-size: 14px; padding: 8px 0; }
.quote-table td:last-child { text-align: right; font-feature-settings: 'tnum' 1; }
.quote-table tr:last-child td { border-bottom: 0; }
.quote-table .muted-cell { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.quote-panel .btn-block { margin-top: 24px; }
.quote-disclaimer { font-size: 13px; line-height: 20px; margin: 12px 0 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* — logo wall — */
.logo-cell {
  padding: 24px 16px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 20px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.ruled-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ruled-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* — sheet header: the ruled strip across the top of a blueprint panel — */
.sheet-head { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--color-divider); }
.sheet-head > * {
  padding: 12px 24px; font-size: 13px; line-height: 24px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; white-space: nowrap;
}
.sheet-head > .grow { flex: 1; min-width: 16ch; white-space: normal; }
.sheet-head > * + * { border-left: 1px solid var(--color-divider); }
.sheet-head .dim { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.sheet-head .accent { color: var(--color-accent-700); }

/* — metrics table — */
.metric-table { table-layout: fixed; }
.metric-table th { font-size: 13px; font-weight: 600; padding: 12px 24px 12px 0; }
.metric-table th:first-child, .metric-table td:first-child { padding-left: 24px; }
.metric-table td { padding: 12px 24px 12px 0; font-size: 15px; }
.metric-no { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-accent-700); font-feature-settings: 'tnum' 1; }
.metric-value { font-family: var(--font-heading); font-weight: 600; font-size: 24px; letter-spacing: 0.02em; font-feature-settings: 'tnum' 1; white-space: nowrap; }
.metric-note { color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* — numbered step cards (home) — */
.step-no-lg {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 48px; line-height: 1; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  font-feature-settings: 'tnum' 1;
}
.grid-3-lg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.section-title-lg {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1.06; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0 0 32px; max-width: 30ch;
}

/* — comparison table — */
.compare-table { table-layout: fixed; }
.compare-table th { font-size: 13px; font-weight: 600; padding: 12px 24px 12px 0; }
.compare-table th:first-child, .compare-table td:first-child { padding-left: 24px; }
.compare-table th:nth-child(2) { color: var(--color-accent-700); }
.compare-table td { padding: 14px 24px 14px 0; font-size: 15px; }
.compare-table td:nth-child(2) { font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: 0.02em; font-feature-settings: 'tnum' 1; }
.compare-table td:nth-child(3) { color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* — pricing — */
.plan-price { font-family: var(--font-heading); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: 0.02em; margin: 20px 0 0; font-feature-settings: 'tnum' 1; }
.plan-unit { font-size: 13px; line-height: 20px; margin: 8px 0 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.plan-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan-lines li { font-size: 15px; line-height: 22px; display: grid; grid-template-columns: 16px 1fr; gap: 8px; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.plan-lines .mark { color: var(--color-accent-700); }
.plan .btn-block { margin-top: 24px; }
.rule-inline { height: 1px; border: 0; background: var(--color-divider); margin: 20px 0; }

/* — code panels — */
.code-tabs { display: block; }
.code-panel { background: var(--color-accent-900); }
.code-panel pre {
  margin: 0; padding: 24px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 22px; color: #e8edf2;
}
.code-panel code { font: inherit; color: inherit; }
.code-tab-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid color-mix(in srgb, #f2f2f3 22%, transparent); }
.code-tab {
  cursor: pointer; border: 1px solid color-mix(in srgb, #f2f2f3 40%, transparent);
  background: none; color: color-mix(in srgb, #f2f2f3 80%, transparent);
}
.code-tab-input { position: absolute; opacity: 0; width: 0; height: 0; }
.code-pane { display: none; }
/* Radio N checked -> highlight label N, show pane N. Four is enough for the
   samples this site carries; add pairs here if a page needs more. */
.code-tabs > .code-tab-input:nth-of-type(1):checked ~ .code-tab-row .code-tab:nth-of-type(1),
.code-tabs > .code-tab-input:nth-of-type(2):checked ~ .code-tab-row .code-tab:nth-of-type(2),
.code-tabs > .code-tab-input:nth-of-type(3):checked ~ .code-tab-row .code-tab:nth-of-type(3),
.code-tabs > .code-tab-input:nth-of-type(4):checked ~ .code-tab-row .code-tab:nth-of-type(4) {
  border-color: #f2f2f3; background: #f2f2f3; color: var(--color-accent-900);
}
.code-tabs > .code-tab-input:nth-of-type(1):checked ~ .code-pane:nth-of-type(1),
.code-tabs > .code-tab-input:nth-of-type(2):checked ~ .code-pane:nth-of-type(2),
.code-tabs > .code-tab-input:nth-of-type(3):checked ~ .code-pane:nth-of-type(3),
.code-tabs > .code-tab-input:nth-of-type(4):checked ~ .code-pane:nth-of-type(4) { display: block; }
.code-tab-input:focus-visible ~ .code-tab-row .code-tab { outline: 2px solid #f2f2f3; outline-offset: 2px; }

/* — FAQ (native <details>, no script) — */
.faq { border-bottom: 1px solid var(--color-divider); }
.faq > summary {
  list-style: none; cursor: pointer; padding: 20px 0;
  display: grid; grid-template-columns: 1fr 24px; gap: 16px; align-items: baseline;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary:hover .faq-q { color: var(--color-accent-700); }
.faq-q { font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 26px; letter-spacing: 0.02em; text-transform: uppercase; }
.faq-sign { font-family: var(--font-heading); font-size: 22px; line-height: 26px; color: var(--color-accent-700); justify-self: end; }
.faq-sign::after { content: "+"; }
.faq[open] .faq-sign::after { content: "–"; }
.faq-a { font-size: 15px; line-height: 24px; margin: 0 0 20px; max-width: 68ch; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* — Product modules — */
.module-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.module-copy { padding: 28px 24px; border-right: 1px solid var(--color-divider); }
.module-title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; }
.module-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-divider); }
.module-specs > * { background: var(--color-bg); padding: 20px 24px; }

/* — Developers — */
.quickstart { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.quickstart li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.quickstart .no { font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: 0.02em; color: color-mix(in srgb, var(--color-accent) 55%, transparent); font-feature-settings: 'tnum' 1; }
.split-57 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.split-57.centred { align-items: center; }
.endpoint-table { table-layout: fixed; }
.endpoint-table th { font-size: 13px; font-weight: 600; padding: 12px 24px 12px 0; }
.endpoint-table th:first-child, .endpoint-table td:first-child { padding-left: 24px; }
.endpoint-table td { padding: 12px 24px 12px 0; font-size: 15px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.verb { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-accent-700); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--color-text); }
.event-name { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 600; color: var(--color-accent-700); }
.event-body { font-size: 15px; line-height: 22px; margin: 8px 0 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.resource-body { font-size: 15px; line-height: 22px; margin: 12px 0 20px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* — Company — */
.principle-row { padding: 24px; display: grid; grid-template-columns: 48px 1fr; gap: 20px; }
.principle-no { font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: 0.02em; color: color-mix(in srgb, var(--color-accent) 55%, transparent); font-feature-settings: 'tnum' 1; }
.principle-body { font-size: 15px; line-height: 23px; margin: 10px 0 0; max-width: 62ch; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.section-head-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.section-head-row .kicker { margin-bottom: 0; }
.section-head-row a { font-size: 14px; font-weight: 600; }
.contact-address { font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: 0.02em; margin: 16px 0 0; }
.contact-body { font-size: 15px; line-height: 22px; margin: 10px 0 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* — Legal — */
.doc-row {
  border-bottom: 1px solid var(--color-divider);
  display: grid; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 6fr) 140px;
  gap: 24px; padding: 20px 24px; align-items: start;
}
.doc-row:last-child { border-bottom: 0; }
.doc-no { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-accent-700); font-feature-settings: 'tnum' 1; }
.doc-title { font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 24px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text); }
.doc-title:hover { color: var(--color-accent-700); }
.doc-effective { display: block; font-size: 13px; margin-top: 6px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.doc-body { font-size: 15px; line-height: 23px; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.doc-link { display: flex; justify-content: flex-end; }
.doc-link a { font-size: 14px; font-weight: 600; white-space: nowrap; }
.entity-row { padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 20px; align-items: baseline; }
.entity-name { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; }
.entity-regulator { display: block; font-size: 14px; line-height: 20px; margin-top: 6px; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.entity-ref { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; text-align: right; color: var(--color-accent-700); font-feature-settings: 'tnum' 1; }
.complaint-no { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: 0.02em; color: color-mix(in srgb, var(--color-accent) 45%, transparent); font-feature-settings: 'tnum' 1; }
.complaint-title { font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 24px; letter-spacing: 0.02em; text-transform: uppercase; margin: 18px 0 0; }
.legal-note { font-size: 14px; line-height: 22px; margin: 24px 0 0; max-width: 80ch; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* — API reference — */
.docs-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.docs-aside { position: sticky; top: 24px; padding: 40px 0 64px; border-right: 1px solid var(--color-divider); }
.docs-version { display: flex; align-items: baseline; gap: 8px; padding-right: 24px; margin-bottom: 20px; }
.docs-version span:first-child { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.docs-aside hr { height: 1px; border: 0; background: var(--color-divider); margin: 0 24px 20px 0; }
.docs-toc { display: grid; gap: 24px; padding-right: 24px; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.docs-toc a { font-size: 14px; line-height: 20px; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.docs-toc a:hover { color: var(--color-accent-700); }
.docs-main { padding: 40px 0 96px; min-width: 0; }
.docs-h2 { font-family: var(--font-heading); font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 16px; }
.docs-p { font-size: 15px; line-height: 24px; margin: 0 0 20px; max-width: 68ch; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.docs-section { margin-bottom: 56px; }
.docs-endpoint-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.docs-endpoint-head .tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; }
.docs-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; font-weight: 600; }
.docs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.5vw, 32px); align-items: start; }
.param-head { display: block; padding: 12px 20px; border-bottom: 1px solid var(--color-divider); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.param-table { table-layout: fixed; }
.param-table td { padding: 12px 20px 12px 0; font-size: 14px; line-height: 21px; color: color-mix(in srgb, var(--color-text) 78%, transparent); vertical-align: top; }
.param-table td:first-child { padding: 12px 16px 12px 20px; width: 44%; }
.param-name { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 600; color: var(--color-text); }
.param-type { display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; color: var(--color-accent-700); }
.error-table { table-layout: fixed; }
.error-table th { font-size: 13px; font-weight: 600; padding: 12px 24px 12px 0; }
.error-table th:first-child, .error-table td:first-child { padding-left: 24px; }
.error-table td { padding: 12px 24px 12px 0; font-size: 15px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.error-status { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 600; color: var(--color-accent-700); }
.changelog-row { border-bottom: 1px solid var(--color-divider); display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; padding: 16px 24px; }
.changelog-row:last-child { border-bottom: 0; }
.changelog-date { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-700); font-feature-settings: 'tnum' 1; }
.changelog-note { font-size: 15px; line-height: 22px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.94em; }
.docs-footer { border-top: 1px solid var(--color-divider); margin-top: 56px; padding: 32px 0 0; }

/* — Brand marks — */
.mark-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.mark-kind { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; white-space: nowrap; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.mark-stage { display: flex; align-items: center; justify-content: center; padding: 40px 0 32px; color: var(--color-text); }
.mark-stage svg { max-width: 100%; height: auto; }
.mark-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--color-divider); }
.mark-pair > div { background: var(--color-bg); padding: 20px; display: flex; align-items: center; gap: 10px; }
.mark-pair > .reversed { background: var(--color-accent-900); }
.mark-lockup { font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; }
.mark-pair > .reversed .mark-lockup { color: #f2f2f3; }
.mark-note { font-size: 14px; line-height: 22px; margin: 20px 0 0; color: color-mix(in srgb, var(--color-text) 75%, transparent); }

/* — footer, sitemap mode — */
.site-footer-wide { padding: 48px 0 64px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.footer-brand {
  display: inline-block; font-family: var(--font-heading); font-weight: 600;
  font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text);
}
.footer-brand:hover { color: var(--color-accent-700); }
.footer-blurb { font-size: 13px; line-height: 20px; margin: 12px 0 0; max-width: 32ch; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.footer-col-title { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; color: var(--color-text); }
.footer-col-title:hover { color: var(--color-accent-700); }
.footer-col { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col li { font-size: 14px; line-height: 20px; }
.footer-note { font-size: 13px; line-height: 20px; margin: 48px 0 0; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* — responsive — */
@media (max-width: 980px) {
  .hero, .split-57, .module-body, .docs-split { grid-template-columns: minmax(0, 1fr); }
  .module-copy { border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .grid-3-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ruled-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-aside { position: static; border-right: 0; border-bottom: 1px solid var(--color-divider); padding-bottom: 24px; }
  .docs-toc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doc-row { grid-template-columns: 48px minmax(0, 1fr); }
  .doc-row .doc-body, .doc-row .doc-link { grid-column: 2; }
  .doc-link { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .hero { padding: 56px 0 40px; }
  .grid-3-lg, .module-specs, .ruled-5, .ruled-2, .mark-pair { grid-template-columns: minmax(0, 1fr); }
  .footer-grid, .docs-toc { grid-template-columns: minmax(0, 1fr); }
  .quote-row { grid-template-columns: minmax(0, 1fr); }
  .entity-row, .principle-row, .quickstart li { grid-template-columns: minmax(0, 1fr); }
  .entity-ref { text-align: left; }
  .changelog-row, .doc-row { grid-template-columns: minmax(0, 1fr); }
  .doc-row .doc-body, .doc-row .doc-link { grid-column: auto; }
  .metric-table, .compare-table, .endpoint-table, .error-table, .roles-table { font-size: 14px; }
  .sheet-head > * + * { border-left: 0; border-top: 1px solid var(--color-divider); }
  .sheet-head > * { width: 100%; }
}
.grid-2-lg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
@media (max-width: 780px) { .grid-2-lg { grid-template-columns: minmax(0, 1fr); } }

/* — one-off modifiers, so no template needs an inline style attribute — */
.rule-flush { margin: 0; }
.rule-xs { margin-bottom: 8px; }
.items-start { align-items: start; }
.tnum { font-feature-settings: 'tnum' 1; }
.cell-strong { font-weight: 600; color: var(--color-text); }
.metric-value-sm { font-size: 20px; }
.section-module { padding: 0 0 48px; }
.section-coverage { padding: 24px 0 72px; }
.page-lede { font-size: 16px; line-height: 26px; margin: 20px 0 0; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.page-lede-68 { max-width: 68ch; }
.page-lede-62 { max-width: 62ch; }
.docs-header { margin-bottom: 40px; }
.docs-title { font-size: clamp(36px, 4.6vw, 60px); }
.docs-p-tight { margin-bottom: 24px; }
.docs-event-cell { padding: 18px 20px; }
.docs-event-cell .event-body { font-size: 14px; line-height: 21px; margin-top: 6px; }
.toc-title { margin-bottom: 10px; }
.mark-card { padding: 28px; }
.brand-title { font-size: clamp(32px, 4vw, 52px); line-height: 1.04; margin-bottom: 0; }