/* Page layer for the GTM AI Recommendation Index, on top of modernist.css.
   Values follow the Claude Design handoff: 2px ink rules, zero radius, flush left, Archivo throughout. */
html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body { font-size: 15px; line-height: 1.55; }
a { color: var(--color-accent-700); text-decoration: none; border-bottom: 1px solid var(--color-accent-300); }
a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.brand { border-bottom: 0; }
a.btn { border-bottom: 1px solid transparent; }
a.btn-secondary { border-bottom-color: var(--color-divider); }
a.btn-secondary:hover { border-bottom-color: var(--color-divider); color: var(--color-text); }
a.btn-primary:hover { color: var(--color-bg); }
::selection { background: var(--color-accent-200); }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
p + p { margin-top: 15px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.shell { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.kicker { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); margin-bottom: 12px; }
.eyebrow { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 20px; }
.accent { color: var(--color-accent); }
.accent-700 { color: var(--color-accent-700); }
.muted { color: var(--color-neutral-600); }
.muted-dark { color: var(--color-neutral-800); }
.note { font-size: 13px; color: var(--color-neutral-700); margin-top: 10px; max-width: none; }
.num, .tab, .r { font-variant-numeric: tabular-nums; }
.r { text-align: right; }
.b { font-weight: 600; }
.idx { font-family: var(--font-heading); font-weight: 800; font-size: 12px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
/* 50 of margin plus 50 of padding was 102px of furniture per ruled break. The methodology page,
   the densest reference on the site, never used this rule at all: .msec runs 34 and 34. So the
   wide default was not buying a reference page anything, it was just pushing every ruled page
   down. The first break after a hero is tighter again, since the hero already closes with 30. */
.rule-top { border-top: 2px solid var(--color-text); margin-top: 30px; padding-top: 30px; }
.hero + .rule-top { margin-top: 20px; }
/* The subscribe page's three ways follow straight on from the hero: no rule, and the block's padding trimmed. */
.hero + #path { padding-top: 14px; }

/* header, footer */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--color-bg); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 16px 0 12px; border-bottom: 2px solid var(--color-text); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--color-text); }
.brand:hover { color: var(--color-text); }
.mark { display: block; flex: none; }
.wordmark { font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.site-nav { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.site-nav a { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-neutral-600); line-height: 1; padding: 9px 0 7px; border-bottom: 2px solid transparent; }
.site-nav a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.site-nav a:hover { color: var(--color-accent); }
/* The one nav item that asks for money rather than showing a measurement. The word carries the
   meaning and the accent carries the priority; there is no icon because nothing legible at 12px
   uppercase reads as money without resorting to a dollar sign. It already wears the accent, so
   hovering it goes the other way. */
.site-nav a.navfund { color: var(--color-bg); background: var(--color-accent); padding: 9px 14px 9px; border-bottom: 0; margin-left: 4px; }
.site-nav a.navfund:hover { background: var(--color-accent-600); color: var(--color-bg); }
/* The subscribe button is a call to action, not a location, so it looks the same on every page, its own included. */
.site-nav a.navfund[aria-current="page"] { background: var(--color-accent); color: var(--color-bg); border-bottom-color: transparent; }

/* Theme picker, last item in the footer's disclosures column. Hidden unless the
   head script has marked the document scripted, because without JS it could not
   do anything. Auto is the default and means no data-theme attribute at all,
   which leaves the media query in charge. */
.ftheme { display: none; }
.js .ftheme { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ftheme > span { font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); }
.theme { display: inline-flex; align-items: stretch; border: 1px solid var(--color-divider); }
.theme button { font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; color: var(--color-neutral-600); background: transparent; border: 0; padding: 6px 9px; cursor: pointer; }
.theme button + button { border-left: 1px solid var(--color-divider); }
.theme button:hover { color: var(--color-accent); }
.theme button[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); }
.theme button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.site-foot { border-top: 2px solid var(--color-text); margin-top: 72px; padding: 26px 0 40px; font-size: 13px; color: var(--color-text); }
.fmast { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 26px; }
.stacked { display: block; color: var(--color-text); border-bottom: 0; }
.stacked:hover { color: var(--color-text); }
.stacked .mark { display: block; margin-bottom: 12px; }
.stacked .sname { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1.5; }
.fmast-l { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.fmast-r { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fmast-m { flex: 1 1 320px; max-width: 460px; }
.fmast-m .notify.compact { margin-top: 4px; }
.flinks.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.find a { color: var(--color-text); }
.find { font-size: 12.5px; color: var(--color-neutral-700); max-width: 40ch; line-height: 1.5; }
.flinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.fcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 22px; border-left: 1px solid var(--color-divider); }
.flinks .fcol:first-child { border-left: 0; padding-left: 0; }
.fhead { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 10px; }
.fcol a { color: var(--color-text); border-bottom: 0; font-size: 13px; line-height: 1.4; }
.fcol a:hover { color: var(--color-accent); }
.fvert { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.cite { font-size: 13px; line-height: 1.55; max-width: 92ch; border-left: 2px solid var(--color-accent); padding-left: 14px; }
@media (max-width: 900px) { .flinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flinks .fcol { border-top: 1px solid var(--color-divider); } .flinks .fcol:nth-child(-n+2) { border-top: 0; } .flinks .fcol:nth-child(2n+1) { border-left: 0; padding-left: 0; } }
@media (max-width: 480px) { .flinks { grid-template-columns: 1fr; } .flinks .fcol { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-divider); } .flinks .fcol:first-child { border-top: 0; } }

/* identity devices */
.ed-badge { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text); line-height: 1.2; }
.ed-badge .bar { width: 16px; height: 2px; background: var(--color-accent); flex: none; }
.ed-badge.special { background: var(--color-accent); color: var(--color-bg); padding: 5px 10px 5px 8px; }
.ed-badge.special .bar { background: var(--color-bg); }
.hero-eb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 20px; }
.run-date { font-size: 12px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.due b { font-weight: 600; }
.vdev { display: block; flex: none; }
.vtag { display: inline-flex; align-items: center; gap: 10px; }
.vhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 14px 0; border-top: 2px solid var(--color-text); margin-top: 28px; }
.vhead.small { border-top: 1px solid var(--color-divider); margin-top: 0; padding: 12px 0 10px; }
.vgo { margin-left: auto; font-family: var(--font-heading); font-weight: 800; font-size: 10.5px;
       letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-accent-700); white-space: nowrap; }
.vgo:hover { color: var(--color-accent); }
.cicon svg { stroke-linecap: square; stroke-linejoin: miter; }
.sec-head, .msec, #standing { scroll-margin-top: 84px; }
.inquiry { display: grid; gap: 14px; max-width: 720px; }
/* A block, not a column flex box: as a flex container the label text and the "optional" marker
   became two flex items on two lines, so a label carrying one stood taller than its neighbour and
   pushed its field down out of line with it. Inline, they share a line and the fields align. */
.inquiry label { display: block; font-size: 12px; color: var(--color-neutral-700); flex: 1 1 240px; }
.inquiry label > .input { display: block; margin-top: 5px; }
.inquiry .frow { display: flex; flex-wrap: wrap; gap: 14px; }
.inquiry .input { font-size: 14px; }
.inquiry textarea.input { resize: vertical; }
.inquiry .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inquiry .btns { align-items: center; gap: 16px; }

/* provider logos */
.model { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.logo { display: inline-block; flex: none; color: var(--color-text); }
.logo svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* hero */
.hero { display: flex; flex-direction: column; gap: 22px; padding: 40px 0 30px; }
.crumbs + .hero { padding-top: 24px; }
.hero + section > .vsticky, .hero + .vsticky { margin-top: -18px; }
/* ...but not when a section heading sits between the hero and the pinned filter: the pull-up would cover the heading's note. */
.hero + section > .sec-head + .vsticky { margin-top: 6px; }
.hero h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4.8vw, 58px); line-height: 0.98; letter-spacing: -0.025em; text-wrap: pretty; }
.hero-right { display: flex; flex-direction: column; gap: 18px; }
.hero-right p { font-size: 16px; line-height: 1.5; max-width: none; text-wrap: pretty; }
/* Archivo is loaded at 400/600/800, so the default bold of 700 would resolve up to 800,
   the display weight. 600 is the semibold that marks the finding without shouting. */
.hero-right p strong { font-weight: 600; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { cursor: pointer; }

/* stat strip */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); }
.stat { padding: 18px 20px; border-left: 1px solid var(--color-divider); }
.stat:last-child { border-right: 1px solid var(--color-divider); }
.stat-n { font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700); margin-top: 8px; }

/* section heads */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 54px 0 10px; scroll-margin-top: 20px; }
.sec-head h2, .two-col h2, .block h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px, 3vw, 34px); line-height: 1; letter-spacing: -0.02em; }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 40px); }
.block .sec-head { padding: 0 0 16px; }
.sec-note { font-size: 14px; line-height: 1.5; color: var(--color-neutral-700); max-width: none; }
.block { padding-top: 50px; }
.block > h2 { margin-bottom: 20px; }
.intro { margin: 10px 0 24px; font-size: 14px; color: var(--color-neutral-800); }


/* leaderboard */
.leaderboard { border-top: 2px solid var(--color-text); }
.lb-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 24px; padding: 20px 8px 20px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); }
.lb-row:hover { background: var(--color-accent-100); color: var(--color-text); }
.lb-num { width: 26px; flex: none; font-family: var(--font-heading); font-weight: 800; font-size: 12px; color: var(--color-neutral-500); }
.lb-name { flex: 1 1 240px; min-width: 0; }
.lb-cat { font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -0.01em; }
.lb-runners { font-size: 12.5px; color: var(--color-neutral-700); margin-top: 6px; line-height: 1.4; }
.lb-metric { flex: 1 1 260px; min-width: 0; }
.lb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.15; }
.lb-prod { display: inline-flex; align-items: center; gap: 10px; }
.pmark { display: inline-block; flex: none; object-fit: contain; vertical-align: -3px; margin-right: 8px; }
.lb-prod .pmark { margin-right: 0; }
.pcell { display: inline-flex; align-items: center; }
.pcell .pmark { margin-right: 8px; }
.tied { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--color-neutral-700); }
.lb-status { flex: 0 0 108px; font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-neutral-600); text-align: right; }
.track { height: 8px; background: var(--color-neutral-300); margin-top: 10px; }
.track.tall { height: 14px; margin-top: 0; flex: 1 1 auto; }
.track.tall16 { height: 16px; margin-top: 0; flex: 1 1 auto; }
.fill { height: 100%; background: var(--color-text); }
.fill.accent { background: var(--color-accent); }
.fill.ink { background: var(--color-neutral-700); }

/* two-column rows */
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 44px; padding-top: 56px; }
.two-col.rule-top { padding-top: 50px; }
.rows { border-top: 2px solid var(--color-text); }
.bar-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.bar-label { flex: 0 0 170px; font-size: 13.5px; font-weight: 600; }
.bar-val { flex: 0 0 62px; text-align: right; font-family: var(--font-heading); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.anti-row { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.anti-row > div:first-child { flex: 1 1 auto; min-width: 0; }
.anti-name { display: flex; align-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.anti-cat { font-size: 12px; color: var(--color-neutral-700); margin-top: 3px; }
.anti-right { flex: 0 0 auto; text-align: right; }
.anti-pct { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.anti-pct.accent { color: var(--color-accent); }
.anti-models { font-size: 11px; color: var(--color-neutral-700); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 3px; }

/* poster, noise, findings */
.poster { background: var(--color-accent); color: var(--color-bg); margin-top: 64px; padding: 56px 40px; }
.poster .kicker { color: var(--color-bg); opacity: 0.85; font-size: 12px; letter-spacing: 0.14em; margin-bottom: 22px; }
.poster .statement { font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.0; letter-spacing: -0.025em; max-width: 26ch; text-wrap: pretty; }
.poster p { margin-top: 26px; font-size: 15px; line-height: 1.5; max-width: 58ch; }
.noise { padding-top: 10px; }
.noise .sec-head { padding: 44px 0 14px; }
.findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; padding-top: 56px; border-top: 2px solid var(--color-text); margin-top: 56px; }
/* Four cards in an auto-fit grid that fits three left the fourth hanging alone. Two by two
   instead: both rows full, and each card gets the width its paragraph wants. */
.findings.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
@media (max-width: 640px) { .findings.four { grid-template-columns: 1fr; } }
.findings h3 { font-family: var(--font-heading); font-weight: 800; font-size: 21px; line-height: 1.1; margin-bottom: 12px; }
.findings p { font-size: 14px; color: var(--color-neutral-800); }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th.r, .table td.r { text-align: right; }
.table td.idx, .table th.idx { width: 34px; }
.table td.w { font-family: var(--font-heading); font-weight: 800; }
.table td.wrap { white-space: normal; }
.tablewrap { overflow-x: auto; }
/* A hundred and five rows deep, the column labels are long gone, so they pin under the header
   instead. The offset is set in script because the header wraps. Two things this needs: the wrapper
   drops its overflow, since a scroll container pins the row to itself rather than to the viewport
   and this table wraps its cells rather than scrolling; and the rule under the row is drawn as an
   inset shadow, because a collapsed border on a sticky cell is dropped as it detaches. */
.tablewrap.pinhead { overflow: visible; }
/* Below this the four columns no longer fit, so the wrapper takes its scrolling back and the row
   stops pinning: a header you cannot fit is worse than one you scroll past. */
@media (max-width: 560px) { .tablewrap.pinhead { overflow-x: auto; } }
.pinhead thead th { position: sticky; top: 0; z-index: 12; background: var(--color-bg);
                    border-bottom: 0; box-shadow: inset 0 -2px 0 var(--color-divider); }
.tag { border-radius: 0; }
/* Marks a pack file with no free counterpart in the grid above. Sits inline after the filename, so
   the claim in the section note is checkable row by row rather than taken on trust. */
.packonly { margin-left: 8px; vertical-align: 1px; }
/* Claimed is a good state, so it does not wear the accent red that marks findings,
   conflicts and negative rates everywhere else. accent-2 only separates from the accent
   when it is filled: at the pale end of the ramp the two share the same hex. */
.tag-claimed { display: inline-flex; align-items: center; gap: 6px; background: var(--color-accent-2-600); color: var(--color-bg); font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; padding: 5px 9px; }
.tag-claimed svg { display: block; flex: none; }
.matrix th, .matrix td { vertical-align: top; }
.matrix tbody th { text-align: left; font-weight: 400; min-width: 220px; max-width: 300px; padding: 8px; border-bottom: 1px solid var(--color-divider); }
.matrix .var { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700); margin-bottom: 4px; }
.matrix .ptext { font-size: 13.5px; line-height: 1.4; color: var(--color-neutral-800); }
.matrix .fc { font-weight: 600; }
.matrix .al { color: var(--color-neutral-700); font-size: 13px; }
.matrix .ng { color: var(--color-accent-700); font-size: 13px; }
.matrix .none { color: var(--color-neutral-500); font-size: 12px; }
.raw td, .raw th { white-space: nowrap; }

/* category page */
.crumbs { padding-top: 28px; font-size: 12.5px; color: var(--color-neutral-700); letter-spacing: 0.04em; text-transform: uppercase; }
.crumbs .muted { color: var(--color-neutral-500); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 14px 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.chip { display: inline-block; line-height: 1.3; font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 10px; border: 2px solid var(--color-neutral-300); color: var(--color-neutral-800); }
.chip:hover { border-color: var(--color-accent); color: var(--color-neutral-800); }
.chip.current { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
.cat-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; padding: 30px 0 34px; }
.cat-hero h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(32px, 4.4vw, 54px); line-height: 0.98; letter-spacing: -0.025em; text-wrap: pretty; }
.asked { font-size: 14px; color: var(--color-neutral-700); margin-top: 16px; line-height: 1.55; max-width: 46ch; }
.standing-box { border-left: 2px solid var(--color-text); padding-left: 24px; display: flex; flex-direction: column; justify-content: center; }
.standing-box .kicker { margin-bottom: 0; }
.standing-top .pmark { vertical-align: -4px; margin-right: 12px; }
.standing-top a.vlink { color: inherit; border-bottom: 2px solid transparent; }
.standing-top a.vlink:hover { border-bottom-color: var(--color-accent); }
.share-name, .warn-name { display: flex; align-items: center; }
.share-name .pmark, .warn-name .pmark { margin-right: 8px; }
.standing-top { font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 3.6vw, 42px); line-height: 1; letter-spacing: -0.02em; margin: 10px 0; color: var(--color-accent); text-wrap: pretty; }
.tied-big { font-size: 0.55em; color: var(--color-neutral-700); font-weight: 600; }
.verdict-text { font-size: 14.5px; line-height: 1.5; }
.share-row { display: flex; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--color-divider); }
.share-name { flex: 0 0 180px; font-size: 14.5px; font-weight: 600; }
.share-pct { flex: 0 0 54px; text-align: right; font-family: var(--font-heading); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }

