/* ==========================================================================
   AlfaRF — corporate stylesheet
   No external dependencies. System font stack, CSS custom properties.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Corporate navy — the two ends of the logo tile's gradient, so every dark
     surface on the site is made of the same colours as the mark sits on. */
  --navy-deep:  #050b14;
  --navy-lift:  #132845;
  --tile: radial-gradient(120% 120% at 50% 12%, var(--navy-lift) 0%, var(--navy-deep) 100%);

  /* Metal — the logo's own light range, for the mark and for type on navy. */
  --metal-100:  #eef2f7;
  --metal-200:  #d3dbe6;
  --metal-300:  #a9b7c8;
  --metal-400:  #7c8ca1;

  /* Neutrals */
  --ink:        #0a1626;
  --ink-2:      #10233a;
  --ink-3:      #1b3352;
  --slate-900:  #17293f;
  --slate-700:  #3d5670;
  --slate-500:  #64798f;
  --slate-400:  #8b9cb0;
  --slate-300:  #c3cedb;
  --slate-200:  #dde4ec;
  --slate-100:  #eef2f7;
  --slate-50:   #f6f8fb;
  --white:      #ffffff;

  /* Brand — one palette for both companies. */
  --accent:     #1f5fd0;
  --accent-600: #1a51b3;
  --accent-100: #e8effb;
  --signal:     #00a58e;
  --signal-100: #e0f5f1;
  --amber:      #b5731a;
  --amber-100:  #fbf1e2;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 800px;
  --radius: 4px;
  --radius-lg: 8px;
  --header-h: 68px;

  /* Elevation — deliberately restrained */
  --shadow-sm: 0 1px 2px rgba(10, 22, 38, .06);
  --shadow-md: 0 4px 16px rgba(10, 22, 38, .08);
  --shadow-lg: 0 12px 40px rgba(10, 22, 38, .12);
}


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 650; line-height: 1.22; letter-spacing: -.015em; color: var(--ink); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ---------- Utilities ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: var(--wrap-narrow); }
.stack > * + * { margin-top: 16px; }
.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -.01em; }
.center { text-align: center; }
.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; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
/* Navy, like the tile the logo is drawn on, so the mark sits in the header
   exactly as it does in brand/alfarf/alfarf-avatar.svg. Pitched a shade
   lighter than --tile rather than sharing it: the hero underneath is the
   tile, and two identical navies would leave the header with no edge. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-lift);
  background-image: linear-gradient(180deg, #162c4b 0%, #101f36 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.header-inner {
  display: flex; align-items: center; gap: 32px;
  height: var(--header-h);
}

/* Logo */
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo:hover { text-decoration: none; }
/* The mark is roughly square, so height drives the size and width follows
   from the viewBox. It is filled in currentColor. 30px rather than 27px so
   the three rays inside the A still separate at header size. */
.logo-mark { height: 30px; width: auto; flex-shrink: 0; color: var(--metal-100); }
.logo-text {
  font-size: 21px; font-weight: 700; letter-spacing: -.03em;
  color: #fff; line-height: 1;
}
.logo-text em { font-style: normal; color: var(--metal-300); }

/* The mark's interior — rays on AlfaRF, lanes on alfacores — flashes once
   every 20s, top to bottom, over one second: a dip and a bright snap back,
   three times, 0.3s apart. 85% of 20s is 17s, and a pulse runs 2% (0.4s), so
   the last one lands exactly on 18s. The delay offsets each element's whole
   cycle, so the spacing holds on every repeat instead of drifting. */
.logo-signal path { animation: logo-signal-flash 20s linear infinite; }
.logo-signal path:nth-child(2) { animation-delay: .3s; }
.logo-signal path:nth-child(3) { animation-delay: .6s; }

