/* ============================================================
fleetfax research — section theme
A cool, editorial "intelligence report" skin, deliberately
distinct from the warm-crimson product. Layered on top of
main.css. The fleetfax wordmark stays canonical; only the
"research" sibling label + section chrome use the accent.
============================================================ */
:root{
--r-ink: #0b1220; /* headings / masthead */
--r-body: #1c2534; /* prose */
--r-mute: #5b6472; /* meta / captions */
--r-faint: #8a93a3;
--r-bg: #f5f7fa; /* cool paper */
--r-surface: #ffffff;
--r-line: #dfe4ec;
--r-accent: #1f3d73; /* research ink/graphite (v4: was blue #2b5fd0; keeps research pro without fighting the red brand — the one red tie is the wordmark in the research header) */
--r-accent-2: #16181d;
--r-accent-soft:#f2f2f0;
--r-accent-bd: #dcdcd6;
--r-warn: #dc2626; /* chart negatives only */
--r-warn-deep: #c0182c; /* reserved deep-red; NOT used on the featured finding — that emphasis mark is navy --r-accent, matching the article chart marks (founder 2026-07-09: no red in the research theme) */
}
/* ---- page canvas ---- */
body.research{ background: var(--r-bg); color: var(--r-body); }
/* ---- masthead band (the signature "this is a report" device) ---- */
.r-masthead{
background: var(--r-ink);
background-image: radial-gradient(120% 140% at 12% -10%, #16233c 0%, #0b1220 60%);
color:#fff; border-bottom:1px solid #10192b;
}
.r-masthead-inner{ max-width: 820px; margin:0 auto; padding: 4.5rem var(--s-6) 4rem; }
.r-eyebrow{
font-family: var(--font-mono); font-weight:600; font-size: var(--text-xs);
letter-spacing:.18em; text-transform:uppercase; color: #aeb4c0;
display:inline-flex; align-items:center; gap:.6em; margin:0 0 var(--s-6);
}
.r-eyebrow a{ color:inherit; text-decoration:none; }
.r-eyebrow a:hover{ color:#fff; }
.r-eyebrow-sep{ color:#3d4a63; }
.r-eyebrow-cat{ color:#8f9bb0; }
.r-masthead h1{
font-family: var(--font-display); font-weight:600; letter-spacing:-.02em;
font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height:1.15; margin:0 0 var(--s-5);
color:#fff; text-wrap:balance;
}
.r-dek{ font-size: var(--text-lg); line-height:1.55; color:#c3ccd9; margin:0 0 var(--s-8); max-width:60ch; }
.r-meta{ display:flex; flex-wrap:wrap; gap: var(--s-4); font-size: var(--text-sm); color:#8f9bb0; }
.r-meta .r-tag{
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing:.06em;
text-transform:uppercase; color:#c9d6ff; border:1px solid #2a3550;
border-radius:999px; padding:3px 10px; }
/* ---- research CTA band (search-first; bookends the masthead) ---- */
.r-cta{
background: var(--r-ink);
background-image: radial-gradient(120% 140% at 88% -10%, #16233c 0%, #0b1220 60%);
border-top: 1px solid #10192b;
padding: var(--s-12) var(--s-6);
text-align: center;
}
.r-cta-title{
font-family: var(--font-display); font-weight:600; letter-spacing:-.01em;
font-size: var(--text-2xl); color:#fff; margin:0 0 var(--s-3);
}
.r-cta-sub{ color:#c3ccd9; font-size: var(--text-base); line-height:1.6; max-width:58ch; margin:0 auto var(--s-6); text-wrap: balance; }
.r-cta .mini-search{ border-color: transparent; box-shadow: 0 10px 34px rgba(0,0,0,.38); }
.r-cta-fine{ color:#8f9bb0; font-size: var(--text-xs); margin: var(--s-5) 0 0; }
/* ---- article body ---- */
.rdoc{ max-width: 720px; margin: 0 auto; padding: var(--s-12) var(--s-6) var(--s-16); }
.rdoc h2{
font-family: var(--font-display); font-size: var(--text-xl); font-weight:600;
letter-spacing:-.01em; color: var(--r-ink); margin: var(--s-12) 0 var(--s-4);
}
.rdoc h3{ font-size: var(--text-lg); font-weight:600; color: var(--r-ink); margin: var(--s-6) 0 var(--s-2); }
.rdoc p, .rdoc li{ font-size: 1.06rem; line-height:1.72; color: var(--r-body); }
.rdoc p{ margin: 0 0 var(--s-4); }
.rdoc strong{ color: var(--r-ink); font-weight:600; }
.rdoc a{ color: var(--r-accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.rdoc a:hover{ color: var(--r-accent-2); }
.rdoc ul{ list-style:none; padding-left:0; margin:0 0 var(--s-5); }
.rdoc ul li{ position:relative; padding-left: var(--s-6); margin-bottom: var(--s-3); }
.rdoc ul li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:2px; background: var(--r-accent); }
/* ---- lead / drop paragraph ---- */
.rdoc .r-lead{ font-size: 1.22rem; line-height:1.6; color: var(--r-ink); }
/* ---- pull statement ---- */
.r-pull{
font-family: var(--font-display); font-weight:600; font-size: 1.4rem; line-height:1.35;
color: var(--r-ink); border-left:2px solid var(--r-line); padding: var(--s-2) 0 var(--s-2) var(--s-5);
margin: var(--s-8) 0;
}
/* ---- figure / chart ---- */
.r-fig{ margin: var(--s-8) 0; }
.r-fig img{ width:100%; display:block; border:1px solid var(--r-line); border-radius: var(--radius); background:#fff; }
.r-fig figcaption{ font-size: var(--text-sm); color: var(--r-mute); margin-top: var(--s-3); line-height:1.5; }
.r-fig figcaption b{ color: var(--r-ink); }
/* ---- inline chart plate (generated by scripts/research-charts.mjs) ---- */
.r-chartbox{
background: var(--r-surface); border:1px solid var(--r-line);
border-radius: var(--radius); padding: 22px 24px 14px;
}
.rdoc .r-fig-title, .r-fig-title{
font-family: 'Inter', -apple-system, sans-serif; font-weight:600;
font-size: 1.02rem; letter-spacing:-.005em; color: var(--r-ink);
line-height:1.35; margin:0 0 2px;
}
.rdoc .r-fig-sub, .r-fig-sub{ font-size: var(--text-sm); color: var(--r-mute); line-height:1.5; margin:0 0 var(--s-4); }
.r-chartbox svg{ display:block; width:100%; height:auto; }
.r-chartbox svg text{ font-family: 'Inter', -apple-system, sans-serif; }
.r-chartbox svg .num{ font-family: var(--font-mono); }
@media (max-width: 720px){ .r-chartbox{ padding: 14px 14px 10px; } }
/* ---- stat row (big numbers) ---- */
.r-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-4); margin: var(--s-8) 0; }
.r-stat{ background: var(--r-surface); border:1px solid var(--r-line); border-radius: var(--radius); padding: var(--s-5); }
.r-stat .n{ font-family: var(--font-display); font-weight:600; font-size: var(--text-2xl); color: var(--r-accent); letter-spacing:-.02em; line-height:1; }
.r-stat .l{ font-size: var(--text-sm); color: var(--r-mute); margin-top: var(--s-2); line-height:1.4; }
/* ---- numbered method steps ---- */
.r-steps{ counter-reset: rs; list-style:none; padding:0; margin: var(--s-5) 0; }
.r-steps li{ position:relative; padding: var(--s-3) 0 var(--s-3) 52px; border-bottom:1px solid var(--r-line); }
.r-steps li::before{
counter-increment: rs; content: counter(rs); position:absolute; left:0; top: var(--s-3);
width:32px; height:32px; border-radius:8px; background: var(--r-ink); color:#fff;
font-family: var(--font-mono); font-weight:600; font-size: var(--text-sm);
display:flex; align-items:center; justify-content:center;
}
.r-steps li::before{ padding:0; }
/* ---- callout (source / definition) ---- */
.r-callout{
border:1px solid var(--r-line); border-left:3px solid var(--r-accent);
background: var(--r-surface); border-radius: var(--radius-sm);
padding: var(--s-4) var(--s-5); margin: var(--s-6) 0;
}
.r-callout p{ margin:0; font-size: var(--text-sm); color: var(--r-mute); line-height:1.6; }
/* ---- methodology box (press-credibility) ---- */
.r-method{
background: var(--r-accent-soft); border:1px solid var(--r-accent-bd);
border-radius: var(--radius); padding: var(--s-5) var(--s-6); margin: var(--s-10) 0 0;
}
.r-method .r-method-h{ font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color: var(--r-accent-2); margin:0 0 var(--s-3); }
.r-method p, .r-method li{ font-size: var(--text-sm); color:#33405c; line-height:1.6; }
.r-method ul li::before{ background: var(--r-accent-2); }
/* ---- data table ---- */
.r-table{ width:100%; border-collapse:collapse; margin: var(--s-6) 0; font-size: var(--text-sm); }
.r-table th, .r-table td{ text-align:left; padding: var(--s-3) var(--s-4); border-bottom:1px solid var(--r-line); }
.r-table thead th{ font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing:.04em; text-transform:uppercase; color: var(--r-mute); font-weight:600; }
.r-table td:first-child{ color: var(--r-ink); }
.r-yes{ color:#15803d; font-weight:700; }
.r-no{ color: var(--r-warn); font-weight:700; }
/* ---- fine print / disclaimer ---- */
.r-fine{ font-size: var(--text-xs); color: var(--r-faint); line-height:1.7; margin-top: var(--s-10); padding-top: var(--s-5); border-top:1px solid var(--r-line); }
.r-fine p{ font-size: var(--text-xs); color: var(--r-faint); margin-bottom: var(--s-2); }
/* ---- citation / media note (uniform across research) ---- */
.r-cite{ margin-top: var(--s-8); padding-top: var(--s-5); border-top:1px solid var(--r-line); }
.r-cite .r-cite-h{ font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color: var(--r-accent); margin:0 0 var(--s-2); }
.r-cite p{ font-size: var(--text-sm); color: var(--r-mute); line-height:1.6; margin:0; }
.r-cite a{ color: var(--r-accent); text-decoration:none; }
.r-cite a:hover{ text-decoration:underline; }
@media (max-width: 720px){
.r-stats{ grid-template-columns: 1fr; }
.rdoc p, .rdoc li{ font-size: 1rem; }
.r-masthead-inner{ padding: 3rem var(--s-6) 2.75rem; }
}
/* ============================================================
/research hub — "Featured lead + grid" (design handoff 2026-07-02)
Fonts: Newsreader (display serif), IBM Plex Sans (body),
IBM Plex Mono (chrome). Research accent: #33353f.
============================================================ */
body.research.rp{ background:#fff; color:#12161d; font-family:'Inter', -apple-system, sans-serif; }
/* One column system for the whole page: header text and content share it,
so the masthead never reads narrower than the sections below.
Width aligned to the nav content frame (founder 2026-07-17): the site nav is
the 1200px .container with 2rem (32px) gutters, so its content edge sits at
container-left + 32. rp-wrap keeps its 48px editorial gutters, so its
max-width is 1200 + 2*(48-32) = 1232 — that lands the masthead + featured
grid left/right edges exactly on the nav content edge at every wide width
(both are centered fixed-max-width columns, so the offset is constant). Was
1080, which read ~76px inset from the nav. */
.rp-wrap{ max-width:1232px; margin:0 auto; padding-left:48px; padding-right:48px; }
/* research-section font cascade for article bodies (scoped to main so the
gradient Geist Mono wordmark in nav/footer is untouched) */
body.rp main{
--font-display: 'Inter', -apple-system, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, monospace;
}
/* nav sub-brand label (real fleetfax wordmark stays; this is the divider tag) */
.rp-navlabel{
margin-left:14px; padding-left:14px; border-left:1px solid #dfe3ea;
font:600 11px 'Geist Mono', ui-monospace, monospace; color:#6b7480; letter-spacing:.16em;
}
/* ---- masthead ---- */
.rp-masthead{ background:linear-gradient(165deg,#151b28 0%,#0d1220 100%); color:#eef1f6; }
.rp-masthead-inner{ padding-top:82px; padding-bottom:58px; }
.rp-eyebrow{ font:600 11px 'Geist Mono', ui-monospace, monospace; letter-spacing:.24em; color:#8890a2; margin:0 0 24px; }
.rp-masthead h1{
font-family:'Inter', -apple-system, sans-serif; font-weight:500;
font-size:clamp(38px,5.2vw,62px); line-height:1.05; letter-spacing:-.015em;
margin:0 0 22px; color:#eef1f6; text-wrap:balance;
}
.rp-dek{ font-size:20px; line-height:1.55; color:#a7b2c4; max-width:700px; margin:0 0 36px; text-wrap:pretty; }
.rp-eyebrow a{ color:inherit; text-decoration:none; }
.rp-eyebrow a:hover{ color:#fff; }
.rp-eyebrow-sep{ color:#3d4a63; }
/* Lockup: the breadcrumb (RESEARCH / CATEGORY) sits at the eyebrow's 11px base so
its cap height matches the wordmark's lowercase x-height (founder 2026-07-14 —
"RESEARCH the height of the x in fleetfax"; same 0.73 ratio at the 15px
wordmark the founder sized up on 7/14 — 13px read too timid under a 62px h1).
The "fleetfax" wordmark and the divider pipe are pinned to 15px so the
brand anchors the line; the wordmark carries the canonical treatment (Geist
Mono 600 lowercase, -.04em, red brand gradient — the .24em tracking is
overridden here). All parts baseline-align inline. */
.rp-eyebrow-wm{
font-size:15px; letter-spacing:-.04em; text-transform:lowercase;
background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
}
.rp-eyebrow a:hover .rp-eyebrow-wm{ -webkit-text-fill-color:transparent; }
.rp-eyebrow-sub{ font-size:11px; }
/* Masthead wordmark divider: "FLEETFAX | RESEARCH". The pipe reads as a thin
divider between the wordmark and the section, not a character — dimmer and
lighter than the tracked eyebrow, spacing handled by the literal spaces
around it (letter-spacing already widens them). aria-hidden so screen
readers hear "FLEETFAX RESEARCH". */
.rp-eyebrow-pipe{ font-size:15px; color:#4a5876; font-weight:400; }
/* article-page masthead variant: same treatment, article-scaled title,
and the masthead text column lines up with the article prose column */
.rp-article .rp-masthead-inner{ max-width:720px; padding-left:var(--s-6); padding-right:var(--s-6); }
.rp-article h1{ font-size:clamp(32px,3.8vw,46px); }
.rp-article .rp-dek{ font-size:18px; max-width:640px; }
.rp-mastmeta{
display:flex; flex-wrap:wrap; gap:32px;
font:500 12px 'Geist Mono', ui-monospace, monospace; color:#7d879a; letter-spacing:.05em;
border-top:1px solid rgba(255,255,255,.12); padding-top:20px;
}
.rp-mast-cite{ margin:18px 0 0; max-width:720px; font-size:13px; line-height:1.6; color:#8b95a8; }
.rp-mast-cite .rp-mast-cite-h{ font:600 11px 'Geist Mono', ui-monospace, monospace; letter-spacing:.14em; color:#aeb7c8; margin-right:10px; }
.rp-mast-cite a{ color:#c8d2e6; text-decoration:none; border-bottom:1px solid rgba(200,210,230,.35); }
.rp-mast-cite a:hover{ color:#fff; }
/* ---- featured finding ---- */
.rp-featured{ padding:60px 0; border-bottom:1px solid #e7ebf1; position:relative; cursor:pointer; }
/* whole featured block is the click target too */
.rp-featured h2 a::after{ content:""; position:absolute; inset:0; }
.rp-kicker{ font:600 11px 'Geist Mono', ui-monospace, monospace; letter-spacing:.18em; color:#33353f; margin:0 0 24px; }
.rp-featured-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:60px; align-items:center; }
.rp-featured h2{
font-family:'Inter', -apple-system, sans-serif; font-weight:500; font-size:44px;
line-height:1.05; letter-spacing:-.01em; margin:0 0 20px; color:#12161d;
}
.rp-featured h2 a{ color:inherit; text-decoration:none; transition:color var(--t); }
.rp-featured h2 a:hover{ color:#33353f; }
.rp-featured-dek{ font-size:18px; line-height:1.62; color:#4a5361; margin:0 0 32px; max-width:540px; }
.rp-readlink{
display:inline-flex; align-items:center; gap:8px;
font:600 13px 'Geist Mono', ui-monospace, monospace; letter-spacing:.03em; color:#12161d;
text-decoration:none; border-bottom:2px solid #33353f; padding-bottom:4px;
}
.rp-readlink:hover{ color:#33353f; }
.rp-readtime{ margin-left:18px; font:500 12px 'Geist Mono', ui-monospace, monospace; color:#9aa2b0; }
.rp-statpanel{ background:#f6f8fc; border:1px solid #e4e9f1; border-radius:8px; padding:36px; }
.rp-bignum{ font-family:'Inter', -apple-system, sans-serif; font-weight:500; font-size:58px; line-height:1; color:#12161d; margin:0 0 8px; }
.rp-bignum span{ color:#aab2bf; font-size:32px; }
.rp-bignum-bad{ color:var(--r-accent); }
.rp-bigcap{ font:600 12px 'Geist Mono', ui-monospace, monospace; color:#6b7480; letter-spacing:.02em; margin:0 0 28px; }
.rp-statfoot{ margin-top:24px; padding-top:20px; border-top:1px solid #e4e9f1; font:500 12px 'Geist Mono', ui-monospace, monospace; color:#6b7480; }
.rp-statfoot span{ color:#12161d; }
/* ---- more-findings grid (1px gaps over grey = hairline dividers) ---- */
.rp-more{ padding:52px 0 68px; }
.rp-seclabel{ font:600 11px 'Geist Mono', ui-monospace, monospace; letter-spacing:.18em; color:#9aa2b0; margin:0 0 24px; }
.rp-grid{
display:grid; grid-template-columns:1fr 1fr; gap:1px;
background:#e7ebf1; border:1px solid #e7ebf1; border-radius:8px; overflow:hidden;
}
/* An odd number of cards leaves a dangling empty cell in the two-column grid,
which shows through as a grey gap rectangle. Let the last card span the row. */
.rp-grid > .rp-card:last-child:nth-child(odd){ grid-column:1 / -1; }
.rp-card{ background:#fff; padding:38px 36px; display:flex; flex-direction:column; transition:background var(--t); position:relative; cursor:pointer; }
.rp-card:hover{ background:#fafbfd; }
.rp-cardcat{ font:600 11px 'Geist Mono', ui-monospace, monospace; letter-spacing:.14em; color:#33353f; margin:0 0 16px; }
.rp-card h3{ font-family:'Inter', -apple-system, sans-serif; font-weight:500; font-size:28px; line-height:1.1; margin:0 0 14px; }
.rp-card h3 a{ color:#12161d; text-decoration:none; }
/* stretched link: the whole card is the click target */
.rp-card h3 a::after{ content:""; position:absolute; inset:0; }
.rp-card:hover h3 a{ color:#33353f; }
.rp-carddek{ font-size:15px; line-height:1.58; color:#5b6472; margin:0 0 26px; }
.rp-card .sv{ margin-bottom:22px; }
/* margin-top:auto: short cards collect their slack BELOW the graphic (dek used to
flex-stretch, which shoved the graphic to the foot - founder 7/15) */
.rp-cardfoot{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid #eef1f5; padding-top:18px; margin-top:auto; }
.rp-cardfoot a{ font:600 12px 'Geist Mono', ui-monospace, monospace; color:#12161d; text-decoration:none; letter-spacing:.03em; }
.rp-cardfoot a:hover{ color:#33353f; }
.rp-cardfoot span{ font:500 12px 'Geist Mono', ui-monospace, monospace; color:#9aa2b0; }
/* ---- StatViz (per-finding CSS visualizations) ---- */
.sv-labels{ display:flex; justify-content:space-between; font:600 11px/1.3 'Geist Mono', ui-monospace, monospace; color:#6b7480; letter-spacing:.02em; margin-bottom:10px; }
.sv-track{ height:22px; background:#e6eaf0; border-radius:2px; overflow:hidden; display:flex; }
.sv-track.sv-lead{ height:38px; }
.sv-fill{ height:100%; background:var(--r-accent); border-radius:2px; } /* navy data mark (was #33353f grey, a pre-blue-only leftover) 2026-07-15 */
.sv-segrow{ display:flex; gap:7px; }
.sv-seg{ width:18px; height:18px; border-radius:3px; background:#e6eaf0; flex:0 0 auto; }
.sv-seg.on{ background:var(--r-accent); } /* navy data mark (2026-07-15) */
.sv-cap{ font:600 11px 'Geist Mono', ui-monospace, monospace; color:#6b7480; margin-top:10px; }
.sv-ratio{ display:flex; flex-direction:column; gap:9px; }
.sv-ratiorow{ display:flex; align-items:center; gap:10px; }
.sv-ratiolabel{ font:600 11px 'Geist Mono', ui-monospace, monospace; color:#6b7480; width:72px; flex:0 0 auto; letter-spacing:.02em; }
.sv-ratioval{ font:600 13px 'Geist Mono', ui-monospace, monospace; color:#12161d; flex:0 0 auto; width:46px; text-align:right; }
.sv-ratiobar{ height:22px; border-radius:2px; }
.sv-ratiobar-small{ width:5px; background:#b3bcc9; }
.sv-ratiobar-big{ flex:1; background:var(--r-accent); } /* emphasis marks match the featured meter's accent — one system across the hub (founder 7/14) */
/* ---- featured finding: one part-to-whole bar ----
the whole track = the 9,849 carriers the new public feeds marked lapsed and we
re-checked live; the research-blue segment = the 541 (5.5%) that were actually
insured. the whole label anchors the track's right end and the segment tag sits
directly BELOW-left, flush with the fill's left edge, so the two never collide
at any ratio. */
.sv-pw{ margin-top:2px; }
.sv-pw-track{
position:relative; height:30px; border-radius:4px;
background:#d7dde7; /* muted whole */
display:flex; align-items:center;
}
.sv-pw-fill{
position:absolute; left:0; top:0; height:100%;
width:5.5%; min-width:9px; /* stays a visible mark at any width */
background:var(--r-accent); border-radius:4px;
}
.sv-pw-whole{
margin-left:auto; padding-right:12px; position:relative; z-index:1;
font:600 13px 'Geist Mono', ui-monospace, monospace; color:#3a4150;
}
.sv-pw-tag{
margin:9px 0 0; padding-left:0; /* flush with the fill's left edge */
font:600 12px 'Geist Mono', ui-monospace, monospace; color:var(--r-accent);
letter-spacing:.01em;
}
.sv-pw-tag b{ font-weight:700; }
.sv-window{ flex:1; height:100%; background:repeating-linear-gradient(45deg,var(--r-accent),var(--r-accent) 2px,#c4cfe4 2px,#c4cfe4 7px); } /* navy hatch on light blue-grey, reads with the blue system 2026-07-15 */
.sv-endcap{ flex:0 0 6px; height:100%; background:#12161d; }
.sv-ends{ display:flex; justify-content:space-between; font:600 11px/1.3 'Geist Mono', ui-monospace, monospace; color:#6b7480; margin-top:10px; }
.sv-cap-center{ text-align:center; font:600 11px 'Geist Mono', ui-monospace, monospace; color:#6b7480; margin-top:8px; }
/* ---- chart-variety forms (2026-07-15): one navy data ink (--r-accent),
muted greys for tracks/comparators/axes. Each form is picked by the data's
job so the cards stop reading as one repeated 2-bar chart. ---- */
.sv-chart{ display:block; width:100%; height:auto; overflow:visible; margin-bottom:2px; }
.sv-chart .svc-axis{ stroke:#cfd6e1; stroke-width:1; }
.sv-chart .svc-line{ fill:none; stroke:var(--r-accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.sv-chart .svc-dot{ fill:var(--r-accent); }
.sv-chart .svc-col{ fill:var(--r-accent); }
.sv-chart .svc-col-mut{ fill:#b3bcc9; }
.sv-chart .svc-val{ font:600 13px 'Geist Mono', ui-monospace, monospace; fill:#12161d; }
.sv-chart .svc-lab{ font:600 11px 'Geist Mono', ui-monospace, monospace; fill:#6b7480; letter-spacing:.02em; }
.sv-chart .svc-y0{ font:600 10px 'Geist Mono', ui-monospace, monospace; fill:#9aa2b0; }
/* pictogram count: 1 declared unit vs a field of exactly 206 observed units */
.sv-pict-group{ margin-bottom:14px; }
.sv-pict-group:last-of-type{ margin-bottom:0; }
.sv-pict-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.sv-pict-lab{ font:600 11px 'Geist Mono', ui-monospace, monospace; letter-spacing:.14em; color:#6b7480; }
.sv-pict-num{ font:700 15px 'Geist Mono', ui-monospace, monospace; color:#12161d; letter-spacing:.01em; }
.sv-pict-dots{ display:flex; flex-wrap:wrap; gap:3px 4px; }
/* one little truck per observed truck (founder 7/15); mask keeps it themable */
.sv-dotp{ width:13px; height:9px; background:var(--r-accent); flex:0 0 auto;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat; }
/* ---- methodology strip ---- */
.rp-method{ background:#f7f8fa; border-top:1px solid #e7ebf1; }
.rp-method-grid{ display:grid; grid-template-columns:220px 1fr; gap:44px; padding-top:48px; padding-bottom:48px; }
.rp-method-label{ font:600 12px 'Geist Mono', ui-monospace, monospace; letter-spacing:.14em; color:#33353f; margin:0; }
.rp-method-body{ max-width:660px; font-size:15px; line-height:1.65; color:#4a5361; }
.rp-method-body p{ margin:0 0 12px; }
.rp-method-body p:last-child{ margin-bottom:0; }
.rp-method-body strong{ color:#12161d; }
.rp-method-press{ color:#6b7480; }
.rp-method-press a{ color:#33353f; text-decoration:none; }
/* ---- product CTA (dark) ---- */
.rp-cta{ background:linear-gradient(165deg,#151b28,#0d1220); color:#eef1f6; }
.rp-cta-inner{ padding-top:48px; padding-bottom:48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.rp-cta-title{ font-family:'Inter', -apple-system, sans-serif; font-weight:500; font-size:27px; margin:0 0 4px; color:#eef1f6; }
.rp-cta-sub{ font-size:14px; color:#a7b2c4; margin:0; }
.rp-search{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:999px; padding:6px 6px 6px 22px; min-width:440px; }
/* focus cue lives on the pill, not as the global brand-red input outline;
the pill sits on the dark navy band, so the ring must be light to be seen */
.rp-search:focus-within{ box-shadow: 0 0 0 3px rgba(238,241,246,.55); }
.rp-search-input{ flex:1; min-width:0; border:0; background:transparent; font-family:'Inter',-apple-system,sans-serif; font-size:14px; color:#12161d; outline:none; }
.rp-search-input:focus-visible{ outline:none; }
.rp-search-input::placeholder{ color:#9aa2b0; }
.rp-search-btn{ background:var(--r-accent); color:#fff; border:none; border-radius:999px; padding:12px 26px; font:600 14px 'Inter',-apple-system,sans-serif; cursor:pointer; transition:background var(--t); }
.rp-search-btn:hover{ background:#c81525; }
/* ---- article bodies under the handoff language ----
(--font-display/--font-mono are remapped on body.rp main, so rdoc h2,
pull quotes, stat tiles, and method chrome pick up Newsreader / Plex Mono
automatically; the rules below tune sizes and hardcoded families) */
body.rp .rdoc h2{ font-weight:600; font-size:1.6rem; letter-spacing:-.005em; }
body.rp .r-pull{ font-weight:500; font-size:1.5rem; }
body.rp .r-fig-title{ font-family:'Inter', -apple-system, sans-serif; }
body.rp .r-chartbox svg text{ font-family:'Inter', -apple-system, sans-serif; }
body.rp .r-chartbox svg .num{ font-family:'Geist Mono',ui-monospace,monospace; }
/* ---- footer (compact) ---- */
.rp-footer{ background:#fff; border-top:1px solid #e7ebf1; }
.rp-footer-inner{ padding-top:24px; padding-bottom:24px; display:flex; justify-content:space-between; align-items:center; }
.rp-footer-brand{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.rp-footer-copy{ font:500 12px 'Geist Mono', ui-monospace, monospace; color:#9aa2b0; letter-spacing:.04em; }
/* ---- responsive ---- */
@media (max-width:900px){
.rp-wrap{ padding-left:24px; padding-right:24px; }
.rp-masthead-inner{ padding-top:56px; padding-bottom:40px; }
.rp-featured-grid{ grid-template-columns:1fr; gap:36px; }
.rp-featured h2{ font-size:34px; }
.rp-grid{ grid-template-columns:1fr; }
.rp-cta-inner{ flex-direction:column; align-items:stretch; }
.rp-search{ min-width:0; }
}
@media (max-width:560px){
.rp-navlabel{ display:none; }
.rp-method-grid{ grid-template-columns:1fr; gap:16px; }
.rp-card{ padding:28px 22px; }
}