/* quadrant plot */
.quad-wrap { display: flex; align-items: stretch; gap: 10px; }
.y-title { flex: none; width: 20px; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700); white-space: nowrap; }
.plot { position: relative; flex: 1 1 auto; min-width: 0; height: 380px; border: 2px solid var(--color-text); background: var(--color-neutral-100); }
.hline { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--color-neutral-500); }
.vline { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--color-neutral-500); }
.thr { position: absolute; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-neutral-600); }
.corner { position: absolute; font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600); }
.corner.tl { left: 10px; top: 8px; } .corner.tr { right: 10px; top: 8px; } .corner.bl { left: 10px; bottom: 8px; } .corner.br { right: 10px; bottom: 8px; }
.marker { position: absolute; transform: translate(-11px, -11px); width: 22px; height: 22px; background: var(--color-text); color: var(--color-bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 11px; font-variant-numeric: tabular-nums; }
.marker.hot { background: var(--color-accent); }
.marker.has-mark { width: 26px; height: 26px; transform: translate(-13px, -13px); background: var(--color-bg); border: 2px solid var(--color-text); }
.marker.has-mark.hot { border-color: var(--color-accent); }
.marker.has-mark .pmark { width: 20px; height: 20px; margin: 0; }
.marker .badge { position: absolute; right: -9px; top: -9px; min-width: 16px; height: 16px; padding: 0 3px; background: var(--color-text); color: var(--color-bg); font-size: 9px; line-height: 16px; text-align: center; font-family: var(--font-heading); font-weight: 800; font-variant-numeric: tabular-nums; }
.marker.hot .badge { background: var(--color-accent); }
.x-axis { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700); margin-top: 8px; padding-left: 30px; }

/* warned against, held */
.warn-row { padding: 13px 0; border-bottom: 1px solid var(--color-divider); }
.warn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.warn-name { font-family: var(--font-heading); font-weight: 800; font-size: 15.5px; }
.warn-pct { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.warn-detail { font-size: 12.5px; color: var(--color-neutral-700); margin-top: 4px; }
.ev { margin: 8px 0 0; padding-left: 12px; border-left: 2px solid var(--color-accent); font-size: 13.5px; line-height: 1.45; color: var(--color-neutral-800); }
.ev .src { display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-neutral-600); margin-top: 4px; }
.held-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.verdict { font-family: var(--font-heading); font-weight: 800; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; }
.verdict.changed { color: var(--color-accent-700); }

/* normalization */
.norm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 36px; }
/* Four lists that belong on one row: at the default 280px minimum only three fit, which left
   the fourth stranded below a very tall industry column. */
.norm-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.norm-grid.four .norm-row { flex-direction: column; align-items: flex-start; gap: 6px; }
@media (max-width: 900px) { .norm-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .norm-grid.four { grid-template-columns: 1fr; } }
.norm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--color-divider); font-size: 13.5px; }
.norm-row + .norm-row { border-top: 1px solid var(--color-divider); }
.norm-empty { font-size: 13.5px; color: var(--color-neutral-700); border-top: 1px solid var(--color-divider); padding-top: 10px; }
.norm-disc { border-top: 2px solid var(--color-accent); padding-top: 12px; font-size: 13.5px; line-height: 1.55; }
.pager { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 40px; }

/* methodology */
.mbody { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; border-top: 2px solid var(--color-text); padding-top: 34px; }
/* align-items: flex-start above shrink-wraps this column to the height of the list, and a sticky
   child can only travel inside its own parent, so the rail left the screen at the first scroll.
   Stretching it to the row gives the list the whole page to travel. The top offset is set from
   script off the real header height, which changes as the nav wraps; 24px is the no-JS fallback. */
.mside { flex: 1 1 200px; max-width: 280px; align-self: stretch; }
.mside .sticky { position: sticky; top: 24px; }
/* The section being read, marked the way every other current thing on the site is marked. */
.mside a.current, .mside a.current .idx { color: var(--color-accent); }
.mside a.current { border-bottom-color: var(--color-accent); }
.mside a { display: flex; gap: 12px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); }
.mside a:hover { color: var(--color-accent); }
.mmain { flex: 4 1 420px; min-width: 0; }
.msec { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--color-divider); scroll-margin-top: 84px; }
.msec-head { display: flex; gap: 14px; align-items: baseline; margin-bottom: 12px; }
.msec h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.05; letter-spacing: -0.015em; }
.msec h3 { font-family: var(--font-heading); font-weight: 800; font-size: 22px; margin: 22px 0 6px; }
.msec p { font-size: 15.5px; line-height: 1.6; max-width: none; text-wrap: pretty; margin-bottom: 14px; }
.msec .table { margin-top: 12px; }
.defs { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 14.5px; max-width: none; margin: 0; }
.defs dt { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-700); padding-top: 3px; white-space: nowrap; }
.defs dd { margin: 0; }
.steps { padding-left: 20px; margin: 0 0 14px; max-width: none; font-size: 15px; }
/* A real list rather than rows each opening with an em dash: six stacked dashes read as clutter on
   a page whose whole job is to be read carefully. The marker is the accent square the site uses. */
.weak { border-top: 2px solid var(--color-text); list-style: none; margin: 0; padding: 0; }
.weak-row { position: relative; padding: 13px 0 13px 26px; border-bottom: 1px solid var(--color-divider); font-size: 14.5px; line-height: 1.5; }
.weak-row::before { content: ""; position: absolute; left: 0; top: 21px; width: 9px; height: 9px; background: var(--color-accent); }

/* data page */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-top: 2px solid var(--color-text); border-left: 2px solid var(--color-text); }
.dl { padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; border-right: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); color: var(--color-text); }
.dl:hover { background: var(--color-accent-100); color: var(--color-text); }
.dl .kicker { margin-bottom: 0; }
.dl-name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.15; }
.dl-desc { font-size: 13px; color: var(--color-neutral-800); line-height: 1.45; }
.dl-size { font-size: 12px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; margin-top: 2px; }
.policies { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.policies p { font-size: 14.5px; line-height: 1.55; }
@media (max-width: 640px) { .shell { padding: 0 16px; } .poster { padding: 40px 24px; } .bar-label { flex-basis: 130px; } }

/* conflict disclosure */
/* Legal pages: ordinary prose, full width like the rest of the site, just spaced to be read. */
.legal-body p { font-size: 15px; line-height: 1.62; margin: 0 0 14px; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body p.note { font-size: 13px; color: var(--color-neutral-700); }
.legal-body code { font-size: 13.5px; background: var(--color-surface); padding: 1px 5px; }
.conflict { border-left: 2px solid var(--color-accent); background: var(--color-accent-100); padding: 14px 18px; margin-top: 18px; }
.conflict .kicker { margin-bottom: 6px; }
.conflict p { font-size: 14px; line-height: 1.5; color: var(--color-neutral-800); }
.dl-grid div.dl:hover { background: var(--color-surface); }

/* categories page */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; border-top: 2px solid var(--color-text); border-left: 2px solid var(--color-text); margin-top: 8px; }
.cc { display: grid; grid-template-rows: subgrid; grid-row: span 8; row-gap: 10px; align-items: start; padding: 22px 20px 20px; border-right: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); color: var(--color-text); }
.cc-grid { grid-auto-rows: auto; }
.cc .track { align-self: center; }
.cc-ref { align-self: end; }
@supports not (grid-template-rows: subgrid) { .cc { display: flex; flex-direction: column; gap: 10px; } }
.cc:hover { background: var(--color-accent-100); color: var(--color-text); }
.cc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cc h3 { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 1.12; letter-spacing: -0.015em; }
.cc-phrase { font-size: 13px; color: var(--color-neutral-700); }
.cc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin-top: 4px; }
.cc-top span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.cc-runners { font-size: 12.5px; color: var(--color-neutral-700); line-height: 1.4; }
.cc-conflict { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-accent-700); }
.cc-ref { font-size: 11.5px; color: var(--color-neutral-600); padding-top: 6px; }

/* category icons */
.cicon { display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent); flex: none; }
.cicon svg { display: block; }
.cc-id { display: inline-flex; align-items: center; gap: 10px; }
.cat-icon-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

.table tr.vrow th { padding-top: 22px; border-bottom: 2px solid var(--color-text); text-transform: none; letter-spacing: 0; color: var(--color-text); font-size: 13px; }

/* home: coverage */
.coverage { border-top: 2px solid var(--color-text); padding-top: 26px; }
.coverage .sec-head { padding-top: 0; margin-bottom: 14px; }
.cov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-left: 2px solid var(--color-text); border-top: 2px solid var(--color-text); }
.cov-col { padding: 18px 16px 20px; border-right: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); min-width: 0; }
.cov-num { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); margin-bottom: 4px; }
.cov-name { font-family: var(--font-heading); font-weight: 800; font-size: 15px; line-height: 1.15; margin-bottom: 12px; min-height: 2.3em; }
.cov-count { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.cov-count .muted { color: var(--color-neutral-700); }
.cov-total { font-size: 15px; color: var(--color-neutral-700); }
.cov-cells { display: flex; flex-wrap: wrap; gap: 3px; width: 100%; }
.cell { display: block; width: 13px; height: 13px; flex: none; border-bottom: 0; }
.cell.scored { background: var(--color-accent); }
.cell.scored:hover { background: var(--color-text); }
.cell.planned { background: transparent; outline: 2px solid var(--color-text); outline-offset: -2px; }
.cell.open { background: var(--color-neutral-200); }
.cov-note { font-size: 11.5px; color: var(--color-neutral-700); margin-top: 12px; line-height: 1.4; }
.legend { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--color-divider); }
.legend > div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
/* The scope line. Seven tiles with 25px numerals read as a second headline and competed with the
   real one, so the same seven figures run as one line: number in ink, label in the accent the rest
   of the site uses for eyebrows. Red stays off the numbers on purpose -- in the tables below it
   means "this is the leader", and these figures are scope rather than a result. */
.runstats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0;
            border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text);
            padding: 13px 0; }
.rs { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
/* The separator trails its own figure rather than leading the next one. On a wrap it then ends a
   line instead of starting one, which is the difference between reading as a continuation and
   reading as a bug. */
.rs:not(:last-child)::after { content: "·"; color: var(--color-neutral-500); margin-left: 11px; }
.rs:not(:last-child) { margin-right: 11px; }
.rs-n { font-family: var(--font-heading); font-weight: 800; font-size: 16px; line-height: 1.3;
        letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--color-text); }
.rs-l { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.09em;
        text-transform: uppercase; color: var(--color-accent-700); }
.note.wide { margin-top: 10px; }
@media (max-width: 700px) { .rs:not(:last-child)::after { margin-left: 8px; } .rs:not(:last-child) { margin-right: 8px; } }

/* home: standing */
.standing { padding-top: 24px; }
.standing .sec-head { padding-top: 0; margin-bottom: 0; }
/* The chips, the name filter and the column header pin as one block: with 2,738 rows, losing
   them on the first scroll means scrolling back to change anything. `top` is set in script from
   the sticky header's measured height, which runs 66px wide and 195px on a phone. */
/* A little ground between the header rule and the controls, so the two rules do not read as
   one thick band. The padding sits inside the sticky block, so nothing shows through. */
.vsticky { position: sticky; top: 0; z-index: 15; background: var(--color-bg); padding-top: 8px; }
.vsticky .vr.head { margin-top: 0; padding-top: 12px; }

/* Long pages: the vendor table alone is 2,738 rows. */
.totop { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: flex; align-items: center;
  gap: 7px; padding: 10px 14px; font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-bg);
  background: var(--color-text); border: 0; cursor: pointer; }
.totop:hover { background: var(--color-accent); }
.totop:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 560px) { .totop { right: 12px; bottom: 12px; padding: 10px 12px; }
  .totop span { display: none; } }