@keyframes logo-signal-flash {
  0%, 84.9%   { opacity: 1; fill: currentColor; }
  85.4%       { opacity: .15; fill: currentColor; }
  86%, 86.6%  { opacity: 1; fill: #fff; }
  87%, 100%   { opacity: 1; fill: currentColor; }
}

/* The switch to the other catalogue — top right of both sites, same place,
   same shape, so it is one predictable click. It sits outside .nav so it
   survives the mobile menu collapsing. */
.sister-switch {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  margin-left: 18px; padding: 6px 13px 6px 10px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 100px;
  color: var(--metal-300); background: rgba(255, 255, 255, .04);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.sister-switch:hover {
  text-decoration: none; color: #fff;
  border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .09);
}
.sister-mark { height: 21px; width: auto; flex-shrink: 0; color: var(--metal-100); }
.sister-label {
  font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap;
}
.sister-arrow { width: 12px; height: 12px; opacity: .7; }
/* The mark in the switch is a static logo, not a second thing pulsing in the
   corner: one animated mark per page is enough. */
.sister-mark .logo-signal path { animation: none; }

/* Nav */
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: var(--radius);
  font-size: 14.5px; font-weight: 550; color: var(--metal-300);
  background: none; border: 0; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.nav-link[aria-current="page"], .nav-item.is-active > .nav-link { color: #fff; }
.nav-link .caret { width: 9px; height: 9px; transition: transform .18s ease; opacity: .6; }
.nav-item { position: relative; }
.nav-item.open .caret { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 320px;
  background: var(--navy-lift);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(2, 6, 14, .55);
  padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-item.open .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown a {
  display: block; padding: 9px 12px; border-radius: var(--radius);
  color: var(--metal-100); font-size: 14.5px; font-weight: 550;
}
.dropdown a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.dropdown a small {
  display: block; font-size: 12.5px; font-weight: 400;
  color: var(--metal-400); line-height: 1.45; margin-top: 1px;
}
.dropdown-foot {
  margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12);
}
.dropdown-foot a { color: #7fb0ff; font-size: 13.5px; }

/* Header CTA */
.header-cta { flex-shrink: 0; }

/* Mobile nav toggle */
.nav-toggle {
  display: none; margin-left: auto;
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius); cursor: pointer; color: var(--metal-100);
}
.nav-toggle:hover { background: rgba(255,255,255,.08); }
.nav-toggle .bars { width: 18px; height: 12px; position: relative; }
.nav-toggle .bars span {
  position: absolute; left: 0; width: 100%; height: 1.75px;
  background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 5px; }
.nav-toggle .bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius);
  font-size: 14.5px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--slate-300); }
.btn-outline:hover { border-color: var(--slate-700); background: var(--slate-50); }
.btn-ghost { background: transparent; color: var(--accent); padding-inline: 6px; }
.btn-ghost:hover { color: var(--accent-600); }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn-lg { padding: 14px 26px; font-size: 15.5px; }
/* Dark surfaces: .on-dark bands plus the hero and interior page headers,
   which are dark by construction and do not carry the class. */
.on-dark .btn-outline,
.hero .btn-outline,
.page-header .btn-outline {
  color: #fff; border-color: rgba(255,255,255,.28);
}
.on-dark .btn-outline:hover,
.hero .btn-outline:hover,
.page-header .btn-outline:hover {
  border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06);
}

.arrow-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14.5px;
}
.arrow-link::after {
  content: "→"; transition: transform .15s ease; display: inline-block;
}
.arrow-link:hover { text-decoration: none; }
.arrow-link:hover::after { transform: translateX(3px); }

/* ---------- Sections ---------- */
.section { padding-block: 88px; }
.section-tight { padding-block: 60px; }
.section-alt { background: var(--slate-50); border-block: 1px solid var(--slate-200); }

