/* Pricing Demo — "blueline proof" system.
   Paper + key ink carry the page; blueline blue carries data; process magenta is reserved for
   proof marks (queries, rings, flags); highlighter yellow only ever sits behind ink. */

@font-face { font-family: "Archivo"; src: url("public/fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("public/fonts/martian-mono-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }

:root {
  --paper: #f3f4ef;
  --sheet: #fbfbf8;
  --key: #15161a;
  --ink-2: #4c4e57;         /* secondary text: 7.9:1 on paper */
  --ink-3: #6a6e77;         /* tertiary text, placeholders: 4.9:1 on sheet */
  --rule: #c9ccc4;
  --blue: #2433b8;          /* blueline: 8.6:1 on paper */
  --blue-wash: #e3e6f6;
  --magenta: #c2105f;       /* proof marks: 5.9:1 on paper */
  --yellow: #ffe14d;        /* highlighter, behind key ink only */

  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Archivo", "Helvetica Neue", Arial, sans-serif;  /* body copy: sans, same family as the headings */
  --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gutter: clamp(1rem, 3.2vw, 3rem);
  --max: 1440px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }  /* keeps focused anchors clear of the sticky bar (WCAG 2.2 focus not obscured) */
body {
  margin: 0; background: var(--paper); color: var(--key);
  font: 400 1.0625rem/1.62 var(--f-text); font-optical-sizing: auto;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--blue); }
b, strong { font-weight: 650; }
[data-k] { white-space: nowrap; }
em { font-style: normal; font-weight: 600; }  /* Archivo has no true italic; emphasis is carried by weight */
mark { background: linear-gradient(transparent 12%, var(--yellow) 12%, var(--yellow) 88%, transparent 88%) no-repeat 0 0 / 100% 100%; color: var(--key); padding: 0 .12em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 100; background: var(--key); color: var(--paper); padding: .6rem 1rem; font: 600 .8rem/1 var(--f-mono); text-decoration: none; }
.skip:focus { top: .75rem; }

/* ---------- type roles */
.label, .ticket, .fig-cap, .aside-mono, .picker-meta, .proof-cap, dt, .r-ev, .r-act, .f-meta, .legend {
  font-family: var(--f-mono); font-stretch: 87%; font-size: .75rem; line-height: 1.45; letter-spacing: .02em;  /* 12px floor for metadata */
}
.label { text-transform: uppercase; color: var(--magenta); font-weight: 600; margin: 0 0 .5rem; letter-spacing: .06em; }
h1, h2, h3 { font-family: var(--f-display); margin: 0; font-weight: 760; }
h2 {
  font-size: clamp(2.25rem, 5.6vw, 5.1rem); line-height: .94; letter-spacing: -.028em; font-stretch: 84%;
  max-width: 15ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); text-wrap: balance;
}
h2 em, .hero-title em { font-family: var(--f-display); font-weight: 400; font-style: normal; letter-spacing: -.02em; color: var(--blue); }
h3 { font-size: 1.32rem; line-height: 1.12; letter-spacing: -.012em; font-stretch: 92%; font-weight: 700; }
.prose { max-width: 62ch; margin: 0 0 1.5rem; }
.prose.wide { max-width: 74ch; }
.prose p { margin: 0 0 1rem; }
.cols { max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30ch), 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); }
.mono, .code { font-family: var(--f-mono); font-stretch: 87%; }
.aside-mono { color: var(--ink-2); margin: 1rem 0 0; }

