/* ITB Design System — tokens + components. Web fonts from Google Fonts; PDF fonts are self-hosted. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@700;800&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap");
/* ITB Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --teal-700: #0c6f82;
  --teal-800: #08596a;
  --teal-900: #004757;
  --teal-300: #3dc8cc;
  --teal-100: #c4d4d4;
  --navy: #2a4579;
  --navy-100: #dee3ee;
  --orange-500: #ffb750;
  --orange-600: #e89b2a;
  --orange-100: #ffefd3;
  --coral: #ea6b66;
  --white: #ffffff;
  --paper: #fafafb;
  --paper-2: #f2f3f5;
  --card: var(--white);
  --ink: #15181c;
  --ink-2: #3a4048;
  --muted: #6a7380;
  --line: #e3e5e8;
  --control-border: #7b8490;
  --surface-inverse: var(--teal-900);
  --ink-inverse: #ffffff;
  --ink-inverse-muted: #cfe0e3;
  --accent: var(--teal-700);
  --cta: var(--orange-500);
  --on-cta: #1a1206;
  --focus: var(--teal-700);
  --status-meets: var(--teal-700);
  --status-partial: var(--orange-500);
  --status-gap: #8a929c;
  --success: var(--teal-700);
  --warn: oklch(72% 0.14 75);
  --danger: #bd413f;
}
[data-theme="dark"] {
  --paper: #121519;
  --paper-2: #1c2026;
  --card: #1c2026;
  --ink: #f2f3f5;
  --ink-2: #d3d7dc;
  --muted: #9aa3ae;
  --line: #2c3239;
  --control-border: #6b7480;
  --surface-inverse: var(--teal-700);
  --ink-inverse: #ffffff;
  --ink-inverse-muted: #e6f0f2;
  --accent: var(--teal-300);
  --cta: var(--orange-500);
  --on-cta: #1a1206;
  --focus: var(--teal-300);
  --status-meets: var(--teal-300);
  --status-partial: var(--orange-500);
  --status-gap: #6b7480;
  --success: var(--teal-300);
  --danger: var(--coral);
}
:root {
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px;
  --sp-48: 48px; --sp-64: 64px; --sp-96: 96px; --sp-128: 128px;
  --r-card: 8px; --r-btn: 6px; --r-chip: 4px; --r-pill: 999px; --r-none: 0;
  --container: 1280px; --measure: 540px;
  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* ITB Design System v2 — website language (Archivo / Inter / IBM Plex Mono). Values from tokens.css. */

.itb { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.itb *, .itb *::before, .itb *::after { box-sizing: border-box; }
.itb a { color: inherit; }
.itb p { color: var(--ink-2); text-wrap: pretty; margin: 0; }
.itb :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.itb-container { max-width: var(--container); margin: 0 auto; padding-inline: clamp(16px, 6vw, 120px); }

/* ── Type ── */
.itb-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.itb-eyebrow--gold { color: var(--orange-500); }
.itb-eyebrow--teal { color: var(--accent); }
.itb-display { font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; color: var(--ink); margin: 0; text-wrap: balance; }
.itb-display em { font-style: normal; color: var(--orange-500); }
.itb-h2 { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1.1; letter-spacing: -.015em; color: var(--ink); margin: 0; text-wrap: balance; }
.itb-h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.itb-h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.itb-lede { font-size: 19px; line-height: 1.5; max-width: var(--measure); }
.itb-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.itb-figure { font-family: var(--font-mono); font-weight: 500; font-size: 22px; color: var(--ink); }

/* ── Button ── */
.itb-btn { appearance: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 1;
  letter-spacing: -.005em; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--r-btn); cursor: pointer; text-decoration: none; transition: all .15s;
  background: var(--cta); border-color: var(--cta); color: var(--on-cta); }