.on-dark {
  background: var(--navy-deep); background-image: var(--tile);
  color: var(--metal-300);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark a:not(.btn) { color: #7fb0ff; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.on-dark .eyebrow { color: var(--signal); }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 38px); }
.section-head p { margin-top: 14px; font-size: 17px; color: var(--slate-700); }
.on-dark .section-head p { color: var(--slate-300); }
.section-head.center { margin-inline: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy-deep);
  background-image: var(--tile);
  color: var(--metal-300);
  padding-block: 88px 76px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute;
  top: -180px; right: -120px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(31,95,208,.34) 0%, transparent 66%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
/* One column: the hero states the position and sends you into the navigation,
   rather than trying to demonstrate the product in a side panel. */
.hero-copy { max-width: 62ch; }
.hero h1 {
  font-size: clamp(34px, 5vw, 54px);
  color: #fff; letter-spacing: -.028em;
}
.hero-lede { margin-top: 20px; font-size: 18.5px; line-height: 1.6; color: var(--slate-300); max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-strip {
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.hero-strip dt {
  font-family: var(--font-mono); font-size: 26px; font-weight: 600;
  color: #fff; letter-spacing: -.02em;
}
.hero-strip dd {
  margin: 4px 0 0; font-size: 13.5px; color: var(--slate-400); line-height: 1.45;
}

/* Caption above a diagram on a product page's hero */
.hero-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-400);
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* ---------- Page header (interior pages) ---------- */
.page-header {
  background: var(--navy-deep); background-image: var(--tile);
  color: var(--metal-300);
  padding-block: 72px 64px;
  position: relative; overflow: hidden;
}
.page-header::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(110% 100% at 85% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(110% 100% at 85% 0%, #000 0%, transparent 70%);
}
.page-header .wrap { position: relative; z-index: 1; }
.page-header h1 { color: #fff; font-size: clamp(30px, 4.2vw, 44px); max-width: 20ch; }
.page-header .lede { margin-top: 18px; font-size: 18px; color: var(--slate-300); max-width: 68ch; }

/* Breadcrumb */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--slate-400); margin-bottom: 18px;
  list-style: none;
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: rgba(255,255,255,.25); }
.crumbs a { color: var(--slate-400); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #fff; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.card h3 { font-size: 18px; }
.card p { margin-top: 10px; color: var(--slate-700); font-size: 14.8px; }
a.card:hover, .card-link:hover { border-color: var(--slate-300); box-shadow: var(--shadow-md); text-decoration: none; }
.card-icon {
  width: 40px; height: 40px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: var(--accent-100); color: var(--accent);
  border-radius: var(--radius);
}
.card-icon svg { width: 20px; height: 20px; }
.card-foot { margin-top: 18px; }

.card-num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--slate-400); letter-spacing: .08em;
}

/* Family card (IP portfolio overview) */
.family-card { display: flex; flex-direction: column; }
.family-card .count {
  font-family: var(--font-mono); font-size: 12px; color: var(--slate-500);
  letter-spacing: .06em; text-transform: uppercase;
}
.family-card ul {
  list-style: none; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--slate-200);
  display: grid; gap: 7px;
}
.family-card ul li {
  font-size: 13.6px; color: var(--slate-700);
  padding-left: 15px; position: relative;
}
.family-card ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--slate-300);
}
.family-card .card-foot { margin-top: auto; padding-top: 20px; }

/* ---------- Spec / data tables ---------- */
/* position: relative so absolutely positioned descendants (e.g. .sr-only labels
   in a header cell) are clipped with the table instead of escaping the scroll
   container and widening the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 14.2px;
  min-width: 640px;
}
table.data caption {
  text-align: left; font-size: 13px; color: var(--slate-500);
  padding-bottom: 10px;
}
table.data th, table.data td {
  text-align: left; padding: 13px 16px;
  border-bottom: 1px solid var(--slate-200);
  vertical-align: top;
}
table.data thead th {
  font-size: 11.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .08em; color: var(--slate-500);
  border-bottom: 1px solid var(--slate-300);
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }

/* Family group heading row inside the catalogue */
table.data tr.family-row th {
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-300);
  border-top: 1px solid var(--slate-300);
  font-size: 12px; font-weight: 650; letter-spacing: .09em;
  text-transform: uppercase; color: var(--slate-700);
  padding: 11px 16px;
}
table.data tr.family-row th a { color: inherit; }
table.data tr.family-row th a:hover { color: var(--accent); text-decoration: none; }
table.data tr.family-row:hover th { background: var(--slate-100); }
table.data tbody:first-of-type tr.family-row th { border-top: 0; }
table.data tbody tr:hover { background: var(--slate-50); }
table.data td.pn { white-space: nowrap; }
table.data .pn code {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--ink);
}