button.chip { appearance: none; cursor: pointer; background: transparent; }
.qualifier { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; padding: 11px 0; border-bottom: 1px solid var(--color-divider); }
.qualifier .ed-badge { flex: none; }
.q-text { font-size: 12.5px; color: var(--color-neutral-800); }
.st-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); }
.st-verdict { flex: 0 0 140px; }
.st-cat, .st-lead, .st-stub { min-width: 0; }
.st-stub .st-name, .st-cat .st-name { color: inherit; text-decoration: none; display: inline-block; font-size: 21px; letter-spacing: -0.02em; margin-top: 4px; }
.st-stub .st-name:hover, .st-cat .st-name:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.st-shape { font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-800); margin-top: 7px; display: block; }
/* the standing row, design handoff 4C: one block per leader, one reading per segment, a mark where the leader changes */
.st-blocks { display: flex; gap: 0; align-items: stretch; min-width: 0; }
.st-blk { position: relative; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--color-divider); padding: 0 16px; }
.st-mark { position: absolute; left: -5px; top: 9px; width: 9px; height: 9px; background: var(--color-accent); }
.st-mark.static { position: static; display: inline-block; margin-right: 7px; vertical-align: -1px; }
.st-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.st-head .tile { width: 26px; height: 26px; }
.st-pname { font-family: var(--font-heading); font-weight: 800; font-size: 16px; line-height: 1.15; letter-spacing: -0.01em; color: inherit; text-decoration: none; min-width: 0; flex: 0 1 auto; }
a.st-pname:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.st-head .verdict-tag { flex: none; padding: 2px 6px; font-size: 9px; letter-spacing: 0.07em; gap: 5px; }
.st-head .verdict-tag::before { width: 7px; height: 7px; }
.st-head .tile { width: 22px; height: 22px; }
.st-reads { display: flex; gap: 16px; margin-top: auto; padding-top: 12px; }
.st-read { flex: 1 1 0; min-width: 0; }
a.st-read { display: block; color: inherit; border-bottom: 0; text-decoration: none; }
a.st-read:hover .st-rs, a.st-read:focus-visible .st-rs { color: var(--color-accent); }
a.st-read:hover .st-fillbar, a.st-read:focus-visible .st-fillbar { background: var(--color-accent); }
a.st-read:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.st-blk.go { cursor: pointer; }
.st-blk.go:hover { background: var(--color-accent-100); }
.st-rl { font-family: var(--font-heading); font-weight: 800; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.st-rs { font-family: var(--font-heading); font-weight: 800; font-size: 19px; letter-spacing: -0.03em; line-height: 1; margin-top: 3px; font-variant-numeric: tabular-nums; }
.st-track { height: 6px; background: var(--color-neutral-200); margin-top: 7px; }
.st-fillbar { height: 6px; background: var(--color-text); }
.st-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 0 12px; border-bottom: 1px solid var(--color-divider); margin-bottom: 4px; font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700); }
.st-legend a { color: var(--color-text); }
.st-legend .st-lg-mark { display: inline-flex; align-items: center; }
.st-legend .verdict-tag { padding: 3px 7px; font-size: 10.5px; letter-spacing: 0.08em; gap: 6px; }
.cr .st-blocks { display: flex; }
.cr-cat .st-shape { margin-top: 4px; }
@media (max-width: 860px) {
  .st-row, .cr { grid-template-columns: 1fr; gap: 12px; }
  .cr-slot, .cr-standing { padding-top: 0; }
  .st-blocks, .cr .st-blocks { flex-direction: column; gap: 14px; }
  .st-blk { border-left: 0; border-top: 1px solid var(--color-divider); padding: 12px 0 0; flex: none !important; }
  .st-mark { left: 0; top: -5px; }
}
.st-v { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-neutral-700); margin-bottom: 4px; }
.st-name { font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1.15; letter-spacing: -0.01em; }
.st-runners { font-size: 12.5px; color: var(--color-neutral-700); margin-top: 5px; line-height: 1.4; }
.st-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.st-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tile { width: 26px; height: 26px; flex: none; background: var(--color-neutral-200); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tile .pmark { margin: 0; width: 100%; height: 100%; object-fit: contain; }
.st-leader { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-share { font-family: var(--font-heading); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; flex: none; }
.st-bar { height: 8px; background: var(--color-neutral-300); margin-top: 9px; }
/* The same bar, sized to the row it sits in: the standing rows are the widest, a category
   card is narrower, and a vendor table cell narrower still. Only the height changes. */
.cr-bar { height: 6px; margin-top: 8px; max-width: 320px; }
.vr-bar { height: 8px; margin-top: 9px; max-width: none; }
.vr-bar .st-fill { height: 8px; }
.st-fill { height: 8px; background: var(--color-text); }
.st-fill.accent { background: var(--color-accent); }
.st-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 12px; font-size: 12.5px; color: var(--color-neutral-700); }
.dl-grid.five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dl-grid.five .dl:nth-child(-n+3) { grid-column: span 2; }
.dl-grid.five .dl:nth-child(n+4) { grid-column: span 3; }
/* A full last row beats a fixed column count, so the renderer counts the cards and asks for the
   width that divides them -- three for six or nine, four for eight or twelve. The cards all carry
   the same kind of thing, so equal width beats stretching whatever is left over. */
.dl-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dl-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* The file cards carry a size line under a description of unpredictable length, so their rows are
   tied together with subgrid: kicker, title, description and size sit on the same lines across a
   row instead of floating wherever the description leaves them. Same device as .cc-grid. */
.dl-files .dl { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 8px; align-items: start; }
@supports not (grid-template-rows: subgrid) { .dl-files .dl { display: flex; flex-direction: column; gap: 8px; } }
@media (max-width: 900px) { .dl-grid.five, .dl-grid.cols-3, .dl-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-grid.five .dl:nth-child(n) { grid-column: auto; }
  /* two columns and an odd number of cards leaves the last one alone, so it takes the whole row.
     :last-child:nth-child(odd) is true only when the count itself is odd. */
  .dl-grid.five .dl:last-child:nth-child(odd), .dl-grid.cols-3 .dl:last-child:nth-child(odd), .dl-grid.cols-4 .dl:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.dl-grid.five .dl, .dl-grid.cols-3 .dl, .dl-grid.cols-4 .dl { padding: 24px 20px; }
[hidden] { display: none !important; }

/* vendors */
.vlink { color: inherit; border-bottom: 1px solid var(--color-neutral-300); }
.vlink:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.vtile { width: 26px; height: 26px; flex: none; background: var(--color-neutral-200); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.vtile .pmark { margin: 0; width: 100%; height: 100%; object-fit: contain; }
.vtile.big { width: 44px; height: 44px; }
.standing-cat { font-size: 0.55em; letter-spacing: 0; color: var(--color-neutral-700); }
.standing-cat a { color: var(--color-text); border-bottom: 2px solid var(--color-accent); }
.chip.static { cursor: default; color: var(--color-neutral-800); }
.chip.static:hover { border-color: var(--color-neutral-300); }
.claim { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; margin-top: 50px; padding: 30px 0 0; border-top: 2px solid var(--color-text); }
.claim h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px, 3vw, 34px); line-height: 1; letter-spacing: -0.02em; margin: 6px 0 14px; }
.claim-text p { font-size: 14px; line-height: 1.55; color: var(--color-neutral-800); margin-bottom: 10px; }
.claim-form { max-width: none; }
.hp { position: absolute; left: -9999px; }
.vr { display: grid; grid-template-columns: 38px minmax(0, 1fr) 330px 96px 88px 104px; gap: 18px; align-items: start; padding: 14px 8px 14px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); font-size: 14px; }
.vr .vtile { width: 30px; height: 30px; }
.vr-link { font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -0.015em; color: inherit; text-decoration: none; }
.vr-link:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
/* A name in a flex column would stretch, and its underline with it; the rule stays under the words. */
.vr-name > .vr-link, .cr-cat > .cr-name { align-self: flex-start; }
.vr-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vr-cat { display: inline-block; padding: 3px 7px; border: 1px solid var(--color-neutral-300); background: var(--color-neutral-200); color: var(--color-neutral-800); font-size: 12px; line-height: 1.3; text-decoration: none; }
.vr-cat:hover { border-color: var(--color-text); }
.vr-cat.more { color: var(--color-accent-700); background: var(--color-accent-100); border-color: var(--color-accent-300); font-weight: 600; }
.vr-line { display: flex; align-items: baseline; gap: 8px; }
.vr-share { font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; line-height: 1; }
.vr-in { font-size: 13.5px; color: var(--color-neutral-800); }
.vr-segline { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.vr-seg { font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.vr-segline .verdict-tag, .vr-mchip { padding: 2px 6px; font-size: 10px; letter-spacing: 0.08em; gap: 6px; }
.vr-segline .verdict-tag::before, .vr-mchip::before { width: 8px; height: 8px; }
.vr-n .vr-mchip { font-family: var(--font-heading); font-weight: 800; font-size: 11px; }
.vr-meta { display: contents; }
.vr-n.num { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.2; padding-top: 4px; }
.vr-n.num.muted { font-family: var(--font-body); font-weight: 400; font-size: 15px; color: var(--color-neutral-800); }
.vr-hnote { display: block; font-family: var(--font-body); font-weight: 400; font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--color-neutral-600); margin-top: 2px; }
.st-lg-note { font-family: var(--font-body); font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none; }
.vr:hover { background: var(--color-accent-100); color: var(--color-text); }
.vr.head { border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600); padding: 10px 8px 10px 0; margin-top: 8px; }
.vr.head:hover { background: transparent; }
.vr-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vr-cats { font-size: 12px; color: var(--color-neutral-700); line-height: 1.35; }
.vr-best { min-width: 0; font-size: 13.5px; }
.vr-n { text-align: right; }
@media (max-width: 720px) {
  .vr { grid-template-columns: 38px minmax(0, 1fr); gap: 10px 14px; }
  .vr.head span:nth-child(n+3) { display: none; }
  .vr-best { grid-column: 2; }
  .vr-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; grid-column: 2; }
  .vr-n { text-align: left; padding-top: 0; font-size: 13px; }
  .vr-n.num::before { content: 'First choices '; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--color-neutral-700); }
  .vr-n.num.muted::before { content: 'Labels '; }
  .vr-n:last-child:empty { display: none; }
}

.pack-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 0; border-bottom: 1px solid var(--color-divider); }
.pack-price { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -0.02em; }
.pack-price .muted { font-size: 13px; letter-spacing: 0; font-weight: 400; font-family: var(--font-body); }

/* hero search */
.search { position: relative; max-width: 760px; }
.search-l { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); margin-bottom: 8px; }
.search-input { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 17px; padding: 14px 16px; border: 2px solid var(--color-text); border-radius: 0; background: var(--color-bg); color: var(--color-text); -webkit-appearance: none; appearance: none; }
.search-input:focus { outline: 0; border-color: var(--color-accent); }
.search-input::placeholder { color: var(--color-neutral-500); }
.search-hint { margin-top: 10px; font-size: 12.5px; color: var(--color-neutral-700); }
.search-hint kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; padding: 1px 5px; border: 1px solid var(--color-neutral-400); }
.suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--color-bg); border: 2px solid var(--color-text); border-top: 0; max-height: 420px; overflow: auto; }
.sg-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--color-divider); color: var(--color-text); font-size: 14.5px; }
.sg-row:first-child { border-top: 0; }
.sg-row:hover, .sg-row.active { background: var(--color-accent-100); color: var(--color-text); }
.sg-type { font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); }
.sg-name { font-family: var(--font-heading); font-weight: 800; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-mark { width: 18px; height: 18px; object-fit: contain; flex: none; }
.sg-meta { font-size: 12.5px; color: var(--color-neutral-700); white-space: nowrap; }
.sg-empty { padding: 12px 14px; font-size: 13px; color: var(--color-neutral-700); }
@media (max-width: 560px) { .sg-row { grid-template-columns: 62px minmax(0, 1fr); } .sg-meta { display: none; } }

/* header search */
.site-head { align-items: center; }
.head-search { flex: 1 1 200px; max-width: 320px; margin-left: 28px; }
.head-search .search-input { font-size: 13.5px; padding: 8px 12px; }
.head-search .suggest { right: auto; width: 560px; max-width: calc(100vw - 48px); max-height: 60vh; }
@media (max-width: 760px) { .head-search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; } .head-search .suggest { width: 100%; } }

.vq { padding: 6px 10px; font-size: 13px; width: 220px; }
.vr[hidden] { display: none !important; }


/* categories register */
/* Two rows of controls: verdict, sort and name filter, then the verticals. The heavy rule closes
   the pair, so the light one between them reads as a break rather than an end. */
.cr-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-bottom: 12px; border-bottom: 1px solid var(--color-divider); }
/* A legend, not a sentence: each verdict tag beside what it means, so the label the rows wear is
   the thing the reader matches on. Wraps to one per line where three will not fit. */
/* The query line. The controls read as one sentence, so the state of the table is legible as type
   rather than decoded from a row of chips, and the same grammar carries every page: only the nouns
   change. Each bold token opens its own menu. */
.qline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 9px; padding: 10px 0 14px; font-size: 16.5px; line-height: 1.5; }
.qline .qtext { color: var(--color-neutral-700); }
.qline .qtext.qtight { margin-left: -9px; }
.qline .qsp { flex: 1 1 24px; }
.qclear { font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.09em;
          text-transform: uppercase; color: var(--color-accent-700); background: none; border: 0;
          border-bottom: 1px solid var(--color-accent-300); border-radius: 0; padding: 0 0 2px;
          margin-left: 4px; cursor: pointer; align-self: center; }
.qclear:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.qclear:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.qfield { position: relative; display: inline-block; }
.qtok { position: relative; font-family: var(--font-heading); font-weight: 800; font-size: 16.5px;
        letter-spacing: -0.012em; color: var(--color-text); background: none; border: 0; border-radius: 0;
        border-bottom: 2px solid var(--color-accent); padding: 0 17px 3px 0; cursor: pointer; }
.qtok::after { content: ""; position: absolute; right: 1px; bottom: 9px; width: 0; height: 0;
               border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
               border-top: 5px solid var(--color-text); }
.qtok:hover { color: var(--color-accent-700); }
.qtok:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.qmenu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 272px;
         background: var(--color-bg); border: 2px solid var(--color-text); padding: 5px 0;
         box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); display: flex; flex-direction: column;
         max-height: min(62vh, 430px); overflow-y: auto; overscroll-behavior: contain; }
.qm-opt { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%;
          padding: 11px 16px; background: none; border: 0; border-radius: 0; cursor: pointer; text-align: left;
          font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.085em;
          text-transform: uppercase; color: var(--color-text); }
a.qm-opt { text-decoration: none; }
.qnav .qm-opt:first-child { border-bottom: 1px solid var(--color-divider); margin-bottom: 4px; padding-bottom: 13px; }
.qm-opt:hover, .qm-opt:focus-visible { background: var(--color-surface); outline: none; }
.qm-opt.current { background: var(--color-surface); }
.qm-l { display: inline-flex; align-items: center; gap: 10px; }
.qm-head { display: block; padding: 11px 16px 4px; font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); }
.qm-opt.qm-sub { padding: 8px 16px 8px 30px; }
.qm-opt.qm-sub + .qm-opt:not(.qm-sub) { border-top: 1px solid var(--color-divider); margin-top: 4px; }
.qm-n { font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--color-neutral-700); }
.qsq { width: 10px; height: 10px; flex: none; }
.qsq.consensus { background: var(--color-ok-600); }
.qsq.leader { background: var(--color-accent); }
.qsq.contested { border: 2px solid var(--color-neutral-600); }
/* The navigator on a category or function page: the same sentence, but the tokens are the index of
   siblings rather than filters, so it keeps the band rules the chip row had and drops the search. */
