/* ==========================================================================
   Code4X site styles.
   Palette: the dark Code4X brand from landing/ (confirmed by the owner, Oct 2,
   2026), which overrides the light tokens in code4x-visual-system §3. All other
   visual-system rules still apply: colour means state, mono only for code and
   data output, 0 radius for layout blocks, no shadows except focus.
   ========================================================================== */

/* ------------------------------------------------------------------ Tokens */
:root {
  color-scheme: dark;
  --paper: #07090B;                       /* canvas */
  --paper-2: #0E1418;                     /* panels, code */
  --surface: #0B0F12;                     /* consoles, reports, inputs, header, footer */
  --ink: #E8EFF3;
  --muted: rgba(255, 255, 255, .6);
  --signal: #22D3EE;                      /* links, focus, interactive accents */
  --signal-hover: #7DE9F5;
  --pass: #4ADE80;
  --partial: #F0B429;                     /* graphics */
  --partial-text: #F0B429;                /* text */
  --fail: #F98A84;
  --rule: rgba(255, 255, 255, .085);      /* hairlines */
  --rule-strong: rgba(255, 255, 255, .3); /* control borders: 3:1 against canvas */
  --btn-bg: var(--signal);
  --btn-fg: var(--paper);
  --btn-hover: var(--signal-hover);
  --add-bg: rgba(74, 222, 128, .08);      /* "after" pane of a compare */
  --tbd-bg: rgba(240, 180, 41, .12);
  --radius: 10px;                         /* buttons, inputs, chips, switches */
  --radius-lg: 16px;                      /* frames, consoles, reports, cells, code */

  --display: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Scale: body 18px, ratio 1.333 */
  --t-xs: .84375rem;   /* 13.5 */
  --t-s: 1rem;         /* 16, small UI text */
  --t-m: 1.125rem;     /* 18 */
  --t-l: 1.5rem;       /* 24 */
  --t-xl: 2rem;        /* 32 */
  --t-2xl: 2.625rem;   /* 42 */
  --t-3xl: 3.5rem;     /* 56 */
  --t-4xl: 4.6875rem;  /* 75 */

  --ease: cubic-bezier(.2, .7, .2, 1);
  --d-1: 120ms; --d-2: 240ms; --d-3: 400ms; --d-4: 600ms; --d-5: 1200ms;

  --sec-pad: 96px;
  --gutter: 32px;
  --max: 1200px;
}
@media (max-width: 760px) {
  :root { --sec-pad: 64px; --gutter: 16px; }
}

/* -------------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-m)/1.6 var(--body);
  text-rendering: optimizeLegibility;
  accent-color: var(--signal);
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); color: var(--ink); text-wrap: balance; }
h1 {
  font-size: clamp(2.5rem, 6.4vw, var(--t-4xl));
  font-weight: 600; line-height: 1.02; letter-spacing: -.045em;
}
h2 {
  font-size: clamp(1.75rem, 3.4vw, var(--t-2xl));
  font-weight: 600; line-height: 1.08; letter-spacing: -.035em;
}
h3 { font-size: var(--t-l); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
h4 { font-size: var(--t-m); font-weight: 600; line-height: 1.3; }
p { margin: 0; max-width: 68ch; }
p + p { margin-top: 1em; }
a { color: var(--signal); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
ul, ol { margin: 0; padding: 0; }
code, pre, kbd, samp { font-family: var(--mono); font-size: .875em; }
:not(pre) > code { background: var(--paper-2); padding: .1em .35em; }
strong { font-weight: 600; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--btn-bg); color: var(--btn-fg); padding: 10px 14px; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------ Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
/* Top bar and Home hero frame: wider container, edges = the hero rails. */
.wrap-wide { max-width: calc(1264px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--sec-pad) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section--tight { padding-top: calc(var(--sec-pad) * .6); }
.section--panel { background: var(--paper-2); }

/* Section head: eyebrow is the question, H2 the claim, BLUF the answer. */
.eyebrow { font-size: var(--t-m); font-weight: 500; color: var(--signal); margin-bottom: 12px; }
.bluf { font-size: var(--t-m); color: var(--ink); margin-top: 20px; max-width: 60ch; }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; color: var(--muted); max-width: 52ch; }
.sec-head { max-width: 760px; }
.sec-head + * { margin-top: 48px; }
.muted { color: var(--muted); }
.small { font-size: var(--t-s); }
.xs { font-size: var(--t-xs); }
.stack > * + * { margin-top: 1em; }
.mb-m { margin-bottom: 24px; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 48px; } .mt-xl { margin-top: 72px; }

