/* 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:#74695F;         /* darkened from #7A6E64: the old value failed WCAG AA
                            at 4.34:1 on the banded background and 4.22:1 on the
                            amber notices. This passes on every surface here. */

  /* one accent, warm */
  --accent:#A64B09;      /* text and links. Darkened from #B4520A, which passed
                            on cream but failed on every tinted surface it is
                            used on, down to 3.99:1 on the critical tint. */
  --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)}
/* a banded section, for long pages that need a rhythm */
.section.alt{background:var(--bg-2)}
.section.alt+.section,.section+.section.alt{border-top:0}
.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}
.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}
/* A caveat box is a real landmark for somebody navigating by headings, so it
   keeps its heading, but at the level the document actually needs rather
   than jumping from h1 straight to h3. */
.caveat h3,.caveat .ch{font-size:.9375rem;font-family:var(--f-ui);font-weight:600;letter-spacing:0;margin:0 0 .5rem}
.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, then were made always visible at 55% opacity,
   which computed to 2.22:1 against white. Opacity is not a way to make text
   quiet: it makes it unreadable. Quiet is a job for size and weight. */
.plink{opacity:1;color:var(--dim);font-size:.6875rem;letter-spacing:.06em;font-weight:500}
.plink:hover,.plink:focus-visible{color:var(--accent)}
.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}
}

/* ---- code samples on the API page -------------------------------------
   The only place on the site where a monospace face earns its keep. Kept
   quiet: same cream family, one tint darker, so a page of examples still
   reads as this site rather than as documentation bolted on. */