.st-cmd.st-nav { position: static; margin-top: 16px; min-height: 60px; }
.st-cmd.st-nav .qline { flex: 1 1 auto; justify-content: flex-start; }
.st-cmd.st-nav .qline .qsp { flex: 1 1 24px; }
.cat-hero + .st-cmd.st-nav, .hero + .st-cmd.st-nav { margin-top: 6px; }
.st-cmd.st-nav + .standing, .st-cmd.st-nav + .block, .st-cmd.st-nav + section { padding-top: 30px; }
.st-cmd.st-nav + section > .sec-head { padding-top: 0; }  /* the section heading sits close under the navigator */
.qmore { font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.09em;
         text-transform: uppercase; color: var(--color-accent-700); align-self: center; white-space: nowrap; }
.qmore:hover { color: var(--color-accent); }
.qline.dark .qmore { color: var(--color-bg); border-bottom: 1px solid var(--color-neutral-600); }
.qline.dark .qmore:hover { color: var(--color-accent-300); border-bottom-color: var(--color-accent-300); }
.qsearch { font-family: var(--font-body); font-size: 14px; padding: 8px 12px; border: 2px solid var(--color-text);
           border-radius: 0; background: var(--color-bg); color: var(--color-text); min-width: 220px; }
.qsearch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* The result line under the bar: what is shown, and the distribution the chips used to carry. Those
   counts are a finding on this site, not only a control, so they stay on the surface. */
.qresult { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
           padding: 11px 0; border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-divider);
           font-size: 13.5px; color: var(--color-neutral-800); }
.qresult a { color: var(--color-accent-700); }
@media (max-width: 720px) {
  .qline { font-size: 15.5px; gap: 7px; }
  .qtok { font-size: 15.5px; }
  .qsearch { min-width: 0; width: 100%; }
  .qmenu { min-width: 240px; }
}
/* On the index the legend sits between the noise-floor strip and the table, so it needs a closing
   rule: without one it reads as the first row rather than as a note on how to read the rows. */
/* The vertical band pins under the filter bar and is pushed out by the next section, so a
   reader deep in 73 rows always has the vertical they are in. Its offset is set in script
   from the header plus the filter bar, both of which change height as they wrap.
   z-index below .vsticky so it slides under the filters rather than over them. */
.cr-all .vhead { margin-top: 32px; position: sticky; top: 0; z-index: 14;
  background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.cr-list { border-top: 1px solid var(--color-divider); }
/* The bands sit in the same list as the rows, so each pushes the last out of the way. A sort
   that ignores verticals hides them, and the list then needs the rule and the space itself. */
.cr-all { border-top: 0; }
.cr-all.flat { margin-top: 32px; border-top: 1px solid var(--color-divider); }
.cr-vert { display: none; }
.cr-all.flat .cr-vert { display: inline; }
.cr { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0 24px; align-items: start; padding: 15px 0 16px; border-bottom: 1px solid var(--color-divider); color: var(--color-text); }
.cr .cr-name { color: inherit; text-decoration: none; }
.cr .cr-name:hover { border-bottom-color: var(--color-accent); }

.cr:hover .cr-name { color: var(--color-accent); }
.cr-slot { display: block; padding-top: 20px; }
.cr-cat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-kicker { margin: 0; color: var(--color-neutral-600); }
.cr-name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.cr-phrase { font-size: 12.5px; color: var(--color-neutral-600); }
.cr-standing { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; min-width: 0; }
.cr-lead { display: flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-weight: 800; font-size: 15px; line-height: 1.2; }
.cr-lead .pmark { flex: none; }
.cr-share { margin-left: 2px; color: var(--color-neutral-700); font-weight: 700; }
/* The margin over the runner-up: the number the closest-race sort is ordering on, and noise
   under any other order, so it is only shown under that one. */
.cr-gap { display: none; color: var(--color-neutral-600); font-weight: 700; font-size: 13px; }
.cr-all.race .cr-gap { display: inline; }
.cr-runners { font-size: 12.5px; color: var(--color-neutral-700); line-height: 1.45; }
@media (max-width: 760px) {
  .cr { grid-template-columns: 1fr; gap: 8px 0; }
  .cr-slot, .cr-standing { padding-top: 0; }
  /* The filter bar stays pinned on a phone, so a chip row scrolls sideways rather than wrapping
     to three lines and taking the screen the rows are supposed to be using. */
}

/* movement */
.delta { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; }
.delta.up { color: var(--color-text); }
.delta.down { color: var(--color-accent-700); }
.delta.within { color: var(--color-neutral-500); }
.delta.flat, .delta.new { color: var(--color-neutral-600); text-transform: uppercase; font-size: 11px; letter-spacing: 0.07em; }
.q { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; }
.q.beyond { color: var(--color-accent-700); }
.q.within { color: var(--color-neutral-500); }
.mv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px 40px; margin-top: 18px; }
.mv-block.wide { margin-top: 28px; }
.mv-block .kicker { margin-bottom: 8px; }
.mv-rows { border-top: 2px solid var(--color-text); }
.mv-row { padding: 12px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.mv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mv-head a { font-weight: 600; }
.mv-verdicts { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.mv-verdicts .lb-status { flex: none; text-align: left; }
.mv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.mv-was, .mv-now { display: inline-flex; align-items: center; gap: 8px; }
.mv-was { color: var(--color-neutral-700); }
.mv-arrow { color: var(--color-neutral-500); }
.since { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-divider); font-size: 13.5px; line-height: 1.5; }
.sim-banner { background: var(--color-text); color: var(--color-bg); font-size: 13px; padding: 9px 0; text-align: center; }
/* An archived edition's pages carry one line saying which edition they are and where the current standing is. */
.archive-banner { background: var(--color-text); color: var(--color-bg); font-size: 13px; padding: 9px 16px; text-align: center; }
.archive-banner a { color: var(--color-bg); text-decoration: underline; text-underline-offset: 3px; }
.archive-banner a:hover { color: var(--color-accent); }
.ed-link { text-decoration: none; }
.ed-link:hover .ed-badge { color: var(--color-accent); }
.sim-note { font-size: 13.5px; color: var(--color-neutral-800); border-left: 2px solid var(--color-text); padding-left: 12px; margin: 14px 0 0; }

/* the category verdict, one component everywhere */
.verdict-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px 6px 8px; border: 1px solid var(--color-neutral-300); background: var(--color-neutral-100); font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; color: var(--color-text); }
.verdict-tag::before { content: ''; width: 8px; height: 8px; flex: none; border: 2px solid currentColor; box-sizing: border-box; }
/* Consensus is green, on the ok ramp the Measured tag uses, so the three verdicts read as three
   states rather than as two greys and a red. The ramp reverses in dark, like the accent one. */
.verdict-tag.consensus { color: var(--color-ok-800); background: var(--color-ok-100); border-color: var(--color-ok-300); }
.verdict-tag.consensus::before { background: currentColor; }
.verdict-tag.leader { color: var(--color-accent-700); background: var(--color-accent-100); border-color: var(--color-accent-300); }
.verdict-tag.leader::before { background: currentColor; }
.verdict-tag.contested { color: var(--color-neutral-700); background: var(--color-bg); border-color: var(--color-neutral-300); }
.verdict-tag.collecting { color: var(--color-neutral-500); background: transparent; border-style: dashed; }
.verdict-tag.collecting::before { border-style: dashed; }
/* Statuses on the edition log are their own family, in ink, so a published row does not read as a verdict. */
.verdict-tag.st-published { color: var(--color-bg); background: var(--color-text); border-color: var(--color-text); }
.verdict-tag.st-published::before { background: currentColor; border-color: currentColor; }
.verdict-tag.st-measured { color: var(--color-text); background: var(--color-neutral-200); border-color: var(--color-neutral-300); }
.verdict-tag.st-measured::before { background: currentColor; }
.verdict-tag.st-staged { color: var(--color-neutral-700); background: var(--color-bg); border-color: var(--color-neutral-300); }
.verdict-tag.st-scheduled { color: var(--color-neutral-500); background: transparent; border-style: dashed; }
.verdict-tag.st-scheduled::before { border-style: dashed; }
/* Access on the Data page: what is free is ink, what is in the pack is grey; neither borrows a verdict's colour. */
.verdict-tag.free { color: var(--color-text); background: var(--color-neutral-100); border-color: var(--color-neutral-300); }
.verdict-tag.free::before { background: currentColor; }
.verdict-tag.packonly { color: var(--color-neutral-800); background: var(--color-neutral-200); border-color: var(--color-neutral-300); margin-left: 0; vertical-align: baseline; }
.verdict-tag.packonly::before { background: var(--color-neutral-700); border-color: var(--color-neutral-700); }
.standing-verdict { margin-top: 10px; margin-bottom: 12px; }
.mv-verdicts { display: inline-flex; align-items: center; gap: 8px; }

/* support the index */
.path { display: grid; gap: 0; border-top: 2px solid var(--color-text); }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--color-divider); }
.step-n { font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1; color: var(--color-accent); }
.step h3 { font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1.12; letter-spacing: -0.015em; margin: 4px 0 10px; }
.step p { font-size: 15px; line-height: 1.55; margin: 0 0 10px; }
.step .btns { margin-top: 6px; }
.sponsor-line { margin: 14px 0 0; padding: 10px 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); font-size: 13.5px; }
@media (max-width: 640px) { .step { grid-template-columns: 1fr; gap: 6px; } }

.dl.embargo { opacity: 0.85; }
.dl.embargo .dl-name { color: var(--color-neutral-700); }

/* Claimed is a status, not a section: it sits in a panel so it reads as one
   statement, and its heading drops below the page's own headings so the
   standing above it stays the loudest thing on the page. */
.claim.claimed { align-items: start; grid-template-columns: 1fr; gap: 26px; padding: 26px 24px; background: var(--color-surface); }
.claim.claimed h2 { font-size: clamp(19px, 1.7vw, 23px); margin: 0 0 10px; }
.claim.claimed .claim-text > p:first-of-type { margin-bottom: 0; }
@media (max-width: 720px) { .claim.claimed { padding: 22px 18px; } }
.lin { color: var(--color-text); border-bottom: 0; display: inline-flex; align-items: baseline; gap: 5px; }
.lin:hover { color: var(--color-accent); }
.lin svg { align-self: center; opacity: 0.6; }
.lin:hover svg { opacity: 1; }
.claim-desc { font-size: 15px; line-height: 1.55; border-left: 2px solid var(--color-accent); padding-left: 12px; margin-top: 12px; }
.correction { margin-top: 14px; }
.correction summary { cursor: pointer; font-family: var(--font-heading); font-weight: 800; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-accent-700); }
.correction form { margin-top: 12px; }
/* The status reads across the panel and the two offers sit in a row under it.
   Stacking them in a side column left the status column short and the panel
   with a hole in it at every width above the breakpoint. */
/* Two offers, so two explicit columns. auto-fit cannot collapse a track here:
   the kicker spans every one of them, so none is ever empty. */
.claim-next { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
@media (max-width: 720px) { .claim-next { grid-template-columns: 1fr; } }
.claim-next .dl { border: 2px solid var(--color-text); padding: 18px; }
.claim-next .kicker { margin-bottom: 2px; grid-column: 1 / -1; }  /* a label for the row, not a cell in it */

.lock { margin-top: 20px; border-left: 2px solid var(--color-accent); padding: 4px 0 4px 16px; }
.lock p { font-size: 15px; line-height: 1.55; margin: 0; }

/* The single edition, under the subscription it is an alternative to. */

.table.compare td:nth-child(2) { width: 30%; }
.table.compare td:nth-child(3) { width: 42%; }

/* a linked step lands clear of the sticky header */
.step[id] { scroll-margin-top: 96px; }
#pricing, #pack, #path, #inquire { scroll-margin-top: 84px; }
/* The last step's divider would sit just above the next section's rule. */
.step:last-child { border-bottom: 0; }

/* Buyer segments: the strip on a category page and the switch on the register. Standings sit side by side, never summed. */
.segs { margin-top: 8px; }
.seg-list { border-top: 1px solid var(--color-divider); }
.seg-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 0 24px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.seg-row:hover .seg-go { color: var(--color-accent-700); }
.seg-row.current { background: var(--color-neutral-100); box-shadow: 0 0 0 8px var(--color-neutral-100); }
.seg-standing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.seg-lead { font-weight: 600; }
.seg-go { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-neutral-600); white-space: nowrap; }
.seg-switch { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; padding: 14px 0 6px; line-height: 1; }
.vsticky .seg-switch { padding: 10px 0 0; }
.seg-tab { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.seg-tab.current { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.h1-seg { display: block; font-size: .5em; font-weight: 500; color: var(--color-neutral-600); letter-spacing: 0; margin-top: 6px; }
@media (max-width: 720px) { .seg-row { grid-template-columns: 1fr; gap: 6px 0; } }

/* the release-note signup (Subscribe page, /notify/, footer) */
.notify .nrow { display: flex; gap: 8px; flex-wrap: wrap; max-width: 560px; }
.notify .nrow .input { flex: 1; min-width: 240px; }
.notify.compact { margin-top: 18px; }
.notify.compact label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
.notify.compact .nrow { max-width: 420px; }
.notify.compact .note { margin-top: 6px; }

/* the product search inside the claim step on the Subscribe page */
.claim-find { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.claim-find .search { flex: 1 1 320px; max-width: 520px; position: relative; }
.claim-find .search-input { width: 100%; }
.claim-find + .note { margin-top: 10px; }

/* the edition's figures on the hero's eyebrow line, opposite the edition badge (home page) */
/* The home search runs the full width with its key hint at the end of the row, and the edition's
   figures sit under it as one quiet line: the category count is in the leaderboard bar and the
   model count in the standfirst, so neither is repeated. */
.search.home { max-width: none; }
.search-row { display: flex; align-items: center; gap: 14px; }
.search-row .search-input { flex: 1 1 auto; min-width: 0; }
.search-row .search-hint { flex: none; margin: 0; white-space: nowrap; }
.hero-stats { font-size: 12.5px; color: var(--color-neutral-700); margin-top: -6px; }
.hero + .standing { padding-top: 0; margin-top: -8px; }
.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; }
@media (max-width: 560px) { .search-row .search-hint { display: none; } }
@media (max-width: 900px) { .eb-stats { display: none; } }

/* The leaderboard's command bar: the section title and the query line as one ink band that starts
   the table and stays with it on scroll, so the reader keeps the name of the object and the state
   of the filters together. Content width, like every other rule on the page, with the text set
   in from the ink edge. `.st-bar` was taken by the share bar in the rows. */
.st-cmd { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
          gap: 8px 16px; flex-wrap: wrap; margin: 0; padding: 13px 16px;
          background: var(--color-text); color: var(--color-bg);
          border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); }
.st-cmd-l { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.st-title { font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1.2; margin: 0; }
.st-count { font-size: 13px; color: var(--color-neutral-400); }
.st-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding: 9px 0;
           border-bottom: 1px solid var(--color-divider); font-size: 12.5px; color: var(--color-neutral-700); }
.st-note a { color: var(--color-text); white-space: nowrap; }
/* The count's lead clause is the first thing to give when the bar would otherwise wrap: a laptop
   keeps "all 73 categories · 42 unsettled" beside the title and the filters on the same line. */
@media (max-width: 1320px) { .st-count-lead { display: none; } .st-count::first-letter { text-transform: uppercase; } }
@media (max-width: 640px) { .st-cmd { padding: 12px 12px; } .st-cmd .qline { flex: 1 1 100%; justify-content: flex-start; } }
/* On the categories register and the vendors table the bar rides inside the sticky block with the
   segment switch or the column header, so the block carries the pin and the bar does not. */
.vsticky .st-cmd { position: static; }
.st-cmd .qsearch { margin-right: 0; }
/* With an ink bar the block's ground strip under the header rule reads as a second rule, so the
   block carrying a bar keeps none. */
.vsticky.bar { padding-top: 0; }
.vsticky .seg-switch { padding: 0 0 10px; }
.st-cmd + .vr.head { border-top: 0; margin-top: 0; }
.st-cmd + .st-note { margin-top: 0; }

/* The query line reversed out of ink. Tokens become light chips, the connectives step down to a
   neutral, and the filter field sits on the ink ground with a lighter border. */
.st-cmd .qline { padding: 0; font-size: 14px; gap: 6px 8px; flex: 0 1 auto; justify-content: flex-end; }
.qline.dark .qtext { color: var(--color-neutral-400); }
.qline.dark .qtext.qtight { margin-left: -3px; }
.qline.dark .qtok { font-size: 14px; background: var(--color-bg); color: var(--color-text); border-bottom: 0; padding: 3px 20px 3px 7px; }
.qline.dark .qtok::after { right: 7px; bottom: 9px; }
.qline.dark .qtok:hover { color: var(--color-accent-700); }
.qline.dark .qtok:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.qline.dark .qsp { flex: 0 0 4px; }
/* On the home bar the filter field takes whatever its line has to spare, so when the bar wraps
   the field sits at the right edge at a readable width instead of leaving the line empty. The
   register and the vendors table keep the small field: their sentences already fill the line. */
.standing .st-cmd .qline { flex: 1 1 auto; }
.standing .st-cmd .qline .qsp { flex: 1 1 4px; }
.standing .st-cmd .qline .qsearch { flex: 1 1 132px; max-width: 300px; }
.qline.dark .qsearch { background: var(--color-text); color: var(--color-bg); border: 2px solid var(--color-neutral-600);
                       font-size: 12.5px; padding: 6px 10px; width: 132px; flex: 0 0 132px; min-width: 0; }
.qline.dark .qsearch::placeholder { color: var(--color-neutral-400); }
.qline.dark .qsearch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-accent); }
.qline.dark .qclear { color: var(--color-accent-300); border-bottom-color: var(--color-accent-700); }
.qline.dark .qclear:hover { color: var(--color-bg); border-bottom-color: var(--color-bg); }

