/* GunningRadar site B. Built on css/tokens.css (DESIGN-SYSTEM.md). Round 1 rebuild, WP1.
   The page is complete without JS; js/site.js only adds the map filter and tooltips. */

/* legacy aliases for inline styles in mkb.html / bot.html */
:root { --ink: var(--gr-ink); --paper: var(--gr-paper); --paper-hi: var(--gr-surface); --rule: var(--gr-rule);
  --accent: var(--gr-accent); --f-display: var(--gr-f-display); --f-mono: var(--gr-f-mono); }

.wrap { max-width: var(--gr-max); margin: 0 auto; padding: 0 var(--gr-pad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--gr-ink); color: #fff; padding: 8px 16px; z-index: 50; }
.skip:focus { top: 12px; color: #fff; }
.mono { font-family: var(--gr-f-mono); font-size: .8125rem; letter-spacing: .01em; }
.small { font-size: var(--gr-fs-small); }
.nowrap { white-space: nowrap; }
.kicker { font: 400 var(--gr-fs-meta)/1.4 var(--gr-f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gr-ink-2); margin: 0 0 12px; }
.lede { font-size: var(--gr-fs-lede); line-height: 1.5; color: var(--gr-ink-2); }
.h2 { font-size: var(--gr-fs-h2); margin: 0 0 16px; }
.n, .is-num, .bar__n, .cov__n { font-variant-numeric: lining-nums tabular-nums; }
td.n, th.n { text-align: right; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; background: var(--gr-ink); color: #fff;
  border-radius: var(--gr-r-2); font-weight: 600; text-decoration: none; }
.btn:hover { color: #fff; background: #2B2B2B; }
.btn--block { display: flex; justify-content: center; width: 100%; }
.brandlogo { height: 28px; width: auto; }

/* ---------------------------------------------------------------- header */
.gr-nav { position: sticky; top: 0; z-index: 20; background: var(--gr-paper); border-bottom: var(--gr-hair); }
.gr-nav__logo { height: 28px; width: auto; display: block; }
@media (max-width: 900px) { .gr-hide-sm { display: none; } }

/* ---------------------------------------------------------------- hero */
.hero { padding: 56px 0 64px; }
.hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.hero__h1 { margin: 0; max-width: 18ch; font-size: clamp(2.25rem, 2.6vw + 1.3rem, 3.5rem); line-height: 1.06; text-wrap: balance; }
.hero__side .gr-lede { margin-bottom: 20px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__cap { caption-side: top; text-align: left; padding: 12px 16px; border-bottom: var(--gr-hair); background: var(--gr-sunken); }
.hero__cap .gr-kicker { margin: 0; }
.hero__table .col-src a { font: 400 var(--gr-fs-meta)/1 var(--gr-f-mono); text-decoration: none; color: var(--gr-ink-3); white-space: nowrap; }
.hero__table .col-src a:hover { color: var(--gr-accent-ink); }
.gr-cell-main--plain { font-weight: 400; }
/* one line: source, countries, dates, value band, link to the method note in the footer */
.hero__src { display: block; margin: 0; padding: 12px 16px; border-top: var(--gr-hair); max-width: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__src a { color: var(--gr-ink-2); }
.kpis { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpis .gr-kpi p { margin: 0; }
.hero__more { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; margin-top: 48px; padding-top: 32px; border-top: var(--gr-hair); }
.hero__dek { font-size: var(--gr-fs-lede); line-height: 1.5; }
.briefs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.brief { background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); padding: var(--card-pad); }
.brief .kicker { margin-bottom: 8px; }
.brief__h { font-size: 1.125rem; margin: 0 0 8px; }
.brief__p { font-size: var(--gr-fs-small); color: var(--gr-ink-2); }
.brief__meta { font: 400 var(--gr-fs-meta)/1.5 var(--gr-f-mono); color: var(--gr-ink-3); margin: 0; }
@media (max-width: 1000px) {
  .hero__grid, .hero__more { grid-template-columns: 1fr; gap: 20px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .briefs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { padding: 32px 0 40px; }
  .hero__h1 { font-size: 2.125rem; }
  .gr-table .col-buyer, .gr-table .col-start, .gr-table .col-end, .gr-table .col-src { display: none; }
  .gr-source { font-size: .6875rem; }
  .kpis { gap: 12px; }
}

/* ---------------------------------------------------------------- sections */
/* one section spacing token for every block below the hero */
:root { --sec: var(--gr-s-9); --card-pad: 20px; }
@media (max-width: 900px) { :root { --sec: var(--gr-s-8); } }
main > section:not(.hero) { padding: var(--sec) 0; border-top: var(--gr-hair); }
.sechead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.sechead__letter, .sechead__page { display: none; }
.sechead .kicker { margin: 0; }

/* ledger: horizontal list of award cards, native scroll */
.ledger__intro { max-width: var(--gr-max-text); margin-bottom: 24px; }
/* starts on the content edge, snaps per card, fades out at the right so a cut card reads as "more" */
.ledger__viewport { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px var(--gr-pad) 16px max(var(--gr-pad), calc((100% - var(--gr-max)) / 2 + var(--gr-pad)));
  scroll-padding-inline-start: max(var(--gr-pad), calc((100% - var(--gr-max)) / 2 + var(--gr-pad)));
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); }
.ledger__track::after { content: ""; width: 56px; }
.ledger__viewport:focus-visible { outline: 2px solid var(--gr-accent); }
.ledger__track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 272px; gap: 16px; }
.clip { scroll-snap-align: start; background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); padding: var(--card-pad); }
.clip article { display: flex; flex-direction: column; height: 100%; }
.clip__head { display: flex; justify-content: space-between; gap: 8px; }
.clip__no { font: 400 var(--gr-fs-meta)/1.4 var(--gr-f-mono); color: var(--gr-ink-3); white-space: nowrap; }
.clip__winner { font: 600 1rem/1.35 var(--gr-f-body); margin: 4px 0 4px; }
.clip__buyer { font-size: var(--gr-fs-small); color: var(--gr-ink-2); margin: 0 0 12px; }
.clip__val { font: 600 1.75rem/1.05 var(--gr-f-body); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; margin: auto 0 8px; }
.clip__eur, .clip__unit { font-size: 1rem; margin: 0 4px; color: var(--gr-ink-2); }
.clip__note { font-size: var(--gr-fs-meta); color: var(--gr-ink-3); margin: 0 0 8px; }
.clip__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; font-size: var(--gr-fs-small); }
.clip__facts dt { font-size: var(--gr-fs-meta); color: var(--gr-ink-3); }
.clip__facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.clip__foot { display: flex; justify-content: space-between; gap: 8px; border-top: var(--gr-hair); padding-top: 8px;
  font: 400 var(--gr-fs-meta)/1.5 var(--gr-f-mono); color: var(--gr-ink-3); }
.clip--end { display: flex; align-items: center; background: transparent; border-style: dashed; }
.clip__endtxt { font-family: var(--gr-f-display); font-size: 1.25rem; margin: 0; }
.ledger__progress { display: none; }

/* story: one real award, four steps (static) */
.story__lede { max-width: var(--gr-max-text); }
.story__stage { display: none; }
.story__steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.step { border-top: var(--gr-line); padding-top: 16px; }
.step__no { color: var(--gr-ink-3); margin: 0 0 8px; }
.step__h { margin: 0 0 8px; }
.step__aside { font-size: var(--gr-fs-small); color: var(--gr-ink-2); border-left: 2px solid var(--gr-accent); padding-left: 12px; }
.fig { margin: 16px 0 0; background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); padding: var(--card-pad); }
.fig__cap { color: var(--gr-ink-3); margin: 0 0 12px; font-size: var(--gr-fs-small); }
.notice__title { font-weight: 600; margin: 0 0 8px; }
.notice__dl { margin: 0 0 8px; }
.notice__dl div { display: grid; grid-template-columns: 12rem 1fr; gap: 8px; padding: 4px 0; border-top: var(--gr-hair); }
.notice__dl dd { margin: 0; }
.notice__dl .hl dd { background: var(--gr-accent-tint); padding: 0 4px; }
.notice__src { margin: 0; }
.calc__row { display: grid; grid-template-columns: 9rem 1fr auto; gap: 8px; padding: 6px 0; border-top: var(--gr-hair); font-size: var(--gr-fs-small); }
.calc__r { text-align: right; font-variant-numeric: tabular-nums; }
.calc__row--res { font-weight: 600; }
.mail__bar { display: flex; justify-content: space-between; color: var(--gr-ink-3); border-bottom: var(--gr-hair); padding-bottom: 8px; margin-bottom: 8px; }
.mail__winner { font-weight: 600; margin: 0; }
.mail__meta { font-size: var(--gr-fs-small); color: var(--gr-ink-2); margin: 0 0 8px; }
.mail__tag { font: 400 var(--gr-fs-meta)/1 var(--gr-f-mono); background: var(--gr-sunken); padding: 2px 6px; border-radius: var(--gr-r-1); }
.mail__hook { font-family: var(--gr-f-display); margin: 0 0 8px; }
.mail__link { margin: 0; color: var(--gr-ink-3); }
.csv { margin: 0; overflow-x: auto; font-size: .75rem; line-height: 1.6; }
.csv span { display: block; white-space: pre; }
.csv__h { color: var(--gr-ink-3); }
.csv mark { background: var(--gr-accent-tint); }
@media (max-width: 900px) { .story__steps { grid-template-columns: 1fr; } .notice__dl div { grid-template-columns: 1fr; } }

/* map */
.map__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 40px; align-items: start; }
.filters { display: none; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.js .filters { display: flex; }
.chip { font: 400 var(--gr-fs-small)/1 var(--gr-f-body); min-height: 36px; padding: 0 12px; border: 1px solid var(--gr-rule-strong);
  background: var(--gr-surface); border-radius: var(--gr-r-pill); cursor: pointer; color: var(--gr-ink); }
.chip span { font-variant-numeric: tabular-nums; color: var(--gr-ink-3); margin-left: 4px; }
.chip[aria-pressed="true"] { background: var(--gr-ink); color: #fff; border-color: var(--gr-ink); }
.chip[aria-pressed="true"] span { color: #fff; }
.map__cap { font-size: var(--gr-fs-small); color: var(--gr-ink-2); }
.map__fig { margin: 0; background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); padding: var(--card-pad); position: relative; }
.map__svg { width: 100%; height: auto; display: block; aspect-ratio: auto; }
.grat line { stroke: var(--gr-rule); stroke-width: .5; }
.grat text, .city text { font: 400 9px var(--gr-f-mono); fill: var(--gr-ink-3); }
.land { fill: var(--gr-sunken); stroke: var(--gr-rule-strong); stroke-width: .7; }
.city circle { fill: var(--gr-ink-3); }
.dot circle { fill: var(--gr-accent); fill-opacity: .75; stroke: var(--gr-ink); stroke-width: .6; }
.dot--nv circle { fill: var(--gr-surface); }
.dot.is-off { opacity: .1; }
.dot:focus-visible circle, .dot:hover circle { stroke-width: 2; fill-opacity: 1; }
.tip { position: absolute; pointer-events: none; background: var(--gr-ink); color: #fff; padding: 8px 12px; border-radius: var(--gr-r-2);
  font-size: var(--gr-fs-small); max-width: 18rem; z-index: 5; }
.tip[hidden] { display: none; }
.legend, .map__hint { font-size: var(--gr-fs-meta); color: var(--gr-ink-3); }
@media (max-width: 900px) { .map__grid { grid-template-columns: 1fr; } }

/* who */
.who__lede { max-width: var(--gr-max-text); }
.who__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.col { border-top: var(--gr-line); padding-top: 16px; }
.col__h { margin: 0 0 8px; }
.pull { margin: 16px 0 0; background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); padding: var(--card-pad); }
.pull p { margin: 0 0 8px; font-size: var(--gr-fs-small); }
.pull footer { font-size: var(--gr-fs-meta); color: var(--gr-ink-3); }
@media (max-width: 900px) { .who__cols { grid-template-columns: 1fr; } }

/* numbers */
.nums__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; }
.nums__chart, .nums__de, .nums__cov { background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); padding: var(--card-pad); }
.nums__chart { grid-row: span 2; }
.nums__chart .lede span { display: block; font: 400 var(--gr-fs-meta)/1.5 var(--gr-f-mono); color: var(--gr-ink-3); margin-top: 8px; }
.bars { width: 100%; border-collapse: collapse; font-size: var(--gr-fs-small); }
.bars th { text-align: left; font-weight: 400; padding: 6px 12px 6px 0; width: 40%; }
.bars td { padding: 6px 0; display: flex; align-items: center; gap: 8px; }
.bars tr { border-bottom: var(--gr-hair); }
.bar { display: block; height: 10px; width: var(--w); background: var(--gr-dv-1); border-radius: 0 var(--gr-r-1) var(--gr-r-1) 0; }
.bar__n { min-width: 3ch; text-align: right; }
.bars tfoot th, .bars tfoot td { font-weight: 600; border-top: var(--gr-line); }
.bars tfoot td { justify-content: flex-end; }
.de__h, .cov__h { font: 600 1rem/1.4 var(--gr-f-body); margin: 0 0 8px; }
.de__n { font: 600 var(--gr-fs-kpi)/1.05 var(--gr-f-body); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; margin: 0 0 8px; }
.cov table { width: 100%; border-collapse: collapse; font-size: var(--gr-fs-small); }
.cov th { text-align: left; font-weight: 400; padding: 6px 12px 6px 0; }
.cov td { width: 40%; padding: 6px 0; }
.cov tr { border-bottom: var(--gr-hair); }
.cov__n { display: inline-block; min-width: 4ch; text-align: right; margin-right: 8px; }
.cov__bar { display: inline-block; vertical-align: middle; height: 6px; width: calc(100% - 5ch); background: var(--gr-sunken); position: relative; }
.cov__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 1%); background: var(--gr-dv-3); }
.cov__note { font-size: var(--gr-fs-small); color: var(--gr-ink-2); margin-top: 12px; }
@media (max-width: 900px) { .nums__grid { grid-template-columns: 1fr; } .nums__chart { grid-row: auto; } }

