/* SELF-HOSTED FONTS.
   Google Fonts cost two preconnects plus a render-blocking stylesheet on fonts.googleapis.com,
   which then fetched the woff2 from fonts.gstatic.com: four network trips to two third-party
   origins before a heading could paint. The same swap on coppercrest took LCP from 3.15s to 1.38s.

   Archivo keeps all three axes. The design needs them: the wordmark is weight 900 italic at width
   125%% and the display headings sit at 110%%, so dropping ital or wdth would change the design
   rather than just the loading. Archivo is one variable file per subset per style; IBM Plex Mono is
   not variable at these weights, so 400 and 500 are separate files.

   Only latin and latin-ext are shipped. German's umlauts and sharp s are all in latin.

   Licences: Archivo and IBM Plex Mono are both SIL Open Font License, which permits self-hosting.
   font-display:swap preserves the previous behaviour: text paints in the fallback immediately and
   is repainted when the webfont arrives. */
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/archivo-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/archivo-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plexmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plexmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plexmono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plexmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Peptylis — design system, sampled from the Peptylis logo.
 *
 * THE MOTIF IS A CUT, NOT A TILT.
 * The logo is a black block sheared 12 degrees with a signal-orange bar cut in beside it, and
 * the "NP" inside is counter-sheared so the letters stay upright. That is the whole system: a
 * hard diagonal edge against square, and text that never leans.
 *
 * So the 12 degrees is spent only on things that are not text: the mark, accent bars, buttons,
 * badges, section markers, the underline that travels on hover. Cards, tables and paragraphs
 * stay square. Skewing a card of French product copy would make it look like a cheap promo
 * banner, and the identity would be doing the opposite of what a research supplier needs, which
 * is to look exact.
 *
 * Tokens, sampled from the Peptylis logo rather than from a sheet:
 *   Ink    #0E2A4E (navy wordmark)    Signal #C7A156 (gold helix)    Paper #FFFFFF
 * plus the page ground #EDF1F6 and the label grey #53647A, both tinted toward the navy so the
 * greys do not read as a different brand from the headings.
 *
 * The gold exists twice on purpose. --signal is the fill; as text on white it measures 2.42:1 and
 * fails WCAG AA outright, so --signal-ink #8A6A1F carries any gold TEXT at 5.05:1. On the dark
 * ground the problem disappears (7.05:1) and both collapse back to one brighter gold.
 *
 * Type is Archivo variable, because the wordmark needs width 125% and weight 900 in italic and
 * a static cut cannot give that. IBM Plex Mono carries every number, size, SKU and label: this
 * is a catalogue where "10 mg" and "100 mg" must never be misread at a glance, and a monospace
 * figure is the cheapest guard against that.
 *
 * House rule: no em dashes.
 */

:root {
  /* Sampled from the Peptylis logo: navy wordmark, gold helix, white ground.
     --signal is the gold as a FILL. It is not readable as text on paper (2.42:1), so text that
     wants to be gold uses --signal-ink instead, which is the same hue darkened to 5.05:1. */
  --ink: #0e2a4e;
  --signal: #c7a156;
  --signal-ink: #8a6a1f;
  --paper: #ffffff;
  --ground: #edf1f6;
  --muted: #53647a;

  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 26%, transparent);
  --card: #f7f9fc;   /* cool card to sit under the navy, not the German cream */

  /* the shear, in one place, so the whole identity can be dialled from here */
  --cut: -12deg;
  --uncut: 12deg;

  --r: 4px;                     /* the sheet's radius: present, but nearly square */
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --wrap: 1180px;
  --gap: clamp(16px, 3vw, 28px);
}

/* The inverse of the sheet's second lockup: ink ground, paper text. Used for contrast bands and
   for the whole page when the reader asks for dark. */
