/* Self-hosted type. Generated by tools/fonts.py — do not edit by hand.

   Zodiak (display) and Switzer (text) come from Fontshare, JetBrains Mono from Google.
   Google's files arrive pre-split with unicode-range so the browser fetches only the
   subset a page needs; Fontshare ships one file per weight, so those faces carry no
   unicode-range and are fetched whole. Every face was checked against the characters all
   five locales use before being adopted — see REQUIRED_CHARS in tools/fonts.py. */

@font-face {
  font-family: 'JetBrainsMono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-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: 'JetBrainsMono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrainsMono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-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;
}

@font-face {
  font-family: 'JetBrainsMono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrainsMono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-700-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: 'JetBrainsMono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Switzer';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/switzer-400i-all.woff2') format('woff2');
}

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/switzer-400-all.woff2') format('woff2');
}

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/switzer-500-all.woff2') format('woff2');
}

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/switzer-600-all.woff2') format('woff2');
}

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/switzer-700-all.woff2') format('woff2');
}

@font-face {
  font-family: 'Zodiak';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/zodiak-400i-all.woff2') format('woff2');
}

@font-face {
  font-family: 'Zodiak';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/zodiak-400-all.woff2') format('woff2');
}

@font-face {
  font-family: 'Zodiak';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/zodiak-700-all.woff2') format('woff2');
}

/* Reset — only what earns its place. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* The page must never be wider than the window. `body { display:flex }` in a Vite-style template
   makes the root a flex item with min-width:auto, which lets the widest child set the page width —
   so the containment is declared here, on the page, rather than hoped for. */
html, body { max-width: 100%; overflow-x: clip; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.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;
}

/* Any class that sets `display` beats the user-agent's `[hidden] { display: none }`, because a
   class and an attribute selector have the same specificity and ours comes later. That is how a
   form shipped with its Back button, its Continue button, its Submit button and an empty
   confirmation panel all on screen at once. `!important` is the correct tool here: `hidden` is
   not a style, it is a statement that the element is not currently part of the page. */
[hidden] { display: none !important; }

/**
 * Tokens.
 *
 * The site is dark by design, not by preference: it is an instrument panel, and the status palette
 * below is load-bearing — pass, review and fail are read as decisions, not decoration. So the dark
 * ground is declared once and `prefers-color-scheme: light` is deliberately not a second theme.
 * Print is, because a legal page that wastes a cartridge is a legal page nobody prints.
 *
 * Two things here are not arbitrary and should not be "simplified" later:
 *
 * 1. THE BRAND ACCENTS AVOID THE STATUS HUES. Green, amber and red mean pass, partial and fail on
 *    every surface of this site. A brand colour anywhere near those hues makes a decorative
 *    element look like a verdict, which is the one misreading this product cannot afford. Hence
 *    ice (cyan) and dusk (indigo) — two hues the status vocabulary will never use.
 *
 * 2. THERE IS A LIGHT SURFACE, AND IT IS WARM. A page that is dark from top to bottom reads as
 *    one long section however many headings it has. The bone surface exists to break that, and it
 *    is bone rather than white because warm paper against cool dark is the whole temperature
 *    contrast — white would just look like the lights came on.
 */
:root {
  color-scheme: dark;

  /* ── ground: five steps, not two. Depth is what stops a dark page reading as a flat void. */
  --void:      #05070B;   /* behind everything; the deepest point */
  --bg:        #080B11;
  --bg-2:      #0D1119;
  --panel:     #11161F;
  --panel-2:   #161C27;
  --panel-3:   #1C2431;
  --rule:      #242C3A;
  --rule-soft: #1A202B;

  /* ── bone: the warm light surface. One section per long page, never two in a row. */
  --bone:      #F2EFE9;
  --bone-2:    #E8E3DA;
  --bone-rule: #D3CCC0;
  --bone-ink:  #12161D;
  --bone-ink-2:#454C59;
  --bone-dim:  #6B7383;

  /* ── ink */
  --ink:       #EAEEF6;
  --ink-2:     #B2BCCD;
  --ink-dim:   #8D97A9;
  --ink-ghost: #6B7589;

  /* ── accents. Ice leads; dusk is the second voice that keeps ice from being the only event
        on the screen. Neither is ever used to mean "good" or "bad". */
  --ice:        #58D7F5;
  --ice-deep:   #2C8FB0;
  --ice-ghost:  rgba(88, 215, 245, 0.12);
  --dusk:       #8E8BFF;
  --dusk-deep:  #4F4BC9;
  --dusk-ghost: rgba(142, 139, 255, 0.12);
  /* kept as an alias so older rules and the diagram variables keep resolving */
  --accent:       var(--ice);
  --accent-deep:  var(--ice-deep);
  --accent-ghost: var(--ice-ghost);

  /* ── status vocabulary: these carry meaning, never styling-for-its-own-sake */
  --pass:   #4ADE80;
  --review: #F5B544;
  --fail:   #FF6B6B;
  --none:   #5A6373;
  /* The field of passes is the background; the exceptions are the message. Keeping the pass
     tint faint is what makes an amber cell findable at a glance across five markets. */
  --pass-bg:   rgba(74, 222, 128, 0.045);
  --review-bg: rgba(245, 181, 68, 0.10);
  --fail-bg:   rgba(255, 107, 107, 0.10);

  /* ── type. Three families, three jobs, none of them from the Google default set that every
        other site in this category is set in. */
  --display: Zodiak, "Iowan Old Style", Palatino, Georgia, serif;
  --sans:    Switzer, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrainsMono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--2: clamp(0.70rem, 0.69rem + 0.05vw, 0.74rem);
  --step--1: clamp(0.80rem, 0.78rem + 0.08vw, 0.86rem);
  --step-0:  clamp(0.96rem, 0.93rem + 0.14vw, 1.04rem);
  --step-1:  clamp(1.10rem, 1.04rem + 0.28vw, 1.28rem);
  --step-2:  clamp(1.32rem, 1.20rem + 0.60vw, 1.72rem);
  --step-3:  clamp(1.65rem, 1.36rem + 1.25vw, 2.5rem);
  --step-4:  clamp(2.1rem, 1.45rem + 2.9vw, 3.7rem);
  --step-5:  clamp(2.6rem, 1.5rem + 4.6vw, 5.2rem);

  /* Display type is set tighter and with a touch of optical sizing: a serif at 3.7rem needs less
     tracking than the same face at 1rem, and the default is tuned for the small case. */
  --display-tracking: -0.018em;
  --display-leading: 1.04;

  /* ── rhythm */
  --s1: 0.375rem;
  --s2: 0.75rem;
  --s3: 1.25rem;
  --s4: 2rem;
  --s5: 3.25rem;
  --s6: 5rem;
  --s7: 7.5rem;
  --s8: 10rem;

  --wrap: 1280px;
  --wrap-wide: 1440px;
  --wrap-text: 68ch;
  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.6rem);

  --r: 4px;            /* the whole site is nearly square — an instrument, not a card */
  --r-lg: 10px;
  --r-pill: 999px;

  /* ── elevation. Dark UIs cannot use shadow alone; a lifted surface needs a light top edge as
        well, or it reads as a hole rather than a plate. */
  --lift-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.5);
  --lift-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px -8px rgba(0,0,0,0.75);
  --lift-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px -20px rgba(0,0,0,0.85);
  --glow-ice:  0 0 0 1px rgba(88,215,245,0.25), 0 0 40px -12px rgba(88,215,245,0.5);
  --glow-dusk: 0 0 0 1px rgba(142,139,255,0.25), 0 0 40px -12px rgba(142,139,255,0.5);

  /* ── motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* diagrams read these, which is why they are inlined rather than linked as <img> */
  --dg-line:  #31405A;
  --dg-fill:  #141A24;
  --dg-ink:   #C8D2E2;
  --dg-accent: var(--ice);
  --dg-accent-2: var(--dusk);
}

