/* DocClar — site styles (built pages: site/build.py). No external resources: the fonts are ours (fonts/, SIL OFL 1.1).
   Layout: one 1200 px column. Every section heading carries its real tag (H1 / H2) as a small mono chip, hung in the
   left margin on wide screens: the page shows its own structure, the thing we add to PDFs. Light paper, one night band
   (cost vs. fines). Brand colours (Doc blue, Clar teal) are accents, never fills of whole areas except the CTA button. */

@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap; }
/* Text and mono: Atkinson Hyperlegible draws a slashed zero ("2Ø23"); only the zero (U+0030) is taken from Schibsted. */
@font-face { font-family: "DocText"; src: url("fonts/atkinson-next-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-002F, U+0031-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DocText"; src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0030; }
@font-face { font-family: "DocMono"; src: url("fonts/atkinson-mono-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-002F, U+0031-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DocMono"; src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0030; }

:root {
  color-scheme: light;
  /* colour: paper, ink, the two brand accents, one night band, pass / fail */
  --paper: #ffffff;
  --mist: #f2f5f8;          /* alternate band, cool grey biased to the blue */
  --ink: #0b1726;
  --ink-2: #3e4d5f;         /* secondary text: 8.7:1 on paper, 7.9:1 on mist */
  --line: #d5dde6;
  --line-strong: #6b7b8e;   /* form borders: 4.3:1 */
  --doc: #0a4d8c;           /* brand blue: links, primary button (8.6:1) */
  --doc-deep: #073a6b;
  --doc-tint: #e7eff8;
  --clar: #0e7480;          /* brand teal: structure tags, ticks (5.5:1) */
  --on-accent: #ffffff;
  --night: #08192c;
  --night-line: #1d3654;
  --on-night: #eef3f8;
  --on-night-2: #aebfd2;    /* 9.4:1 on night */
  --clar-night: #62cfc2;    /* 9.5:1 on night */
  --pass: #11683a; --pass-tint: #e7f3eb;
  --fail: #a12a1f; --fail-tint: #fbecea;
  --focus: #0a4d8c;
  --shadow: rgba(11, 23, 38, .30);
  --zone: rgba(14, 116, 128, .08);
  /* type: a newsroom grotesk for display, a typeface drawn for legibility (Braille Institute) for text, its mono */
  --f-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-text: "DocText", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: "DocMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-xs: .8125rem; --t-sm: .9375rem; --t-base: 1.125rem; --t-lg: 1.3125rem; --t-h3: 1.25rem;
  --t-h2: clamp(1.875rem, 1.2rem + 2.4vw, 2.875rem);
  --t-h1: clamp(2.375rem, 1.3rem + 2.8vw, 3.5rem);
  --t-num: clamp(3rem, 1.2rem + 4.6vw, 5.5rem);
  --gutter: clamp(16px, 4vw, 40px);
  --band: clamp(64px, 8vw, 120px);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-base)/1.6 var(--f-text);
  font-kerning: normal; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--doc); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.04; letter-spacing: -.028em; }
h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: var(--t-h3); font-weight: 650; line-height: 1.3; letter-spacing: -.005em; }
h4 { font-size: var(--t-base); font-weight: 650; line-height: 1.35; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 820px; }
.band { padding-block: var(--band); }
.mist { background: var(--mist); }
.rule-top { border-top: 1px solid var(--line); }
.lead { font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.3125rem); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.fine { font-size: var(--t-sm); color: var(--ink-2); max-width: 75ch; }
.ico { flex: none; width: 1em; height: 1em; }

.skip { position: absolute; left: 8px; top: -80px; z-index: 10; padding: 12px 16px; border-radius: var(--radius);
  background: var(--doc); color: var(--on-accent); font-weight: 700; }
.skip:focus { top: 8px; }

/* structure tags: the real level of the heading next to it */
.tag { display: inline-block; justify-self: start; font: 700 var(--t-xs)/1 var(--f-mono); letter-spacing: .04em;
  color: var(--clar); border: 1px solid currentColor; border-radius: 3px; padding: 4px 6px 3px; }
