:root{
  --ink:#1c2733; --muted:#5d6b7a; --navy:#10243e; --red:#d92b1f;
  --amber:#b97a0f; --green:#1e7d46; --line:#d8dee6; --bg:#f6f8fa;
  --card:#fff; --orange:#e07b24; --orange-d:#c9661a; --purple:#6d4fa1; --slate:#5b7a99;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px}
main{max-width:1060px;margin:0 auto;padding:20px 18px 48px}
a{color:#14508f}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1{font-size:2.2rem;line-height:1.2;margin:.3em 0 .4em}
h2{font-size:1.7rem;margin:1.4em 0 .5em}
.codepage h1{font-size:1.9rem}
.prose{max-width:74ch}
.lede{font-size:1.13rem;color:#33424f}
section{background:transparent}
/* brand bar: sticky site-wide; roomy at the top of the page (~76px),
   compacts to ~60px with a light shadow once scrolled (the inline
   header script toggles .is-compact past ~24px of scroll). */
.brandbar{background:var(--navy);color:#fff;display:flex;align-items:center;gap:18px;padding:19px 18px;flex-wrap:wrap;position:sticky;top:0;z-index:50;transition:padding .18s ease,box-shadow .18s ease}
.brandbar.is-compact{padding:11px 18px;box-shadow:0 2px 10px rgba(10,20,35,.28)}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.25rem;display:flex;align-items:center;gap:9px}
.brandmark{width:26px;height:26px;flex:none;transition:width .18s ease,height .18s ease}
.brandbar.is-compact .brandmark{width:24px;height:24px}
.navtoggle{display:none}
[id]{scroll-margin-top:72px}
@media (prefers-reduced-motion:reduce){.brandbar,.brandmark{transition:none}}
.topnav{display:flex;gap:4px;flex-wrap:wrap}
.topnav a{color:#dbe6f2;text-decoration:none;padding:7px 10px;border-radius:6px;font-size:.98rem}
.topnav a:hover,.topnav a[aria-current]{background:#1d3a5f;color:#fff}
/* breadcrumbs */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:4px 0 10px;font-size:.95rem;color:var(--muted)}
.crumbs li+li:before{content:"›";margin-right:6px;color:var(--muted)}
/* hero & search */
.hero{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px 24px;margin-top:8px}
.hero h1{margin-top:0}
.bigsearch label{font-weight:600;display:block;margin-bottom:8px}
.searchrow{display:flex;gap:10px;flex-wrap:wrap}
/* unified search component (homepage hero + lookup page): one box,
   one height, one focus ring, orange submit everywhere */
.searchbox input[type=search],.searchbox input[type=text]{flex:1 1 320px;height:58px;font-size:16px;padding:0 16px;border:1.5px solid #b7c7da;border-radius:10px;background:#fff;color:var(--ink)}
.searchbox input::placeholder{color:#5f7082}
.searchbox input:focus{border-color:#14508f;box-shadow:0 0 0 3px rgba(20,80,143,.3);outline:none}
.searchbox .btn-primary{min-height:58px}
button{background:var(--navy);color:#fff;border:0;border-radius:8px;padding:13px 20px;font-size:1rem;cursor:pointer;min-height:44px;transition:background-color .18s ease}
button:hover{background:#0a1a2e}
button:disabled{background:#93a5bb;cursor:not-allowed}
/* button tiers (site-wide tokens): .btn = navy secondary for tool
   actions, .btn-primary = orange for conversions and search submit.
   A plain <button> already wears the navy tier; the classes carry
   the tiers to named buttons and button-styled links. No component
   invents its own button colors any more. */
.btn,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:8px;padding:13px 22px;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;min-height:44px;text-decoration:none;transition:background-color .18s ease}
.btn{background:var(--navy);color:#fff}
.btn:hover{background:#0a1a2e;color:#fff}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-d);color:#fff}
.btn:disabled,.btn-primary:disabled{background:#93a5bb;cursor:not-allowed}
.btn-block{width:100%}
.searchhint{color:var(--muted);font-size:.95rem}
.recentbox{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.recentbox ul{margin:6px 0;padding-left:18px}
/* change strip */
.changesstrip,.entrycards,section.plain{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-top:16px}
.changesstrip{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-top:16px}
.entrycards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;background:none;border:0;padding:0}
.entrycard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;text-decoration:none;color:var(--ink);display:block}
.entrynote{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 20px;margin-top:14px}
.entrycard strong{display:block;font-size:1.1rem;color:#14508f;margin-bottom:4px}
.eventlist{list-style:none;padding:0;margin:10px 0}
.eventlist li{padding:8px 0;border-bottom:1px solid #edf1f5}
.eventlist li:last-child{border-bottom:0}
.chip{display:inline-block;font-size:.8rem;font-weight:700;padding:2px 8px;border-radius:20px;color:#fff;vertical-align:middle}
.chip-a{background:var(--red)} .chip-b{background:var(--orange)} .chip-c{background:#7a8794} .chip-d{background:#77879a}
.popchips{display:flex;flex-wrap:wrap;gap:8px}
.popchip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 13px;text-decoration:none}
/* code page */
.bignum{font-size:3rem;font-weight:800;color:var(--red);margin:.15em 0 0;line-height:1}
.bignum-sub{color:var(--muted);margin:.3em 0 1em;font-size:1.02rem}
.conclusion{font-size:1.1rem;background:#fff;border-left:4px solid var(--red);padding:12px 16px;border-radius:0 8px 8px 0}
.codename-sub{color:var(--muted);margin-top:-6px}
.copybtn{padding:6px 12px;font-size:.9rem;min-height:36px;vertical-align:middle}
.stackwrap{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:16px 0}
.stackbar{position:relative;height:30px;background:#e8edf2;border-radius:6px;overflow:hidden}
.stackbar .seg{position:absolute;top:0;height:100%}
.stacklegend{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px}
.dot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.stacktable{border-collapse:collapse;margin-top:8px}
.stacktable td{padding:3px 14px 3px 0;overflow-wrap:anywhere}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.badge{border-radius:8px;padding:9px 12px;font-weight:600;font-size:.97rem}
.badge-red{background:#fdeceb;color:#8f1d15;border:1px solid #f3c4c0}
.badge-amber{background:#fdf4e0;color:#77530a;border:1px solid #ecd9a8}
.badge-green{background:#e9f6ee;color:#14532d;border:1px solid #bfe3cd}
.badgelegend{color:var(--muted);font-size:.92rem;margin:2px 0 8px}
.watchbar{background:#10243e;color:#fff;border-radius:12px;padding:18px 20px;display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:center;margin:18px 0}
.watchbar p{margin:.3em 0;color:#cfdce9}
.watchform{display:flex;gap:10px;flex-wrap:wrap}
.watchform input[type=email],.watchform input[type=text]{flex:1 1 200px;font-size:16px;padding:12px;border-radius:8px;border:1.5px solid #9fb2c8;min-height:44px}
.watchform.stack{flex-direction:column;align-items:stretch}
.watchform .formmsg{flex-basis:100%;margin:0;font-size:.95rem}
.watchbar .formmsg{color:#ffd9d4}
.datatable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:10px 0 18px}
.datatable th,.datatable td{padding:9px 12px;border-bottom:1px solid #edf1f5;text-align:left;vertical-align:top}
.datatable td{overflow-wrap:anywhere}
.datatable th{overflow-wrap:break-word}
.datatable td.brk{overflow-wrap:anywhere}
.datatable thead th{background:#eef3f8;font-size:.95rem}
.datatable tr.muted{color:var(--muted)}
.riskblock{background:#fff7ed;border:1.5px solid #e8a34c;border-radius:12px;padding:16px 20px;margin:18px 0}
.verifybox{background:#eef3f8;border-radius:12px;padding:14px 20px;margin:18px 0}
.warnbox{background:#fdf4e0;border:1px solid #ecd9a8;border-radius:10px;padding:12px 16px}
.timeline{list-style:none;padding:0}
.timeline li{padding:6px 0;border-bottom:1px solid #edf1f5}
.footnotes{color:var(--muted)}
.provenance{color:var(--muted);font-size:.95rem;border-top:1px solid var(--line);padding-top:12px;margin-top:26px}
.btnlink{display:inline-block;background:#eef3f8;border-radius:8px;padding:10px 14px;text-decoration:none;font-weight:600;margin:4px 6px 4px 0}
.codelist{list-style:none;padding:0}
.codelist li{padding:7px 0;border-bottom:1px solid #edf1f5}
/* chapter distribution */
.distrow{display:grid;grid-template-columns:170px 1fr 70px;gap:10px;align-items:center;margin:6px 0}
.distbar{background:#e8edf2;height:18px;border-radius:4px;overflow:hidden;display:block}
.distbar span{display:block;height:100%;background:var(--slate)}
/* changelog */
.typegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.typecard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.typenum{font-size:2rem;font-weight:800;margin:.1em 0}
.filterrow{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.filterrow button{background:#eef3f8;color:#14508f}
.filterrow button.on{background:var(--navy);color:#fff}
.fulllist .eventitem{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:10px;border-bottom:1px solid var(--line)}
/* monitor */
.monitorgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.monitorcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.monitorcard.highlight{border:2px solid var(--navy)}
.monitorcard label{display:block;margin:10px 0;font-weight:600}
.monitorcard input{width:100%;margin-top:5px}
/* calculator */
.steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0}
.steps li{background:#eef3f8;border-radius:20px;padding:7px 14px;font-weight:600}
.steps li.on{background:var(--navy);color:#fff}
.calcform{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px}
.calcform fieldset{border:0;border-top:1px solid var(--line);padding:14px 0;margin:0}
.calcform fieldset:first-of-type{border-top:0}
.calcform legend{font-weight:700;padding:2px 8px;background:#fff;margin-left:8px}
.calcform label{display:block;margin:10px 0;font-weight:600}
.calcform input,.calcform select{display:block;width:100%;max-width:460px;font-size:16px;padding:11px;border:1.5px solid #9fb2c8;border-radius:8px;margin-top:5px;min-height:44px}
.amtwrap{margin:14px 0}
.amtbar{display:grid;grid-template-columns:220px 1fr 110px;gap:10px;align-items:center;margin:6px 0}
.amtrack{background:#e8edf2;height:16px;border-radius:4px;overflow:hidden;display:block}
.amtrack span{display:block;height:100%;background:var(--orange)}
.totalcost{font-size:1.15rem}
/* 301 groups */
.listgroup{margin:22px 0}
.listgroup.suspended h2{color:var(--amber)}
.groupnote{color:var(--muted)}
/* homepage upgrade: hero grid, example card, stat blocks, SVG chart,
   product cards, trust band (all additive — other pages unaffected) */
.herogrid{display:grid;grid-template-columns:1.12fr .88fr;gap:24px;align-items:start}
.freshness{color:var(--muted);font-size:.93rem;margin:12px 0 0}
.quickwords{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.examplecard{border:1.5px solid var(--line);border-radius:12px;padding:18px 20px;background:#f2f6fb}
.extag{display:inline-block;background:var(--navy);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin:0}
.exname{font-size:1.08rem;font-weight:700;margin:.55em 0 0}
.exname .muted{font-weight:400;font-size:.95rem}
.examplecard .bignum{font-size:2.5rem}
.examplecard .stackwrap{margin:12px 0}
.exlinks{margin:8px 0 2px}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0}
.statblock{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:#fbfcfe}
.statnum{font-size:2.3rem;font-weight:800;line-height:1;margin:0}
.stat-a{color:var(--red)} .stat-b{color:var(--orange)} .stat-c{color:#7a8794} .stat-d{color:#5f7186}
.stackbasis{list-style:none;padding:0;margin:10px 0 0}
.stackbasis li{display:flex;gap:8px;align-items:flex-start;padding:3px 0;font-size:.92rem}
.stackbasis .dot{flex:none;margin-top:6px}
.statlabel{font-weight:600;margin:.4em 0 .2em}
.statblock p{margin:.2em 0}
.chartwrap{margin:12px 0 4px}
.monthchart{width:100%;height:auto;display:block}
.chartlegend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;margin:8px 0 0}
.latesthead{margin:18px 0 2px;font-size:1.05rem}
.band{background:#e9eff5;border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-top:16px}
.band h2{margin-top:0}
.popgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.popcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--ink);display:block}
.popname{display:block;font-weight:700;font-size:1.05rem;color:#14508f}
.popcode{display:block;color:var(--muted);margin:2px 0 8px}
.poptotal{display:block;font-size:1.55rem;font-weight:800;color:var(--red);line-height:1.15}
.poptotal small{font-size:.85rem;color:var(--muted);font-weight:600;margin-left:4px}
.popduty{display:block;font-weight:600;margin-top:3px}
.ministack{position:relative;height:14px;background:#e8edf2;border-radius:4px;overflow:hidden;margin-top:10px}
.ministack .seg{position:absolute;top:0;height:100%}
.minilayers{font-size:.88rem;color:var(--muted);margin:8px 0 0}
/* one hover for every card component: 2px lift + border shift on a
   150–200ms ease, at most one whisper of shadow */
.entrycard,.popcard,.typecard,.statblock,.monitorcard{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.entrycard:hover,.popcard:hover,.typecard:hover,.statblock:hover,.monitorcard:hover{transform:translateY(-2px);border-color:#9fb2c8;box-shadow:0 3px 10px rgba(16,36,62,.08)}
.monitorcard.highlight:hover{border-color:var(--navy)}
.trustband{background:var(--navy);color:#dbe6f2;border-radius:12px;padding:20px 24px;margin-top:16px}
.trustgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.trustgrid p{margin:.25em 0}
.trustnum{font-size:1.7rem;font-weight:800;color:#fff;line-height:1.1;margin:0}
.trustmeta{margin:14px 0 0;color:#9fc2e8;font-size:.95rem}
/* footer */
.sitefoot{background:var(--navy);color:#cfdce9;margin-top:30px}
.footgrid{max-width:1060px;margin:0 auto;padding:24px 18px;display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:20px;font-size:.95rem}
.sitefoot a{color:#9fc2e8}
.notfound{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.listtools{display:flex;gap:14px;flex-wrap:wrap;align-items:end;margin:14px 0}
.listtools input{font-size:16px;padding:11px;border:1.5px solid #9fb2c8;border-radius:8px;min-width:280px;display:block;margin-top:5px}
@media (max-width:760px){
  body{font-size:16px}
  h1{font-size:1.5rem}
  h2{font-size:1.35rem}
  .codepage h1{font-size:1.5rem}
  .calcform input,.calcform select,.watchform input,.listtools input{min-height:48px}
  .bignum{font-size:2.3rem}
  .entrycards,.monitorgrid,.watchbar,.footgrid,.herogrid,.popgrid{grid-template-columns:1fr}
  .typegrid{grid-template-columns:repeat(2,1fr)}
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .trustgrid{grid-template-columns:repeat(2,1fr)}
  /* mobile header: single brand row (58px) + hamburger; the nav drops
     into an in-header panel under the brand row when .nav-open is set */
  .brandbar{gap:8px;padding:7px 12px}
  .brandbar.is-compact{padding:7px 12px}
  .brand{font-size:1.06rem;gap:7px}
  .brandmark,.brandbar.is-compact .brandmark{width:22px;height:22px}
  .navtoggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-left:auto;background:transparent;padding:10px;min-width:44px;min-height:44px;cursor:pointer}
  .navtoggle:hover{background:#1d3a5f}
  .ntbar{display:block;width:22px;height:2px;background:#fff;border-radius:2px}
  .topnav{display:none;flex-basis:100%;flex-direction:column;flex-wrap:nowrap;padding:6px 0 2px}
  .brandbar.nav-open .topnav{display:flex}
  .topnav a{display:block;padding:12px 10px;font-size:1rem;min-height:44px}
  .amtbar{grid-template-columns:130px 1fr 90px}
  .distrow{grid-template-columns:120px 1fr 56px}
  .datatable th,.datatable td{padding:7px 8px}
  main{padding:14px 12px 40px}
}

/* prelaunch additions: watch trigger line + calculator scope note */
.watchbar .watchtrigger{font-size:.95rem;color:#ffd9a8;border-top:1px solid #2c4a6b;padding-top:8px}
.scopenote{background:#eef3f8;border:1px solid #cfdce9;border-radius:10px;padding:12px 16px}
/* lookup-page watch band: dark navy callout in the same language as the
   code-page watchbar. Scoped to .watchband only — the light .band used
   on the homepage is untouched. */
.watchband{background:var(--navy);color:#fff;border-radius:12px;padding:26px 28px;margin-top:20px}
.watchband-head{display:flex;align-items:center;gap:14px}
.watchband-icon{width:36px;height:36px;flex:none}
.watchband h2{font-size:24px;line-height:1.25;margin:0;color:#fff}
.watchband p{font-size:18px;line-height:1.65;color:#cfdce9;margin:14px 0 0;max-width:80ch}
.watchband p strong{color:#fff}
.watchband .watchband-cta{margin-top:20px;max-width:none}
.watchband-btn{display:inline-flex;align-items:center;min-height:48px;background:#fff;color:var(--navy);font-weight:700;font-size:1.06rem;line-height:1.3;text-decoration:none;padding:12px 24px;border-radius:8px}
.watchband-btn:hover{background:#dbe6f2;color:var(--navy)}
@media (max-width:760px){
  .watchband{padding:22px 18px}
  .watchband h2{font-size:22px}
  .watchband p{font-size:17px}
  .watchband-icon{width:30px;height:30px}
}

/* signup band (homepage weekly digest + UFLPA list alerts): navy band,
   big white title, form on a white card, orange button. Scoped to
   .signupband/.signupform only — the code-page .watchbar and every
   other form on the site are untouched. Desktop: input and button on
   one row; mobile (<=760px): stacked, each full width. */
.signupband{background:var(--navy);color:#fff;border-radius:12px;padding:30px 32px;margin:18px 0}
.signupband-title{margin:0 0 10px;font-size:1.7rem;line-height:1.25;color:#fff}
.signupband-body{margin:0 0 20px;font-size:1.06rem;line-height:1.6;color:#cfdce9}
.signupform{background:#fff;border-radius:14px;padding:14px;display:flex;gap:12px;flex-wrap:wrap}
.signupform input[type=email]{flex:1 1 260px;background:#f2f5f8;border:0;border-radius:10px;padding:14px 16px;font-size:16px;min-height:52px;color:var(--ink)}
.signupform input[type=email]::placeholder{color:#71808f}
.signupform button{flex:0 0 auto;font-weight:700;font-size:1.06rem;line-height:1.3;border-radius:10px;padding:14px 26px;min-height:52px}
.signupform .formmsg{flex:1 1 100%;margin:0;font-size:.95rem;color:#a02c1d}
.signupform .formmsg:empty{display:none}
@media (max-width:760px){
  .signupband{padding:24px 18px}
  .signupband-title{font-size:1.6rem}
  .signupform{flex-direction:column}
  .signupform input[type=email]{flex:0 0 auto}
  .signupform button{width:100%}
}

/* form feedback: one blue focus ring for every field, and form
   messages colored by state (app.js sets .ok / .err on .formmsg;
   on the dark watch bar the same states use light tints) */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(20,80,143,.55);outline-offset:1px}
.formmsg.ok{color:var(--green)}
.formmsg.err{color:#a02c1d}
.watchbar .formmsg.ok{color:#8fe3ae}
.watchbar .formmsg.err{color:#ffb3ab}