/* Compact key/value spec grid */
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td {
  text-align: left; padding: 9px 0; border-bottom: 1px solid var(--slate-200);
  vertical-align: top;
}
.spec-table th {
  font-weight: 550; color: var(--slate-500); width: 40%;
  padding-right: 20px; font-size: 13.4px;
}
.spec-table td { color: var(--slate-900); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* ---------- IP core entry (category pages) ---------- */
.core {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}
.core + .core { margin-top: 20px; }
.core-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 16px 24px; padding: 22px 26px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--slate-50);
}
.core-head .pn {
  font-family: var(--font-mono); font-size: 13px; font-weight: 650;
  color: var(--accent); letter-spacing: .02em;
  background: var(--accent-100); padding: 4px 9px; border-radius: 3px;
  flex-shrink: 0;
}
.core-head h3 { font-size: 18.5px; flex: 1 1 260px; }
.core-head h3 span { display: block; font-size: 14px; font-weight: 450; color: var(--slate-700); margin-top: 5px; }
.core-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px; padding: 24px 26px 26px;
}
.core-body > div > p { font-size: 14.8px; color: var(--slate-700); }
.core-body h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--slate-500); font-weight: 650; margin-bottom: 12px;
}
.core-features { list-style: none; display: grid; gap: 8px; margin-top: 18px; }
.core-features li {
  position: relative; padding-left: 20px;
  font-size: 14.2px; color: var(--slate-700);
}
.core-features li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 6px; height: 6px; background: var(--signal);
  border-radius: 1px; transform: rotate(45deg);
}

/* Link from a family listing entry to its datasheet page */
.core-doc-link {
  font-size: 13px; font-weight: 600; color: var(--accent);
  padding: 5px 11px; border: 1px solid var(--slate-300); border-radius: 100px;
  background: var(--white); white-space: nowrap;
}
.core-doc-link:hover {
  text-decoration: none; border-color: var(--accent); background: var(--accent-100);
}
table.data td.doc { white-space: nowrap; }
table.data td.doc a { font-size: 13.2px; font-weight: 600; }

/* ---------- Datasheet pages ---------- */
.doc-header .doc-title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px;
}
.pn-badge {
  font-family: var(--font-mono); font-size: 14px; font-weight: 650;
  letter-spacing: .02em; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  padding: 5px 12px; border-radius: 4px;
}
.doc-header .status { color: var(--slate-300); }

.doc-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; padding: 20px 24px; margin-bottom: 28px;
  border: 1px solid var(--slate-200); border-radius: var(--radius-lg);
  background: var(--slate-50);
}
.doc-meta dt {
  font-size: 11px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .09em; color: var(--slate-500);
}
.doc-meta dd { margin: 5px 0 0; font-size: 14.5px; color: var(--ink); font-weight: 550; }

.doc-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 56px; align-items: start; margin-top: 36px;
}
.doc-content { font-size: 15.8px; }
.doc-content > h2:first-child { margin-top: 0; }
.doc-content h2 {
  font-size: 20px; margin-top: 42px; padding-bottom: 10px;
  border-bottom: 1px solid var(--slate-200); scroll-margin-top: 90px;
}
.doc-content ul { padding-left: 20px; }
.spec-table.doc-specs { min-width: 480px; }
.spec-table.doc-specs th { width: 34%; }
table.data.doc-revisions { min-width: 460px; font-size: 13.6px; }