/* Asymmetric offset: uneven columns, second column dropped. */
.offset {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.offset--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.offset > :last-child { margin-top: 64px; }
.offset--rev > :last-child { margin-top: 0; }
.offset--rev > :first-child { margin-top: 64px; }
@media (max-width: 900px) {
  .offset, .offset--rev { grid-template-columns: minmax(0, 1fr); }
  .offset > :last-child, .offset--rev > :first-child { margin-top: 0; }
}

/* Editorial long-read + margin notes. */
.longread {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 56px);
}
.longread > * { grid-column: 2; }
/* A note spans the next few rows, so its height is shared by the text beside it
   instead of opening a gap in the reading column. */
.longread > .note { grid-column: 3; grid-row: span 5; align-self: start; }
.longread > .wide { grid-column: 1 / -1; }
.note {
  font-size: var(--t-s); color: var(--muted); border-top: 2px solid var(--signal);
  padding-top: 10px; margin-top: 6px;
}
.note + .note { margin-top: 24px; }
.longread h2 { margin-top: 72px; }
.longread h2:first-child { margin-top: 0; }
.longread h3 { margin-top: 40px; }
.longread p, .longread ul, .longread ol { margin-top: 16px; }
.longread li { margin-top: 8px; }
.longread > figure { margin-top: 20px; }
.longread .findings { padding-left: 0; }
.longread .hbars { padding-left: 0; }
.longread .hbars > li { margin-top: 0; }
.longread .chart .chart-sub { margin-top: 4px; }
.longread .chart .chart-src { margin-top: 14px; }
.longread .findings > li { margin-top: 0; }
.longread ul, .longread ol { padding-left: 1.2em; max-width: 68ch; }
@media (max-width: 1080px) {
  .longread { grid-template-columns: minmax(0, 1fr); }
  .longread > *, .longread > .note, .longread > .wide { grid-column: 1; grid-row: auto; }
  .longread > .note { margin-top: 16px; max-width: 68ch; }
}

/* ------------------------------------------------------------------ Header */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
.hdr-in {
  display: flex; align-items: center; gap: 40px; min-height: 76px;
}
.logo {
  font-family: var(--display); font-weight: 700; font-size: 1.375rem;
  letter-spacing: -.045em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.nav { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.nav a {
  color: rgba(232, 239, 243, .86); text-decoration: none; font-size: .9375rem; font-weight: 450;
  padding: 6px 0;
  transition: color var(--d-2) var(--ease);
}
/* Hover and the current page: colour only, no underline (owner, Oct 3, 2026). */
.nav a:hover, .nav a[aria-current="page"] { color: var(--signal); }
.hdr-acts { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; }
@media (max-width: 960px) {
  .hdr-in { gap: 16px; flex-wrap: wrap; }
  .menu-btn {
    display: inline-flex; margin-left: auto; font: 500 var(--t-s) var(--body);
    background: none; border: 1px solid var(--rule-strong); border-radius: var(--radius);
    color: var(--ink); padding: 8px 12px; cursor: pointer;
  }
  .js .hdr-panel { display: none; }
  .js .hdr.is-open .hdr-panel { display: flex; }
  .hdr-panel {
    order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 8px 0 20px; display: flex;
  }
  .hdr-panel .nav { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .hdr-panel .nav a { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-m); }
  .hdr-panel .nav a[aria-current="page"] { color: var(--signal); }
  .hdr-panel .hdr-acts { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; }
  .hdr-panel .btn { justify-content: center; height: auto; padding: 14px 20px; font-size: var(--t-s); }
}
/* Nav sits next to the logo; actions sit at the right edge. */
@media (min-width: 961px) {
  .hdr-panel { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex: 1; }
  .hdr-panel .nav { margin-left: 0; gap: 30px; }
}

/* Breadcrumb */
.crumbs { font-size: var(--t-s); color: var(--muted); padding-top: 28px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--rule-strong); }
.crumbs a { color: var(--muted); }

/* ------------------------------------------------------------------ Footer */
.ftr { background: var(--surface); border-top: 1px solid var(--rule); padding: 64px 0 40px; margin-top: 0; }
.ftr-grid {
  display: grid; gap: 40px;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}
.ftr h2 { font: 600 var(--t-s)/1.3 var(--body); color: var(--muted); margin-bottom: 14px; }
.ftr ul { list-style: none; }
.ftr li + li { margin-top: 10px; }
.ftr a { color: var(--ink); text-decoration: none; font-size: var(--t-s); }
.ftr a:hover { text-decoration: underline; }
.ftr-tag { margin-top: 14px; font-size: var(--t-s); color: var(--muted); max-width: 34ch; }
.ftr-base { max-width: none; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: var(--t-xs); color: var(--muted); }
@media (max-width: 760px) { .ftr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ftr-grid > :first-child { grid-column: 1 / -1; } }

/* ---------------------------------------------------- Buttons, links, forms */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 var(--t-m)/1.2 var(--body);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg); border-radius: var(--radius);
  padding: 14px 22px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: progress; }