/* pricing */
.price__lede { max-width: var(--gr-max-text); }
.coupons { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); gap: 24px; margin: 32px 0 24px; }
.coupon { background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); }
.coupon--pro { border: var(--gr-line); }
.coupon__cut { display: none; }
.coupon__in { padding: 24px; display: flex; flex-direction: column; height: 100%; }
.coupon__head { display: none; }
.coupon__name { margin: 0 0 8px; }
.coupon__price { font: 600 var(--gr-fs-price, 2.75rem)/1 var(--gr-f-body); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; margin: 0 0 4px; }
.coupon__eur { font-size: 1.75rem; vertical-align: .6em; margin-right: 2px; }
.coupon__per { font: 400 var(--gr-fs-small)/1 var(--gr-f-body); color: var(--gr-ink-3); margin-left: 8px; }
.coupon__year { color: var(--gr-ink-3); margin: 0 0 16px; font-size: var(--gr-fs-small); }
.coupon__list { margin: 0 0 24px; padding: 0; list-style: none; font-size: var(--gr-fs-small); flex: 1; }
.coupon__list li { padding: 8px 0 8px 22px; border-top: var(--gr-hair); position: relative; }
.coupon__list li::before { content: "\2713"; position: absolute; left: 0; color: var(--gr-pos); }
.price__note { color: var(--gr-ink-3); max-width: 60rem; font-size: var(--gr-fs-small); }
@media (max-width: 900px) { .coupons { grid-template-columns: 1fr; } }

