/* Tariff Tracker — live monitor
   Dark first. A system under pressure, read as a pulse.
   Severity palette validated with the dataviz validator for CVD separation and contrast.
   Every severity mark carries a number and a word, never colour alone. */

/* Tariff Tracker
   Warm, plain and unhurried. Cream paper, near black ink, one amber accent.
   Nothing shouts except the number, because the number is the point.
   Light only: there is no dark variant and no system switching. */

:root{
  /* paper and ink */
  --bg:#FDF9F3;          /* the page */
  --bg-2:#F7EFE3;        /* banded sections, warmer */
  --panel:#FFFFFF;       /* cards sit on the paper */
  --panel-2:#FBF5EC;
  --line:rgba(28,25,23,.12);
  --line-2:rgba(28,25,23,.07);
  --ink:#1C1917;
  --ink-2:#4A423C;
  --dim:#7A6E64;

  /* one accent, warm */
  --accent:#B4520A;      /* text and links, passes contrast on cream */
  --accent-2:#8F3F06;
  --amber:#F7B733;       /* fills and highlights only, never small text */
  --amber-soft:#FDEBC8;
  --accent-glow:rgba(247,183,51,.38);

  /* verdicts keep their meaning but move to the warm family */
  --calm:#0F7B5A;
  --elevated:#8A5A08;
  --high:#B4400F;
  --critical:#8C1D3F;
  --calm-bg:#DFF3EA;
  --elevated-bg:#FDEBC8;
  --high-bg:#FBE3D8;
  --critical-bg:#F7DEE6;

  --f-display:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"Outfit",-apple-system,BlinkMacSystemFont,sans-serif; /* mono retired */

  --r:24px;
  --r-sm:14px;
  --pad:clamp(1.25rem,5vw,3rem);
  --shadow:0 1px 2px rgba(28,25,23,.04), 0 12px 32px -18px rgba(28,25,23,.22);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-ui);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;margin:0;letter-spacing:-.03em;text-wrap:balance;line-height:1.08}
p{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;gap:1.5rem;height:62px}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.03em;white-space:nowrap}
.logo .beat{position:relative;width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.logo .beat::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}

.nav{display:flex;gap:.15rem;margin-left:auto;align-items:center}
.nav a{
  font-size:.8125rem;font-weight:500;padding:.45rem .7rem;border-radius:99px;color:var(--ink-2);
  transition:background .16s ease,color .16s ease;white-space:nowrap;
}
.nav a:hover{background:var(--panel-2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--panel-2);color:var(--ink)}
.live{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:.6875rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--calm);
  border:1px solid var(--line);border-radius:99px;padding:.3rem .6rem;white-space:nowrap;
}
.live i{width:6px;height:6px;border-radius:50%;background:var(--calm);animation:breathe 2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.25}}
.nav-cta{background:var(--accent);color:var(--bg);font-weight:600;padding:.5rem .95rem;border-radius:99px}
:root[data-theme="light"] .nav-cta,:root:not([data-theme="dark"]) .nav-cta{color:#fff}
.nav-cta:hover{background:var(--accent-2)}

/* ---------------- hero ---------------- */
.hero{position:relative;padding:clamp(2.5rem,7vw,5rem) 0 0;overflow:hidden}
.hero::before{
  content:"";position:absolute;left:50%;top:-40%;width:min(1100px,120vw);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,var(--accent-glow),transparent 62%);opacity:.55;
}
.hero>*{position:relative}
.kicker{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-mono);font-size:.6875rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:.35rem .8rem;
}
h1.title{font-size:clamp(2.1rem,5.6vw,4.25rem);margin:1.1rem 0 0;max-width:17ch;letter-spacing:-.04em}
h1.title em{font-style:normal;color:var(--accent)}
.lede{margin-top:1.15rem;max-width:58ch;color:var(--ink-2);font-size:clamp(1rem,1.5vw,1.1875rem);line-height:1.55}