/* The bone surface re-points the ink tokens rather than asking every rule inside it to know it is
   on light ground. Anything that renders correctly on dark then renders correctly here too. */
.on-bone {
  color-scheme: light;
  --bg: var(--bone);
  --bg-2: var(--bone-2);
  --panel: #FFFFFF;
  --panel-2: var(--bone-2);
  --panel-3: #DED8CD;
  --rule: var(--bone-rule);
  --rule-soft: #E2DCD2;
  --ink: var(--bone-ink);
  --ink-2: var(--bone-ink-2);
  --ink-dim: var(--bone-dim);
  --ink-ghost: #8B93A1;
  --ice: #0D7E9C;
  --ice-deep: #075A71;
  --ice-ghost: rgba(13, 126, 156, 0.10);
  --dusk: #4F4BC9;
  --dusk-deep: #35329A;
  --dusk-ghost: rgba(79, 75, 201, 0.10);
  --pass: #18794E;
  --review: #9A6200;
  --fail: #C02B2B;
  --pass-bg: rgba(24, 121, 78, 0.07);
  --review-bg: rgba(154, 98, 0, 0.10);
  --fail-bg: rgba(192, 43, 43, 0.09);
  --lift-1: 0 1px 2px rgba(31,27,20,0.10);
  --lift-2: 0 10px 24px -12px rgba(31,27,20,0.28);
  --lift-3: 0 26px 60px -24px rgba(31,27,20,0.35);
  --dg-line: #B9B0A2;
  --dg-fill: #FFFFFF;
  --dg-ink: #2A3039;
  color: var(--ink);
  background: var(--bg);
}

@media print {
  :root {
    color-scheme: light;
    --void: #fff; --bg: #fff; --bg-2: #fff; --panel: #fff; --panel-2: #fff; --panel-3: #fff;
    --rule: #c8ccd4; --rule-soft: #e2e5ea;
    --ink: #11141a; --ink-2: #333a46; --ink-dim: #525a68; --ink-ghost: #6b7280;
    --ice: #0b6b86; --ice-deep: #0b6b86; --ice-ghost: transparent;
    --dusk: #3b38a0; --dusk-deep: #3b38a0; --dusk-ghost: transparent;
    --lift-1: none; --lift-2: none; --lift-3: none;
    --glow-ice: none; --glow-dusk: none;
    --dg-line: #9aa3b2; --dg-fill: #f3f5f8; --dg-ink: #222;
  }
}

/* Base typography and the page ground. */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* The ground is a material, not a geometry.
 *
 * Three layers, in order: a fine film grain, a cool light thrown from above, and a long tonal
 * fall to the bottom of the page. A CSS dot-grid or line-grid would be the same page as every
 * other dark SaaS site, and it is the first thing that makes one look generated.
 *
 * The grain is an inline SVG turbulence as a data URI — same-origin by construction, so it costs
 * nothing against the promise that this site fetches from no third party. At 2% opacity it is
 * not visible as texture; what it does is stop large flat areas from banding, which is what
 * actually reads as "cheap" on a dark page.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70rem 42rem at 78% -8rem, rgba(142, 139, 255, 0.055), transparent 60%),
    radial-gradient(90rem 50rem at 22% -12rem, rgba(88, 215, 245, 0.075), transparent 62%),
    linear-gradient(180deg, #0A0E15 0%, var(--bg) 38%, var(--void) 100%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Headings change FAMILY, not just size. A serif display over a sans sub-head is a hierarchy a
   reader feels before measuring anything, and it is the single cheapest way out of the one-font
   look. h3 stays sans because a high-contrast serif stops paying its way below about 1.3rem. */
h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}
h3 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

/* An emphasised run inside a serif headline takes the italic rather than a heavier weight: at
   display size the bold of a contrast serif closes up and reads as a different typeface. */
h1 em, h2 em { font-style: italic; color: var(--ice); }

p { text-wrap: pretty; }
strong { font-weight: 600; color: var(--ink); }

code, kbd, samp, pre, .num, .mono {
  font-family: var(--mono);
  font-variant-ligatures: none;
}
code {
  font-size: 0.86em;
  color: var(--ice);
  background: var(--ice-ghost);
  padding: 0.08em 0.36em;
  border-radius: 3px;
}

/* Every figure on the site is a measurement, so figures line up in columns everywhere. */
table, .num, .stats__v, .mast__fig, .facts dd { font-variant-numeric: tabular-nums; }

a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: currentColor; }

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

.sec { padding-block: var(--s6); position: relative; }
.sec--tight { padding-block: var(--s4); }
.sec--loose { padding-block: var(--s7); }
.sec--panel { background: var(--panel); border-block: 1px solid var(--rule-soft); }
.sec--stats { padding-block: var(--s5); }

/* The one light section. It carries its own ground and its own hairline edges so it reads as a
   different material rather than as a lighter rectangle, and `.on-bone` has already re-pointed
   every ink token, so nothing inside it needs to know where it is. */
.sec--bone {
  background: var(--bone);
  border-block: 1px solid var(--bone-rule);
}
.sec--bone::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sec--bone > * { position: relative; }

.prose > * + * { margin-top: var(--s3); }
.prose p { color: var(--ink-2); max-width: var(--wrap-text); }

/* Section heading — the eyebrow is mono and letterspaced, which with a serif title and sans body
   gives the page three families each doing exactly one job. */