/* faq */
.faq__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 40px; }
.faq details { border-top: var(--gr-hair); }
.faq details:last-child { border-bottom: var(--gr-hair); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style-position: outside; }
.faq__a { padding: 0 0 16px; color: var(--gr-ink-2); }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; gap: 8px; } }

/* footer / colofon */
.colofon { padding: 56px 0 32px; }
.colofon__top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; padding-bottom: 32px; border-bottom: var(--gr-hair); }
.colofon__brand img { height: 32px; width: auto; margin-bottom: 12px; }
.colofon__h { font-size: var(--gr-fs-h2); margin: 0 0 16px; }
.colofon__h em { font-style: normal; color: var(--gr-ink-2); }
.colofon__cols { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; padding: 32px 0; font-size: var(--gr-fs-small); }
.colofon__cols .kicker { font-size: var(--gr-fs-meta); }
.bronnen ol { padding-left: 20px; margin: 0; }
.bronnen li { margin-bottom: 8px; color: var(--gr-ink-2); }
.colofon__credit { margin: 0 0 12px; max-width: none; }
/* the footer CTA keeps ink on orange (footer links are ink-2, which fails contrast on the accent) */
.gr-footer .gr-btn--accent, .gr-footer .gr-btn--accent:hover { color: var(--gr-ink); }
.colofon__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: var(--gr-hair); padding-top: 16px; max-width: none; }
@media (max-width: 900px) { .colofon__top, .colofon__cols { grid-template-columns: 1fr; } }