:root:not([data-theme='light']) {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #071c36;
    --ground: #0e2a4e;
    --ink: #f1f5fa;
    --muted: #9fb0c4;
    --card: #0e2a4e;
    /* on the navy ground the gold reads 7.05:1, so the split the light theme needs collapses */
    --signal: #e3c071;
    --signal-ink: #e3c071;
    --line: color-mix(in srgb, var(--ink) 16%, transparent);
    --line-strong: color-mix(in srgb, var(--ink) 30%, transparent);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  /* must match the prefers-color-scheme block above: a reader who forces dark should not get a
     different brand from one whose system asks for it */
  --paper: #071c36;
  --ground: #0e2a4e;
  --ink: #f1f5fa;
  --muted: #9fb0c4;
  --card: #0e2a4e;
  --signal: #e3c071;
  --signal-ink: #e3c071;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 30%, transparent);
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.band { padding-block: clamp(44px, 7vw, 84px); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--ground { background: var(--ground); }
.band--tight { padding-block: clamp(28px, 4vw, 44px); }
/* Used on 86 pages and never defined, so every alternate band rendered as a plain one and the
   page had no visual rhythm at all. A tint rather than a border: the sections it separates are
   long, and a rule across the page would read as a divider between products. */
.band--alt { background: var(--card); }

/* ---------------------------------------------------------------- type */
/* Display type is Archivo at the wordmark's own settings: 900, italic, width 125%, tracked in.
   Upright, never sheared: the cut lives on the bars beside it. */
.d1, .d2, .d3 {
  font-weight: 900;
  font-style: italic;
  font-stretch: 125%;
  letter-spacing: -0.022em;
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
}
.d1 { font-size: clamp(38px, 7vw, 76px); }
.d2 { font-size: clamp(28px, 4.2vw, 46px); }
.d3 { font-size: clamp(22px, 2.6vw, 30px); }

/* A heading that is a sentence rather than a shout: still Archivo, still italic, but roman case
   and normal width, because German compound words at 125% width and all caps become unreadable
   ("BAKTERIOSTATISCHES WASSER" is 26 characters before it says anything). */
.h-sentence {
  font-weight: 800;
  font-stretch: 110%;
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-transform: none;
  font-style: normal;
  font-size: clamp(22px, 2.6vw, 32px);
  text-wrap: balance;
}

.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); max-width: 62ch; }
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose li + li { margin-top: 0.35em; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--signal-ink); }

/* Every label, number, size, SKU and price. Mono is not decoration here: it is so that 10 mg and
   100 mg cannot be confused in a list of forty of them. */