.pre{
  background:#221F1D;color:#F3EDE4;border-radius:12px;padding:1.1rem 1.2rem;
  overflow-x:auto;margin:1.5rem 0 0;max-width:min(100%,62rem);
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
  "Liberation Mono",monospace;
  font-size:.9375rem;line-height:1.65;-webkit-overflow-scrolling:touch;
  /* the whole point of a code sample is that the line breaks are the meaning */
  white-space:pre;tab-size:2;
}
.pre b{color:var(--amber);font-weight:600}
.pre i{color:#9FD8C4;font-style:normal}
.pre .c{color:#A79E93}
code:not(.pre){
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.9em;background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:6px;padding:.1em .38em;word-break:break-word;
}
.eplist{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.75rem}
.eplist li{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.1rem;
}
.eplist .ep-a{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,
  Consolas,monospace;font-size:.9375rem;color:var(--accent);font-weight:600;
  word-break:break-word}
.eplist .ep-w{margin:.4rem 0 0;color:var(--ink-2)}
.eplist .ep-m{margin:.45rem 0 0;font-size:.875rem;color:var(--dim)}
.eplist .ep-m b{color:var(--ink-2);font-weight:600}

/* ================================================================ navigation
   Ten bills and sixty seven pages will not fit in a row of links, so the bills
   sit in a disclosure panel. It is a native details element: it opens with no
   JavaScript, it is in the tab order without being told, and the script only
   adds the manners. */
.navdrop{position:relative}
.navdrop>summary{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;
  font-size:.9375rem;font-weight:500;color:var(--ink-2);padding:.45rem .7rem;
  border-radius:99px;white-space:nowrap;min-height:44px;
  transition:background .16s ease,color .16s ease;
}
.navdrop>summary::-webkit-details-marker{display:none}
.navdrop>summary::marker{content:""}
.navdrop>summary:hover,.navdrop[open]>summary,.navdrop>summary.is-here{color:var(--ink)}
.navdrop>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.navdrop-i{
  width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;opacity:.65;
}
.navdrop[open] .navdrop-i{transform:rotate(-135deg) translate(-2px,-2px)}

.navpanel{
  position:absolute;top:calc(100% + .55rem);right:0;z-index:60;min-width:min(24rem,88vw);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 44px rgba(28,25,23,.14);padding:.5rem;
}
.navgrid{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.navgrid a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem;
  padding:.6rem .75rem;border-radius:10px;color:var(--ink-2);
}
.navgrid a:hover{background:var(--panel-2);color:var(--ink)}
.navgrid a[aria-current="page"]{background:var(--amber-soft);color:var(--ink)}
.navgrid .ng-n{font-weight:600;font-size:.9375rem;color:var(--ink)}
.navgrid .ng-v{
  font-family:var(--f-mono);font-size:.8125rem;color:var(--dim);text-align:right;
  white-space:nowrap;flex:none;
}
.navpanel-f{
  display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin-top:.35rem;padding:.75rem .75rem .55rem;
  border-top:1px solid var(--line-2);
}
.navpanel-f a{font-size:.875rem;font-weight:600;color:var(--accent)}
.navpanel-f a:hover{color:var(--accent-2)}
.nav-l{font-size:.9375rem;font-weight:500;color:var(--ink-2);padding:.45rem .7rem;border-radius:99px}
.nav-l:hover,.nav-l[aria-current="page"]{color:var(--ink)}

@media (max-width:900px){
  /* inside the open menu a panel is just the next thing down the page */
  .navdrop{position:static;border-bottom:1px solid var(--line-2)}
  .navdrop:last-of-type{border-bottom:0}
  /* in the open menu these are section headings, so they should not read
     lighter than the things underneath them */
  .navdrop>summary{
    display:flex;justify-content:space-between;width:100%;
    font-size:1rem;font-weight:600;color:var(--ink);padding:.8rem .8rem;
  }
  .nav-l{color:var(--ink);font-weight:600}
  .navpanel{
    position:static;min-width:0;border:0;box-shadow:none;background:transparent;
    padding:0 0 .5rem;
  }
  .navgrid a{padding:.55rem .8rem}
  .navpanel-f{padding:.6rem .8rem 0}
  .nav-l{padding:.7rem .8rem;font-size:1rem}
}

/* ==================================================================== footer
   Four columns, then the small print below a rule. Somebody who landed deep
   from a search result can see the shape of the whole site from the bottom of
   whatever page they landed on, which is what a footer is actually for. */
.fcols{
  display:grid;gap:2rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--line);
}
.fcol-t{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:0 0 .9rem;font-weight:600;
}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.fcol a{font-size:.9375rem;color:var(--ink-2)}
.fcol a:hover{color:var(--accent);text-decoration:underline}
.fsmall p{font-size:.875rem;color:var(--dim);line-height:1.6;max-width:78ch}
.fsmall p+p{margin-top:.9rem}
.fsmall b{color:var(--ink-2)}
@media (max-width:560px){
  .fcols{grid-template-columns:repeat(2,1fr);gap:1.75rem 1.25rem}
}
/* the guides panel carries sentences rather than figures, so it drops the
   monospace face the price column wants */
.navdrop[data-nav="guides"] .ng-v{font-family:var(--f-ui);font-size:.875rem}

/* Ten bills against four policy links leaves one very tall column and three
   short ones, so the bills run in two. */
@media (min-width:760px){
  .fcols{grid-template-columns:1.7fr 1.1fr 1fr 1fr}
  /* the list is a grid, and CSS columns do nothing to a grid container, so the
     split has to be the grid's own: fixed rows, flowing down then across */
  .fcol-wide ul{
    grid-template-columns:1fr 1fr;grid-auto-flow:column;
    grid-template-rows:repeat(var(--frows,6),auto);column-gap:1.5rem;
  }
}
/* used only in the data dictionary, where "never blank" is worth saying but
   not worth shouting */
.dim{color:var(--dim)}

/* =============================================================== help page
   Each scheme is one card that answers one question: can I claim this. So the
   eligibility checklist gets the weight, not the scheme's name, and the four
   nations are always visible because a scheme that does not exist where you
   live is worse than no scheme at all. */
.helpfilters{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:1.25rem 1.35rem;
}
.hf-row{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:baseline}
.hf-row+.hf-row{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line-2)}
.hf-l{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:600;flex:0 0 auto;min-width:8.5rem;
}
.hf-note{margin:.9rem 0 0;font-size:.875rem;color:var(--dim)}
.jump{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:1.5rem 0 0;
  font-size:.9375rem;
}
.jump a{color:var(--accent);font-weight:500}

.schs{display:grid;gap:1.25rem}
.sch{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:clamp(1.25rem,3vw,1.75rem);scroll-margin-top:80px;
}
.sch[hidden]{display:none}
.sch-head{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:flex-start}
.sch-n{font-family:var(--f-display);font-size:clamp(1.15rem,2.4vw,1.4rem);letter-spacing:-.02em;margin:0}
.sch-n a{color:var(--ink)}
.sch-n a:hover{color:var(--accent)}
.sch-who{margin:.3rem 0 0;font-size:.875rem;color:var(--dim)}
.sch-amt{text-align:right;max-width:20rem}
.sch-v{display:block;font-family:var(--f-display);font-size:clamp(1.25rem,3vw,1.6rem);
  font-weight:700;letter-spacing:-.03em;color:var(--accent)}