.sh { position: relative; display: grid; gap: 16px; max-width: 820px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.h1-wrap { position: relative; }
.h1-wrap .tag { display: none; }
@media (min-width: 1380px) {
  .sh .tag, .h1-wrap .tag { display: inline-block; position: absolute; left: -68px; top: .55em; }
  .h1-wrap .tag { top: 1.1em; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 12px 22px; border: 2px solid var(--doc); border-radius: var(--radius); font: 700 1rem/1.2 var(--f-text);
  text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--doc); color: var(--on-accent); }
.btn-primary:hover { background: var(--doc-deep); border-color: var(--doc-deep); }
.btn-ghost { background: transparent; color: var(--doc); }
.btn-ghost:hover { background: var(--doc-tint); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: var(--t-sm); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* header */
.masthead { border-bottom: 1px solid var(--line); background: var(--paper); }
.bar { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none;
  font: 700 1.375rem/1 var(--f-display); letter-spacing: -.02em; }
.brand .d { color: var(--doc); }
.brand .c { color: var(--clar); }
.brand-sm { font-size: 1.125rem; margin: 0; }
.sections ul, .langs ul { list-style: none; display: flex; gap: 2px; }
.sections a, .langs a { display: inline-block; padding: 10px 10px; border-radius: 4px; color: var(--ink);
  text-decoration: none; font-size: var(--t-sm); line-height: 1.2; }
.sections a:hover, .langs a:hover { background: var(--mist); }
.langs a[aria-current] { color: var(--doc); font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: .35em; }
.langs { padding-left: 12px; border-left: 1px solid var(--line); }
@media (max-width: 1120px) { .sections { display: none; } .langs { border-left: 0; padding-left: 0; } }
@media (max-width: 640px) {
  .bar { gap: 8px; min-height: 64px; }
  .head-cta { display: none; }
  .brand { font-size: 1.1875rem; gap: 8px; }
  .brand img { width: 26px; height: 26px; }
  .langs a { padding: 10px 5px; font-size: var(--t-xs); }
}

/* hero */
.hero { padding-block: clamp(48px, 7vw, 104px) clamp(64px, 8vw, 120px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(40px, 5vw, 72px);
  align-items: center; }
.hero-text { display: grid; gap: 24px; justify-items: start; }
.eyebrow { font: 700 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--clar); }
.hero h1 .b { display: block; color: var(--doc); }
.hero .lead { max-width: 56ch; }
.cta-row { margin-top: 4px; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--t-sm); color: var(--ink-2); }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts .ico { color: var(--clar); }
.page-fig { margin: 0; display: grid; gap: 16px; }
.paper { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 1px 2px var(--zone), 0 32px 64px -32px var(--shadow); }
.paper img { width: 100%; border-radius: 3px; }
.zone { position: absolute; border: 2px solid var(--clar); background: var(--zone); border-radius: 2px; }
.zone .chip { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); padding: 3px 5px 2px; border-radius: 2px;
  background: var(--clar); color: var(--on-accent); font: 700 11px/1 var(--f-mono); white-space: nowrap; }
/* scripts/site_hero.py: boxes in percent of assets/bocm-pagina.webp (x, y, width, height) */
.z-h1 { left: 41.59%; top: 31.79%; width: 16.79%; height: 3.85%; }
.z-h2 { left: 41.29%; top: 36.36%; width: 17.47%; height: 3.85%; }
.z-p { left: 16.17%; top: 40.28%; width: 68.17%; height: 16.25%; }
.z-h3 { left: 39.81%; top: 59.45%; width: 15.19%; height: 3.02%; }
.z-table { left: 17.14%; top: 61.97%; width: 60.84%; height: 35.76%; }
.page-fig figcaption { display: grid; gap: 8px; justify-items: start; font-size: var(--t-sm); color: var(--ink-2); }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .page-fig { max-width: 560px; }
}
@media (max-width: 480px) { .zone .chip { font-size: 9px; padding: 2px 3px 1px; right: calc(100% + 3px); } }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px;
  font: 700 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .02em; }
.badge.pass { color: var(--pass); background: var(--pass-tint); }
.badge.fail { color: var(--fail); background: var(--fail-tint); }

/* the night band: what fixing costs vs. the fines */
.night { background: var(--night); color: var(--on-night); --focus: var(--clar-night); }
.night h2, .night h3 { color: var(--on-night); }
.night .tag { color: var(--clar-night); }
.night .lead, .night .fine { color: var(--on-night-2); }
.night a { color: var(--clar-night); }
.versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.5fr); gap: clamp(24px, 4vw, 64px);
  align-items: end; padding-block: clamp(32px, 4vw, 52px); border-block: 1px solid var(--night-line); }
.fig-label { color: var(--on-night-2); font-size: var(--t-sm); margin-bottom: 10px; }
.fig-num { font: 800 var(--t-num)/.92 var(--f-display); letter-spacing: -.04em; white-space: nowrap; }
.fig-a .fig-num { color: var(--clar-night); }
.fig-note { margin-top: 16px; color: var(--on-night-2); font-size: var(--t-sm); max-width: 40ch; }
.vs { font: 700 var(--t-xs)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-2);
  padding-bottom: 3.2em; }