.head { margin-bottom: var(--s4); max-width: 62ch; }
.head--center { margin-inline: auto; text-align: center; }
.head--center .head__eyebrow { justify-content: center; }
.head__eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ice);
  margin-bottom: var(--s2);
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.head__eyebrow::before {
  content: '';
  width: 1.6rem; height: 1px;
  background: currentColor;
  flex: none;
}
.head--center .head__eyebrow::before { display: none; }
.head__title { margin-bottom: var(--s2); }
.head__lead { color: var(--ink-2); font-size: var(--step-1); max-width: 56ch; }
.head--center .head__lead { margin-inline: auto; }

.pull {
  margin-top: var(--s4);
  padding-left: var(--s3);
  border-left: 2px solid var(--ice);
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.26;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.ticks { display: grid; gap: var(--s2); margin-top: var(--s3); }
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-2);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.7rem; height: 1px;
  background: var(--ice);
}

.facts { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); }
.facts--stack { flex-direction: column; gap: var(--s2); }
.facts__i dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-ghost);
  margin-bottom: 0.2em;
}
.facts__i dd { font-size: var(--step-0); color: var(--ink); }

.skip {
  position: absolute; left: var(--s3); top: var(--s3); z-index: 100;
  transform: translateY(-250%);
  background: var(--ice); color: #04222c;
  padding: 0.6rem 1rem; border-radius: var(--r); font-weight: 600;
}
.skip:focus { transform: none; }

/* The frame: masthead navigation, buttons, footer. */

/* ───────────────────────────── buttons */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-br: var(--rule);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.68rem 1.15rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-br);
  border-radius: var(--r);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.012em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn--solid { --btn-bg: var(--accent); --btn-fg: #052430; --btn-br: var(--accent); }
.btn--solid:hover { --btn-bg: #7adcf8; transform: translateY(-1px); }
.btn--line:hover { --btn-br: var(--accent); --btn-fg: var(--accent); }
.btn--ghost { --btn-br: transparent; --btn-fg: var(--ink-2); padding-inline: 0.35rem; }
.btn--ghost:hover { --btn-fg: var(--accent); }
.btn--sm { padding: 0.5rem 0.85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* ───────────────────────────── masthead */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule-soft);
}
.top__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: 62px;
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--ink); flex: none;
}
.brand__mk { width: 25px; height: 25px; color: var(--accent); }
.brand__tx { font-size: 0.98rem; letter-spacing: -0.015em; font-weight: 500; }
.brand__tx b { font-weight: 700; }

.nav { margin-left: auto; }
.nav__l { display: flex; align-items: center; gap: 0.15rem; }
.nav__a {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.5rem 0.7rem;
  font-size: var(--step--1); font-weight: 500; color: var(--ink-2);
  text-decoration: none; border-radius: var(--r);
  transition: color .15s ease, background .15s ease;
}
.nav__a:hover, .nav__d[open] > .nav__a { color: var(--ink); background: var(--panel-2); }
.nav__chev {
  width: 0.42em; height: 0.42em; margin-top: -0.18em;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg); opacity: .6; transition: transform .18s ease;
}
.nav__d[open] .nav__chev { transform: rotate(225deg) translate(-1px, -1px); }

.nav__panel {
  position: absolute;
  left: 0; right: 0;
  top: 62px;
  background: var(--panel);
  border-block: 1px solid var(--rule);
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .8);
}
.nav__grid {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--s4) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
.nav__c {
  background: var(--panel);
  padding: var(--s3);
  text-decoration: none;
  display: grid;
  gap: 0.3rem;
  transition: background .15s ease;
}
.nav__c:hover { background: var(--panel-2); }
.nav__ck { font-weight: 600; font-size: 0.95rem; }
.nav__cn { font-size: var(--step--1); color: var(--ink-dim); line-height: 1.45; }

.top__end { display: flex; align-items: center; gap: var(--s2); flex: none; }
.top__burger { display: none; }

/* language */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  font-size: var(--step--1); color: var(--ink-2);
}
.lang__btn:hover { color: var(--ink); border-color: var(--ink-ghost); }
.lang svg { width: 18px; height: 12px; border-radius: 1px; flex: none; }
.lang__list {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 11rem; padding: 0.3rem;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .85);
}
.lang__list a {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.6rem; border-radius: 3px;
  font-size: var(--step--1); text-decoration: none; color: var(--ink-2);
}
.lang__list a:hover { background: var(--panel-2); color: var(--ink); }
.lang__list a[aria-current] { color: var(--accent); }

/* ───────────────────────────── footer */
.foot { border-top: 1px solid var(--rule); background: var(--bg-2); margin-top: var(--s6); }
.foot__in {
  max-width: var(--wrap); margin-inline: auto; padding: var(--s6) var(--gutter) var(--s5);
  display: grid; gap: var(--s5);
  grid-template-columns: minmax(16rem, 1fr) 2fr;
}
.foot__line { color: var(--ink-dim); font-size: var(--step--1); margin-top: var(--s3); max-width: 34ch; }
.foot__mail { margin-top: var(--s3); font-family: var(--mono); font-size: var(--step--1); }
.foot__mail a { color: var(--accent); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s4); }
.foot__ct {
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-ghost); margin-bottom: var(--s2);
}
.foot__col ul { display: grid; gap: 0.5rem; }
.foot__col a { font-size: var(--step--1); color: var(--ink-2); text-decoration: none; }
.foot__col a:hover { color: var(--accent); }
.foot__bar {
  border-top: 1px solid var(--rule-soft);
  max-width: var(--wrap); margin-inline: auto;
  padding: var(--s3) var(--gutter);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between;
}
.foot__legal, .foot__copy { font-size: 0.74rem; color: var(--ink-ghost); font-family: var(--mono); }