/* A menu that defines its options: the tag the rows carry, what it means, and the count. */
.qmenu.defs { width: 470px; padding: 0; }
.qmenu.defs .qm-opt { display: grid; grid-template-columns: 150px minmax(0, 1fr) 34px; gap: 12px; align-items: start;
                      padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--color-divider);
                      text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; }
.qmenu.defs .qm-tag { justify-self: start; }
.qmenu.defs .qm-def { font-size: 12.5px; line-height: 1.4; color: var(--color-text); }
.qmenu.defs .qm-n { text-align: right; font-family: var(--font-heading); font-weight: 800; font-size: 13px; color: var(--color-text); }
.qmenu.defs .qm-foot { display: block; padding: 10px 14px; font-size: 12px; line-height: 1.45;
                       color: var(--color-neutral-700); background: var(--color-neutral-200); }
.qmenu.defs .qm-foot a { color: var(--color-text); }
@media (max-width: 720px) { .qmenu.defs { width: calc(100vw - 48px); } .qmenu.defs .qm-opt { grid-template-columns: 120px minmax(0, 1fr) 30px; } }

/* A verdict tag that is a link keeps the tag's look. */
a.verdict-tag { border-bottom: 1px solid var(--color-neutral-300); text-decoration: none; }
a.verdict-tag:hover { color: var(--color-text); border-color: var(--color-text); }

/* The subscription as a spec sheet: the four questions the paragraph braided together, each in
   its own region. 2px rules at the panel's edges and between regions, 1px within. It sits inside
   .step's gutter so the red 2 stays aligned with the 1 and the 3. */
.offer { border: 2px solid var(--color-text); }
.offer .kicker { margin: 0 0 8px; }
.offer-h { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
           padding: 16px 22px; background: var(--color-text); color: var(--color-bg); }
.offer-h .t { font-family: var(--font-heading); font-weight: 800; font-size: 24px; letter-spacing: -0.015em; line-height: 1.1; margin: 0; }
.offer-h .s { font-size: 14px; line-height: 1.45; color: var(--color-neutral-400); margin-top: 6px; max-width: 60ch; }
.offer-h .pr { text-align: right; font-family: var(--font-heading); font-weight: 800; }
.offer-h .p { font-size: 34px; letter-spacing: -0.025em; line-height: 1; }
.offer-h .pu { font-size: 14px; font-weight: 400; color: var(--color-neutral-400); }
.offer-h .py { font-size: 13px; font-weight: 400; color: var(--color-neutral-400); margin-top: 4px; }
/* The two columns share their row heights through a subgrid, so each divider on the left lines up
   with its neighbour on the right: one heading row and four item rows across both. */
.offer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(4, auto); border-bottom: 2px solid var(--color-text); }
.offer-cols > div { padding: 18px 22px 12px; display: grid; grid-template-rows: subgrid; grid-row: span 5; }
.offer-cols > div + div { border-left: 2px solid var(--color-text); }
.offer-li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--color-divider); }
.offer-li:last-child { border-bottom: 0; }
.offer-li .m { width: 10px; height: 10px; margin-top: 5px; background: var(--color-accent); }
.offer-li.out .m { background: none; border: 2px solid var(--color-text); box-sizing: border-box; }
.offer-li .n { font-family: var(--font-heading); font-weight: 800; font-size: 14.5px; line-height: 1.3; }
.offer-li .n code { font-size: 13.5px; }
.offer-li .n .tag { vertical-align: 2px; margin-left: 6px; }
.offer-li .d { font-size: 13px; line-height: 1.4; color: var(--color-neutral-700); margin-top: 2px; }
.offer-when { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--color-neutral-200); border-bottom: 2px solid var(--color-text); }
.offer-when > div { padding: 14px 22px; border-right: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: 3px; }
.offer-when > div:last-child { border-right: 0; }
.offer-when b { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.15; }
.offer-when span:not(.kicker) { font-size: 12.5px; line-height: 1.4; color: var(--color-neutral-700); }
.offer-when .kicker { margin-bottom: 2px; }
.offer-buy { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px 28px; align-items: start; padding: 20px 22px; }
.offer-buy .btns { margin-top: 0; }
.offer .offer-lock { font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-700); margin: 14px 0 0; }
.offer .offer-lock strong { color: var(--color-text); font-weight: 600; }
.offer-lock a { color: var(--color-neutral-700); }
.offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; border-top: 1px solid var(--color-divider); padding: 14px 22px; }
.offer-foot p { font-size: 13.5px; line-height: 1.5; color: var(--color-neutral-800); margin: 0; }
.offer-foot .kicker { margin: 0 0 3px; }
.offer-foot .btns { margin: 0; }
/* The ladder: one bar per coming edition, height proportional to its monthly price. */
.ladder { display: flex; align-items: flex-end; gap: 6px; }
.ladder > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ladder .v { font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ladder .bar { display: block; background: var(--color-neutral-300); }
.ladder .now .bar { background: var(--color-accent); }
.ladder .m { font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-neutral-700); }
.ladder .now .m, .ladder .now .v { color: var(--color-accent-700); }
.ladder .sc { font-size: 11.5px; line-height: 1.35; color: var(--color-neutral-700); min-height: 47px; }
@media (max-width: 820px) {
  .offer-cols, .offer-when, .offer-buy { grid-template-columns: 1fr; }
  .offer-cols > div { display: block; }
  .offer-cols > div + div { border-left: 0; border-top: 2px solid var(--color-text); }
  .offer-when > div { border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .offer-when > div:last-child { border-bottom: 0; }
  .offer-h .pr { text-align: left; }
}

/* A checkbox line in a form: the box on the text's first line, the text wrapping under itself. */
.inquiry label.check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.45; }
.inquiry label.check input { margin: 3px 0 0; accent-color: var(--color-accent); }

/* The ladder's heading is the way to the pricing table it summarises. */
.offer a.kicker.offer-go { color: var(--color-accent-700); border-bottom: 1px solid var(--color-accent-300); display: inline-block; margin-bottom: 10px; }
.offer a.kicker.offer-go:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
/* The expanded offer beside the base subscription's buttons. */
.offer-exp { border-top: 2px solid var(--color-text); padding-top: 14px; }
.offer-exp p { margin: 6px 0 8px; font-size: 14px; line-height: 1.55; }
.offer-exp .btns { margin-top: 10px; }

.exp-pick { display: block; margin: 10px 0 0; }
.exp-pick .kicker { display: block; margin: 0 0 6px; }
.exp-pick select.input { width: 100%; max-width: 420px; }
.offer-exp a.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Three ways in, design handoff 2A (2026-09-14): the claim as a strip, two equal pack panels headed by
   their model grids, what arrives as one strip under both. The marks carry the packaging. */
