/* Legal, pricing and FAQ pages: reading layout on tokens.css (design system v1). */
body.legal .auth-shell { max-width: var(--container); padding: var(--gr-s-7) var(--gutter) 0; }
body.legal .auth-main { background: none; border: 0; box-shadow: none; padding: 0; font-size: 1rem; line-height: 1.6; color: var(--gr-ink); }
body.legal .auth-main > * { max-width: var(--gr-max-text); }
body.legal h1 { font-family: var(--gr-f-display); font-weight: 500; font-size: var(--gr-fs-h1); line-height: 1.1; letter-spacing: -.018em; margin: 0 0 var(--gr-s-3); }
body.legal h2 { font-family: var(--gr-f-display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.012em; margin: var(--gr-s-7) 0 var(--gr-s-3); padding-top: var(--gr-s-5); border-top: var(--gr-hair); }
body.legal h3 { font-family: var(--gr-f-display); font-weight: 500; font-size: 1.25rem; line-height: 1.3; margin: var(--gr-s-5) 0 var(--gr-s-2); }
body.legal .auth-main p, body.legal .auth-main li { margin: 0 0 var(--gr-s-3); }
body.legal .auth-main ul, body.legal .auth-main ol { padding-left: 1.2em; margin: 0 0 var(--gr-s-4); }
body.legal .auth-main .gr-price__list, body.legal .auth-main .err-links { padding-left: 0; }
body.legal .auth-main .gr-price p { margin: 0; }
body.legal .lead { font-size: var(--gr-fs-lede); line-height: 1.5; color: var(--gr-ink-2); margin-bottom: var(--gr-s-6); }
body.legal .auth-main a { color: var(--gr-ink); text-decoration: underline; text-decoration-color: var(--gr-rule-strong); text-underline-offset: .18em; }
body.legal .auth-main a:hover { color: var(--gr-accent-ink); text-decoration-color: currentColor; }
.concept-banner { background: var(--gr-warn-bg); border-left: 3px solid var(--gr-warn); color: var(--gr-warn); border-radius: var(--gr-r-2);
  padding: 10px 14px; font-weight: 600; margin: 0 0 var(--gr-s-5); }
.legal-meta { font: 400 var(--gr-fs-meta)/1.6 var(--gr-f-mono); letter-spacing: .02em; color: var(--gr-ink-3); margin: 0 0 var(--gr-s-6); }
.legal-nav { font-size: .875rem; }

/* tables (coverage facts) */
.facts { width: 100%; border-collapse: collapse; margin: var(--gr-s-3) 0 var(--gr-s-4); font-size: var(--gr-fs-data); line-height: 1.4;
  background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); font-variant-numeric: lining-nums tabular-nums; }
.facts th, .facts td { text-align: left; border-bottom: var(--gr-hair); padding: 10px 12px; vertical-align: top; }
.facts th { font: 400 .6875rem/1.3 var(--gr-f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gr-ink-2); background: var(--gr-sunken); }

/* pricing: two cards, Regio (ghost) + Pro (featured) */
body.legal .auth-main > .plan-compare, body.legal .auth-main > .gr-price-grid { max-width: none; }
.gr-price-grid { display: grid; gap: var(--gr-s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--gr-s-5) 0 var(--gr-s-4); align-items: start; }
.gr-price .gr-price__name { font-family: var(--gr-f-display); font-weight: 500; font-size: 1.5rem; margin: 0; padding: 0; border: 0; }
.gr-price__year { font-size: var(--gr-fs-small); color: var(--gr-ink-2); margin: 0; }
.gr-price .gr-price__list li { margin: 0; }
body.legal .auth-main .gr-price .gr-btn { text-decoration: none; color: inherit; }
body.legal .auth-main .gr-price .gr-btn { color: var(--gr-ink); }
.plan-free { font-size: .9375rem; color: var(--gr-ink-2); border-top: var(--gr-hair); padding-top: var(--gr-s-3); }
@media (max-width: 900px) { .gr-price-grid { grid-template-columns: 1fr; } }

/* FAQ accordion: native details/summary, works without JS */
.faq { border-top: var(--gr-hair); margin: var(--gr-s-5) 0; }
.faq details { border-bottom: var(--gr-hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--gr-s-4); align-items: baseline;
  padding: var(--gr-s-4) 0; font: 600 1.0625rem/1.4 var(--gr-f-body); color: var(--gr-ink); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.25rem/1 var(--gr-f-mono); color: var(--gr-ink-2); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--gr-accent-ink); }