/* ───────────────────────────── narrow */
@media (max-width: 980px) {
  .top__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 34px; margin-left: auto;
    border: 1px solid var(--rule); border-radius: var(--r);
  }
  .top__burger span[aria-hidden] {
    width: 16px; height: 1.5px; background: currentColor; position: relative; display: block;
  }
  .top__burger span[aria-hidden]::before,
  .top__burger span[aria-hidden]::after {
    content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor;
  }
  .top__burger span[aria-hidden]::before { top: -5px; }
  .top__burger span[aria-hidden]::after { top: 5px; }

  .nav {
    position: fixed; inset: 62px 0 auto 0;
    max-height: calc(100dvh - 62px); overflow-y: auto;
    background: var(--bg); border-bottom: 1px solid var(--rule);
    padding: var(--s3) var(--gutter) var(--s4);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__l { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__i { border-bottom: 1px solid var(--rule-soft); }
  .nav__a { padding: 0.9rem 0; justify-content: space-between; font-size: 1rem; }
  .nav__panel { position: static; border: 0; box-shadow: none; background: transparent; }
  .nav__grid { padding: 0 0 var(--s3); grid-template-columns: 1fr; border: 0; background: transparent; gap: 0; }
  .nav__c { padding: 0.65rem 0 0.65rem var(--s3); border-left: 1px solid var(--rule); background: transparent; }
  .top__end .btn { display: none; }
  .foot__in { grid-template-columns: 1fr; }
}

/* Block styles. Every section is hairline-ruled rather than boxed — the page should read as one
   continuous instrument face, not a stack of unrelated cards. */

/* ───────────────────────────── masthead */
.mast { position: relative; padding-block: clamp(3.2rem, 2rem + 6vw, 6.5rem) var(--s5); overflow: hidden; }
.mast .wrap { display: grid; gap: var(--s5); align-items: end; }
.mast__eyebrow {
  font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--accent); margin-bottom: var(--s3);
}
.mast__title { max-width: 19ch; }
.mast--wide .mast__title { max-width: 26ch; }
.mast__lead {
  margin-top: var(--s3); font-size: var(--step-2); line-height: 1.38;
  color: var(--ink-2); max-width: 48ch; letter-spacing: -0.01em;
}
.mast__cta { margin-top: var(--s4); }
.mast__figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px; background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
.mast__figures li { background: var(--bg); padding: var(--s3); display: grid; gap: 0.3rem; }
.mast__fig { font-family: var(--mono); font-size: var(--step-2); color: var(--ink); letter-spacing: -0.02em; }
.mast__figlabel { font-size: 0.74rem; color: var(--ink-dim); line-height: 1.4; }
/* Decorative, and it has to look decided rather than clipped: the drawing sits fully inside the
   right column, vertically centred, with the fade running back towards the headline it supports.
   `translate` does the centring so the scroll drift can own `transform` without fighting it. */
.mast__diagram {
  position: absolute; top: 50%; right: var(--gutter);
  translate: 0 -50%;
  width: min(46%, 560px);
  opacity: .34; pointer-events: none;
  mask-image: linear-gradient(272deg, #000 58%, transparent 97%);
}
.mast__diagram svg { width: 100%; height: auto; }
@media (max-width: 900px) { .mast__diagram { display: none; } }

/* ───────────────────────────── detail rows */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: minmax(12rem, 1fr) 2.2fr; gap: var(--s4);
  padding-block: var(--s4); border-bottom: 1px solid var(--rule);
}
.row__key {
  font-family: var(--mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent);
}
.row__rail .facts { margin-top: var(--s3); flex-direction: column; gap: var(--s2); }
.row__title { margin-bottom: var(--s2); }
.row__body p { color: var(--ink-2); }
.row__body p + p { margin-top: var(--s2); }
@media (max-width: 760px) { .row { grid-template-columns: 1fr; gap: var(--s3); } }

/* ───────────────────────────── spec grid */
.spec {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft);
}
.spec__i { background: var(--panel); padding: var(--s3); }
.spec__i dt {
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--ink-ghost); margin-bottom: 0.45rem;
}
.spec__i dd { font-size: var(--step-1); letter-spacing: -0.012em; }
.spec__note { margin-top: 0.5rem; font-size: var(--step--1); color: var(--ink-dim); line-height: 1.5; }

/* ───────────────────────────── tables */
.tbl__scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); }
.tbl { font-size: var(--step--1); min-width: 36rem; }
.tbl th, .tbl td { padding: 0.78rem 1rem; text-align: left; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.tbl thead th {
  background: var(--panel-2); font-family: var(--mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); font-weight: 500;
  position: sticky; top: 0;
}
.tbl tbody th { font-weight: 600; color: var(--ink); }
.tbl td { color: var(--ink-2); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td, .tbl tbody tr:hover th { background: color-mix(in srgb, var(--panel-2) 55%, transparent); }
.tbl .num, .tbl--price .num { font-family: var(--mono); color: var(--ink); white-space: nowrap; }
.tbl__note { margin-top: var(--s3); font-size: var(--step--1); color: var(--ink-dim); max-width: 72ch; }

/* ───────────────────────────── diagram */
.dgm { border: 1px solid var(--rule); border-radius: var(--r); background: var(--bg-2); overflow: hidden; }
.dgm__canvas { padding: clamp(1rem, 0.4rem + 2vw, 2.2rem); }
.dgm__canvas svg { width: 100%; height: auto; }
.dgm figcaption {
  padding: var(--s2) var(--s3); border-top: 1px solid var(--rule-soft);
  font-size: var(--step--1); color: var(--ink-dim); font-family: var(--mono);
}
.dgm__keys {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s3); margin-top: var(--s4);
}
.dgm__keys li { display: flex; gap: var(--s2); }
.dgm__n {
  flex: none; width: 1.55rem; height: 1.55rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--mono); font-size: 0.72rem;
}
.dgm__k { font-weight: 600; margin-bottom: 0.15rem; }
.dgm__keys p:not(.dgm__k) { font-size: var(--step--1); color: var(--ink-dim); line-height: 1.5; }

/* ───────────────────────────── stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s4); }
.stats__i { display: grid; gap: 0.45rem; padding-top: var(--s2); border-top: 1px solid var(--rule); }
.stats__v { font-family: var(--mono); font-size: var(--step-3); letter-spacing: -0.03em; line-height: 1; }
.stats__v i { font-style: normal; font-size: 0.56em; color: var(--ink-dim); margin-left: 0.1em; }
.stats__l { font-size: var(--step--1); color: var(--ink-dim); line-height: 1.45; }
.stats__note { margin-top: var(--s4); font-size: var(--step--1); color: var(--ink-ghost); }

/* ───────────────────────────── decision cards */
.dec { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s3); }
/* A column, so the footer can be pushed to the bottom. The grid already makes the three cards
   equal height; without this the `verdict:` line simply follows whatever paragraph precedes it,
   so three cards of equal height show that line at three different heights and the row reads as
   ragged rather than as a set. */
