/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 */
/* Hallmark · theme: custom warm reference · macrostructure: Catalogue · nav: N5 · footer: Ft2 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  background: var(--color-paper);
}

body {
  min-width: 0;
  margin: 0;
  overflow-x: clip;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
button, select { font: inherit; }
button, select, a { -webkit-tap-highlight-color: var(--color-accent-soft); }
a { color: inherit; text-decoration-thickness: var(--rule-hair); text-underline-offset: var(--space-3xs); }
a:hover { color: var(--color-accent); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.shell {
  width: min(100%, var(--content-max));
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.skip-link {
  position: fixed;
  z-index: calc(var(--z-sticky-nav) + 1);
  top: var(--space-sm);
  left: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-accent-ink);
  background: var(--color-ink);
  transform: translateY(calc(-100% - var(--space-lg)));
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: var(--z-sticky-nav);
  top: var(--space-sm);
  height: 0;
  padding-inline: var(--page-gutter);
}

.nav-shell {
  position: relative;
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: var(--nav-height);
  margin-inline: auto;
  padding: var(--space-3xs);
  align-items: center;
  gap: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  box-shadow: 0 var(--space-2xs) var(--space-lg) var(--color-shadow-soft);
  backdrop-filter: blur(18px) saturate(120%);
}

.wordmark {
  display: flex;
  min-width: 0;
  min-height: var(--control-min);
  padding-inline: var(--space-xs);
  align-items: center;
  gap: var(--space-2xs);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-decoration: none;
  text-transform: uppercase;
}

.wordmark > span:first-child,
.footer-mark {
  color: var(--color-accent);
  font-size: var(--text-md);
  font-weight: 750;
}

.nav-edge { display: flex; align-items: center; gap: var(--space-3xs); }

.nav-action,
.menu-toggle {
  display: inline-flex;
  min-width: var(--control-min);
  min-height: var(--control-min);
  padding: var(--space-2xs) var(--space-sm);
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  border: var(--rule-hair) solid var(--color-paper-2);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 620;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro), background-color var(--dur-micro), border-color var(--dur-micro), box-shadow var(--dur-micro), transform var(--dur-micro);
}

.nav-action:hover,
.menu-toggle:hover { color: var(--color-ink); border-color: var(--color-rule); background: var(--color-paper-3); }
.nav-action:active,
.menu-toggle:active { transform: translateY(1px); }
.nav-action.primary { color: var(--color-accent-ink); background: var(--color-ink); }
.nav-action.primary:hover { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.menu-toggle { display: none; cursor: pointer; list-style: none; }
.menu-toggle::-webkit-details-marker { display: none; }
.mobile-menu { display: none; }
.menu-symbol::before { content: "＋"; }
.mobile-menu[open] .menu-symbol::before { content: "−"; }

.site-main { padding-top: var(--space-4xl); }

.page-hero {
  display: grid;
  min-height: min(43rem, calc(100vh - var(--space-3xl)));
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);
  align-content: end;
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
}

.hero-meta {
  display: flex;
  margin-bottom: var(--space-lg);
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3, p { min-width: 0; }
h1, h2, h3 {
  margin-top: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 610;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

h1 {
  max-width: 17ch;
  margin-bottom: var(--space-lg);
  font-size: var(--text-display);
  line-height: 1.02;
}

h2 { margin-bottom: var(--space-sm); font-size: clamp(var(--text-xl), 4vw, var(--text-3xl)); line-height: 1.08; }
h3 { margin-bottom: var(--space-xs); font-size: var(--text-lg); line-height: 1.14; }
p { margin-top: 0; }

.hero-copy {
  max-width: var(--measure);
  margin-bottom: 0;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.55;
}

.hero-actions { display: flex; margin-top: var(--space-lg); flex-wrap: wrap; gap: var(--space-xs); }

.action {
  display: inline-flex;
  min-width: var(--control-min);
  min-height: var(--control-min);
  padding: var(--space-xs) var(--space-md);
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-pill);
  color: var(--color-accent-ink);
  background: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro), background-color var(--dur-micro), border-color var(--dur-micro), box-shadow var(--dur-micro), transform var(--dur-micro);
}

.action:hover { color: var(--color-accent-ink); border-color: var(--color-accent); background: var(--color-accent); box-shadow: 0 var(--space-2xs) var(--space-md) var(--color-shadow); }
.action:active { transform: translateY(1px); box-shadow: none; }
.action.secondary { color: var(--color-ink); background: var(--color-paper); border-color: var(--color-rule-strong); }
.action.secondary:hover { color: var(--color-accent); background: var(--color-paper-2); border-color: var(--color-accent); }
.action:disabled { color: var(--color-muted); background: var(--color-paper-3); border-color: var(--color-rule); cursor: not-allowed; box-shadow: none; }

.publisher-strip {
  display: grid;
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) 0 var(--space-md);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.publisher-strip p { max-width: var(--measure); margin: 0; }
.status-dot { width: var(--space-2xs); height: var(--space-2xs); margin-top: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-accent); }

.section { min-width: 0; padding-block: var(--space-3xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.compact-section { padding-block: var(--space-2xl); }
.surface-section { margin-inline: calc(var(--page-gutter) * -1); padding-inline: var(--page-gutter); background: var(--color-paper-2); }

.section-head { display: grid; max-width: 58rem; margin-bottom: var(--space-xl); gap: var(--space-xs); }
.section-head h2, .section-head p { margin-bottom: 0; }
.section-head > p:last-child { max-width: var(--measure); color: var(--color-muted); }

.eyebrow,
.record-id,
.section-number {
  margin-bottom: var(--space-xs);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
}

.ledger-band {
  display: grid;
  padding-block: var(--space-lg);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
}

.ledger-band div { display: grid; min-width: 0; padding-inline: var(--space-md); gap: var(--space-3xs); border-right: var(--rule-hair) solid var(--color-rule); }
.ledger-band div:first-child { padding-left: 0; }
.ledger-band div:last-child { border-right: 0; }
.ledger-band strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 620; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.ledger-band span { color: var(--color-muted); font-size: var(--text-sm); }

.decision-list { border-top: var(--rule-hair) solid var(--color-rule-strong); }
.decision-list a {
  display: grid;
  min-height: 6rem;
  padding-block: var(--space-md);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-decoration: none;
}
.decision-list a:hover { color: var(--color-ink); background: var(--color-paper-2); }
.decision-index { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; }
.decision-list strong { display: block; font-family: var(--font-display); font-size: var(--text-md); line-height: 1.25; }
.decision-list small { display: block; margin-top: var(--space-3xs); color: var(--color-muted); font-size: var(--text-sm); }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.product-card { display: grid; min-width: 0; padding: var(--space-lg); grid-template-rows: auto auto 1fr auto; gap: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.product-card-media { display: grid; min-width: 0; margin: 0; aspect-ratio: 4 / 3; place-items: center; overflow: clip; border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.product-card-media img { display: block; width: 100%; height: 100%; padding: var(--space-sm); object-fit: contain; }
.product-card header { min-width: 0; }
.product-card h3 a { text-decoration: none; }
.brand-lockup { display: flex; width: fit-content; max-width: min(100%, 13rem); min-height: 2.5rem; margin-bottom: var(--space-sm); align-items: center; }
.brand-lockup img { display: block; width: auto; max-width: 100%; height: auto; max-height: 2.75rem; object-fit: contain; object-position: left center; }
.brand-lockup.is-dark { min-height: 0; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-input); background: var(--color-ink); }
.brand-lockup.is-dark img { max-height: 1.65rem; }
.brand-lockup[data-brand-logo="Mvolo"] { min-height: 3.5rem; }
.brand-lockup[data-brand-logo="Mvolo"] img { max-height: 3.5rem; }
.relation-tag, .record-tags span { display: inline-flex; padding: var(--space-3xs) var(--space-2xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-muted); font-family: var(--font-display); font-size: var(--text-xs); line-height: 1.4; }

.fact-list { margin: 0; }
.fact-row { display: grid; min-width: 0; padding-block: var(--space-2xs); grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr); gap: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.fact-row dt { color: var(--color-muted); font-size: var(--text-sm); }
.fact-row dd { min-width: 0; margin: 0; color: var(--color-ink-2); text-align: right; overflow-wrap: anywhere; }
.fact-row dd.is-missing { color: var(--color-accent); font-style: italic; }
.fact-list.large .fact-row { padding-block: var(--space-xs); }
.product-card footer { display: flex; min-width: 0; padding-top: var(--space-sm); align-items: center; justify-content: space-between; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.text-link { color: var(--color-ink); font-family: var(--font-display); font-weight: 650; white-space: nowrap; }
.section-action { margin: var(--space-lg) 0 0; }

.split-section, .article-layout, .facts-section, .product-record-head { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.75fr); gap: var(--space-2xl); align-items: start; }
.method-note, .article-index { min-width: 0; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.method-note p:last-child { margin-bottom: 0; }
.method-note ul, .article-index ol { margin: 0 0 var(--space-lg); padding-left: var(--space-md); color: var(--color-ink-2); }
.quote { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.35; letter-spacing: -0.025em; }

.evidence-grid { display: grid; gap: var(--space-md); }
.evidence-card { padding: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-strong); background: var(--color-paper-2); }
.evidence-card > p:nth-child(2) { max-width: var(--measure); font-size: var(--text-md); line-height: 1.55; }
.fine-print { margin-bottom: 0; color: var(--color-muted); font-size: var(--text-sm); }

.source-list { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-strong); }
.source-list li { display: grid; min-width: 0; padding-block: var(--space-sm); grid-template-columns: minmax(0, 1.3fr) minmax(12rem, 0.7fr); gap: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.source-list a { font-family: var(--font-display); font-weight: 620; overflow-wrap: anywhere; }
.source-list span { color: var(--color-muted); font-size: var(--text-sm); text-align: right; }

.related-links { border-top: var(--rule-hair) solid var(--color-rule-strong); }
.related-links a { display: flex; min-height: var(--control-min); padding-block: var(--space-sm); align-items: center; justify-content: space-between; gap: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); font-family: var(--font-display); font-weight: 620; text-decoration: none; }

.faq { border-top: var(--rule-hair) solid var(--color-rule-strong); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: flex; min-height: var(--control-min); padding-block: var(--space-sm); align-items: center; justify-content: space-between; gap: var(--space-md); font-family: var(--font-display); font-size: var(--text-md); font-weight: 620; cursor: pointer; }
.faq summary::after { content: "+"; color: var(--color-accent); font-size: var(--text-lg); }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: var(--measure); padding-bottom: var(--space-md); color: var(--color-ink-2); }

.numbered-sections > section { display: grid; padding-block: var(--space-lg); grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.numbered-sections > section:first-child { padding-top: 0; border-top: 0; }
.numbered-sections .section-number { grid-row: 1 / span 2; }
.numbered-sections h2 { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.numbered-sections p:last-child { max-width: var(--measure); color: var(--color-ink-2); }
.article-index { position: sticky; top: calc(var(--space-3xl) + var(--space-lg)); }

.field-label { display: grid; min-width: min(100%, 22rem); gap: var(--space-2xs); color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 650; }
select { width: 100%; min-height: var(--control-min); padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-input); color: var(--color-ink); background: var(--color-paper-2); cursor: pointer; }
select:hover { border-color: var(--color-accent); }
.comparison-controls { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); }
.comparison-controls .section-head { margin-bottom: 0; }
.comparison-grid { padding-top: 0; }

.chooser { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(17rem, 0.55fr); column-gap: var(--space-2xl); }
.chooser .section-head { grid-column: 1 / -1; }
.chooser-result { min-height: 10rem; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-card); background: var(--color-paper-2); }
.chooser-result p:last-child { margin-bottom: 0; }
.choice-steps { margin: 0; padding: 0; list-style: none; counter-reset: choices; border-top: var(--rule-hair) solid var(--color-rule-strong); }
.choice-steps li { display: grid; min-width: 0; min-height: 6rem; padding-block: var(--space-md); grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr); align-items: start; gap: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.choice-steps strong { font-family: var(--font-display); font-size: var(--text-md); }
.choice-steps span { color: var(--color-ink-2); }
.segment-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.segment-columns article { padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule-strong); }
.segment-columns ul { margin: 0; padding: 0; list-style: none; }
.segment-columns li { padding-block: var(--space-2xs); border-bottom: var(--rule-hair) solid var(--color-rule); }

.product-record-head { padding-top: var(--space-2xl); }
.product-record-head .brand-lockup { max-width: min(100%, 16rem); margin-bottom: var(--space-md); }
.record-tags { display: flex; margin: var(--space-md) 0; flex-wrap: wrap; gap: var(--space-2xs); }
.record-lede { max-width: var(--measure); color: var(--color-ink-2); font-size: var(--text-md); }
.product-photo { margin: 0; padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.product-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--radius-input); }
.product-photo figcaption { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.facts-section > div { min-width: 0; }
.facts-section .section-head { min-height: 8rem; }
.missing-list { display: flex; margin: 0; padding: 0; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; }
.missing-list li { padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill); color: var(--color-accent); font-size: var(--text-sm); }
.prose { max-width: var(--measure); }
.prose p { color: var(--color-ink-2); }

.site-footer { padding-block: var(--space-lg); color: var(--color-muted); background: var(--color-paper-3); font-size: var(--text-sm); }
.footer-line { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-md); }
.footer-line nav { display: flex; align-items: center; gap: var(--space-xs); }
.footer-line a { white-space: nowrap; }

.not-found { display: grid; min-height: 100vh; padding-block: var(--space-4xl); align-content: center; }
.not-found h1 { margin-bottom: var(--space-md); }
.not-found > p:not(.eyebrow) { max-width: var(--measure); font-size: var(--text-md); }
.not-found .publisher-strip { margin-top: var(--space-2xl); }

@media (max-width: 64rem) {
  .page-hero { min-height: 38rem; }
  .split-section, .article-layout, .facts-section, .product-record-head { grid-template-columns: minmax(0, 1fr); }
  .article-index { position: static; }
  .facts-section .section-head { min-height: 0; }
  .product-photo { max-width: 34rem; }
}

@media (max-width: 50rem) {
  .product-grid { grid-template-columns: minmax(0, 1fr); }
  .ledger-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-band div:nth-child(2) { border-right: 0; }
  .ledger-band div:nth-child(n + 3) { padding-top: var(--space-md); }
  .segment-columns { grid-template-columns: minmax(0, 1fr); }
  .comparison-controls, .footer-line { align-items: stretch; flex-direction: column; }
  .footer-line nav { flex-wrap: wrap; }
  .source-list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .source-list span { text-align: left; }
  .chooser { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
}

@media (max-width: 40rem) {
  .site-header { top: var(--space-2xs); padding-inline: var(--space-sm); }
  .nav-shell { width: 100%; justify-content: space-between; gap: var(--space-2xs); }
  .menu-toggle { display: inline-flex; }
  .nav-edge {
    position: absolute;
    top: calc(100% + var(--space-2xs));
    left: 0;
    display: grid;
    width: 100%;
    padding: var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
    box-shadow: 0 var(--space-2xs) var(--space-lg) var(--color-shadow);
  }
  .nav-action { width: 100%; justify-content: flex-start; border-radius: var(--radius-input); }
  .site-main { padding-top: var(--space-3xl); }
  .page-hero { min-height: 34rem; padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }
  .hero-meta { flex-direction: column; gap: var(--space-3xs); }
  .hero-copy { font-size: var(--text-base); }
  .section { padding-block: var(--space-2xl); }
  .compact-section { padding-block: var(--space-xl); }
  .surface-section { margin-inline: calc(var(--page-gutter) * -1); }
  .ledger-band div { padding-inline: var(--space-xs); }
  .ledger-band strong { font-size: var(--text-md); }
  .decision-list a { gap: var(--space-sm); }
  .product-card, .method-note, .article-index, .evidence-card { padding: var(--space-md); }
  .fact-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fact-row dd { text-align: left; }
  .product-card footer { align-items: flex-start; flex-direction: column; }
  .numbered-sections > section { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-sm); }
  .choice-steps li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .action { width: 100%; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .footer-line { padding-block: var(--space-sm); }
  .footer-line nav { display: grid; grid-template-columns: minmax(0, 1fr); }
  .footer-line nav span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* October catalogue revision: actual products, working comparison, quieter chrome. */