/* mkb + bot pages */
.mkb { padding: 48px 0 72px; }
.mkb__in { max-width: 48rem; }
.mkb h1 { font-size: var(--gr-fs-h1); }
.mkb h2 { margin-top: 40px; }
.mkb__tablewrap { overflow-x: auto; background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); }
.mkb table { width: 100%; border-collapse: collapse; font-size: var(--gr-fs-data); }
.mkb th, .mkb td { padding: 10px 12px; border-bottom: var(--gr-hair); text-align: left; }
.mkb td.n, .mkb th.n { text-align: right; font-variant-numeric: tabular-nums; }
.mkb thead th { font: 400 var(--gr-fs-meta)/1.4 var(--gr-f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gr-ink-2); background: var(--gr-sunken); }
.mkb__big { font: 500 var(--gr-fs-kpi)/1 var(--gr-f-display); font-variant-numeric: lining-nums tabular-nums; }
.mkb__note { font-size: var(--gr-fs-small); color: var(--gr-ink-3); }
.tip { transform: translate(-50%, calc(-100% - 10px)); }
.tip b, .tip span { display: block; }
.tip .tm { font: 400 var(--gr-fs-meta)/1.5 var(--gr-f-mono); opacity: .8; }
.tip .tv { font-variant-numeric: tabular-nums; font-weight: 600; }
.gr-footer__grid img { height: 32px; width: auto; margin-bottom: 12px; }
/* phone: the hero table fits 390 px (winner, value, months), no sideways scroll */
@media (max-width: 640px) {
  .hero__table { table-layout: auto; width: 100%; }
  .hero__table th, .hero__table td { padding-left: 10px; padding-right: 10px; }
  .hero__table .gr-months__bar { display: none; }
  .hero__table td.is-num, .hero__table th.is-num { white-space: nowrap; }
  .hero__cap { padding: 10px; }
  .hero__cap .gr-kicker { letter-spacing: .08em; }
  /* round 2: table above the fold. Short lede (first sentence), 18px / 1.5, two equal full-width CTAs */
  .hero { padding-top: 24px; }
  .hero__grid { margin-bottom: 24px; gap: 16px; }
  .hero__side .gr-lede { font-size: 1.125rem; line-height: 1.5; margin-bottom: 16px; }
  .hero__lede-x, .hero__src-x { display: none; }
  .hero__cta { flex-direction: column; gap: 10px; }
  .hero__cta .gr-btn { width: 100%; min-height: 48px; }
  .gr-kicker, .kicker { letter-spacing: .08em; }
}
/* round 2: grid children may shrink, so the CSV line scrolls inside its box instead of widening the page */
.story__steps > li, .who__cols > *, .nums__grid > *, .map__grid > *, .faq__grid > * { min-width: 0; }
.ledger__pin { max-width: 100%; overflow: hidden; }
/* positioned, so the sr-only spans inside off-screen cards stay inside the scroller (they widened the page to 5.7k px) */
.ledger__viewport { position: relative; }