.doc-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
.doc-toc {
  border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 20px 22px;
}
.doc-toc h4 {
  font-size: 11px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .09em; color: var(--slate-500); margin-bottom: 12px;
}
.doc-toc ol { list-style: decimal; padding-left: 18px; display: grid; gap: 7px; }
.doc-toc li { font-size: 13.6px; color: var(--slate-500); }
.doc-toc a { color: var(--slate-700); }
.doc-toc a:hover { color: var(--accent); text-decoration: none; }
.doc-actions p { font-size: 14px; color: var(--slate-700); }

/* ---------- System solution pages ---------- */
.sys-hero-visual {
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.035); padding: 24px;
}
.sys-flow { display: grid; gap: 10px; }
.sys-flow-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.sys-block {
  padding: 12px 14px; border-radius: var(--radius); text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  font-size: 13.5px; color: #e6edf6;
}
.sys-block.is-core {
  background: rgba(31,95,208,.22); border-color: rgba(96,150,240,.45);
}
.sys-block small {
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--signal); margin-top: 4px; letter-spacing: .04em;
}
.sys-arrow { color: rgba(255,255,255,.3); font-size: 14px; }

/* Impairment / capability grid */
.effect-group + .effect-group { margin-top: 36px; }
.effect-group > h3 {
  font-size: 15px; padding-bottom: 10px; margin-bottom: 18px;
  border-bottom: 1px solid var(--slate-200);
}
.effect-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.effect-list li { font-size: 14.6px; color: var(--slate-700); }
.effect-list strong { display: block; color: var(--ink); font-weight: 600; font-size: 15px; }
.effect-list span { display: block; margin-top: 3px; line-height: 1.55; }

.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.metric {
  padding: 22px 24px; border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg); background: var(--white);
}
.metric dt {
  font-family: var(--font-mono); font-size: 26px; font-weight: 650;
  color: var(--ink); letter-spacing: -.02em;
}
.metric dd { margin: 6px 0 0; font-size: 13.6px; color: var(--slate-700); line-height: 1.5; }
.on-dark .metric { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.13); }
.on-dark .metric dt { color: #fff; }
.on-dark .metric dd { color: var(--slate-300); }

/* Tags / pills */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 550;
  padding: 3px 8px; border-radius: 3px;
  background: var(--slate-100); color: var(--slate-700);
  border: 1px solid var(--slate-200); white-space: nowrap;
}
.tag-pill.is-signal { background: var(--signal-100); color: #00705f; border-color: #b9e6de; }
.tag-pill.is-amber  { background: var(--amber-100); color: #8a5510; border-color: #ecd9bd; }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--slate-700);
  white-space: nowrap;
}
.status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
}
.status.is-dev::before { background: var(--amber); }
.status.is-roadmap::before { background: var(--slate-400); }

/* ---------- Catalog filter bar ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 18px 0 22px; border-bottom: 1px solid var(--slate-200);
  margin-bottom: 8px;
}
/* Row 1: search box + result count. Row 2: family chips, always full width —
   seven chips plus a search field never fit on one line at any real viewport. */
.filter-search {
  position: relative; flex: 1 1 320px; min-width: 220px; order: 0;
}
.filter-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--slate-400); pointer-events: none;
}
.filter-search input {
  width: 100%; padding: 10px 14px 10px 36px;
  border: 1px solid var(--slate-300); border-radius: var(--radius);
  font-family: inherit; font-size: 14.5px; color: var(--ink); background: var(--white);
}
.filter-search input::placeholder { color: var(--slate-400); }
.filter-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; flex: 1 0 100%; order: 2; }
.chip {
  padding: 7px 13px; border-radius: 100px;
  border: 1px solid var(--slate-300); background: var(--white);
  font-family: inherit; font-size: 13.4px; font-weight: 550; color: var(--slate-700);
  cursor: pointer; transition: all .14s ease;
}
.chip:hover { border-color: var(--slate-500); }
.chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.filter-count {
  font-family: var(--font-mono); font-size: 13px; color: var(--slate-500);
  margin-left: auto; white-space: nowrap; order: 1;
}
.no-results {
  padding: 56px 24px; text-align: center; color: var(--slate-500); font-size: 15px;
}