/* 40px buttons, 14px text, as on the stripe.com top bar. */
.btn-sm { height: 40px; padding: 0 18px; font-size: .875rem; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: var(--ink); }
.text-link { color: var(--signal); font-weight: 500; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .label { font-size: var(--t-s); font-weight: 600; }
.help { font-size: var(--t-s); color: var(--muted); }
.inp, select.inp, textarea.inp {
  font: 400 var(--t-m)/1.4 var(--body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 13px 14px; width: 100%; min-width: 0;
  transition: border-color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
}
.inp:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
textarea.inp { min-height: 120px; resize: vertical; }
.form-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Domain form: input and button share one row, stacking on narrow screens. */
.domain-form { max-width: 560px; }
.domain-row { display: flex; gap: 8px; margin-top: 6px; }
.domain-row .inp { flex: 1; }
@media (max-width: 480px) { .domain-row { flex-direction: column; } .domain-row .btn { width: 100%; } }

.form-error { margin-top: 8px; font-size: var(--t-s); color: var(--fail); font-weight: 500; }
.inp[aria-invalid="true"] { border-color: var(--fail); }

/* Notice: anything not wired up says so. */
.notice {
  border-left: 3px solid var(--ink); background: var(--paper-2);
  padding: 14px 18px; font-size: var(--t-s); max-width: 72ch;
}
.notice p { max-width: none; }

/* Open-item markers. Visible on purpose; the launch gate counts them. */
.tbd {
  display: inline; font-size: .85em; font-weight: 500; color: var(--partial-text);
  background: var(--tbd-bg); outline: 1px dashed var(--partial); padding: 0 .3em;
}

/* --------------------------------------------------------------- Hero (Home) */
.hero { padding: clamp(48px, 7vw, 96px) 0 var(--sec-pad); }
.hero + .section { border-top: 1px solid var(--rule); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.hero-grid > * { min-width: 0; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { max-width: 11ch; }
/* Subhead carries the argument, so it outranks the explainer under it. */
.hero .lede { margin-top: 24px; color: var(--ink); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4; max-width: 34ch; }
.hero .bluf { margin-top: 16px; color: var(--muted); max-width: 46ch; }
.hero .domain-form { margin-top: 40px; }
.hero-proof { margin-top: 18px; font-size: var(--t-s); color: var(--muted); }

/* Load sequence (library pattern 1). Text is in the HTML and painted first;
   the H1 moves but never hides, so LCP is not held back. */
.js .seq > * { animation: seqIn var(--d-4) var(--ease) both; }
.js .seq > :nth-child(1) { animation-name: seqMove; }
.js .seq > :nth-child(2) { animation-delay: 150ms; }
.js .seq > :nth-child(3) { animation-delay: 300ms; }
.js .seq > :nth-child(4) { animation-delay: 450ms; }
@keyframes seqIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes seqMove { from { transform: translateY(10px); } }

/* Scan console (library pattern 5: progress-tied counting). */
.console { border: 1px solid var(--rule-strong); background: var(--surface); }
.console-bar {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--rule); font-size: var(--t-s);
}
.console-bar .dom { font-family: var(--mono); font-size: .875rem; }
.console-steps { list-style: none; padding: 16px 18px 6px; min-height: 212px; font-family: var(--mono); font-size: .84rem; line-height: 1.5; }
.console-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 5px 0; }
.console-steps .mk { font-weight: 600; }
.console-steps .is-pass .mk { color: var(--pass); }
.console-steps .is-partial .mk { color: var(--partial-text); }
.console-steps .is-fail .mk { color: var(--fail); }
.console-steps .is-run .mk { color: var(--muted); }
.console-steps .res { display: block; color: var(--muted); }
.console-steps .is-fail .res { color: var(--fail); }
.console-steps .is-partial .res { color: var(--partial-text); }
.console-score { padding: 14px 18px 18px; border-top: 1px solid var(--rule); }
.console-num { display: flex; align-items: baseline; gap: 4px; }
.console-num b {
  font: 700 var(--t-3xl)/1 var(--display); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.console-num span { color: var(--muted); font-size: var(--t-m); }
.track { height: 6px; background: var(--paper-2); margin-top: 12px; overflow: hidden; }
.track > i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--d-3) var(--ease); }
.console-note { margin-top: 12px; font-size: var(--t-s); color: var(--muted); }
.console-msg { padding: 16px 18px; border-top: 1px solid var(--rule); font-size: var(--t-s); }
.console-msg[hidden] { display: none; }

/* ------------------------------------------------ Scrollytelling (pattern 4) */
.scrolly { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); }
.scrolly-fig { position: sticky; top: 100px; align-self: start; }
.scrolly-steps { padding: 4vh 0 0; }
.scrolly-step:last-child { min-height: 34vh; }
.scrolly-step { min-height: 40vh; display: flex; flex-direction: column; justify-content: center; }
.scrolly-step h3 { font-size: var(--t-xl); }
.scrolly-step p { margin-top: 14px; color: var(--muted); transition: color var(--d-3) var(--ease); }
.js .scrolly-step:not(.is-on) h3 { color: rgba(255, 255, 255, .45); transition: color var(--d-3) var(--ease); }
.scrolly-step.is-on p { color: var(--ink); }
@media (max-width: 900px) {
  .scrolly { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .scrolly-fig { top: 69px; z-index: 2; background: var(--paper); padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .scrolly-step { min-height: 50vh; }
  .page-fig-body { padding: 12px 14px; gap: 8px; }
  .page-fig-cap { padding: 8px 14px; min-height: 0; }
  .pf-h { font-size: 1.125rem; }
  .pf-sub, .pf-tag { display: none; }
  .page-fig[data-step="2"] .pf-tag { display: block; }
  .pf-plan { min-height: 58px; padding: 8px; }
  .pf-plan b { font-size: 1rem; }
  .pf-plan small { font-size: .75rem; }
  .pf-steps { padding: 0 14px 10px; }
}

/* "The shift" figure: one page, three readers. */
.page-fig { border: 1px solid var(--rule-strong); background: var(--surface); font-size: var(--t-s); }
.page-fig-cap { padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); color: var(--muted); min-height: 46px; }
.page-fig-cap span { display: none; }
.page-fig[data-step="1"] .cap-1, .page-fig[data-step="2"] .cap-2, .page-fig[data-step="3"] .cap-3 { display: inline; }
.page-fig-body { padding: 18px; display: grid; gap: 12px; }
.pf-nav { display: flex; gap: 10px; }
.pf-nav i { display: block; height: 8px; width: 44px; background: var(--rule); }
.pf-nav i:first-child { width: 70px; background: var(--ink); }
.pf-h { font: 650 1.375rem/1.15 var(--display); }
.pf-sub { color: var(--muted); font-size: .9rem; }
.pf-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-plan { border: 1px solid var(--rule); padding: 10px; min-height: 92px; transition: opacity var(--d-3) var(--ease), border-color var(--d-3) var(--ease); }
.pf-plan b { display: block; font-family: var(--display); font-size: 1.125rem; }
.pf-plan small { color: var(--muted); }
.pf-tag {
  font-family: var(--mono); font-size: .75rem; color: var(--signal);
  opacity: 0; transition: opacity var(--d-3) var(--ease);
}
.pf-js { display: none; font-family: var(--mono); font-size: .78rem; color: var(--fail); }
.page-fig[data-step="2"] .pf-tag { opacity: 1; }
.page-fig[data-step="2"] .pf-h, .page-fig[data-step="2"] .pf-plan { outline: 1px dashed var(--signal); outline-offset: 3px; }
.page-fig[data-step="3"] .pf-plan { border-style: dashed; border-color: var(--fail); }
.page-fig[data-step="3"] .pf-plan > * { opacity: 0; }
.page-fig[data-step="3"] .pf-js { display: block; }
.page-fig[data-step="3"] .pf-sub-js { opacity: .25; }
.pf-steps { display: flex; gap: 6px; padding: 0 18px 16px; }
.pf-steps i { flex: 1; height: 3px; background: var(--rule); transition: background var(--d-3) var(--ease); }
.page-fig[data-step="1"] .pf-steps i:nth-child(-n+1),
.page-fig[data-step="2"] .pf-steps i:nth-child(-n+2),
.page-fig[data-step="3"] .pf-steps i { background: var(--ink); }

/* "How the score is calculated" figure: checks, then layers, then the score. */
.build { border: 1px solid var(--rule-strong); background: var(--surface); }
.build-body { padding: 18px; display: grid; gap: 18px; }
.build-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) 3ch; grid-template-areas: "name sqs val" ". bar val"; gap: 8px 14px; align-items: center; }
.build-name { grid-area: name; font-weight: 600; font-size: var(--t-s); }
.sqs { grid-area: sqs; display: flex; flex-wrap: wrap; gap: 3px; }
.sqs i { width: 12px; height: 12px; background: var(--pass); }
.sqs i.f { background: var(--fail); }
.build-bar { grid-area: bar; }
.build-val { grid-area: val; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.build-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--rule); padding-top: 14px; font-weight: 600; }
.build-total .score b { font-size: var(--t-3xl); }
.build-rep { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; border: 1px dashed var(--rule-strong); padding: 10px 12px; font-size: var(--t-s); color: var(--muted); }
.build-bar, .build-val, .build-total, .build-rep { transition: opacity var(--d-3) var(--ease); }
.js .build[data-step="1"] .build-bar, .js .build[data-step="1"] .build-val { opacity: 0; }
.js .build[data-step="1"] .build-total, .js .build[data-step="2"] .build-total { opacity: .12; }
.js .build:not([data-step="4"]) .build-rep { opacity: .12; }
@media (max-width: 900px) {
  .build-body { padding: 12px 14px; gap: 10px; }
  .build-row { grid-template-columns: 92px minmax(0, 1fr) 3ch; }
  .sqs i { width: 9px; height: 9px; }
  .build-total .score b { font-size: var(--t-2xl); }
}