.faq summary:focus-visible { outline: 3px solid var(--gr-accent-ink); outline-offset: 2px; }
.faq .faq__a { padding: 0 0 var(--gr-s-4); color: var(--gr-ink-2); }

/* 404 / 500 */
.err-page { padding: var(--gr-s-6) 0 var(--gr-s-4); }
.err-page .err-code { font: 400 var(--gr-fs-meta)/1.4 var(--gr-f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gr-accent-ink); margin: 0 0 var(--gr-s-3); }
.err-page .err-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gr-s-3); margin-top: var(--gr-s-5); }
body.legal .auth-main .err-links .gr-btn { text-decoration: none; }
body.legal .auth-main .err-links .gr-btn { color: var(--gr-ink); }

@media (max-width: 520px) { body.legal .auth-shell { padding-top: var(--gr-s-5); } }

/* price unit on its own line so Regio and Pro cards line up */
.gr-price .gr-price__amount small { display: block; margin-top: 8px; font-family: var(--gr-f-body); }

/* Legal ToC: plain list under the H1 on phone, sticky column on desktop (grid in the r5 block below). */
.legal-toc { font-size: .875rem; line-height: 1.4; border-top: var(--gr-hair); border-bottom: var(--gr-hair); padding: var(--gr-s-3) 0; margin: 0 0 var(--gr-s-5); }
.legal-toc__title { font: 400 .6875rem/1.3 var(--gr-f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gr-ink-3); margin: 0 0 var(--gr-s-2) !important; }
body.legal .auth-main .legal-toc ol { list-style: none; padding: 0; margin: 0; }
body.legal .auth-main .legal-toc li { margin: 0 0 6px; }
body.legal .auth-main .legal-toc a { text-decoration: none; color: var(--gr-ink-2); }
body.legal .auth-main .legal-toc a:hover { color: var(--gr-ink); text-decoration: underline; }
.legal-body > * { max-width: var(--gr-max-text); }
.legal-body h2 { scroll-margin-top: 24px; }

/* Pricing r2: segmented month/year toggle, ink checkmarks, shared "Beide plannen" list. */
body.legal .auth-main > .gr-plans { max-width: none; }
.gr-seg__in { position: absolute; opacity: 0; pointer-events: none; }
.gr-seg { display: inline-flex; border: 1px solid var(--gr-ink); border-radius: 999px; padding: 3px; gap: 2px; margin: var(--gr-s-4) 0 0; }
.gr-seg label { padding: 7px 16px; border-radius: 999px; cursor: pointer; font-size: .9375rem; color: var(--gr-ink-2); }
.gr-seg__note { font-size: .75rem; color: var(--gr-ink-3); }
#gr-period-m:checked ~ .gr-seg label[for="gr-period-m"], #gr-period-y:checked ~ .gr-seg label[for="gr-period-y"] { background: var(--gr-ink); color: var(--gr-surface); }
#gr-period-m:checked ~ .gr-seg label[for="gr-period-m"] .gr-seg__note, #gr-period-y:checked ~ .gr-seg label[for="gr-period-y"] .gr-seg__note { color: inherit; }
#gr-period-m:focus-visible ~ .gr-seg label[for="gr-period-m"], #gr-period-y:focus-visible ~ .gr-seg label[for="gr-period-y"] { outline: 2px solid var(--gr-accent); outline-offset: 2px; }
.gr-per-y { display: none; }
#gr-period-y:checked ~ .gr-price-grid .gr-per-y { display: block; }
#gr-period-y:checked ~ .gr-price-grid .gr-per-m { display: none; }
.gr-price__sub { font-weight: 600; font-size: .9375rem; margin: 0; }
body.legal .gr-price__list li::before { border-color: var(--gr-ink); }
.gr-price-both { border-top: var(--gr-hair); padding-top: var(--gr-s-4); margin: 0 0 var(--gr-s-5); }
.gr-price__list--cols { columns: 2; column-gap: var(--gr-s-6); }
.gr-price__list--cols li { break-inside: avoid; }
@media (max-width: 700px) { .gr-price__list--cols { columns: 1; } }

/* polish r4: numeric table cells are bare, right-aligned, tabular; the filter sits once in the caption */
.facts caption { caption-side: top; text-align: left; font-size: var(--gr-fs-small); color: var(--gr-ink-2); padding: 0 0 var(--gr-s-2); line-height: 1.45; }
.regio-volume td:first-child { width: 100%; }
@media (max-width: 480px) { .facts th, .facts td { padding: 8px 8px; } }