.law-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(32px, 4vw, 52px); }
.law-grid h3 { font-size: var(--t-base); margin-bottom: 10px; }
.law-grid p { color: var(--on-night-2); font-size: var(--t-sm); line-height: 1.7; }
.law-grid .fine { margin-top: 16px; }
@media (max-width: 860px) {
  .versus { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .vs { padding: 0; }
  .law-grid { grid-template-columns: minmax(0, 1fr); }
}

/* calculator */
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; }
.calc-in { display: grid; gap: 26px; align-content: start; padding: clamp(24px, 3vw, 40px);
  border-right: 1px solid var(--line); }
.calc-out { display: grid; gap: 28px; align-content: start; padding: clamp(24px, 3vw, 40px); background: var(--mist); }
.field { display: grid; gap: 8px; }
.field label { font-weight: 700; }
.field input[type="number"] { width: 100%; max-width: 240px; padding: 10px 14px; border: 2px solid var(--line-strong);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
  font: 700 1.5rem/1.2 var(--f-display); font-variant-numeric: tabular-nums; }
.field input[aria-invalid="true"] { border-color: var(--fail); }
.range-row { display: flex; align-items: center; gap: 16px; }
.range-row input { flex: 1; min-width: 0; height: 32px; accent-color: var(--doc); }
.range-row output { min-width: 4.5ch; text-align: right; font: 700 1.25rem/1 var(--f-display);
  font-variant-numeric: tabular-nums; }
.calc-error { color: var(--fail); font-weight: 700; font-size: var(--t-sm); }
.calc-error:empty { display: none; }
.cost-label { font: 700 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 8px; }
.cost-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--doc);
  font: 800 clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem)/1 var(--f-display); letter-spacing: -.035em; }
.cost-vat { font: 400 var(--t-base)/1 var(--f-text); letter-spacing: 0; color: var(--ink-2); }
.cost .fine { margin-top: 10px; }
.tiers { list-style: none; border-top: 1px solid var(--line); }
.tier { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center;
  padding-block: 16px; border-bottom: 1px solid var(--line); }
.tier-name { font-weight: 700; }
.tier-range { color: var(--ink-2); font-size: var(--t-sm); }
.x-big { font: 800 clamp(1.375rem, 1.1rem + .8vw, 1.75rem)/1 var(--f-display); color: var(--fail); letter-spacing: -.02em; }
.x-txt { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--ink-2); }
.track { display: none; grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--fail-tint); overflow: hidden; }
.track i { display: block; height: 100%; min-width: 2px; background: var(--clar); }
.js .track { display: block; }
.calc-src { font-size: var(--t-xs); }
@media (max-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-in { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* process */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.step { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 2px solid var(--ink); }
.step-n { font: 800 var(--t-lg)/1 var(--f-display); color: var(--clar); letter-spacing: -.01em; }
.step p { color: var(--ink-2); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* the real example */
.ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ba-panel { display: grid; gap: 16px; grid-template-rows: auto auto auto 1fr; padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--line);
  border-radius: 10px; }
.ba-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ba-head h3 { font-size: var(--t-lg); }
.metric { font: 700 var(--t-base)/1.4 var(--f-display); }
.tree, .tree-empty { padding: 16px 18px; border-radius: var(--radius); background: var(--mist);
  font: 400 var(--t-sm)/1.75 var(--f-mono); }
.tree { list-style: none; }
.tree li { display: grid; grid-template-columns: auto minmax(0, 1fr); overflow-wrap: anywhere; }
.tree .r { color: var(--clar); font-weight: 700; margin-right: .7em; }
.tree .d1 { padding-left: 1.2em; } .tree .d2 { padding-left: 2.4em; } .tree .d3 { padding-left: 3.6em; }
.tree .d4 { padding-left: 4.8em; } .tree .d5 { padding-left: 6em; }
.tree-empty { display: grid; place-items: center; text-align: center; min-height: 10em; color: var(--fail);
  background: var(--paper); border: 2px dashed var(--line); }
.tree-empty p { max-width: 30ch; }
.tree-label { font: 700 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: -6px; }
.fixed-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(32px, 4vw, 48px); align-items: start; }
.fixed-grid h3 { margin-bottom: 14px; }
.fixed { list-style: none; display: grid; gap: 10px; margin-bottom: 16px; }
.fixed li, .includes li { display: flex; gap: 10px; align-items: baseline; }
.fixed .ico, .includes .ico, .human .ico { color: var(--clar); transform: translateY(.14em); }
.report-fig { margin: 0; display: grid; gap: 10px; }
.report-fig img { border: 1px solid var(--line); border-radius: 4px; }
@media (max-width: 860px) {
  .ba, .fixed-grid { grid-template-columns: minmax(0, 1fr); }
  .tree .d4 { padding-left: 3.6em; } .tree .d5 { padding-left: 4.2em; }
}

/* method */
.stds { margin: 0; border-top: 1px solid var(--line); }
.std { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 7fr); gap: 8px 32px;
  align-items: baseline; padding-block: 24px; border-bottom: 1px solid var(--line); }