.dec__c {
  padding: var(--s3);
  border: 1px solid var(--rule); border-top-width: 2px; border-radius: var(--r);
  background: var(--panel);
  display: flex; flex-direction: column;
}
.dec__c.is-pass   { border-top-color: var(--pass); }
.dec__c.is-review { border-top-color: var(--review); }
.dec__c.is-fail   { border-top-color: var(--fail); }
.dec__badge {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: var(--s2);
}
.dec__c.is-pass .dec__badge   { color: var(--pass); }
.dec__c.is-review .dec__badge { color: var(--review); }
.dec__c.is-fail .dec__badge   { color: var(--fail); }
.dec__badge span { font-size: 1.1em; }
.dec__t { margin-bottom: var(--s2); }
.dec__c p { font-size: var(--step--1); color: var(--ink-2); }
.dec__c p + p { margin-top: 0.6rem; }
/* `.dec__c p.dec__then`, not `.dec__then`: the footer is a <p> that follows another <p>, so the
   `.dec__c p + p` rule above it (0,1,2) outranks a bare class (0,1,0) and quietly replaced
   `auto` with 0.6rem — the cards came out equal height with their footers at three different
   heights. Matching the element as well as the class takes it to (0,2,1) and wins honestly,
   without reaching for !important. */
.dec__c p.dec__then {
  margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
}
/* `margin-top: auto` replaces the old fixed top margin, so the gap above the rule is put back
   on the paragraph before it instead of being lost. */
.dec__c p:last-of-type { margin-bottom: var(--s3); }
.dec__then span {
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-ghost);
}

/* ───────────────────────────── register cards */
.regs { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1px;
        background: var(--rule-soft); border: 1px solid var(--rule-soft); }
.reg { background: var(--panel); padding: var(--s3); display: grid; align-content: start; gap: var(--s2); }
.reg__flag {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--accent);
}
.reg__n { font-size: var(--step-1); }
.reg__op { font-size: var(--step--1); color: var(--ink-ghost); }
.reg p { font-size: var(--step--1); color: var(--ink-2); }
.reg .facts { margin-top: var(--s2); }

/* ───────────────────────────── stages */
.stages { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.stage {
  display: grid; grid-template-columns: 4rem 1fr; gap: var(--s3);
  padding-block: var(--s3); border-bottom: 1px solid var(--rule);
}
.stage__n { font-family: var(--mono); font-size: var(--step-1); color: var(--accent); }
.stage__t { margin-bottom: 0.4rem; }
.stage p { color: var(--ink-2); font-size: var(--step-0); }
.stage__meta {
  margin-top: 0.6rem; font-family: var(--mono); font-size: var(--step--1); color: var(--ink-ghost);
}

/* ───────────────────────────── faq + note */
.faq { border-top: 1px solid var(--rule); }
.faq__i { border-bottom: 1px solid var(--rule); }
.faq__i summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; font-weight: 600; font-size: var(--step-1); letter-spacing: -0.01em;
}
.faq__i summary::after {
  content: ''; flex: none; width: 0.6rem; height: 0.6rem;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg); margin-top: -0.3rem; transition: transform .2s ease;
}
.faq__i[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq__a { padding-bottom: var(--s3); }
.faq__a p { color: var(--ink-2); max-width: 70ch; }
.faq__a p + p { margin-top: var(--s2); }

.note {
  border-left: 2px solid var(--accent);
  background: var(--panel);
  padding: var(--s3);
  border-radius: 0 var(--r) var(--r) 0;
}
.note--caution { border-left-color: var(--review); }
.note--strong { border-left-color: var(--fail); }
.note__t {
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-ghost); margin-bottom: var(--s2);
}
.note p { color: var(--ink-2); font-size: var(--step--1); }
.note p + p { margin-top: var(--s2); }

/* ───────────────────────────── legal */
.legal { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.legal__toc { position: sticky; top: 82px; border-left: 1px solid var(--rule); padding-left: var(--s3); }
.legal__toct {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-ghost); margin-bottom: var(--s2);
}
.legal__toc ol { display: grid; gap: 0.45rem; counter-reset: toc; list-style: none; padding: 0; }
.legal__toc a { font-size: var(--step--1); color: var(--ink-dim); text-decoration: none; }
.legal__toc a:hover { color: var(--accent); }
.legal__s { padding-top: var(--s4); }
.legal__s h2 { font-size: var(--step-2); margin-bottom: var(--s2); }
.legal__s p { color: var(--ink-2); }
.legal__s p + p { margin-top: var(--s2); }
.legal__s .sec { padding-block: var(--s3) 0; }
.legal__s .wrap { padding-inline: 0; max-width: none; }
@media (max-width: 860px) { .legal { grid-template-columns: 1fr; } .legal__toc { position: static; } }

/* ───────────────────────────── contact */
.ct { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1px; background: var(--rule-soft);
      border: 1px solid var(--rule-soft); }
.ct__main, .ct__side { background: var(--panel); padding: clamp(1.1rem, 0.6rem + 1.8vw, 2rem); }
.ct__k {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-ghost); margin-bottom: var(--s2);
}
.ct__mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.ct__mail .mail {
  font-family: var(--mono); font-size: var(--step-1); color: var(--accent);
  text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.ct__copy {
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-dim); border: 1px solid var(--rule); border-radius: 3px; padding: 0.3rem 0.55rem;
}
.ct__copy:hover { color: var(--accent); border-color: var(--accent); }
.ct__list { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule-soft); }
.ct__legal { font-size: var(--step-1); font-weight: 600; margin-bottom: var(--s3); }
@media (max-width: 820px) { .ct { grid-template-columns: 1fr; } }

/* ───────────────────────────── cross links + band */
.xl__t {
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-ghost); margin-bottom: var(--s3);
}
.xl { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1px;
      background: var(--rule-soft); border: 1px solid var(--rule-soft); }
.xl a {
  display: grid; gap: 0.25rem; padding: var(--s3); background: var(--bg);
  text-decoration: none; transition: background .15s ease;
}
.xl a:hover { background: var(--panel); }
.xl a:hover .xl__k { color: var(--accent); }
.xl__k { font-weight: 600; font-size: var(--step-0); }
.xl__d { font-size: var(--step--1); color: var(--ink-dim); }

.band { background: var(--panel); border-block: 1px solid var(--rule); padding-block: var(--s5); }
.band__in { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between; }
.band__t { font-size: var(--step-2); max-width: 24ch; }
.band__b { margin-top: var(--s2); color: var(--ink-2); max-width: 52ch; }
.band__cta { margin-top: 0; }