/* ---------- polish r5 ---------- */
/* One desktop grid for every text page (legal/_layout.html): the document is centred in the 1360
   container. With a ToC: sticky ToC (220px) left + reading column (40rem, ~68ch). Without: one centred
   reading column. No narrow left column with an empty right half. */
.legal-doc { --legal-toc: 220px; --legal-gap: 64px; --legal-wide: 60rem; width: 100%; }
body.legal .auth-main > .legal-doc { max-width: var(--gr-max-text); margin: 0; }
.legal-head > * { max-width: var(--gr-max-text); }
@media (min-width: 1100px) {
  body.legal .auth-main > .legal-doc--toc { max-width: calc(var(--legal-toc) + var(--legal-gap) + var(--gr-max-text)); }
  .legal-doc--toc { display: grid;
    grid-template-columns: var(--legal-toc) minmax(0, var(--gr-max-text)); column-gap: var(--legal-gap);
    grid-template-areas: "head head" "toc body"; align-items: start; }
  .legal-doc--toc > .legal-head { grid-area: head; }
  .legal-doc--toc > .legal-toc-d { grid-area: toc; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; border-bottom: 0; margin: 0; }
  .legal-doc--toc > .legal-body { grid-area: body; }
  /* the pricing cards break out of the reading column, symmetrically (60rem, centred on the column) */
  .legal-body > .gr-plans { max-width: none; margin-inline: 0; }
}

/* Pricing component (legal/_plans.html): equal-height cards, ONE CTA per card at the card foot.
   The toggle shows either the monthly or the yearly price + CTA; yearly is [hidden] by default. */
.gr-price-grid { align-items: stretch; }
.gr-price__foot { margin-top: auto; padding-top: var(--gr-s-2); }
.gr-price__foot form { margin: 0; }
.gr-price .gr-btn.gr-per-y { display: none; }
#gr-period-y:checked ~ .gr-price-grid .gr-btn.gr-per-y { display: flex; }
.gr-plans__note { margin: 0 0 var(--gr-s-5); }

/* Tables: ONE numeric-cell rule for every legal table (dekking, prijzen, pricing-app). */
.facts th.num, .facts td.num { text-align: right; font-family: inherit; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.facts tfoot th, .facts tfoot td { border-bottom: 0; border-top: 1px solid var(--gr-ink); background: var(--gr-sunken); font-weight: 600; }

/* Privacy tables on a phone: each row becomes a stacked label/value card. */
@media (max-width: 640px) {
  .facts--stack, .facts--stack tbody, .facts--stack tr, .facts--stack td { display: block; width: 100%; box-sizing: border-box; }
  .facts--stack { border: 0; background: none; }
  .facts--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .facts--stack tr { background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); margin: 0 0 var(--gr-s-3); padding: var(--gr-s-2) 0; }
  .facts--stack td { border: 0; padding: 6px var(--gr-s-4); }
  .facts--stack td::before { content: attr(data-label); display: block; margin: 0 0 2px; font: 400 .6875rem/1.3 var(--gr-f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gr-ink-3); }
  .facts--stack td:first-child { font-weight: 600; }
}

/* 404 / 500: the block sits centred in the free space between header and footer. */
body.err > .auth-shell { display: flex; flex-direction: column; justify-content: center; }
body.legal .auth-main > .err-page { margin: 0; width: 100%; padding: var(--gr-s-7) 0; }
/* "Beide plannen": one rule above it (the section's), not two */
body.legal .gr-price-both .gr-price__name { border: 0; padding: 0; margin: 0 0 var(--gr-s-3); }

/* r5 orchestrator: a page with the pricing component uses the wide measure for the WHOLE document,
   so H1, lede, toggle and cards share one left edge (no indented intro over wider cards). */
@media (min-width: 1100px) {
  body.legal .auth-main > .legal-doc:has(.gr-plans) { max-width: var(--legal-wide); }
}

/* ---------- polish r6 (Lane B) ---------- */
/* R6-1: ONE page grid. Every text page (legal/_layout.html) starts on the .gr-container content edge,
   the same x as the header logo (88px at 1440). Prose keeps the 40rem (~68ch) measure, LEFT-aligned.
   Legal: H1 on the edge, ToC column on the edge below it, text beside it. */
body.legal .auth-main > .legal-doc, body.legal .auth-main > .legal-doc--toc { margin-left: 0; margin-right: auto; }