/* pulse figure */
.pulse{
  margin-top:clamp(2rem,4vw,3rem);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;
}
.pulse-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:1.35rem 1.5rem .25rem}
.pulse-figure{min-width:0}
.pulse-k{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pulse-v{display:flex;align-items:baseline;gap:.1rem;font-family:var(--f-display);font-size:clamp(3.25rem,8vw,5.5rem);line-height:.9;letter-spacing:-.05em;margin-top:.4rem}
.pulse-v .u{font-size:.3em;color:var(--dim);margin-left:.15em;letter-spacing:0}
.pulse-cap{font-size:.8125rem;color:var(--dim);margin-top:.7rem;max-width:30ch;line-height:1.5}
.pulse-chart{padding:0 .35rem 1rem;position:relative}
.pulse-chart svg{display:block;width:100%;height:auto}
.pl-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px var(--accent-glow))}
.pl-proj{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:5 5;opacity:.55;stroke-linecap:round}
.pl-area{fill:url(#plg)}
.pl-dot{fill:var(--accent)}
.pl-pulse{fill:var(--accent);opacity:.35;animation:dotpulse 2.4s ease-out infinite}
@keyframes dotpulse{0%{r:4;opacity:.5}70%,100%{r:15;opacity:0}}
.pl-grid{stroke:var(--line-2);stroke-width:1}
.pl-lab{font-family:var(--f-mono);font-size:10px;fill:var(--dim);letter-spacing:.06em}
.pl-hit{fill:transparent;cursor:crosshair}
.pl-cross{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.pl-tip{
  position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-118%);
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.5rem .7rem;font-size:.75rem;line-height:1.45;color:var(--ink);
  box-shadow:var(--shadow);white-space:nowrap;transition:opacity .12s ease;z-index:5;max-width:260px;
}
.pl-tip b{font-family:var(--f-mono);color:var(--accent)}
.pl-tip span{display:block;color:var(--dim);white-space:normal;font-size:.7rem;margin-top:.2rem}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.tile{background:var(--panel);padding:1rem 1.5rem 1.15rem}
.tile-k{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tile-v{font-family:var(--f-display);font-size:1.6rem;letter-spacing:-.035em;margin-top:.2rem;font-variant-numeric:tabular-nums}
.tile-n{font-size:.75rem;color:var(--dim);margin-top:.1rem}

/* ---------------- sections ---------------- */
.section{padding:clamp(2.75rem,6vw,4.5rem) 0}
.section+.section{border-top:1px solid var(--line-2)}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 2.5rem;flex-wrap:wrap;margin-bottom:1.75rem}
.shead>div{flex:1 1 380px;min-width:0}
h2.sec{font-size:clamp(1.5rem,3vw,2.25rem)}
.snote{font-size:.875rem;color:var(--dim);max-width:54ch;line-height:1.55}
.more{
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.04em;color:var(--accent);
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
}
.more:hover{color:var(--accent-2)}

/* ---------------- status board ---------------- */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:.65rem}
.bt{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.85rem .9rem;display:flex;flex-direction:column;gap:.5rem;cursor:pointer;
  text-align:left;font:inherit;color:inherit;position:relative;overflow:hidden;
  transition:border-color .16s ease,transform .16s ease,background .16s ease;
  animation:rise .5s cubic-bezier(.2,.7,.3,1);
}
.bt:hover{border-color:var(--accent);transform:translateY(-2px);background:var(--panel-2)}
@keyframes rise{from{transform:translateY(10px)}to{transform:none}}
.bt-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.bt-name{font-family:var(--f-display);font-weight:600;font-size:.9375rem;letter-spacing:-.02em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-dot{width:7px;height:7px;border-radius:50%;flex:none;animation:breathe 3s ease-in-out infinite}
.bt-rate{font-family:var(--f-mono);font-size:1.05rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bt-meter{height:4px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.bt-meter i{display:block;height:100%;border-radius:99px;transform-origin:left;animation:grow .8s cubic-bezier(.2,.7,.3,1)}
.bt-band{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.legend{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--line-2)}
.legend span{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:.6875rem;
  letter-spacing:.06em;color:var(--dim)}
.legend i{width:9px;height:9px;border-radius:3px;flex:none}

/* severity tokens */
.sv-calm{--sv:var(--calm);--svbg:var(--calm-bg)}
.sv-elevated{--sv:var(--elevated);--svbg:var(--elevated-bg)}
.sv-high{--sv:var(--high);--svbg:var(--high-bg)}
.sv-critical{--sv:var(--critical);--svbg:var(--critical-bg)}
.bt-dot,.bt-meter i,.legend i{background:var(--sv,var(--dim))}
.bt-rate{color:var(--sv,var(--ink))}

.chip{
  font-family:var(--f-mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:99px;white-space:nowrap;display:inline-flex;align-items:center;gap:.3rem;
  background:var(--svbg,var(--panel-2));color:var(--sv,var(--ink-2));border:1px solid transparent;
}
.chip.plain{background:var(--panel-2);color:var(--ink-2)}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------------- corridor reader ---------------- */
.reader{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;position:relative;
}
.reader::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.7}
.rform{display:grid;grid-template-columns:1fr auto 1fr;border-bottom:1px solid var(--line)}
.rfield{padding:1.1rem 1.35rem;min-width:0}
.rfield+.rfield{border-left:1px solid var(--line)}
.rfield label{display:block;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.45rem}
.rfield select{
  width:100%;appearance:none;background:transparent;border:0;color:var(--ink);cursor:pointer;
  font-family:var(--f-display);font-weight:600;font-size:clamp(1.1rem,2.2vw,1.5rem);letter-spacing:-.03em;
  padding:0 1.5rem 0 0;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 9px) .68em,calc(100% - 4px) .68em;background-size:5px 5px;background-repeat:no-repeat;
}
.rfield select option{background:var(--panel);color:var(--ink)}
.rswap{display:grid;place-items:center;padding:0 .6rem;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.rswap button{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);
  color:var(--accent);cursor:pointer;font-size:1rem;display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .16s ease;
}
.rswap button:hover{transform:rotate(180deg);border-color:var(--accent)}
.rbody{padding:1.5rem 1.35rem}
.rhead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.rrate{font-family:var(--f-display);font-size:clamp(1.75rem,4.5vw,2.75rem);letter-spacing:-.04em;
  line-height:1.05;color:var(--sv,var(--ink));margin-top:.3rem}
.rlab{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.rsum{font-size:.9375rem;color:var(--ink-2);max-width:64ch;margin-top:.7rem;line-height:1.55}

.stack{margin-top:1.5rem;display:flex;flex-direction:column;gap:.7rem}
.layer{
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.8rem .9rem;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start;
  animation:rise .45s cubic-bezier(.2,.7,.3,1);
}
.auth{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.02em;color:var(--accent);
  border:1px solid var(--line);border-radius:99px;padding:.22rem .5rem;white-space:nowrap;
}
.ltop{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.lrate{font-family:var(--f-mono);font-size:1.0625rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lfrom{font-family:var(--f-mono);font-size:.6875rem;color:var(--dim)}
.lscope{font-size:.875rem;color:var(--ink-2);line-height:1.5;margin-top:.2rem}
.lnote{font-size:.8125rem;color:var(--ink-2);line-height:1.5;margin-top:.45rem;
  border-left:2px solid var(--accent);padding-left:.65rem}
.lbar{height:4px;border-radius:99px;background:var(--line-2);margin-top:.6rem;overflow:hidden}
.lbar i{display:block;height:100%;border-radius:99px;background:var(--sv,var(--accent));
  transform-origin:left;animation:grow .8s cubic-bezier(.2,.7,.3,1)}
.rfoot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;
  margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line-2)}
.rfoot p{font-size:.75rem;color:var(--dim);max-width:48ch;line-height:1.5}

/* ---------------- feed ---------------- */
.feed{display:flex;flex-direction:column;gap:.7rem}
.item{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.35rem;
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:clamp(.8rem,2.5vw,1.75rem);
  transition:border-color .16s ease;position:relative;
}
.item:hover{border-color:var(--accent)}
.item:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.idate{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.idate b{font-family:var(--f-mono);font-size:.8125rem;font-weight:500;letter-spacing:-.01em}
.imeta{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;margin-bottom:.55rem}
.item h3{font-size:1.125rem;max-width:46ch}
.isum{margin-top:.5rem;color:var(--ink-2);font-size:.9375rem;line-height:1.6;max-width:72ch}
.inote{margin-top:.6rem;font-size:.8125rem;color:var(--ink-2);line-height:1.55;max-width:68ch;
  border-left:2px solid var(--accent);padding-left:.7rem}
.isrc{margin-top:.75rem;font-family:var(--f-mono);font-size:.6875rem;color:var(--dim)}
.isrc a{color:var(--accent)}
.plink{color:var(--dim);font-family:var(--f-mono);font-size:.75rem;opacity:0;transition:opacity .15s ease}
.item:hover .plink,.item:focus-within .plink{opacity:1}
.newflag{background:var(--accent);color:var(--bg);font-weight:600}
.newflag{color:#fff}
:root[data-theme="light"] .newflag{color:#fff}

/* ---------------- countdown strip ---------------- */
.cdown{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:.65rem}
.cd{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem;
  display:flex;flex-direction:column;gap:.5rem;animation:rise .5s cubic-bezier(.2,.7,.3,1);
}
.cd-days{display:flex;align-items:baseline;gap:.4rem}
.cd-n{font-family:var(--f-display);font-size:2rem;letter-spacing:-.045em;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums}
.cd-u{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.cd-d{font-family:var(--f-mono);font-size:.6875rem;color:var(--dim);letter-spacing:.04em}
.cd-w{font-size:.875rem;color:var(--ink-2);line-height:1.5}
.cd-w b{color:var(--ink);font-weight:600}

/* ---------------- tables ---------------- */
.twrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.tbl{font-size:.875rem;min-width:700px}
.tbl th{
  text-align:left;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:400;padding:.9rem 1.1rem;border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;background:var(--panel);z-index:1;
}
.tbl td{padding:.9rem 1.1rem;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .nm{font-family:var(--f-display);font-weight:600;font-size:.9375rem;letter-spacing:-.02em}
.tbl .nm a:hover{color:var(--accent)}
.tbl .sc{color:var(--dim);font-size:.8125rem;line-height:1.5;max-width:44ch}
.vars{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.vars li{font-size:.8125rem;line-height:1.5;color:var(--ink-2);padding-left:.65rem;border-left:2px solid var(--line)}
.vars b{font-weight:600;color:var(--ink)}
.vars .vr{font-family:var(--f-mono);font-size:.75rem;color:var(--accent);margin:0 .3rem}

/* ---------------- cards / cta ---------------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.7rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.35rem;
  display:flex;flex-direction:column;gap:.5rem}
.card .k{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.card .v{font-family:var(--f-display);font-size:1.5rem;letter-spacing:-.035em}
.card p{font-size:.875rem;color:var(--ink-2);line-height:1.55}

.cta{
  position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,4vw,2.75rem);display:grid;gap:1.75rem;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);align-items:center;box-shadow:var(--shadow);
}
.cta::before{content:"";position:absolute;right:-10%;top:-60%;width:460px;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,var(--accent-glow),transparent 65%);opacity:.7}
.cta>*{position:relative}
.cta h2,.cta-h{font-size:clamp(1.35rem,3vw,2rem);max-width:19ch}
.cta p{margin-top:.85rem;color:var(--ink-2);font-size:.9375rem;line-height:1.6;max-width:50ch}
.frow{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.25rem}
.frow input{
  flex:1 1 210px;background:var(--bg-2);border:1px solid var(--line);border-radius:99px;
  padding:.8rem 1.1rem;color:var(--ink);font-family:var(--f-mono);font-size:.875rem;
}
.frow input::placeholder{color:var(--dim)}
.btn{
  background:var(--accent);color:var(--bg);border:0;border-radius:99px;padding:.8rem 1.4rem;
  font-family:var(--f-ui);font-weight:600;font-size:.875rem;cursor:pointer;
  transition:background .16s ease,transform .16s ease;
}
:root[data-theme="light"] .btn{color:#fff}
.btn{color:#fff}
.btn:hover{background:var(--accent-2);transform:translateY(-1px)}
.fnote{font-size:.75rem;color:var(--dim);margin-top:.8rem;line-height:1.5}
.tiers{display:flex;flex-direction:column;gap:.5rem}
.tier{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line-2);font-size:.8125rem}
.tier:first-child{border-top:0}
.tier b{font-family:var(--f-mono);font-weight:500;white-space:nowrap}
.tier span{color:var(--dim);text-align:right}

/* ---------------- misc ---------------- */
.dual{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:.7rem}
.dual>div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem}
.dirk{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.dual h3{font-size:1.35rem;letter-spacing:-.03em}
.prose{max-width:68ch}
.prose p+p{margin-top:1rem}
.foot{border-top:1px solid var(--line);padding:2.5rem 0 3.5rem;font-size:.8125rem;color:var(--dim)}
.foot-in{display:flex;flex-direction:column;gap:1.1rem}
.flinks{display:flex;gap:1.1rem;flex-wrap:wrap;font-family:var(--f-mono);font-size:.75rem}
.flinks a:hover{color:var(--accent)}
.srcs{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.75rem}
.srcs a{color:var(--accent)}
.back{font-family:var(--f-mono);font-size:.75rem;color:var(--dim)}
.back:hover{color:var(--accent)}
.rate-note{margin-top:1.5rem;max-width:74ch;font-size:.875rem;line-height:1.6;color:var(--ink-2)}

@media (max-width:820px){
  .rform{grid-template-columns:1fr}
  .rfield+.rfield{border-left:0;border-top:1px solid var(--line)}
  .rswap{border:0;border-top:1px solid var(--line);padding:.55rem}
  .cta{grid-template-columns:1fr}
  .item{grid-template-columns:1fr;gap:.65rem}
  .idate{flex-direction:row;align-items:center;gap:.6rem}
  .nav a:not(.nav-cta){display:none}
  .live{display:none}
  .topbar-in{gap:.75rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------------- composition bar (the household total) ---------------- */
.comp{margin-top:1.5rem}
.comp-bar{display:flex;gap:2px;height:56px;border-radius:10px;overflow:hidden;background:var(--line-2)}
.comp-seg{
  position:relative;display:flex;align-items:center;justify-content:center;min-width:0;
  border:0;cursor:pointer;padding:0;font:inherit;color:var(--bg);
  transition:filter .16s ease,transform .16s ease;
  animation:segin .7s cubic-bezier(.2,.7,.3,1);
}
:root[data-theme="light"] .comp-seg{color:#fff}
.comp-seg{color:#fff}
.comp-seg:hover{filter:brightness(1.15);transform:translateY(-2px)}
.comp-seg span{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;padding:0 .3rem;font-weight:500}
@keyframes segin{from{transform:scaleX(0)}to{transform:none}}
.comp-key{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.9rem}
.comp-key a{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--ink-2)}
.comp-key a:hover{color:var(--accent)}
.comp-key i{width:10px;height:10px;border-radius:3px;flex:none}
.comp-key b{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}

/* ---------------- vertical cards ---------------- */
.verts{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:.7rem}
.vcard{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.35rem;
  display:flex;flex-direction:column;gap:.6rem;position:relative;overflow:hidden;
  transition:border-color .16s ease,transform .16s ease;
  animation:rise .5s cubic-bezier(.2,.7,.3,1);
}
.vcard:hover{border-color:var(--accent);transform:translateY(-3px)}
.vcard::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--sv,var(--accent));opacity:.8}
.vc-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.vc-name{font-family:var(--f-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.025em}
.vc-fig{display:flex;align-items:baseline;gap:.3rem;margin-top:.15rem}
.vc-v{font-family:var(--f-display);font-size:2.1rem;letter-spacing:-.045em;line-height:1}
.vc-u{font-family:var(--f-mono);font-size:.75rem;color:var(--dim)}
.vc-lab{font-size:.8125rem;color:var(--ink-2);line-height:1.45}
.vc-chg{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--f-mono);font-size:.75rem;color:var(--sv,var(--ink-2))}
.vc-foot{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--line-2);display:flex;
  justify-content:space-between;align-items:center;gap:.75rem;font-family:var(--f-mono);font-size:.6875rem;color:var(--dim)}
.arrow{width:18px;height:18px;flex:none}

/* ---------------- filter chips ---------------- */
.filters{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.25rem}
.filters button{
  font-family:var(--f-ui);font-size:.8125rem;font-weight:500;padding:.4rem .85rem;border-radius:99px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.filters button:hover{border-color:var(--accent);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
:root[data-theme="light"] .filters button[aria-pressed="true"]{color:#fff}
.filters button[aria-pressed="true"]{color:#fff}
.item[hidden],.cd[hidden]{display:none}

/* ---------------- vertical page bits ---------------- */
.vhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,auto);gap:2rem;align-items:end}
.vfig{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.35rem;box-shadow:var(--shadow)}
.vfig .vc-v{font-size:clamp(2.5rem,6vw,3.5rem)}
.support{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.7rem}
.sup{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem;
  display:flex;flex-direction:column;gap:.45rem}
.sup h3{font-size:1.0625rem}
.sup .w{font-size:.875rem;color:var(--ink);line-height:1.5}
.sup .e{font-size:.8125rem;color:var(--dim);line-height:1.5}
.factlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.factlist li{font-size:.9375rem;line-height:1.6;color:var(--ink-2);padding-left:1.1rem;position:relative;max-width:76ch}
.factlist li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.caveat{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--elevated);
  border-radius:var(--r-sm);padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.6rem}
.caveat h3{font-size:.9375rem;font-family:var(--f-ui);font-weight:600;letter-spacing:0}
.caveat p{font-size:.875rem;color:var(--ink-2);line-height:1.55}
.tnote{font-size:.8125rem;color:var(--dim);line-height:1.55;margin-bottom:.9rem;max-width:78ch}
.notice{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.4rem;
  font-size:.875rem;color:var(--ink-2);line-height:1.6;max-width:78ch}
.notice b{color:var(--ink)}
@media (max-width:820px){
  .vhead{grid-template-columns:1fr}
  .comp-bar{height:44px}
  .comp-seg span{font-size:.625rem}
}

/* ---------------- the postcode check ---------------- */
.check{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.25rem,3vw,1.85rem);box-shadow:var(--shadow);max-width:640px;position:relative;overflow:hidden;
}
.check::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.check label.big{display:block;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.7rem}
.check-row{display:flex;gap:.5rem;flex-wrap:wrap}
.check-row input{
  flex:1 1 200px;background:var(--bg-2);border:1px solid var(--line);border-radius:99px;
  padding:.9rem 1.25rem;color:var(--ink);font-family:var(--f-mono);font-size:1.0625rem;
  text-transform:uppercase;letter-spacing:.06em;
}
.check-row input::placeholder{color:var(--dim);letter-spacing:.02em}
.check-row .btn{padding:.9rem 1.5rem;font-size:.9375rem}
.check-note{font-size:.8125rem;color:var(--dim);margin-top:.85rem;line-height:1.5}
.check-note a{color:var(--accent);border-bottom:1px solid var(--line)}
.check-err{color:var(--critical);font-size:.875rem;margin-top:.7rem}

.res-head{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.5rem}
.res-total{text-align:right;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.15rem;min-width:230px}
.res-total-v{font-family:var(--f-display);font-size:2rem;letter-spacing:-.04em;line-height:1;color:var(--accent)}

.bills{display:flex;flex-direction:column;gap:.7rem}
.bill{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.35rem;
  display:flex;flex-direction:column;gap:.7rem;position:relative;overflow:hidden;
  animation:rise .45s cubic-bezier(.2,.7,.3,1)}
.bill::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sv,var(--accent))}
.bill-head{display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;align-items:flex-start}
.bill-name{font-family:var(--f-display);font-weight:600;font-size:1.125rem;letter-spacing:-.025em}
.bill-who{font-size:.8125rem;color:var(--dim);margin-top:.2rem;line-height:1.5}
.bill-who b{color:var(--ink);font-weight:600}
.bill-who .warn{color:var(--elevated);display:block;margin-top:.2rem}
.bill-who .soft{opacity:.75}
.bill-fig{text-align:right;display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap;justify-content:flex-end}
.bill-v{font-family:var(--f-display);font-size:1.6rem;letter-spacing:-.04em;color:var(--sv,var(--ink))}
.bill-u{font-family:var(--f-mono);font-size:.7rem;color:var(--dim)}
.bill-cmp{font-size:.875rem;color:var(--ink-2);line-height:1.55;max-width:76ch}
.bill-check{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  border-top:1px solid var(--line-2);padding-top:.85rem}
.bill-check label{font-size:.8125rem;color:var(--dim);font-weight:500}
.bill-check .pfx{font-family:var(--f-mono);color:var(--dim);margin-right:-.3rem}
.bill-check input{
  width:110px;background:var(--bg-2);border:1px solid var(--line);border-radius:99px;
  padding:.45rem .8rem;color:var(--ink);font-family:var(--f-mono);font-size:.9375rem;
}
.bill-check .per{font-size:.8125rem;color:var(--dim)}
.bill-verdict{margin-left:.25rem}
.bill-verdict:empty{display:none}
.bill-link{align-self:flex-start}
@media (max-width:600px){
  .bill-head{flex-direction:column;gap:.5rem}
  .bill-fig{justify-content:flex-start;text-align:left}
  .res-total{text-align:left;min-width:0;width:100%}
}

/* ---------------- accessibility and mobile repairs ---------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--bg);
  padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip:focus{left:0}
main:focus{outline:none}
.scrollhint{display:none;font-size:.75rem;color:var(--dim);margin-bottom:.5rem}
.twrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* labels were the smallest text on the page. They are what tells you what a number means. */
.check label.big{font-size:.9375rem;letter-spacing:0;text-transform:none;color:var(--ink-2);font-weight:500}
.tile-k,.card .k,.pulse-k,.cd-u,.bt-band{font-size:.75rem;letter-spacing:.06em}
.tbl th{font-size:.75rem;letter-spacing:.06em}
.bill-check label,.bill-check .per{font-size:.9375rem}

/* 16px stops iOS zooming on focus; 44px is the minimum comfortable tap target */
.check-row input,.bill-check input,.frow input{font-size:1rem;min-height:44px}
.btn,.nav a,.filters button{min-height:44px;display:inline-flex;align-items:center}
#region-pick{min-height:44px;font-size:1rem}

/* permalinks were mouse only */
.plink{opacity:.55;font-size:.6875rem;letter-spacing:.06em}
.item:hover .plink,.item:focus-within .plink{opacity:1}

/* a real menu on small screens, instead of hiding every link */
.menu-btn{
  display:none;margin-left:auto;align-items:center;gap:.4rem;background:var(--panel);
  border:1px solid var(--line);border-radius:99px;color:var(--ink);cursor:pointer;
  font-family:var(--f-ui);font-size:.875rem;font-weight:500;padding:.5rem .9rem;min-height:44px;
}
.menu-btn span{display:block;width:15px;height:2px;background:currentColor;border-radius:2px}
.menu-btn span+span{margin-top:-9px}
.menu-btn span:nth-child(2){margin-left:0}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .scrollhint{display:block}
  .nav{
    position:absolute;top:62px;left:0;right:0;flex-direction:column;align-items:stretch;gap:.15rem;
    background:var(--bg);border-bottom:1px solid var(--line);padding:.75rem var(--pad) 1.1rem;
    box-shadow:var(--shadow);display:none;
  }
  .nav[data-open="true"]{display:flex}
  .nav a:not(.nav-cta){display:flex}
  .nav a{padding:.7rem .8rem;font-size:1rem;border-radius:var(--r-sm)}
  .nav .nav-cta{justify-content:center;margin-top:.4rem}
  .live{display:inline-flex;align-self:flex-start;margin-bottom:.4rem}
  .topbar-in{position:relative}
}

/* ---------------------------------------------------------------- folds
   Bright cards, not grey rules. Open blocks read as part of the page; closed
   ones read as a button you want to press. Native details, so it survives
   JavaScript being off. */
.fold-lead{padding-bottom:0;border-top:0}
.fold-lead .snote{max-width:60ch}
.fold-stack{padding-top:1.5rem}
.fold{margin:0 0 .75rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.fold[open]{background:var(--panel)}
.fold-sum{display:flex;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap;
  padding:1.15rem 1.25rem;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-weight:600;font-size:1.0625rem;color:var(--ink)}
.fold-sum::-webkit-details-marker{display:none}
.fold-sum:hover{background:var(--panel-2);color:var(--accent)}
.fold-sum:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fold-t{flex:1 1 auto;min-width:0}
.fold-n{font-weight:400;font-family:var(--f-ui);font-size:.8125rem;color:var(--dim);flex:0 1 auto}
.fold-i{flex:none;width:.55rem;height:.55rem;margin-left:auto;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .15s ease}
.fold[open]>.fold-sum .fold-i{transform:rotate(-135deg)}
.fold[open]>.fold-sum{border-bottom:1px solid var(--line-2)}
.fold-b{padding:0 1.25rem}
.fold-b .section{padding:1.25rem 0 1.5rem;border-top:0}
.fold-b .section+.section{border-top:0}
.fold-b .wrap{padding-left:0;padding-right:0;max-width:none}
.fold-b .shead{margin-bottom:1rem}
.fold-b h2.sec{display:none}
@media (max-width:600px){
  .fold-sum{padding:1rem;font-size:1rem}
  .fold-n{flex-basis:100%;order:3;margin-top:-.1rem}
  .fold-i{order:2}
  .fold-b{padding:0 1rem}
}
@media (prefers-reduced-motion:reduce){.fold-i{transition:none}}

/* ------------------------------------------------------- typography pass
   The site was setting labels, dates, units and captions in JetBrains Mono,
   uppercased and letter-spaced. That is the language of a terminal, and on a
   page about somebody's gas bill it reads as noise. Mono is now reserved for
   figures, where a fixed width actually helps you compare one number with
   another. Everything a person reads as words is set in the UI face, in
   sentence case, at a size you can read without leaning in. */
.kicker,.live,.pulse-k,.tile-k,.bt-band,.legend span,.rfield label,.rlab,
.cd-u,.cd-d,.card .k,.dirk,.flinks,.back,.comp-seg span,.vc-u,.vc-chg,
.vc-meta,.check label.big,.bill-u,.bill-check .pfx,.isrc,.plink,.lfrom,
.tbl thead th,.filters button,.pl-lab{
  font-family:var(--f-ui);
  text-transform:none;
  letter-spacing:0;
}
/* small text was 11px in places, which is below what most people read comfortably */
.kicker,.live{font-size:.75rem;font-weight:600}
.pulse-k,.tile-k,.rlab,.rfield label,.check label.big,.bt-band,.card .k,.dirk{
  font-size:.8125rem;font-weight:600;color:var(--dim)}
.cd-u{font-size:.8125rem;font-weight:500}
.cd-d,.isrc,.lfrom,.bill-u,.plink,.back{font-size:.8125rem}
.tbl thead th{font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.legend span,.comp-seg span,.vc-u,.vc-chg,.flinks{font-size:.8125rem}

/* the confidence note on a countdown card is its own line, not a fragment
   welded onto the end of the sentence before it */
.cd-conf{display:block;margin-top:.5rem;font-size:.8125rem;color:var(--dim);font-style:normal}

/* body copy: a comfortable measure and a little more air between lines */
.cd-w,.bill-cmp,.snote,.tnote,.factlist li,.notice,.caveat p{line-height:1.6}
.cd-w{font-size:.9375rem}

/* ==================================================================
   WARM REBUILD
   Everything below reshapes the surfaces to match the new palette:
   bigger type, rounder corners, more air, and the figure doing the
   talking instead of a chart. Later rules win, so this sits last. */

body{font-size:1.0625rem;line-height:1.65;letter-spacing:-.005em;background:var(--bg)}
h1,h2,h3,h4{font-family:var(--f-display);letter-spacing:-.02em;line-height:1.12}
p,li,td,th,label,input,button,a{font-family:var(--f-ui)}
h1,h2,h3,h4,.pulse-v,.tile-v,.cd-n,.res-total-v,.vc-v{font-family:var(--f-display)}

/* ---------- header: a wordmark and a short row, nothing more ---------- */
.topbar{background:var(--bg);border-bottom:1px solid var(--line-2);backdrop-filter:none}
.topbar-in{padding-top:1.1rem;padding-bottom:1.1rem}
.logo{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:-.03em}
.nav a{font-size:.9375rem;font-weight:500;color:var(--ink-2)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.live{background:var(--amber-soft);border:0;color:var(--accent-2);border-radius:99px;
  padding:.35rem .8rem;font-weight:600}

/* ---------- hero: the number is the hero ---------- */
.hero{padding-top:clamp(2rem,6vw,4rem)}
.hero::before{opacity:.5}
.title{font-size:clamp(2.5rem,8vw,4.25rem);font-weight:700}
.lede{font-size:clamp(1.0625rem,2.6vw,1.25rem);color:var(--ink-2);max-width:36ch;margin-top:1rem}
.kicker{background:var(--amber-soft);border:0;color:var(--accent-2);border-radius:99px;
  padding:.4rem .9rem;font-weight:600;font-size:.8125rem}
.pulse{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--shadow);padding:clamp(1.5rem,4vw,2.25rem);overflow:hidden}
.pulse-head{gap:1.5rem 2rem;align-items:flex-start}
.pulse-k{font-size:.875rem;font-weight:600;color:var(--dim);margin-bottom:.35rem}
.pulse-v{font-size:clamp(3rem,11vw,5.5rem);font-weight:700;letter-spacing:-.045em;line-height:1}
.pulse-v .u{font-size:.3em;font-weight:500;color:var(--dim);letter-spacing:0}
.pulse-cap{font-size:.9375rem;color:var(--dim);max-width:44ch;margin-top:.75rem}
.tiles{gap:1px;background:var(--line-2);border-radius:var(--r-sm);overflow:hidden;margin-top:1.75rem}
.tile{background:var(--panel);padding:1.1rem 1.25rem}
.tile-k{font-size:.8125rem;font-weight:600;color:var(--dim)}
.tile-v{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;margin-top:.15rem}
.tile-n{font-size:.8125rem;color:var(--dim)}

/* ---------- buttons: black pills, like a doorbell you want to press ---------- */
.btn,.nav-cta,.check button,.bill-check button,.filters button[aria-pressed="true"]{
  background:var(--ink);color:#fff;border:0;border-radius:99px;
  font-family:var(--f-ui);font-weight:600;font-size:1rem;padding:.9rem 1.5rem;
  letter-spacing:0;text-transform:none}
.btn:hover,.check button:hover,.bill-check button:hover{background:var(--accent-2)}
.filters button{border-radius:99px;border:1px solid var(--line);background:var(--panel);
  font-weight:500;font-size:.9375rem;padding:.5rem 1rem;color:var(--ink-2)}
.more{color:var(--accent);font-weight:600}
a.more:hover{color:var(--accent-2)}

/* ---------- inputs: big, round, obvious ---------- */
.check input,.bill-check input,input[type=text],input[type=number]{
  background:var(--panel);border:1px solid var(--line);border-radius:99px;
  font-family:var(--f-ui);font-size:1.0625rem;padding:.95rem 1.35rem;
  text-transform:none;letter-spacing:0;color:var(--ink)}
.check input:focus,.bill-check input:focus{outline:2px solid var(--amber);outline-offset:2px}
.check label.big{font-size:.9375rem;font-weight:600;color:var(--ink-2)}

/* ---------- cards and panels ---------- */
.card,.sup,.cd,.res-total,.notice,.caveat,.plain,.support>*{
  border-radius:var(--r);border:1px solid var(--line-2);background:var(--panel)}
.cd{padding:1.35rem}
.cd-n{font-size:2.25rem;font-weight:700;color:var(--accent);letter-spacing:-.03em}
.cd-u{color:var(--dim);font-weight:500}
.cd-d{color:var(--dim)}
.cd-w{font-size:.9375rem;color:var(--ink-2)}
.notice{background:var(--amber-soft);border-color:transparent;padding:1.35rem 1.5rem}
.caveat{background:var(--panel-2);border-color:var(--line-2);padding:1.35rem 1.5rem}

/* ---------- folds: fat white cards on cream ---------- */
.fold{border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);
  box-shadow:var(--shadow);margin-bottom:1rem}
.fold-sum{padding:1.35rem 1.5rem;font-family:var(--f-display);font-size:1.1875rem;font-weight:600}
.fold-n{font-family:var(--f-ui);font-size:.875rem}
.fold-i{border-color:var(--accent)}
.fold-b{padding:0 1.5rem}
@media (max-width:600px){
  .fold-sum{padding:1.15rem 1.15rem;font-size:1.0625rem}
  .fold-b{padding:0 1.15rem}
}

/* ---------- tables: quieter lines, bigger figures ---------- */
.tbl thead th{background:transparent;border-bottom:1px solid var(--line);color:var(--dim);
  font-weight:600;font-size:.8125rem;padding:.75rem .9rem}
.tbl td{border-bottom:1px solid var(--line-2);padding:.9rem}
.tbl .num{font-family:var(--f-display);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- section rhythm: alternate paper and cream ---------- */
.section{padding:clamp(2.5rem,6vw,4rem) 0}
.section+.section{border-top:0}
.fold-stack{background:var(--bg-2);padding:clamp(2rem,5vw,3rem) 0;border-radius:0}
.fold-lead{padding-bottom:.5rem}
.fold-lead .snote{font-size:1.0625rem;color:var(--ink-2);max-width:44ch}

/* ---------- chips keep meaning, lose the glare ---------- */
.chip{border-radius:99px;font-family:var(--f-ui);font-weight:600;font-size:.8125rem;
  padding:.35rem .75rem;letter-spacing:0;text-transform:none}

/* ---------- footer ---------- */
.foot{background:var(--bg-2);border-top:1px solid var(--line-2)}

/* ---------- the menu button was three loose dashes; make it a proper control ---------- */
.menu-btn{display:none;align-items:center;gap:.55rem;background:var(--panel);
  border:1px solid var(--line);border-radius:99px;padding:.6rem 1.05rem;
  font-family:var(--f-ui);font-size:.9375rem;font-weight:600;color:var(--ink);cursor:pointer}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
  margin:0;transition:transform .18s ease,opacity .18s ease}
.menu-btn span+span{margin-top:4px}
.menu-btn>span:nth-of-type(1),.menu-btn>span:nth-of-type(2),.menu-btn>span:nth-of-type(3){
  position:static}
.menu-btn .bars{display:inline-flex;flex-direction:column}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .topbar-in{align-items:center}
}

/* ---------- the change figure belongs beside the number, not floated right ---------- */
@media (max-width:760px){
  .pulse-head{flex-direction:column;gap:1.25rem}
  .pulse-head>.pulse-figure[style]{text-align:left !important}
  .pulse-head>.pulse-figure[style] .pulse-v{justify-content:flex-start !important;
    font-size:clamp(1.75rem,7vw,2.25rem) !important}
  .pulse-head>.pulse-figure[style] .pulse-cap{margin-left:0 !important;text-align:left !important}
}

/* ---------- keep the sticky header solid so nothing shows through it ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--bg)}

/* ---------- a comfortable measure for the opening paragraph ---------- */
.hero .lede{max-width:32ch}

/* .pulse now carries the padding, so the head must not add its own on top */
.pulse-head{padding:0}
.pulse .tiles{margin-left:0;margin-right:0}

/* the bars wrapper is a span too, so stop the bar rule applying to it */
.menu-btn .bars{width:auto;height:auto;background:none;border-radius:0;margin:0}
.menu-btn .bars span{width:18px;height:2px;background:var(--ink);border-radius:2px;display:block}
.menu-btn .bars span+span{margin-top:4px}

/* ---------------------------------------------------------------- motion
   Blocks rise into place, cards lift under the cursor, the update dot beats.
   Everything here is switched off for anyone who has asked their device for
   reduced motion, and nothing depends on movement to be understood. */
/* the reveal is played by script on top of a visible element; there is
   deliberately no rule here that hides anything */

.pulse,.card,.sup,.cd,.fold,.verts>*{transition:transform .22s ease,box-shadow .22s ease,
  opacity .5s cubic-bezier(.2,.7,.3,1)}
.card:hover,.sup:hover,.cd:hover,.verts>*:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(28,25,23,.05),0 18px 40px -22px rgba(28,25,23,.35)}
.fold:hover{box-shadow:0 2px 4px rgba(28,25,23,.05),0 16px 36px -22px rgba(28,25,23,.3)}
.btn,.check button,.bill-check button{transition:transform .16s ease,background .16s ease}
.btn:active,.check button:active,.bill-check button:active{transform:scale(.97)}
.fold-i{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.nav a{transition:color .15s ease}
.more{transition:transform .16s ease,color .15s ease;display:inline-block}
.more:hover{transform:translateX(3px)}

/* the live dot on the update pill, a slow heartbeat rather than a blink */
.beat,.live>i{position:relative;display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--amber);flex:none}
.beat::after,.live>i::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--amber);animation:beat 2.6s ease-out infinite}
@keyframes beat{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}

/* the opening line, and the quieter second line under it */
.lede-sub{margin-top:.85rem;font-size:1rem;color:var(--dim);max-width:38ch;line-height:1.6}

@media (prefers-reduced-motion:reduce){
  .beat::after,.live>i::after{animation:none}
  .card:hover,.sup:hover,.cd:hover,.verts>*:hover,.more:hover{transform:none}
}

/* --------------------------------------------------- phone sweep fixes
   Found by walking all 17 pages at 390px: text below 12.5px, and links
   that were comfortably readable on a desktop but a hard tap on a phone. */

/* "All trackers ->" style links were 12px and 20px tall. Now readable and
   tappable without being shouty. */
.more{font-size:.9375rem;padding:.4rem 0;min-height:2.5rem;display:inline-flex;align-items:center;gap:.3rem}

/* the unit beside a big figure was scaling to 8.4px on a narrow screen,
   because it was a fraction of a clamped size with no floor of its own */
.pulse-v .u{font-size:clamp(.9375rem,.3em,1.5rem)}

/* everything else that had drifted below a comfortable reading size */
.scrollhint,.auth,.plink,.isrc,.lfrom,.tile-n,.pulse-cap,.bill-u,.cd-d{font-size:.8125rem}
.foot a,.flinks a,.back{font-size:.875rem}
.srcs a{font-size:.9375rem}

/* the wordmark is a link home and should be a proper target */
.logo{min-height:2.75rem;display:inline-flex;align-items:center;gap:.5rem}

/* inline links inside sentences stay inline, but get a clearer underline so
   they do not rely on colour alone */
.wrap p a:not(.more):not(.btn),.factlist a,.cd-w a{text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:rgba(180,82,10,.4)}
.wrap p a:not(.more):not(.btn):hover{text-decoration-color:var(--accent)}

/* tables scroll sideways on purpose; make that obvious rather than accidental */
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-sm)}
.scrollhint{color:var(--dim)}
.plink{min-height:2.25rem;display:inline-flex;align-items:center;padding:0 .25rem}


/* --------------------------------------------------- belt and braces
   No element on this site may rely on an animation completing in order to
   be visible. If a keyframe animation is paused, throttled or never starts,
   the element must still render. This rule is the backstop. */
/* (no blunt override needed: see the fill-mode note above) */

/* ---------------------------------------------------------------- assistant
   A conversation, not a form. Three things were wrong with the first attempt
   and are fixed here.

   The thread was a 26rem box with 4,855px of content inside it, so on a phone
   the answer was clipped top and bottom and the visitor had to scroll a box
   inside a page. The thread now has no height of its own. It grows down the
   page like a conversation should, and the input rides along at the bottom of
   the screen so it is never out of reach.

   The buttons stacked four deep and ate the whole viewport. They are now one
   row that scrolls sideways, and they live in the dock rather than in the
   conversation, so they never push the answer off the screen.

   And there was nothing to show the thing was working. There is now a panel
   that lists what is actually being done, one line at a time, printing what
   each step found. Every line in it is a real operation. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the hero clips its glow with overflow:hidden, which would kill the sticky
   dock below. clip does the same job without making a scroll container. */
.chat-hero{overflow:clip}
.chat-hero .title{font-size:clamp(2rem,6.5vw,3.25rem);margin-bottom:1.5rem}
.chat{max-width:44rem}

/* the conversation itself: no box, no inner scrollbar, no clipping */
.chat-thread{display:flex;flex-direction:column;gap:.75rem;padding:0 0 1rem}
.msg{max-width:100%;padding:.9rem 1.1rem;border-radius:18px;font-size:1rem;line-height:1.55;
  background:var(--panel);border:1px solid var(--line-2)}
.msg-bot{border-bottom-left-radius:6px;align-self:flex-start;max-width:38rem;
  box-shadow:0 1px 2px rgba(28,25,23,.04)}
.msg-you{background:var(--ink);color:#fff;border-color:var(--ink);
  border-bottom-right-radius:6px;align-self:flex-end;max-width:88%}
.msg-you a{color:#fff;text-decoration:underline}
.msg-wide{align-self:stretch;max-width:100%}
.msg p{margin:0 0 .6rem}
.msg p:last-child{margin-bottom:0}
.msg-tail{margin-top:.6rem}
.msg .more{display:inline-block}
.msg .billread{margin:.6rem 0 .4rem;padding-left:1.1rem;font-size:.9375rem;line-height:1.7}
.msg .snote{font-size:.8125rem;color:var(--dim);margin-top:.6rem;line-height:1.55}

/* the working panel. The spinner turns; nothing here fades, and no figure on
   the page is ever animated. State is shown by colour and a mark, never by
   opacity, because a half faded element in a backgrounded tab stays invisible. */
.msg-work{padding:.85rem 1rem;background:var(--bg-2);border-color:var(--line-2)}
.work-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.6rem}
.work-t{font-family:var(--f-ui);font-size:.875rem;font-weight:600;color:var(--ink-2)}
.work-ok .work-t{color:var(--accent)}
.work-bad .work-t{color:#B4231A}
.spin{width:.95rem;height:.95rem;flex:none;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--accent);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--accent)}}