/* ───────────────────────────── fields (shared by matrix + glossary) */
.field { display: grid; gap: 0.35rem; }
.field--wide { width: min(28rem, 100%); }
.field__l {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--ink-ghost);
}
.field select, .field input {
  appearance: none;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 0.55rem 2rem 0.55rem 0.7rem;
  font-size: var(--step--1);
}
.field input { padding-right: 0.7rem; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
                    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 1.08rem, calc(100% - 0.75rem) 1.08rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select:hover, .field input:hover { border-color: var(--ink-ghost); }

/* The four things the reader operates: coverage matrix, check inspector, code samples, glossary.
   All four are styled so that the no-script state is the complete, legible state. */

/* ───────────────────────────── coverage matrix */
.mx__controls {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end;
  padding-bottom: var(--s3); margin-bottom: var(--s3); border-bottom: 1px solid var(--rule);
}
.mx__count {
  font-family: var(--mono); font-size: var(--step--1); color: var(--ink-dim);
  margin-left: auto; padding-bottom: 0.55rem;
}
.mx__scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); }
.mx__table { min-width: 48rem; font-size: var(--step--1); }
.mx__table th, .mx__table td { border-bottom: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft); }
.mx__table th:last-child, .mx__table td:last-child { border-right: 0; }
.mx__table tbody tr:last-child th, .mx__table tbody tr:last-child td { border-bottom: 0; }
.mx__table thead th {
  background: var(--panel-2); padding: 0.7rem 0.8rem; text-align: left; vertical-align: bottom;
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-dim); font-weight: 500; line-height: 1.3;
}
.mx__table thead th span { display: block; max-width: 7.5rem; }
.mx__table tbody th {
  text-align: left; padding: 0.7rem 0.8rem; background: var(--panel);
  font-weight: 600; white-space: nowrap;
}
.mx__table tbody th a { color: var(--ink); text-decoration: none; }
.mx__table tbody th a:hover { color: var(--accent); }
.mx__reg {
  display: block; font-family: var(--mono); font-size: 0.66rem;
  color: var(--ink-ghost); font-weight: 400; margin-top: 0.15rem;
}
.mx__cell { padding: 0.7rem 0.8rem; text-align: center; vertical-align: middle; }
.mx__mark { font-family: var(--mono); font-size: 0.95rem; line-height: 1; }
.mx__cell.is-pass   { background: var(--pass-bg); }
.mx__cell.is-pass   .mx__mark { color: var(--pass); }
.mx__cell.is-review { background: var(--review-bg); }
.mx__cell.is-review .mx__mark { color: var(--review); }
.mx__cell.is-fail   { background: var(--fail-bg); }
.mx__cell.is-fail   .mx__mark { color: var(--fail); }
.mx__cell.is-none   .mx__mark { color: var(--none); }
.mx__note {
  display: block; margin-top: 0.25rem; font-family: var(--mono);
  font-size: 0.62rem; color: var(--ink-ghost); letter-spacing: 0.02em;
}
.mx__legend { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.mx__legend li {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: var(--step--1); color: var(--ink-dim);
}
.mx__legend li span { font-family: var(--mono); }
.mx__legend .is-pass span   { color: var(--pass); }
.mx__legend .is-review span { color: var(--review); }
.mx__legend .is-none span   { color: var(--none); }
/* the script sets these; without it nothing is ever hidden */
.mx [hidden] { display: none !important; }
.mx__table .is-dim { opacity: .28; }

/* ───────────────────────────── check inspector */
.flow { counter-reset: none; border-top: 1px solid var(--rule); }
.flow__step { border-bottom: 1px solid var(--rule); }
.flow__sum {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0;
}
.flow__n {
  font-family: var(--mono); font-size: var(--step--1); color: var(--accent);
  border: 1px solid var(--rule); border-radius: 3px; padding: 0.22rem 0.42rem; flex: none;
}
.flow__d[open] .flow__n { border-color: var(--accent); background: var(--accent-ghost); }
.flow__name { font-weight: 600; font-size: var(--step-1); letter-spacing: -0.012em; }
.flow__lat {
  margin-left: auto; font-family: var(--mono); font-size: 0.72rem;
  color: var(--ink-ghost); white-space: nowrap;
}
.flow__panel { padding: 0 0 var(--s3) calc(2.2rem + var(--s3)); }
.flow__panel p { color: var(--ink-2); max-width: 68ch; }
.flow__panel p + p { margin-top: var(--s2); }
.flow__io { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.io__k {
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--ink-ghost); margin-bottom: 0.5rem;
}
.io ul { display: grid; gap: 0.3rem; }
.io code { font-size: 0.76rem; }
@media (max-width: 620px) { .flow__panel { padding-left: 0; } .flow__name { font-size: var(--step-0); } }

/* ───────────────────────────── code samples */
.code { border: 1px solid var(--rule); border-radius: var(--r); background: var(--bg-2); overflow: hidden; }
.code__bar {
  display: flex; align-items: stretch; gap: 0;
  background: var(--panel-2); border-bottom: 1px solid var(--rule);
}
.code__tab {
  padding: 0.65rem 1rem; font-family: var(--mono); font-size: 0.74rem;
  color: var(--ink-dim); border-bottom: 2px solid transparent;
}
.code__tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); background: var(--bg-2); }
.code__copy {
  margin-left: auto; padding: 0.65rem 1rem; font-family: var(--mono);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-ghost);
}
.code__copy:hover { color: var(--accent); }
.code__panel { padding: var(--s3); }
/* The label is the no-script heading for each stacked sample; the script hides it once the
   tablist is doing that job. */
.code__label {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--ink-ghost); margin-bottom: var(--s2);
}
.code pre { overflow-x: auto; margin: 0; }
.code code {
  display: block; background: none; padding: 0; color: var(--ink-2);
  font-size: 0.78rem; line-height: 1.7; white-space: pre;
}

/* ───────────────────────────── glossary */
.gl__count { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-dim); margin-top: var(--s2); }
.gl__list { margin-top: var(--s3); border-top: 1px solid var(--rule); }
.gl__i {
  display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: var(--s3);
  padding-block: var(--s3); border-bottom: 1px solid var(--rule-soft);
}
.gl__i dt { font-weight: 600; }
.gl__also { display: block; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-ghost); margin-top: 0.2rem; }
.gl__i dd { color: var(--ink-2); font-size: var(--step--1); }
.gl__empty { margin-top: var(--s3); color: var(--ink-dim); font-size: var(--step--1); }
@media (max-width: 680px) { .gl__i { grid-template-columns: 1fr; gap: 0.4rem; } }

/* Motion, and the print sheet.
   Every animation here is a progressive enhancement over a fully visible page: the reveal classes
   only ever *start* hidden once the script has confirmed it can un-hide them, so a failed script
   leaves a readable site rather than a blank one. */

[data-reveal] { opacity: 1; transform: none; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* The masthead diagram drifts a few pixels with the scroll. Any more than this and it competes
   with the headline it sits behind. */
.js .mast__diagram { transform: translateY(var(--drift, 0px)); will-change: transform; }

.top--scrolled { box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .9); }

