/* =========================================================
DVI · Component Stylesheet
Dealer Visibility Index — dealervisibilityindex.com
v1.0 · 2026
Depends on: ./tokens.css
Usage:
Fonts: Source Serif 4 + Inter Tight + JetBrains Mono
Load via Google Fonts in .
========================================================= */
/* ---------- Reset / Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--dvi-sans);
color: var(--dvi-graphite);
background: var(--dvi-white);
font-size: var(--dvi-fs-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img,
svg { display: block; max-width: 100%; }
p { margin: 0; color: var(--dvi-body); text-wrap: pretty; }
h1, h2, h3, h4 {
font-family: var(--dvi-serif);
color: var(--dvi-ink);
font-weight: 500;
letter-spacing: var(--dvi-track-h3);
margin: 0;
text-wrap: balance;
}
h1 { font-size: var(--dvi-fs-h1); line-height: 1.04; letter-spacing: var(--dvi-track-tight); font-weight: 400; }
h2 { font-size: var(--dvi-fs-h2); line-height: 1.10; letter-spacing: var(--dvi-track-h2); }
h3 { font-size: var(--dvi-fs-h3); line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; }
h4 { font-size: var(--dvi-fs-h4); line-height: 1.30; font-weight: 600; letter-spacing: 0; font-family: var(--dvi-sans); }
/* Tabular numerals for stats and timestamps */
.dvi-num,
.credstrip .num,
.reviewed { font-variant-numeric: tabular-nums; }
/* ---------- Layout ---------- */
.wrap { max-width: var(--dvi-maxw); margin: 0 auto; padding: 0 var(--dvi-gutter); }
section { padding: var(--dvi-section-y) 0; }
/* ---------- Editorial type fragments ---------- */
.eyebrow {
font-family: var(--dvi-mono);
font-size: var(--dvi-fs-micro);
font-weight: 500;
letter-spacing: var(--dvi-track-mono-2);
text-transform: uppercase;
color: var(--dvi-blue);
}
.eyebrow .dot {
display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
background: var(--dvi-blue);
vertical-align: middle;
margin: 0 10px 2px 0;
}
.lede {
font-size: var(--dvi-fs-lede);
line-height: 1.6;
color: var(--dvi-body);
max-width: 62ch;
}
/* Single italic blue word — use sparingly (hero H1 only). */
.accent { color: var(--dvi-blue); font-style: italic; font-weight: 400; }
/* Mono superscript version-mark ("v.01") next to H1 */
.index-mark {
display: inline-block;
font-family: var(--dvi-mono);
font-size: 0.3em;
vertical-align: super;
color: var(--dvi-blue);
font-weight: 500;
letter-spacing: 0.05em;
margin-left: 8px;
}
/* ---------- Section label ----------
Numbered mono header introducing every major section. */
.section-label {
display: flex; align-items: center; gap: 14px;
font-family: var(--dvi-mono);
font-size: var(--dvi-fs-micro);
letter-spacing: var(--dvi-track-mono-3);
text-transform: uppercase;
color: var(--dvi-ink);
font-weight: 500;
padding-bottom: 18px;
margin-bottom: 40px;
border-bottom: var(--dvi-hairline);
}
.section-label .num {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
border: var(--dvi-hairline);
border-radius: var(--dvi-radius-sm);
font-size: 10px;
color: var(--dvi-body);
background: var(--dvi-white);
}
.section-label .meta { margin-left: auto; color: var(--dvi-body); font-weight: 400; }
/* ---------- Header / topbar ---------- */
.topbar {
position: sticky; top: 0; z-index: var(--dvi-z-header);
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(140%) blur(10px);
border-bottom: var(--dvi-hairline);
}
.topbar-inner { display: flex; align-items: center; gap: 32px; height: 72px; }
/* ---------- Brand lockup ---------- */
.brand { display: flex; align-items: center; gap: 14px; color: var(--dvi-ink); }
.brand .mark { width: 38px; height: 38px; }
.brand .lockup{ display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.brand .name { font-family: var(--dvi-serif); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--dvi-ink); line-height: 1.2; }
.brand .sub { font-family: var(--dvi-mono); font-size: var(--dvi-fs-nano); letter-spacing: var(--dvi-track-mono-3); text-transform: uppercase; color: var(--dvi-body); margin-top: 6px; line-height: 1.2; }
/* ---------- Primary nav ---------- */
nav.primary { display: flex; align-items: center; gap: 30px; margin-left: auto; }
nav.primary a { font-size: 14px; color: var(--dvi-graphite); font-weight: 500; padding: 6px 0; transition: color var(--dvi-transition-fast); }
nav.primary a:hover{ color: var(--dvi-blue); }
nav.primary .cta {
margin-left: 8px;
padding: 9px 16px;
border: 1px solid var(--dvi-ink);
color: var(--dvi-ink);
border-radius: var(--dvi-radius-xs);
font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
transition: background var(--dvi-transition-fast), color var(--dvi-transition-fast);
}
nav.primary .cta:hover { background: var(--dvi-ink); color: var(--dvi-white); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: var(--dvi-radius-xs);
font-size: 14px; font-weight: 600; letter-spacing: 0.005em;
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--dvi-transition-fast),
background var(--dvi-transition-fast),
color var(--dvi-transition-fast),
border-color var(--dvi-transition-fast);
}
.btn .arrow { transition: transform var(--dvi-transition-med); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--dvi-ink); color: var(--dvi-white); }
.btn-primary:hover { background: var(--dvi-blue); }
.btn-secondary { background: transparent; color: var(--dvi-ink); border-color: var(--dvi-border); }
.btn-secondary:hover{ border-color: var(--dvi-ink); }
/* ---------- Hero ---------- */
.hero {
padding: clamp(72px, 10vw, 140px) 0 clamp(64px, 8vw, 110px);
position: relative;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: end;
}
.hero .lede { margin-top: 36px; }
.hero .ctas { display: flex; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.hero-meta {
border-left: var(--dvi-hairline);
padding-left: 32px;
display: flex; flex-direction: column; gap: 28px;
align-self: end; padding-bottom: 8px;
}
.hero-meta .row { display: flex; flex-direction: column; gap: 6px; }
.hero-meta .k { font-family: var(--dvi-mono); font-size: 10.5px; letter-spacing: var(--dvi-track-mono-3); text-transform: uppercase; color: var(--dvi-body); }
.hero-meta .v { font-family: var(--dvi-serif); font-size: 18px; color: var(--dvi-ink); font-weight: 500; letter-spacing: -0.005em; }
.hero-meta .v small { font-family: var(--dvi-sans); font-size: 13px; color: var(--dvi-body); font-weight: 400; display: block; margin-top: 2px; letter-spacing: 0; }
/* Faint index-grid background behind hero */
.hero-bg {
position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(to right, rgba(10,22,40,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10,22,40,0.04) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 90%);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 90%);
}
/* ---------- Credibility strip ---------- */
.credstrip {
background: var(--dvi-mist);
border-top: var(--dvi-hairline);
border-bottom: var(--dvi-hairline);
padding: 36px 0;
}
.credstrip .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.credstrip .item { padding: 8px 28px; border-left: var(--dvi-hairline); display: flex; flex-direction: column; gap: 6px; }
.credstrip .item:first-child { border-left: 0; padding-left: 0; }
.credstrip .num { font-family: var(--dvi-serif); font-size: 34px; color: var(--dvi-ink); font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.credstrip .label { font-family: var(--dvi-mono); font-size: 10.5px; letter-spacing: var(--dvi-track-mono-2); text-transform: uppercase; color: var(--dvi-body); }
/* ---------- Publish grid (5 cells, hairlines) ---------- */
.publish-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border-top: var(--dvi-hairline);
border-bottom: var(--dvi-hairline);
}
.publish-cell {
padding: 36px 28px 40px;
border-left: var(--dvi-hairline);
display: flex; flex-direction: column; gap: 14px;
min-height: 240px;
background: var(--dvi-white);
transition: background var(--dvi-transition-med);
}
.publish-cell:first-child { border-left: 0; }
.publish-cell:hover { background: var(--dvi-mist); }
.publish-cell .idx { font-family: var(--dvi-mono); font-size: 10.5px; color: var(--dvi-blue); letter-spacing: var(--dvi-track-mono-2); }
.publish-cell h3 { font-family: var(--dvi-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.publish-cell p { font-size: 14px; line-height: 1.55; }
.publish-cell .glyph { margin-top: auto; color: var(--dvi-ink); opacity: 0.85; }
/* ---------- Cards (generic + profile) ---------- */
.card,
.profile-card {
background: var(--dvi-white);
border: var(--dvi-hairline);
border-radius: var(--dvi-radius-md);
padding: var(--dvi-card-pad);
display: flex; flex-direction: column; gap: 20px;
transition: border-color var(--dvi-transition-fast);
position: relative;
overflow: hidden;
}
.card:hover,
.profile-card:hover { border-color: var(--dvi-ink); }
.profile-row { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 24px; }
.profile-card .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.profile-card h3 { font-family: var(--dvi-serif); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.profile-card .desc { font-size: 14.5px; color: var(--dvi-body); }
.profile-card .meta {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
padding-top: 18px; border-top: var(--dvi-hairline); margin-top: auto;
}
.profile-card .meta .k { font-family: var(--dvi-mono); font-size: 9.5px; letter-spacing: var(--dvi-track-mono-1); text-transform: uppercase; color: var(--dvi-body); margin-bottom: 4px; }
.profile-card .meta .v { font-size: 14px; color: var(--dvi-ink); font-weight: 500; }
.profile-card .footer { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--dvi-blue); font-weight: 600; }
.profile-card .footer .arrow { transition: transform var(--dvi-transition-med); }
.profile-card:hover .footer .arrow { transform: translateX(3px); }
/* Featured (dark) variant */
.profile-card.featured { background: var(--dvi-ink); color: var(--dvi-white); border-color: var(--dvi-ink); }
.profile-card.featured h3 { color: var(--dvi-white); }
.profile-card.featured .desc { color: rgba(255,255,255,0.72); }
.profile-card.featured .tag { background: rgba(18,102,241,0.18); color: var(--dvi-blue-light); }
.profile-card.featured .reviewed { color: rgba(255,255,255,0.6); }
.profile-card.featured .meta { border-top-color: rgba(255,255,255,0.12); }
.profile-card.featured .meta .k { color: rgba(255,255,255,0.55); }
.profile-card.featured .meta .v { color: var(--dvi-white); }
.profile-card.featured .footer { color: var(--dvi-blue-light); }
/* ---------- Tag badges ---------- */
.tag {
font-family: var(--dvi-mono);
font-size: 10px;
letter-spacing: var(--dvi-track-mono-2);
text-transform: uppercase;
padding: 5px 9px;
border-radius: var(--dvi-radius-xs);
background: var(--dvi-blue-soft);
color: var(--dvi-blue);
font-weight: 500;
}
.tag.gray { background: var(--dvi-mist); color: var(--dvi-body); }
/* ---------- Reviewed-date label ---------- */
.reviewed {
font-family: var(--dvi-mono);
font-size: 10.5px;
color: var(--dvi-body);
letter-spacing: 0.08em;
display: flex; align-items: center; gap: 6px;
}
.reviewed::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: var(--dvi-status-ok);
display: inline-block;
}
/* ---------- Visibility pillars ---------- */
.pillars-head {
display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
align-items: end; margin-bottom: 56px;
}
.pillars {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 1px;
background: var(--dvi-border);
border: var(--dvi-hairline);
}
.pillar {
background: var(--dvi-white);
padding: 32px 24px 36px;
display: flex; flex-direction: column; gap: 18px;
min-height: 280px;
transition: background var(--dvi-transition-med);
}
.pillar:hover { background: var(--dvi-mist); }
.pillar .code { font-family: var(--dvi-mono); font-size: 11px; color: var(--dvi-blue); letter-spacing: var(--dvi-track-mono-1); display: flex; align-items: center; gap: 8px; }
.pillar .code::before { content: ""; width: 18px; height: 1px; background: var(--dvi-blue); display: inline-block; }
.pillar h3 { font-family: var(--dvi-serif); font-size: 28px; font-weight: 500; letter-spacing: -0.015em; line-height: 1; }
.pillar p { font-size: 13.5px; line-height: 1.55; }
.pillar .systems {
margin-top: auto; padding-top: 18px; border-top: var(--dvi-hairline);
font-family: var(--dvi-mono); font-size: 10px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--dvi-body); line-height: 1.7;
}
/* ---------- Methodology ---------- */
.methodology {
background: var(--dvi-mist);
border-top: var(--dvi-hairline);
border-bottom: var(--dvi-hairline);
}
.meth-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(40px, 6vw, 96px);
align-items: start;
}
.meth-list { display: flex; flex-direction: column; }
.meth-item {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 24px; align-items: start;
padding: 28px 0;
border-top: var(--dvi-hairline);
}
.meth-item:last-child { border-bottom: var(--dvi-hairline); }
.meth-item .num { font-family: var(--dvi-mono); font-size: 11px; color: var(--dvi-body); letter-spacing: var(--dvi-track-mono-1); padding-top: 6px; }
.meth-item h4 { font-family: var(--dvi-serif); font-size: 20px; font-weight: 500; color: var(--dvi-ink); letter-spacing: -0.01em; margin-bottom: 6px; }
.meth-item p { font-size: 14px; color: var(--dvi-body); }
.meth-item .check { color: var(--dvi-blue); padding-top: 4px; }
/* ---------- "What this site is not" trust block ---------- */
.notblock {
border: var(--dvi-hairline);
border-radius: var(--dvi-radius-md);
padding: clamp(36px, 4vw, 56px);
background: var(--dvi-white);
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(32px, 4vw, 64px);
align-items: start;
}
.notblock h2 { font-size: clamp(24px, 2.4vw, 32px); }
.notblock .label { font-family: var(--dvi-mono); font-size: 11px; color: var(--dvi-body); letter-spacing: var(--dvi-track-mono-2); text-transform: uppercase; margin-bottom: 18px; }
.notlist {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
}
.notlist li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 14.5px; color: var(--dvi-graphite);
padding: 10px 0;
border-bottom: 1px dashed var(--dvi-border);
}
.notlist li::before {
content: "—";
color: var(--dvi-body);
font-family: var(--dvi-mono);
flex-shrink: 0;
}
.notblock .disclaimer {
grid-column: 1 / -1;
margin-top: 8px;
padding-top: 24px;
border-top: var(--dvi-hairline);
font-size: 13.5px; color: var(--dvi-body); font-style: italic; line-height: 1.6;
}
/* ---------- Footer ---------- */
footer.site {
background: var(--dvi-ink);
color: rgba(255,255,255,0.8);
padding: 80px 0 32px;
}
footer.site .top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
footer.site .brand { color: var(--dvi-white); }
footer.site .brand .name { color: var(--dvi-white); }
footer.site .brand .sub { color: rgba(255,255,255,0.5); }
footer.site .col h4 { font-family: var(--dvi-mono); font-size: 10.5px; letter-spacing: var(--dvi-track-mono-2); text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 500; margin-bottom: 20px; }
footer.site .col a { display: block; font-size: 14px; color: rgba(255,255,255,0.85); padding: 6px 0; transition: color var(--dvi-transition-fast); }
footer.site .col a:hover { color: var(--dvi-blue-soft); }
footer.site .blurb { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.65); margin-top: 18px; max-width: 36ch; }
footer.site .bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 28px;
font-family: var(--dvi-mono); font-size: 11px; letter-spacing: 0.1em;
color: rgba(255,255,255,0.5); text-transform: uppercase;
flex-wrap: wrap; gap: 16px;
}
footer.site .bottom .pulse { display: flex; align-items: center; gap: 8px; }
footer.site .bottom .pulse::before {
content: "";
width: 7px; height: 7px; border-radius: 50%;
background: var(--dvi-status-ok);
box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
}
/* =========================================================
Editorial interior page components
Applied on pages that use .container wrapper
========================================================= */
/* Layout alias for interior pages (.wrap equivalent) */
.container { max-width: var(--dvi-maxw); margin: 0 auto; padding: 0 var(--dvi-gutter); }
/* .lead mirrors .lede for interior pages */
.lead { font-size: var(--dvi-fs-lede); line-height: 1.6; color: var(--dvi-body); max-width: 62ch; }
/* ---------- Breadcrumb ---------- */
.breadcrumb {
font-family: var(--dvi-mono);
font-size: 11px; letter-spacing: 0.08em;
color: var(--dvi-body); padding: 20px 0 4px;
}
.breadcrumb a { color: var(--dvi-body); }
.breadcrumb a:hover { color: var(--dvi-blue); }
/* ---------- Page byline row ---------- */
.page-meta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-family: var(--dvi-mono); font-size: 10.5px;
letter-spacing: 0.08em; color: var(--dvi-body);
text-transform: uppercase; padding: 12px 0 4px;
}
.page-meta__sep { opacity: 0.35; }
/* ---------- Content rhythm ---------- */
.container > h1 { margin-top: 28px; }
.container > h2 { margin-top: 48px; margin-bottom: 2px; }
.container > h3 { margin-top: 32px; margin-bottom: 2px; }
.container > p { margin-top: 14px; }
.container > ul,
.container > ol { margin-top: 14px; padding-left: 22px; color: var(--dvi-body); }
.container > ul li,
.container > ol li { margin-bottom: 6px; font-size: 15px; line-height: 1.55; }
.container a { color: var(--dvi-blue); }
.container a:hover { text-decoration: underline; }
.container strong { color: var(--dvi-ink); }
/* ---------- Callout boxes ---------- */
.box {
border: var(--dvi-hairline); border-radius: var(--dvi-radius-md);
padding: 22px 26px; margin-top: 24px; background: var(--dvi-white);
}
.box--info { background: var(--dvi-blue-soft); border-color: rgba(18,102,241,0.2); }
.box--source { background: var(--dvi-mist); }
.box--notice { background: var(--dvi-mist); border-left: 3px solid var(--dvi-blue); padding-left: 24px; }
.box__label {
font-family: var(--dvi-mono); font-size: 9.5px;
letter-spacing: var(--dvi-track-mono-2); text-transform: uppercase;
color: var(--dvi-body); margin-bottom: 10px; font-weight: 600;
}
.box p { font-size: 14px; line-height: 1.6; margin-top: 6px; }
.box ul { padding-left: 18px; margin-top: 8px; }
.box ul li { font-size: 14px; margin-bottom: 4px; color: var(--dvi-body); }
/* ---------- Tables ---------- */
table {
width: 100%; border-collapse: collapse;
font-size: 14px; margin-top: 18px; border: var(--dvi-hairline);
}
th {
font-family: var(--dvi-mono); font-size: 10px;
letter-spacing: var(--dvi-track-mono-2); text-transform: uppercase;
color: var(--dvi-body); font-weight: 500; text-align: left;
padding: 10px 16px; border-bottom: var(--dvi-hairline);
background: var(--dvi-mist);
}
td {
padding: 12px 16px; border-bottom: var(--dvi-hairline);
color: var(--dvi-graphite); vertical-align: top;
}
tr:last-child td { border-bottom: none; }
table a { color: var(--dvi-blue); }
/* ---------- FAQ definition list ---------- */
dl.faq { margin-top: 24px; }
dl.faq dt {
font-family: var(--dvi-serif); font-size: 18px; font-weight: 500;
color: var(--dvi-ink); letter-spacing: -0.005em;
margin-top: 28px; padding-bottom: 10px; border-bottom: var(--dvi-hairline);
}
dl.faq dd {
font-size: 14.5px; color: var(--dvi-body);
line-height: 1.6; margin: 12px 0 0 0;
}
dl.faq dd a { color: var(--dvi-blue); }
/* ---------- AI intelligence file block ---------- */
.intel-block {
background: var(--dvi-mist); border: var(--dvi-hairline);
border-radius: var(--dvi-radius-md); padding: 22px 26px; margin-top: 24px;
}
.intel-block p { font-size: 14px; line-height: 1.6; margin-top: 0; }
.intel-block ul { padding-left: 18px; margin-top: 8px; }
.intel-block li { font-size: 14px; margin-bottom: 6px; color: var(--dvi-body); }
.intel-block a { color: var(--dvi-blue); }
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.hero-grid { grid-template-columns: 1fr; gap: 48px; }
.hero-meta { border-left: 0; border-top: var(--dvi-hairline); padding-left: 0; padding-top: 32px; flex-direction: row; flex-wrap: wrap; gap: 32px; }
.hero-meta .row { flex: 1 1 180px; }
.credstrip .grid { grid-template-columns: 1fr 1fr; }
.credstrip .item { border-left: 0; border-top: var(--dvi-hairline); padding: 18px 0 0; }
.credstrip .item:first-child { padding-top: 18px; }
.credstrip .item:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.publish-grid { grid-template-columns: 1fr 1fr; }
.publish-cell { border-left: 0; border-top: var(--dvi-hairline); }
.publish-cell:nth-child(-n+2) { border-top: 0; }
.publish-cell:nth-child(2n) { border-left: var(--dvi-hairline); }
.profile-row { grid-template-columns: 1fr; }
.pillars-head { grid-template-columns: 1fr; gap: 24px; }
.pillars { grid-template-columns: 1fr 1fr; }
.pillars .pillar:nth-child(5) { grid-column: 1 / -1; }
.meth-grid { grid-template-columns: 1fr; gap: 32px; }
.notblock { grid-template-columns: 1fr; }
.notlist { grid-template-columns: 1fr; }
footer.site .top { grid-template-columns: 1fr 1fr; gap: 32px; }
nav.primary { display: none; }
}
/* ---------- Print ---------- */
@media print {
@page { size: A4 portrait; margin: 14mm; }
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
.topbar { position: static; background: var(--dvi-white) !important; backdrop-filter: none; }
section { padding: 32px 0 !important; }
.ctas, nav.primary .cta { display: none; }
}