/* ----------------------------------------------------------- Data charts */
.chart { border-top: 2px solid var(--rule-strong); padding-top: 18px; }
.chart-title { font: 600 var(--t-m)/1.3 var(--body); }
.chart-sub { font-size: var(--t-s); color: var(--muted); margin-top: 4px; }
.chart-src { font-size: var(--t-xs); color: var(--muted); margin-top: 14px; }

.stackbar { display: flex; height: 56px; margin-top: 22px; gap: 2px; }
.stackbar > span { flex: 0 0 var(--w); transform-origin: left; }
.stackbar .s-fail { background: var(--fail); }
.stackbar .s-partial { background: var(--partial); }
.stackbar .s-pass { background: var(--pass); }
.stack-labels { display: flex; gap: 2px; margin-top: 10px; }
.stack-labels > div { flex: 0 0 var(--w); font-size: var(--t-s); min-width: 0; }
.stack-labels b { display: block; font: 650 var(--t-l)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.stack-labels .l-fail b { color: var(--fail); }
.stack-labels .l-partial b { color: var(--partial-text); }
.stack-labels .l-pass b { color: var(--pass); }
@media (max-width: 640px) {
  .stack-labels { flex-direction: column; gap: 10px; }
  .stack-labels > div { flex-basis: auto; }
}

.hbars { list-style: none; margin-top: 22px; display: grid; gap: 18px; }
.hbar { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 4.5ch; gap: 16px; align-items: center; }
.hbar-name { font-weight: 500; }
.hbar-track { height: 22px; background: var(--paper-2); position: relative; }
.hbar-track > i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--fail); transform-origin: left; }
.hbar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hbar.is-grey .hbar-track > i { background: var(--rule-strong); }
@media (max-width: 560px) {
  .hbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .hbar-track { grid-column: 1 / -1; grid-row: 2; }
}

