: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}
/* step heads: the legend becomes a band INSIDE the fieldset — floated
   to full width so it sits below the separator line instead of riding
   on it: navy number disc + bold title + one plain line saying what
   this step asks for. No orange here — orange stays on submit buttons. */
.calcform legend.stephead{float:left;width:100%;display:flex;align-items:center;gap:12px;background:#eaf1f8;border-radius:10px;padding:12px 16px;margin:0 0 6px}
.calcform fieldset>*:not(legend){clear:both}
.stepnum{flex:none;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:center}
.stepmain{display:block;min-width:0}
.steptitle{display:block;font-size:1.25rem;font-weight:700;line-height:1.25;color:var(--ink)}
.stepdesc{display:block;font-size:.92rem;font-weight:400;line-height:1.45;color:#5f7082;margin-top:2px}
.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}
/* result hero: the calculator's headline answer — the total duty in
   dollars first (big, alert red, same KPI treatment as code pages),
   then the rate, then one plain line stating the basis. Dollars lead
   because that is the number a buyer actually budgets. */
.resulthero{background:#fdf3e7;border:1.5px solid #f0d9bd;border-radius:12px;padding:16px 20px;margin:14px 0}
.resulthero-line{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0}
.resulthero-amount{font-size:2.5rem;font-weight:800;color:var(--red);line-height:1.05}
.resulthero-rate{font-size:1.35rem;font-weight:700;color:var(--ink)}
.resulthero-duty{font-size:1.35rem;font-weight:700;color:var(--ink);margin:.35em 0 0}
.resulthero-cap{color:var(--muted);margin:.4em 0 0}
/* 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}
  .calcform legend.stephead{padding:10px 12px;gap:10px}
  .stepnum{width:32px;height:32px}
  .steptitle{font-size:1.1rem}
  .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}
  .resulthero{padding:14px 16px}
  .resulthero-line{flex-direction:column;gap:2px}
  .resulthero-amount{font-size:2.1rem}
  .resulthero-rate,.resulthero-duty{font-size:1.2rem}
  .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)}
/* the three alert triggers as their own list — same four elements as
   the code-page trigger line, but no longer buried in one long
   sentence. Row on desktop, stacked on mobile. */
.watchband .watchtrig{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.watchband .watchtrig li{display:flex;align-items:baseline;gap:9px;font-size:18px;line-height:1.5;color:#fff}
.watchtick{flex:none;color:#ffb03a;font-weight:700}
@media (max-width:760px){
  .watchband{padding:22px 18px}
  .watchband h2{font-size:22px}
  .watchband p{font-size:17px}
  .watchband .watchtrig{flex-direction:column;gap:8px}
  .watchband .watchtrig li{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}