/* R6-12: legal ToC. Phone: collapsed behind "Inhoud" (native details). Desktop: always open column. */
.legal-toc-d { margin: 0 0 var(--gr-s-5); border-top: var(--gr-hair); border-bottom: var(--gr-hair); }
.legal-toc-d > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  font: 400 .6875rem/1.3 var(--gr-f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gr-ink-2); }
.legal-toc-d > summary::-webkit-details-marker { display: none; }
.legal-toc-d > summary::after { content: "\25BE"; font-size: .875rem; color: var(--gr-ink-2); }
.legal-toc-d[open] > summary::after { content: "\25B4"; }
.legal-toc-d > .legal-toc { border: 0; margin: 0; padding-top: 0; }
.legal-toc-d > .legal-toc .legal-toc__title { display: none; }
@media (min-width: 1100px) {
  .legal-toc-d { border-bottom: 0; margin: 0; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; }
  .legal-toc-d > summary { pointer-events: none; cursor: default; }
  .legal-toc-d > summary::after, .legal-toc-d[open] > summary::after { content: none; }
  .legal-toc-d::details-content { content-visibility: visible; height: auto; }
}

/* R6-2: one orange per page. The month/year toggle speaks the quiet-button language:
   1px ink border, radius 4, 44px high. Selected = sunken fill + 600 weight, never a black pill. */
.gr-seg { border: 0; border-radius: 0; padding: 0; gap: 0; }
.gr-seg label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 var(--gr-s-4);
  border: 1px solid var(--gr-ink); border-radius: 0; color: var(--gr-ink-2); background: transparent; }
.gr-seg label:first-of-type { border-radius: var(--gr-r-2) 0 0 var(--gr-r-2); }
.gr-seg label:last-of-type { border-radius: 0 var(--gr-r-2) var(--gr-r-2) 0; border-left: 0; }
#gr-period-m:checked ~ .gr-seg label[for="gr-period-m"], #gr-period-y:checked ~ .gr-seg label[for="gr-period-y"] {
  background: var(--gr-sunken); color: var(--gr-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gr-ink); }

/* R6-12: every dekking table stacks on a phone like the privacy tables (no sideways scroll). */
@media (max-width: 640px) {
  .facts--stack tfoot { display: block; }
  .facts--stack tfoot tr { display: flex; justify-content: space-between; padding: var(--gr-s-2) var(--gr-s-4); }
  .facts--stack tfoot th, .facts--stack tfoot td { display: inline; border: 0; background: none; padding: 0; width: auto; }
  .facts--stack tfoot td::before { content: none; }
  .facts--stack td.num { text-align: left; white-space: normal; }
  .tbl-scroll:has(> .facts--stack) { overflow: visible; }
}

/* polish r6 follow-up: the two plan cards span the full container (no blank band on the right).
   Prose on the same page keeps the 40rem measure. */
@media (min-width: 1100px) {
  body.legal .auth-main > .legal-doc:has(.gr-plans) { max-width: none; }
  .legal-doc:has(.gr-plans) .legal-body > *:not(.gr-plans) { max-width: var(--gr-max-text); }
}

/* ---------- polish r7 (Lane B) ---------- */
/* R7-1: desktop (>=1100) right rail on the legal pages, the FAQ and /dekking (legal/_layout.html,
   legal/_rail.html). Text column on the logo edge (17px, max 68ch), rail on the container's right edge,
   so the page spans the container. /dekking (--wide): rail beside the head, tables full container width. */