/* ---------- slug bar */
.slug {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem var(--gutter); background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.mark { display: inline-flex; align-items: center; min-height: 44px; gap: .15em; text-decoration: none; font: 800 1rem/1 var(--f-display); font-stretch: 112%; letter-spacing: .02em; white-space: nowrap; }
.mark i { font-style: normal; color: var(--magenta); font-weight: 400; font-stretch: 62%; transform: translateY(.04em); }
.nav { display: flex; gap: clamp(.75rem, 1.6vw, 1.6rem); margin-left: clamp(.75rem, 1.6vw, 1.6rem); font: 500 .74rem/1 var(--f-mono); font-stretch: 87%; letter-spacing: .03em; }
/* language switch: EN / ES, the current page is underlined and not a link */
.lang { display: inline-flex; align-items: center; margin-left: auto; font: 600 .74rem/1 var(--f-mono); font-stretch: 87%; letter-spacing: .06em; text-transform: uppercase; }
.lang a, .lang span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .4rem; color: var(--key); text-decoration: none; }
.lang a:hover { color: var(--blue); }
.lang [aria-current="page"] { color: var(--blue); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.lang a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav a { text-decoration: none; padding: .5rem 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.nav a[aria-current="true"] { color: var(--blue); }
.nav-files { background: var(--key); color: var(--paper); padding: .5rem .7rem !important; }
.nav-files:hover { background: var(--blue); color: var(--paper); }
.nav-files::after { display: none; }
.nav .nav-files[aria-current="true"] { background: var(--blue); color: var(--paper); }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.progress span { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }

/* ---------- hero */
.hero { position: relative; isolation: isolate; max-width: var(--max); margin: 0 auto; padding: clamp(1.75rem, 4vw, 3.5rem) var(--gutter) clamp(3rem, 6vw, 5rem); }
/* blueline grid: twelve hairline columns, faded out before the proof, so the page reads as set on a grid */
.hero::before {
  content: ""; position: absolute; inset: 0 var(--gutter); z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(36, 51, 184, .075) 0 1px, transparent 1px calc(100% / 12));
  -webkit-mask-image: linear-gradient(#000 35%, transparent 90%); mask-image: linear-gradient(#000 35%, transparent 90%);
}
.crop { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--key); }
.crop::before { width: 22px; height: 1px; } .crop::after { width: 1px; height: 22px; }
.crop.tl { left: calc(var(--gutter) * .35); top: .6rem; } .crop.tr { right: calc(var(--gutter) * .35); top: .6rem; transform: scaleX(-1); }
.crop.bl { left: calc(var(--gutter) * .35); bottom: .6rem; transform: scaleY(-1); } .crop.br { right: calc(var(--gutter) * .35); bottom: .6rem; transform: scale(-1); }
.ticket { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; margin: 0 0 clamp(1.5rem, 3.5vw, 2.75rem); color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.ticket span:first-child { color: var(--key); font-weight: 600; }
.ticket span { white-space: nowrap; }
@media (max-width: 1080px) { .ticket { flex-direction: column; gap: .15rem; } }  /* line count independent of the font, so no shift when it loads */
.ticket b { color: var(--key); font-weight: 600; }

.hero-title { display: grid; white-space: nowrap; font-weight: 820; line-height: .84; letter-spacing: -.035em; margin: 0 0 clamp(2rem, 4.5vw, 3.5rem); text-transform: uppercase; }
/* the brand: "Pricing / Demo", the slash set as a proof mark */
.hero-title { text-transform: none; margin: 0; }
.h-brand { font-size: clamp(3.4rem, 13.4vw, 12.5rem); font-stretch: 112%; font-weight: 820; letter-spacing: -.045em; }
.h-brand i { font-style: normal; color: var(--magenta); font-weight: 300; font-stretch: 62%; margin: 0 .03em; }
.hero-by { margin: clamp(.6rem, 1.4vw, 1.1rem) 0 0; font-size: clamp(1.05rem, 1.7vw, 1.4rem); color: var(--ink-2); }
.hero-by strong { color: var(--key); }
.hero-sub { margin: clamp(1.25rem, 2.6vw, 2rem) 0 clamp(1.75rem, 3.6vw, 3rem); font: 700 clamp(1.5rem, 3.2vw, 2.7rem)/1.06 var(--f-display); font-stretch: 86%; letter-spacing: -.02em; max-width: 26ch; text-wrap: balance; }
.hero-sub em { font-weight: 400; color: var(--blue); }
.hero-intro .lede { max-width: 58ch; font-size: clamp(1.08rem, 1.45vw, 1.28rem); line-height: 1.55; }
.hero-q { margin: 1.25rem 0 0; font-size: clamp(1.05rem, 1.4vw, 1.22rem); max-width: 58ch; padding-left: .85rem; border-left: 2px solid var(--magenta); }
.origin { background: var(--sheet); border: 1px solid var(--key); box-shadow: 0 18px 40px -28px rgba(21,22,26,.35); padding: 1.25rem 1.35rem; }
.origin-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.origin-steps li { display: grid; gap: .15rem; padding: .9rem 0; }
.origin-steps li + li { border-top: 1px dashed var(--rule); position: relative; }
.origin-steps li + li::before { content: "↓"; position: absolute; top: -.8rem; left: 0; background: var(--sheet); color: var(--magenta); padding-right: .4rem; font-weight: 600; }
.origin-steps li:first-child { padding-top: 0; }
.origin-steps .label { margin: 0; }
.origin-steps li + li .label { color: var(--blue); }
.origin-steps strong { font: 760 1.35rem/1.15 var(--f-display); font-stretch: 88%; }
.origin-steps span:last-child { color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.origin-tease { display: flex; gap: .7rem; align-items: center; margin: .5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--key); font-weight: 600; }
.hero-note { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; font: 400 .78rem/1.5 var(--f-mono); font-stretch: 87%; color: var(--ink-2); max-width: 80ch; }

.hero-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.42rem); line-height: 1.45; margin: 0; max-width: 34ch; }