.work-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.wk{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem;line-height:1.45;
  font-family:var(--f-ui);color:var(--dim)}
.wk-m{width:.85rem;height:.85rem;flex:none;margin-top:.22rem;border-radius:50%;
  border:1.5px solid var(--line);background:var(--panel)}
.wk-l{flex:1 1 auto;min-width:0}
.wk-v{flex:none;font-weight:600;color:var(--ink-2);text-align:right;max-width:52%}
.wk-go{color:var(--ink-2)}
.wk-go .wk-m{border-color:var(--accent);background:var(--amber-soft)}
.wk-done{color:var(--ink-2)}
.wk-done .wk-m{border-color:var(--accent);background:var(--accent);
  background-image:linear-gradient(var(--accent),var(--accent))}
.wk-done .wk-m::after{content:"";display:block;width:.26rem;height:.5rem;margin:.02rem 0 0 .27rem;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.wk-skip .wk-m{border-style:dashed}
.wk-bad{color:#B4231A}
.wk-bad .wk-m{border-color:#B4231A;background:#FDECEA}

/* the answer, when it carries a figure. Written in one go, never counted up. */
.ans-lede{font-family:var(--f-ui);font-size:.9375rem;color:var(--ink-2);margin-bottom:.35rem}
.ans-big{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:.1rem 0 .5rem}
.ans-n{font-family:var(--f-display);font-weight:700;font-size:clamp(2.6rem,11vw,3.6rem);
  line-height:1;letter-spacing:-.02em;color:var(--ink)}
.ans-u{font-family:var(--f-ui);font-size:.9375rem;color:var(--dim)}
.ans-sub{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.msg .res-head,.msg .bills{margin-top:.75rem}
.msg .bill{border-radius:var(--r-sm)}
#chat-results:not(:empty){margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-2)}

/* the dock: buttons, input and the privacy line, pinned to the bottom of the
   screen once the conversation is longer than the viewport */
.chat-dock{position:sticky;bottom:0;z-index:3;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:0 -6px 20px rgba(28,25,23,.06);padding:.7rem .7rem .55rem}
.chat-chips{display:flex;gap:.45rem;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:0 0 .55rem;margin:0 -.2rem .1rem;scroll-padding-left:.2rem}
.chat-chips::-webkit-scrollbar{display:none}
.chip-btn{flex:0 0 auto;white-space:nowrap;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:99px;padding:.62rem .9rem;font-family:var(--f-ui);font-size:.875rem;
  font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:border-color .15s ease,color .15s ease,transform .15s ease}
.chip-btn:first-child{margin-left:.2rem}
.chip-btn:hover{border-color:var(--accent);color:var(--accent)}
.chip-btn:active{transform:scale(.97)}

.chat-bar{display:flex;align-items:center;gap:.45rem}
.chat-bar input[type=text]{flex:1 1 auto;min-width:0;border:1px solid var(--line);
  border-radius:99px;padding:.8rem 1.1rem;font-size:1rem;background:var(--panel)}
.chat-bar input[type=text]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.chat-bar button[type=submit]{background:var(--ink);color:#fff;border:0;border-radius:50%;
  width:2.85rem;height:2.85rem;flex:none;font-size:1.15rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease}
.chat-bar button[type=submit]:hover{background:var(--accent)}
.chat-clip{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:2.85rem;height:2.85rem;border-radius:50%;border:1px solid var(--line);
  cursor:pointer;font-size:1.1rem;background:var(--panel)}
.chat-clip:hover,.chat-clip.over{border-color:var(--accent);background:var(--amber-soft)}
.chat-note{font-size:.75rem;color:var(--dim);line-height:1.5;margin:.5rem .3rem 0}
.chat-note a{color:var(--accent);text-decoration:underline}

@media (max-width:600px){
  .msg{font-size:.9375rem;padding:.8rem .95rem}
  .msg-you{max-width:92%}
  .chat-note{font-size:.75rem}
  .ans-n{font-size:clamp(2.4rem,13vw,3.2rem)}
}

/* the folded detail underneath an answer, so the answer stays the answer */
.chat-fold{margin-top:1rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg-2)}
.chat-fold>.fold-sum{padding:.85rem 1rem}
.chat-fold>.fold-b{padding:0 1rem 1rem}
.chat-fold .bill{background:var(--panel)}
.chat-clip svg{display:block}
.chat-fold>.fold-sum{font-size:1rem;line-height:1.35;align-items:center}
.chat-fold .fold-t{flex:1 1 0;min-width:0}
.chat-fold .fold-i{order:2;margin-left:.5rem}
.chat-fold .fold-n{flex-basis:100%;order:3;margin-top:.15rem;font-size:.8125rem}

/* On a wide screen the composer runs the full width of the page rather than
   sitting in a 44rem column. The bubbles stay narrower than the bar, because a
   line of text 1,200px wide is hard to read, but the bar, the answer cards and
   the results all use the whole width. */
@media (min-width:860px){
  .chat{max-width:100%}
  .msg-bot{max-width:46rem}
  .msg-you{max-width:34rem}
  .msg-wide{max-width:100%}
  .msg-work{max-width:56rem}
  .msg .snote{max-width:72ch}
  .chat-dock{padding:.85rem .9rem .65rem}
  .chat-bar input[type=text]{padding:.95rem 1.4rem}
  .chat-bar button[type=submit],.chat-clip{width:3rem;height:3rem}
  .chat-note{margin:.55rem .4rem 0;max-width:78ch}
}

/* the corridor tiles are anchors now, not buttons, so a crawler and a person
   can both reach the 29 country pages. Keep them looking identical. */
a.bt{text-decoration:none}
a.bt:hover{border-color:var(--accent)}
a.bt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the region index: a plain list of links, which is all it needs to be */
.rgrid{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.rgrid li{margin:0}
.rgrid a,.rgrid .rg-here{display:block;padding:.75rem .9rem;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--panel);font-family:var(--f-ui);
  font-size:.9375rem;font-weight:500;color:var(--ink-2);text-decoration:none;
  transition:border-color .15s ease,color .15s ease}
.rgrid a:hover{border-color:var(--accent);color:var(--accent)}
.rgrid .rg-here{background:var(--bg-2);color:var(--dim);border-style:dashed}

/* the calendar: date on the left, what happens on the right */
.cal{display:flex;flex-direction:column;gap:1rem}
.cal-row{display:grid;grid-template-columns:9rem 1fr;gap:1.25rem;padding:1.1rem 1.25rem;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-sm)}
.cal-when b{font-family:var(--f-display);font-size:1.0625rem;line-height:1.3}
.cal-what p{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.cal-what .dirk a{color:var(--accent);text-decoration:none}
.cal-what .dirk a:hover{text-decoration:underline}
@media (max-width:600px){
  .cal-row{grid-template-columns:1fr;gap:.5rem;padding:1rem}
}