.ways .wn { font-family: var(--font-heading); font-weight: 800; font-size: 28px; line-height: .9; color: var(--color-accent); }
.ways-claim { border-top: 3px solid var(--color-text); border-bottom: 1px solid var(--color-divider); padding: 16px 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.ways-claim .wt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ways-claim h3 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.ways-claim p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; max-width: 62ch; }
.ways-claim .claim-find { margin-top: 0; }
.ways-claim .note { margin: 6px 0 0; }
/* The two panels share five row tracks (header, models, scope or flagship block, the pre-buy row, the buy row), so
   the ink headers, the prices, the picker and the buttons line up across both whatever their copy does. */
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0 24px; margin-top: 24px; }
.pack { border: 2px solid var(--color-text); display: grid; grid-template-rows: subgrid; grid-row: span 6; background: var(--color-bg); }
.pack-h { background: var(--color-text); color: var(--color-bg); padding: 24px 20px 18px; display: flex; flex-direction: column; }  /* 24px on both: the expanded panel draws its accent bar inside the top 6px */
.pack.exp .pack-h { box-shadow: inset 0 6px 0 var(--color-accent); }
.pack-h .pk { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.pack-h .pk .wn { font-size: 20px; }
.pack-h .pk .kicker { color: var(--color-neutral-500); margin: 0; }
.pack-h h3 { margin: 0; color: var(--color-bg); font-size: 25px; letter-spacing: -.02em; line-height: 1.1; }
.pack-h p { margin: 7px 0 0; font-size: 14px; line-height: 1.45; color: var(--color-neutral-300); }
.pack-h .pack-price { display: flex; align-items: baseline; gap: 9px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--color-neutral-700); font-size: 13px; color: var(--color-neutral-300); }
.pack-h p { margin-bottom: 14px; }
.pack-h .pack-price .p { font-family: var(--font-heading); font-weight: 800; font-size: 30px; letter-spacing: -.03em; color: var(--color-bg); }
.pack-b { padding: 18px 20px 4px; }
.pack-b.end { align-self: end; }
.scope-line { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); }
.pack-b > .kicker { margin: 0 0 12px; display: block; }
.pack-b .note { margin: 8px 0 0; font-size: 12px; }
.mgrid, .fgrid { display: grid; border-top: 1px solid var(--color-divider); border-left: 1px solid var(--color-divider); }
.mgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcell { border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); padding: 12px 10px; min-height: 92px; }
.fgrid .mcell { padding: 14px 12px; min-height: 108px; }
.mname { font-family: var(--font-heading); font-weight: 800; font-size: 13px; line-height: 1.2; margin-top: 10px; text-wrap: pretty; }
.fgrid .mname { font-size: 14px; margin-top: 12px; }
.mlab { font-size: 11.5px; color: var(--color-neutral-600); margin-top: 2px; }
.mk { display: inline-block; width: var(--mks); height: var(--mks); background: var(--color-text); mask-image: var(--mk); mask-size: contain; mask-repeat: no-repeat; mask-position: left center; -webkit-mask-image: var(--mk); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left center; vertical-align: middle; }
.mk.grey { background: var(--color-neutral-600); mask-position: center; -webkit-mask-position: center; }
.mtile { display: inline-flex; align-items: center; height: var(--mks); padding: 0 7px; border: 2px solid var(--color-text); font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: .06em; vertical-align: middle; }
.mtile.grey { border-width: 1px; border-color: var(--color-neutral-600); color: var(--color-neutral-600); font-size: 9.5px; padding: 0 5px; }
.scope4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.scope4 > div { padding: 10px 0; }
.scope4 .sv { font-family: var(--font-heading); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.scope4 .sk { font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); margin-top: 2px; }
.pack-pre { padding: 16px 20px 0; align-self: end; }
.pack-buy { padding: 10px 20px 20px; }
.pack-buy .pack-go { display: block; text-align: center; width: 100%; }
.pack-buy .terms { font-size: 12px; color: var(--color-neutral-700); line-height: 1.5; margin: 9px 0 0; }
.pack-buy .terms strong { color: var(--color-text); }
.pack-alt { border-top: 1px solid var(--color-divider); padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12.5px; color: var(--color-neutral-700); }
.pack-alt .btn { white-space: nowrap; }
.inc { background: var(--color-neutral-200); border-bottom: 2px solid var(--color-text); padding: 14px 20px; }
.inc > .kicker { margin: 0 0 10px; display: block; color: var(--color-text); }
.inc-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.inc .note { margin: 10px 0 0; font-size: 12px; }
.callout { font-size: 13px; line-height: 1.5; margin: 0; padding: 10px 12px; border-left: 3px solid var(--color-accent); background: var(--color-accent-100); }
.pack-b2 { display: block; }
.pack-pre .exp-pick { margin: 0; }
.pack-pre .exp-pick select.input { max-width: none; }
.pack-buy a.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.arrives { margin-top: 24px; border-top: 2px solid var(--color-text); padding-top: 15px; }
.arrives-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.arrives-h .kicker, .arrives-h .note { margin: 0; }
.arrives-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 22px; }
.af { padding: 7px 0; border-bottom: 1px solid var(--color-divider); }
.afn { font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.afd { font-size: 12px; color: var(--color-neutral-700); line-height: 1.4; margin-top: 1px; }
@media (max-width: 900px) {
  .ways-claim { grid-template-columns: 32px minmax(0, 1fr); }
  .ways-claim > div:last-child { grid-column: 2; }
  .packs { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 24px; }
  .pack { grid-template-rows: repeat(6, auto); grid-row: auto; }
  .arrives-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The collecting line, as a banner above the header while an edition run is under way: the same ink banner the
   archive and the simulated preview use, with an accent square as the live mark. */
.collect-banner { background: var(--color-text); color: var(--color-bg); font-size: 13px; line-height: 1.5; padding: 9px 20px; text-align: center; }
.collect-banner strong { color: var(--color-bg); }
.collect-banner .dot { display: inline-block; width: 8px; height: 8px; background: var(--color-accent); margin-right: 9px; vertical-align: 1px; }

/* What the dataset is for, design handoff 3A (2026-09-14): the premise on ink, eight uses as cards with schematic
   diagrams that assert no values, the tools strip, why it has to be this dataset, one closing row. */
.value .premise { background: var(--color-text); color: var(--color-bg); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; padding: 30px 32px; }
.value .premise .kicker { color: var(--color-accent); margin: 0 0 12px; display: block; }
.value .premise h2 { margin: 0; color: var(--color-bg); font-size: 29px; line-height: 1.2; letter-spacing: -.02em; max-width: 46ch; text-wrap: pretty; }
.value .premise p { font-size: 15.5px; line-height: 1.55; color: var(--color-neutral-300); margin: 16px 0 0; max-width: 72ch; }
.premise-stat { border-left: 2px solid var(--color-accent); padding-left: 20px; }
.premise-stat .big { font-family: var(--font-heading); font-weight: 800; font-size: 62px; line-height: .85; letter-spacing: -.04em; }
.premise-stat p { font-size: 14.5px; line-height: 1.5; color: var(--color-bg); margin: 10px 0 0; }
.premise-stat p strong { color: var(--color-bg); }
.premise-stat p.muted { font-size: 14px; color: var(--color-neutral-300); }
.premise-stat .sq { display: flex; gap: 4px; margin-top: 14px; }
.premise-stat .sq i { width: 14px; height: 14px; background: var(--color-neutral-800); }
.premise-stat .sq i.a { background: var(--color-accent); }
.premise-stat .dg-cap { color: var(--color-neutral-500); }
.uses-head { margin-top: 34px; border-top: 3px solid var(--color-text); padding-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.uses-head h2 { margin: 0; font-size: 34px; line-height: 1; letter-spacing: -.025em; }
.uses-head.small { margin-top: 28px; border-top-width: 2px; }
.uses-head.small h2 { font-size: 26px; }
.uses-head .sec-note { max-width: 58ch; margin: 0; }
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-divider); border-left: 1px solid var(--color-divider); margin-top: 20px; }
.uses.two { margin-top: 0; border-top: 0; }
.use.wide { grid-column: span 2; }
/* Each card is five parts on five shared row tracks (subgrid), so across a row of cards the questions, the
   diagrams, the copy and the FROM lines each start on one line whatever the copy does. */
.use { border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); padding: 20px; display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; }
.use-k { display: flex; align-items: baseline; gap: 9px; }
.use-k .n { font-family: var(--font-heading); font-weight: 800; font-size: 13px; color: var(--color-accent); }
.use-k .kicker { margin: 0; }
.use h3 { margin: 10px 0 0; font-size: 19px; line-height: 1.25; letter-spacing: -.015em; text-wrap: pretty; }
.use.wide h3 { font-size: 22px; max-width: 46ch; }
.use p { font-size: 13.5px; line-height: 1.5; margin: 14px 0 0; }
.use.wide p { max-width: 78ch; }
.use-from { align-self: end; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--color-divider); font-size: 11.5px; color: var(--color-neutral-700); }
.use .dg { align-self: start; }
.use-from span { font-family: var(--font-heading); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dg { margin-top: 16px; background: var(--color-neutral-200); padding: 12px; }
.dg-cap { font-size: 11px; color: var(--color-neutral-700); margin-top: 9px; }
.dg i { display: block; }
.dg .a { background: var(--color-accent); } .dg .a2 { background: #f7a293; } .dg .ink { background: var(--color-text); }
.dg .g { background: var(--color-neutral-300); } .dg .g2 { background: var(--color-neutral-700); } .dg .g3 { background: var(--color-neutral-400); }
.dg .e { background: var(--color-neutral-200); border: 1px solid var(--color-neutral-300); }
.dg-matrix { display: grid; grid-template-columns: 52px repeat(5, 1fr); gap: 3px; align-items: center; }
.dg-matrix b { font-size: 9.5px; color: var(--color-neutral-700); font-weight: 400; }
.dg-matrix b:first-child { font-family: var(--font-heading); font-weight: 800; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-500); }
.dg-matrix b.you { font-family: var(--font-heading); font-weight: 800; color: var(--color-text); }
.dg-matrix i { height: 16px; }
.dg-bars { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 8px; align-items: center; }
.dg-bars b { font-size: 9.5px; color: var(--color-neutral-700); font-weight: 400; }
.dg-bars b.you { font-family: var(--font-heading); font-weight: 800; color: var(--color-text); }
.dg-bars i { height: 12px; }
.dg-segs { display: flex; align-items: flex-end; gap: 14px; height: 84px; }
.dg-segs > div { flex: 1; display: flex; align-items: flex-end; gap: 4px; height: 100%; }
.dg-segs .b, .dg-fr .b { flex: 1; }
.dg-fr { display: flex; align-items: flex-end; gap: 7px; height: 84px; }
.dg-x { display: flex; gap: 14px; margin-top: 7px; }
.dg-x span { flex: 1; font-size: 9.5px; color: var(--color-neutral-700); font-family: var(--font-heading); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.dg-x.six { gap: 7px; } .dg-x.six span { font-size: 8.5px; }
.dg-x.two { justify-content: space-between; } .dg-x.two span { flex: none; font-size: 8.5px; }
.dg-tl { position: relative; height: 84px; }
.dg-tl .band { position: absolute; left: 0; right: 0; top: 30px; height: 26px; background: var(--color-neutral-300); }
.dg-tl .pt { position: absolute; width: 9px; height: 9px; }
.dg-tl .lbl { position: absolute; right: 0; top: 16px; font-size: 8.5px; color: var(--color-neutral-700); font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dg-q { border-left: 3px solid var(--color-accent); padding-left: 10px; margin-bottom: 11px; }
.dg-q.alt { border-left-color: var(--color-neutral-500); }
.dg-q .l { height: 6px; background: var(--color-neutral-400); margin-top: 4px; }
.dg-q .l:first-child { margin-top: 0; }
.dg-qa { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 8.5px; font-family: var(--font-heading); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-neutral-700); }
.dg-qa .chip { padding: 2px 5px; background: var(--color-accent); color: #fff; }
.dg-qa .chip.alt { background: var(--color-neutral-500); }
.dg-agree { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.dg-agree i { height: 11px; }
.dg.vm { padding: 14px 16px; }
.vm-legend { display: flex; gap: 18px; margin-bottom: 10px; flex-wrap: wrap; font-size: 10.5px; font-family: var(--font-heading); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.vm-legend span { display: flex; align-items: center; gap: 6px; }
.vm-legend .vm-c { width: 10px; height: 10px; }
.vm-c { display: inline-block; width: 14px; height: 14px; background: var(--color-neutral-300); box-sizing: border-box; }
.vm-c.v-c { background: var(--color-text); } .vm-c.v-l { background: var(--color-neutral-500); } .vm-c.v-o { background: var(--color-neutral-300); }
.vm-c.you { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.vm-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 5px 0; border-top: 1px solid var(--color-divider); }
.vm-f { font-size: 11px; font-family: var(--font-heading); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-neutral-700); }
.vm-cells { display: flex; flex-wrap: wrap; gap: 3px; }
.tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 18px; }
.tools-grid > div { border-left: 1px solid var(--color-divider); padding: 0 18px 4px; }
.tools-grid h3 { margin: 0; font-size: 16px; }
.tools-grid p { font-size: 13px; line-height: 1.5; margin: 6px 0 0; color: var(--color-neutral-800); }
.why { margin-top: 28px; background: var(--color-text); color: var(--color-bg); display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; padding: 30px 32px; }
.why h2 { margin: 0; color: var(--color-bg); font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.why p.muted { font-size: 14px; color: var(--color-neutral-300); margin: 10px 0 0; }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.why-grid p { font-size: 14px; line-height: 1.55; color: var(--color-neutral-300); margin: 0; padding: 10px 0; border-bottom: 1px solid var(--color-neutral-800); }
.why-grid p strong { color: var(--color-bg); }
.value-close { margin-top: 24px; border-top: 1px solid var(--color-divider); padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.value-close .note { margin: 0; }
.value-close .btns { margin: 0; }
@media (max-width: 900px) {
  .value .premise, .why { grid-template-columns: 1fr; gap: 20px; }
  .uses, .uses.two { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid { grid-template-columns: 1fr; }
  .vm-row { grid-template-columns: 1fr; gap: 4px; }
}
/* The company facts on a vendor page: a compact definition list with the source under it. */
.facts-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 24px; margin: 0; }
.facts-list > div { border-top: 1px solid var(--color-divider); padding-top: 8px; }
.facts-list dt { font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-700); margin: 0 0 3px; }
.facts-list dd { margin: 0; font-size: 15px; }
.facts + .claim-block, .facts + section { margin-top: 0; }
/* Also in this function: sibling categories as a plain list. */
.related-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.related-list li { border-top: 1px solid var(--color-divider); padding: 8px 0; font-size: 14px; display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 640px) { .related-list { grid-template-columns: 1fr; } }
/* A vs B: the two standings side by side. */
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cmp-card { border: 2px solid var(--color-text); padding: 18px 20px; }
.cmp-name { display: flex; align-items: center; gap: 12px; }
.cmp-name h2 { margin: 0; font-size: 24px; }
.cmp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); margin: 14px 0 10px; }
.cmp-stats > div { padding: 10px 0; }
.cmp-stats .sv { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.cmp-stats .sk { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); margin-top: 2px; }
.cmp-card .note { margin: 0; }
@media (max-width: 640px) { .cmp-grid { grid-template-columns: 1fr; } .cmp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* sources cited: two rows lists under the prompt-by-prompt matrix */
/* heading, intro and list share rows across the two columns, so both lists start on the same line */
.two-col.sources { grid-template-rows: auto auto auto; row-gap: 0; }
.two-col.sources > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
.two-col.sources .intro { margin-bottom: 0; }
.two-col.sources .rows { margin-top: 24px; }
.src-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.src-name { min-width: 0; overflow-wrap: anywhere; }
.src-name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-neutral-400); }
.src-name a:hover { border-bottom-color: var(--color-text); }
.src-n { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.src-who { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-700); }

/* category page, five sections (design handoff of 2026-09-15) */
.sec-num { display: inline-block; font-size: 0.5em; letter-spacing: 0.12em; color: var(--color-neutral-600); margin-right: 14px; vertical-align: 0.35em; }
.stand { border-top: 2px solid var(--color-text); }
.stand-row { display: grid; grid-template-columns: 18px minmax(0, 222px) minmax(0, 1fr) 62px 104px 68px 186px; gap: 0 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.stand.with-change .stand-row { grid-template-columns: 18px minmax(0, 250px) minmax(0, 1fr) 62px 104px 68px 150px 170px; }
.stand-row.head { padding: 8px 0; border-bottom: 2px solid var(--color-text); font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); }
.stand-row.head .r { text-align: right; }
.stand-rank { font-family: var(--font-heading); font-weight: 800; font-size: 11px; color: var(--color-neutral-600); }
.stand-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.stand-name .pmark { margin: 0; flex: none; width: 24px; height: 24px; }
.stand-name a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.stand-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.stand-track { display: block; height: 14px; background: var(--color-neutral-200); }
.stand-fill { display: block; height: 14px; background: var(--color-neutral-700); }
.stand-fill.accent { background: var(--color-accent); }
.stand-share { font-family: var(--font-heading); font-weight: 800; font-size: 17px; text-align: right; font-variant-numeric: tabular-nums; }
.stand-neg { font-size: 15px; text-align: right; color: var(--color-neutral-800); font-variant-numeric: tabular-nums; }
.stand-neg.hot { font-family: var(--font-heading); font-weight: 800; color: var(--color-accent-700); }
.stand-labels { font-size: 14px; text-align: right; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.stand-chg { font-size: 12.5px; }
.qchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border: 1px solid var(--color-neutral-300); font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; text-transform: uppercase; color: var(--color-neutral-700); white-space: nowrap; }
.qchip::before { content: ''; width: 8px; height: 8px; flex: none; border: 2px solid currentColor; box-sizing: border-box; }
.qchip.q-lead { border-color: var(--color-accent-300); background: var(--color-accent-100); color: var(--color-accent-700); }
.qchip.q-lead::before { background: var(--color-accent); border-color: var(--color-accent); }
.qchip.q-acc { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.qchip.q-acc::before { background: var(--color-neutral-700); border-color: var(--color-neutral-700); }
.stand-zeros > summary { cursor: pointer; padding: 12px 0; font-size: 13.5px; color: var(--color-neutral-800); border-bottom: 1px solid var(--color-divider); list-style: none; }
.stand-zeros > summary::before { content: '+ '; font-family: var(--font-heading); font-weight: 800; }
.stand-zeros[open] > summary::before { content: '– '; }
.h2h { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; }
.btn.btn-primary-outline { border: 2px solid var(--color-text); }
.quad-block { margin-top: 44px; }
.quad-block h3, .block h3 { font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: -0.015em; line-height: 1.2; }
.quad-block .quad-line { font-weight: 500; font-size: 17px; line-height: 1.45; max-width: 78ch; color: var(--color-neutral-800); }
.quad2 { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; align-items: start; }
.quad2-plot-wrap { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.quad2-plot-wrap .x-axis { flex-basis: 100%; }
.plot2 { position: relative; flex: 1 1 auto; min-width: 0; height: 420px; border: 2px solid var(--color-text); background: var(--color-accent-100); }
.q-mk { position: absolute; transform: translate(-14px, -14px); width: 28px; height: 28px; border: 1px solid var(--color-text); background: var(--color-bg); display: flex; align-items: center; justify-content: center; }
.q-mk .pmark { width: 18px; height: 18px; margin: 0; }
.q-init { font-family: var(--font-heading); font-weight: 800; font-size: 12px; }
.q-rank { position: absolute; right: -8px; top: -8px; min-width: 16px; height: 16px; padding: 0 3px; background: var(--color-text); color: var(--color-bg); font-family: var(--font-heading); font-weight: 800; font-size: 9px; line-height: 16px; text-align: center; }
.q-hair { position: absolute; width: 0; border-left: 1px solid var(--color-neutral-500); }
.q-dot { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--color-neutral-500); }
.q-key { border-top: 2px solid var(--color-text); padding-top: 8px; }
.q-key .kicker { margin-bottom: 6px; }
.q-key-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
.q-key-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-key-name .pmark { margin: 0; width: 18px; height: 18px; flex: none; }
.q-key-row .num { text-align: right; font-family: var(--font-heading); font-weight: 800; }
.warn-rows { max-width: 720px; }
.sources h3 { margin-bottom: 4px; }
.ans-grid { border-top: 2px solid var(--color-text); }
.ans-row { display: grid; grid-template-columns: 132px repeat(6, minmax(0, 1fr)); gap: 0 8px; padding: 9px 0; border-bottom: 1px solid var(--color-divider); font-size: 12.5px; align-items: start; }
.ans-row.head { border-bottom: 2px solid var(--color-text); }
.ans-row.head > span { font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.ans-row > span { min-width: 0; }
.ans-row > span + span { border-left: 1px solid var(--color-divider); padding-left: 9px; }
.ans-var { display: block; }
.ans-gloss { display: block; font-family: var(--font-body); font-weight: 400; font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--color-neutral-600); margin-top: 3px; line-height: 1.35; }
.ans-model { display: flex; align-items: center; gap: 7px; font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.ans-cell { display: flex; flex-direction: column; gap: 4px; }
.ans-fc { font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; overflow-wrap: anywhere; }
.ans-none { color: var(--color-neutral-500); font-size: 11.5px; }
.ans-held { font-family: var(--font-heading); font-weight: 800; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700); }
.ans-changed { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 1px 6px; border: 1px solid var(--color-accent-300); background: var(--color-accent-100); color: var(--color-accent-700); font-family: var(--font-heading); font-weight: 800; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.ans-changed::before { content: ''; width: 7px; height: 7px; background: var(--color-accent); }
.ans-alts > summary { cursor: pointer; color: var(--color-neutral-700); font-size: 12px; list-style: none; text-decoration: underline; text-decoration-color: var(--color-neutral-400); text-underline-offset: 2px; }
.ans-alts > span { display: block; font-size: 12px; color: var(--color-neutral-800); margin-top: 3px; overflow-wrap: anywhere; }
.ans-against { display: block; border-left: 2px solid var(--color-accent); padding-left: 7px; font-size: 11.5px; color: var(--color-accent-700); overflow-wrap: anywhere; }
.ans-against.static { display: inline-block; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; font-size: 12px; }
.record > summary { cursor: pointer; padding: 14px 0; border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-divider); font-family: var(--font-heading); font-weight: 800; font-size: 15px; list-style: none; }
.record > summary::before { content: '+ '; }
.record[open] > summary::before { content: '– '; }
@media (max-width: 860px) {
  .stand-row, .stand.with-change .stand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .stand-row .stand-rank { flex: none; }
  .stand-row .stand-name { flex: 1 1 auto; }
  .stand-row .stand-track { flex-basis: 100%; }
  .stand-row .stand-share::before { content: 'Share '; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--color-neutral-700); }
  .stand-row .stand-neg::before { content: 'Negative '; font-size: 12px; color: var(--color-neutral-700); font-family: var(--font-body); font-weight: 400; }
  .stand-row .stand-labels::before { content: 'Labels '; }
  .stand-row .stand-share, .stand-row .stand-neg, .stand-row .stand-labels, .stand-row .stand-chg { text-align: left; font-size: 13px; }
  .stand-row.head { display: none; }
  .quad2 { grid-template-columns: 1fr; }
  .ans-row { grid-template-columns: 1fr; gap: 8px; }
  .ans-row > span + span { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-divider); padding-top: 6px; }
  .ans-row.head { display: none; }
  .ans-cell::before { content: attr(data-var); font-family: var(--font-heading); font-weight: 800; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
}

/* phones: the site menu folds behind one button and the filter sentence behind another */
.nav-toggle { display: none; }
.qfilters { display: none; }
@media (max-width: 720px) {
  .site-head { flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 0 10px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 12px; border: 2px solid var(--color-text); background: transparent; color: var(--color-text); font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; }
  .nav-toggle-bars { width: 14px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
  .nav-toggle-bars::after { content: ''; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
  .site-head .head-search, .site-head .site-nav { display: none; }
  .site-head.open .head-search { display: block; order: 2; flex-basis: 100%; max-width: none; margin-left: 0; }
  .site-head.open .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; order: 3; flex-basis: 100%; border-top: 1px solid var(--color-divider); padding-top: 6px; }
  .site-head.open .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
  .site-head.open .site-nav a[aria-current="page"] { border-bottom-color: var(--color-divider); color: var(--color-accent); }
  .site-head.open .site-nav a.navfund { margin: 10px 0 4px; padding: 12px 14px; text-align: center; }
  .st-cmd .st-cmd-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; width: 100%; }
  .qfilters { display: inline-flex; margin-left: auto; padding: 7px 11px; border: 1px solid var(--color-bg); background: transparent; color: var(--color-bg); font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; }
  .st-cmd .qline { display: none; }
  .st-cmd.filters-open .qline { display: flex; }
  .st-cmd.st-nav .qline { display: flex; }  /* the category navigator has no Filters button to fold behind; without this the bar is an empty ink band on a phone */
  .st-cmd.st-nav { min-height: 0; }
}

/* vendor page (design handoff of 2026-09-15): the hero strip, segment cards, movement, framing, alongside, citations */
.vhero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; padding: 30px 0 28px; border-bottom: 2px solid var(--color-text); align-items: start; }
.vhero h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(32px, 4vw, 46px); line-height: 0.98; letter-spacing: -0.025em; margin-top: 10px; }
.vstats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 22px; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.vstat { padding: 12px 14px 12px 0; border-left: 1px solid var(--color-divider); padding-left: 14px; }
.vstat:first-child { border-left: 0; padding-left: 0; }
.vstat-n { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.vstat-l { display: block; margin-top: 6px; font-family: var(--font-heading); font-weight: 800; font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-neutral-700); }
.vprov { margin-top: 12px; font-size: 13px; color: var(--color-neutral-700); }
.vbest .standing-top { font-size: 34px; margin: 8px 0 10px; color: var(--color-text); }
.vbest .standing-top .accent { color: var(--color-accent); }
.vbest .standing-cat { font-size: 0.5em; font-weight: 500; letter-spacing: 0; color: var(--color-neutral-700); }
.vbest .stand-track { height: 10px; }
.vbest .stand-fill { height: 10px; }
.vbest-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 8px; font-size: 13.5px; }
.vsegs { padding-top: 34px; }
.vseg-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14.5px; }
.vseg-mark { width: 9px; height: 9px; background: var(--color-accent); flex: none; }
.vseg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }
.vseg { display: block; border-top: 2px solid var(--color-text); padding: 12px 0 6px; color: inherit; text-decoration: none; }
.vseg:hover .vseg-share .num { text-decoration: underline; text-underline-offset: 3px; }
.vseg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vseg-rank { font-size: 12.5px; color: var(--color-neutral-700); }
.vseg-share { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 8px; }
.vseg-share .num { font-family: var(--font-heading); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1; }
.vseg-share .muted { font-size: 12.5px; }
.vseg-q { margin-top: 10px; font-size: 12.5px; }
.mv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mv-card { border: 2px solid var(--color-text); }
.mv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; background: var(--color-text); color: var(--color-bg); font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; }
.mv-clear { color: var(--color-accent); }
.mv-inside { color: var(--color-neutral-500); }
.mv-body { padding: 14px 12px 12px; }
.mv-share { display: flex; align-items: baseline; gap: 10px; }
.mv-share .num { font-family: var(--font-heading); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; line-height: 1; }
.mv-delta { margin-top: 6px; font-size: 13px; color: var(--color-neutral-700); }
.mv-delta.hot { color: var(--color-accent-700); font-weight: 600; }
.mv-track { position: relative; height: 54px; margin-top: 14px; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.mv-band { position: absolute; top: 0; bottom: 0; background: var(--color-neutral-200); }
.mv-prev, .mv-cur { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--color-neutral-600); }
.mv-cur { background: var(--color-text); }
.mv-cur.accent { background: var(--color-accent); }
.mv-labels { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-heading); font-weight: 800; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.mv-summary { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--color-text); font-size: 14px; line-height: 1.5; }
.fr-grid { border-top: 2px solid var(--color-text); }
.fr-row { display: grid; grid-template-columns: 148px minmax(0, 1fr) 210px; gap: 20px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.fr-row.head { padding: 8px 0; font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); border-bottom: 2px solid var(--color-text); }
.fr-name { font-family: var(--font-heading); font-weight: 800; font-size: 14px; }
.fr-count { display: block; font-family: var(--font-body); font-weight: 400; font-size: 11.5px; color: var(--color-neutral-700); margin-top: 2px; }
.fr-bar { display: flex; gap: 2px; height: 20px; }
.fr-seg { display: block; min-width: 2px; }
.fr-first { background: var(--color-accent); }
.fr-alt { background: var(--color-neutral-700); }
.fr-mention { background: var(--color-neutral-300); }
.fr-neg { background: var(--color-accent-100); border: 1px solid var(--color-accent-300); box-sizing: border-box; }
.fr-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fr-n { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--color-accent-700); }
.fr-none { color: var(--color-neutral-500); font-size: 13px; }
.fr-mk { display: inline-flex; }
.fr-sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.al-grid { border-top: 2px solid var(--color-text); }
.al-row { display: grid; grid-template-columns: 300px 150px minmax(0, 1fr) 190px; gap: 20px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.al-row.head { padding: 8px 0; font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); border-bottom: 2px solid var(--color-text); }
.al-name { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 800; font-size: 15px; min-width: 0; }
.al-name .pmark { margin: 0; flex: none; }
.al-same .num { font-family: var(--font-heading); font-weight: 800; font-size: 17px; }
.al-took { display: flex; align-items: center; gap: 10px; }
.al-track { flex: 1 1 auto; height: 12px; background: var(--color-neutral-200); }
.al-fill { display: block; height: 12px; background: var(--color-neutral-700); }
.al-took .num { font-family: var(--font-heading); font-weight: 800; font-size: 14px; min-width: 24px; text-align: right; }
.cmp-go { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; }
.ci-denom { max-width: 90ch; }
.ci-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.ci-cols h3 { font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin-bottom: 10px; }
.ci-list { border-top: 2px solid var(--color-text); }
.ci-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 34px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-divider); font-size: 13.5px; }
.ci-site { min-width: 0; overflow-wrap: anywhere; }
.ci-row.own .ci-site { color: var(--color-accent-700); font-weight: 600; }
.ci-own { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-accent-700); }
.ci-track { height: 12px; background: var(--color-neutral-200); }
.ci-fill { display: block; height: 12px; background: var(--color-text); }
.ci-row.own .ci-fill { background: var(--color-accent); }
.ci-row .num { text-align: right; font-family: var(--font-heading); font-weight: 800; }
.ci-page { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--color-divider); font-size: 13.5px; }
.ci-page a { min-width: 0; overflow-wrap: anywhere; }
.ci-page .num { font-family: var(--font-heading); font-weight: 800; flex: none; }
.ci-split { margin-top: 10px; }
@media (max-width: 860px) {
  .vhero { grid-template-columns: 1fr; gap: 24px; }
  .vstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vstat:nth-child(4) { border-left: 0; padding-left: 0; }
  .vseg-cards, .mv-cards, .ci-cols { grid-template-columns: 1fr; }
  .fr-row { grid-template-columns: 1fr; gap: 6px; }
  .fr-row.head { display: none; }
  .al-row { grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .al-row.head { display: none; }
  .al-row .al-name { grid-column: 1 / -1; }
}
.fr-note { font-size: 11px; color: var(--color-neutral-600); }

/* data page (design handoff of 2026-09-15): the log, the record, the roadmap */
.log { border-top: 2px solid var(--color-text); }
.log-row { display: grid; grid-template-columns: minmax(0, 1fr) 128px 108px 104px 150px 128px; gap: 18px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--color-divider); font-size: 14.5px; }
.log-row.head { padding: 8px 0; border-bottom: 2px solid var(--color-text); font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); }
.log-row.head .r { text-align: right; }
.log-hnote { display: block; font-family: var(--font-body); font-weight: 400; font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--color-neutral-600); }
.log-name.ed { font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
.log-name.ed a { color: inherit; text-decoration: none; }
.log-name.ed a:hover { text-decoration: underline; text-underline-offset: 3px; }
.log-row.child .log-name { padding-left: 18px; position: relative; color: var(--color-neutral-800); }
.log-row.child .log-name::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 10px; border-top: 1px solid var(--color-neutral-500); }
.log-note { display: block; font-size: 12px; color: var(--color-neutral-700); margin-top: 3px; font-family: var(--font-body); font-weight: 400; }
.log-kind { font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.log-n { text-align: right; font-variant-numeric: tabular-nums; }
.log-v a { color: inherit; }
.log-key { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 12px 0 0; border-top: 1px solid var(--color-divider); margin-top: 0; font-size: 12px; color: var(--color-neutral-700); }
.log-key > span { display: inline-flex; align-items: center; gap: 8px; }
.rec-embargo { display: flex; align-items: center; gap: 10px; font-size: 14.5px; margin: 0 0 18px; }
.rec { border-top: 2px solid var(--color-text); }
.rec-row { display: grid; grid-template-columns: 250px minmax(0, 1fr) 118px 172px; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--color-divider); font-size: 13.5px; }
.rec-row.head { padding: 8px 0; border-bottom: 2px solid var(--color-text); font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); }
.rec-row.head .r { text-align: right; }
.rec-file code { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; font-size: 13px; }
.rec-sub { display: block; font-size: 11.5px; color: var(--color-neutral-600); margin-top: 2px; }
.rec-size { text-align: right; font-variant-numeric: tabular-nums; }
.rec-band { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 14px 0 8px; border-top: 2px solid var(--color-text); margin-top: 22px; }
.rec .rec-band:first-of-type { margin-top: 0; border-top: 0; }
.rec-band-t { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.rec-band-n { font-size: 12.5px; color: var(--color-neutral-700); }
.rec-under { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; margin-top: 26px; align-items: start; }
.rec-under p { font-size: 14px; line-height: 1.55; color: var(--color-neutral-800); }
.pack-card { border: 2px solid var(--color-text); }
.pack-card-h { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; background: var(--color-text); color: var(--color-bg); font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.pack-card > p, .pack-card > .pack-price, .pack-card > .btn, .pack-card > .note { margin: 12px 14px 0; }
.pack-card > .btn { display: inline-flex; }
.pack-card > .note { margin-bottom: 14px; }
.pack-card .pack-price { font-family: var(--font-heading); font-weight: 800; font-size: 24px; }
.pack-card .pack-price .muted { font-family: var(--font-body); font-weight: 400; font-size: 13px; }
.rm-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-divider); margin-bottom: 26px; }
.rm-count { padding: 14px 16px 14px 0; border-left: 1px solid var(--color-divider); padding-left: 16px; }
.rm-count:first-child { border-left: 0; padding-left: 0; }
.rm-n { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; line-height: 1; }
.rm-l { display: block; margin-top: 6px; font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-neutral-700); }
.rm-note { display: block; margin-top: 4px; font-size: 12px; color: var(--color-neutral-700); }
.oos-row { display: grid; grid-template-columns: 280px minmax(0, 1fr) 150px; gap: 18px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--color-divider); }
.oos-name { font-family: var(--font-heading); font-weight: 800; font-size: 14.5px; }
.oos-why { font-size: 13.5px; color: var(--color-neutral-800); line-height: 1.5; }
.rm-func { border-bottom: 1px solid var(--color-divider); }
.rm-func > summary { display: grid; grid-template-columns: 40px 240px minmax(0, 1fr) 78px 130px; gap: 14px; align-items: center; padding: 12px 0; cursor: pointer; list-style: none; }
.rm-func > summary::-webkit-details-marker { display: none; }
.rm-fname { font-family: var(--font-heading); font-weight: 800; font-size: 14.5px; letter-spacing: 0.02em; text-transform: uppercase; }
.rm-fdesc { font-size: 13px; color: var(--color-neutral-700); }
.rm-fn { text-align: right; font-family: var(--font-heading); font-weight: 800; font-size: 17px; }
.rm-open { font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); text-align: right; }
.rm-func[open] .rm-open { color: var(--color-neutral-600); }
.rm-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr) 130px; gap: 14px; align-items: baseline; padding: 8px 0 8px 54px; border-top: 1px solid var(--color-divider); font-size: 13.5px; }
.rm-row.head { font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); }
.rm-funcs { border-top: 2px solid var(--color-text); margin-bottom: 8px; }
@media (max-width: 860px) {
  .log-row { grid-template-columns: minmax(0, 1fr) 100px; gap: 4px 12px; }
  .log-row.head { display: none; }
  .log-row .log-kind, .log-row .log-date, .log-row .log-n, .log-row .log-v { font-size: 12px; text-align: left; }
  .rec-row { grid-template-columns: minmax(0, 1fr) 118px; gap: 4px 12px; }
  .rec-row.head { display: none; }
  .rec-row .rec-what { grid-column: 1 / -1; }
  .rec-under { grid-template-columns: 1fr; }
  .rm-counts { grid-template-columns: 1fr 1fr; }
  .rm-count:nth-child(3) { border-left: 0; padding-left: 0; }
  .oos-row { grid-template-columns: 1fr; gap: 6px; }
  .rm-func > summary { grid-template-columns: 40px minmax(0, 1fr) 78px; }
  .rm-fdesc, .rm-open { display: none; }
  .rm-row { grid-template-columns: 1fr; padding-left: 0; gap: 4px; }
  .rm-row.head { display: none; }
}