/* ---------------------------------------------------------------- polish round 3, lane A */
/* One primary CTA colour: orange fill for main buttons only. No ink-filled buttons on site B. */
.gr-btn:not(.gr-btn--ghost):not(.gr-btn--outline) { background: var(--gr-accent); border-color: var(--gr-accent); color: var(--gr-ink); }
.gr-btn:not(.gr-btn--ghost):not(.gr-btn--outline):hover { background: #F04A10; border-color: #F04A10; color: var(--gr-ink); }
.gr-btn--outline { background: transparent; border-color: var(--gr-ink); color: var(--gr-ink); }
.gr-btn--outline:hover { background: var(--gr-surface); border-color: var(--gr-ink); color: var(--gr-ink); }
/* header: logo 20px, Inloggen as a plain link on every width (also phone) */
.gr-nav__logo, .gr-nav .gr-nav__logo { height: 20px; width: auto; }
.gr-nav__login { font-size: .9375rem; font-weight: 600; color: var(--gr-ink); text-decoration: none; padding: 8px 4px; }
.gr-nav__login:hover { text-decoration: underline; }
/* hero lede: ~17px, max 52ch, top of its first line on the H1 cap height (kicker block + H1 half-leading/ascender gap) */
.hero__grid { align-items: start; }
.hero__side { padding-top: 33px; } /* measured at 1280 and 1440: lede cap top = H1 cap top */
.hero__side .gr-lede { font-size: 1.0625rem; line-height: 1.5; max-width: 52ch; }
/* phone row line 3: buyer · TED (the buyer and source columns are hidden on phone) */
.hero__table .hero__m { display: none; }
@media (max-width: 1000px) { .hero__side { padding-top: 0; } }
@media (max-width: 640px) {
  .hero__table .hero__m { display: block; margin-top: 2px; }
  .hero__m a { font: 400 var(--gr-fs-meta)/1 var(--gr-f-mono); color: var(--gr-ink-3); text-decoration: none; white-space: nowrap; }
  .hero__side .gr-lede { font-size: 1.0625rem; }
  .hero__cap .gr-kicker { letter-spacing: .04em; }
  .gr-nav__cta { gap: 12px; }
}
/* filter chips: the pressed state is a selection, not a second filled-button colour */
.chip[aria-pressed="true"] { background: var(--gr-accent-tint); color: var(--gr-ink); border-color: var(--gr-ink); }

/* ---------------------------------------------------------------- polish round 4, lane A */
/* weekfeed knipsels: 4-up grid from 1000px, no clipped card, equal heights, value on a shared baseline */
@media (min-width: 1000px) {
  .ledger__viewport { overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none;
    max-width: var(--gr-max); margin: 0 auto; padding: 0 var(--gr-pad); }
  .ledger__track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ledger__track::after, .clip--end { display: none; }
}
.clip article { display: flex; flex-direction: column; height: 100%; }
.clip__val { margin-top: auto; padding-top: 12px; }
.clip__note { min-height: 0; }
/* map legend: same marks as the map (filled dot = value, open ring = no value) */
.legend circle { fill: var(--gr-accent); fill-opacity: .75; stroke: var(--gr-ink); stroke-width: .6; }
.legend circle.nv { fill: none; stroke: var(--gr-ink); stroke-width: 1.2; }
.legend text { font: 400 12px var(--gr-f-mono); fill: var(--gr-ink-3); }
/* active chip: the count is ink, not orange on peach */
.chip[aria-pressed="true"] span { color: var(--gr-ink); font-weight: 600; }
/* city labels: >= 10px on screen (map is ~740px wide for a 1000-unit viewBox at 1440) */
.city text { font-size: 14px; fill: var(--gr-ink-2); }
.city circle { r: 3; }
/* phone stat tiles: 2x2, one source line under the grid */
.kpis__src { display: none; }
@media (max-width: 640px) {
  .kpis .gr-kpi__source { display: none; }
  .kpis__src { display: block; margin: 8px 0 0; }
  .kpis .gr-kpi { padding: 14px; }
  .city--minor { display: none; }
  .city text { font-size: 30px; }
  .city circle { r: 5; }
}
/* phone hero table: a 2-line card per row. Line 1 winner (bold); line 2 value · nog X mnd · TED */
@media (max-width: 640px) {
  .hero__table thead, .hero__table .col-val, .hero__table .col-nog, .hero__table .hero__t { display: none; }
  .hero__table td { padding-top: 10px; padding-bottom: 10px; }
  .hero__table .gr-cell-main { font-weight: 600; }
  .hero__table .hero__m { color: var(--gr-ink-2); font-size: var(--gr-fs-small); }
  .hero__mv { font-weight: 600; color: var(--gr-ink); font-variant-numeric: tabular-nums; }
}
/* stacked label/value rows on phone: rekensom and the mkb table, never wider than 390px */
@media (max-width: 640px) {
  .calc__row { grid-template-columns: 1fr auto; grid-template-areas: "k r" "eq eq"; row-gap: 2px; }
  .calc__k { grid-area: k; } .calc__r { grid-area: r; } .calc__eq { grid-area: eq; color: var(--gr-ink-3); overflow-wrap: anywhere; }
  .gr-stack { overflow: visible; background: transparent; border: 0; }
  .gr-stack table, .gr-stack tbody, .gr-stack tfoot, .gr-stack tr, .gr-stack th, .gr-stack td { display: block; width: 100%; }
  .gr-stack thead { display: none; }
  .gr-stack caption { display: block; }
  .gr-stack tr { background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); padding: 10px 12px; margin: 0 0 10px; }
  .mkb .gr-stack th, .mkb .gr-stack td { border: 0; padding: 3px 0; }
  .mkb .gr-stack th[scope="row"] { font-weight: 600; padding-bottom: 6px; }
  .mkb .gr-stack td.n { display: flex; justify-content: space-between; gap: 12px; text-align: right; padding-right: 0; }
  .gr-stack td::before { content: attr(data-label); text-align: left; color: var(--gr-ink-3); font-size: var(--gr-fs-small); font-weight: 400; }
}
/* r4: the value sits on one baseline in every row: everything under it is one line high */
.clip__note { margin: 0 0 4px; }
.clip__facts dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip__facts > div { min-width: 0; }
.clip__eur, .clip__unit { margin: 0; }