.mono, .eyebrow, .spec, .price, .sku { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* the logo's cut, reduced to a marker */
.eyebrow::before {
  content: '';
  width: 10px;
  height: 1em;
  background: var(--signal);
  transform: skewX(var(--cut));
  flex: none;
}
.band--ink .eyebrow { color: color-mix(in srgb, var(--paper) 62%, transparent); }

/* ---------------------------------------------------------------- the mark */
/* The logo, rebuilt in CSS rather than shipped as an image, so it is sharp at any size, follows
   the surrounding colour, and costs no request. Same construction as the sheet: sheared block,
   counter-sheared letters, signal bar cut in beside it. */
.mark { display: inline-flex; align-items: center; gap: 12px; }
.mark__lock { display: flex; gap: 5px; height: 34px; }
.mark__np {
  width: 46px;
  background: var(--ink);
  transform: skewX(var(--cut));
  display: grid;
  place-items: center;
}
.mark__np span {
  transform: skewX(var(--uncut));
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 110%;
  font-size: 19px;
  letter-spacing: -0.05em;
}
.mark__bar { width: 7px; background: var(--signal); transform: skewX(var(--cut)); }
.mark__word {
  font-weight: 900;
  font-style: italic;
  font-stretch: 125%;
  letter-spacing: -0.02em;
  font-size: 21px;
  line-height: 1;
  white-space: nowrap;
}
.mark__word i { font-weight: 400; font-style: italic; }
.band--ink .mark__np, .site-head--ink .mark__np { background: var(--paper); }
.band--ink .mark__np span, .site-head--ink .mark__np span { color: var(--ink); }

/* ---------------------------------------------------------------- buttons */
/* Sheared container, upright label. The hover state deepens the cut's bar rather than moving the
   button, so a pointer never has to chase it. */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 0;
  cursor: pointer;
  transform: skewX(var(--cut));
  transition: background 0.15s, color 0.15s;
}
.btn > * { transform: skewX(var(--uncut)); }
.btn::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: -9px;
  width: 6px;
  background: var(--signal);
  transition: width 0.15s ease, inset-inline-end 0.15s ease;
}
.btn:hover::after { width: 12px; inset-inline-end: -15px; }
.btn--signal { --btn-bg: var(--signal); --btn-fg: #fff; }
.btn--signal::after { background: var(--ink); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn--wide { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- badges */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  transform: skewX(var(--cut));
}
.tag > span { display: inline-block; transform: skewX(var(--uncut)); }
.tag--signal { background: var(--signal); color: #fff; }
.tag--ruo { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ---------------------------------------------------------------- header */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head__row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
  min-height: 68px;
}
/* Nine top-level items plus the logo and the cart do not fit on one line at 1180px, and a
   wrapped nav pushes the header to two rows and shunts the page down. The items never wrap; below
   the point where they stop fitting the row scrolls sideways instead, which is what a phone does
   with a tab bar and what a reader already understands. */
.site-nav { display: flex; gap: clamp(9px, 1.4vw, 18px); margin-inline-start: auto;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { white-space: nowrap; font-size: 14.5px; }
.site-nav a {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  padding-block: 6px;
}
/* the cut, as a travelling underline */
.site-nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--signal);
  transform: skewX(var(--cut)) scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: skewX(var(--cut)) scaleX(1); }
.site-head__acts { display: flex; align-items: center; gap: 10px; }
@media (max-width: 860px) {
  .site-nav { display: none; }
}

/* ---------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; background: var(--ground); }
/* One sheared plane of signal, bled off the edge. The logo's bar at page scale. */
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  inset-inline-end: -12%;
  width: 42%;
  height: 140%;
  background: var(--signal);
  transform: skewX(var(--cut));
  opacity: 0.1;
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}
.hero__facts b { color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------------- cards */
/* Square. The cut appears on the card only as a bar that grows on hover, so a grid of forty
   products reads as a catalogue and not as a stack of leaning tiles. */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--line-strong); }
.card::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 8px;
  height: 0;
  background: var(--signal);
  transform: skewX(var(--cut));
  transform-origin: top;
  transition: height 0.2s ease;
}
.card:hover::after { height: 100%; }
.card__img {
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  display: grid;
  place-items: center;
  padding: 8%;
}
.card__img img { mix-blend-mode: normal; }
.card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__name { font-weight: 700; font-size: 16.5px; line-height: 1.25; letter-spacing: -0.01em; }
.card__meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.card__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.price { font-weight: 500; font-size: 18px; }
.price--request { font-size: 13px; color: var(--muted); }
.price s { color: var(--muted); font-size: 13px; margin-inline-end: 6px; }

/* ---------------------------------------------------------------- tables */
/* The specification table on a product page. Mono on the value side, so a column of doses lines
   up digit for digit. */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: start; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 42%; font-weight: 600; font-size: 14.5px; color: var(--muted); }
.spec-table td { font-family: var(--mono); font-size: 14px; }