/* compare page (design handoff of 2026-09-15): the answer, paired bars, two-sided framing, grouped direct prompt, segments */
.cmp-hero { padding: 30px 0 24px; }
.cmp-hero .eyebrow { margin-bottom: 10px; }
.cmp-hero h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(32px, 4vw, 46px); line-height: 0.98; letter-spacing: -0.03em; }
.cmp-answer { margin-top: 18px; padding-left: 14px; border-left: 3px solid var(--color-accent); font-size: 17px; line-height: 1.5; max-width: 80ch; }
.cmp-subjects { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 2px solid var(--color-text); padding-top: 16px; }
.cmp-subj-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmp-subj-h h2 { margin: 0; font-size: 24px; }
.cmp-subj-h h2 a { color: inherit; text-decoration: none; }
.cmp-subj-h h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmp-subj-line { margin: 8px 0 0; font-size: 13.5px; color: var(--color-neutral-800); }
.cmp-pairs { margin-top: 22px; border-top: 1px solid var(--color-divider); }
.cmp-pair { display: grid; grid-template-columns: 168px minmax(0, 1fr) 54px 54px minmax(0, 1fr) 168px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.cmp-pair-l { font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.cmp-track { display: flex; height: 12px; background: var(--color-neutral-300); }
.cmp-track.left { justify-content: flex-end; }
.cmp-fill { display: block; height: 12px; }
.cmp-fill.a { background: var(--color-text); }
.cmp-fill.b { background: var(--color-neutral-700); }
.cmp-hair { display: block; height: 1px; background: var(--color-neutral-300); }
.cmp-val { font-family: var(--font-heading); font-weight: 800; font-size: 17px; text-align: center; font-variant-numeric: tabular-nums; }
.cmp-pair-n { font-size: 12px; color: var(--color-neutral-700); }
.cmp-caption { justify-content: space-between; }
.cmp-third { font-family: var(--font-body); font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none; }
.cmp-method { margin-top: 10px; }
.fw { border-top: 2px solid var(--color-text); }
.fw-row { display: grid; grid-template-columns: 148px minmax(0, 1fr) 148px; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-divider); }
.fw-row.head { padding: 10px 0; border-bottom: 2px solid var(--color-text); font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.fw-row.head .fw-l, .fw-row.head .fw-r { display: flex; align-items: center; gap: 8px; }
.fw-row.head .fw-r { justify-content: flex-end; }
.fw-mid-h { text-align: center; font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); }
.fw-l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fw-name { font-family: var(--font-heading); font-weight: 800; font-size: 14px; }
.fw-n { font-family: var(--font-heading); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.fw-mid { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); align-items: center; height: 30px; }
.fw-half { display: flex; height: 18px; }
.fw-half.left { justify-content: flex-end; }
.fw-fill { display: block; height: 18px; }
.fw-fill.a { background: var(--color-text); }
.fw-fill.b { background: var(--color-neutral-700); }
.fw-axis { display: block; width: 1px; height: 30px; background: var(--color-text); }
.fw-r { display: flex; flex-direction: column; gap: 3px; }
.fw-against { display: inline-block; border-left: 2px solid var(--color-accent); padding-left: 7px; font-size: 11.5px; color: var(--color-accent-700); }
.fw-against.static { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; font-size: 12px; }
.dp-group { margin-top: 18px; }
.dp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 10px 0 6px; border-top: 2px solid var(--color-text); }
.dp-head h3 { font-family: var(--font-heading); font-weight: 800; font-size: 17px; margin: 0; }
.dp-count { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.dp-note { flex-basis: 100%; font-size: 12.5px; color: var(--color-neutral-700); }
.dp-row { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--color-divider); font-size: 14px; }
.dp-model { display: flex; align-items: center; gap: 7px; font-family: var(--font-heading); font-weight: 800; font-size: 13.5px; }
.cs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cs-card { border: 2px solid var(--color-text); display: flex; flex-direction: column; }
.cs-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; background: var(--color-text); color: var(--color-bg); font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; }
.cs-here { color: var(--color-accent); font-size: 9.5px; }
.cs-body { padding: 12px 12px 14px; flex: 1 1 auto; display: flex; flex-direction: column; }
.cs-body > .cs-row, .cs-body > .cs-line { flex: none; }
.cs-line { font-family: var(--font-heading); font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.cs-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px 74px; gap: 4px 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--color-divider); font-size: 13.5px; }
.cs-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cs-name .pmark { margin: 0; flex: none; }
.cs-share { font-family: var(--font-heading); font-weight: 800; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.cs-rank { font-size: 12px; color: var(--color-neutral-700); text-align: right; }
.cs-track { grid-column: 1 / -1; display: block; height: 8px; background: var(--color-neutral-300); }
.cs-fill { display: block; height: 8px; background: var(--color-neutral-700); }
.cs-fill.lead { background: var(--color-text); }
.cs-go { display: inline-block; margin-top: auto; padding-top: 12px; align-self: flex-start; font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 860px) {
  .cmp-subjects, .cs-cards { grid-template-columns: 1fr; }
  .cmp-pair { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .cmp-pair-l, .cmp-pair-n { grid-column: 1 / -1; }
  .cmp-pair .cmp-track.left { order: 1; } .cmp-pair .cmp-val:nth-of-type(1) { order: 2; }
  .fw-row { grid-template-columns: 1fr; gap: 4px; }
  .fw-row.head { display: none; }
  .dp-row { grid-template-columns: 1fr; gap: 4px; }
}

/* The category report, inside each pack panel */
.pack-b-rep { padding-top: 0; align-self: start; }
.pack-rep { margin-top: 14px; border-top: 1px solid var(--color-divider); padding-top: 12px; }
.pack-rep-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pack-rep-t .kicker { margin: 0; }
.pack-rep-n { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: -.01em; }
.pack-rep p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); }
.pack-rep-a { display: inline-block; margin-top: 8px; font-family: var(--font-heading); font-weight: 800; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.pack-rep-a .note { font-family: var(--font-body); font-weight: 400; font-size: 11px; margin-left: 4px; color: var(--color-neutral-600); }

.vmore-row { display: flex; justify-content: center; padding: 18px 0 6px; }
.vmore-row .vmore { min-width: 280px; }

/* The setup page: the key field fills every block; three routes; the tool table last. */
.su-band { padding: 40px 0 0; }
.su-band .kicker { color: var(--color-accent-700); margin: 0 0 14px; display: block; }
.su-band h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 5.8vw, 68px); line-height: 1.02; letter-spacing: -0.02em; max-width: 16em; margin: 0; }
.su-stand { font-size: 18px; line-height: 1.5; color: var(--color-neutral-800); max-width: 44em; margin: 16px 0 0; }
.su-key { background: var(--color-neutral-800); padding: 24px 26px 26px; margin-top: 30px; display: flex; flex-wrap: wrap; gap: 24px 32px; }
.su-key-f { flex: 1 1 360px; min-width: 0; }
.su-key-r { flex: 1 1 220px; border-left: 1px solid var(--color-neutral-700); padding-left: 24px; }
.su-key .kicker { color: var(--color-bg); margin: 0 0 10px; display: block; letter-spacing: 0.09em; font-size: 13px; }
.su-key-r .kicker { color: var(--color-neutral-300); }
.su-key-r p { font-size: 14px; line-height: 1.5; color: var(--color-neutral-300); margin: 0; }
.su-key-row { display: flex; flex-wrap: wrap; gap: 10px; }
.su-input { flex: 1 1 320px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; padding: 13px 14px; background: var(--color-text); color: var(--color-bg); border: 1px solid var(--color-neutral-700); border-radius: 0; }
.su-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 0; border-color: var(--color-accent); }
.su-clear { min-height: 46px; padding: 13px 16px; background: transparent; color: var(--color-bg); border: 1px solid var(--color-neutral-700); border-radius: 0; font-family: var(--font-heading); font-weight: 800; font-size: 14px; cursor: pointer; }
.su-clear:hover { border-color: var(--color-bg); }
.su-status { font-size: 14px; line-height: 1.5; color: var(--color-neutral-300); margin: 12px 0 0; }
.su-status strong { color: var(--color-bg); }
.su-ok { color: var(--color-ok-300); font-weight: 600; }
.su-ok::before { content: "\2713"; margin-right: 6px; }
.su-bad { color: var(--color-accent-300); font-weight: 600; }
.su-wait { color: var(--color-neutral-300); }
.su-routes { border-top: 1px solid var(--color-divider); margin-top: 28px; padding-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.su-route { display: flex; flex-direction: column; gap: 6px; color: var(--color-text); text-decoration: none; border-bottom: 0; }
.su-route .kicker { color: var(--color-accent-700); margin: 0; display: block; }
.su-route .t { font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.15; }
.su-route .d { font-size: 14px; line-height: 1.45; color: var(--color-neutral-800); }
.su-route:hover .t { color: var(--color-accent); }
.su-sec { border-top: 2px solid var(--color-text); margin-top: 56px; padding-top: 34px; scroll-margin-top: 84px; }
.su-sec > .kicker { color: var(--color-accent-700); margin: 0 0 10px; display: block; }
.su-sec h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.02; letter-spacing: -0.015em; margin: 0; }
.su-intro { font-size: 16px; line-height: 1.5; color: var(--color-neutral-800); max-width: 52em; margin: 14px 0 0; }
.su-hint { font-size: 13.5px; color: var(--color-neutral-700); margin: 0; max-width: 46em; }
.su-actions { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px 28px; align-items: start; }
.su-act > .kicker { margin: 0 0 10px; display: block; color: var(--color-neutral-700); }
.su-act .btn { font-size: 16px; padding: 14px 22px; }
.su-act .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.su-act .su-hint { margin-top: 10px; }
.su-rep-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.su-rep-row select.input { flex: 1 1 200px; min-height: 50px; max-width: 360px; }
.su-rep-list[aria-disabled="true"] { color: var(--color-neutral-500); border-bottom-color: transparent; cursor: not-allowed; }
.su-notes { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 28px; }
.su-notes > div { border-top: 1px solid var(--color-divider); padding-top: 12px; }
.su-notes h3 { font-family: var(--font-heading); font-weight: 800; font-size: 15px; margin: 0 0 6px; }
.su-notes p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--color-neutral-800); }
.su-addr { margin-top: 22px; background: var(--color-neutral-100); border-left: 3px solid var(--color-text); padding: 20px 22px; }
.su-addr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.su-addr-t { font-size: clamp(19px, 2.7vw, 31px); overflow-wrap: anywhere; min-width: 0; }
.su-copy { background: var(--color-text); color: var(--color-bg); border: 1px solid var(--color-text); border-radius: 0; padding: 8px 12px; font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.su-copy.ghost { background: transparent; color: var(--color-text); border-color: var(--color-neutral-500); }
.su-copy.done { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.su-note { font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); margin: 10px 0 0; }
.su-line { font-size: 15px; margin: 26px 0 14px; font-weight: 600; }
.su-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.su-card { border: 2px solid var(--color-text); padding: 24px 26px 26px; min-width: 0; display: flex; flex-direction: column; }
.su-card-h { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }  /* the kind tag sits under the title in every card, so the blocks start level */
.su-card h3 { font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.15; margin: 0; }
.su-kind { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); border: 1px solid var(--color-neutral-300); padding: 3px 7px; white-space: nowrap; }
.su-code { background: var(--color-neutral-100); border-left: 3px solid var(--color-text); min-width: 0; }
.su-code.quiet { border-left-color: var(--color-neutral-500); }
.su-code-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--color-neutral-300); }
.su-code-h .kicker { margin: 0; }
.su-code pre { margin: 0; padding: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.su-code pre code { font-size: inherit; }
.su-code .su-note { padding: 0 14px 14px; margin: 0; }
.su-fill { overflow-wrap: anywhere; }
.su-blocks { margin-top: 22px; display: grid; gap: 16px; }
.su-tools td.b code { font-size: 14px; }
.su-tools th { color: var(--color-accent-700); }
#tools .tablewrap { margin-top: 18px; }
@media (max-width: 720px) { .su-band { padding-top: 28px; } .su-key { padding: 20px 18px 22px; } .su-key-r { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-neutral-700); padding-top: 18px; } .su-card { padding: 20px 18px 22px; } }

/* The quadrant names sit outside the plot, above and below it, so a marker in a corner never covers one. */
.q-band { flex-basis: 100%; display: flex; justify-content: space-between; gap: 12px; padding-left: 30px; font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600); }
.q-band.top { margin-bottom: -2px; }
.q-band.bot { margin-top: -2px; }
.q-band.bot + .x-axis { margin-top: 4px; }