/* ---------- Feature list (with rule) ---------- */
.rule-list { list-style: none; display: grid; gap: 0; }
.rule-list li {
  padding: 20px 0; border-bottom: 1px solid var(--slate-200);
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px;
}
.rule-list li:first-child { border-top: 1px solid var(--slate-200); }
.rule-list dt, .rule-list .k {
  font-weight: 600; color: var(--ink); font-size: 15px;
}
.rule-list .v { color: var(--slate-700); font-size: 14.8px; }
.on-dark .rule-list li { border-color: rgba(255,255,255,.12); }
.on-dark .rule-list .k { color: #fff; }
.on-dark .rule-list .v { color: var(--slate-300); }

/* ---------- Steps / process ---------- */
.steps { list-style: none; counter-reset: step; display: grid; gap: 0; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px;
  padding: 24px 0; border-bottom: 1px solid var(--slate-200);
}
.steps li:first-child { border-top: 1px solid var(--slate-200); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 13px; font-weight: 650;
  color: var(--accent); padding-top: 3px;
}
.steps h3 { font-size: 16.5px; }
.steps p { margin-top: 7px; color: var(--slate-700); font-size: 14.8px; }

/* ---------- Callout / CTA band ---------- */
.cta-band { padding-block: 72px; }
.cta-band .inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 32px;
}
.cta-band h2 { font-size: clamp(24px, 3vw, 32px); max-width: 24ch; }
.cta-band p { margin-top: 12px; color: var(--slate-300); max-width: 52ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }

.callout {
  border: 1px solid var(--slate-200); border-left: 3px solid var(--accent);
  background: var(--slate-50); border-radius: var(--radius);
  padding: 20px 24px; font-size: 14.8px; color: var(--slate-700);
}
.callout strong { color: var(--ink); }

/* Must follow .callout — same specificity, so source order decides. */
.callout-warn {
  background: var(--amber-100);
  border-color: #ecd9bd; border-left-color: var(--amber);
}
.callout-warn strong { color: #7a4a0c; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; }
.form-row { display: grid; gap: 18px; }
.form-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field label {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px;
}
.field label .req { color: #c0392b; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--slate-300); border-radius: var(--radius);
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--white);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100);
}
.field .hint { font-size: 12.5px; color: var(--slate-500); margin-top: 6px; }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--slate-700); }
.checkbox-row input { width: auto; margin-top: 3px; flex-shrink: 0; }