.itb-btn:hover { background: var(--orange-600); border-color: var(--orange-600); }
.itb-btn--lg { font-size: 15px; padding: 14px 22px; }
.itb-btn--secondary { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.itb-btn--secondary:hover { background: var(--teal-800); border-color: var(--teal-800); }
.itb-btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.itb-btn--ghost:hover { background: var(--paper-2); }
.itb-btn--dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.itb-btn--link { background: transparent; border-color: transparent; color: var(--accent); padding-inline: 0; }
.itb-btn--link:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.itb-btn[data-arrow]::after { content: "→"; margin-left: 2px; }
.itb-btn[disabled] { opacity: .45; cursor: not-allowed; }
.itb-on-dark .itb-btn--ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.itb-on-dark .itb-btn--ghost:hover { background: rgba(255,255,255,.08); }

/* ── Pill ── */
.itb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-chip); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; border: 1px solid transparent; background: var(--teal-100); color: var(--teal-800); }
.itb-pill--success { background: #e3f0f2; color: var(--teal-800); }
.itb-pill--success::before { content: "✓"; }
.itb-pill--warn { background: var(--orange-100); color: oklch(42% 0.12 65); }
.itb-pill--danger { background: #fbe9e8; color: #a33a38; }
.itb-pill--ghost { background: var(--card); color: var(--ink-2); border-color: var(--line); }
.itb-pill--accent { background: var(--orange-500); color: var(--on-cta); }

/* ── Hex marker ── */
.itb-hex { position: relative; display: inline-grid; place-items: center; width: 44px; height: 40px; flex: none;
  font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: #fff; isolation: isolate; }
.itb-hex::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--teal-700);
  clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%); }
.itb-hex--gold { color: var(--on-cta); } .itb-hex--gold::before { background: var(--orange-500); }
.itb-hex--dark::before { background: var(--teal-900); }
.itb-hex--ghost { color: var(--muted); } .itb-hex--ghost::before { background: var(--line); }
.itb-hex--sm { width: 32px; height: 29px; font-size: 12px; }

