:root{
  --ink:#0C1512; --bone:#F6F3EC; --card:#FFFFFF; --bone2:#EFEBE1;
  --forest:#0E4C3A; --forest-d:#0A3629; --moss:#E2EAE4; --moss-l:#EFF4F0; --moss-line:#C8D8CE;
  --brass:#D9A441; --brass-d:#8A6212;
  --clay:#B4531F; --clay-bg:#FBEFE5; --clay-line:#E8CDB2;
  --rose:#8C2F26; --rose-bg:#F9EBE9; --rose-line:#E3C2BD;
  --grey:#5C6862; --line:#D9D3C6;
  --c1:#00754F; --c2:#3A5A9B; --c3:#B06A14; --c4:#7A3D6B;
  --dis:"Fraunces","Bitstream Charter",Charter,Georgia,serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--ui);font-size:1.125rem;line-height:1.6;
  -webkit-font-smoothing:antialiased}
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:#fff;padding:14px 20px;z-index:200;border-radius:0 0 6px 0}
.skip:focus{left:0}
a{color:var(--forest)}
:focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:3px}

/* nav */
.top{background:rgba(246,247,251,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60}
.tin{max-width:1140px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.logo svg{flex:0 0 36px}
.lt{font-family:var(--dis);font-size:1.25rem;font-weight:600;letter-spacing:-.025em;line-height:1}
.lt i{display:block;font-family:var(--ui);font-style:normal;font-size:0.5625rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grey);font-weight:600;margin-bottom:3px}
nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
nav a{font-size:0.9375rem;font-weight:500;color:var(--ink);text-decoration:none;padding:9px 13px;border-radius:6px;white-space:nowrap}
nav a:hover{background:var(--moss)}
nav a[aria-current=page]{background:var(--forest);color:#fff}

.wrap{max-width:1140px;margin:0 auto;padding:0 24px 64px}
.col{max-width:720px}
.page{display:none}.page.on{display:block}

h1{font-family:var(--dis);font-size:clamp(2.375rem,5.4vw,3.875rem);line-height:1.02;letter-spacing:-.03em;margin:0 0 18px;font-weight:600}
h2{font-family:var(--dis);font-size:clamp(1.625rem,3vw,2.125rem);line-height:1.1;letter-spacing:-.02em;margin:58px 0 14px;font-weight:600}
h3{font-family:var(--dis);font-size:1.3125rem;margin:30px 0 8px;font-weight:600;letter-spacing:-.01em}
.eyebrow{font-size:0.75rem;text-transform:uppercase;letter-spacing:.22em;color:var(--grey);font-weight:700;margin:46px 0 12px}
p{margin:0 0 16px}
.lede{font-size:1.375rem;line-height:1.45;color:#26332D}
.sm{font-size:0.9375rem;color:var(--grey);line-height:1.55}
.dateline{font-size:0.875rem;color:var(--grey);letter-spacing:.02em;margin:0 0 30px;padding-bottom:12px;border-bottom:1px solid var(--line)}

/* hero */
.hero{background:var(--ink);color:var(--bone);border-radius:16px;padding:clamp(2.125rem,5vw,4rem);margin:26px 0 0;position:relative;overflow:hidden}
.hero h1{color:var(--bone)}
.hero .lede{color:#C6CFE6;max-width:600px}
.hero .rule{height:2px;background:var(--brass);width:56px;margin:0 0 26px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--ui);font-size:1.0625rem;font-weight:600;
  color:#fff;background:var(--forest);border:2px solid var(--forest);border-radius:8px;padding:15px 26px;cursor:pointer;
  text-decoration:none;min-height:54px;line-height:1.3}
.btn:hover{background:var(--forest-d);border-color:var(--forest-d)}
.btn.alt{background:var(--brass);border-color:var(--brass);color:#20180A}
.btn.alt:hover{background:#C79433;border-color:#C79433}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--moss);border-color:var(--moss-line)}
.hero .btn.ghost{color:var(--bone);border-color:#2B3A34}
.hero .btn.ghost:hover{background:#16231E;border-color:#3C4E46}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:2px;margin:2px 0 0;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tile{background:var(--card);padding:26px 24px}
.tile .n{font-family:var(--dis);font-size:2.625rem;line-height:1;letter-spacing:-.03em;margin:0 0 9px;font-weight:600;font-variant-numeric:tabular-nums}
.tile .l{font-size:0.9375rem;color:var(--grey);margin:0;line-height:1.45}
.tile.f .n{color:var(--forest)} .tile.c .n{color:var(--clay)} .tile.r .n{color:var(--rose)}

/* blocks */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px}
.note{border-left:4px solid var(--forest);background:var(--moss-l);padding:18px 22px;border-radius:0 10px 10px 0;margin:0 0 20px}
.note.c{border-color:var(--clay);background:var(--clay-bg)}
.note.r{border-color:var(--rose);background:var(--rose-bg)}
.note>strong:first-child{display:block;margin-bottom:4px}
.note.c>strong:first-child{color:#8A5A0B} .note.r>strong:first-child{color:var(--rose)}
.pill{display:inline-block;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  padding:5px 10px;border-radius:5px;background:var(--moss);color:var(--forest)}
.pill.r{background:var(--rose-bg);color:var(--rose)}
.quote{font-family:var(--dis);font-size:clamp(1.5rem,2.8vw,2rem);line-height:1.28;letter-spacing:-.02em;
  color:var(--forest);border-left:3px solid var(--brass);padding-left:26px;margin:30px 0;font-weight:400}

/* tables */
table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:1.0625rem;background:var(--card);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
caption{text-align:left;font-size:0.9375rem;color:var(--grey);padding:0 0 10px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
thead th{font-size:0.75rem;text-transform:uppercase;letter-spacing:.13em;color:var(--grey);font-weight:700;background:var(--bone2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.hi td,tr.hi th{background:var(--moss-l);font-weight:600}

/* forms */
fieldset{border:1px solid var(--line);border-radius:12px;padding:24px 24px 8px;margin:0 0 20px;background:var(--card)}
legend{font-family:var(--dis);font-size:1.25rem;padding:0 10px;font-weight:600}
label{display:block;font-size:1.0625rem;margin:0 0 7px;font-weight:500}
.hint{font-size:0.9375rem;color:var(--grey);margin:-3px 0 10px;line-height:1.5}
.field{margin-bottom:22px}
input[type=number],select{font-family:var(--ui);font-size:1.1875rem;padding:13px;width:100%;border:2px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);min-height:52px}
.mny{position:relative}.mny .p{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--grey);font-size:1.1875rem}
.mny input{padding-left:32px}
.radio{display:flex;gap:10px;flex-wrap:wrap}
.tg{flex:1 1 180px;border:2px solid var(--line);border-radius:8px;padding:13px 16px;background:#fff;cursor:pointer;
  min-height:52px;display:flex;align-items:center;gap:11px;font-size:1.0625rem}
.tg input{width:20px;height:20px;margin:0;accent-color:var(--forest)}
.tg.sel{border-color:var(--forest);background:var(--moss-l)}
.sld{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
input[type=range]{flex:1 1 260px;accent-color:var(--forest);height:36px}
.sv{font-family:var(--dis);font-size:1.875rem;font-weight:600;font-variant-numeric:tabular-nums;min-width:140px;letter-spacing:-.02em}

/* answer */
.answer{background:var(--ink);color:var(--bone);border-radius:14px;padding:34px 32px;margin:0 0 24px}
.answer .k{font-size:0.75rem;text-transform:uppercase;letter-spacing:.22em;color:#8FA69C;margin:0 0 10px;font-weight:700}
.answer .big{font-family:var(--dis);font-size:clamp(3rem,8vw,4.75rem);line-height:.98;margin:0 0 14px;
  font-variant-numeric:tabular-nums;letter-spacing:-.035em;font-weight:600;color:#fff}
.answer .s{font-size:1.125rem;margin:0;color:#E9A23B}
.answer .s strong{color:var(--brass)}

/* charts */
figure{margin:0 0 26px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px}
figcaption{font-size:0.9375rem;color:var(--grey);margin-top:14px;line-height:1.5}
.ft{font-family:var(--dis);font-size:1.3125rem;margin:0 0 3px;font-weight:600;letter-spacing:-.01em}
.fs{font-size:0.9375rem;color:var(--grey);margin:0 0 20px}
svg.ch{display:block;width:100%;height:auto;overflow:visible}
.grid line{stroke:var(--line);stroke-width:1}
.ax{font-size:0.8125rem;fill:var(--grey);font-family:var(--ui)}
.ml{font-size:0.875rem;fill:var(--ink);font-family:var(--ui);font-variant-numeric:tabular-nums}
.ml.b{font-weight:700}
.lg{display:flex;gap:20px;flex-wrap:wrap;font-size:0.9375rem;margin:0 0 16px}
.lg i{display:inline-block;width:13px;height:13px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:#fff;font-size:0.875rem;line-height:1.45;
  padding:10px 13px;border-radius:8px;opacity:0;z-index:90;max-width:250px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
@media (prefers-reduced-motion:no-preference){.tip{transition:opacity .12s}}
.tip b{display:block;margin-bottom:2px}
.hit{fill:transparent;cursor:crosshair}
.host{position:relative}

/* lists */
ul.cl{list-style:none;padding:0;margin:0 0 22px}
ul.cl li{border-bottom:1px solid var(--line);padding:17px 0}
ul.cl li:last-child{border-bottom:none}
ul.cl b{display:block;font-size:1.0625rem;margin-bottom:3px}
ul.cl span{font-size:1rem;color:var(--grey);line-height:1.5}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 22px}
ol.steps li{counter-increment:s;position:relative;padding:0 0 20px 52px;font-size:1.0625rem}
ol.steps li:before{content:counter(s);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
  background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--dis);font-size:1.125rem;font-weight:600}
.work{background:var(--bone2);border-radius:10px;padding:20px 22px;margin:0 0 22px;font-size:1rem}
.work h4{margin:0 0 12px;font-size:0.75rem;text-transform:uppercase;letter-spacing:.18em;color:var(--grey)}
.work .r{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px dotted var(--line);font-variant-numeric:tabular-nums}
.work .r:last-child{border-bottom:none;font-weight:700;padding-top:12px;font-size:1.1875rem}
.home{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin-bottom:14px;
  display:flex;gap:22px;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}
.home h4{font-family:var(--dis);font-size:1.3125rem;margin:0 0 5px;font-weight:600}
.home .m{font-size:0.9375rem;color:var(--grey);margin:0}
.home .pr{text-align:right;font-variant-numeric:tabular-nums}
.home .pr .p{font-family:var(--dis);font-size:1.625rem;margin:0;font-weight:600;line-height:1.1}
.home .pr .u{font-size:0.875rem;color:var(--grey);margin:2px 0 0}

footer.st{background:var(--ink);color:#8FA69C;margin-top:70px;padding:52px 0 44px;font-size:0.9375rem}
footer.st .c{max-width:1140px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer.st b{color:var(--bone);display:block;margin-bottom:10px;font-size:1rem}
footer.st a{color:#E9A23B;text-decoration:none;display:block;padding:4px 0}
footer.st a:hover{color:var(--brass)}
footer.st .fine{max-width:1140px;margin:34px auto 0;padding:22px 24px 0;border-top:1px solid #2B3A34;font-size:0.875rem;line-height:1.6}
.banner{background:var(--forest);color:#fff;text-align:center;font-size:0.875rem;padding:8px 24px;letter-spacing:.02em}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:26px} footer.st .c{grid-template-columns:1fr 1fr}}
@media print{.top,nav,.btns,footer.st,.banner{display:none!important} body{background:#fff;font-size:12pt} .page{display:block!important} .answer{background:#fff;color:#000;border:2px solid #000} .answer .big,.answer .s{color:#000}}

/* ---------- controls / filters ---------- */
.controls{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:0 0 22px}
.crow{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:14px;margin-bottom:16px}
.ctl label{font-size:0.8125rem;text-transform:uppercase;letter-spacing:.13em;color:var(--grey);font-weight:700;margin-bottom:6px;display:block}
.ctl input[type=search]{font-family:var(--ui);font-size:1.0625rem;padding:12px 14px;width:100%;border:2px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);min-height:50px}
.ctl select{font-size:1.0625rem;min-height:50px;padding:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--ui);font-size:0.9375rem;font-weight:500;border:2px solid var(--line);background:#fff;color:var(--ink);
  border-radius:100px;padding:9px 16px;cursor:pointer;min-height:44px;line-height:1.2}
.chip:hover{border-color:var(--moss-line);background:var(--moss-l)}
.chip[aria-pressed=true]{background:var(--forest);border-color:var(--forest);color:#fff}
.cbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--line);margin-top:4px}
.count{font-size:1rem;color:var(--grey)}
.count b{color:var(--ink);font-weight:700}
.linkbtn{font-family:var(--ui);font-size:0.9375rem;font-weight:600;background:none;border:none;color:var(--forest);
  cursor:pointer;padding:8px 4px;text-decoration:underline;text-underline-offset:3px;min-height:44px}
/* segmented toggle */
.seg{display:inline-flex;background:var(--bone2);border:1px solid var(--line);border-radius:10px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{font-family:var(--ui);font-size:0.9375rem;font-weight:600;border:none;background:none;color:var(--grey);
  border-radius:7px;padding:10px 16px;cursor:pointer;min-height:44px}
.seg button[aria-pressed=true]{background:var(--forest);color:#fff}
.seg button:hover:not([aria-pressed=true]){color:var(--ink)}
.figbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin:0 0 20px}
/* home card */
.home .pr .lnk{display:inline-flex;align-items:center;gap:6px;font-size:1rem;font-weight:600;color:var(--forest);
  text-decoration:none;margin-top:10px;min-height:44px;padding:8px 0}
.home .pr .lnk:hover{text-decoration:underline;text-underline-offset:3px}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.tag{font-size:0.8125rem;font-weight:600;letter-spacing:.03em;background:var(--moss);color:var(--forest);
  border-radius:5px;padding:4px 9px}
.tag.v{background:#FCF1DC;color:#7A5510}
.avail{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:4px 9px;border-radius:5px;display:inline-block}
.avail.a{background:var(--moss);color:var(--forest)}
.avail.b{background:var(--clay-bg);color:#8A5A0B}
.avail.c{background:var(--rose-bg);color:var(--rose)}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:44px 28px;text-align:center}
.empty h3{margin:0 0 8px}
@media (max-width:820px){.crow{grid-template-columns:1fr}}

/* ---------- polish pass ---------- */
h1,h2,h3{scroll-margin-top:96px}
.page>*:first-child,.col>*:first-child{margin-top:0}
.page .eyebrow:first-child{margin-top:38px}
h2 .inreg{font-family:var(--ui);font-size:.5em;letter-spacing:.02em;color:var(--grey);font-weight:500;
  display:inline-block;vertical-align:middle;margin-left:4px}
figure{padding:28px 30px}
.controls{box-shadow:0 1px 2px rgba(12,21,18,.04)}
.tile{transition:none}
@media (prefers-reduced-motion:no-preference){
  .btn,.chip,nav a,.home{transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
  .home:hover{box-shadow:0 2px 10px rgba(12,21,18,.06)}
}
.home{align-items:stretch}
.home .pr{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:210px}
@media (max-width:700px){
  .home{flex-direction:column}
  .home .pr{align-items:flex-start;text-align:left;min-width:0;padding-top:14px;border-top:1px solid var(--line);width:100%}
  h2{margin:40px 0 12px}
  .hero{padding:30px 22px}
  .answer{padding:26px 22px}
  figure{padding:20px 16px}
  .seg{width:100%}.seg button{flex:1}
}

/* ---------- fixes: legend/border collision, mobile nav, banner ---------- */
fieldset{padding:8px 26px 10px;margin:0 0 22px}
legend{background:var(--card);padding:0 12px;margin-left:8px;line-height:1.2}
fieldset>.field:first-of-type,fieldset>.hint:first-of-type{margin-top:18px}
@media (max-width:760px){
  nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;gap:4px;
    padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  .tin{padding:12px 20px 8px}
  .banner{font-size:0.8125rem;padding:7px 16px}
  .banner .long{display:none}
  legend{font-size:1.125rem}
}

/* ================= v4: type system, editorial layout, a11y ================= */
:root{
  --dis:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ui:"Onest","Helvetica Neue",Helvetica,Arial,sans-serif;
  --scale:1;
}
body{font-size:calc(18px * var(--scale));letter-spacing:-.003em}
h1,h2,h3,.lt,.tile .n,.answer .big,.sv,.quote-lg,.standfirst,.home .pr .p,.ft,legend,.cmp-v{
  font-family:var(--dis);font-weight:600;letter-spacing:-.028em}
h1{font-size:clamp(2.25rem,5vw,3.625rem);line-height:1.04}
h2{font-size:clamp(1.5625rem,2.9vw,2.125rem);line-height:1.12}
.lede,.standfirst{font-weight:400;letter-spacing:-.012em}

/* accessibility bar */
.a11y{display:flex;align-items:center;gap:8px;margin-left:auto}
.a11y .lbl{font-size:0.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--grey);font-weight:700}
.a11y button{font-family:var(--ui);border:2px solid var(--line);background:#fff;color:var(--ink);
  border-radius:8px;min-width:44px;min-height:44px;cursor:pointer;font-weight:700;line-height:1}
.a11y button[aria-pressed=true]{background:var(--forest);border-color:var(--forest);color:#fff}
.a11y .s1{font-size:14px}.a11y .s2{font-size:17px}.a11y .s3{font-size:20px}
.tin{gap:14px}
nav{margin-left:0}

/* help rail */
.helpbar{background:var(--moss-l);border:1px solid var(--moss-line);border-radius:14px;
  padding:22px 26px;margin:0 0 34px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.helpbar .t{flex:1 1 340px}
.helpbar h3{margin:0 0 4px;font-size:1.25rem}
.helpbar p{margin:0;color:var(--grey);font-size:1rem}
.helpbar .num{font-family:var(--dis);font-size:1.875rem;font-weight:700;letter-spacing:-.03em;color:var(--forest);
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:52px}
.helpbar .num:hover{text-decoration:underline;text-underline-offset:4px}

/* editorial about */
.editorial{max-width:820px;margin:0 auto}
.editorial h1{margin:14px 0 20px}
.standfirst{font-size:clamp(1.25rem,2.1vw,1.5625rem);line-height:1.38;color:#2B3A34;margin:0 0 8px}
.prose{max-width:660px;margin:0 auto;font-size:calc(20px * var(--scale));line-height:1.66}
.prose p{margin:0 0 20px}
.prose .opener{font-size:calc(23px * var(--scale));line-height:1.5}
.page#p-about h2{max-width:660px;margin:64px auto 18px}
.quote-lg{font-size:clamp(1.75rem,3.6vw,2.625rem);line-height:1.22;color:var(--forest);text-align:center;
  max-width:900px;margin:56px auto;padding:0 20px;font-weight:600}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;margin:44px auto;max-width:900px}
.cmp{padding:28px 26px;background:var(--card)}
.cmp-a{background:#F1EDE4}
.cmp-k{font-size:0.75rem;text-transform:uppercase;letter-spacing:.18em;color:var(--grey);font-weight:700;margin:0 0 16px}
.cmp-v{font-size:1.125rem;line-height:1.45;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line);font-weight:400}
.cmp-v:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.cmp-a .cmp-v{color:var(--grey)}
.cmp-b .cmp-v strong{color:var(--forest)}
.flowfig{max-width:900px;margin:40px auto 44px;padding:32px}
.disclose{max-width:660px;margin:48px auto;background:var(--bone2);border-radius:14px;padding:26px 28px;font-size:1.0625rem;line-height:1.55}
.disclose p:last-child{margin:0}
.srcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;max-width:900px;margin:0 auto}
.src{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;text-decoration:none;display:block}
.src:hover{border-color:var(--moss-line);background:var(--moss-l)}
.src b{display:block;font-size:1.0625rem;color:var(--ink);margin-bottom:4px}
.src span{font-size:0.9375rem;color:var(--grey);line-height:1.45}

/* chart data table toggle */
.figbar2{display:flex;justify-content:flex-end;margin:14px 0 0}
.tbtn{font-family:var(--ui);font-size:0.9375rem;font-weight:600;background:none;border:2px solid var(--line);
  color:var(--ink);border-radius:8px;padding:10px 16px;cursor:pointer;min-height:44px}
.tbtn:hover{background:var(--moss-l);border-color:var(--moss-line)}
.dtable{margin-top:18px}
.dtable table{margin:0}
@media (max-width:760px){
  .compare{grid-template-columns:1fr}
  .a11y{margin-left:0}
  .quote-lg{font-size:1.625rem;margin:40px auto}
  .flowfig{padding:20px 14px}
}

/* ================= v5: real scaling, balanced headings, directory cards ================= */
html{font-size:calc(16px * var(--scale))}
body{font-size:1.125rem}
h1,h2,h3,.lede,.standfirst,.quote-lg,.ft,.hero .lede,.tile .l,.helpbar h3,figcaption,.cmp-v{
  text-wrap:balance}
.prose p,p{text-wrap:pretty}
.quote-lg{max-width:20ch;max-width:min(20ch,900px)}

/* directory card */
.home{display:grid;grid-template-columns:1fr 268px;gap:0;padding:0;overflow:hidden;align-items:stretch}
.home-main{padding:26px 28px}
.home-act{background:var(--bone2);border-left:1px solid var(--line);padding:24px 24px;
  display:flex;flex-direction:column;justify-content:center}
.home h4{font-size:1.35rem;margin:0 0 5px}
.home .m{font-size:.94rem;color:var(--grey);margin:0}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin:13px 0 18px}
.tag{font-size:.8rem;font-weight:600;background:var(--moss);color:var(--forest);border-radius:5px;padding:5px 10px}
.tag.v{background:#FCF1DC;color:#7A5510}
.tag.n{background:transparent;color:var(--grey);border:1px solid var(--line)}
table.ratetbl{margin:0;border:1px solid var(--line);font-size:.95rem}
table.ratetbl caption{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);
  font-weight:700;padding:0 0 8px}
table.ratetbl th,table.ratetbl td{padding:9px 12px}
table.ratetbl .na{color:var(--grey);font-style:italic;font-variant-numeric:normal}
.actk{font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;color:var(--grey);font-weight:700;margin:0 0 4px}
.actv{font-family:var(--dis);font-size:1.3rem;font-weight:600;margin:0 0 8px;letter-spacing:-.02em}
.actn{font-size:.82rem;color:var(--grey);line-height:1.45;margin:0 0 16px}
.abtn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:9px;
  font-weight:600;font-size:1rem;text-decoration:none;border:2px solid var(--line);color:var(--ink);
  background:#fff;margin-bottom:9px;padding:0 14px;text-align:center}
.abtn:hover{background:var(--moss-l);border-color:var(--moss-line)}
.abtn.primary{background:var(--forest);border-color:var(--forest);color:#fff}
.abtn.primary:hover{background:var(--forest-d);border-color:var(--forest-d)}
.abtn:last-child{margin-bottom:0}

/* guides as editorial cards */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin:34px 0 0}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 28px 26px;position:relative}
.gcard .gn{font-family:var(--dis);font-size:.85rem;font-weight:700;letter-spacing:.14em;color:var(--brass-d,#8A6212);
  display:block;margin-bottom:12px}
.gcard h3{margin:0 0 10px;font-size:1.3rem;line-height:1.22}
.gcard p{margin:0;font-size:1rem;line-height:1.55;color:#33403A}
.gcard a{font-weight:600}

/* deadline strip */
.dstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:30px 0 0}
.dcell{background:var(--card);padding:22px 22px}
.dcell .dk{font-family:var(--dis);font-size:1.9rem;font-weight:700;letter-spacing:-.03em;margin:0 0 6px;line-height:1}
.dcell .dv{font-size:.95rem;color:var(--grey);margin:0;line-height:1.45}
.dcell.warn .dk{color:var(--clay)}
.dcell.stop .dk{color:var(--rose)}

@media (max-width:820px){
  .home{grid-template-columns:1fr}
  .home-act{border-left:none;border-top:1px solid var(--line)}
}

/* ================= v6: new colour language, scaling fixes, chart hygiene ================= */
:root{
  --ink:#1B1620; --bone:#F7F4EF; --card:#FFFFFF; --bone2:#F0ECE4;
  --forest:#4A2B55; --forest-d:#3A2143; --moss:#EFE7F1; --moss-l:#F6F1F7; --moss-line:#DCCBE0;
  --brass:#E28B4C; --brass-d:#9A5A1E;
  --clay:#B4531F; --clay-bg:#FBEFE5; --clay-line:#E8CDB2;
  --rose:#A82D45; --rose-bg:#FAEBEE; --rose-line:#E6C0C8;
  --grey:#635A68; --line:#DED7D0;
  --c1:#7A3F87; --c2:#008A72; --c3:#B5651D; --c4:#3A5A9B;
}
.hero{background:var(--ink)}
.answer{background:var(--ink)}
footer.st{background:var(--ink)}
.banner{background:var(--forest)}
.cmp-a{background:#F1ECE6}
.tile.f .n{color:var(--forest)}
.dcell .dk{color:var(--ink)}

/* ---- stat tiles: never clip, reflow as text grows ---- */
.tiles{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.tile .n{font-size:clamp(1.7rem,2.4vw + .6rem,2.35rem);line-height:1.04;
  white-space:nowrap;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums}
.tile{min-width:0;overflow-wrap:anywhere}

/* ---- header holds together at every text size ---- */
.tin{align-items:center;row-gap:10px}
.logo{flex:0 0 auto}
nav{flex:1 1 auto;min-width:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
.a11y{flex:0 0 auto;margin-left:auto}
@media (max-width:1080px){ .a11y{order:3} nav{order:4;width:100%;flex:1 1 100%} }

/* ---- SVG text must NOT inherit the root scale (viewBox already scales it) ---- */
svg.ch text{font-family:var(--ui)}
svg.ch .ax{font-size:13px}
svg.ch .ml{font-size:14px}
svg.ch .ml.b{font-weight:700}
svg.ch .axt{font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* ---- chart readout strip (annotations live here, never in the plot) ---- */
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;margin:0 0 20px}
.rcell{background:var(--card);padding:14px 16px}
.rcell .rk{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--grey);font-weight:700;margin:0 0 5px}
.rcell .rv{font-family:var(--dis);font-size:1.35rem;font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.1;
  font-variant-numeric:tabular-nums}
.rcell .rn{font-size:.82rem;color:var(--grey);margin:4px 0 0;line-height:1.4}
.rcell.hi{background:var(--moss-l)} .rcell.hi .rv{color:var(--forest)}
.rcell.warn .rv{color:var(--clay)}

/* ---- benefit cards replace the benefits list ---- */
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:16px;margin:0 0 26px}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  display:flex;flex-direction:column}
.bcard .amt{font-family:var(--dis);font-size:1.85rem;font-weight:700;letter-spacing:-.03em;line-height:1;
  margin:0 0 8px;color:var(--forest);font-variant-numeric:tabular-nums}
.bcard h4{font-size:1.05rem;margin:0 0 8px;font-weight:700;line-height:1.3}
.bcard p{font-size:.95rem;line-height:1.5;color:#3B3340;margin:0}
.bcard .chip2{align-self:flex-start;margin-top:14px;font-size:.75rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:6px;background:var(--clay-bg);color:#8A5A0B}
.bcard .chip2.k{background:var(--moss);color:var(--forest-d)}

/* ---- misc polish ---- */
.pill{background:var(--moss);color:var(--forest-d)}
.pill.r{background:var(--rose-bg);color:var(--rose)}
.tag{background:var(--moss);color:var(--forest-d)}
.tag.v{background:#FBEFE0;color:#8A5A1E}
.gcard .gn{color:var(--brass-d)}
.quote-lg{color:var(--forest)}
.dropcap:first-letter{color:var(--forest)}
.work .r:last-child{color:var(--ink)}
.abtn.primary,.btn{background:var(--forest);border-color:var(--forest)}
.btn.alt{background:var(--brass);border-color:var(--brass);color:#241505}
.btn.alt:hover{background:#D07E3F;border-color:#D07E3F}
.hero .rule{background:var(--brass)}
.num{color:var(--forest)}

.hero .btn.ghost{color:var(--bone);border-color:#3B3040}
.hero .btn.ghost:hover{background:#241E2A;border-color:#4E4155}
.rcell .rv{overflow-wrap:anywhere}
.tile.c .n{color:var(--clay)} .tile.r .n{color:var(--rose)}

/* ================= v7: neutral-led. Ink + bone + one amber. ================= */
:root{
  --ink:#14161A; --bone:#F5F2EC; --card:#FFFFFF; --bone2:#ECE8DF;
  --forest:#14161A; --forest-d:#000205;          /* primary surface/action = ink */
  --moss:#E6E2D8; --moss-l:#F1EEE6; --moss-line:#D6D0C3;
  --brass:#C9702B; --brass-d:#8F4C15;            /* the single accent */
  --clay:#A05A14; --clay-bg:#FAF0E2; --clay-line:#E5CFAC;
  --rose:#9E2B2B; --rose-bg:#FAEBE9; --rose-line:#E4C3BF;
  --grey:#5F5C57; --line:#DCD6C9;
  --c1:#B5651D; --c2:#0A8C74; --c3:#3A5A9B; --c4:#A2325C;
}
.banner{background:var(--ink);color:#D8D3C8}
.hero{background:var(--ink)}
.hero .rule{background:var(--brass);height:3px;width:64px}
.answer{background:var(--ink)}
footer.st{background:var(--ink);color:#9B968D}
footer.st a{color:#D8D3C8} footer.st a:hover{color:var(--brass)}
.hero .btn.ghost{color:var(--bone);border-color:#33363C}
.hero .btn.ghost:hover{background:#1E2126;border-color:#474B52}
.btn,.abtn.primary{background:var(--ink);border-color:var(--ink)}
.btn:hover,.abtn.primary:hover{background:#2A2E35;border-color:#2A2E35}
.btn.alt{background:var(--brass);border-color:var(--brass);color:#FFF}
.btn.alt:hover{background:#B4611F;border-color:#B4611F}
nav a[aria-current=page]{background:var(--ink)}
.a11y button[aria-pressed=true]{background:var(--ink);border-color:var(--ink)}
.chip[aria-pressed=true],.seg button[aria-pressed=true]{background:var(--ink);border-color:var(--ink)}
.tile.f .n{color:var(--brass)} .tile.c .n{color:var(--clay)} .tile.r .n{color:var(--rose)}
.pill{background:var(--moss);color:#2A2E35} .pill.r{background:var(--rose-bg);color:var(--rose)}
.tag{background:var(--moss);color:#2A2E35} .tag.v{background:#FAF0E2;color:#8F4C15}
.quote-lg{color:var(--ink)}
.quote-lg::before{content:"";display:block;width:56px;height:3px;background:var(--brass);margin:0 auto 26px}
.dropcap:first-letter{color:var(--brass)}
.note{border-left-color:var(--brass);background:var(--clay-bg)}
.note>strong:first-child{color:var(--brass-d)}
.gcard .gn{color:var(--brass)}
.bcard .amt{color:var(--ink)}
.bcard .chip2.k{background:var(--moss);color:#2A2E35}
.rcell.hi{background:var(--bone2)} .rcell.hi .rv{color:var(--ink)}
.rcell.warn .rv{color:var(--brass)}
.num{color:var(--brass)}
.helpbar{background:var(--bone2);border-color:var(--line)}
.helpbar .num{color:var(--brass)}
.src:hover{background:var(--bone2);border-color:var(--moss-line)}
.dcell .dk{color:var(--ink)} .dcell.warn .dk{color:var(--brass)} .dcell.stop .dk{color:var(--rose)}
tr.hi td,tr.hi th{background:var(--bone2)}
.cmp-a{background:var(--bone2)} .cmp-b .cmp-v strong{color:var(--ink)}
.ol-accent{color:var(--brass)}
ol.steps li:before{background:var(--ink)}
.lt i{color:var(--grey)}

/* ================= v8: warm, calm, serene. Umber + oat + clay. ================= */
:root{
  --ink:#3B3128; --ink-2:#55483C;
  --bone:#FAF6EF; --card:#FFFDF9; --bone2:#F1E9DC;
  --forest:#5A4636; --forest-d:#453427;
  --moss:#EFE6D7; --moss-l:#F6F0E5; --moss-line:#DFD2BE;
  --brass:#B25E38; --brass-d:#8E4726;
  --clay:#A87A1E; --clay-bg:#FBF3E2; --clay-line:#E7D6AC;
  --rose:#A5443C; --rose-bg:#FAECEA; --rose-line:#E8C9C4;
  --grey:#6B6157; --line:#E3DACB;
  --c1:#B25E38; --c2:#2E6FA8; --c3:#8A7A16; --c4:#93486B;
  --calm:#2E6FA8;
}
body{background:var(--bone)}
.banner{background:var(--forest);color:#EFE4D5}
.hero{background:linear-gradient(158deg,#4A3A2C 0%,#3B3128 58%,#332A22 100%)}
.hero .rule{background:var(--brass);height:3px;width:64px}
.answer{background:linear-gradient(158deg,#4A3A2C 0%,#3B3128 100%)}
footer.st{background:var(--forest);color:#C6CFE6}
footer.st a{color:#EFE4D5} footer.st a:hover{color:#E8B98E}
footer.st b{color:#FAF6EF}
.hero .btn.ghost{color:var(--bone);border-color:#6A5744}
.hero .btn.ghost:hover{background:#4A3A2C;border-color:#8A755E}
.btn,.abtn.primary{background:var(--brass);border-color:var(--brass);color:#fff}
.btn:hover,.abtn.primary:hover{background:var(--brass-d);border-color:var(--brass-d)}
.btn.alt{background:var(--brass);border-color:var(--brass);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--moss-l);border-color:var(--moss-line)}
nav a[aria-current=page]{background:var(--forest)}
nav a:hover{background:var(--moss)}
.a11y button[aria-pressed=true],.chip[aria-pressed=true],.seg button[aria-pressed=true]{background:var(--forest);border-color:var(--forest)}
.tile.f .n{color:var(--brass)} .tile.c .n{color:var(--clay)} .tile.r .n{color:var(--rose)}
.tile .n{color:var(--ink)}
.pill{background:var(--moss);color:var(--forest-d)} .pill.r{background:var(--rose-bg);color:var(--rose)}
.tag{background:var(--moss);color:var(--forest-d)} .tag.v{background:var(--clay-bg);color:#7C5A11}
.quote-lg{color:var(--forest)}
.quote-lg::before{background:var(--brass)}
.dropcap:first-letter{color:var(--brass)}
.note{border-left-color:var(--brass);background:#FBF2EA}
.note>strong:first-child{color:var(--brass-d)}
.gcard .gn{color:var(--brass)}
.bcard .amt{color:var(--brass-d)}
.rcell.hi{background:var(--moss-l)} .rcell.hi .rv{color:var(--brass-d)}
.rcell.warn .rv{color:var(--clay)}
.num{color:var(--brass-d)}
.helpbar{background:var(--moss-l);border-color:var(--moss-line)}
.dcell .dk{color:var(--ink)} .dcell.warn .dk{color:var(--clay)} .dcell.stop .dk{color:var(--rose)}
tr.hi td,tr.hi th{background:var(--moss-l)}
.cmp-a{background:var(--bone2)} .cmp-b .cmp-v strong{color:var(--brass-d)}
ol.steps li:before{background:var(--brass)}
.work{background:var(--bone2)}
thead th{background:var(--bone2)}

/* ---------- interaction: quiet motion, real feedback ---------- */
@media (prefers-reduced-motion:no-preference){
  .gcard,.bcard,.home,.src,.tile,.dcell,.rcell{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .18s ease}
  .gcard:hover,.bcard:hover,.src:hover{transform:translateY(-3px);box-shadow:0 10px 28px -12px rgba(59,49,40,.28)}
  .home:hover{box-shadow:0 10px 30px -14px rgba(59,49,40,.26)}
  .btn,.abtn,.chip{transition:transform .12s ease,background-color .16s ease,border-color .16s ease}
  .btn:active,.abtn:active,.chip:active{transform:translateY(1px)}
  .reveal{opacity:0;transform:translateY(14px)}
  .no-js .reveal,.reveal.in{opacity:1;transform:none}
  .reveal.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
}
.answer .big{font-variant-numeric:tabular-nums lining-nums}

/* ---------- room comparison toggle on the answer ---------- */
.roomsw{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 22px}
.roomsw button{font-family:var(--ui);background:var(--card);border:none;cursor:pointer;padding:16px 14px;
  text-align:left;min-height:56px}
.roomsw button .rl{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--grey);font-weight:700;margin-bottom:5px}
.roomsw button .rr{display:block;font-family:var(--dis);font-size:1.25rem;font-weight:700;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums}
.roomsw button[aria-pressed=true]{background:var(--forest)}
.roomsw button[aria-pressed=true] .rl{color:#C6CFE6}
.roomsw button[aria-pressed=true] .rr{color:#FAF6EF}
.roomsw button:hover:not([aria-pressed=true]){background:var(--moss-l)}

/* ---------- expandable guide cards ---------- */
.gcard details{margin-top:12px}
.gcard summary{cursor:pointer;font-weight:600;font-size:.95rem;color:var(--brass-d);list-style:none;
  display:inline-flex;align-items:center;gap:7px;min-height:44px}
.gcard summary::-webkit-details-marker{display:none}
.gcard summary::after{content:"+";font-size:1.15rem;line-height:1;font-weight:700}
.gcard details[open] summary::after{content:"–"}
.gcard details p{margin-top:10px;font-size:.95rem;color:var(--grey)}

/* ---------- sticky answer on the calculator ---------- */
.stickyans{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--forest);color:#FAF6EF;
  padding:12px 24px;display:none;box-shadow:0 -6px 24px -12px rgba(0,0,0,.4)}
.stickyans.on{display:block}
.stickyans .in{max-width:1140px;margin:0 auto;display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap}
.stickyans .k{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:#C6CFE6;margin:0}
.stickyans .v{font-family:var(--dis);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;margin:0;font-variant-numeric:tabular-nums}
.stickyans a{color:#FAF6EF;font-weight:600;text-decoration:underline;text-underline-offset:4px}

@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}

/* ================= v9: cool + uplifting. Deep teal, seafoam, lavender lift. ================= */
:root{
  --ink:#12333B; --ink-2:#1D4A55;
  --bone:#F4F9F9; --card:#FFFFFF; --bone2:#E7F2F2;
  --forest:#0E5563; --forest-d:#083E4A;
  --moss:#D9EDEC; --moss-l:#EAF5F5; --moss-line:#BEDCDB;
  --brass:#9678D8; --brass-d:#7351C4;          /* lavender lift */
  --lav:#EDE7FB; --lav-line:#D6C9F4;
  --clay:#B26A16; --clay-bg:#FCF3E4; --clay-line:#EBD8B2;
  --rose:#C0453F; --rose-bg:#FCEDEC; --rose-line:#F0CBC8;
  --grey:#557079; --line:#D5E4E4;
  --c1:#009AA4; --c2:#7E54D2; --c3:#B26A16; --c4:#33569F;
  --sea:#009AA4; --sea-l:#D6EFEF;
}
:root{--forest-d:#083E4A}
body{background:var(--bone)}
.banner{background:var(--forest);color:#CFEAEA}
.hero{background:linear-gradient(148deg,#0E5563 0%,#12333B 55%,#0C2A31 100%);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(126,84,210,.28) 0%,rgba(0,154,164,.14) 45%,transparent 70%);
  pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .hero::after{animation:drift 22s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-6%,7%,0) scale(1.14)}}
}
.hero>*{position:relative;z-index:1}
.hero .rule{background:linear-gradient(90deg,var(--sea),var(--brass));height:3px;width:72px}
.answer{background:linear-gradient(148deg,#0E5563 0%,#12333B 100%)}
footer.st{background:var(--ink);color:#9FBDC3}
footer.st a{color:#CFEAEA} footer.st a:hover{color:#B79BF0}
footer.st b{color:#F4F9F9}
.hero .btn.ghost{color:var(--bone);border-color:#2C5A64}
.hero .btn.ghost:hover{background:#164048;border-color:#48808B}
.btn,.abtn.primary{background:var(--sea);border-color:var(--sea);color:#fff}
.btn:hover,.abtn.primary:hover{background:#00838C;border-color:#00838C}
.btn.alt{background:var(--brass);border-color:var(--brass);color:#fff}
.btn.alt:hover{background:var(--brass-d);border-color:var(--brass-d)}
.btn.ghost{color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--moss-l);border-color:var(--moss-line)}
nav a[aria-current=page]{background:var(--forest)} nav a:hover{background:var(--moss)}
.a11y button[aria-pressed=true],.chip[aria-pressed=true],.seg button[aria-pressed=true]{background:var(--forest);border-color:var(--forest)}
.tile .n{color:var(--ink)} .tile.f .n{color:var(--sea)} .tile.c .n{color:var(--clay)} .tile.r .n{color:var(--rose)}
.pill{background:var(--moss);color:var(--forest-d)} .pill.r{background:var(--rose-bg);color:var(--rose)}
.tag{background:var(--moss);color:var(--forest-d)} .tag.v{background:var(--lav);color:var(--brass-d)}
.quote-lg{color:var(--forest)} .quote-lg::before{background:linear-gradient(90deg,var(--sea),var(--brass))}
.dropcap:first-letter{color:var(--sea)}
.note{border-left-color:var(--sea);background:var(--moss-l)}
.note>strong:first-child{color:var(--forest-d)}
.gcard .gn{color:var(--brass)}
.bcard .amt{color:var(--forest)}
.rcell.hi{background:var(--sea-l)} .rcell.hi .rv{color:var(--forest-d)}
.rcell.warn .rv{color:var(--clay)}
.num{color:var(--sea)}
.helpbar{background:linear-gradient(120deg,var(--moss-l),var(--lav));border-color:var(--moss-line)}
.dcell .dk{color:var(--ink)} .dcell.warn .dk{color:var(--clay)} .dcell.stop .dk{color:var(--rose)}
tr.hi td,tr.hi th{background:var(--moss-l)}
.cmp-a{background:var(--bone2)} .cmp-b .cmp-v strong{color:var(--forest-d)}
ol.steps li:before{background:var(--sea)}
.work{background:var(--bone2)} thead th{background:var(--bone2)}
.roomsw button[aria-pressed=true]{background:var(--forest)}
.stickyans{background:var(--forest)}

/* ---------- source cards, redesigned ---------- */
.srcgrid{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:16px}
.src{position:relative;padding:0;overflow:hidden;border-radius:16px;display:flex;flex-direction:column}
.src::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--sea),var(--brass))}
.src .sin{padding:24px 26px 22px;display:flex;flex-direction:column;gap:0;flex:1}
.src .sdom{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--forest-d);background:var(--moss);
  padding:6px 11px;border-radius:100px;margin:0 0 14px}
.src b{display:block;font-family:var(--dis);font-size:1.2rem;line-height:1.25;color:var(--ink);margin:0 0 12px;font-weight:700}
.src .slines{margin:0;padding:0;list-style:none}
.src .slines li{font-size:.95rem;line-height:1.5;color:var(--grey);padding:6px 0 6px 18px;position:relative}
.src .slines li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:var(--sea)}
.src .sgo{margin-top:auto;padding-top:16px;font-size:.95rem;font-weight:700;color:var(--sea);display:inline-flex;align-items:center;gap:8px}
.src .sgo span{transition:transform .2s ease;display:inline-block}
.src:hover{border-color:var(--moss-line);background:var(--card)}
.src:hover .sgo span{transform:translateX(5px)}

/* ---------- animated chart entrance ---------- */
@media (prefers-reduced-motion:no-preference){
  svg.ch rect.grow{transform-origin:left center;animation:growx .7s cubic-bezier(.2,.75,.3,1) both}
  @keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  svg.ch polyline.draw{stroke-dasharray:2400;stroke-dashoffset:2400;animation:dash 1.1s ease-out .1s forwards}
  @keyframes dash{to{stroke-dashoffset:0}}
}
/* scroll progress */
#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--sea),var(--brass));transition:width .1s linear}

.btn.alt{background:#9678D8;border-color:#9678D8;color:#fff}
.btn.alt:hover{background:#8464CE;border-color:#8464CE}
.hero .rule{background:linear-gradient(90deg,#3FBFC7,#9678D8)}
.src::before{background:linear-gradient(90deg,#009AA4,#9678D8)}
.quote-lg::before{background:linear-gradient(90deg,#009AA4,#9678D8)}
#prog{background:linear-gradient(90deg,#009AA4,#9678D8)}
.gcard .gn{color:#7351C4}
.tag.v{background:#EDE7FB;color:#7351C4}

/* ================= v10: seafoam is the highlight. No lavender. ================= */
:root{
  --brass:#52D1C2; --brass-d:#00757E;      /* highlight, and its readable-on-light sibling */
  --sea:#009AA4; --sea-l:#DFF5F1;
  --c1:#009AA4; --c2:#B26A16; --c3:#33569F; --c4:#A2325C;
  --lav:#DFF5F1; --lav-line:#B7E6DE;
}
.hero::after{background:radial-gradient(circle,rgba(82,209,194,.30) 0%,rgba(0,154,164,.16) 45%,transparent 72%)}
.hero .rule{background:linear-gradient(90deg,#009AA4,#52D1C2)}
.src::before{background:linear-gradient(90deg,#009AA4,#52D1C2)}
.quote-lg::before{background:linear-gradient(90deg,#009AA4,#52D1C2)}
#prog{background:linear-gradient(90deg,#009AA4,#52D1C2)}

/* primary action: seafoam field, deep ink type */
.btn.alt{background:#52D1C2;border-color:#52D1C2;color:#0A2C33}
.btn.alt:hover{background:#3FC4B4;border-color:#3FC4B4;color:#0A2C33}
.btn,.abtn.primary{background:var(--sea);border-color:var(--sea);color:#fff}
.btn:hover,.abtn.primary:hover{background:#00838C;border-color:#00838C}

.gcard .gn{color:var(--brass-d)}
.tag.v{background:var(--sea-l);color:var(--brass-d)}
.num{color:var(--brass-d)}
.helpbar{background:linear-gradient(120deg,var(--moss-l),var(--sea-l));border-color:var(--moss-line)}
.dropcap:first-letter{color:var(--brass-d)}
.rcell.hi{background:var(--sea-l)}
.src .sgo{color:var(--brass-d)}
.src .slines li::before{background:#52D1C2}
.src .sdom{background:var(--sea-l);color:var(--brass-d)}
footer.st a:hover{color:#52D1C2}
.bcard .amt{color:var(--brass-d)}
.answer .s strong{color:#52D1C2}
.hero .lede strong{color:#7FE6D9!important}
.stickyans a{color:#7FE6D9}

/* ================= v11: indigo-navy + honey. Distinct from Ply, KYI and Eckler. ================= */
:root{
  --ink:#16223F; --ink-2:#243356;
  --bone:#F6F7FB; --card:#FFFFFF; --bone2:#E9ECF5;
  --forest:#1E2E55; --forest-d:#141F3A;
  --moss:#E2E7F4; --moss-l:#EFF2F9; --moss-line:#C6CFE6;
  --brass:#E9A23B; --brass-d:#8A5A0B;
  --clay:#8A5A0B; --clay-bg:#FCF4E4; --clay-line:#EBD9B4;
  --rose:#A5305F; --rose-bg:#FBECF1; --rose-line:#EFC8D8;
  --grey:#5D6580; --line:#DDE2EE;
  --c1:#BC7A12; --c2:#4453A8; --c3:#A5305F; --c4:#5F7A1E;
  --sea:#E9A23B; --sea-l:#FBF0DC;
}
body{background:var(--bone)}
.banner{background:var(--forest);color:#C9D3EA}
.hero{background:linear-gradient(150deg,#25355F 0%,#16223F 56%,#101932 100%)}
.hero::after{background:radial-gradient(circle,rgba(233,162,59,.26) 0%,rgba(122,145,214,.14) 46%,transparent 72%)}
.hero .rule{background:linear-gradient(90deg,#E9A23B,#F3C77E)}
.answer{background:linear-gradient(150deg,#25355F 0%,#16223F 100%)}
footer.st{background:var(--ink);color:#9AA5C2}
footer.st a{color:#C9D3EA} footer.st a:hover{color:#E9A23B}
footer.st b{color:#F6F7FB}
.hero .btn.ghost{color:var(--bone);border-color:#3A4A72}
.hero .btn.ghost:hover{background:#22314F;border-color:#59688F}
.btn,.abtn.primary{background:var(--forest);border-color:var(--forest);color:#fff}
.btn:hover,.abtn.primary:hover{background:#16223F;border-color:#16223F}
.btn.alt{background:#E9A23B;border-color:#E9A23B;color:#16223F}
.btn.alt:hover{background:#DE9429;border-color:#DE9429;color:#16223F}
.btn.ghost{color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--moss-l);border-color:var(--moss-line)}
nav a[aria-current=page]{background:var(--forest)} nav a:hover{background:var(--moss)}
.a11y button[aria-pressed=true],.chip[aria-pressed=true],.seg button[aria-pressed=true]{background:var(--forest);border-color:var(--forest)}
.tile .n{color:var(--ink)} .tile.f .n{color:var(--brass-d)} .tile.c .n{color:var(--clay)} .tile.r .n{color:var(--rose)}
.pill{background:var(--moss);color:var(--forest-d)} .pill.r{background:var(--rose-bg);color:var(--rose)}
.tag{background:var(--moss);color:var(--forest-d)} .tag.v{background:var(--sea-l);color:var(--brass-d)}
.quote-lg{color:var(--forest)} .quote-lg::before{background:linear-gradient(90deg,#E9A23B,#F3C77E)}
.dropcap:first-letter{color:var(--brass-d)}
.note{border-left-color:var(--brass);background:var(--sea-l)}
.note>strong:first-child{color:var(--brass-d)}
.gcard .gn{color:var(--brass-d)}
.bcard .amt{color:var(--forest)}
.rcell.hi{background:var(--sea-l)} .rcell.hi .rv{color:var(--brass-d)}
.rcell.warn .rv{color:var(--clay)}
.num{color:var(--brass-d)}
.helpbar{background:linear-gradient(120deg,var(--moss-l),var(--sea-l));border-color:var(--moss-line)}
.helpbar .num{color:var(--brass-d)}
.dcell .dk{color:var(--ink)} .dcell.warn .dk{color:var(--clay)} .dcell.stop .dk{color:var(--rose)}
tr.hi td,tr.hi th{background:var(--moss-l)}
.cmp-a{background:var(--bone2)} .cmp-b .cmp-v strong{color:var(--forest-d)}
ol.steps li:before{background:var(--forest)}
.work{background:var(--bone2)} thead th{background:var(--bone2)}
.roomsw button[aria-pressed=true]{background:var(--forest)}
.stickyans{background:var(--forest)} .stickyans a{color:#F3C77E}
.src::before{background:linear-gradient(90deg,#E9A23B,#F3C77E)}
.src .sdom{background:var(--moss);color:var(--forest-d)}
.src .slines li::before{background:#E9A23B}
.src .sgo{color:var(--forest)}
#prog{background:linear-gradient(90deg,#E9A23B,#F3C77E)}
.answer .s strong{color:#F3C77E}
.hero .lede strong{color:#F3C77E!important}

/* ================= v12: editorial column, footer, mark ================= */
/* One measure. h1, standfirst and body share a single left edge, and the
   opener no longer steps the size a third time. */
.editorial{max-width:44rem}
.page#p-about .prose{max-width:44rem;font-size:1.1875rem;line-height:1.68}
.page#p-about .prose .opener{font-size:1.1875rem;line-height:1.68;color:var(--ink);font-weight:500}
.page#p-about h2{max-width:44rem}
.page#p-about .disclose{max-width:44rem}
.page#p-about .compare,.page#p-about .flowfig,.page#p-about .srcgrid{max-width:52rem}
.page#p-about .quote-lg{max-width:min(24ch,44rem)}
.page#p-about .standfirst{font-size:clamp(1.1875rem,1.9vw,1.4375rem);color:var(--grey);margin:0 0 34px}
.page#p-about .editorial h1{margin:12px 0 18px;font-size:clamp(2.125rem,4.2vw,3.125rem);line-height:1.06;letter-spacing:-.026em}
.page#p-about .prose+.prose{margin-top:-4px}

/* footer */
footer.st .c>div{text-wrap:pretty}
footer.st .lsl{display:inline;color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(233,162,59,.45);padding:0}
footer.st .lsl:hover{border-bottom-color:var(--brass)}
footer.st .fine p{text-wrap:pretty}
footer.st .fine strong{color:var(--brass)}

/* =========================================================================
   v13 · multi-page build: navigation chrome, theme toggle, dark mode
   ========================================================================= */

/* --- every page file ships one section, always visible --- */
.page{display:block}

/* --- header controls --- */
.tin .ctrls{display:flex;align-items:center;gap:10px;margin-left:auto}
.themetog{display:inline-flex;align-items:center;justify-content:center;width:2.375rem;height:2.375rem;
  border:1.5px solid var(--line);background:var(--card);color:var(--forest);border-radius:9px;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .18s}
.themetog:hover{border-color:var(--forest);transform:translateY(-1px)}
.themetog:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.themetog .moon{display:none}
[data-theme=dark] .themetog .sun{display:none}
[data-theme=dark] .themetog .moon{display:block}

/* --- mobile navigation --- */
.navtog{display:none;align-items:center;gap:9px;border:1.5px solid var(--line);background:var(--card);
  color:var(--ink);font:600 .9375rem/1 var(--ui);padding:10px 14px;border-radius:9px;cursor:pointer}
.navtog:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.navtog .bars{display:inline-flex;flex-direction:column;gap:3.5px;width:16px}
.navtog .bars i{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .22s ease,opacity .18s ease}
.navtog[aria-expanded=true] .bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.navtog[aria-expanded=true] .bars i:nth-child(2){opacity:0}
.navtog[aria-expanded=true] .bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:1080px){
  .navtog{display:inline-flex}
  .tin{flex-wrap:wrap}
  #nav{order:5;width:100%;flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:2px;
    max-height:0;overflow:hidden;transition:max-height .3s ease;border-top:0 solid var(--line)}
  #nav.open{max-height:26rem;border-top-width:1px;margin-top:12px;padding-top:10px}
  #nav a{padding:14px 12px;border-radius:9px}
}
@media (max-width:520px){ #nav{grid-template-columns:1fr} .navtog span:last-child{display:none} }
@media (prefers-reduced-motion:reduce){ #nav{transition:none} .navtog .bars i{transition:none} }

/* =========================================================================
   Dark mode. Its own validated steps, not an inversion.
   Categorical series are the dark-mode set, which passed all six checks
   independently of the light set.
   ========================================================================= */
[data-theme=dark]{
  --ink:#EAEEF7; --ink-2:#C6CFE6;
  --bone:#101932; --card:#18233F; --bone2:#1D2A49;
  --forest:#7386D8; --forest-d:#8FA0E4;
  --moss:#22304F; --moss-l:#1C2743; --moss-line:#46598C;
  --brass:#E9A23B; --brass-d:#F0B863;
  --clay:#E0A64A; --clay-bg:#2A2440; --clay-line:#4A3F28;
  --rose:#E58AA6; --rose-bg:#33203A; --rose-line:#54324A;
  --grey:#A9B4D0; --line:#2C3A5C;
  --c1:#BC8B36; --c2:#7386D8; --c3:#BC5E77; --c4:#7E953B;
  color-scheme:dark;
}
[data-theme=dark] body{background:var(--bone);color:var(--ink)}
[data-theme=dark] .top{background:rgba(16,25,50,.92);border-bottom-color:var(--line)}
[data-theme=dark] .banner{background:#0B1226;color:#C6CFE6}
[data-theme=dark] .hero{background:linear-gradient(158deg,#1B2846 0%,#0E1730 58%,#0A1128 100%)}
[data-theme=dark] .answer{background:linear-gradient(158deg,#1B2846 0%,#0E1730 100%)}
[data-theme=dark] .hero .lede{color:#C6CFE6}
[data-theme=dark] .hero h1,[data-theme=dark] .answer .big{color:#F6F7FB}
[data-theme=dark] .card,[data-theme=dark] .gcard,[data-theme=dark] .bcard,[data-theme=dark] .tile,
[data-theme=dark] .home,[data-theme=dark] .src,[data-theme=dark] .dcell,[data-theme=dark] .cmp-b,
[data-theme=dark] .helpbar,[data-theme=dark] .flowfig{background:var(--card);border-color:var(--line)}
[data-theme=dark] .cmp-a{background:var(--bone2)}
[data-theme=dark] .themetog,[data-theme=dark] .navtog{background:var(--card);border-color:var(--line);color:var(--ink)}
[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea{
  background:var(--bone2);color:var(--ink);border-color:var(--line)}
[data-theme=dark] legend{background:var(--card)}
[data-theme=dark] .a11y button{background:var(--card);border-color:var(--line);color:var(--ink)}
[data-theme=dark] .a11y button[aria-pressed=true]{background:var(--forest);border-color:var(--forest);color:#0E1730}
[data-theme=dark] .btn.alt{background:var(--brass);border-color:var(--brass);color:#16223F}
[data-theme=dark] .btn.ghost{color:var(--ink);border-color:var(--line)}
[data-theme=dark] #nav a[aria-current=page]{background:var(--forest);color:#0E1730}
[data-theme=dark] footer.st{background:#0B1226}
[data-theme=dark] .pill{background:var(--moss);color:var(--ink-2)}
[data-theme=dark] table th{color:var(--grey)}
[data-theme=dark] .quote-lg{color:var(--ink)}
[data-theme=dark] #prog{background:linear-gradient(90deg,#E9A23B,#7386D8)}
[data-theme=dark] .tip{background:#0B1226;color:#EAEEF7;border:1px solid var(--line)}

/* --- print: one clean document, no chrome --- */
@media print{
  .navtog,.themetog,.a11y,#prog,.skip{display:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .page{display:block!important}
}

/* --- dark mode, part two: components that carried hard-coded light values
       through the earlier CSS layers. Each pair below was found by measuring
       computed contrast on the rendered page, not by reading the source. --- */
[data-theme=dark] .skip{background:#0B1226;color:#F6F7FB;border:2px solid var(--brass)}
[data-theme=dark] .figbar .seg button{background:var(--bone2);color:var(--ink);border-color:var(--line)}
[data-theme=dark] .figbar .seg button[aria-pressed=true]{background:var(--forest);color:#0E1730}
[data-theme=dark] .stickyans{background:#0B1226;border-top:1px solid var(--line)}
[data-theme=dark] .stickyans .k{color:var(--grey)}
[data-theme=dark] .stickyans .v{color:#F6F7FB}
[data-theme=dark] .stickyans a{color:var(--brass)}
[data-theme=dark] .lede,[data-theme=dark] .standfirst{color:var(--grey)}
[data-theme=dark] .prose p,[data-theme=dark] .prose .opener{color:var(--ink)}
[data-theme=dark] .tg,[data-theme=dark] .tg span{background:var(--bone2);color:var(--ink);border-color:var(--line)}
[data-theme=dark] .tg.sel,[data-theme=dark] .tg.sel span{background:var(--moss);border-color:var(--forest);color:var(--ink)}
[data-theme=dark] .roomsw button{background:var(--bone2);color:var(--ink);border-color:var(--line)}
[data-theme=dark] .roomsw button .rl{color:var(--grey)}
[data-theme=dark] .roomsw button[aria-pressed=true]{background:var(--forest);color:#0E1730}
[data-theme=dark] .roomsw button[aria-pressed=true] .rl,
[data-theme=dark] .roomsw button[aria-pressed=true] .rr{color:#0E1730}
[data-theme=dark] .note{background:var(--moss-l);border-color:var(--line);color:var(--ink)}
[data-theme=dark] .note>strong:first-child{color:var(--brass)}
[data-theme=dark] .note.c{background:#2A2410;border-color:#4A3F28}
[data-theme=dark] .note.c>strong:first-child{color:var(--brass-d)}
[data-theme=dark] .note.r{background:var(--rose-bg);border-color:var(--rose-line)}
[data-theme=dark] .note.r>strong:first-child{color:var(--rose)}
[data-theme=dark] .bcard p,[data-theme=dark] .bcard p strong,
[data-theme=dark] .gcard p,[data-theme=dark] .dcell .dv{color:var(--ink)}
[data-theme=dark] .chip2{background:var(--moss);color:var(--ink-2);border-color:var(--line)}
[data-theme=dark] .chip2.k{background:#2A2410;color:var(--brass-d);border-color:#4A3F28}
[data-theme=dark] .chips .chip{background:var(--bone2);color:var(--ink);border-color:var(--line)}
[data-theme=dark] .chips .chip[aria-pressed=true]{background:var(--forest);color:#0E1730;border-color:var(--forest)}
[data-theme=dark] .abtn{background:var(--bone2);color:var(--ink);border-color:var(--line)}
[data-theme=dark] .abtn.primary{background:var(--brass);color:#16223F;border-color:var(--brass)}
[data-theme=dark] .tag{background:var(--moss);color:var(--ink-2);border-color:var(--line)}
[data-theme=dark] .tag.v{background:#2A2410;color:var(--brass-d);border-color:#4A3F28}
[data-theme=dark] .tag.n{background:var(--bone2);color:var(--grey)}
[data-theme=dark] .empty{background:var(--card);border-color:var(--line);color:var(--ink)}
[data-theme=dark] .na{color:var(--grey)}
[data-theme=dark] .steps li{color:var(--ink)}
[data-theme=dark] details summary{color:var(--forest-d)}
[data-theme=dark] .ratetbl caption{color:var(--grey)}
[data-theme=dark] .ratetbl tr.hi{background:var(--moss-l)}
[data-theme=dark] .disclose{background:var(--bone2);color:var(--ink)}
[data-theme=dark] .cmp-k{color:var(--grey)}
[data-theme=dark] .cmp-v{color:var(--ink)}
[data-theme=dark] .srcgrid .src b{color:var(--ink)}
[data-theme=dark] .srcgrid .src span{color:var(--grey)}

/* --- narrow screens: nothing may push the page wider than the viewport --- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 22px;
  border-radius:12px;scrollbar-width:thin}
.tscroll table{margin:0;min-width:30rem}
.tscroll:focus-visible{outline:3px solid var(--brass);outline-offset:2px}

@media (max-width:640px){
  .ratetbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ratetbl tbody,.ratetbl thead{min-width:22rem;display:table;width:100%}
  .srcgrid{grid-template-columns:1fr}
  .roomsw{grid-template-columns:1fr;display:grid}
  .roomsw button{width:100%}
  .home{grid-template-columns:1fr}
  .tin{gap:8px}
}
/* At the largest text setting the room switch needs a full column even on
   a tablet, because each label carries a currency figure. */
@media (max-width:900px){
  html[style*="--scale: 1.3"] .roomsw,
  html[style*="--scale:1.3"] .roomsw{grid-template-columns:1fr;display:grid}
}
.srcgrid{grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
/* Long unbroken strings (email addresses, form numbers) must wrap rather
   than widen the page at the largest text size. */
.steps li,.steps li strong,.prose,.note,.gcard p,.bcard p{overflow-wrap:anywhere}
[data-theme=dark] .ctl input[type=search]{background:var(--bone2);color:var(--ink);border-color:var(--line)}
[data-theme=dark] .ctl input[type=search]::placeholder{color:var(--grey)}
[data-theme=dark] ::placeholder{color:var(--grey);opacity:1}

/* --- shareable state: copy button and back-to-top --- */
.cbar-act{margin-left:auto}
.copylink{font-size:.9375rem;padding:10px 15px;display:inline-flex;align-items:center;gap:8px}
.copylink .cl-i{font-size:1em;line-height:1}
.copylink.ok{border-color:var(--brass);color:var(--brass-d)}
[data-theme=dark] .copylink.ok{color:var(--brass)}
#homes-share .copylink{margin:0}

#totop{position:fixed;right:20px;bottom:20px;z-index:90;width:2.875rem;height:2.875rem;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--forest);color:#F6F7FB;border:0;box-shadow:0 6px 22px rgba(22,34,63,.28);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,background .2s}
#totop.on{opacity:1;pointer-events:auto;transform:none}
#totop:hover{background:var(--forest-d)}
#totop:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
[data-theme=dark] #totop{background:var(--forest);color:#0E1730}
@media (prefers-reduced-motion:reduce){#totop{transition:none}}
@media print{#totop,.copylink{display:none!important}}
/* the sticky answer bar owns the bottom-right on the calculator */
body:has(.stickyans.on) #totop{bottom:5.5rem}
/* Visually hidden, still announced. Used for structural headings that the
   visual design communicates through layout rather than a title. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.helpbar h2.hb-h{margin:0 0 4px;font-size:1.25rem;font-family:var(--dis);font-weight:600;letter-spacing:-.01em}