.contact-block + .contact-block { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--slate-200); }
.contact-block h3 { font-size: 15.5px; }
.contact-block p, .contact-block address {
  margin-top: 8px; font-style: normal; font-size: 14.6px;
  color: var(--slate-700); line-height: 1.7;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep); background-image: var(--tile);
  color: var(--metal-400);
  padding-block: 64px 0; font-size: 14.2px;
}
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 40px; padding-bottom: 48px;
}
.footer-brand .logo-mark { color: var(--metal-100); }
.footer-brand p { margin-top: 16px; color: var(--slate-400); max-width: 34ch; line-height: 1.65; }
.footer-col h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em;
  color: #fff; font-weight: 650; margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { color: var(--slate-400); font-size: 14px; }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 24px 32px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 13.2px; color: var(--slate-500);
}
.footer-bottom a { color: var(--slate-500); }
.footer-bottom a:hover { color: #fff; text-decoration: none; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- Prose (about / legal) ---------- */
.prose { font-size: 16.4px; color: var(--slate-700); line-height: 1.72; }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-size: 26px; margin-top: 44px; }
.prose h3 { font-size: 19px; margin-top: 34px; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose li { padding-left: 4px; }
.prose strong { color: var(--ink); font-weight: 620; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* The switch's label is the first thing to go where the header gets tight, and
   it comes back once the nav has collapsed and the room is there again.

   1120px rather than the ~1005px where it actually starts to bind: the header
   is sized in system fonts, so the same five links and the same question are
   several per cent wider on one platform than another, and a margin of a few
   pixels is not a margin. */
@media (max-width: 1120px) {
  .header-inner { gap: 20px; }
  .nav-link { padding-inline: 9px; }
  .sister-label { display: none; }
  .sister-switch { margin-left: 10px; gap: 6px; padding: 6px 9px; }
}

@media (max-width: 1000px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track refuses to shrink below its
     content, so the wide spec tables would push the page sideways. */
  .doc-body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .doc-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .effect-list { grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-flow-row { grid-template-columns: 1fr; }
  .sys-arrow { display: none; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .core-body { grid-template-columns: 1fr; gap: 24px; }
  .hero-strip { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* 960px: measured, not guessed. At 960 the five nav links, the logo and the
   switch exactly fill the wrap, so anything narrower has to collapse. */
@media (max-width: 960px) {
  /* The toggle is ordered last so the switch stays hard against the right
     edge with the hamburger outboard of it, rather than the other way round
     once .nav drops out of the flex row. */
  .nav-toggle { display: inline-flex; order: 1; margin-left: 0; }
  .sister-switch { margin-left: auto; padding: 6px 13px 6px 10px; gap: 9px; }
  .sister-label { display: block; }
  .header-cta { display: none; }
  /* Positioned against .site-header, not the viewport: the header's
     backdrop-filter makes it the containing block for fixed descendants too,
     so `position: fixed; bottom: 0` would collapse to the header's height.
     Absolute + an explicit height sidesteps that entirely. */
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    background: var(--navy-deep); flex-direction: column; align-items: stretch;
    gap: 0; padding: 16px 24px 40px; margin: 0;
    overflow-y: auto; border-top: 1px solid rgba(255,255,255,.09);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav.open { transform: none; opacity: 1; visibility: visible; }
  .nav-link { width: 100%; justify-content: space-between; padding: 14px 4px; font-size: 16px; }
  .nav-item { border-bottom: 1px solid rgba(255,255,255,.09); }
  .dropdown { background: none; box-shadow: none; }
  .dropdown {
    position: static; transform: none; min-width: 0; opacity: 1; visibility: visible;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 12px 4px;
    display: none; pointer-events: auto;
  }
  .nav-item.open .dropdown { display: block; transform: none; }
  .nav .btn { margin-top: 20px; width: 100%; }
}

/* A phone fits the logo, the switch and the toggle, but not the label too. */
@media (max-width: 600px) {
  .sister-label { display: none; }
  .sister-switch { gap: 6px; padding: 6px 9px; }
}

@media (max-width: 700px) {
  .section { padding-block: 60px; }
  .cta-band { padding-block: 56px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row.two { grid-template-columns: 1fr; }
  .rule-list li { grid-template-columns: 1fr; gap: 8px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .hero { padding-block: 72px 64px; }
  .page-header { padding-block: 52px 48px; }
  .core-head { padding: 18px; }
  .core-body { padding: 20px 18px 22px; }
  .filter-count { margin-left: 0; width: 100%; }
  .doc-aside { grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .site-footer, .cta-band, .filter-bar, .nav-toggle { display: none !important; }
  body { color: #000; }
  .hero, .page-header, .on-dark { background: #fff !important; color: #000 !important; }
  .hero h1, .page-header h1, .on-dark h2, .on-dark h3 { color: #000 !important; }
}