/* ===========================================================================
   46 North Benefit Advisors — one stylesheet, no build step, no CDN.
   ---------------------------------------------------------------------------
   Typefaces are system stacks on purpose. A webfont from a third-party CDN
   would be a third-party request on a site whose footer promises there are
   none, and it would put a render-block in front of a county auditor on
   courthouse wifi.

   Palette is navy and gold on a cool near-white — the compass-north reading of
   the brand rather than the warm-paper one. Two navies do the work: --ink is the
   deep one for type and for the dark bands, --navy is a step up from it and is
   what every filled control wears, so a button never disappears into a band.

   Gold stays two-token for the same reason it always did. --gold is the
   text-safe one (5.2:1 on --paper, 4.8:1 on --cream, so the eyebrows and small
   caps clear AA as body-size text); --gold-b is the mark gold at 5.9:1 on --ink,
   for rules, fills, and type on dark. Neither substitutes for the other.

   The --dk-* / --on-dk-* pairs are the dark-band equivalents of --line/--ink.
   They exist because every one of them used to be a literal hex repeated down
   the file, which is how a palette change turns into a scavenger hunt.
   ========================================================================= */

:root{
  --ink:#12233a;
  --ink-2:#334966;
  --ink-3:#5a6a80;
  --navy:#1f3a60;
  --navy-d:#16294a;
  --gold:#8f6516;
  --gold-b:#c9952c;
  --gold-w:#f4e3bf;
  --cream:#f2f6fc;
  --paper:#ffffff;
  --line:#e1e7ef;
  --line-2:#c8d4e3;
  --dk-2:#1a3050;
  --dk-3:#24405f;
  --dk-4:#3a5a80;
  --on-dk-2:#c3d2e5;
  --on-dk-3:#93a6bf;
  --shadow:0 1px 2px rgba(18,35,58,.05), 0 8px 24px -12px rgba(18,35,58,.20);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font:400 17px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--line-2);text-underline-offset:3px}
a:hover{text-decoration-color:var(--gold)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0;letter-spacing:-.012em}
h1{font-size:clamp(2.15rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.6rem,2.9vw,2.3rem)}
h3{font-size:1.22rem;line-height:1.25}
h4{font-size:.82rem;font-family:var(--sans);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:650}
hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}
/* The ring is navy on light and mark-gold on the dark bands. One colour cannot
   do both: navy on a navy band is invisible, and the gold that shows up there is
   only 2.7:1 on white, which is under the 3:1 a focus indicator owes its
   background. So the indicator switches with the surface instead. */
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.sec--dark :focus-visible,.foot :focus-visible{outline-color:var(--gold-b)}

/* ------------------------------------------------------------------ header */
.site{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.site__in{display:flex;align-items:center;gap:26px;min-height:82px}
.brand{flex:0 0 auto;text-decoration:none;padding:14px 0}
.brand img{width:290px;height:auto}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:6px;width:44px;height:40px;cursor:pointer;position:relative}
.navtoggle__bars,.navtoggle__bars::before,.navtoggle__bars::after{position:absolute;left:11px;width:20px;height:2px;background:var(--ink);content:"";transition:transform .15s}
.navtoggle__bars{top:19px}
.navtoggle__bars::before{top:-6px;left:0}
.navtoggle__bars::after{top:6px;left:0}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.nav a{font-size:.955rem;text-decoration:none;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.nav a.on{color:var(--ink);border-bottom-color:var(--gold-b)}
.nav__cta{background:var(--navy);color:var(--paper)!important;border-radius:5px;padding:10px 16px!important;font-weight:600;border-bottom:0!important}
.nav__cta:hover{background:var(--navy-d);border-bottom:0!important}

/* ---------------------------------------------------------------- sections */
.sec{padding:76px 0;border-top:1px solid transparent}
.sec--paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec--dark{background:var(--ink);color:var(--cream)}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:var(--cream)}
.sec--dark a{color:var(--gold-w)}
.sec--rule{border-top:1px solid var(--line)}
.sec--tight{padding:52px 0}

