/* InsuranceFX -- assets/css/site.css
   Purpose: site styles for insurancefx.co.uk. Brand navy 0d2640 and purple 6f4db8 from the logo, Newsreader headings, IBM Plex Sans body, IBM Plex Mono figures (shared with the other CommercialFX brands).
   Version: 1.1 2026-11-02 20:20:00
   Changelog:
   1.1 2026-11-02 20:20:00 - header logo twice the size (300px wide on desktop, as wide as fits beside the menu button on phones), header 88px tall, desktop header in two rows with the navigation under the logo
   1.0 2026-11-02 19:50:00 - first build, adapted from the FundFX styles with the InsuranceFX purple and a split hero */

@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-latin-wght-italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --navy: #0d2640;
  --navy-2: #163a5c;
  --navy-3: #22496f;
  --ink: #0d2640;
  --muted: #4a5a6c;
  --accent: #6f4db8;
  --accent-text: #5b3aa6;
  --accent-light: #b9a3ef;
  --mist: #eef2f6;
  --stone: #f4f1ea;
  --rule: #d6dee7;
  --paper: #ffffff;
  --ok: #1d6b45;
  --err: #a32020;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  --wrap: 1200px;
  --gutter: 16px;
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--navy); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); margin-top: 1.8em; }
h3 { font-size: 1.3rem; margin-top: 1.5em; }
p, ul, ol, table, dl { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.35em; }
strong { font-weight: 600; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 900px) { :root { --gutter: 32px; } }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { top: 8px; color: #fff; }
.mono, .fig { font-family: var(--mono); font-feature-settings: 'tnum' 1; }

/* top strip */
.strip { background: var(--navy); color: #c9d4e0; font-size: 0.8rem; }
.strip .wrap { display: flex; gap: 18px; justify-content: space-between; align-items: center; padding-top: 7px; padding-bottom: 7px; flex-wrap: wrap; }
.strip a { color: #fff; }
.strip .strip-right { display: none; }
@media (min-width: 760px) { .strip .strip-right { display: block; } }

/* header */
.site-head { background: #fff; border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 50; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 88px; gap: 20px; }
.brand { display: block; width: 300px; max-width: calc(100vw - 150px); flex: none; }
.brand img { width: 100%; height: auto; }
.nav-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--rule); color: var(--navy); font: 500 0.95rem var(--sans); padding: 9px 12px; border-radius: var(--radius); cursor: pointer; }
.nav-toggle .bars { width: 18px; height: 12px; position: relative; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.nav-toggle .bars::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }
.site-nav { display: none; }
.site-nav.open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--rule); max-height: calc(100vh - 100px); overflow-y: auto; padding: 8px var(--gutter) 24px; box-shadow: 0 16px 30px rgba(13,38,64,0.12); }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.nav-group > button, .nav-top > a { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 14px 0; font: 500 1rem var(--sans); color: var(--navy); text-decoration: none; cursor: pointer; text-align: left; }
.nav-group > button::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); margin: -4px 4px 0 10px; transition: transform .15s; }
.nav-group > button[aria-expanded='true']::after { transform: rotate(-135deg); margin-top: 4px; }
.nav-panel { display: none; padding: 6px 0 12px; }
.nav-panel.open { display: block; }
.nav-panel a { display: block; padding: 9px 0 9px 12px; color: var(--navy); text-decoration: none; border-left: 2px solid var(--rule); }
.nav-panel a span { display: block; font-size: 0.83rem; color: var(--muted); line-height: 1.4; }
.nav-panel a:hover, .nav-panel a[aria-current='page'] { border-left-color: var(--accent); background: var(--mist); }
.nav-cta { margin-top: 16px; display: grid; gap: 10px; }
.site-head .head-cta { display: none; }
@media (min-width: 1240px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.open { display: block; position: static; box-shadow: none; border: 0; padding: 0; max-height: none; overflow: visible; }
  .site-nav > ul { display: flex; gap: 2px; align-items: center; }
  .nav-group { position: relative; }
  .nav-group > button, .nav-top > a { border: 0; padding: 10px 11px; font-size: 0.93rem; width: auto; white-space: nowrap; }
  .nav-group > button::after { width: 6px; height: 6px; margin-left: 8px; }
  .nav-top > a[aria-current='page'], .nav-group.current > button { color: var(--accent-text); }
  .nav-panel { position: absolute; top: calc(100% + 14px); left: -8px; width: 340px; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--accent); padding: 10px; box-shadow: 0 18px 40px rgba(13,38,64,0.14); }
  .nav-panel a { border-left: 0; padding: 10px 12px; }
  .nav-cta { display: none; }
  .site-head .head-cta { display: inline-flex; white-space: nowrap; }
  /* two rows on desktop so the larger logo fits: logo and button on top, navigation underneath; not sticky, to keep the band short on screen */
  .site-head { position: relative; }
  .site-head .wrap { flex-wrap: wrap; row-gap: 0; padding-top: 12px; }
  .site-nav, .site-nav.open { order: 3; flex: 0 0 100%; margin: 4px 0 6px -11px; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 0.98rem/1.2 var(--sans); padding: 14px 22px; border-radius: var(--radius); border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-text); border-color: var(--accent-text); color: #fff; }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: #fff; }
.btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-light:hover { background: #fff; color: var(--navy); }
.btn-small { padding: 10px 16px; font-size: 0.9rem; }
.btn .arrow { display: inline-block; width: 14px; height: 2px; background: currentColor; position: relative; }
.btn .arrow::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.textlink { font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.textlink:hover { color: var(--accent-text); }

/* breadcrumb */
.crumbs { font-size: 0.85rem; color: var(--muted); padding: 18px 0 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--rule); }
.crumbs a { color: var(--muted); }

/* page head */
.page-head { padding: 28px 0 32px; border-bottom: 1px solid var(--rule); }
.page-head .inner { max-width: 820px; }
.eyebrow { font: 600 0.78rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 14px; }
.answer { font-size: 1.2rem; line-height: 1.55; border-left: 3px solid var(--accent); padding-left: 18px; margin: 0 0 18px; }
.reviewed { font-size: 0.85rem; color: var(--muted); margin: 0; }
.page-head .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* body grid */
.page-body { display: grid; gap: 40px; padding: 8px 0 56px; }
@media (min-width: 1000px) { .page-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; } }
.prose { max-width: 740px; }
.prose > h2:first-child { margin-top: 1.2em; }
.prose h2 { scroll-margin-top: 100px; }
.prose .lead-a { font-weight: 500; }
.rail { font-size: 0.93rem; }
@media (min-width: 1000px) { .rail-inner { position: sticky; top: 104px; padding-top: 40px; } }
.toc { border-left: 2px solid var(--rule); padding-left: 16px; margin-bottom: 28px; }
.toc p { font: 600 0.75rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0 0 8px; line-height: 1.35; }
.toc a { color: var(--navy); text-decoration: none; }
.toc a:hover { color: var(--accent-text); text-decoration: underline; }
.rail-box { background: var(--navy); color: #dbe3ec; padding: 22px; border-radius: var(--radius); }
.rail-box h2 { color: #fff; font-size: 1.25rem; margin: 0 0 8px; }
.rail-box p { margin-bottom: 14px; }
.rail-box .btn { width: 100%; margin-bottom: 10px; }
.rail-note { margin-top: 18px; padding: 14px 16px; background: var(--stone); font-size: 0.86rem; line-height: 1.5; }

/* content blocks */
.callout { background: var(--stone); border-left: 3px solid var(--accent); padding: 18px 20px; margin: 0 0 1.4em; }
.callout p:last-child { margin-bottom: 0; }
.callout-navy { background: var(--navy); color: #dbe3ec; border-left-color: var(--accent); }
.callout-navy a { color: var(--accent-light); }
.callout-navy strong, .callout-navy h3 { color: #fff; }
.facts { border-top: 2px solid var(--navy); margin-bottom: 1.6em; }
.facts div { display: grid; grid-template-columns: 1fr; padding: 12px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 640px) { .facts div { grid-template-columns: 210px 1fr; gap: 20px; } }
.facts dt { font-weight: 600; color: var(--navy); }
.facts dd { margin: 0; }
.steps { list-style: none; padding: 0; counter-reset: s; margin-bottom: 1.6em; }
.steps > li { counter-increment: s; position: relative; padding: 0 0 18px 56px; margin: 0; }
.steps > li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0; font: 500 0.95rem var(--mono); color: var(--accent-text); border: 1px solid var(--accent); width: 40px; height: 32px; display: flex; align-items: center; justify-content: center; }
.steps > li::after { content: ''; position: absolute; left: 20px; top: 38px; bottom: 4px; border-left: 1px dashed var(--rule); }
.steps > li:last-child::after { display: none; }
.steps h3 { margin: 4px 0 6px; font-size: 1.15rem; }
.steps p { margin-bottom: 0.5em; }
.checks { list-style: none; padding: 0; }
.checks li { position: relative; padding-left: 28px; }
.checks li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.nevers { list-style: none; padding: 0; }
.nevers li { position: relative; padding-left: 28px; }
.nevers li::before, .nevers li::after { content: ''; position: absolute; left: 2px; top: 13px; width: 14px; border-top: 2px solid var(--accent); transform: rotate(45deg); }
.nevers li::after { transform: rotate(-45deg); }
.formula { font-family: var(--mono); background: var(--mist); padding: 16px 18px; border-radius: var(--radius); overflow-x: auto; font-size: 0.95rem; margin-bottom: 1.2em; }
.source { font-size: 0.85rem; color: var(--muted); }
.sources { font-size: 0.88rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 40px; }
.sources h2 { font-size: 1.1rem; margin-top: 0; }
.sources li { margin-bottom: 6px; }

/* tables */
.table-wrap { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
.table-tools { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.copy-btn { font: 500 0.8rem var(--sans); background: #fff; color: var(--navy); border: 1px solid var(--rule); padding: 6px 10px; border-radius: var(--radius); cursor: pointer; }
.copy-btn:hover { border-color: var(--navy); }
.copy-btn.done { border-color: var(--ok); color: var(--ok); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 520px; }
table.data caption { text-align: left; font-weight: 600; color: var(--navy); padding-bottom: 8px; caption-side: top; }
table.data th, table.data td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.data thead th { background: var(--navy); color: #fff; font-weight: 500; font-size: 0.85rem; border-bottom: 0; }
table.data tbody tr:nth-child(even) td, table.data tbody tr:nth-child(even) th { background: #f7f9fb; }
table.data tbody th { font-weight: 600; color: var(--navy); }
table.data td.num, table.data th.num { text-align: right; font-family: var(--mono); white-space: nowrap; }

/* home */
.hero { position: relative; color: #fff; background: var(--navy); overflow: hidden; }
.hero-img { position: relative; aspect-ratio: 16 / 7; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,38,64,0) 35%, rgba(13,38,64,0.9) 100%); }
.hero .wrap { position: relative; display: grid; gap: 30px; padding-top: 36px; padding-bottom: 56px; }
@media (min-width: 1000px) {
  .hero-img { position: absolute; top: 0; right: 0; bottom: 0; width: 38%; aspect-ratio: auto; border-left: 6px solid var(--accent); }
  .hero-img::after { background: linear-gradient(90deg, rgba(13,38,64,0.5) 0%, rgba(13,38,64,0.08) 45%, rgba(13,38,64,0) 100%); }
  .hero .wrap { padding-top: 84px; padding-bottom: 76px; }
  .hero .wrap > * { max-width: 60%; }
}
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.6rem); max-width: 17ch; }
.hero .eyebrow { color: var(--accent-light); }
.hero .answer { color: #e6ecf2; border-left-color: var(--accent-light); max-width: 62ch; }
.hero .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }
.hero .quiet { color: #fff; font-weight: 500; }
.five { background: rgba(255,255,255,0.05); color: #e6ecf2; padding: 22px 24px 14px; border: 1px solid rgba(255,255,255,0.16); border-top: 3px solid var(--accent-light); }
.five h2 { font-size: 1.2rem; margin: 0 0 12px; color: #fff; }
.five ol { list-style: none; padding: 0; margin: 0; counter-reset: f; }
.five li { counter-increment: f; position: relative; padding: 0 0 10px 30px; font-size: 0.94rem; line-height: 1.45; }
.five li::before { content: counter(f); position: absolute; left: 0; top: 0; font: 500 0.85rem var(--mono); color: var(--accent-light); }
.five li.no::before { content: '\2715'; }
.band { padding: 64px 0; }
.band-mist { background: var(--mist); }
.band-navy { background: var(--navy); color: #dbe3ec; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy a { color: var(--accent-light); }
.band-stone { background: var(--stone); }
.band h2 { margin-top: 0; }
.split { display: grid; gap: 40px; }
@media (min-width: 900px) { .split { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; } .split.rev { grid-template-columns: 5fr 7fr; } }
.kicker { font-size: 1.12rem; max-width: 62ch; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-bottom: 1.2em; }
.mini-table th, .mini-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.mini-table th { font-weight: 600; color: var(--navy); width: 42%; }
.photo { position: relative; margin: 0 0 1.6em; }
.photo img { width: 100%; border-radius: var(--radius); }
.photo figcaption { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }
.plan { display: grid; gap: 0; counter-reset: p; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .plan { grid-template-columns: repeat(5, 1fr); } }
.plan li { counter-increment: p; padding: 18px 18px 18px 0; border-top: 2px solid var(--accent); margin: 0; }
@media (min-width: 900px) { .plan li { padding-right: 22px; } }
.plan li b { display: block; font: 500 0.85rem var(--mono); color: var(--accent-light); margin-bottom: 6px; }
.plan li strong { display: block; color: #fff; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; margin-bottom: 4px; }
.uses { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.uses li { margin: 0; border-bottom: 1px solid var(--rule); }
.uses a { display: grid; gap: 4px; padding: 18px 0; text-decoration: none; color: var(--ink); }
@media (min-width: 760px) { .uses a { grid-template-columns: 300px 1fr 24px; gap: 24px; align-items: baseline; } }
.uses a strong { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--navy); }
.uses a .go { color: var(--accent); font-weight: 600; }
.uses a:hover strong { color: var(--accent-text); }
.pair { display: grid; gap: 40px; }
@media (min-width: 900px) { .pair { grid-template-columns: 1fr 1fr; gap: 64px; } }
.stat-note { font-size: 0.85rem; color: var(--muted); }

/* cta band */
.cta-band { background: var(--navy-2); color: #dbe3ec; padding: 48px 0; }
.cta-band .wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .cta-band .wrap { grid-template-columns: 1fr 1fr; gap: 48px; } }
.cta-band h2 { color: #fff; font-size: 1.5rem; margin: 0 0 8px; }
.cta-band p { margin-bottom: 16px; }

/* forms */
.form { max-width: 760px; }
.form fieldset { border: 0; padding: 0; margin: 0 0 28px; }
.form legend { font-family: var(--serif); font-size: 1.35rem; color: var(--navy); margin-bottom: 12px; padding: 0; }
.field { margin-bottom: 18px; }
.field label, .field .label { display: block; font-weight: 600; color: var(--navy); margin-bottom: 6px; font-size: 0.95rem; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.field input[type='text'], .field input[type='email'], .field input[type='tel'], .field input[type='number'], .field input[type='date'], .field input[type='time'], .field input[type='file'], .field select, .field textarea { width: 100%; font: 400 1rem var(--sans); color: var(--ink); background: #fff; border: 1px solid #8796a8; border-radius: var(--radius); padding: 11px 12px; min-height: 46px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--navy); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--err); border-width: 2px; }
.field .error { display: block; color: var(--err); font-weight: 600; font-size: 0.9rem; margin-top: 4px; }
.row2 { display: grid; gap: 0 18px; }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; } .row3 { grid-template-columns: 1fr 1fr 1fr; } }
.check { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--navy); }
.check label { font-weight: 400; color: var(--ink); }
.radios { display: grid; gap: 8px; }
.radios label { display: flex; gap: 10px; align-items: center; font-weight: 400; border: 1px solid var(--rule); padding: 10px 12px; border-radius: var(--radius); cursor: pointer; }
.radios input { accent-color: var(--navy); width: 18px; height: 18px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-errors { border: 2px solid var(--err); padding: 16px 18px; margin-bottom: 24px; }
.form-errors h2 { font-size: 1.2rem; margin: 0 0 8px; color: var(--err); }
.form-errors ul { margin: 0; }
.form-ok { border: 2px solid var(--ok); padding: 16px 18px; margin-bottom: 24px; }
.form-note { font-size: 0.88rem; color: var(--muted); }

/* calculator */
.calc { background: var(--mist); padding: 22px; border-radius: var(--radius); margin-bottom: 1.4em; }
.calc h3 { margin-top: 0; }
.calc .row2 { gap: 0 16px; }
.calc output { display: block; font: 500 1.05rem var(--mono); color: var(--navy); background: #fff; padding: 14px; border-left: 3px solid var(--accent); margin-top: 6px; min-height: 52px; }

/* faq */
.faq-item { border-bottom: 1px solid var(--rule); padding: 6px 0 4px; }
.faq-item h2 { font-size: 1.3rem; margin: 18px 0 8px; }

/* footer */
.site-foot { background: var(--navy); color: #b9c6d4; font-size: 0.9rem; padding: 56px 0 28px; }
.site-foot a { color: #fff; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; color: var(--accent-light); }
.foot-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .foot-brand { grid-column: auto; } }
.foot-brand img { width: 160px; margin-bottom: 16px; }
.site-foot h2 { font: 600 0.75rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-light); margin: 0 0 12px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 8px; }
.foot-reg { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 40px; padding-top: 24px; font-size: 0.82rem; line-height: 1.6; }
.foot-reg p { margin-bottom: 10px; max-width: 110ch; }
.foot-reg .pro { color: #fff; font-weight: 600; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: #fff; cursor: pointer; text-decoration: none; }
.linkbtn:hover { text-decoration: underline; }

/* cookie banner */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-height: 70vh; overflow-y: auto; background: #fff; color: var(--ink); border: 1px solid var(--rule); border-top: 3px solid var(--accent); box-shadow: 0 18px 50px rgba(13,38,64,0.25); padding: 20px; max-width: 560px; font-size: 0.92rem; }
.consent[hidden] { display: none; }
.consent h2 { font-size: 1.15rem; margin: 0 0 8px; }
.consent .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.consent .btn { padding: 10px 16px; font-size: 0.9rem; }

/* local preview helpers - only rendered on localhost */
mark.tbc { background: #fff3c4; color: #3a2c00; outline: 1px dashed #b38600; padding: 0 2px; }
.devnote { display: block; background: #fff3c4; border: 1px dashed #b38600; color: #4d3a00; padding: 10px 14px; margin: 0 0 1.2em; font-size: 0.86rem; }
body.dev .gated { outline: 2px dashed #b38600; outline-offset: 6px; position: relative; margin-top: 34px; }
body.dev .gated::before { content: 'Hidden on the live site until the hedging route is confirmed (INX_HEDGING_LIVE)'; position: absolute; top: -30px; left: 0; font: 600 0.75rem var(--sans); color: #4d3a00; background: #fff3c4; padding: 3px 8px; }
@media (max-width: 700px) { .devbadge { display: none; } }
.devbadge { position: fixed; right: 12px; top: 120px; z-index: 80; background: #fff3c4; color: #4d3a00; border: 1px dashed #b38600; font-size: 0.75rem; padding: 6px 10px; max-width: 260px; }

@media print { .site-head, .strip, .site-foot, .cta-band, .rail, .consent, .devbadge { display: none !important; } body { font-size: 12pt; } a { color: var(--ink); } }

/* grid children may shrink below their content width so wide tables scroll inside .table-wrap instead of widening the page */
.split > *, .pair > *, .page-body > * { min-width: 0; }
.table-wrap.narrow table.data { min-width: 0; }
.band-navy .eyebrow, .callout-navy .eyebrow { color: var(--accent-light); }