/* Tokens this page needs on top of the site stylesheet, in the site's own palette. */
:root {
  --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --ink-2: #373737;
  --line-strong: #bdbdbd;
  --accent: #e65143;
  --dark: #203047;
  --dark-2: #293d58;
  --dark-line: #42536c;
  --dark-text: #bdbdbd;
  --measure: 62ch;
  --section: 100px;
  --r: 14px;
  --r-lg: 20px;
  --comic-paper: #fffaf0;
  --comic-ink: #203047;
  --comic-blue: #cfe5ee;
  --comic-coral: #ef705d;
  --comic-shadow: #d9cfbd;
}

/* Full-width bands, matching the landing page's section rhythm. */
.band { padding: var(--section) 0; }
.band-surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-dark { background: var(--dark); color: #fff; }
.band-dark h2, .band-dark h3 { color: #fff; }

/* Mortgage Documents. Builds on ../styles.css; adds the comic framing and the module layout. */

.sheet { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; max-width: none; margin: 0; padding: 88px 0 52px;
  background-color: #f3f6f7;
  background-image: linear-gradient(rgba(32,48,71,.035) 1px, transparent 1px);
  background-size: 100% 32px;
}
.hero .wrap { position: relative; z-index: 1; }
.hero .eyebrow { margin-bottom: 12px; }
.hero h1 { max-width: 18ch; font-size: clamp(48px, 7vw, 86px); line-height: .98; text-wrap: balance; }
.hero-copy { max-width: 40em; font-size: clamp(18px, 1.7vw, 20px); color: var(--ink-2); margin-top: 28px; }
.hero .button { border-radius: 999px; padding-inline: 22px; }

.hero .button:focus-visible,
.lang-switch a:focus-visible,
.contact-mail-line a:focus-visible,
.footer-made-by a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 4px;
}

/* ---------- Comic panels ---------- */
/* The panel is the drawing itself: a rounded frame on the page ground, no card around it. */
.hero-strip { padding: 0 0 var(--section); background: #f3f6f7; border-bottom: 1px solid var(--line); }
.strip { display: grid; gap: 20px; }
.strip.three { grid-template-columns: repeat(3, 1fr); }
.strip.two { grid-template-columns: repeat(2, 1fr); max-width: 800px; }
.cmc { width: 100%; height: auto; display: block; background: none; border: 0; padding: 0; }
.cmc { filter: drop-shadow(0 8px 0 rgba(32,48,71,.09)); }
.cmc .frame { fill: var(--comic-paper); stroke: var(--comic-ink); stroke-width: 2.8; rx: 13px; }

/* Drawing vocabulary used by the symbols and the panels */
.ln { fill: var(--comic-paper); stroke: var(--comic-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fi { fill: var(--comic-ink); stroke: var(--comic-ink); }
.fr { fill: var(--comic-coral); stroke: var(--comic-ink); }
.fg { fill: #d8d8d8; stroke: var(--ink); }
.wh { stroke: var(--comic-paper); fill: none; }
.led { fill: var(--comic-coral); stroke: var(--comic-ink); stroke-width: 1.5; }
.thin { stroke-width: 1.6; fill: none; stroke: var(--comic-ink); stroke-linecap: round; }
.fb { stroke: #2b5fd9; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.strike { stroke: var(--comic-coral); stroke-width: 3.5; }
.sig { stroke: var(--comic-ink); stroke-width: 2.2; fill: none; }
.mrz { stroke: var(--comic-ink); stroke-width: 3; stroke-dasharray: 3 3; }
.bar { fill: var(--comic-ink); stroke: none; }
.tail { fill: none; stroke: var(--comic-ink); stroke-width: 2; stroke-linecap: round; }
.flowarrow { fill: none; stroke: var(--comic-coral); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.speed { fill: none; stroke: var(--comic-ink); stroke-width: 2; stroke-linecap: round; opacity: .45; }
.bolt { fill: #f2d16b; stroke: var(--comic-ink); stroke-width: 2.2; stroke-linejoin: round; }
.reaction { fill: none; stroke: var(--comic-coral); stroke-width: 3; stroke-linecap: round; }
.score { fill: none; stroke: var(--comic-coral); stroke-width: 4; stroke-linecap: round; }
.output-fly, .result-sheet { stroke-width: 2.2; }
.apilabel { font: 600 9px/1 var(--mono); fill: var(--comic-paper); text-anchor: middle; letter-spacing: .08em; stroke: none; }
.cap { font: 500 11px/1 var(--mono); fill: var(--muted); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
.doctext { font: 600 15px/1 var(--sans); fill: var(--ink); }
.doctext.small { font: 400 11px/1 var(--sans); }
.bub {
  display: inline-block; box-sizing: border-box; max-width: 100%; margin: 0; padding: 8px 11px 7px;
  border: 2px solid var(--comic-ink); border-radius: 14px 14px 14px 4px; background: #fff;
  font-family: "Patrick Hand", "Comic Sans MS", cursive; font-size: 16.5px; line-height: 1.08; color: var(--comic-ink);
  box-shadow: 3px 3px 0 var(--comic-shadow);
}

/* The cast deliberately uses a softer editorial vocabulary than a newspaper strip:
   offset shapes, restrained colour, and a document-scanner sidekick on wheels. */
.character .skin { fill: #f3c9a8; }
.character .hair, .character .shoe { fill: var(--comic-ink); }
.character.noor .jacket { fill: var(--comic-blue); }
.character.bram .vest { fill: #f2d16b; }
.character .paper, .paper { fill: #fff; }
.prop-front { stroke-width: 2.5; }
.pip .machine { fill: var(--comic-blue); stroke-width: 3.3; }
.pip .slot { fill: none; stroke-width: 5; }
.pip .eye { fill: #fff; }
.pip .pupil, .pip .wheel { fill: var(--comic-ink); }
.pip .screen-mouth { fill: none; stroke-width: 2.5; }
.pip .shadow { fill: var(--comic-shadow); stroke: none; opacity: .65; }

/* ---------- How it works ---------- */
.how { padding: var(--section) 0; }
.section-intro { row-gap: 20px; }
.section-intro .eyebrow { margin-bottom: 0; }
.section-intro h2 { text-wrap: balance; }
.section-intro p { line-height: 1.68; }
.how .section-intro { grid-template-columns: 1fr; }
.how .section-intro h2 { max-width: 18ch; }
.modules .section-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
.modules .section-intro h2 { max-width: 17ch; }
.reliable .section-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
.reliable .section-intro h2 { max-width: 17ch; }
.who .section-intro { grid-template-columns: 1fr; }
.who .section-intro h2 { max-width: 21ch; }
.how-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.steps, .pipeline { list-style: none; margin: 0; padding: 0; }
.steps li { padding: 24px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 46px 1fr; gap: 0 12px; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-num { font: 500 12px/1.5 var(--mono); color: var(--accent); padding-top: 5px; }
.steps h3, .pipeline h3 { font-size: 20px; }
.steps p, .pipeline p { grid-column: 2; color: var(--muted); font-size: 15.5px; margin: 8px 0 0; max-width: 46ch; }
.code-card {
  min-width: 0; max-width: 100%; background: var(--dark); color: #e6e6e6;
  border-radius: var(--r-lg); padding: 28px 30px 22px; overflow-x: auto;
  border: 1px solid #292929;
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.55);
}
.code-card pre { margin: 0; font: 400 12px/1.72 var(--mono); white-space: pre; }
.c-m { color: #fff; font-weight: 500; }
.c-k { color: #9a9a9a; }
.c-r { color: #bdbdbd; }
.code-cap { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--dark-line); font: 400 12px/1.5 var(--mono); color: #8a8a8a; }

/* ---------- Modules ---------- */
.modules { padding: var(--section) 0; background: #f2f6f7; }
.module {
  background: var(--surface); border: 1px solid #d5dfe2; border-radius: var(--r-lg);
  padding: 36px 36px 34px; margin-bottom: 24px;
}
.module:last-child { margin-bottom: 0; }
.module-head {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: start;
  margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.module-index { font: 500 13px/1.7 var(--mono); color: var(--accent); }
.module-title h3 { font-size: 25px; line-height: 1.15; text-wrap: balance; }
.module-doc { color: var(--muted); font-size: 15px; margin-top: 4px; }
.module-meta { display: flex; gap: 8px; padding-top: 3px; }
.pill {
  display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 6px 13px; font: 500 12px/1 var(--sans); white-space: nowrap; background: var(--surface);
}
.pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pill.code { font-family: var(--mono); letter-spacing: .06em; background: var(--ink); color: var(--surface); border-color: var(--ink); }
.module-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; }
.module-body .label { font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 10px; }
.module-body p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.67; }
.spot-grid { display: grid; grid-template-columns: 400px 1fr; gap: 48px; align-items: start; }
.spot-grid .module-body { grid-template-columns: 1fr; gap: 22px; margin-top: 0; }

/* ---------- Reliability ---------- */
.reliable { padding: var(--section) 0; }
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.pipeline li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 22px 28px; }
.pipeline .step-num { margin-bottom: 26px; padding: 0; }
.pipeline p { grid-column: auto; font-size: 14.5px; margin-top: 10px; }
.confidence {
  margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 40px 40px 42px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 48px; align-items: start;
}
.confidence h3 { font-size: 22px; max-width: 14ch; }
.tiers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.tiers li { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; color: var(--muted); font-size: 15px; }
.tier-bar { display: block; height: 10px; background: var(--soft); border-radius: 999px; position: relative; overflow: hidden; }
.tier-bar::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--ink); border-radius: 999px; }
.tier-bar.low::after { background: var(--accent); }

/* ---------- Who ---------- */
.who { padding: 0 0 var(--section); }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.who-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; }
.who-card h3 { font-size: 22px; }
.who-card p { color: var(--muted); font-size: 15.5px; margin: 14px 0 0; }
.who-note { margin: 28px 0 0; color: var(--muted); font-size: 15px; max-width: var(--measure); padding-left: 20px; border-left: 2px solid var(--accent); }

.contact-mail-line a { transition: color .18s ease, border-color .18s ease; }
.contact-mail-line a:hover { color: var(--accent); border-color: var(--ink); }
.approach-box .eyebrow, .contact-card .eyebrow { margin-bottom: 12px; }
.approach-box h2 { max-width: 15ch; text-wrap: balance; }
.contact-card h2 { max-width: 19ch; text-wrap: balance; }

/* A product footer rather than a second navigation: attribution and one clear route home. */
.footer { min-height: 154px; border-top: 1px solid var(--line); }
.footer-company { display: flex; flex-direction: column; gap: 5px; }
.footer-made-by {
  display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: baseline;
  color: var(--muted); font: 400 14px/1.5 var(--sans);
}
.footer-made-by a { display: inline-flex; gap: 7px; align-items: center; color: var(--ink); text-decoration: none; }
.footer-made-by a strong { font-size: 14px; }
.footer-arrow { color: var(--accent); transition: transform .18s ease; }
.footer-made-by a:hover .footer-arrow { transform: translateX(4px); }
.footer-address { color: var(--muted); }

/* ---------- Practicalities (dark) ---------- */
.practical-list { list-style: none; margin: 0; padding: 0; }
.practical-list li { color: #bdbdbd; font-size: 15.5px; padding: 14px 0; border-bottom: 1px solid #333; display: flex; gap: 12px; align-items: baseline; }
.practical-list li:first-child { padding-top: 0; }
.practical-list li::before { content: "→"; color: var(--accent); flex: none; }

@media (max-width: 1000px) {
  .spot-grid { grid-template-columns: 1fr; gap: 28px; }
  .spot-grid .cmc { max-width: 440px; }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .module-body { grid-template-columns: 1fr; gap: 22px; }
  .how-grid { grid-template-columns: 1fr; gap: 36px; }
  .modules .section-intro, .reliable .section-intro { column-gap: 36px; }
}

@media (max-width: 760px) {
  .hero { padding: 54px 0 40px; }
  .hero h1 { font-size: 44px; }
  .brand { margin-left: 0; }
  .lang-switch { gap: 0; }
  .lang-switch a { padding-inline: 6px; }
  .strip.three, .strip.two { grid-template-columns: 1fr; max-width: 420px; }
  .who-grid, .confidence, .practical-grid { grid-template-columns: 1fr; }
  .code-card { padding: 22px 18px 18px; }
  .module { padding: 26px 22px 28px; }
  .module-head { grid-template-columns: 36px 1fr; gap: 12px; }
  .module-meta { grid-column: 2; padding-top: 10px; }
  .module-title h3 { font-size: 22px; }
  .pipeline { grid-template-columns: 1fr; }
  .confidence { padding: 28px 24px 30px; gap: 28px; }
  .tiers li { grid-template-columns: 100px 1fr; gap: 16px; }
  .footer { min-height: 0; padding-block: 34px; }
  .modules .section-intro, .reliable .section-intro { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --section: 64px; }
}

/* The practicalities list is taller than its heading, so the box reads better from the top. */
.approach-box { align-items: start; }

/* ---------- Product navigation: Mortgage Documents and its terms, in the header and the footer ---------- */
/* The Mortgage Documents page shows only its own name; the terms page adds "› Terms" after it, like the
   Food Moments breadcrumbs. The text is as large as the logo's lettering: in logo.png the capitals are
   21.5px of its 461px width, and Inter's capitals are 0.727em, so 0.0642 of the logo width per em. */
.site-nav {
  display: flex; align-items: center; gap: 12px;
  margin: 0 auto 0 30px; padding-left: 30px; min-height: 32px;
  border-left: 1px solid var(--line);
  font: 500 calc(var(--logo-w) * 0.0642)/1.2 var(--sans);
}
.site-nav .sep { color: var(--muted); position: relative; top: calc(var(--logo-w) * 0.0336 - 0.364em); }
.site-nav a, .footer-nav a { color: var(--muted); text-decoration: none; transition: color .18s ease; }
/* The menu text sits on the same line as the bottom of the lettering in the logo. In logo.png the
   lettering ends at row 43 of 55, which is 15.5px below the image's centre (0.0336 of its 461px
   width); an Inter line's baseline already sits 0.364em below its centre. */
.site-nav a { white-space: nowrap; position: relative; top: calc(var(--logo-w) * 0.0336 - 0.364em); }
.site-nav a:hover, .footer-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.footer-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.site-nav a:focus-visible, .footer-nav a:focus-visible, .translation-note a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 4px;
}

.footer-nav {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  padding-top: 30px; border-top: 1px solid var(--line);
  font: 500 14px/1.4 var(--sans);
}
.footer-nav + .footer { border-top: 0; min-height: 124px; }

/* Below this width "Mortgage Documents › Algemene voorwaarden" no longer fits next to the logo. */
@media (max-width: 1140px) {
  .site-header { flex-wrap: wrap; padding-top: 16px; }
  .site-nav { order: 3; width: 100%; margin: 14px 0 0; padding: 12px 0 14px; border-left: 0; border-top: 1px solid var(--line); }
  .site-nav a, .site-nav .sep { top: 0; }
}
@media (max-width: 760px) {
  .site-nav { gap: 20px; }
  .footer-nav + .footer { min-height: 0; padding-top: 22px; }
}

/* ---------- Terms and conditions ---------- */
/* One readable column. Clause numbers hang in the margin in the mono face, so the text lines up
   and a clause can be found by its number the way it is found in the Word document. */
.terms-doc { padding-block: 76px 100px; }
.terms-doc [id] { scroll-margin-top: 24px; }
.terms-doc h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.05; font-weight: 650; max-width: 22ch; text-wrap: balance; margin: 0 0 16px; }
.terms-doc h1 + p { font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 52px; }
.terms-doc p, .terms-doc li { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.terms-doc p { margin: 0 0 14px; }
.terms-doc h2 {
  font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; font-weight: 620; text-wrap: balance;
  margin: 96px 0 24px; padding-top: 40px; border-top: 1px solid var(--line);
}
.terms-doc h2.annex { font-size: clamp(21px, 2.6vw, 26px); margin-top: 80px; }
.terms-doc h3.clause {
  display: grid; grid-template-columns: 52px 1fr; gap: 0 12px; align-items: baseline;
  font-size: 19px; font-weight: 620; letter-spacing: -.015em; line-height: 1.3;
  margin: 46px 0 14px;
}
.terms-doc .num { font: 500 13px/1 var(--mono); color: var(--accent); white-space: nowrap; }
.terms-doc .item { display: grid; grid-template-columns: 52px 1fr; gap: 0 12px; align-items: baseline; }
.terms-doc ul { margin: 0 0 18px; padding-left: 1.25em; }
.terms-doc ul.lvl2 { margin-left: 64px; }
.terms-doc li { margin: 0 0 6px; padding-left: 4px; }
.terms-doc li::marker { color: var(--accent); }
.terms-doc .lead-in { margin-top: 56px; }
.terms-doc .lead-in + p { margin-bottom: 0; }

.translation-note { margin: 0 0 56px; padding: 4px 0 4px 20px; border-left: 2px solid var(--accent); }
.terms-doc .translation-note p { font-size: 15px; color: var(--muted); margin: 0 0 8px; }
.terms-doc .translation-note strong { color: var(--ink); }
.translation-note a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.translation-note a:hover { color: var(--accent); }

.table-scroll { overflow-x: auto; margin: 28px 0 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.terms-doc table { width: 100%; min-width: 640px; border-collapse: collapse; }
.terms-doc th {
  text-align: left; padding: 14px 16px; background: var(--soft); border-bottom: 1px solid var(--line);
  font: 500 11.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.terms-doc td { vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.terms-doc tr:last-child td { border-bottom: 0; }
.terms-doc td p, .terms-doc td li { font-size: 14.5px; line-height: 1.55; margin: 0; }
.terms-doc td:first-child p { font-weight: 600; color: var(--ink); }
.terms-doc td ul { margin: 0; padding-left: 1.1em; }
.terms-doc td li + li { margin-top: 6px; }

@media (max-width: 760px) {
  .terms-doc { padding-block: 48px 72px; }
  .terms-doc h3.clause, .terms-doc .item { grid-template-columns: 44px 1fr; gap: 0 8px; }
  .terms-doc ul.lvl2 { margin-left: 52px; }
  .terms-doc h2 { margin-top: 72px; padding-top: 32px; }
}

/* Privacy section and the terms line under the contact address */
.who-note a, .contact-terms a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--accent); }
.who-note a:hover, .contact-terms a:hover { color: var(--accent); border-color: var(--ink); }
.contact-card .contact-terms { margin-top: 26px; }