/* ---------------------------------------------------------------- polish round 5, lane A */
/* stat tiles: the label box is always 2 lines high, so all four numbers sit on one baseline (desk + phone) */
.kpis .gr-kpi__label { line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* hero kicker: the window is the title; on phone only the title shows (one line, no dangling separator) */
@media (max-width: 640px) { .hero__cap-x { display: none; } }
/* knipsels: the amount sits right under the buyer; spare height goes above the footer, not above the amount */
.clip__winner, .clip__buyer { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clip__buyer { margin-bottom: 8px; }
.clip__val { margin-top: 0; padding-top: 0; }
.clip__foot { margin-top: auto; }
.clip__facts { grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; }
.clip__facts dd { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; hyphens: manual; }
/* TED ids never break inside the id */
.clip__foot a, .brief__meta a, .pull footer a, .hero__m a { white-space: nowrap; }
/* phone: the 4-step example is one swipeable row (every step stays in the HTML, so the page is complete without JS) */
@media (max-width: 640px) {
  .story__steps { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 8px; margin-top: 20px; }
  .story__steps > * { scroll-snap-align: start; min-width: 0; }
  .story__steps .fig { margin-top: 12px; }
}

/* ---------------------------------------------------------------- polish round 6, lane A */
/* R6-1: ONE container on site B. Every section uses the app's .gr-container: max 1360 incl. padding,
   gutter --gr-pad, so the content left edge is 88 px at 1440 on every section and page. */
:root { --gr-max: var(--gr-max-wide); }
/* R6-2: one orange fill per page (the hero CTA). Every other button, toggle and chip is the SAME outline:
   1px ink border, radius --gr-r-2, 36 px (small) or 44 px high. A pressed chip adds a tint, not a fill. */
.gr-btn--outline, .gr-btn--ghost, .chip { border: 1px solid var(--gr-ink); border-radius: var(--gr-r-2); background: transparent; color: var(--gr-ink); }
.chip, .gr-btn--sm { min-height: 36px; }
.gr-footer .gr-btn--outline, .gr-footer .gr-btn--outline:hover { color: var(--gr-ink); }
/* R6 phone length: the page keeps the USP, the hero table, prices and sources; secondary blocks go on phone */
.bronnen > summary { cursor: pointer; list-style: none; }
.bronnen > summary::after { content: " ▾"; }
.bronnen[open] > summary::after { content: " ▴"; }
@media (max-width: 640px) {
  :root { --sec: 40px; }
  .sechead__page, .who .col > .kicker, .colofon__cta { display: none; }
  .front__briefs, .nums__chart, .map__text .lede, .map__text .filters, .who .pull, .ledger__intro .lede, .nums__de { display: none; }
}
/* R6-8 phone header: a readable wordmark, a slim CTA and one slim link row (no menu JS) */
@media (max-width: 760px) {
  .gr-nav__in { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 0; row-gap: 0; }
  .gr-nav__logo, .gr-nav .gr-nav__logo { height: 26px; }
  .gr-nav__cta .gr-btn--sm { min-height: 32px; padding: 0 10px; font-size: .8125rem; }
  .gr-nav__login { font-size: .875rem; }
  .gr-nav__links { display: flex; order: 3; width: 100%; justify-content: space-between; gap: 8px;
    font-size: .8125rem; border-top: var(--gr-hair); margin-top: 8px; }
  .gr-nav__links a { display: block; padding: 8px 0; white-space: nowrap; }
}
/* R6-9: a fixed value slot. Winner and buyer always take 2 lines, the note sits under the value,
   so every knipsel's amount stands on one baseline. */
.clip__winner { min-height: calc(2 * 1.35em); }
.clip__buyer { min-height: calc(2 * 1.5 * var(--gr-fs-small)); line-height: 1.5; }
/* R6-7 phone carousel: a "1/4" cue on every step, and the peeking next step fades out instead of
   being cut mid-word. Desktop shows all 4 steps, so the cue is hidden there. */
.step__of { display: none; }
@media (max-width: 640px) {
  .step__no { display: flex; justify-content: space-between; gap: 8px; }
  .step__of { display: inline; color: var(--gr-ink-3); }
  .story__steps { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), rgba(0,0,0,.12) calc(100% - 30px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 64px), rgba(0,0,0,.12) calc(100% - 30px), transparent); }
}
/* R6-6 map: city labels above the dots, on top, with a paper halo; the label never takes clicks */
.cities { pointer-events: none; }
.city text { paint-order: stroke; stroke: var(--gr-surface); stroke-width: 4px; stroke-linejoin: round; font-weight: 600; }
@media (max-width: 640px) { .city text { stroke-width: 8px; } }
/* R6-10 phone: a long mono filter paragraph becomes one line plus a "Methode ↗" link (full text in Bronnen) */
.src-1 { display: none; }
@media (max-width: 640px) {
  .hero__src, .kpis__src { display: none; }
  .src-1 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .src-1 a { white-space: nowrap; }
}