/* ── Nav bar ── */
.itb-nav { display: flex; align-items: center; gap: 32px; padding: 18px 28px; background: var(--card); border-bottom: 1px solid var(--line); }
.itb-nav img { height: 30px; display: block; }
.itb-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex: 1; font-size: 14px; font-weight: 500; }
.itb-nav li { padding: 8px 14px; border-radius: var(--r-btn); }
.itb-nav li[aria-current] { background: var(--paper-2); }
.itb-nav--dark { background: var(--teal-800); border-color: rgba(255,255,255,.08); color: #fff; }
.itb-nav--dark img { filter: brightness(0) invert(1); }
.itb-nav--dark li[aria-current] { background: rgba(255,255,255,.08); }

/* ── Stat strip ── */
.itb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; padding-top: 26px; border-top: 1px solid var(--line); }
.itb-stats dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.itb-stats dd { margin: 4px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--ink); }
.itb-stats dd small { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.itb-on-dark .itb-stats { border-color: rgba(255,255,255,.16); }
.itb-on-dark .itb-stats dt { color: rgba(255,255,255,.62); }
.itb-on-dark .itb-stats dd { color: #fff; } .itb-on-dark .itb-stats dd small { color: rgba(255,255,255,.78); }

/* ── Dark band ── */
.itb-band { background: var(--surface-inverse); color: var(--ink-inverse); }
.itb-on-dark, .itb-band { --ink: #fff; }
.itb-band p, .itb-on-dark p { color: var(--ink-inverse-muted); }

/* ── Card ── */
.itb-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.itb-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.itb-card p { font-size: 14px; }
.itb-card__more { margin-top: auto; padding-top: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.itb-card__more::after { content: " →"; }
.itb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-24); }

/* ── Callout (also the "Why we ask" explainer) ── */
.itb-callout { background: var(--teal-100); border-left: 3px solid var(--teal-700); border-radius: 0 var(--r-chip) var(--r-chip) 0; padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; }
.itb-callout__k, details.itb-callout > summary { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--teal-900); }
.itb-callout__k::before, details.itb-callout > summary::before { content: "· "; }
.itb-callout p, .itb-callout > div { font-size: 15px; line-height: 1.55; color: #15181c; }
.itb-callout--orange { background: var(--orange-100); border-color: var(--orange-600); }
.itb-callout--orange .itb-callout__k, details.itb-callout--orange > summary { color: #5a3a05; }
.itb-callout--navy { background: var(--navy-100); border-color: var(--navy); }
.itb-callout--navy .itb-callout__k, details.itb-callout--navy > summary { color: var(--navy); }
details.itb-callout > summary { cursor: pointer; list-style: none; }
details.itb-callout > summary::-webkit-details-marker { display: none; }
details.itb-callout > summary::after { content: "  +"; }
details.itb-callout[open] > summary::after { content: "  −"; }
details.itb-callout:not([open]) { padding-block: 12px; }

/* ── Pull quote ── */
.itb-quote { margin: 0; padding: 18px 22px; border-left: 3px solid var(--orange-500); background: var(--paper); border-radius: 0 var(--r-chip) var(--r-chip) 0; }
.itb-quote p { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.45; letter-spacing: -.005em; color: var(--ink); }
.itb-quote cite { display: block; margin-top: 10px; font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ── Steps (hex-numbered) ── */
.itb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-24); }
.itb-steps li { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; }
.itb-steps .itb-hex { grid-row: span 2; }
.itb-steps b { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
.itb-steps span:not(.itb-hex) { font-size: 14px; color: var(--ink-2); }

/* ── CTA panel ── */
.itb-cta { position: relative; background: var(--teal-800); color: #fff; border-radius: var(--r-none); padding: 64px clamp(24px, 6vw, 80px);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.itb-cta .itb-display { color: #fff; font-size: clamp(36px, 5vw, 64px); margin-top: 12px; }
.itb-cta p { color: rgba(255,255,255,.82); margin-top: 18px; font-size: 17px; max-width: 520px; }
.itb-cta__form { background: var(--white); color: #15181c; border-radius: var(--r-card); padding: 28px; border: 1px solid var(--line); display: grid; gap: 12px; }
@media (max-width: 860px) { .itb-cta { grid-template-columns: 1fr; } }

/* ── Compare / data table ── */
.itb-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--card); font-size: 14px; line-height: 1.45; }
.itb-table th, .itb-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.itb-table thead th { border-top: 0; background: var(--paper-2); font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.itb-table tbody th { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.itb-table td { color: var(--ink-2); }
.itb-table tbody tr:nth-child(even) > * { background: var(--paper); }

/* ── Checklist ── */
.itb-checklist { list-style: none; margin: 0; padding: 0; }
.itb-checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.itb-checklist input { appearance: none; flex: none; width: 18px; height: 18px; margin: 2px 0 0; border: 1.5px solid var(--control-border); border-radius: var(--r-chip); background: var(--card); cursor: pointer; display: grid; place-content: center; }
.itb-checklist input:checked { background: var(--teal-700); border-color: var(--teal-700); }
.itb-checklist input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); }

/* ════ Scoping-tool additions ════ */

/* ── Stepper ── */
.itb-stepper { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; }
.itb-stepper li { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.itb-stepper li + li::before { content: ""; width: 24px; height: 1px; background: var(--line); margin-right: 2px; }
.itb-stepper li[data-state="current"] { color: var(--ink); }
@media (max-width: 720px) { .itb-stepper li > span:last-child { display: none; } .itb-stepper li[data-state="current"] > span:last-child { display: inline; } }

/* ── Choice chips ── */
.itb-chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.itb-chip { position: relative; }
.itb-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.itb-chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 14px; border: 1px solid var(--control-border); border-radius: var(--r-btn);
  background: var(--card); font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.25; transition: all .12s; }
.itb-chip:hover span { border-color: var(--accent); }
.itb-chip input:checked + span { border-color: var(--teal-700); background: var(--teal-700); color: #fff; }
:root[data-theme="dark"] .itb-chip input:checked + span { background: var(--teal-300); border-color: var(--teal-300); color: #121519; }
.itb-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.itb-chip input[type="checkbox"] + span::before { content: ""; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px; flex: none; opacity: .7; }
.itb-chip input[type="checkbox"]:checked + span::before { opacity: 1; background: currentColor; box-shadow: inset 0 0 0 2px var(--teal-700); }
:root[data-theme="dark"] .itb-chip input[type="checkbox"]:checked + span::before { box-shadow: inset 0 0 0 2px var(--teal-300); }
.itb-chip--card span { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; min-width: 210px; border-radius: var(--r-card); }
.itb-chip--card b { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.itb-chip--card small { font-size: 13px; font-weight: 400; opacity: .8; }
.itb-chip--card input[type="radio"] + span::before { display: none; }

/* ── Yes / Maybe / No ── */
.itb-ymn { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.itb-ymn__q { font-size: 15px; font-weight: 500; color: var(--ink); }
.itb-ymn__q small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.itb-ymn__seg { display: inline-flex; border: 1px solid var(--control-border); border-radius: var(--r-btn); overflow: hidden; background: var(--card); }
.itb-ymn__seg label { position: relative; }
.itb-ymn__seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.itb-ymn__seg span { display: block; min-width: 68px; text-align: center; padding: 9px 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.itb-ymn__seg label + label span { border-left: 1px solid var(--control-border); }
.itb-ymn__seg input:checked + span[data-v="yes"] { background: var(--teal-700); color: #fff; }
:root[data-theme="dark"] .itb-ymn__seg input:checked + span[data-v="yes"] { background: var(--teal-300); color: #121519; }
.itb-ymn__seg input:checked + span[data-v="maybe"] { background: var(--orange-500); color: var(--on-cta); }
.itb-ymn__seg input:checked + span[data-v="no"] { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--control-border); }
.itb-ymn__seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -3px; }
@media (max-width: 560px) { .itb-ymn { grid-template-columns: 1fr; } }

/* ── Field ── */
.itb-field { display: flex; flex-direction: column; gap: 5px; }
.itb-field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.itb-field input, .itb-field select, .itb-field textarea { font: inherit; font-size: 15px; color: var(--ink); height: 42px; padding: 0 14px; width: 100%;
  border: 1px solid var(--control-border); border-radius: var(--r-btn); background: var(--paper); }
.itb-field input[type="number"] { font-family: var(--font-mono); font-weight: 500; font-size: 18px; max-width: 160px; }
.itb-field input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--teal-700); }
.itb-field small { font-size: 12px; color: var(--muted); }
.itb-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }

/* ── Question card ── */
.itb-question { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px 32px; display: grid; gap: 14px; }
.itb-question__head { display: flex; gap: 14px; align-items: flex-start; }
.itb-question__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.itb-question__t { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: 2px 0 0; }
.itb-question__h { font-size: 15px; color: var(--ink-2); max-width: 620px; }

/* ── Recommendation ── */
.itb-reco { background: var(--card); border: 2px solid var(--teal-700); border-radius: var(--r-card); padding: 28px 32px; display: grid; gap: 12px; }
:root[data-theme="dark"] .itb-reco { border-color: var(--teal-300); }
.itb-reco__t { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.itb-reco p { max-width: 640px; }
.itb-reco__why { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; font-size: 14px; color: var(--ink-2); }
.itb-reco__why li { display: flex; gap: 8px; }
.itb-reco__why li::before { content: "·"; font-family: var(--font-mono); color: var(--accent); font-weight: 600; }
.itb-reco__alt { font-size: 14px; color: var(--ink-2); }
.itb-reco__alt b { color: var(--ink); }

/* ── Fit marker / meter ── */
.itb-fit { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--ink); }
.itb-fit::before { content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.itb-fit--meets::before { background: var(--status-meets); }
.itb-fit--partial::before { background: linear-gradient(90deg, var(--status-partial) 50%, transparent 50%); box-shadow: inset 0 0 0 2px var(--status-partial); }
.itb-fit--gap { color: var(--muted); }
.itb-fit--gap::before { box-shadow: inset 0 0 0 2px var(--status-gap); }
.itb-meter { display: inline-flex; gap: 3px; }
.itb-meter i { width: 14px; height: 6px; border-radius: 1px; background: var(--line); }
.itb-meter i.on { background: var(--teal-700); }
:root[data-theme="dark"] .itb-meter i.on { background: var(--teal-300); }

/* ── Outcome table ── */
.itb-otable { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.itb-otable th, .itb-otable td { padding: 12px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.itb-otable thead th { border-top: 0; background: var(--paper-2); vertical-align: bottom; font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.itb-otable thead th:first-child { width: 30%; font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.itb-otable thead small { display: block; margin-top: 4px; font-family: var(--font-sans); font-weight: 400; font-size: 12px; letter-spacing: 0; color: var(--ink-2); }
.itb-otable tbody th { font-weight: 500; color: var(--ink); }
.itb-otable .is-reco { background: color-mix(in srgb, var(--teal-100) 35%, var(--card)); }
.itb-otable thead .is-reco { box-shadow: inset 0 3px 0 var(--teal-700); }
.itb-otable thead .is-reco .itb-pill { margin-bottom: 6px; }
.itb-otable tfoot th, .itb-otable tfoot td { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.itb-ans { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; margin-left: 6px; border-radius: 3px; vertical-align: 1px; }
.itb-ans--yes { background: var(--teal-700); color: #fff; }
.itb-ans--maybe { background: var(--orange-500); color: var(--on-cta); }

/* ── Gap flag ── */
.itb-gap { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.itb-gap::before { content: "!"; display: grid; place-content: center; width: 24px; height: 22px; background: var(--danger); color: #fff; font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%); }
.itb-gap b { display: block; font-weight: 600; color: var(--ink); font-size: 15px; }
.itb-gap span { color: var(--ink-2); font-size: 14px; }

/* ════ Print: A4 page (always light, literal values, square corners — radii are a screen affordance) ════ */
.itb-page, .itb-page * { border-radius: 0 !important; }
.itb-page { width: 210mm; min-height: 297mm; max-height: 297mm; overflow: hidden; background: #fff; color: #15181c; position: relative; margin: 10mm auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.1); font-family: var(--font-sans); font-size: 10pt; line-height: 1.55; display: flex; flex-direction: column; }
.itb-page__in { padding: 14mm 15mm 0; flex: 1; }
.itb-page__eyebrow { font-family: var(--font-mono); font-size: 8pt; letter-spacing: .12em; text-transform: uppercase; color: #0c6f82; }
.itb-page__title { font-family: var(--font-display); font-weight: 800; font-size: 24pt; line-height: 1.1; letter-spacing: -.015em; color: #15181c; margin: 2mm 0 5mm; }
.itb-page__q { font-family: var(--font-display); font-weight: 700; font-size: 13pt; line-height: 1.2; color: #15181c; margin: 6mm 0 1.5mm; }
.itb-page__help { font-size: 8.5pt; color: #3a4048; margin: 0 0 2.5mm; }
.itb-page__label { font-family: var(--font-mono); font-size: 6.5pt; letter-spacing: .1em; text-transform: uppercase; color: #6a7380; margin-bottom: 1mm; }
.itb-page__foot { display: flex; align-items: center; justify-content: space-between; padding: 4mm 15mm 8mm; font-family: var(--font-mono); font-size: 7pt; letter-spacing: .06em; text-transform: uppercase; color: #6a7380; border-top: 1px solid #e3e5e8; margin: 0 15mm; padding-inline: 0; }
.itb-page__foot img { height: 15px; }
.itb-page--cover { background: #004757; color: #fff; }
.itb-page--cover .itb-page__in { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 14mm; }
.itb-page--cover .itb-page__foot { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.18); }
.itb-page--cover .itb-page__foot img { filter: brightness(0) invert(1); }
.itb-page .itb-pfield { border: 1px solid #7b8490; border-radius: 0; height: 8mm; background: #fafafb; }
.itb-page .itb-pbox { display: inline-block; width: 3.6mm; height: 3.6mm; border: 1px solid #7b8490; border-radius: 0; vertical-align: -.6mm; margin-right: 1.5mm; background: #fff; }
.itb-page .itb-pcallout { background: #e6efef; border-left: 2px solid #0c6f82; border-radius: 0; padding: 2.5mm 3.5mm; font-size: 8.5pt; color: #15181c; }

@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; }
  .itb-page { margin: 0 !important; box-shadow: none !important; width: 100% !important; height: 297mm !important; break-after: page; }
  .itb-page:last-child { break-after: avoid; }
  .itb-noprint { display: none !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ── Dark-theme callout tints ── */
:root[data-theme="dark"] .itb-callout { background: color-mix(in srgb, var(--teal-700) 28%, var(--card)); border-color: var(--teal-300); }
:root[data-theme="dark"] .itb-callout--orange { background: color-mix(in srgb, var(--orange-500) 16%, var(--card)); border-color: var(--orange-500); }
:root[data-theme="dark"] .itb-callout--navy { background: color-mix(in srgb, var(--navy) 45%, var(--card)); border-color: #8fa3cc; }
:root[data-theme="dark"] .itb-callout p, :root[data-theme="dark"] .itb-callout > div { color: var(--ink); }
:root[data-theme="dark"] .itb-callout__k, :root[data-theme="dark"] details.itb-callout > summary { color: var(--ink); }
:root[data-theme="dark"] .itb-pill { background: color-mix(in srgb, var(--teal-300) 18%, var(--card)); color: var(--teal-300); }

:root[data-theme="dark"] .itb-gap::before { color: #121519; }
:root[data-theme="dark"] .itb-pill--success { background: color-mix(in srgb, var(--teal-300) 18%, var(--card)); color: var(--teal-300); }
:root[data-theme="dark"] .itb-pill--danger { background: color-mix(in srgb, var(--coral) 18%, var(--card)); color: var(--coral); }