/* ============ TOKENS ============ */
:root{
  --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F6F9; --surface-3:#E8ECF2;
  --hair:#D5DBE4; --hair-soft:#E6EAF0;
  --ink:#101B31; --body:#2A3C57; --muted:#5D7089;
  --prime:#175FC9; --prime-soft:#E2EDFC;
  --flex:#00757F; --flex-soft:#DDF2F5;
  --spec:#6B4BD6; --spec-soft:#EBE5FC;
  --leaf:#D81026; --leaf-soft:#FBE0E3;
  --sky:#3FA3F0;
  --good:#12805C; --warn:#9A5B00; --crit:#C8102E;
  --btn-fg:#FFFFFF;
  --on-dark:#F2F7FF; --on-dark-muted:#A9C0DE;
  /* Hero and closing band are white surfaces. The brand colour arrives as a
     rule and as accents, not as a field of navy behind the type. */
  --grad-hero:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%);
  --grad-band:linear-gradient(180deg,#F7F9FB 0%,#F1F4F8 100%);
  --grad-rule:linear-gradient(90deg,var(--prime) 0%,var(--flex) 38%,var(--spec) 72%,var(--leaf) 100%);
  --chart-1:#2160A8; --chart-2:#C8102E;
  --f-display:'Newsreader','Iowan Old Style',Georgia,serif;
  --f-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --maxw:1240px; --pad:clamp(20px,4vw,60px);
  color-scheme: light;
}
/* The site is deliberately single-theme: white, for every visitor, whatever
   their operating system is set to. A lender's programme pages get printed,
   screenshotted into submissions and read next to a commitment, and one
   predictable rendering is worth more here than honouring a viewer's dark-mode
   preference. `color-scheme: light` above stops the browser darkening form
   controls, scrollbars and autofill under it. */

/* ============ BASE ============ */
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--body);font-family:var(--f-body);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);margin:0;text-wrap:balance;line-height:1.1;font-weight:600}
h1{font-size:clamp(34px,4.8vw,58px);letter-spacing:-.025em}
h2{font-size:clamp(25px,3.2vw,38px);letter-spacing:-.02em}
h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.01em}
h4{font-size:16px;letter-spacing:0}
p{margin:0 0 1em}
a{color:inherit}
strong{color:var(--ink);font-weight:600}
:focus-visible{outline:2px solid var(--prime);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:820px}
.eyebrow{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;display:block}
.lede{font-size:clamp(17px,2vw,20px);max-width:70ch}
.small{font-size:14.5px;color:var(--muted)}
.mono{font-family:var(--f-mono);overflow-wrap:anywhere}
.tnum{font-variant-numeric:tabular-nums}
hr.rule{height:1px;background:var(--hair);border:0;margin:0}
section{padding-block:clamp(42px,6vw,76px)}
section.tight{padding-block:clamp(28px,3.6vw,48px)}