/* ---------------------------------------------------------------- polish round 7, lane A */
/* R7-1: the section label states its true window. Desk shows the 30-day bars and the 12-month table;
   phone hides the bars, so its label says 12 maanden only. */
.k-phone { display: none; }
@media (max-width: 640px) { .k-desk { display: none; } .k-phone { display: inline; } }
/* R7-2 phone stat tiles: one row per tile, with its own one-line window and source */
.gr-kpi__win { display: none; }
@media (max-width: 640px) {
  .kpis { grid-template-columns: 1fr; gap: 6px; }
  .kpis .gr-kpi { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); grid-template-areas: "val lab" "val win";
    column-gap: 14px; row-gap: 2px; align-items: center; padding: 8px 14px; }
  .kpis .gr-kpi__value { grid-area: val; font-size: 1.75rem; }
  .kpis .gr-kpi__label { grid-area: lab; min-height: 0; -webkit-line-clamp: 1; align-self: end; }
  .kpis .gr-kpi__win { display: block; grid-area: win; align-self: start; font: 400 .6875rem/1.5 var(--gr-f-mono); color: var(--gr-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* R7-3 phone grootboek: no peek carousel. A vertical list of the top 5 as compact rows, plus "Alle 12 →".
   The link targets the list (#knipsels:target), so all 12 open without JS. Desktop is unchanged. */
.ledger__all, .clip__multi { display: none; }
@media (max-width: 640px) {
  .ledger__viewport { overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; padding: 0 var(--gr-pad); }
  .ledger__track { display: block; border-top: var(--gr-hair); }
  .ledger__track::after, .ledger__track > .clip--end { display: none; }
  .ledger__track:not(:target) > .clip:nth-child(n+6) { display: none; }
  .ledger__track > .clip { background: transparent; border: 0; border-bottom: var(--gr-hair); border-radius: 0; padding: 6px 0 7px; transform: none; }
  .clip article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no win val" "no buy buy" "no src src";
    column-gap: 12px; row-gap: 0; align-items: baseline; height: auto; }
  .clip__head { display: contents; }
  .clip__foot { grid-area: src; display: flex; gap: 6px; align-items: baseline; justify-content: flex-start; border: 0; padding: 0; margin: 0;
    font: 400 var(--gr-fs-meta)/1.5 var(--gr-f-mono); color: var(--gr-ink-3); white-space: nowrap; }
  .clip__multi { display: inline; }
  .clip__multi::after { content: " ·"; }
  .clip__head .kicker, .clip__note, .clip__facts, .clip__foot time { display: none; }
  .clip__no { grid-area: no; }
  .clip__winner { grid-area: win; min-height: 0; margin: 0; font-size: .9375rem; -webkit-line-clamp: 2; }
  .clip__buyer { grid-area: buy; min-height: 0; margin: 0; -webkit-line-clamp: 1; line-height: 1.4; }
  .clip__val { grid-area: val; margin: 0; font-size: .9375rem; text-align: right; white-space: nowrap; }
  .clip__eur, .clip__unit { font-size: inherit; color: inherit; }
  .clip__foot a { text-align: right; font: 400 var(--gr-fs-meta)/1.5 var(--gr-f-mono); color: var(--gr-ink-3); }
  .ledger__all { display: block; margin-top: 12px; }
  .ledger__all a { font-weight: 600; }
  .ledger:has(.ledger__track:target) .ledger__all { display: none; }
}
/* R7-4 phone link row: side padding, so "Vragen" does not touch the screen edge */
@media (max-width: 760px) {
  .gr-nav__links { padding: 0 12px; }
}

/* ---------------------------------------------------------------- polish round 8, lane A */
/* R8-1: ONE public header (polish/HEADER-SPEC-r8.md). Same box as the app header. No orange. */
.gr-nav .gr-nav__in.gr-wrap--wide { max-width: 1360px; padding: 0 48px; box-sizing: border-box; } /* logo on the 88 px content edge, as the app */
.gr-nav__in { height: 63px; flex-wrap: nowrap; gap: 24px; } /* + 1px rule = 64px header */
.gr-nav { border-bottom: 1px solid var(--gr-rule); }
.gr-nav .gr-nav__logo { width: 110px; height: 24px; display: block; }
.gr-nav .gr-nav__links { display: flex; gap: 28px; font: 500 15px/1.2 var(--gr-f-body, "Hanken Grotesk"), sans-serif; margin: 0; padding: 0; border: 0; }
.gr-nav .gr-nav__links a { color: #121212; text-decoration: none; padding: 0; }
.gr-nav .gr-nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.gr-nav .gr-nav__cta { display: flex; align-items: center; gap: 16px; }
.gr-nav .gr-nav__login { font: 500 15px/1.2 var(--gr-f-body, "Hanken Grotesk"), sans-serif; color: #121212; padding: 0; }
.gr-nav .gr-nav__trial { min-height: 36px; height: 36px; padding: 0 14px; border: 1px solid #121212; background: transparent; color: #121212;
  font: 600 14px/1 var(--gr-f-body, "Hanken Grotesk"), sans-serif; border-radius: 4px; box-sizing: border-box; }
@media (max-width: 760px) {
  .gr-nav .gr-nav__in.gr-wrap--wide { padding: 0 16px; }
  .gr-nav__in { flex-wrap: wrap; height: auto; padding-top: 0; padding-bottom: 0; row-gap: 0; column-gap: 12px; }
  .gr-nav .gr-nav__in > a:first-child { height: 55px; display: flex; align-items: center; } /* 55 + 40 + 1px rule = 96 */
  .gr-nav .gr-nav__cta { height: 55px; gap: 12px; }
  .gr-nav .gr-nav__login { font-size: 14px; }
  .gr-nav .gr-nav__trial { min-height: 32px; height: 32px; padding: 0 12px; font-size: 13px; }
  .gr-nav .gr-nav__links { order: 3; width: calc(100% + 32px); margin: 0 -16px; height: 40px; align-items: center; box-sizing: border-box;
    padding: 0 28px; gap: 0; justify-content: space-between; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    font-size: 13px; border-top: 1px solid var(--gr-rule); margin-top: 0; }
  .gr-nav .gr-nav__links a { padding: 0; white-space: nowrap; line-height: 39px; display: block; }
}
/* R8-3: map cropped to the land (build_page.py); the desk column beside it holds the weekfeed counts. One ink bar colour. */
.mapside { margin-top: 24px; display: grid; gap: 24px; }
.mapside__t { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--gr-f-body); font-variant-numeric: tabular-nums; }
.mapside__t caption { text-align: left; font: 600 16px/1.4 var(--gr-f-body); color: var(--gr-ink); padding-bottom: 8px; }
.mapside__t th, .mapside__t td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--gr-rule); text-align: left; font-weight: 400; }
.mapside__t thead th { font: 400 11px/1.5 var(--gr-f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gr-ink-3); }
.mapside__t .num { text-align: right; font-weight: 600; }
.mapside__t thead .num { font-weight: 400; }
.mapside__bar { width: 34%; padding-right: 0 !important; }
.mapside__bar span { display: block; height: 8px; background: var(--gr-ink); border-radius: 0; min-width: 2px; }
.mapside__src { font: 400 12px/1.5 var(--gr-f-mono); color: var(--gr-ink-3); margin: 0; }
@media (max-width: 900px) { .mapside { display: none; } }

/* R8-4 desk knipsels: one fixed row grid (subgrid), so every card has the same rows on the same lines:
   nr · winner (2 lines) · value · note · buyer (2 lines) · facts · source. All cards in a row are equally high. */
@media (min-width: 1000px) {
  .ledger__track { row-gap: 16px; }
  .ledger__track > .clip:not(.clip--end) { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; transform: none; }
  .ledger__track > .clip article { display: contents; }
  .clip__head { grid-row: 1; }
  .clip__winner { grid-row: 2; margin: 8px 0 0; min-height: calc(2 * 1.35em); }
  .clip__val { grid-row: 3; margin: 8px 0 0; padding: 0; align-self: start; }
  .clip__note { grid-row: 4; margin: 4px 0 0; }
  .clip__buyer { grid-row: 5; margin: 8px 0 0; }
  .clip__facts { grid-row: 6; margin: 12px 0 0; align-self: start; }
  .clip__foot { grid-row: 7; margin: 12px 0 0; align-self: end; }
}
/* R8-5 mkb: spacing on the DESIGN-SYSTEM steps (8 16 24 32 48 64). Phone: one compact 3-column table
   (sector · per week · lopen af), not stacked cards. The two detail columns stay on desk. */
.mkb { padding: 48px 0 64px; }
.mkb h2 { margin-top: 48px; margin-bottom: 16px; }
.mkb th, .mkb td { padding: 8px 12px; }
.mkb__big { margin: 0 0 8px; }
.mkb__tablewrap { margin: 16px 0 8px; }
.mkb__plans { gap: 16px; }
.th-s { display: none; }
@media (max-width: 640px) {
  .mkb .mkb__tablewrap.gr-stack { overflow: visible; background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); }
  .mkb .gr-stack table { display: table; width: 100%; table-layout: auto; }
  .mkb .gr-stack thead { display: table-header-group; }
  .mkb .gr-stack tbody { display: table-row-group; }
  .mkb .gr-stack tfoot { display: table-footer-group; }
  .mkb .gr-stack caption { display: table-caption; caption-side: top; text-align: left; font-size: var(--gr-fs-small); color: var(--gr-ink-2); padding: 8px 12px; }
  .mkb .gr-stack tr { display: table-row; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .mkb .gr-stack th, .mkb .gr-stack td { display: table-cell; width: auto; padding: 8px; border-bottom: var(--gr-hair); vertical-align: top; }
  .mkb .gr-stack th:first-child { padding-left: 12px; } .mkb .gr-stack tr > :nth-child(3) { padding-right: 12px; }
  .mkb .gr-stack th[scope="row"] { font-weight: 600; padding-bottom: 8px; }
  .mkb .gr-stack td.n { display: table-cell; text-align: right; }
  .mkb .gr-stack td::before { content: none; }
  .mkb .gr-stack tr > :nth-child(n+4) { display: none; }
  .mkb .gr-stack thead th { font-size: 11px; letter-spacing: .04em; }
  .mkb .gr-stack .th-l { display: none; } .mkb .gr-stack .th-s { display: inline; }
  .mkb h2 { margin-top: 32px; }
}