/* copy feedback */
.is-copied { color: var(--pass) !important; border-color: var(--pass) !important; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .mast__diagram { transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body::before, .top, .foot__cols, .skip, .mx__controls, .code__bar, .gl .field, .gl__count { display: none !important; }
  body { font-size: 10.5pt; }
  .sec { padding-block: 0.9rem; }
  .sec--panel { border: 0; }
  a { text-decoration: underline; }
  .mast__diagram { display: none; }
  .faq__i:not([open]) .faq__a, .flow__d:not([open]) .flow__panel { display: block; }
  .code__panel[hidden] { display: block !important; }
  .dgm, .tbl__scroll, .mx__scroll { break-inside: avoid; }
  .legal__toc { display: none; }
  .legal { grid-template-columns: 1fr; }
}

/**
 * Forms, the consent banner, and the artwork surfaces.
 *
 * Everything here is styled so it still reads correctly before the scripts run: a form is a form,
 * the consent card is hidden until something can dismiss it, and no control depends on a class a
 * script has to add.
 */

/* ───────────────────────────────────────────── artwork */

/* The hero image is the biggest single change to how this site reads, so it gets the most
 * deliberate treatment. It is positioned, not inlined, because the headline must own the left of
 * the composition and the picture must be free to bleed off the right edge. The mask is doing the
 * real work: it dissolves the rectangle into the page ground so the eye reads "lit object in the
 * dark" rather than "photograph pasted onto a website".
 */
.mast__art {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: min(58%, 820px);
  pointer-events: none;
  z-index: 0;
  mask-image:
    linear-gradient(265deg, #000 46%, rgba(0,0,0,.55) 74%, transparent 99%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.mast__art--wide { width: min(66%, 1040px); right: -4%; }
.mast__art img { width: 100%; height: auto; display: block; }

/* The text has to win against a bright image behind it. A plain z-index is not enough on the
   narrow sizes where they overlap, so the body sits on its own stacking context with a soft
   shadow of page-ground behind it. */
.mast .wrap { position: relative; z-index: 1; }
.mast__body { position: relative; }

@media (max-width: 900px) {
  .mast__art { position: static; translate: none; width: 100%; margin-top: var(--s4);
               mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
  .mast__art--wide { width: 100%; right: 0; }
}

/* A section illustration that sits in the flow rather than behind the type. */
.art-fig { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--panel); }
.art-fig img { width: 100%; height: auto; display: block; }
.art-fig::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--rule);
  border-radius: inherit; pointer-events: none;
}

/* ───────────────────────────────────────────── form layout */

.frm-sec { padding-block: var(--s6); }
.frm-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(var(--s4), 4vw, var(--s6));
  align-items: start;
}
@media (max-width: 940px) { .frm-wrap { grid-template-columns: 1fr; } }

.frm__side { position: sticky; top: calc(62px + var(--s4)); }
@media (max-width: 940px) { .frm__side { position: static; } }
.frm__aside {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-dim); font-size: var(--step--1); line-height: 1.6;
}
/* The render arrives on its own dark square. A one-direction fade leaves the other three edges
   visible as a box sitting on the page, so the mask is radial — the figure is lit out of the
   ground and the rectangle stops existing. */
.frm__art {
  display: block; width: min(100%, 300px); height: auto;
  margin: var(--s4) 0 0 calc(var(--s3) * -1);
  opacity: .95;
  mask-image: radial-gradient(68% 62% at 50% 44%, #000 42%, rgba(0,0,0,.6) 68%, transparent 92%);
}

.frm {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(var(--s3), 3vw, var(--s5));
  box-shadow: var(--lift-2);
}

/* The honeypot is removed from view without `display:none`, because some bots skip hidden
   inputs and the point is that they do not skip this one. */
.frm__hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.frm__step { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.frm__leg {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--sans); font-weight: 600; font-size: var(--step-1);
  color: var(--ink); margin-bottom: var(--s3); padding: 0;
}
.frm__leg:focus-visible { outline: 2px solid var(--ice); outline-offset: 4px; border-radius: 3px; }
.frm__legn {
  flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--ice-ghost); color: var(--ice);
  font-family: var(--mono); font-size: 0.76rem; font-weight: 500;
}
.frm__stepnote { color: var(--ink-dim); font-size: var(--step--1); margin: calc(var(--s3) * -0.5) 0 var(--s3); }

.frm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 620px) { .frm__grid { grid-template-columns: 1fr; } }

/* ───────────────────────────────────────────── fields */

.fld { grid-column: 1 / -1; display: grid; gap: 0.42rem; align-content: start; }
.fld--half { grid-column: span 1; }
@media (max-width: 620px) { .fld--half { grid-column: 1 / -1; } }

.fld__lb {
  font-size: var(--step--1); font-weight: 500; color: var(--ink-2);
  display: flex; align-items: baseline; gap: 0.3em;
}
.fld__req { color: var(--ice); font-size: 0.9em; }
.fld__note { font-size: var(--step--2); color: var(--ink-ghost); line-height: 1.5; }

.fld__in {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  font: inherit;
  font-size: var(--step-0);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.fld__in::placeholder { color: var(--ink-ghost); }
.fld__in:hover { border-color: var(--ink-ghost); }
.fld__in:focus {
  outline: none;
  border-color: var(--ice);
  background: var(--panel-2);
  box-shadow: 0 0 0 3px var(--ice-ghost);
}
textarea.fld__in { resize: vertical; min-height: 6rem; line-height: 1.6; }

/* A native select keeps the platform's own open behaviour, which is better than anything a
   script would rebuild; only the closed state is restyled, and the arrow is drawn rather than
   fetched. */
.fld__in--sel {
  appearance: none;
  padding-right: 2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.72rem) 55%;
  background-size: 0.38rem 0.38rem, 0.38rem 0.38rem;
  background-repeat: no-repeat;
}

.fld__err { font-size: var(--step--2); color: var(--fail); }
.fld.is-bad .fld__in { border-color: var(--fail); }
.fld.is-bad .fld__in:focus { box-shadow: 0 0 0 3px var(--fail-bg); }

/* ───────────────────────────────────────────── choices */