/* ---------------------------------------------------------------- pills */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.pill:hover { border-color: var(--ink); }
.pill[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------------------------------------------------------------- the size chooser */
/* A compound in four strengths. The chosen one takes the ink block and the cut, so the choice is
   legible at a glance from across the page. */
.sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.sizes input { position: absolute; opacity: 0; pointer-events: none; }
.sizes label {
  display: grid;
  gap: 2px;
  min-width: 96px;
  padding: 11px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}
.sizes label b { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.sizes label span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sizes label:hover { border-color: var(--ink); }
.sizes input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sizes input:checked + label span { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.sizes input:focus-visible + label { outline: 3px solid var(--signal); outline-offset: 3px; }

/* ---------------------------------------------------------------- notes */
.note {
  border-inline-start: 4px solid var(--signal);
  background: color-mix(in srgb, var(--signal) 6%, transparent);
  padding: 14px 18px;
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 15px;
}
.note--plain { border-inline-start-color: var(--line-strong); background: color-mix(in srgb, var(--ink) 4%, transparent); }
/* A legal page whose details are not filled in yet. The value is marked field by field rather than
   the whole section being deleted, so a reader can see which details are outstanding instead of a
   page that simply says nothing. Mono, because it reads as a field name awaiting a value rather
   than as prose. */
.pending {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  padding: 1px 7px;
  white-space: nowrap;
}
.note__title { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* ---------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.01em;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: '';
  flex: none;
  width: 9px;
  height: 20px;
  margin-top: 2px;
  background: var(--line-strong);
  transform: skewX(var(--cut));
  transition: background 0.15s;
}
.faq details[open] summary::before, .faq summary:hover::before { background: var(--signal); }
.faq__a { padding-bottom: 20px; max-width: 72ch; color: var(--muted); }
.faq__a > * + * { margin-top: 0.8em; }

/* ---------------------------------------------------------------- footer */
.site-foot { background: var(--ink); color: var(--paper); padding-block: clamp(40px, 6vw, 64px) 28px; }
.site-foot a { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.site-foot a:hover { color: var(--signal-ink); }
.site-foot__cols { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.site-foot h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 55%, transparent); margin-bottom: 12px; font-weight: 500; }
.site-foot li { list-style: none; margin-bottom: 7px; font-size: 14.5px; }
.site-foot__legal {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  font-size: 13px;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

/* ---------------------------------------------------------------- misc */
.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  background: var(--signal);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip:focus { inset-inline-start: 8px; }
.crumbs { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a:hover { color: var(--signal-ink); }
.crumbs span[aria-hidden] { opacity: 0.5; }
.rule { height: 1px; background: var(--line); border: 0; }
/* a section marker: the logo's two shapes, at rule scale */
.cut-rule { display: flex; gap: 5px; height: 12px; margin-bottom: 18px; }
.cut-rule i { width: 34px; background: var(--ink); transform: skewX(var(--cut)); }
.cut-rule i + i { width: 9px; background: var(--signal); }


/* ---------------------------------------------------------------- mega menu
   The compound hubs live in the header so they are one click from all 128 pages. The links are in
   the HTML on every page and only hidden with CSS, so crawling never depends on a hover.

   .site-nav scrolls horizontally at narrow widths, and an absolutely positioned child of a
   scrolling box is clipped - so the panel hangs off .site-head (sticky, therefore a containing
   block) rather than off the nav item, and the nav only gives up its overflow above 900px. */
.mega {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--ink) 55%, transparent);
}
.mega__in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px clamp(16px, 3vw, 38px);
  padding-block: 26px 30px;
}
.mega__c h3 {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.mega__c ul { list-style: none; display: grid; gap: 5px; }
.mega__c a {
  font-size: 14.5px;
  font-weight: 500;
  padding-block: 3px;
  display: inline-block;
  border-bottom: 1.5px solid transparent;
}
.mega__c a:hover { border-bottom-color: var(--signal); }
.mega__all a { color: var(--muted); }

@media (min-width: 901px) {
  .site-nav { overflow: visible; }
  .nav-has { position: static; display: inline-flex; }
  /* opens for a mouse and for a keyboard; the panel keeps itself open while the pointer is in it */
  .site-head:has(.nav-has:hover) .mega,
  .site-head:has(.nav-has:focus-within) .mega,
  .mega:hover,
  .mega:focus-within { display: block; }
}