/* ============ HEADER + DROPDOWN NAV ============ */
.site-head{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--ground) 93%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.head-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:18px;min-height:68px}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto;cursor:pointer;background:none;border:0;padding:0}
.brand img{display:block;height:34px;width:auto}
/* One background, so one mark — the reversed logo is no longer swapped in. */
.brand .lg-light{display:block}
.brand .lg-dark{display:none}
.foot-brand img{height:42px}
.nav{display:flex;align-items:center;gap:0;margin-left:auto}
.nav-item{position:relative}
.nav-btn{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;background:none;border:0;color:var(--muted);padding:9px 10px;cursor:pointer;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:5px}
.nav-btn:hover{color:var(--ink)}
.nav-btn[aria-current="page"],.nav-item.on .nav-btn{color:var(--ink);border-bottom-color:var(--prime)}
.nav-btn .car{font-size:8px;opacity:.6}
.menu{position:absolute;top:calc(100% + 8px);left:-8px;min-width:262px;background:var(--surface);border:1px solid var(--hair);box-shadow:0 18px 40px -22px rgba(0,0,0,.5);padding:8px;display:none;z-index:90}
.nav-item[data-open="true"] .menu{display:block}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 11px;color:var(--body);font-family:var(--f-body);font-size:14.5px;cursor:pointer;line-height:1.35}
.menu button:hover{background:var(--surface-2);color:var(--ink)}
.menu button b{display:block;font-weight:600;color:var(--ink)}
.menu button span{font-size:12px;color:var(--muted)}
.menu .sep{height:1px;background:var(--hair-soft);margin:6px 4px}
.menu .grp{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:9px 11px 4px}
.head-cta{margin-left:12px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--hair);color:var(--ink);padding:8px 12px;font-family:var(--f-mono);font-size:12px;cursor:pointer}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;cursor:pointer;padding:12px 18px;border:1px solid var(--ink);background:var(--ink);color:var(--btn-fg);transition:opacity .12s ease,transform .12s ease}
.btn:hover{opacity:.88;transform:translateY(-1px)}
.btn.ghost{background:none;color:var(--ink);border-color:var(--hair)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.sm{padding:9px 14px;font-size:11px}

/* ============ LAYOUT ============ */
.page{display:none}
.page.active{display:block;animation:fade .26s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.grid{display:grid;gap:1px;background:var(--hair)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cell{background:var(--surface);padding:24px}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:28px}
.card{position:relative;background:var(--surface);border:1px solid var(--hair);padding:24px}
.card::before,.card::after{content:"";position:absolute;width:9px;height:9px;pointer-events:none}
.card::before{top:-1px;left:-1px;border-top:2px solid var(--prime);border-left:2px solid var(--prime)}
.card::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--prime);border-right:2px solid var(--prime)}
.card.f::before,.card.f::after{border-color:var(--flex)}
.tag{display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border:1px solid currentColor}
.tag.prime{color:var(--prime)}
.tag.flex{color:var(--flex)}
.tag.solid{color:var(--prime);background:var(--prime-soft);border-color:transparent}
.tag.solid-f{color:var(--flex);background:var(--flex-soft);border-color:transparent}
ul.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
ul.ticks li{position:relative;padding-left:20px;font-size:15.5px}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--prime)}
ul.ticks.fl li::before{background:var(--flex)}
ul.ticks li.no::before{background:var(--crit)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:15px;margin:0}
.kv dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.kv dd{margin:0;color:var(--ink);font-weight:600}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair)}
.hero-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:repeating-linear-gradient(to right,var(--hair-soft) 0 1px,transparent 1px 86px),repeating-linear-gradient(to bottom,var(--hair-soft) 0 1px,transparent 1px 86px);mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%)}
.pagehead{border-bottom:1px solid var(--hair);padding-block:clamp(30px,4vw,54px)}
.crumb{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.crumb button{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;padding:0}
.crumb button:hover{color:var(--prime)}
details.faq{border-bottom:1px solid var(--hair);padding:15px 0}
details.faq summary{cursor:pointer;font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:17px;list-style:none;display:flex;gap:12px;align-items:baseline}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";font-family:var(--f-mono);color:var(--prime)}
details.faq[open] summary::before{content:"–"}
details.faq .ans{margin:12px 0 0 24px;font-size:15.5px}
details.faq .ans p{margin:0 0 .7em}
.cta-band{background:var(--surface-2);color:var(--body)}
.cta-band h2{color:var(--ink)}
.cta-band p{color:var(--body)}
.cta-band .btn{background:var(--ink);color:var(--btn-fg);border-color:var(--ink)}
.cta-band .btn.ghost{background:none;color:var(--ink);border-color:var(--hair)}
.mailtag{font-family:var(--f-mono);font-size:clamp(17px,2.6vw,27px);color:var(--ink);text-decoration:none;border-bottom:2px solid var(--prime);padding-bottom:3px}
.mailtag:hover{color:var(--prime)}
table.data{width:100%;border-collapse:collapse;min-width:560px}
table.data th{text-align:left;padding:11px 13px;border-bottom:1px solid var(--hair);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:500}
table.data td{padding:12px 13px;border-bottom:1px solid var(--hair-soft);font-size:15px;vertical-align:top}
table.data td:first-child{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.scrollx{overflow-x:auto}
.note{padding:13px 15px;border-left:2px solid var(--prime);background:var(--surface);font-size:14.5px}
.note.warn{border-left-color:var(--warn)}
.ph{border:1px dashed var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent);padding:12px 14px;font-size:13.5px;color:var(--ink)}
.ph b{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--warn);display:block;margin-bottom:4px}