.std dt { font: 700 var(--t-lg)/1.2 var(--f-display); }
.std dd { margin: 0; }
.std-org { font: 700 var(--t-xs)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.std-txt { color: var(--ink-2); }
.sub-h { margin-block: clamp(36px, 4vw, 52px) 20px; }
.human { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.human h4 { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.human p { color: var(--ink-2); font-size: var(--t-sm); }
@media (max-width: 860px) {
  .std { grid-template-columns: minmax(0, 1fr); }
  .human { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .human { grid-template-columns: minmax(0, 1fr); } }

/* data protection */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.trio > div { display: grid; gap: 12px; align-content: start; }
.trio p { color: var(--ink-2); }
.big-days { font: 800 clamp(3rem, 2rem + 3vw, 4.5rem)/1 var(--f-display); letter-spacing: -.035em; color: var(--doc); }
.trio .big-days { color: var(--doc); }
.site-note { margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 860px) { .trio { grid-template-columns: minmax(0, 1fr); } }

/* prices */
.prices-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px);
  align-items: start; }
.price { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.price th, .price td { padding-block: 22px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.price thead th { padding-block: 0 12px; font: 700 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.price tbody th { font: 700 var(--t-lg)/1.3 var(--f-display); }
.row-desc { display: block; font: 400 var(--t-sm)/1.5 var(--f-text); color: var(--ink-2); margin-top: 4px; }
.price .num { text-align: right; white-space: nowrap; }
.price td.num { font: 800 clamp(2rem, 1.3rem + 2vw, 2.875rem)/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.includes { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.pilot { display: grid; gap: 16px; padding: clamp(24px, 3vw, 36px); border-radius: 10px; background: var(--doc-tint); }
.pilot h3 { font-size: var(--t-lg); }
@media (max-width: 860px) { .prices-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .includes { grid-template-columns: minmax(0, 1fr); } }

/* agencies */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.split .sh { margin-bottom: 28px; }
.points { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px;
  border-top: 1px solid var(--line); }
.points li { display: grid; gap: 8px; align-content: start; padding-block: 24px; border-bottom: 1px solid var(--line); }
.points h3 { font-size: var(--t-base); }
.points p { color: var(--ink-2); font-size: var(--t-sm); }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .points { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq { max-width: 880px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; display: block; padding: 22px 52px 22px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: var(--t-lg); line-height: 1.35; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 2px;
  background: var(--doc); transition: transform .2s; }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq summary:hover h3 { color: var(--doc); }
.faq .a { padding-bottom: 26px; max-width: 70ch; color: var(--ink-2); }

/* contact */
.contact .sh { margin-bottom: 8px; }
.contact { display: grid; gap: 24px; justify-items: start; }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mail-label { font: 700 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mail { font: 700 var(--t-lg)/1.3 var(--f-mono); overflow-wrap: anywhere; }

/* legal pages */
.doc-page h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); margin-bottom: 18px; }
.doc-page h2 { font-size: var(--t-lg); margin: 40px 0 10px; letter-spacing: -.005em; }
.doc-page p { max-width: 70ch; }
.doc-page .lead { margin-bottom: 8px; }
.doc-page .back { margin-top: 48px; }
.doc-page a { overflow-wrap: anywhere; }

/* footer */
.foot { padding-block: 48px; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 64px; align-items: start; }
.foot-brand { display: grid; gap: 10px; max-width: 60ch; }
.foot nav { display: grid; gap: 10px; justify-items: end; }
.foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 4px; }
.foot-links a { display: inline-block; padding: 6px 8px; color: var(--ink); }
.foot-links a[aria-current] { font-weight: 700; color: var(--doc); }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot nav { justify-items: start; }
  .foot-links a { padding-left: 0; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .masthead nav, .head-cta, .skip, .calc, .cta-row { display: none; }
  .night { background: none; color: var(--ink); }
  .night h2, .night h3, .night .fig-num, .night p { color: var(--ink); }
}