/* the proof: signature element */
.proof { margin: 2.5rem 0 0; position: relative; }
.proof-cap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; padding-bottom: .5rem; border-bottom: 1px solid var(--key); }
.proof-sheet { background: var(--sheet); box-shadow: 0 1px 0 var(--rule), 0 18px 40px -28px rgba(21,22,26,.35); }
.proof-row { display: grid; grid-template-columns: minmax(9.5rem, 1.15fr) minmax(0, 2.6fr) 4.6rem; gap: 1rem; align-items: center; padding: .7rem .9rem; border-bottom: 1px dashed var(--rule); font: 400 .8rem/1.35 var(--f-mono); font-stretch: 87%; }
.proof-row:last-child { border-bottom: 0; }
.c-price { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.c-series { color: var(--ink-2); }
.is-queried { background: color-mix(in srgb, var(--magenta) 5%, var(--sheet)); }
.is-queried .c-series { color: var(--key); font-weight: 600; }
.ring { position: relative; display: inline-block; padding: .1em .15em; }
.ring-svg { position: absolute; inset: -.55em -.7em; width: calc(100% + 1.4em); height: calc(100% + 1.1em); overflow: visible; }
.ring-svg path { fill: none; stroke: var(--magenta); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.proof-note { display: flex; gap: .85rem; align-items: flex-start; margin: 1rem 0 0; padding-left: 0; font-size: .98rem; line-height: 1.5; color: var(--key); max-width: 60ch; }
.proof-note strong { color: var(--magenta); }
.proof-note em { color: var(--ink-2); }
.q { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 2px solid var(--magenta); border-radius: 50%; color: var(--magenta); font: 700 1rem/1 var(--f-display); }

.proof-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(2.5rem, 5vw, 4rem) 0 0; border-top: 1px solid var(--key); }
.proof-line > div { padding: 1rem 1.25rem 0 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .4rem; }
.proof-line > div + div { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.proof-line dt { color: var(--ink-2); max-width: 26ch; }
.proof-line dd { margin: 0; font: 760 clamp(2.4rem, 4.8vw, 4.2rem)/.9 var(--f-display); font-stretch: 75%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.proof-line dd small { font-size: .6em; color: var(--ink-2); margin: 0 .05em; font-weight: 400; }
.proof-line > div:nth-child(2) dd { color: var(--magenta); }

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 0; }
.btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .7rem 1.1rem; background: var(--key); color: var(--paper); text-decoration: none; font: 600 .78rem/1 var(--f-mono); font-stretch: 87%; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--key); transition: background .25s, color .25s, border-color .25s; }
.btn:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--key); }
.btn.ghost:hover { background: var(--key); color: var(--paper); border-color: var(--key); }