/* Bars draw once when they enter view (library pattern 6, applied to bars). */
.js [data-draw] .stackbar > span,
.js [data-draw] .hbar-track > i,
.js [data-draw] .lbar > i { transform: scaleX(0); }
.js [data-draw].is-in .stackbar > span,
.js [data-draw].is-in .hbar-track > i,
.js [data-draw].is-in .lbar > i { transform: scaleX(1); transition: transform var(--d-5) var(--ease); }
.js [data-draw].is-in .stackbar > span:nth-child(2) { transition-delay: 150ms; }
.js [data-draw].is-in .stackbar > span:nth-child(3) { transition-delay: 300ms; }
.js [data-draw].is-in .hbar:nth-child(2) .hbar-track > i { transition-delay: 120ms; }
.js [data-draw].is-in .hbar:nth-child(3) .hbar-track > i { transition-delay: 240ms; }

.annot { list-style: none; display: grid; gap: 24px; }
.annot li { border-top: 1px solid var(--rule); padding-top: 14px; }
.annot b { display: block; font: 650 var(--t-xl)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.annot p { margin-top: 6px; font-size: var(--t-s); color: var(--muted); }

/* ------------------------------------------- Layer path (library pattern 6) */
.layers-wrap { position: relative; padding-top: 34px; }
.layers-wrap { --colw: calc((100% - 72px) / 4); }
.ln { position: absolute; top: 16px; height: 1.5px; transform-origin: left; }
.ln-main { left: 9px; width: calc(2 * (var(--colw) + 24px)); background: var(--ink); }
.ln-side { left: calc(2 * (var(--colw) + 24px) + 9px); width: calc(var(--colw) + 24px);
  background: repeating-linear-gradient(90deg, var(--rule-strong) 0 4px, transparent 4px 8px); }
.js [data-draw] .ln-main { transform: scaleX(0); }
.js [data-draw].is-in .ln-main { transform: scaleX(1); transition: transform 1.2s var(--ease); }
.js [data-draw] .ln-side { opacity: 0; }
.js [data-draw].is-in .ln-side { opacity: 1; transition: opacity var(--d-3) var(--ease) 1.2s; }
.layers { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.layer { position: relative; }
.layer::before {
  content: ""; position: absolute; top: -34px; left: 0; width: 18px; height: 18px;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--signal);
}
.layer.is-side::before { border-style: dashed; border-color: var(--rule-strong); }
.js [data-draw] .layer::before { transform: scale(0); }
.js [data-draw].is-in .layer::before { transform: scale(1); transition: transform var(--d-3) var(--ease); }
.js [data-draw].is-in .layer:nth-child(2)::before { transition-delay: .4s; }
.js [data-draw].is-in .layer:nth-child(3)::before { transition-delay: .8s; }
.js [data-draw].is-in .layer:nth-child(4)::before { transition-delay: 1.2s; }
.layer p { margin-top: 10px; font-size: var(--t-s); }
/* A concrete case under each abstract question, for leader readers. */
.layer .eg { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--rule-strong); font-size: var(--t-s); color: var(--muted); }
.layer .count { display: block; margin-top: 12px; font-size: var(--t-xs); color: var(--muted); }
@media (max-width: 860px) {
  .layers-wrap { padding-top: 0; }
  .layers { grid-template-columns: minmax(0, 1fr); padding-left: 40px; gap: 32px; position: relative; }
  .ln { display: none; }
  .layer::before { top: 4px; left: -40px; }
  .layer:not(:last-child)::after { content: ""; position: absolute; left: -32px; top: 24px; bottom: -36px; width: 1.5px; background: var(--ink); }
  .layer:nth-child(3)::after { background: repeating-linear-gradient(180deg, var(--rule-strong) 0 4px, transparent 4px 8px); }
}