.legal-rail__card { display: none; }
.legal-rail__k { font: 400 .6875rem/1.3 var(--gr-f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gr-ink-3); margin: 0 0 var(--gr-s-3) !important; }
.legal-rail__dl { margin: 0; display: grid; gap: var(--gr-s-3); font-variant-numeric: lining-nums tabular-nums; }
.legal-rail__dl > div { border-bottom: var(--gr-hair); padding-bottom: var(--gr-s-3); }
.legal-rail__dl dt { font-size: .8125rem; line-height: 1.4; color: var(--gr-ink-2); margin: 0 0 2px; }
.legal-rail__dl dd { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--gr-ink); }
.legal-rail__n { display: block; font: 600 1.5rem/1.15 var(--gr-f-body); letter-spacing: -.01em; color: var(--gr-ink); }
.legal-rail__s { font-size: .8125rem; color: var(--gr-ink-2); }
.legal-rail__p { font-size: .9375rem; line-height: 1.6; margin: 0 !important; }
.legal-doc--read .legal-body { font-size: 1.0625rem; line-height: 1.6; }
.legal-doc--read .legal-body > *, .legal-doc--read .legal-body p, .legal-doc--read .legal-body li { max-width: 68ch; }
@media (min-width: 1100px) {
  body.legal .auth-main > .legal-doc--rail { max-width: none; display: grid; column-gap: 0; align-items: start;
    grid-template-columns: minmax(0, 41rem) minmax(var(--gr-s-7), 1fr) minmax(0, 24rem);
    grid-template-rows: auto 1fr; grid-template-areas: "head . rail" "body . rail"; }
  .legal-doc--rail > .legal-head { grid-area: head; }
  .legal-doc--rail > .legal-body { grid-area: body; }
  .legal-doc--rail > .legal-rail { grid-area: rail; display: grid; gap: var(--gr-s-6); align-self: start;
    position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; }
  .legal-rail .legal-toc-d { position: static; max-height: none; overflow: visible; border-top: 1px solid var(--gr-ink); }
  .legal-rail__card { display: block; border-top: 1px solid var(--gr-ink); padding-top: var(--gr-s-3); }
  .legal-rail__dl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gr-s-5); }
  body.legal .auth-main > .legal-doc--rail.legal-doc--wide { grid-template-rows: auto auto;
    grid-template-areas: "head . rail" "body body body"; }
  .legal-doc--wide > .legal-rail { position: static; max-height: none; overflow: visible; margin-top: var(--gr-s-3); }
  .legal-doc--wide .legal-body > .tbl-scroll { max-width: none; }
}

/* R7-2: /dekking tables on a phone: compact 2-3 column tables, numbers right-aligned and tabular.
   "van 36.115" drops under the number in small grey type. No label/value cards. */
@media (max-width: 640px) {
  .facts--compact { font-size: .8125rem; }
  .facts--compact th, .facts--compact td { padding: 8px 6px; }
  .facts--compact th:first-child, .facts--compact td:first-child { padding-left: 10px; }
  .facts--compact th:last-child, .facts--compact td:last-child { padding-right: 10px; }
  .facts--compact th { font-size: .625rem; letter-spacing: .05em; }
  .facts--compact .num { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
  .facts--compact .facts__of { display: block; font-size: .75rem; color: var(--gr-ink-3); }
  .tbl-scroll:has(> .facts--compact) { overflow: visible; }
}
/* /dekking: the "Bron" intro sits in the head beside the rail; section rules run the full container width. */
.legal-head > h2 { max-width: var(--gr-max-text); }
.legal-head > h2 + p { font-size: 1.0625rem; line-height: 1.6; max-width: 68ch; }
@media (min-width: 1100px) { .legal-doc--wide .legal-body > h2 { max-width: none; } }

/* ---------- polish r8 (Lane B) ---------- */
/* R8-1: no "Kerncijfers" card. The right rail only holds the ToC (privacy, voorwaarden): text column on
   the logo edge, sticky ToC on the right. Pages without a ToC are ONE text column on the logo edge (17px,
   max 68ch); the page does not reserve an empty right column. /dekking: head in the text measure, tables
   full container width. */
.legal-doc--read:not(.legal-doc--rail) > .legal-head > *, .legal-doc--read .legal-head > .lead { max-width: 68ch; }
@media (min-width: 1100px) {
  body.legal .auth-main > .legal-doc--rail { grid-template-columns: minmax(0, 41rem) minmax(var(--gr-s-7), 1fr) minmax(0, 18rem); }
  body.legal .auth-main > .legal-doc--read:not(.legal-doc--rail) { display: block; max-width: 44rem; }
  body.legal .auth-main > .legal-doc--read.legal-doc--wide { max-width: none; }
  .legal-doc--wide .legal-body > .tbl-scroll, .legal-doc--wide .legal-body > h2 { max-width: none; }
}
/* R8-3: air after footnotes and captions. */
.legal-meta, .legal-body figcaption, .legal-body caption, .gr-price__note, .gr-plans__note { margin-bottom: 20px; }
/* R8-3: /prijzen lower half. Desktop: volume table left, prose right, both on the plan-card measure. */
@media (min-width: 1100px) {
  .legal-doc:has(.gr-plans) .legal-body > .price-lower { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .price-lower > div > * { max-width: 68ch; }
  .price-lower > div > :first-child { margin-top: 0; }
}