/* ---------- sections as galleys */
.sec { padding: clamp(4rem, 9vw, 8.5rem) var(--gutter); border-top: 1px solid var(--rule); }
.galley { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(12rem, 3fr) minmax(0, 9fr); gap: clamp(1.5rem, 4vw, 4.5rem); }
/* the margin travels as one block, so its label never slides over its own note */
.margin { position: sticky; top: 5rem; align-self: start; padding-top: .4rem; }
.galley-solo { grid-template-columns: minmax(0, 1fr); }
.note { font-style: normal; color: var(--ink-2); font-size: .98rem; line-height: 1.5; margin: 0; max-width: 28ch; border-left: 2px solid var(--magenta); padding-left: .85rem; }
.note strong { font-style: normal; color: var(--key); }
.main { min-width: 0; }
.sec-sheet { background: var(--sheet); }
.sec-key { background: var(--key); color: var(--paper); border-top: 0; }
.sec-key .label { color: #ff7bb3; }
.sec-key .note { color: #c8cad2; border-color: #ff7bb3; }
.sec-key h2 em { color: #9aa6ff; }

/* fig */
.fig { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.fig-cap { display: block; color: var(--ink-2); margin-bottom: 1rem; }
.fig-cap .label { display: inline; margin-right: .5rem; }
.strip { position: relative; width: 100%; }
.strip svg { width: 100%; height: auto; overflow: visible; }
.strip .axis text, .split-bars text, .mult text { font: 500 11px var(--f-mono); font-stretch: 87%; fill: var(--ink-2); }
.strip .grid line { stroke: var(--rule); stroke-width: 1; }
.strip .cat text { font: 600 12px var(--f-mono); font-stretch: 87%; fill: var(--key); }
.strip circle { fill: var(--blue); fill-opacity: .55; }
.strip circle.hot { fill: var(--magenta); fill-opacity: 1; }
.strip .tip { font: 600 11px var(--f-mono); fill: var(--magenta); }
.sr-table { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sr-table table { width: 1px; table-layout: fixed; }
.fig, .matrix td { position: relative; }

/* schema */
.schema { display: grid; grid-template-columns: auto auto 1fr; gap: 1rem 1.5rem; align-items: center; margin: 2.5rem 0; }
.schema ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; font: 500 .72rem/1 var(--f-mono); font-stretch: 87%; }
.schema li { padding: .55rem .6rem; border: 1px solid var(--key); background: var(--sheet); white-space: nowrap; }
.schema-raw { flex-direction: column; }
.schema-new li { border-color: var(--blue); color: var(--blue); background: var(--blue-wash); }
.schema-arrow { width: 3rem; height: 1.5rem; fill: none; stroke: var(--magenta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ext { display: inline-block; width: .7em; height: .7em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.colophon { list-style: none; padding: 1.25rem 0 0; margin: 0; border-top: 1px solid var(--key); columns: 4 12rem; column-gap: 2rem; font: 700 1.05rem/2 var(--f-display); font-stretch: 88%; }
.colophon li { break-inside: avoid; line-height: 1.2; padding: .45rem 0; }
.colophon small { display: block; font: 400 .68rem/1.4 var(--f-mono); font-stretch: 87%; color: var(--ink-2); margin-top: .15rem; }

/* steps — a real sequence, so numbered */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--key); }
.steps li { counter-increment: s; padding: 1.75rem 2rem 2rem 0; border-bottom: 1px solid var(--rule); }
.steps li:nth-child(even) { padding-left: 2rem; border-left: 1px solid var(--rule); padding-right: 0; }
.steps li::before { content: counter(s); display: block; font: 300 3.2rem/1 var(--f-display); font-stretch: 62%; color: var(--blue); margin-bottom: 1rem; }
.steps h3 { margin-bottom: .6rem; }
.steps p { margin: 0 0 .6rem; max-width: 46ch; }
.versus { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; background: var(--sheet); border: 1px solid var(--key); }
.versus > div { padding: 1.25rem 1.5rem; }
.versus > div + div { border-left: 1px solid var(--key); }
.versus .code { font-size: 1rem; margin: 0 0 .75rem; }
.verdict { margin: 0; font-size: .95rem; }
.verdict b { font: 800 1.6rem/1 var(--f-display); margin-right: .35rem; }
.verdict.bad b { color: var(--magenta); }
.verdict.good b { color: var(--blue); }

/* explorer */
.picker { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0 1rem; }
.picker button { min-height: 40px; padding: .5rem .75rem; background: transparent; color: var(--key); border: 1px solid var(--rule); font: 500 .74rem/1 var(--f-mono); font-stretch: 87%; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.picker button:hover { border-color: var(--key); }
.picker button[aria-checked="true"] { background: var(--key); color: var(--paper); border-color: var(--key); }
.picker button .dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--magenta); margin-left: .45rem; vertical-align: middle; }
.picker button[aria-checked="true"] .dot { background: #ff7bb3; }
.picker-meta { color: var(--ink-2); margin: 0 0 1rem; min-height: 1.5em; }
.matrix-wrap { overflow-x: auto; border-top: 1px solid var(--key); -webkit-overflow-scrolling: touch; }
.matrix { border-collapse: collapse; width: 100%; min-width: 44rem; table-layout: fixed; font: 400 .78rem/1.3 var(--f-mono); font-stretch: 87%; font-variant-numeric: tabular-nums; }
.matrix th, .matrix td { padding: .65rem .6rem; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.matrix thead th { font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.matrix th[scope="row"], .matrix thead th:first-child { text-align: left; font-weight: 500; color: var(--key); white-space: normal; width: 15rem; position: sticky; left: 0; background: var(--sheet); }
.matrix td.na { color: var(--ink-3); }
.matrix span.v.off { background: var(--yellow); padding: .1em .25em; font-weight: 600; }
.matrix .moved { display: block; white-space: normal; max-width: 11rem; margin-left: auto; color: var(--magenta); font-size: .68rem; line-height: 1.3; }
.matrix tr.unstable th[scope="row"]::after { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--magenta); margin-left: .45rem; vertical-align: middle; }
.flag { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-left: .3rem; border: 1.5px solid var(--magenta); color: var(--magenta); border-radius: 50%; font: 700 .6rem/1 var(--f-mono); vertical-align: middle; }
.legend { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .55rem; color: var(--ink-2); }
.legend .flag { margin: 0 .5rem 0 0; }
.legend .sw { font: 600 .7rem var(--f-mono); margin-right: .5rem; }

/* exceptions */
.multiples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 2rem 0 0; }
.mult { background: var(--paper); padding: 1rem 1rem .75rem; display: flex; flex-direction: column; }
.mult h3 { font-size: .98rem; font-stretch: 88%; line-height: 1.15; margin: .25rem 0 .15rem; }
.mult .kind { font: 600 .72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; }
.mult .kind.k-starter { color: var(--blue); }
.mult .kind.k-misfiled { color: var(--magenta); }
.mult .gap { font: 500 .7rem/1.4 var(--f-mono); font-stretch: 87%; color: var(--ink-2); margin: .1rem 0 .4rem; }
.mult svg { width: 100%; height: auto; margin-top: auto; overflow: visible; }
.mult .base { stroke: var(--rule); }
.mult .modal { stroke: var(--key); stroke-dasharray: 2 3; }
.mult circle { fill: var(--key); }
.mult circle.odd { fill: var(--blue); }
.mult.misfiled circle.odd { fill: var(--magenta); }
.mult .lbl-odd { fill: var(--blue); font-weight: 600; }
.mult.misfiled .lbl-odd { fill: var(--magenta); }
.mult .stray-note { font: 500 .68rem/1.35 var(--f-mono); color: var(--magenta); margin: .4rem 0 0; }

.repair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; margin-top: 2.5rem; padding: 1.75rem 0 0; border-top: 1px solid var(--key); }
.repair .big { font: 760 clamp(3.2rem, 8vw, 6.5rem)/.9 var(--f-display); font-stretch: 70%; margin: 0; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.repair .sub { margin: .5rem 0 0; color: var(--ink-2); font-size: .95rem; }
.repair .sub b { color: var(--key); }
.repair-cell.is-after .big { color: var(--blue); }
.repair-arrow { font: 500 .7rem/1.4 var(--f-mono); color: var(--magenta); text-align: center; max-width: 13rem; }
.repair-arrow::after { content: ""; display: block; height: 2px; margin-top: .5rem; background: linear-gradient(90deg, var(--magenta) 85%, transparent 85%) 0 0 / 100% 100%; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* findings */
.findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--key); }
.finding { padding: 1.5rem 1.75rem 1.5rem 0; }
.finding + .finding { padding-left: 1.75rem; border-left: 1px solid var(--rule); }
.finding h3 { margin-bottom: 1rem; }
.finding p:last-child { margin: 0; font-size: .98rem; }
.split-bars svg { width: 100%; height: auto; margin-bottom: 1rem; }
.split-bars .full { fill: var(--key); }
.split-bars .pa { fill: var(--blue); }
.split-bars .pb { fill: #6b78d6; }
.split-bars .over { fill: none; stroke: var(--magenta); stroke-width: 2; }

/* register */
.register { border-top: 1px solid var(--key); }
.register details { border-bottom: 1px solid var(--rule); }
.register summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 7.5rem; gap: 1rem; align-items: center; padding: 1.05rem 0; cursor: pointer; list-style: none; min-height: 44px; }
.register summary::-webkit-details-marker { display: none; }
.r-name { font: 700 1.08rem/1.25 var(--f-display); font-stretch: 90%; }
.r-name::before { content: "+"; display: inline-block; width: 1.4rem; color: var(--magenta); font-weight: 400; transition: transform .3s var(--ease); }
details[open] .r-name::before { transform: rotate(45deg); }
.r-ev { color: var(--ink-2); text-align: right; }
.r-ev b { color: var(--key); }
.r-act { justify-self: end; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: .3rem .55rem; border: 1.5px solid currentColor; }
.a-query { color: var(--magenta); }
.a-stet { color: var(--key); }
.a-norm { color: var(--blue); }
.a-inv { color: var(--ink-2); border-style: dashed; }
.r-body { padding: 0 0 1.25rem 1.4rem; max-width: 66ch; }
.r-body p { margin: 0; }
summary:hover .r-name { color: var(--blue); }

/* limits */
.nots { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; font: 800 clamp(1.8rem, 4.6vw, 3.6rem)/1.08 var(--f-display); font-stretch: 70%; text-transform: uppercase; letter-spacing: -.01em; }
.nots li { text-decoration: line-through; text-decoration-color: #ff7bb3; text-decoration-thickness: .08em; color: #8d909b; }
.asks { margin: 0; padding: 0; list-style: none; counter-reset: a; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #3a3c44; border: 1px solid #3a3c44; }
.asks li { counter-increment: a; background: var(--key); padding: 1.25rem 1.4rem; font-size: 1.02rem; }
.asks li::before { content: "Q" counter(a); display: block; font: 600 .72rem/1 var(--f-mono); color: #ff7bb3; margin-bottom: .6rem; }
.sec-key .prose { color: #e3e4e8; }

/* film */
.player { position: relative; aspect-ratio: 16 / 9; background: var(--key); }
.player-start { all: unset; position: absolute; inset: 0; cursor: pointer; display: block; }
.player-start:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.player-start img { width: 100%; height: 100%; object-fit: cover; }
.player-label { position: absolute; left: 1.25rem; bottom: 1.25rem; display: inline-flex; align-items: center; gap: .9rem; background: var(--paper); color: var(--key); padding: .8rem 1.1rem .8rem .8rem; font: 600 .82rem/1.2 var(--f-mono); font-stretch: 87%; text-transform: uppercase; letter-spacing: .04em; transition: background .25s, color .25s; }
.player-label small { display: block; font-weight: 400; text-transform: none; color: var(--ink-2); letter-spacing: 0; }
.player-start:hover .player-label { background: var(--blue); color: var(--paper); }
.player-start:hover .player-label small { color: #dfe2ff; }
.play { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--magenta); position: relative; flex: none; }
.play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: .45rem 0 .45rem .7rem; border-color: transparent transparent transparent var(--paper); }
.player video { width: 100%; height: 100%; background: var(--key); }

/* files */
.files { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--key); display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
.files a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; min-height: 44px; }
.f-name { font: 700 1.05rem/1.25 var(--f-display); font-stretch: 90%; }
.f-name::after { content: " ↓"; color: var(--magenta); font-weight: 400; }
.f-meta { color: var(--ink-2); white-space: nowrap; flex: none; }
.files a { flex-wrap: wrap; row-gap: .2rem; }
.f-name { min-width: 0; overflow-wrap: anywhere; }
.files a:hover .f-name { color: var(--blue); }
.byline { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; }
.byline p { margin: 0; max-width: 60ch; }
.byline-links { display: flex; flex-wrap: wrap; gap: .6rem; }

/* footer */
.foot { padding: 0 var(--gutter) 2rem; border-top: 1px solid var(--key); font-size: .9rem; color: var(--ink-2); }
.foot p { max-width: 90ch; margin: 1rem auto 0; max-width: var(--max); }
.foot strong { color: var(--key); }
.bars { display: grid; grid-template-columns: repeat(4, 1fr); height: 6px; max-width: var(--max); margin: 0 auto; }
.bars i { display: block; } .bars .c { background: #00a0e3; } .bars .m { background: var(--magenta); } .bars .y { background: var(--yellow); } .bars .k { background: var(--key); }
.colophon-line { font: 400 .72rem/1.5 var(--f-mono); font-stretch: 87%; }

/* ---------- motion (progressive: only when JS adds .js and motion is allowed) */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .proof.rv .ring-svg path { stroke-dashoffset: 1; }
  .js .proof.in .ring-svg path { animation: draw 1.1s .5s var(--ease) forwards; }
  .js .proof.rv .proof-note { opacity: 0; transform: translateY(6px); transition: opacity .6s 1.3s, transform .6s 1.3s var(--ease); }
  .js .proof.in .proof-note { opacity: 1; transform: none; }
  .js .proof.rv .is-queried mark { background-size: 0% 100%; transition: background-size .7s 1.1s var(--ease); }
  .js .proof.in .is-queried mark { background-size: 100% 100%; }
  .js .h-brand { opacity: 0; transform: translateY(.12em); }
  .js.ready .h-brand { animation: rise .9s var(--ease) forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- responsive */
@media (max-width: 1080px) {
  /* section links move to a second, horizontally scrollable row instead of disappearing */
  .slug { flex-wrap: wrap; gap: 0; padding-top: .35rem; padding-bottom: 0; }
  .slug .mark { min-height: 44px; }
  .nav { order: 3; width: calc(100% + var(--gutter) * 2); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); gap: .25rem; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--rule); -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .65rem; white-space: nowrap; }
  .nav a::after { bottom: .7rem; left: .65rem; right: .65rem; }
  .nav-files { margin: .45rem 0 .45rem auto; min-height: 36px; padding: 0 .7rem !important; }
  .progress { bottom: -1px; }
  html { scroll-padding-top: 8.25rem; }
  .hero-body { grid-template-columns: 1fr; }
  .lede { max-width: 46ch; }
  .multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .findings { grid-template-columns: 1fr; }
  .finding, .finding + .finding { padding: 1.5rem 0; border-left: 0; }
  .finding + .finding { border-top: 1px solid var(--rule); }
}
@media (max-width: 860px) {
  .galley { grid-template-columns: 1fr; gap: 1.25rem; }
  .margin { position: static; display: grid; gap: .25rem; }
  .legend { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); order: 3; }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li:nth-child(even) { padding: 1.5rem 0; border-left: 0; }
  .files { grid-template-columns: 1fr; }
  .byline { grid-template-columns: 1fr; }
  .asks { grid-template-columns: 1fr; }
  .schema { grid-template-columns: 1fr; }
  .schema-raw { flex-direction: row; }
  .schema-arrow { transform: rotate(90deg); justify-self: start; }
}
@media (max-width: 620px) {
  body { font-size: 1rem; }
  .ticket span:nth-child(3) { display: none; }
  .proof-row { grid-template-columns: 1fr 4.2rem; gap: .2rem .75rem; padding: .7rem .75rem; }
  .proof-row .c-series { grid-column: 1 / -1; font-size: .7rem; }
  .proof-row .c-title { grid-column: 1; }
  .proof-row .c-price { grid-column: 2; grid-row: 2; }
  .proof-line { grid-template-columns: 1fr; }
  .proof-line > div, .proof-line > div + div { padding: 1rem 0; border-left: 0; border-bottom: 1px solid var(--rule); flex-direction: row-reverse; justify-content: space-between; align-items: center; }
  .proof-line dt { max-width: 22ch; text-align: right; }
  .multiples { grid-template-columns: 1fr; }
  .versus { grid-template-columns: 1fr; }
  .versus > div + div { border-left: 0; border-top: 1px solid var(--key); }
  .repair { grid-template-columns: 1fr; gap: .75rem; }
  .repair-arrow { text-align: left; }
  .register summary { grid-template-columns: 1fr auto; }
  .r-ev { grid-column: 1; grid-row: 2; text-align: left; padding-left: 1.4rem; }
  .r-act { grid-row: 1 / span 2; grid-column: 2; }
  .player-label { left: .6rem; bottom: .6rem; right: .6rem; padding: .55rem .7rem .55rem .55rem; font-size: .72rem; }
  .play { width: 2rem; height: 2rem; }
  .colophon { columns: 2; font-size: .95rem; }
  .matrix th[scope="row"], .matrix thead th:first-child { width: 9.5rem; }
  .matrix { min-width: 36rem; }
}
@media print {
  .slug, .player, .picker, .hero-actions { display: none; }
  body { background: #fff; }
}

/* ---------- Pricing Demo additions: glossary, definition, trail, view switch, deltas, videos */
.glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0; margin: 2rem 0 0; border-top: 1px solid var(--key); }
.glossary > div { padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--rule); }
.glossary dt { font: 700 1rem/1.25 var(--f-display); font-stretch: 90%; color: var(--key); }
.glossary dt span { font: 400 .72rem var(--f-mono); color: var(--ink-2); }
.glossary dd { margin: .25rem 0 0; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
.defbox { margin: 2.5rem 0 0; padding: 1.25rem 1.5rem; background: var(--blue-wash); border: 1px solid var(--blue); }
.defbox .label { color: var(--blue); }
.def { margin: 0 0 .75rem; max-width: 70ch; }
.def-n { margin: 0; font: 500 .82rem/1.5 var(--f-mono); font-stretch: 87%; color: var(--key); }
.trail { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--key); }
.trail li { padding: 1rem 1rem 1rem 0; display: grid; align-content: start; gap: .35rem; }
.trail li + li { padding-left: 1rem; border-left: 1px solid var(--rule); }
.trail b { font: 760 clamp(2.2rem, 4.2vw, 3.6rem)/.9 var(--f-display); font-stretch: 72%; letter-spacing: -.03em; color: var(--blue); }
.trail span { font: 500 .78rem/1.4 var(--f-mono); font-stretch: 87%; color: var(--ink-2); }
.trail .t-flag b, .trail .t-mis b { color: var(--magenta); }
.trail .t-mis span { color: var(--key); }
.small-print { font-size: .92rem; color: var(--ink-2); margin-top: 1.25rem; }
.viewswitch { display: inline-flex; border: 1px solid var(--key); margin: .5rem 0 .6rem; }
.viewswitch button { min-height: 44px; padding: .5rem .95rem; background: transparent; color: var(--key); border: 0; font: 600 .76rem/1 var(--f-mono); font-stretch: 87%; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.viewswitch button + button { border-left: 1px solid var(--key); }
.viewswitch button[aria-pressed="true"] { background: var(--key); color: var(--paper); }
.viewswitch button#view-reporting[aria-pressed="true"] { background: var(--blue); }
.view-note { margin: 0 0 .5rem; font: 400 .8rem/1.5 var(--f-mono); font-stretch: 87%; color: var(--ink-2); max-width: 80ch; min-height: 1.5em; }
.scroll-hint { display: none; margin: 0 0 .4rem; font: 500 .72rem var(--f-mono); color: var(--ink-2); }
.matrix .delta { display: block; font: 600 .66rem/1.2 var(--f-mono); color: var(--magenta); margin-top: .15rem; }
.legend .delta { display: inline-block; font: 600 .7rem var(--f-mono); color: var(--magenta); margin: 0 .5rem 0 0; }
.matrix .refiled { display: block; white-space: normal; max-width: 11rem; margin-left: auto; color: var(--blue); font-size: .66rem; line-height: 1.3; }
.videos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.videos figure { margin: 0; }
.videos .fig-cap { margin: .6rem 0 0; }
.player-v { aspect-ratio: 9 / 16; }
.player-v .player-label { left: .6rem; right: .6rem; bottom: .6rem; padding: .55rem .7rem .55rem .55rem; font-size: .72rem; }
.player-v .play { width: 2rem; height: 2rem; }
.files-head { margin: 3rem 0 1rem; font-size: 1.6rem; }
.files .f-ext::after { content: " ↗"; }
@media (max-width: 1080px) {
  .hero-body { grid-template-columns: 1fr; }
  .trail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trail li:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 860px) {
  .videos { grid-template-columns: 1fr; }
  .video-short { max-width: 22rem; }
  .scroll-hint { display: block; }
}
@media (max-width: 620px) {
  .h-brand { font-size: 15.5vw; font-stretch: 96%; }
  .trail { grid-template-columns: 1fr 1fr; }
  .trail li, .trail li + li { padding: .8rem .6rem .8rem 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .origin { padding: 1rem; }
}