.eyebrow{font:700 .74rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.sec--dark .eyebrow{color:var(--gold-b)}
.lede{font-size:1.16rem;line-height:1.62;color:var(--ink-2);max-width:44em}
.sec--dark .lede{color:var(--on-dk-2)}
.measure{max-width:38em}
.measure-wide{max-width:52em}

/* ------------------------------------------------------------------- hero */
.hero{background:var(--cream);padding:88px 0 74px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-140px;top:-90px;width:520px;height:520px;
  background:radial-gradient(circle at center,rgba(201,149,44,.15),rgba(201,149,44,0) 68%);pointer-events:none}
.hero__in{position:relative;z-index:1;max-width:38em}
.hero h1{margin-bottom:22px}
.hero .lede{font-size:1.24rem}
.hero__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__who{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.98rem;color:var(--ink-3);max-width:40em}

/* ----------------------------------------------------------------- buttons */
.btn{display:inline-block;background:var(--navy);color:var(--paper);text-decoration:none;
  font:600 1rem/1 var(--sans);padding:15px 24px;border-radius:5px;border:1px solid var(--navy);transition:background .14s}
.btn:hover{background:var(--navy-d);border-color:var(--navy-d)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--paper);border-color:var(--navy)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn--gold:hover{background:#7a5613;border-color:#7a5613}
/* The default button is navy on a cool near-white, which on a dark band is navy
   on navy — a call to action that renders as bold body text and gets read
   straight past. Every dark section that ever gains a primary CTA needs this,
   so it is fixed here once rather than by remembering to pass 'gold' at each
   call site. */
.sec--dark .btn{background:var(--gold-b);border-color:var(--gold-b);color:var(--ink)}
.sec--dark .btn:hover{background:#dda93c;border-color:#dda93c}
.sec--dark .btn--ghost{background:transparent;color:var(--cream);border-color:var(--dk-4)}
.sec--dark .btn--ghost:hover{background:var(--dk-2);border-color:var(--cream)}

/* ------------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);margin:34px 0 0}
.stat{background:var(--paper);padding:24px 22px 20px;display:flex;flex-direction:column;gap:7px}
.sec--dark .stats{background:var(--dk-3);border-color:var(--dk-3)}
.sec--dark .stat{background:var(--dk-2)}
.stat__v{font:600 2.1rem/1 var(--serif);color:var(--ink);letter-spacing:-.02em}
.sec--dark .stat__v{color:var(--gold-b)}
.stat__l{font-size:.95rem;line-height:1.4;color:var(--ink-2)}
.sec--dark .stat__l{color:var(--on-dk-2)}
.stat__s{font-size:.735rem;line-height:1.42;color:var(--ink-3);margin-top:auto;padding-top:9px;border-top:1px solid var(--line)}
.sec--dark .stat__s{color:var(--on-dk-3);border-top-color:var(--dk-3)}

/* ------------------------------------------------------------------- cards */
.grid{display:grid;gap:26px;margin-top:38px}
/* Exactly two, not auto-fit. auto-fit was quietly making three columns at the
   1140px wrap, which left the fourth card of a four-card set stranded alone on
   its own row with two card-widths of nothing beside it. */
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(286px,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:28px 26px;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.sec--dark .card{background:var(--dk-2);border-color:var(--dk-3);box-shadow:none}
.card__k{font:700 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 11px}
.card__h{margin:0 0 11px}
.card__b{color:var(--ink-2);font-size:.985rem}
.sec--dark .card__b{color:var(--on-dk-2)}
.card__b ul{margin:.6em 0 0;padding-left:1.15em}
.card__b li{margin-bottom:.42em}
.card__more{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.sec--dark .card__more{border-top-color:var(--dk-3)}
.card__more a{font-weight:600;font-size:.94rem;text-decoration:none;color:var(--gold)}
.card__more a:hover{text-decoration:underline}

/* --------------------------------------------------------------- numbered */
.steps{counter-reset:s;list-style:none;margin:34px 0 0;padding:0;display:grid;gap:2px;background:var(--line);border:1px solid var(--line)}
.steps li{counter-increment:s;background:var(--paper);padding:26px 26px 24px 78px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:26px;top:25px;
  font:600 1.15rem/1 var(--serif);color:var(--gold);border:1px solid var(--line-2);
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
.steps h3{margin-bottom:7px}
.steps p{color:var(--ink-2);font-size:.985rem}

/* ------------------------------------------------------------------ prose */
.prose{max-width:38em;font-size:1.055rem;line-height:1.72}
.prose h2{margin:2.3em 0 .62em;font-size:1.72rem}
.prose h3{margin:1.9em 0 .5em;font-size:1.22rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.05em}
.prose li{margin-bottom:.5em}
.prose blockquote{margin:1.7em 0;padding:2px 0 2px 22px;border-left:3px solid var(--gold-b);
  font-family:var(--serif);font-size:1.15rem;line-height:1.5;color:var(--ink)}
.prose .pull{font-family:var(--serif);font-size:1.34rem;line-height:1.42;color:var(--ink);
  margin:1.9em 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-b)}

.article-head{padding:64px 0 34px}
.article-head h1{max-width:19em;margin-bottom:20px}
.article-meta{font-size:.88rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.article-meta .dot{color:var(--line-2)}

/* ------------------------------------------------------------------ table */
.tbl-wrap{overflow-x:auto;margin:34px 0 0;border:1px solid var(--line);background:var(--paper)}
table.data{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
table.data th,table.data td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.data thead th{background:var(--cream);font:700 .72rem/1.3 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
table.data tbody tr:last-child td{border-bottom:0}
table.data td.n{font-family:var(--mono);font-size:.86rem;white-space:nowrap}
table.data td.src{color:var(--ink-3);font-size:.82rem}

/* ------------------------------------------------------------------- misc */
.note{font-size:.87rem;line-height:1.55;color:var(--ink-3);max-width:44em;margin:22px 0 0;
  padding-left:15px;border-left:2px solid var(--line-2)}
.sec--dark .note{color:var(--on-dk-3);border-left-color:var(--dk-4)}
.note a{color:inherit}

.callout{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold-b);
  border-radius:0 7px 7px 0;padding:26px 28px;margin:34px 0 0}
.callout h3{margin-bottom:9px}
.callout p{color:var(--ink-2);font-size:.99rem}

.duties{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.duties li{padding-left:32px;position:relative;color:var(--ink-2);font-size:1rem;line-height:1.55}
.duties li::before{content:"";position:absolute;left:0;top:.52em;width:14px;height:2px;background:var(--gold-b)}
.sec--dark .duties li{color:var(--on-dk-2)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.split--narrow{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}

.kv{margin:26px 0 0;border-top:1px solid var(--line)}
.kv__row{display:grid;grid-template-columns:minmax(160px,26%) 1fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
.kv__k{font:700 .78rem/1.5 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.kv__v{color:var(--ink-2);font-size:.99rem}

.postlist{list-style:none;margin:38px 0 0;padding:0;border-top:1px solid var(--line)}
.postlist li{border-bottom:1px solid var(--line);padding:28px 0}
.postlist h3{font-size:1.42rem;margin-bottom:9px}
.postlist h3 a{text-decoration:none}
.postlist h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold-b)}
.postlist p{color:var(--ink-2);font-size:1rem;max-width:44em}
.postlist .article-meta{margin-bottom:11px}

.srclist{list-style:none;margin:24px 0 0;padding:0;font-size:.92rem}
.srclist li{padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink-3);line-height:1.5}
.srclist li:last-child{border-bottom:0}
.srclist a{color:var(--ink-2)}

.bignum{font:600 clamp(2.6rem,7vw,4.6rem)/1 var(--serif);color:var(--gold-b);letter-spacing:-.025em;display:block}

/* ------------------------------------------------------------------ footer */
.foot{background:var(--ink);color:var(--on-dk-2);padding:64px 0 0;margin-top:0}
.foot__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.85fr);gap:56px;padding-bottom:48px}
.foot__brand img{width:250px}
.foot__tag{font-family:var(--serif);font-size:1.1rem;color:var(--cream);margin:18px 0 14px;line-height:1.35}
.foot__addr{font-size:.9rem;line-height:1.6;margin:0}
.foot__addr a{color:var(--gold-w)}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:32px}
.foot__cols h4{color:var(--cream);margin:0 0 15px}
.foot__cols a{display:block;color:var(--on-dk-2);text-decoration:none;font-size:.93rem;padding:5px 0;line-height:1.4}
.foot__cols a:hover{color:var(--cream);text-decoration:underline;text-decoration-color:var(--gold-b)}
.foot__legal{border-top:1px solid var(--dk-3);padding-top:24px;padding-bottom:34px}
.foot__legal p{font-size:.8rem;line-height:1.62;color:var(--on-dk-3);max-width:70em;margin:0 0 10px}
.foot__legal a{color:var(--on-dk-2)}
.foot__priv{color:#7e91ab!important}

/* --------------------------------------------------------------------- form
   One form on the site. It posts form-encoded and redirects, so there is no
   client-side validation to style and no error state to render — the browser's
   own :invalid handling and a server-side re-render do the whole job.        */
.form{margin-top:26px}
.fldgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.fld--wide{grid-column:1/-1}
.fld label{display:block;font-family:var(--sans);font-size:.78rem;font-weight:650;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.fld__opt{font-weight:400;letter-spacing:.03em;text-transform:none;color:var(--ink-3)}
.fld input,.fld select,.fld textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:6px;
  padding:12px 13px;transition:border-color .14s,box-shadow .14s}
.fld textarea{resize:vertical;min-height:118px;line-height:1.55}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.fld input::placeholder,.fld textarea::placeholder{color:#7d8ea6}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,58,96,.15)}
.fld__help{font-size:.84rem;line-height:1.5;color:var(--ink-3);margin:7px 0 0}
.form .btn{margin-top:24px}
.form__fine{font-size:.84rem;line-height:1.6;color:var(--ink-3);margin:16px 0 0;max-width:44em}
/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields they can tell are hidden. aria-hidden and tabindex keep it away from
   anybody using the page for real. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the subscribe box — one field and a button, on a row where there is room for
   one and stacked where there is not */
.subf{margin-top:22px}
.subf__row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.subf__f{min-width:0}
.subf__f label{display:block;font:650 .78rem/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.subf__f input{width:100%;font:400 1rem/1.5 var(--sans);color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);border-radius:5px;padding:12px 14px}
.subf__f input::placeholder{color:#7d8ea6}
.subf__f input:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(31,58,96,.15)}
.subf .btn{margin:0;white-space:nowrap}
.subf__fine{font-size:.82rem;line-height:1.6;color:var(--ink-3);margin:14px 0 0;max-width:44em}
/* Inside a dark section the label and fine print have to come off the dark
   surface, not the cream one. */
.sec--dark .subf__f label,.sec--dark .subf__fine{color:var(--on-dk-2)}
@media (max-width:560px){
  .subf__row{grid-template-columns:1fr}
  .subf .btn{width:100%;text-align:center}
}

/* -------------------------------------------------------------- responsive */
@media (max-width:900px){
  .split,.split--narrow{grid-template-columns:1fr;gap:34px}
  .foot__in{grid-template-columns:1fr;gap:40px}
}
@media (max-width:760px){
  .grid--2{grid-template-columns:1fr}
}
@media (max-width:820px){
  .navtoggle{display:block}
  .nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line);padding:10px 0 18px;margin-left:0}
  .navopen .nav{display:flex}
  .nav a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:1.02rem}
  .nav a.on{border-bottom-color:var(--line);color:var(--navy)}
  .nav__cta{text-align:center;margin-top:14px;padding:14px 16px!important;border-bottom:0!important}
  .site__in{flex-wrap:wrap;min-height:70px}
  .brand img{width:228px}
}
@media (max-width:640px){
  body{font-size:16px}
  .sec{padding:52px 0}
  .hero{padding:56px 0 48px}
  .wrap{padding:0 20px}
  .steps li{padding:22px 22px 20px 22px}
  .steps li::before{position:static;margin-bottom:12px}
  .kv__row{grid-template-columns:1fr;gap:5px}
  .article-head{padding:44px 0 26px}
  /* One column on a phone. Two 150px-wide inputs side by side clip their own
     placeholder text, and a form somebody fills in on a courthouse parking lot
     should not make them guess what a field wanted. */
  .fldgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  .site,.foot__cols,.nav,.navtoggle,.hero::after{display:none}
  body{background:#fff;font-size:11pt}
  .sec{padding:18px 0}
  .card,.stat{box-shadow:none;break-inside:avoid}
  a{text-decoration:none}
}

/* ------------------------------------------------- the Scorecard and the tools
   Everything below belongs to the three interactive pages — the Benefits
   Scorecard, the township merger self-check, and the studio's registration
   panels. It is kept here rather than inlined per page so that one palette
   change reaches all of them, and so that the pages themselves stay markup. */

.finder{max-width:41em;margin-top:30px}
.finder__box{position:relative}
.finder input[type=search]{width:100%;box-sizing:border-box;font:inherit;font-size:1.06rem;
  color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:7px;
  padding:15px 16px;transition:border-color .14s,box-shadow .14s}
.finder input[type=search]:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,58,96,.15)}
.finder__help{font-size:.86rem;line-height:1.55;color:var(--ink-3);margin:9px 0 0}
.finder__list{list-style:none;margin:10px 0 0;padding:0;border:1px solid var(--line);
  border-radius:7px;background:var(--paper);overflow:hidden;max-height:23em;overflow-y:auto}
.finder__list:empty{display:none;border:0}
.finder__list li{border-bottom:1px solid var(--line)}
.finder__list li:last-child{border-bottom:0}
.finder__list button{display:block;width:100%;text-align:left;background:none;border:0;
  font:inherit;cursor:pointer;padding:13px 16px;color:var(--ink);line-height:1.4}
.finder__list button:hover,.finder__list button:focus{background:var(--cream);outline:none}
.finder__list button:focus{box-shadow:inset 3px 0 0 var(--gold)}
.finder__nm{font-weight:600}
.finder__mt{display:block;font-size:.84rem;color:var(--ink-3);margin-top:3px}
.finder__none{padding:14px 16px;font-size:.93rem;color:var(--ink-3)}

/* the result panel */
.uout{margin-top:44px}
.uout[hidden]{display:none}
.uhead{border-top:3px solid var(--ink);padding-top:22px}
.uhead h2{margin:0 0 6px;font-size:2rem}
.uhead__mt{font-size:.93rem;color:var(--ink-3);margin:0}
.uhead__filed{font-family:var(--mono);font-size:.8rem;color:var(--ink-3);margin:8px 0 0}

/* Six figures. auto-fit puts five on a wide screen and strands the sixth in a
   row of its own, so the count is fixed: three across, two rows, always even. */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:26px}
@media (max-width:820px){.figs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.figs{grid-template-columns:1fr}}
.fig{background:var(--paper);padding:20px 20px 17px}
.fig__v{display:block;font:600 1.62rem/1.1 var(--serif);color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.fig__v--mut{color:var(--ink-3);font-size:1.16rem}
.fig__l{display:block;font-size:.9rem;color:var(--ink-2);margin-top:7px;line-height:1.4}
.fig__s{display:block;font-size:.735rem;color:var(--ink-3);margin-top:10px;padding-top:8px;
  border-top:1px solid var(--line);line-height:1.45}

.plot{margin-top:34px;background:var(--paper);border:1px solid var(--line);padding:26px 24px 20px}
.plot h3{margin:0 0 4px;font-size:1.16rem}
.plot__sub{font-size:.9rem;color:var(--ink-3);margin:0 0 18px;line-height:1.5}
.plot svg{width:100%;height:auto;display:block}
.plot__cap{font-size:.8rem;color:var(--ink-3);line-height:1.5;margin:14px 0 0}

.flagbox{border:1px solid var(--line);border-left:3px solid var(--ink-3);background:var(--paper);
  padding:20px 22px;margin-top:16px;border-radius:0 6px 6px 0}
.flagbox--warn{border-left-color:var(--gold-b)}
.flagbox--stop{border-left-color:#a33326}
.flagbox--ok{border-left-color:#2f7052}
.flagbox h4{margin:0 0 7px;font-size:1.02rem}
.flagbox p{margin:0;color:var(--ink-2);font-size:.96rem;line-height:1.6}
.flagbox p+p{margin-top:9px}

.withheld{background:var(--cream);border:1px dashed var(--line-2);padding:22px 24px;margin-top:16px}
.withheld h4{margin:0 0 8px;font-size:1.02rem}
.withheld p{margin:0;color:var(--ink-2);font-size:.96rem;line-height:1.62}

.srcbox{margin-top:34px;border-top:1px solid var(--line);padding-top:20px}
.srcbox h4{font:700 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px}
.srcbox dl{margin:0;font-size:.86rem;line-height:1.6;color:var(--ink-3)}
.srcbox dt{font-weight:650;color:var(--ink-2);margin-top:10px}
.srcbox dt:first-child{margin-top:0}
.srcbox dd{margin:2px 0 0}

/* the merger self-check */
.crit{list-style:none;margin:30px 0 0;padding:0;border:1px solid var(--line);background:var(--paper)}
.crit li{border-bottom:1px solid var(--line);padding:0}
.crit li:last-child{border-bottom:0}
.crit label{display:grid;grid-template-columns:26px 1fr 46px;gap:16px;align-items:start;
  padding:17px 20px;cursor:pointer}
.crit label:hover{background:var(--cream)}
.crit input{margin:3px 0 0;width:17px;height:17px;accent-color:var(--gold)}
.crit__t{font-size:.99rem;line-height:1.5;color:var(--ink)}
.crit__c{display:block;font-size:.82rem;color:var(--ink-3);margin-top:4px;line-height:1.5}
.crit__p{font:600 .84rem/1.5 var(--sans);color:var(--ink-3);text-align:right;white-space:nowrap}
.tally{margin-top:26px;background:var(--ink);color:var(--cream);padding:26px 26px 24px;border-radius:7px}
/* The three children are spans, so they need display:block or their margins
   collapse to nothing and the number lands on top of the label. */
.tally__n{font:600 3.1rem/1 var(--serif);color:var(--gold-b);letter-spacing:-.03em;display:block}
.tally__l{display:block;font-size:.95rem;color:var(--on-dk-2);margin:8px 0 0;line-height:1.55}
.tally__v{display:block;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--dk-3);
  font-size:1rem;line-height:1.62;color:var(--cream)}
/* The footer line under the band copy: the arithmetic restated, and the
   reminder that it did not leave the page. */
.crit__f{margin-top:12px !important;padding-top:11px;border-top:1px solid var(--line);
  font-size:.82rem !important;color:var(--ink-3) !important;line-height:1.55 !important}

/* studio */
.eplist{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--line)}
.eplist li{border-bottom:1px solid var(--line);padding:26px 0;display:grid;
  grid-template-columns:76px 1fr;gap:24px;align-items:start}
.ep__n{font:600 1.5rem/1 var(--serif);color:var(--gold);letter-spacing:-.02em}
.ep__h{margin:0 0 8px;font-size:1.3rem}
.ep__m{font-size:.84rem;color:var(--ink-3);margin:0 0 10px}
.ep__b{color:var(--ink-2);font-size:.99rem;max-width:44em;margin:0}
.ep__st{display:inline-block;font:700 .68rem/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;padding:5px 8px;border-radius:4px;background:var(--cream);
  border:1px solid var(--line-2);color:var(--ink-3);margin-left:10px;vertical-align:2px}
.ep__st--live{background:var(--navy);border-color:var(--navy);color:var(--gold-b)}

@media (max-width:640px){
  .uhead h2{font-size:1.55rem}
  .crit label{grid-template-columns:24px 1fr;gap:12px}
  .crit__p{grid-column:2;text-align:left;margin-top:6px}
  .eplist li{grid-template-columns:1fr;gap:8px}
}
@media print{
  .finder,.uout .btn,.plot__cap{break-inside:avoid}
  .finder__list,.hero__acts{display:none}
}