.site-main { padding-top: var(--space-3xl); }
.page-hero { min-height: 0; padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.page-hero h1 { max-width: 23ch; font-size: clamp(var(--text-2xl), 4.8vw, 4.5rem); }
.hero-meta { margin-bottom: var(--space-md); }
.home-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--space-xl); align-items: center; }
.home-hero .hero-meta { grid-column: 1 / -1; margin-bottom: var(--space-xl); }
.home-hero h1 { max-width: 15ch; }
.home-hero .hero-copy { font-size: var(--text-base); }
.hero-catalogue { min-width: 0; padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); }
.hero-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); align-items: end; }
.hero-products a { min-width: 0; text-decoration: none; }
.hero-product-photo { margin: 0 0 var(--space-sm); height: clamp(10rem, 21vw, 19rem); }
.hero-product-photo img { width: 100%; height: 100%; object-fit: contain; }
.hero-products span { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.hero-products strong { display: block; font-family: var(--font-display); font-size: var(--text-sm); line-height: 1.3; }
.hero-catalogue > p { margin: var(--space-md) 0 0; padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); }
.publisher-strip { padding-block: var(--space-sm); margin-top: 0; }
.publisher-strip p { max-width: none; }
.section { padding-block: var(--space-xl); }
.section-head { margin-bottom: var(--space-lg); }
.section-head h2 { max-width: 24ch; font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl)); }
.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.product-card { padding: 0 0 var(--space-md); grid-template-rows: auto auto 1fr auto; border: 0; border-bottom: var(--rule-hair) solid var(--color-rule-strong); border-radius: 0; background: var(--color-paper); }
.surface-section .product-card { background: var(--color-paper-2); }
.product-card-media { border: 0; border-radius: var(--radius-card); aspect-ratio: 1; }
.product-card-media img { padding: var(--space-lg); }
.product-card h3 { margin-bottom: var(--space-xs); font-size: var(--text-md); }
.product-card header { min-height: 9rem; }
.product-price { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.product-card .fact-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-xs); }
.product-card .fact-row dd { font-size: var(--text-sm); }
.product-card footer { padding-top: 0; align-items: center; flex-wrap: wrap; flex-direction: row; }
.product-card.is-selected .product-card-media { outline: var(--rule-hair) solid var(--color-accent); outline-offset: 0; }
.product-card .action { padding-inline: var(--space-sm); }
.record-price { margin-block: var(--space-md) var(--space-2xs); font-family: var(--font-display); font-size: var(--text-3xl); font-variant-numeric: tabular-nums; }
.record-lede { margin-top: var(--space-lg); }
.js-only { display: none !important; }
.js .js-only { display: revert !important; }
.js .js-only[hidden] { display: none !important; }
.js .filter-bar, .js .choice-form { display: grid !important; }
.filter-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--space-md); align-items: end; }
.field-label { min-width: 0; }
.measure-fields { grid-column: 1 / -1; min-width: 0; margin: var(--space-xs) 0 0; padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-2); }
.measure-fields legend { padding-inline: var(--space-xs); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; }
.measure-fields legend span { margin-left: var(--space-xs); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
.measure-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.measure-fields input { width: 100%; min-width: 0; min-height: var(--control-min); padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-input); color: var(--color-ink); background: var(--color-paper); font: inherit; font-variant-numeric: tabular-nums; }
.measure-fields input[aria-invalid="true"] { border-color: var(--color-accent); outline: var(--rule-hair) solid var(--color-accent); }
.measure-fields input:disabled { opacity: 0.55; cursor: not-allowed; }
.measure-fields p { margin: var(--space-sm) 0 0; font-size: var(--text-xs); color: var(--color-muted); }
.measure-fields .measure-error { color: var(--color-ink); font-weight: 600; }
.measure-pending { margin-block: var(--space-lg); padding: var(--space-md); border-left: var(--space-2xs) solid var(--color-rule-strong); background: var(--color-paper-2); }
.measure-pending h3 { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.measure-pending p, .measure-pending ul { margin-bottom: 0; font-size: var(--text-sm); }
.measure-pending li { margin-top: var(--space-xs); }
.measure-pending li span { color: var(--color-muted); }
.reset-button { min-height: var(--control-min); padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); color: var(--color-ink); background: var(--color-paper); font-family: var(--font-display); font-size: var(--text-sm); white-space: nowrap; cursor: pointer; }
.reset-button:hover { border-color: var(--color-ink); }
.reset-button:active { background: var(--color-paper-3); }
.reset-button:disabled, select:disabled { opacity: 0.55; cursor: not-allowed; }
select:active { background: var(--color-paper-3); }
.action[aria-pressed="true"] { color: var(--color-accent-ink); background: var(--color-ink); border-color: var(--color-ink); }
.action:hover { box-shadow: none; }
.catalogue-caption { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); justify-content: space-between; padding-block: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.catalogue-caption p { margin: 0; }
.compare-tray { position: sticky; bottom: var(--space-sm); z-index: var(--z-sticky); padding: var(--space-sm) var(--space-md); margin-top: var(--space-lg); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: 0 var(--space-2xs) var(--space-md) var(--color-shadow-soft); }
.compare-tray p { margin-bottom: var(--space-xs); font-size: var(--text-sm); }
.compare-tray > div { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; }
.compare-tray .action { width: auto; }
[data-compare-message] { min-height: 1lh; margin-top: var(--space-sm); }
#naast-elkaar { scroll-margin-top: var(--space-3xl); }
.compare-region { max-width: 100%; overflow: auto; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); margin-bottom: var(--space-md); }
.compare-tools { margin-bottom: var(--space-lg); }
.difference-toggle { display: flex; align-items: center; gap: var(--space-sm); width: fit-content; min-height: var(--control-min); cursor: pointer; font-weight: 600; }
.difference-toggle input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-accent); }
.difference-toggle span { white-space: nowrap; }
.compare-tools p { max-width: var(--measure); margin: var(--space-xs) 0 0; }
.compare-tools #difference-help { color: var(--color-muted); font-size: var(--text-sm); }
.compare-view-count { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.compare-overview { font-weight: 500; }
.compare-table { width: 100%; border-spacing: 0; table-layout: auto; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.compare-table caption { padding: var(--space-sm); text-align: left; color: var(--color-muted); background: var(--color-paper-2); }
.compare-table th, .compare-table td { min-width: 14rem; max-width: 22rem; padding: var(--space-sm); vertical-align: top; text-align: left; border-bottom: var(--rule-hair) solid var(--color-rule); border-right: var(--rule-hair) solid var(--color-rule); overflow-wrap: anywhere; }
.compare-table th { font-family: var(--font-display); font-weight: 600; }
.compare-table thead th { background: var(--color-paper-3); }
.compare-table tr > th:first-child { position: sticky; left: 0; min-width: 9rem; width: 10rem; background: var(--color-paper-2); }
.compare-table tbody td { background: var(--color-paper); }
.mounting-overview .compare-table th, .mounting-overview .compare-table td { min-width: 10rem; }
.mounting-overview .compare-table tr > :last-child { min-width: 16rem; }
.timer-overview .compare-table tr > :first-child { min-width: 12rem; width: 30%; }
.timer-overview .compare-table tr > :nth-child(2) { min-width: 17rem; }
.timer-overview .compare-table tr > :last-child { min-width: 9rem; width: 20%; }
.mounting-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.mounting-actions .action { max-width: 100%; white-space: normal; }
#meegeleverde-montage, #timer-per-model, .mounting-overview table, .measure-pending { scroll-margin-top: var(--space-3xl); }
.table-scroll-hint { display: none; }
.choice-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--space-2xl); }
.choice-form { display: grid; gap: var(--space-md); scroll-margin-top: var(--space-3xl); }
.choice-form .reset-button { justify-self: start; }
.choice-explanation { align-self: center; padding-block: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule-strong); }
.choice-explanation h2 { font-size: var(--text-xl); }
.choice-explanation p { color: var(--color-ink-2); }
.choice-explanation p:last-child { margin-bottom: 0; font-size: var(--text-sm); color: var(--color-muted); }
.breadcrumbs { grid-column: 1 / -1; margin-bottom: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); padding: 0; margin: 0; list-style: none; }
.breadcrumbs li + li::before { content: '/'; margin-right: var(--space-xs); color: var(--color-muted); }
.breadcrumbs a { color: inherit; }
.article-byline { max-width: 65ch; margin-block: var(--space-md) 0; font-size: var(--text-xs); color: var(--color-muted); }
.article-byline a { color: inherit; }
.guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); }
.guide-list article { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-strong); }
.guide-list h3 { margin-bottom: var(--space-sm); font-size: var(--text-lg); }
.guide-list h3 a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); text-decoration: none; }
.guide-list h3 a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.guide-list p { max-width: 62ch; margin: 0; color: var(--color-ink-2); }
.direct-answer { border-bottom: var(--rule-hair) solid var(--color-rule); }
.direct-answer h2 { font-size: var(--text-lg); }
.direct-answer p { max-width: 72ch; font-size: var(--text-lg); line-height: 1.6; margin-bottom: 0; }
/* Catalogue refinement · F6: equal product cards, dated prices, genuine brand assets; no motion. */
.guide-product-strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.guide-product { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-md); min-width: 0; padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); color: inherit; text-decoration: none; }
.guide-product figure { display: block; min-width: 0; height: 10rem; margin: 0; padding: var(--space-xs); border-radius: var(--radius-card); background: var(--color-paper-2); }
.guide-product figure img { height: 100%; width: 100%; object-fit: contain; }
.guide-product-strip { scroll-margin-top: 6rem; }
.guide-product-details { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.guide-product-details .brand-lockup { margin-bottom: var(--space-sm); }
.guide-product h3 { margin: 0 0 var(--space-xs); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.35; }
.guide-product-price { margin: 0 0 var(--space-sm); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.guide-product-action { display: inline-flex; gap: var(--space-xs); margin-top: auto; font-size: var(--text-sm); white-space: nowrap; text-decoration: underline; text-underline-offset: 0.2em; }
.guide-product:hover .guide-product-action, .guide-product:focus-visible .guide-product-action { text-decoration-thickness: 2px; }
.guide-price-date { margin: var(--space-sm) 0 var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); }
@media (min-width: 40rem) {
  .guide-product-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-products-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-product { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .guide-product figure { height: 15rem; padding: var(--space-lg); }
  .guide-product-details .brand-lockup { margin-bottom: var(--space-md); }
}
.article-index a:not(.action) { color: inherit; }
.section > .text-link { max-width: 100%; white-space: normal; }
.numbered-sections section[id] { scroll-margin-top: var(--space-3xl); }
.numbered-sections > section[id] { display: block; }

.purchase-checklist ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.purchase-checklist li { display: flex; min-width: 0; gap: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.purchase-checklist h3 { margin: 0 0 var(--space-xs); font-size: var(--text-md); }
.purchase-checklist p { margin: 0; color: var(--color-ink-2); }
.policy-jumps { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
#voorwaarden-per-merk { scroll-margin-top: 7rem; }
.policy-jumps a { display: inline-flex; min-height: var(--control-min); align-items: center; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--text-sm); text-decoration: none; }
.policy-jumps a:hover { background: var(--color-paper-2); }
.policy-card { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); gap: var(--space-2xl); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule-strong); scroll-margin-top: 7rem; }
.policy-card > header, .policy-detail { min-width: 0; }
.policy-card h3 { margin-block: var(--space-sm); font-size: var(--text-lg); }
.policy-scope, .policy-models, .policy-sources { font-size: var(--text-sm); }
.policy-scope { color: var(--color-ink-2); }
.policy-models, .policy-sources { display: grid; gap: var(--space-xs); padding: 0; list-style: none; }
.policy-models a, .policy-sources a { overflow-wrap: anywhere; }
.policy-detail dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin: 0; }
.policy-detail dt { margin-bottom: var(--space-xs); font-family: var(--font-display); font-weight: 650; }
.policy-detail dd { margin: 0; color: var(--color-ink-2); }
.policy-detail footer { margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.policy-detail footer p { margin: 0 0 var(--space-xs); }
.policy-questions { margin-top: var(--space-lg); padding: var(--space-sm) var(--space-md); border-left: var(--rule-hair) solid var(--color-accent); background: var(--color-paper-2); }
.policy-questions summary { cursor: pointer; font-weight: 650; }
.policy-questions p { margin: var(--space-sm) 0 0; color: var(--color-ink-2); }
.policy-next { margin: var(--space-lg) 0 0; font-size: var(--text-sm); }
.policy-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
@media (max-width: 1023px) {
  .policy-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}
@media (max-width: 767px) {
  .purchase-checklist ol, .policy-card, .policy-detail dl, .policy-sources { grid-template-columns: minmax(0, 1fr); }
  .policy-card { gap: var(--space-lg); }
  .policy-card > header { padding-bottom: var(--space-sm); }
  .policy-detail dl { gap: var(--space-md); }
}
.cost-calculator { scroll-margin-top: var(--space-3xl); }
.cost-calculator { padding: var(--space-lg); margin-bottom: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.js .cost-calculator { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); align-items: end; }
.cost-model, .cost-output { grid-column: 1 / -1; }
.cost-calculator input { width: 100%; min-width: 0; min-height: var(--control-min); padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font: inherit; }
.cost-calculator .reset-button { justify-self: start; grid-column: 1 / -1; }
.cost-output { padding-block: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule-strong); }
.cost-output output { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.cost-output output[data-valid="false"] { font-size: var(--text-md); }
.cost-output p { margin: var(--space-xs) 0 0; color: var(--color-muted); }
.cost-section .prose { margin-bottom: var(--space-lg); }
@media (max-width: 48rem) {
  .js .cost-calculator { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .js .cost-calculator { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); }
  .table-scroll-hint { display: block; margin-bottom: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
  .measure-inputs { grid-template-columns: minmax(0, 1fr); }
  .direct-answer p { font-size: var(--text-md); }
  .cost-output output { font-size: var(--text-xl); }
}
/* Native disclosure works before, without, or after failed JavaScript. */
@media (max-width: 40rem) {
  .mobile-menu { display: block; }
  .desktop-menu { display: none; }
}
@media (max-width: 66rem) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero { column-gap: var(--space-md); }
  .home-hero h1 { font-size: clamp(var(--text-2xl), 5vw, 4rem); }
  .hero-products { gap: var(--space-2xs); }
  .featured-grid > :last-child { grid-column: 1 / -1; max-width: 34rem; }
}
@media (max-width: 48rem) {
  .home-hero { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .home-hero .hero-meta { margin-bottom: 0; }
  .hero-catalogue { padding: var(--space-sm); }
  .hero-product-photo { height: clamp(8rem, 25vw, 12rem); }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-workspace { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}
@media (max-width: 40rem) {
  .site-main { padding-top: var(--space-3xl); }
  .page-hero { padding-top: var(--space-md); padding-bottom: var(--space-xl); }
  .page-hero h1, .home-hero h1 { font-size: var(--text-2xl); }
  .hero-meta { font-size: var(--text-xs); }
  .section { padding-block: var(--space-xl); }
  .product-grid { grid-template-columns: minmax(0, 1fr); }
  .product-card header { min-height: 0; }
  .product-card .fact-row dd { text-align: right; }
  .product-card footer .action { width: auto; }
  .featured-grid > :last-child { grid-column: auto; }
  .filter-bar { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .filter-bar .reset-button { justify-self: start; }
  .compare-tray { bottom: var(--space-2xs); padding: var(--space-sm); }
  .compare-table th, .compare-table td { min-width: 11rem; }
  .compare-table tr > th:first-child { min-width: 8rem; width: 8rem; }
  .timer-overview .compare-table tr > :first-child { min-width: 8rem; width: 8rem; }
  .timer-overview .compare-table tr > :nth-child(2) { min-width: 12rem; }
  .timer-overview .compare-table tr > :last-child { min-width: 8rem; }
}