.fld__set { display: grid; gap: 0.5rem; }
@media (min-width: 560px) {
  .fld__set { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

.opt {
  display: flex; align-items: flex-start; gap: 0.62rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--bg-2);
  font-size: var(--step--1); color: var(--ink-2);
  cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
.opt:hover { border-color: var(--ink-ghost); color: var(--ink); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__box {
  flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.12rem;
  border: 1px solid var(--ink-ghost); border-radius: 3px;
  display: grid; place-items: center;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.opt input[type=radio] + .opt__box { border-radius: 50%; }
.opt__box::after {
  content: ''; width: 0.5rem; height: 0.5rem; border-radius: 2px;
  background: #061e27; transform: scale(0);
  transition: transform .14s var(--ease-out);
}
.opt input[type=radio] + .opt__box::after { border-radius: 50%; }
.opt:has(input:checked) { border-color: var(--ice); background: var(--ice-ghost); color: var(--ink); }
.opt input:checked + .opt__box { background: var(--ice); border-color: var(--ice); }
.opt input:checked + .opt__box::after { transform: scale(1); }
.opt:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 2px; }
.opt--wide { width: 100%; }
.fld--consent { margin-top: calc(var(--s2) * -1); }

/* ───────────────────────────────────────────── steps and footer */

.frm__dots { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-bottom: var(--s4); }
.frm__dots li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--step--2); color: var(--ink-ghost);
}
.frm__dots li span {
  width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--rule); font-family: var(--mono); font-size: 0.68rem;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.frm__dots li em { font-style: normal; }
.frm__dots li.is-on { color: var(--ink-2); }
.frm__dots li.is-on span { background: var(--ice); border-color: var(--ice); color: #061e27; }

.frm__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--rule-soft);
}
.frm__small { flex: 1 1 14rem; font-size: var(--step--2); color: var(--ink-ghost); line-height: 1.5; margin: 0; }

/* ───────────────────────────────────────────── the answer */

.frm__out {
  display: grid; gap: 0.5rem;
  margin-top: var(--s3); padding: var(--s4);
  border: 1px solid color-mix(in srgb, var(--pass) 42%, transparent);
  border-radius: var(--r);
  background: var(--pass-bg);
}
.frm__out:focus { outline: 2px solid var(--pass); outline-offset: 3px; }
.frm__out b { font-size: var(--step-1); color: var(--ink); font-weight: 600; }
.frm__out span { color: var(--ink-2); font-size: var(--step--1); line-height: 1.6; }
.frm__out.is-bad { border-color: color-mix(in srgb, var(--fail) 46%, transparent); background: var(--fail-bg); }
.frm__ok {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--pass); position: relative;
}
.frm__ok::after {
  content: ''; position: absolute; left: 33%; top: 18%;
  width: 26%; height: 50%;
  border: solid #04210f; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.frm__ref {
  justify-self: start; margin-top: 0.2rem;
  font-family: var(--mono); font-size: var(--step--2);
  background: var(--panel-2); border: 1px solid var(--rule);
  padding: 0.25rem 0.5rem; border-radius: 3px; color: var(--ink-2);
}
.frm.is-done { box-shadow: var(--lift-1); }

/* ───────────────────────────────────────────── consent */

.cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: var(--gutter);
  display: flex; justify-content: center;
  pointer-events: none;
  opacity: 0; transform: translateY(14px);
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out);
}
.cc.is-in { opacity: 1; transform: none; }
.cc__card {
  pointer-events: auto;
  width: min(100%, 62rem);
  display: grid;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
}
@media (min-width: 880px) {
  .cc__card { grid-template-columns: 1fr auto; align-items: center; }
  .cc__opts { grid-column: 1 / -1; }
}
.cc__t { font-weight: 600; font-size: var(--step-0); margin-bottom: 0.2rem; }
.cc__d { font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; max-width: 62ch; }
.cc__d a { color: var(--ice); }
.cc__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.cc__more {
  background: none; border: 0; padding: 0.3rem;
  font: inherit; font-size: var(--step--1); color: var(--ink-dim);
  text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer;
}
.cc__more:hover { color: var(--ink); }
.cc__opts {
  display: grid; gap: 0.5rem;
  padding-top: var(--s3); border-top: 1px solid var(--rule-soft);
}
.cc__opt { align-items: flex-start; }
.cc__opt b { color: var(--ink); font-weight: 600; }
.cc__opt--fixed { opacity: .72; cursor: default; }
.cc__opt--fixed .opt__box { background: var(--ink-ghost); border-color: var(--ink-ghost); }
.cc__opt--fixed .opt__box::after { transform: scale(1); background: var(--panel); }

/* The cookie page carries a button that reopens the dialog. It ships hidden because without a
   script there is nothing for it to open, and a dead button is worse than no button. */
.cc-reopen { margin-top: var(--s3); }

/* ───────────────────────────────────────────── header additions */

.top__login {
  font-size: var(--step--1); font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding: 0.5rem 0.2rem; white-space: nowrap;
  transition: color .15s var(--ease);
}
.top__login:hover { color: var(--ink); }
@media (max-width: 1080px) { .top__login { display: none; } }

@media print {
  .cc, .frm__art, .mast__art { display: none !important; }
  .frm { border: 1px solid #c8ccd4; box-shadow: none; }
}

/* ───────────────────────────────────────────── bone surface + split */

/* The wrapper carries the ground and the hairline edges so the section inside it needs no
   knowledge of where it is. The grain is repeated here at a slightly higher frequency because
   the same noise reads coarser on a light field than on a dark one. */
.bone-wrap {
  position: relative;
  background: var(--bone);
  border-block: 1px solid var(--bone-rule);
}
.bone-wrap::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bone-wrap > * { position: relative; }

.split__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s4), 5vw, var(--s6));
  align-items: center;
}
.split--flip .split__media { order: 2; }
@media (max-width: 880px) {
  .split__in { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
}

.split__media { margin: 0; position: relative; }
.split__media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg);
  /* The renders arrive on their own dark ground. Fading the edges stops the picture reading as
     a pasted rectangle and lets it belong to the page it sits on. */
  mask-image: radial-gradient(78% 76% at 50% 50%, #000 48%, rgba(0,0,0,.55) 76%, transparent 97%);
}
.split__media figcaption {
  margin-top: var(--s2);
  font-family: var(--mono); font-size: var(--step--2);
  color: var(--ink-ghost); letter-spacing: 0.04em;
}
.split__body .head { margin-bottom: var(--s3); }

/* The narrow-layout copies of the header actions. Hidden wherever the header itself shows them,
   so they are never both on screen. */
.nav__cta { display: none; }
@media (max-width: 1080px) {
  .nav__cta { display: grid; gap: var(--s2); margin-top: var(--s3); }
  .nav__cta .btn { justify-content: center; padding-block: 0.8rem; }
}
@media (min-width: 981px) and (max-width: 1080px) {
  /* Between these widths the header still shows the solid CTA, so only the Log in copy is
     needed; showing both would put "Book a demo" on screen twice. */
  .nav__cta .btn--solid { display: none; }
}