/* article */
.article{max-width:74ch;font-size:17px;line-height:1.72}
.article h2{font-size:clamp(21px,2.6vw,29px);margin:1.8em 0 .5em}
.article h3{font-size:19px;margin:1.5em 0 .4em}
.article h4{font-size:16px;margin:1.3em 0 .3em;font-family:var(--f-body);font-weight:600}
.article ul,.article ol{margin:0 0 1.1em;padding-left:20px}
.article li{margin-bottom:.4em}
.article blockquote{margin:1.2em 0;padding-left:16px;border-left:2px solid var(--prime);color:var(--ink);font-style:italic}
.article table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:15px;display:block;overflow-x:auto}
.article th,.article td{border:1px solid var(--hair);padding:9px 11px;text-align:left}
.article th{background:var(--surface-2);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.article hr{border:0;border-top:1px solid var(--hair);margin:2em 0}
.byline{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.paperlist{display:grid;gap:1px;background:var(--hair)}
.paper{background:var(--surface);padding:22px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;cursor:pointer;text-align:left;border:0;font:inherit;color:inherit;width:100%}
.paper:hover{background:var(--surface-2)}
.paper h3{margin-bottom:6px}
.sticky-side{position:sticky;top:88px}

/* chart */
.chart-wrap{background:var(--surface);border:1px solid var(--hair);padding:22px}
.chart{width:100%;height:300px;display:block}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 0;font-size:13.5px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.swatch{width:11px;height:11px;display:inline-block;border-radius:2px}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--btn-fg);font-family:var(--f-mono);font-size:11.5px;padding:7px 10px;transform:translate(-50%,-130%);opacity:0;transition:opacity .1s;z-index:200;white-space:nowrap}
.tip.on{opacity:1}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font-family:var(--f-mono);font-size:12px;padding:8px 12px;cursor:pointer;background:var(--surface-2);border:1px solid var(--hair);color:var(--body)}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--btn-fg)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field>label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
input,select,textarea{width:100%;padding:10px 12px;background:var(--surface-2);border:1px solid var(--hair);color:var(--ink);font-family:var(--f-body);font-size:15.5px}
input[type="range"]{padding:0;accent-color:var(--prime);height:26px;border:0;background:none}
textarea{min-height:92px;resize:vertical}
.out{border-top:1px solid var(--hair);padding:20px;background:var(--surface-2)}
.big{font-family:var(--f-display);font-size:clamp(26px,4vw,40px);color:var(--ink);letter-spacing:-.02em;line-height:1}
.stat{background:var(--surface);padding:20px}
.stat b{display:block;font-family:var(--f-display);font-size:30px;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.stat span{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.gsource{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border:1px solid var(--hair);background:var(--surface);color:var(--ink);text-decoration:none;font-size:14px;border-radius:999px}
.gsource:hover{border-color:var(--ink)}
.gsource .g{font-family:var(--f-display);font-weight:600;font-size:15px}
.site-foot{border-top:1px solid var(--hair);background:var(--surface);font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding-block:42px}
.foot-grid h4{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.foot-grid button.lnk{display:block;background:none;border:0;padding:3px 0;color:var(--body);font:inherit;font-size:14.5px;cursor:pointer;text-align:left}
.foot-grid button.lnk:hover{color:var(--prime)}
.disc{border-top:1px solid var(--hair);padding-block:20px;font-size:12px;line-height:1.6;color:var(--muted)}

/* ---- expressive surfaces ---- */
.hero{background:var(--grad-hero);color:var(--body);border-bottom:1px solid var(--hair);isolation:isolate}
.hero h1,.hero h2,.hero h3{color:var(--ink)}
.hero .lede,.hero p{color:var(--body)}
.hero .eyebrow{color:var(--prime)}
.hero .hero-grid{opacity:.55}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--grad-rule);z-index:2}
.hero .btn{background:var(--ink);color:var(--btn-fg);border-color:var(--ink)}
.hero .btn.ghost{background:none;color:var(--ink);border-color:var(--hair)}
.hero .btn.ghost:hover{border-color:var(--ink);background:var(--surface-2)}
.hero strong{color:var(--ink)}
.hero .leadcard{background:var(--surface-2);border-color:var(--hair)}
.hero .leadcard h3,.hero .leadcard h4{color:var(--ink)}
.hero .leadcard p,.hero .leadcard .small,.hero .leadcard .leadnote{color:var(--muted)}
.hero .leadcard .eyebrow{color:var(--prime)}
.hero .leadcard strong{color:var(--ink)}
.hero .leadcard input,.hero .leadcard select{background:var(--surface)}
.hero .leadcard .btn{background:var(--ink);color:var(--btn-fg);border-color:var(--ink)}
.hero .leadcard .btn.ghost{background:none;color:var(--ink);border-color:var(--hair)}
.hero .leadcard .leadnote.err{color:var(--crit)}
.hero .leadcard .leadnote.ok{color:var(--good)}
.pagehead{position:relative}
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--grad-rule);opacity:.85}
.tinted{background:var(--surface-2)}
.cta-band{background:var(--grad-band);color:var(--body);position:relative;overflow:hidden;border-block:1px solid var(--hair)}
.cta-band::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad-rule)}
.cta-band h2{color:var(--ink)}
.cta-band p{color:var(--body)}
.cta-band .btn{background:var(--ink);color:var(--btn-fg);border-color:var(--ink)}
.cta-band .btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--hair)}
.cta-band .btn.ghost:hover{border-color:var(--ink)}
.cta-band .mailtag{color:var(--ink);border-bottom-color:var(--prime)}
.cta-band .eyebrow{color:var(--prime)}
.eyebrow{color:var(--prime)}
.card.s::before,.card.s::after{border-color:var(--spec)}
.tag.spec{color:var(--spec)}
.tag.solid-s{color:var(--spec);background:var(--spec-soft);border-color:transparent}
ul.ticks.sp li::before{background:var(--spec)}
.stat b,.ms b{background:none}
.grad-line{height:3px;background:var(--grad-rule);border:0;margin:0}