.sch-u{display:block;font-size:.8125rem;color:var(--dim);margin-top:.15rem}
.sch-status{margin:.9rem 0 0}
.sch-deadline{
  margin:.9rem 0 0;background:var(--amber-soft);border-radius:12px;padding:.85rem 1rem;
  font-size:.9375rem;color:var(--ink-2);line-height:1.55;
}
.sch-deadline b{color:var(--ink)}
.sch-body{display:grid;gap:1.25rem 2rem;margin-top:1.25rem}
@media (min-width:820px){.sch-body{grid-template-columns:1.35fr 1fr}}
.sch-body h4,.sch-h{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:0 0 .6rem;font-weight:600;
}
.sch-h{margin-top:1.35rem}
.sch-check ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.sch-check li{
  position:relative;padding-left:1.6rem;font-size:.9375rem;line-height:1.55;color:var(--ink-2);
}
.sch-check li::before{
  content:"";position:absolute;left:0;top:.42em;width:.7rem;height:.4rem;
  border-left:2px solid var(--calm);border-bottom:2px solid var(--calm);
  transform:rotate(-45deg);
}
.sch-how p{font-size:.9375rem;line-height:1.55;color:var(--ink-2);margin:0}
.sch-how p+p{margin-top:.6rem}
.gotchas{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.gotchas li{
  position:relative;padding-left:1.6rem;font-size:.9375rem;line-height:1.55;color:var(--ink-2);
}
.gotchas li::before{
  content:"";position:absolute;left:.15rem;top:.5em;width:.45rem;height:.45rem;
  border-radius:50%;background:var(--amber);
}
.sch-change,.sch-unver{
  margin:1.1rem 0 0;padding:.85rem 1rem;border-radius:12px;font-size:.875rem;
  line-height:1.55;color:var(--ink-2);
}
.sch-change{background:var(--elevated-bg)}
.sch-unver{background:var(--panel-2);border:1px solid var(--line-2)}
.sch-change b,.sch-unver b{color:var(--ink)}
.sch-nats{
  margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:.5rem .75rem;align-items:center;
}
.sch-natl{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:600;flex:0 0 auto;
}
.nat{
  display:inline-flex;flex-direction:column;gap:.1rem;padding:.4rem .7rem;border-radius:10px;
  font-size:.75rem;line-height:1.2;
}
.nat b{font-size:.8125rem;font-weight:600}
.nat-yes{background:var(--calm-bg);color:var(--calm)}
.nat-different{background:var(--elevated-bg);color:var(--elevated)}
.nat-no{background:var(--high-bg);color:var(--high)}
.nat-unknown{background:var(--panel-2);color:var(--dim)}
.sch-natn{flex:1 1 100%;margin:.5rem 0 0;font-size:.875rem;color:var(--dim);line-height:1.5}
.sch-src{margin:1rem 0 0;font-size:.8125rem;color:var(--dim);line-height:1.6}
.sch-src b{color:var(--ink-2)}
.sch-src a{color:var(--accent)}
/* stop the amount note leaving a one word last line hanging under the figure */
.sch-u{max-width:17rem;margin-left:auto;text-wrap:pretty}
/* A grid item defaults to min-width:auto, so one unshrinkable child inside a
   scheme card was widening the whole track and pushing the page sideways on a
   phone. Everything here is allowed to shrink; only the tables scroll. */
.schs{grid-template-columns:minmax(0,1fr)}
.sch,.sch-head,.sch-head>div,.sch-body,.sch-check,.sch-how{min-width:0}
.sch-amt{max-width:100%}
@media (max-width:560px){
  .sch-head{gap:.5rem}
  .sch-amt{text-align:left}
  .sch-u{margin-left:0;max-width:100%}
  .hf-l{min-width:0;flex:1 1 100%}
}
/* Chips elsewhere on the site are two or three words and nowrap is right for
   them. A scheme's status is a sentence, so this one wraps. */
.sch-status .chip{white-space:normal;align-items:flex-start;text-align:left;line-height:1.4}
.sch-status .chip i{margin-top:.4em}
/* A "read more" link elsewhere is three words and should not wrap. These are
   the official page names, which are long on purpose, so they wrap. */
.sch-how .more,.sch .more{white-space:normal}