/* ------------------------------------------------- Code, diffs, compare */
.code {
  background: var(--paper-2); font-family: var(--mono); font-size: .875rem; line-height: 1.7;
  padding: 18px 20px; overflow-x: auto; margin: 0; white-space: pre; tab-size: 2;
}
.code .del { color: var(--fail); }
.code .add { color: var(--pass); }
.code .cm { color: var(--muted); }
.code-frame { border: 1px solid var(--rule); }
.code-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--rule); background: var(--paper);
}
.code-bar .file { font-family: var(--mono); font-size: .84rem; }
.copy-btn {
  font: 500 var(--t-s)/1 var(--body); background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 8px 12px; cursor: pointer;
  transition: border-color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.copy-btn:hover { border-color: var(--ink); }
.copy-btn:active { transform: scale(.97); }
.copy-btn.is-done { color: var(--pass); border-color: var(--pass); }

/* Before / after compare (library pattern 12). The slider moves the split
   between the two panes; text in each stays whole and left-aligned. */
.compare { border: 1px solid var(--rule); }
.compare-stage { display: grid; grid-template-columns: minmax(0, var(--pos, 50%)) minmax(0, 1fr); }
.compare-pane { margin: 0; overflow: hidden; min-width: 0; }
.compare-pane .code { padding-top: 10px; overflow: hidden; }
.compare-before, .compare-before .code { background: var(--paper-2); }
.compare-after, .compare-after .code { background: var(--add-bg); }
.compare-after { border-left: 2px solid var(--ink); }
.compare-pane .tag {
  display: block; font: 500 var(--t-s)/1.3 var(--body); color: var(--muted);
  padding: 12px 20px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.compare-ctl { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--rule); font-size: var(--t-s); }
.compare-ctl input { flex: 1; }
html:not(.js) .compare-ctl { display: none; }
.compare-cap { padding: 14px 16px 14px; border-top: 1px solid var(--rule); font-size: var(--t-s); }
.compare-cap p + p { margin-top: 6px; }
@media (max-width: 560px) {
  html:not(.js) .compare-stage { grid-template-columns: minmax(0, 1fr); }
  html:not(.js) .compare-after { border-left: 0; border-top: 2px solid var(--ink); }
}

.fix-kinds { list-style: none; margin-top: 32px; border-top: 1px solid var(--rule); }
.fix-kinds li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.fix-kinds b { font-weight: 600; }
.fix-kinds span { color: var(--muted); font-size: var(--t-s); }
@media (max-width: 560px) { .fix-kinds li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ------------------------------------------------------------------ Tables */
.tbl-wrap { overflow-x: auto; border-top: 2px solid var(--rule-strong); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--rule); }
.tbl thead th { font-weight: 600; color: var(--muted); padding-top: 14px; }
.tbl tbody th { font-weight: 600; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .is-us { font-weight: 600; color: var(--ink); }
.tbl thead .is-us { color: var(--signal); }
.tbl td.is-us, .tbl th.is-us { border-bottom-color: var(--rule-strong); }
.tbl caption { text-align: left; caption-side: bottom; padding-top: 12px; font-size: var(--t-xs); color: var(--muted); }
.tbl--compare { min-width: 860px; }
.tbl--compare th:first-child { width: 16%; }
.tbl--tiers { min-width: 720px; }
.tbl--pair th, .tbl--pair td { width: 50%; }
.tbl--tiers .price { font: 650 var(--t-l)/1.1 var(--display); white-space: nowrap; }
.tbl--tiers .price small { font: 400 var(--t-s) var(--body); color: var(--muted); }
.tbl--tiers tbody tr { transition: background var(--d-2) var(--ease); }
.tbl--tiers tbody tr:hover { background: var(--paper-2); }

/* ------------------------------------------------------------ Steps list */
.steps { list-style: none; counter-reset: s; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.steps > li { counter-increment: s; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.steps > li::before { content: counter(s); font: 650 var(--t-xl)/1 var(--display); color: var(--signal); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--t-m); font-family: var(--body); font-weight: 600; }
.steps p { margin-top: 4px; color: var(--muted); font-size: var(--t-s); }

/* --------------------------------------------------------- FAQ (static) */
.faq { border-top: 1px solid var(--rule); }
.faq > div { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.faq h3 { font: 600 var(--t-m)/1.4 var(--body); }
.faq p { margin-top: 8px; }

/* ------------------------------------------------- Report frame (score) */
.report { border: 1px solid var(--rule-strong); background: var(--surface); }
.report-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px;
  padding: 22px 24px; border-bottom: 1px solid var(--rule);
}
.report-dom { font-family: var(--mono); font-size: 1rem; }
.report-meta { font-size: var(--t-s); color: var(--muted); }
.report-meta dl { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; }
.report-meta dt { color: var(--muted); }
.report-meta dd { margin: 0; color: var(--ink); }
.report-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.report-body > * { padding: 24px; min-width: 0; }
.report-body > * + * { border-left: 1px solid var(--rule); }
@media (max-width: 820px) { .report-body { grid-template-columns: minmax(0, 1fr); } .report-body > * + * { border-left: 0; border-top: 1px solid var(--rule); } }
.score { display: flex; align-items: baseline; gap: 6px; }
.score b {
  font: 700 clamp(3.5rem, 7vw, var(--t-4xl))/1 var(--display);
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}
.score span { font-size: var(--t-l); color: var(--muted); }
.lbars { list-style: none; display: grid; gap: 14px; margin-top: 24px; }
.lbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: var(--t-s); }
.lbars .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.lbar { grid-column: 1 / -1; height: 8px; background: var(--paper-2); }
.lbar > i { display: block; height: 100%; width: var(--w); transform-origin: left; }
.lbar.is-pass > i { background: var(--pass); }
.lbar.is-partial > i { background: var(--partial); }
.lbar.is-fail > i { background: var(--fail); }
.lbars .is-off { color: var(--muted); grid-template-columns: minmax(0, 1fr); gap: 2px; }
.lbars .is-off span + span { font-size: var(--t-xs); }
.findings { list-style: none; display: grid; gap: 0; }
.findings > li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.findings > li:first-child { padding-top: 0; }
.findings h3, .findings h4 { display: flex; gap: 10px; align-items: baseline; font: 600 var(--t-m)/1.35 var(--body); }
.findings p { margin-top: 6px; font-size: var(--t-s); }
.state { font: 600 var(--t-xs)/1 var(--body); padding: 4px 7px; border-radius: var(--radius); border: 1px solid currentColor; white-space: nowrap; }
.state-fail { color: var(--fail); }
.state-partial { color: var(--partial-text); }
.state-pass { color: var(--pass); }
.evidence { margin-top: 10px; font-family: var(--mono); font-size: .8rem; background: var(--paper-2); padding: 10px 12px; overflow-x: auto; white-space: pre; }

/* Sample report: summary/detail switch (library pattern 10). */
.view-switch { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.view-switch button {
  font: 500 var(--t-s)/1 var(--body); background: var(--surface); color: var(--ink);
  border: 0; padding: 10px 14px; cursor: pointer;
}
.view-switch button + button { border-left: 1px solid var(--rule-strong); }
.view-switch button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.findings.is-detail .evidence-wrap { display: block; }
.evidence-wrap { display: none; }
html:not(.js) .evidence-wrap { display: block; }

/* ---------------------------------------------------------- Placeholders */
.ph { margin: 0; color: var(--ink); }
.ph svg { width: 100%; height: auto; }
.ph figcaption { margin-top: 8px; font-size: var(--t-s); color: var(--muted); }

/* ---------------------------------------------------- Page intro (inner) */
.intro { padding: 40px 0 calc(var(--sec-pad) * .6); }
.intro + .section { border-top: 1px solid var(--rule); }
.intro h1 { font-size: clamp(2.25rem, 5vw, var(--t-3xl)); max-width: 18ch; }
.intro .lede, .intro .bluf { margin-top: 24px; }
.updated { margin-top: 20px; font-size: var(--t-s); color: var(--muted); }
.intro--center { text-align: center; }
.intro--center h1, .intro--center .bluf, .intro--center .notice { margin-left: auto; margin-right: auto; }
.intro--center .notice { text-align: left; }

/* Closing CTA band */
.closing h2 { max-width: 20ch; }
.closing .acts { margin-top: 32px; }

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

@media print {
  .hdr, .ftr, .skip-link, .menu-btn { display: none; }
}

/* ----------------------------------------------------------- Rounded corners
   Owner decision, Oct 3, 2026 (code4x-visual-system §3). Controls use
   --radius, containers --radius-lg; bars and chips are fully round. */
.console, .report, .page-fig, .build, .code-frame, .compare, .frame, .way {
  border-radius: var(--radius-lg); overflow: hidden;
}
.notice, .logo-ph, .evidence, .ph img, .seg { border-radius: var(--radius); }
.seg { overflow: hidden; }
.tbd { border-radius: 4px; }
.state { border-radius: 999px; padding: 4px 9px; }
.track, .lbar, .hbar-track, .stackbar { border-radius: 999px; overflow: hidden; }
.page-fig .pf-plan, .ln-cards > div { border-radius: var(--radius); }

/* Footer (owner, Oct 4, 2026): inside the same rails as the pages; brand,
   partnership line and our own score as proof; three link groups; a base
   bar with the keywords. Links turn Signal on hover, like the nav. */
.ftr { padding: 0; background: var(--canvas, #07090B); border-top: 1px solid var(--rule); }
.ftr-frame { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: 64px clamp(24px, 5vw, 64px) 0; }
.ftr-grid { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.ftr .logo { font-size: 1.375rem; }
.ftr-tag { max-width: 40ch; margin-top: 14px; line-height: 1.6; }
.ftr-proof { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: .82rem; }
.ftr-proof i { width: 7px; height: 7px; border-radius: 50%; background: var(--pass); }
.ftr-proof span { color: var(--signal); }
.ftr .ftr-proof:hover { text-decoration: none; border-color: var(--signal); }
.ftr h2 { font-weight: 500; font-size: .8rem; color: var(--muted); }
.ftr a:hover { text-decoration: none; color: var(--signal); }
.ftr li + li { margin-top: 12px; }
.ftr-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 64px; padding: 20px 0 28px; border-top: 1px solid var(--rule); font-size: var(--t-xs); color: var(--muted); }
@media (max-width: 760px) { .ftr-frame { padding: 48px 24px 0; } .ftr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ftr-grid > :first-child { grid-column: 1 / -1; } }

/* Footer refinements (Oct 4, 2026): a hairline above the link groups on
   phones, and group titles in the same quiet label style as page labels. */
.ftr h2 { letter-spacing: 0; text-transform: none; }
.ftr-grid > nav { padding-top: 4px; }
@media (max-width: 760px) { .ftr-grid > nav:first-of-type { padding-top: 24px; border-top: 1px solid var(--rule); } .ftr-grid > nav { padding-top: 24px; border-top: 1px solid var(--rule); } }

/* Brand (owner, Oct 4, 2026): the mark is three rounded bars, the long one in
   Signal. Top bar: the name in Geist, upper case, with the mark standing in
   for the E and 4X in Signal. Everywhere else (favicon, footer, chips): the
   mark alone. */
.mark-accent { fill: var(--signal); }
.logo-word { display: inline-flex; align-items: baseline; font: 800 1.3rem/1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.logo-word b { font-weight: 800; color: var(--signal); }
.logo-e { width: .92em; height: .72em; margin: 0 .08em 0 .05em; align-self: baseline; }
.logo--mark { display: inline-flex; color: var(--ink); }
.logo-mark { width: 40px; height: 32px; }
.av--mark { background: #15191C; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); color: var(--ink); }
.av-mark { width: 58%; height: auto; }