/* ---- image placeholders ---- */
.imgph{margin:0;position:relative;background:var(--surface-2);border:1px dashed var(--hair);display:flex;align-items:center;justify-content:center;overflow:hidden}
.imgph.r169{aspect-ratio:16/9}
.imgph.r43{aspect-ratio:4/3}
.imgph.r11{aspect-ratio:1/1}
.imgph.r219{aspect-ratio:21/9}
.imgph .inner{padding:20px;text-align:center;max-width:44ch}
.imgph .badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--prime);background:var(--prime-soft);padding:5px 10px;border-radius:999px}
.imgph h4{margin:12px 0 6px;font-family:var(--f-body);font-size:14.5px;font-weight:600;color:var(--ink)}
.imgph p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.55}
.imgph .spec{margin-top:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);opacity:.9}
.imgph img{width:100%;height:100%;object-fit:cover;display:block}
.imgph.filled{border-style:solid;border-color:var(--hair)}
figure.imgph figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(16,27,49,.82));color:#fff;font-size:12.5px;padding:26px 14px 10px}

/* ---- cms ---- */
body.cms-on [data-cms]{outline:1px dashed color-mix(in srgb,var(--prime) 55%,transparent);outline-offset:3px;cursor:text;transition:outline-color .12s}
body.cms-on [data-cms]:hover{outline-color:var(--prime);background:color-mix(in srgb,var(--prime) 6%,transparent)}
body.cms-on [data-cms]:focus{outline:2px solid var(--prime);background:color-mix(in srgb,var(--prime) 8%,transparent)}
.cms-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:300;background:var(--ink);color:var(--on-dark);display:none;align-items:center;gap:12px;padding:10px 14px;box-shadow:0 20px 44px -22px rgba(0,0,0,.7);border-radius:999px}
body.cms-on .cms-bar{display:flex}
.cms-bar span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted)}
.cms-bar button{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:var(--on-dark);cursor:pointer}
.cms-bar button.pri{background:var(--on-dark);color:#101B31;border-color:var(--on-dark)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--hair);margin-bottom:24px}
.tabs button{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;background:none;border:0;border-bottom:2px solid transparent;padding:11px 14px;color:var(--muted);cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--prime)}
.tabs button:hover{color:var(--ink)}
.tabpanel[hidden]{display:none}
.editrow{border:1px solid var(--hair);background:var(--surface);padding:14px;margin-bottom:10px}
.editrow label{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.editrow textarea{min-height:60px;font-size:14.5px}
.editrow .meta{font-family:var(--f-mono);font-size:10px;color:var(--muted);margin-top:6px;opacity:.8}
.serp{border:1px solid var(--hair);background:var(--surface);padding:16px}
.serp .u{font-size:13px;color:var(--good)}
.serp .t{font-size:19px;color:var(--prime);margin:3px 0;font-family:var(--f-body)}
.serp .d{font-size:13.5px;color:var(--muted)}
.counter{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.counter.over{color:var(--crit)}
/* ---- lead form ---- */
.leadcard{position:relative;background:var(--surface);border:1px solid var(--hair);padding:26px;box-shadow:0 24px 60px -40px rgba(22,34,56,.55)}
.leadcard::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:var(--grad-rule)}
.leadcard-head{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--hair-soft)}
.leadform .field{margin-bottom:14px}
.leadform input{background:var(--ground);border:1px solid var(--hair);transition:border-color .12s ease}
.leadform input:focus{border-color:var(--prime)}
.leadform input::placeholder{color:var(--muted);opacity:.65}
.leadform input[aria-invalid="true"]{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 7%,var(--ground))}
.leadnote{font-size:12.5px;color:var(--muted);margin:12px 0 0;line-height:1.5}
.leadnote.err{color:var(--crit)}
.leadnote.ok{color:var(--good)}
.leadsuccess{text-align:left;padding:8px 0 4px;animation:fade .3s ease}
.tickmark{width:40px;height:40px;border-radius:50%;background:var(--prime-soft);color:var(--prime);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.btn[disabled]{opacity:.55;cursor:progress}
.metricstrip{border-bottom:1px solid var(--hair);background:var(--surface-2)}
.metricstrip .small{flex:1 1 100%;margin-left:0!important;padding-top:4px}
@media (min-width:1100px){.metricstrip .small{flex:0 1 auto;margin-left:auto!important;padding-top:0}}
.ms{font-size:13.5px;color:var(--muted);font-family:var(--f-mono);letter-spacing:.04em}
.ms b{font-family:var(--f-display);font-size:20px;color:var(--ink);letter-spacing:-.02em;margin-right:7px;font-weight:600}
/* ---- admin ---- */
.admin-key{font-family:var(--f-mono);font-size:13.5px;letter-spacing:.02em}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--hair)}
.pill.on{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 10%,transparent)}
.pill.off{color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
pre.code{background:var(--ink);color:var(--btn-fg);padding:16px;overflow-x:auto;font-family:var(--f-mono);font-size:12.5px;line-height:1.6;margin:0}
.logtable td{font-size:13.5px}
@media (max-width:1080px){
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{display:none;order:5;width:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:14px}
  .nav.open{display:flex}
  .head-in{flex-wrap:wrap;min-height:0;padding-block:12px}
  .menu-btn{display:block}
  .head-cta{display:none}
  .nav-item{position:static}
  .nav-btn{width:100%;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--hair-soft)}
  .menu{position:static;min-width:0;border:0;box-shadow:none;background:var(--surface-2);padding:4px 0 10px}
  .cols-2,.cols-3,.two{grid-template-columns:1fr}
  .sticky-side{position:static}
  #calcLayout,#payLayout,#retLayout,#heroGrid,#ethicsGrid,#invStrip,#adminLayout,.paper-layout{grid-template-columns:minmax(0,1fr)!important}
  #adminLayout>*,#calcLayout>*,#payLayout>*,#retLayout>*,.paper-layout>*{min-width:0}
  .card,.stack,.cell{min-width:0}
  pre.code{max-width:100%}
  pre.code{font-size:11px}
  .leadcard{padding:20px}
  .article{font-size:16px}
  body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   SECTION RHYTHM
   On an all-white site a hairline is not enough separation — every
   band looked the same and the page read as one long column. Surfaces
   alternate instead, and each section carries an accent colour that
   cycles through the brand set, so a reader can tell at a glance that
   they have moved from one idea to the next.
   ============================================================ */
main > section:nth-of-type(3n+1), .page > section:nth-of-type(3n+1){--sec:var(--prime)}
main > section:nth-of-type(3n+2), .page > section:nth-of-type(3n+2){--sec:var(--flex)}
main > section:nth-of-type(3n+3), .page > section:nth-of-type(3n+3){--sec:var(--spec)}
main > section, .page > section{--sec:var(--prime);position:relative}

/* Alternating bands carry the separation the hairlines used to. */
main > section:nth-of-type(even), .page > section:nth-of-type(even),
section.tinted{background:var(--surface-2);border-block:1px solid var(--hair-soft)}

/* A white card on a tinted band reads; a tinted placeholder on one does not. */
main > section:nth-of-type(even) .imgph, .page > section:nth-of-type(even) .imgph,
section.tinted .imgph{background:var(--surface-3)}
main > section:nth-of-type(even) .note, .page > section:nth-of-type(even) .note,
section.tinted .note{background:var(--surface)}
main > section:nth-of-type(even) input, main > section:nth-of-type(even) select,
main > section:nth-of-type(even) textarea,
.page > section:nth-of-type(even) input, .page > section:nth-of-type(even) select,
.page > section:nth-of-type(even) textarea{background:var(--surface)}

/* The eyebrow announces the section and takes its colour. */
.sec-head .eyebrow{color:var(--sec)}
.sec-head .eyebrow::before{content:"";display:block;width:36px;height:3px;background:var(--sec);margin-bottom:13px;border-radius:2px}

/* Redundant now that surfaces alternate — kept for pages that still use it,
   but reduced to a hairline that does not compete with the band edges. */
hr.rule{height:1px;background:var(--hair-soft);border:0;margin:0}

/* Bands need room to read as bands. */
main > section:nth-of-type(even), .page > section:nth-of-type(even),
section.tinted{padding-block:clamp(50px,7vw,88px)}
main > section:nth-of-type(even).tight, .page > section:nth-of-type(even).tight{padding-block:clamp(36px,4.6vw,60px)}

/* The closing band is the page's last word, so it differs by hue rather than
   by depth — a light wash of the brand blue, which stays white-adjacent while
   being unmistakably not another content band. */
.cta-band{background:linear-gradient(180deg,var(--prime-soft) 0%,#EEF4FD 100%);border-block:1px solid #CFE0F7}
.cta-band .btn.ghost{background:var(--surface)}

/* The page header carries the same wash at a fraction of the strength, so the
   top of an interior page separates from the first content band. */
.pagehead{background:linear-gradient(180deg,#FBFCFE 0%,var(--surface) 100%)}

/* ============================================================
   MOTION
   Everything below is additive: the page is complete and readable
   with JavaScript off, and every transition is switched off entirely
   for anyone who has asked their system to reduce motion.
   ============================================================ */
.reveal.pre{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;
  transition:opacity .58s cubic-bezier(.22,.61,.24,1),transform .58s cubic-bezier(.22,.61,.24,1);
  transition-delay:calc(var(--i,0) * 68ms)}

.card,.stat,.paper,a.cell,.gsource{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .16s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(16,27,49,.5)}
.card::before,.card::after{transition:width .2s ease,height .2s ease}
.card:hover::before,.card:hover::after{width:16px;height:16px}
a.cell:hover{background:var(--surface-2)}
main > section:nth-of-type(even) a.cell:hover,.page > section:nth-of-type(even) a.cell:hover,
section.tinted a.cell:hover{background:var(--surface-3)}
.stat:hover,.paper:hover{transform:translateY(-2px)}
.gsource:hover{transform:translateY(-2px);box-shadow:0 16px 32px -24px rgba(16,27,49,.5)}

/* The brand rule under the hero draws itself in on load. */
.hero::after{transform-origin:left center}
.hero.drawn::after{animation:ruleIn .9s cubic-bezier(.22,.61,.24,1) both}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Dropdowns settle rather than snap. */
.menu{transform-origin:top left}
.nav-item[data-open] .menu{animation:menuIn .16s ease-out both}
@keyframes menuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* Counted figures hold their width so the strip does not jitter while running. */
.ms b,.stat b{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  .reveal.pre{opacity:1!important;transform:none!important}
  .reveal.in{transition:none!important}
  .hero.drawn::after{animation:none}
  .nav-item[data-open] .menu{animation:none}
  .card:hover,.stat:hover,.paper:hover,.gsource:hover{transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}