/* BUILT 2026-09-12 · warrantwire wire.css 2a · WHITE. His call, 12 Sep: "white is so much more trustworthy." Every page at once, from here.
   ============================================================================
   ONE STYLESHEET FOR THE SITE. v1.2.

   Every page used to carry its own copy of the same six hundred lines, so a
   change to the masthead was a change to seventeen files, and by the third
   file it was a different masthead. This is the one copy. A page loads it
   and adds only what is its own.

   ORDER: tokens · base · shell and rail · masthead · navigation · the
   corner (flag, player, bulletin) · the search · the rows · the gate ·
   bands · forms · the company page · the readers page · footer · the phone.
   The phone block is LAST on purpose — it overrides by position, not by
   specificity, so nothing above needs !important.
   ============================================================================ */

/* ---- tokens ---------------------------------------------------------------- */
:root{
  --paper:#ffffff; --panel:#f6f5ef; --line:#dcdad0; --line2:#e6e4da;
  --ink:#14150f; --ink2:#474a3e; --ink3:#7a7d70;
  --hot:#c0392b; --warm:#9a7a12; --cool:#2f7a5a; --gold:#C9A227; --good:#2e8b57;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

/* ---- base ------------------------------------------------------------------ */
*{box-sizing:border-box}
html,body{overflow-x:clip}
@supports not (overflow-x:clip){ html,body{overflow-x:hidden} }
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
h1{font-family:var(--serif);font-size:38px;font-weight:400;line-height:1.12;margin:0 0 14px;
  letter-spacing:-.015em;max-width:20ch}
h2{font-family:var(--serif);font-size:24px;font-weight:400;margin:0 0 12px}
.lede{font-size:17px;color:var(--ink2);max-width:62ch;margin:0 0 6px;line-height:1.62}
.lede b{color:var(--ink);font-weight:600}
.quiet{padding:26px 0;color:var(--ink3);font-size:14px;text-align:center}
.links{margin:12px 0 0;font-size:14.5px}
.links a{color:var(--cool);text-decoration:none;border-bottom:1px solid rgba(111,168,140,.4)}
.links a:hover{border-bottom-color:var(--cool)}
.links a.hot{color:var(--hot);border-bottom-color:rgba(198,90,74,.4)}
.links i{font-style:normal;color:var(--line2);margin:0 8px}

/* ---- the shell: content column with the rail beside it on wide screens ---- */
.shell{max-width:1400px;margin:0 auto;padding:0 22px;display:grid;
  grid-template-columns:238px minmax(0,1fr);gap:32px;align-items:start}
.shell > *{min-width:0}
/* ⚠ THE RAIL IS INVENTORY, NOT NAVIGATION. His ruling. It is a column that is
   sold, so nothing that helps a reader get around the site goes in it. */
.rail{position:sticky;top:20px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:18px 16px}
.k8{display:block;padding:0 0 15px;border-bottom:1px solid var(--line)}
.k8 a{display:block;text-decoration:none}
.k8 img{display:block;width:100%;height:auto;border-radius:4px}
.k8 a:hover{opacity:.92}
.k8 .why{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink3);margin-top:9px;line-height:1.5}
.railbox{border-bottom:1px solid var(--line);padding:16px 0}
.railbox h4{font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--warm);margin:0 0 8px}
.railbox p{margin:0 0 12px;font-size:13px;line-height:1.6;color:var(--ink2)}
.railbox a.ghost{display:block;text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;padding:9px 12px;border:1px solid var(--line);border-radius:3px;
  color:var(--ink2);text-decoration:none;margin-top:8px}
.railbox a.ghost:hover{border-color:#C9A227;color:#C9A227}
.railslot{padding:16px 0 0;min-height:60px}
@media(max-width:1100px){
  .shell{grid-template-columns:1fr;gap:0}
  /* on a phone a sidebar that comes FIRST is a billboard for somebody else at
     the top of your own page. It goes to the bottom, where a sidebar belongs
     when there is no side. */
  .shell > div{order:1}
  .rail{order:2;position:static;margin-top:26px}
}

/* ---- masthead -------------------------------------------------------------- */
header.top{border-bottom:1px solid var(--line);background:var(--paper)}
.masthead{padding:26px 22px 22px}
.mast{display:flex;align-items:center;gap:16px;flex-wrap:wrap;row-gap:14px}
.mast .logo{flex:1 0 100%}
.logo{font-family:var(--mono);font-size:clamp(26px,4.4vw,40px);font-weight:700;
  letter-spacing:.1em;line-height:1;color:var(--ink);text-decoration:none;display:block}
.logo i{font-style:normal;color:var(--hot)}
.logo small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;
  color:var(--ink3);font-weight:400;margin-top:9px;text-transform:uppercase}
.live{display:flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cool);
  box-shadow:0 0 0 3px rgba(111,168,140,.16)}
.mast #nyc{margin:0;padding:0 0 0 14px;border-left:1px solid var(--line2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink3);white-space:nowrap}
/* ⚠ NOTHING IN THE MASTHEAD RUNS UNDER THE CORNER PANEL on a screen wide
   enough for the panel to be fixed. */
@media(min-width:821px){ .mast{padding-right:360px} }
/* ⚠ ON A PHONE THE FLAG AND THE MENU ARE FIXED IN THE TOP RIGHT, and the
   masthead is the first thing on the page — so it starts below them. */
@media(max-width:820px){ .mast #nyc{padding-left:0;border-left:0} .masthead{padding-top:72px} }

/* ---- navigation: the three bars, and the same links in the footer ---------- */
.navbtn{position:fixed;top:14px;right:14px;z-index:60;width:44px;height:44px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;background:rgba(255,255,255,.94);border:1px solid var(--line);
  border-radius:5px;cursor:pointer;padding:0}
.navbtn span{display:block;width:20px;height:2px;background:var(--ink);
  transition:transform .18s ease, opacity .18s ease}
.navbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.navbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.navpanel{position:fixed;top:0;right:0;bottom:0;width:min(310px,86vw);z-index:59;
  background:var(--paper);border-left:1px solid var(--line);
  padding:76px 0 24px;transform:translateX(100%);transition:transform .22s ease;overflow-y:auto}
.navpanel[data-open="1"]{transform:translateX(0)}
.navpanel a{display:block;padding:14px 24px;color:var(--ink);text-decoration:none;
  font:400 16px/1.3 inherit;border-bottom:1px solid var(--line2)}
.navpanel a:hover{background:var(--panel)}
.navpanel a small{display:block;margin-top:3px;font-size:13px;color:var(--ink3)}
.navscrim{position:fixed;inset:0;z-index:58;background:rgba(20,21,15,.35);
  opacity:0;pointer-events:none;transition:opacity .22s ease}
.navscrim[data-open="1"]{opacity:1;pointer-events:auto}
.footnav{display:flex;flex-wrap:wrap;gap:0 22px;margin:0 0 16px;
  padding:0 0 14px;border-bottom:1px solid var(--line)}
.footnav a{color:var(--ink2);text-decoration:none;padding:5px 0;font-size:14px}
.footnav a:hover{color:var(--ink)}
@media (prefers-reduced-motion: reduce){ .navpanel,.navscrim,.navbtn span{transition:none} }

/* ---- the corner: the flag, then the player and the bulletin under it ------- */
.wwflag{position:fixed;top:14px;right:66px;z-index:60;display:flex;
  align-items:center;height:44px;padding:0 15px;
  background:rgba(255,255,255,.94);border:1px solid var(--line);
  border-radius:5px;text-decoration:none;color:var(--ink);
  font:500 14px/1 var(--mono);white-space:nowrap}
.wwflag:hover{border-color:var(--hot)}
.wwflag:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wwflag .label{position:relative;display:inline-block;padding-top:2px}
.wwflag .dot{position:absolute;top:-7px;left:11px;width:7px;height:7px;
  border-radius:50%;background:var(--hot);box-shadow:none;animation:wwpulse 1.6s ease-out infinite}
@keyframes wwpulse{
  0%   {opacity:1;   box-shadow:0 0 0 0 rgba(198,90,74,.65)}
  55%  {opacity:.3;  box-shadow:0 0 0 6px rgba(198,90,74,0)}
  100% {opacity:1;   box-shadow:0 0 0 0 rgba(198,90,74,0)}
}
@media(max-width:560px){ .wwflag{padding:0 12px;font-size:13px;right:62px} .wwflag .dot{left:9px} }

#topstack{position:fixed;top:66px;right:14px;z-index:54;
  width:min(320px,calc(100vw - 28px));display:flex;flex-direction:column;gap:8px}
/* ⚠ ON A PHONE IT IS NOT FIXED AT ALL — a fixed panel on a small screen covers
   the thing the visitor came to read. It sits in the flow, AFTER the search,
   never before the logo. */
@media(max-width:820px){ #topstack{position:static;width:auto;margin:18px 0 0} }

.squawk{border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.97);
  padding:11px 13px;margin:0;font:400 14px/1.4 Spectral,Georgia,serif;color:var(--ink);
  box-shadow:0 8px 24px rgba(0,0,0,.12)}
.squawk .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 7px}
.squawk .onair{display:flex;align-items:center;gap:7px;font:700 11px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.squawk .onair .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:none}
.squawk.playing .onair{color:var(--hot)}
.squawk.playing .onair .dot{background:var(--hot);animation:sqpulse 1.4s ease-out infinite}
@keyframes sqpulse{0%{box-shadow:0 0 0 0 rgba(198,90,74,.6)}
  60%{box-shadow:0 0 0 7px rgba(198,90,74,0)}100%{box-shadow:0 0 0 0 rgba(198,90,74,0)}}
.squawk .who{font:600 14px/1.2 Spectral,Georgia,serif}
.squawk .when{margin-left:auto;font:400 11px var(--mono);color:var(--ink3)}
.squawk .row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;border:0;padding:0}
.squawk .go{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  flex:0 0 36px;border-radius:50%;border:0;cursor:pointer;background:var(--gold);text-align:center;white-space:normal}
.squawk .go:hover{filter:brightness(1.08)}
.squawk .go .tri{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #14150f;margin-left:3px}
.squawk .go .sq{width:11px;height:11px;background:#14150f;display:none}
.squawk.playing .go .tri{display:none}
.squawk.playing .go .sq{display:block}
.squawk .mid{flex:1 1 auto;min-width:0}
.squawk .line{font-size:12.5px;color:var(--ink2);margin:0 0 5px}
.squawk .line b{color:var(--ink)}
.squawk .bar{height:4px;border-radius:2px;background:var(--line2);overflow:hidden;padding:0;display:block}
.squawk .bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s linear}
.squawk .next{font:400 11px var(--mono);color:var(--ink3);margin:7px 0 0}
.squawk .next b{color:var(--ink2);font-weight:500}
.squawk .times{margin:9px 0 0;font:400 12.5px var(--mono);color:var(--ink3);display:flex;gap:14px;flex-wrap:wrap}
.squawk .times[hidden]{display:none}
.squawk .times span.now{color:var(--gold)}

.bkcorner{position:relative;z-index:55;width:100%;background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--hot);border-radius:6px;padding:15px 17px 15px 16px;display:none;
  box-shadow:0 12px 34px rgba(0,0,0,.14);font:400 15px/1.55 Spectral,Georgia,serif;color:var(--ink)}
.bkcorner[data-show="1"]{display:block}
.bkcorner .hd{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.bkcorner .dot{width:8px;height:8px;border-radius:50%;background:var(--hot);flex:0 0 8px;
  box-shadow:none;animation:wwpulse 1.6s ease-out infinite}
.bkcorner .lbl{font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--hot)}
.bkplay{display:flex;align-items:center;gap:10px;width:100%;background:var(--hot);color:#fff;
  border:0;border-radius:4px;padding:11px 14px;margin:2px 0 9px;cursor:pointer;
  font:600 14px/1 Spectral,Georgia,serif;text-align:left}
.bkplay:hover{background:#b04d3e}
.bkplay .tri{flex:0 0 auto;width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #fff}
.bkplay .sq{flex:0 0 auto;width:11px;height:11px;background:#fff;display:none}
.bkplay[data-playing="1"] .tri{display:none}
.bkplay[data-playing="1"] .sq{display:block}
.bkplay .len{margin-left:auto;font:400 12px var(--mono);opacity:.8}
.bkcorner .x{margin-left:auto;background:none;border:0;color:var(--ink3);cursor:pointer;font:400 20px/1 inherit;padding:0 2px}
.bkcorner .x:hover{color:var(--ink)}
.bkcorner p{margin:0 0 10px}
.bkcorner .by{font:400 12.5px var(--mono);color:var(--ink3);margin:0}
.bkcorner .by b{color:var(--cool);font-weight:500}
@media (prefers-reduced-motion: reduce){
  .wwflag .dot,.squawk .onair .dot,.bkcorner .dot{animation:none;opacity:1;box-shadow:none}
}

/* ---- the search ------------------------------------------------------------ */
.hero{padding:34px 0 26px;border-bottom:1px solid var(--line)}
.finder{display:flex;gap:8px;margin:20px 0 0;max-width:520px}
.finder input{flex:1;min-width:0;font:15px var(--mono);letter-spacing:.06em;
  text-transform:uppercase;padding:11px 14px;border:2px solid var(--cool);
  border-radius:6px;background:#fff;color:#14150f}
.finder input:focus{outline:3px solid rgba(138,106,28,.35);outline-offset:1px}
.finder button{font:700 14.5px var(--sans);background:var(--hot);border:0;color:#fff;
  padding:11px 18px;border-radius:6px;cursor:pointer;white-space:nowrap}
.finder button:hover{filter:brightness(1.08)}
.freenote{margin:7px 0 0;font-size:13px;color:var(--ink3);max-width:520px}

/* ---- the rows: name, industry, marks — nothing else ------------------------ */
h2.filed{font:700 26px/1.1 inherit;margin:0 0 6px}
p.filedsub{color:var(--ink2);font-size:15.5px;margin:0 0 18px;max-width:60ch}
.bar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:16px 0 12px}
.bar button{font:11.5px var(--mono);letter-spacing:.08em;border:1px solid var(--line);
  background:transparent;color:var(--ink2);padding:6px 13px;border-radius:2px;cursor:pointer}
.bar button:hover{border-color:var(--ink3);color:var(--ink)}
.bar button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bar .ct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink3)}
.sell{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;
  margin:0 0 16px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sell div{font-size:13px;color:var(--ink2);line-height:1.5}
.sell b{display:block;font-family:var(--mono);font-size:15px;color:var(--ink);margin-bottom:3px}
.sell b span{font-size:11px;color:var(--cool);font-weight:400}
.row{border-bottom:1px solid var(--line2);padding:14px 0;display:grid;
  grid-template-columns:66px minmax(0,1fr) auto;gap:16px;align-items:start}
.row:hover{background:var(--panel)}
.row.heavy .tk{color:var(--hot)}
.tk{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.03em;color:var(--ink)}
.tk a{text-decoration:none}
.co{font-size:14.5px;line-height:1.4;margin:0}
.co a{text-decoration:none}
.co a:hover{color:var(--cool)}
.ind{margin:2px 0 0;font:400 12.5px var(--mono);color:var(--ink3);letter-spacing:.02em}
.found{margin:8px 0 0;font-size:13.5px;color:var(--ink2)}
.marks{margin:7px 0 0}
.m{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  border:1px solid var(--line);color:var(--ink2);padding:2px 7px;border-radius:2px;margin:0 4px 4px 0}
.m.h{border-color:#e6b7b1;background:#fbeeec;color:var(--hot)}
/* ⚠ ONLY PRE-FUNDED WARRANTS FLASH, and the text is not red — the border
   pulses behind it. "Look here" is a direction; red text is a judgement. */
.m.pf{border-color:#d9877c;background:#fbeeec;animation:pfflash 2.4s ease-in-out infinite}
@keyframes pfflash{
  0%,100%{border-color:#e6b7b1;background:#fbeeec;box-shadow:0 0 0 0 rgba(198,90,74,0)}
  50%    {border-color:#c0392b;background:#f6d9d5;box-shadow:0 0 0 3px rgba(198,90,74,.16)}
}
@media (prefers-reduced-motion: reduce){ .m.pf{animation:none;border-color:#c0392b;background:#f6d9d5} }
/* the speaker beside the name — hidden until a clip is known to exist */
.spk{display:none;vertical-align:middle;margin-left:8px;background:none;
  border:1px solid var(--line);border-radius:999px;width:26px;height:26px;
  padding:0;cursor:pointer;color:var(--ink2);line-height:1;position:relative;top:-1px}
.spk.on{display:inline-block}
.spk:hover{border-color:var(--warm);color:var(--warm)}
.spk[aria-pressed="true"]{border-color:var(--warm);color:var(--warm);background:rgba(201,162,39,.12)}
.spk svg{width:12px;height:12px;display:block;margin:0 auto;fill:currentColor}
.spklen{display:none;font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-left:6px;vertical-align:middle}
.spklen.on{display:inline}
.go{text-align:right;white-space:nowrap}
.go a{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  border:1px solid var(--line);color:var(--ink2);padding:5px 10px;border-radius:2px;
  text-decoration:none;margin:0 0 5px}
.go a:hover{border-color:var(--cool);color:var(--cool)}
.go a.verdict{border-color:var(--cool);color:var(--cool)}
.go button.readbtn{display:inline-block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.05em;background:var(--cool);border:1px solid var(--cool);
  color:#14150f;font-weight:700;padding:6px 11px;border-radius:2px;cursor:pointer;margin:0 0 5px}
.go button.readbtn:hover{filter:brightness(1.08)}

/* ---- buttons that add to the checkout -------------------------------------- */
.wbuy{background:transparent;border:1.5px solid var(--hot);color:var(--hot);
  border-radius:5px;padding:11px 18px;font:600 14.5px var(--sans);cursor:pointer;
  white-space:nowrap;text-decoration:none;display:inline-block}
.wbuy:hover{background:var(--hot);color:#fff}
.wbuy.ghost{border-color:var(--line);color:var(--ink2)}
.wbuy.ghost:hover{background:transparent;border-color:var(--ink2);color:var(--ink)}
.wbuy.gold{background:var(--gold);border-color:var(--gold);color:#14150f;font-weight:700}
.wbuy.gold:hover{filter:brightness(1.08);color:#14150f}
#wbuymsg{font-size:13.5px;color:var(--cool);margin:10px 0 0;min-height:1.4em}
#wbuymsg.bad{color:var(--hot)}

/* ---- the gate: five free, then this ---------------------------------------- */
.gate{border:1px solid var(--gold);border-radius:10px;padding:24px 22px;margin:14px 0 0;
  background:rgba(138,106,28,.07);text-align:center}
.gate .g1{font:700 21px/1.2 inherit;color:var(--ink);margin:0 0 8px}
.gate .g2{font-size:15.5px;color:var(--ink2);margin:0 auto 18px;max-width:46ch}
.gate .g2 b{color:var(--ink)}
.gate .g3{font-size:14px;color:var(--ink3);margin:12px 0 0}
.gate .g3 a{color:var(--cool)}

/* ---- Mark's caveat, verbatim ----------------------------------------------- */
.caveat{margin:20px 0 0;padding:13px 17px;background:var(--panel);border-left:3px solid var(--warm);
  font-size:14px;line-height:1.6;color:var(--ink2);max-width:74ch}
.caveat b{color:var(--warm);font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:5px}
.caveat b.in{display:inline;text-transform:none;letter-spacing:0;font:inherit;font-weight:700;color:var(--ink)}
.caveat .sig{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--ink3);font-size:13.5px}
.caveat .sig em{color:var(--ink2);font-style:italic}

/* ---- bands ----------------------------------------------------------------- */
.band{border-top:1px solid var(--line);padding:34px 0}
.pintro{max-width:68ch;color:var(--ink2);margin:0 0 22px}
.pintro b{color:var(--ink)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.cols h3{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hot);margin:0 0 6px}
.cols p{margin:0;font-size:14px;color:var(--ink2);line-height:1.6}
.sis{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.sis a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:17px 19px;text-decoration:none}
.sis a:hover{border-color:var(--ink3)}
.sis b{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.05em;margin-bottom:5px}
.sis span{font-size:13.5px;color:var(--ink2);line-height:1.55}
.priceline{border:1px solid var(--line);border-radius:8px;padding:16px 20px;display:flex;
  flex-wrap:wrap;gap:10px 22px;align-items:center;background:var(--panel)}
.priceline b{font:700 22px/1 var(--mono);color:var(--ink)}
.priceline span{color:var(--ink2);font-size:14.5px;flex:1 1 260px}
.priceline a{color:var(--cool);text-decoration:none;font-size:14px}

/* ---- forms ----------------------------------------------------------------- */
.alerts{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:24px 26px}
.alerts h2{margin-top:0}
.alerts p{color:var(--ink2);max-width:60ch}
.form{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 0}
.form input,.form textarea,.form select{flex:1;min-width:190px;background:#fff;border:1px solid var(--line);
  color:var(--ink);padding:11px 13px;border-radius:3px;font:14px var(--sans)}
.form textarea{flex:1 1 100%;min-height:120px;resize:vertical;line-height:1.5}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--cool)}
.form button{background:var(--cool);border:1px solid var(--cool);color:#fff;
  padding:11px 20px;border-radius:3px;font:14px var(--sans);font-weight:600;cursor:pointer}
.form label{flex:1 1 100%;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:8px 0 -4px}
.fine{font-size:12.5px;color:var(--ink3);margin:11px 0 0;line-height:1.55}
.ok{color:var(--cool);font-size:14px;margin:12px 0 0}

/* ---- the company page ------------------------------------------------------ */
.crumbs{border-bottom:1px solid var(--line2);padding:12px 0}
.crumbs a{font:600 12.5px var(--sans);color:var(--ink2);text-decoration:none;margin-right:20px}
.crumbs a:hover{color:var(--ink)}
.crumbs a[aria-current]{color:var(--ink)}
main{padding:30px 0 60px}
.chead h1{font-family:var(--sans);font-weight:700;font-size:clamp(24px,3.6vw,34px);letter-spacing:-.01em;margin:0 0 6px;max-width:none}
.who{margin:0 0 14px}
.who .tick{font:700 13px var(--mono);letter-spacing:.06em;color:var(--cool)}
.who .tick i{font-style:normal;opacity:.55;margin:0 6px}
.who .biz{font-size:13.5px;color:var(--ink2);margin:4px 0 0}
.who a.edg{color:var(--cool);text-decoration:none;border-bottom:1px solid currentColor}
.who .flag{color:var(--hot);font-weight:700}
.stnote{font-size:12.5px;line-height:1.45;color:var(--ink2);margin:8px 0 0;border-left:2px solid var(--hot);padding-left:10px}
.stnote b{color:var(--ink)}
.clean{font-size:15.5px;color:var(--ink);background:var(--panel);border-radius:8px;padding:12px 14px;margin:0 0 10px}
.clean b{color:var(--good)}

/* the three verdicts stack in one column, each in its own box, labelled */
.verdicts{display:grid;gap:14px;margin:22px 0 0}
.verdict{border:1px solid var(--line);border-radius:10px;padding:20px 22px;background:var(--panel)}
.verdict.auto{border-color:var(--cool)}
.verdict.mark{border-color:var(--warm)}
.verdict .lbl{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0 0 10px;
  font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.verdict.auto .lbl b{color:var(--cool)} .verdict.mark .lbl b{color:var(--warm)} .verdict.reader .lbl b{color:var(--ink2)}
.verdict .lbl b{font-weight:700}
.verdict .lbl .kind{border:1px solid currentColor;border-radius:2px;padding:2px 6px}
.verdict .lbl .kind.advice{color:var(--good)}
.verdict .vlead{font:400 19px/1.45 var(--serif);color:var(--ink);margin:0 0 14px;max-width:64ch}
.verdict .vlead.locked{color:var(--ink2);filter:blur(0);}
.verdict p{margin:0 0 10px;font-size:15px;color:var(--ink2);max-width:66ch}
.verdict .by{font-size:13px;color:var(--ink3);margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line2)}
.verdict .by b{color:var(--ink2);font-weight:600}
.vtab{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:14px}
.vtab th{text-align:left;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:8px 10px 8px 0;vertical-align:top;width:34%}
.vtab td{padding:8px 0;border-top:1px solid var(--line2);color:var(--ink2);vertical-align:top}
.vtab td b{color:var(--ink);font-weight:600}
.vtab .vn{display:block;font:400 11.5px var(--mono);color:var(--ink3);margin-top:2px}
.vrules{margin:14px 0 0}
.vrules h4{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px}
.vrules ol{margin:0;padding:0 0 0 0;list-style:none;display:grid;gap:6px}
.vrules li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;font-size:14px;color:var(--ink2)}
.vrules li b{font:700 12.5px var(--mono);color:var(--warm);padding-top:2px}
.vrules li a{color:var(--ink2);text-decoration:none;border-bottom:1px dotted var(--ink3)}
.vrules li a:hover{color:var(--ink)}
.vrules .ver{font:400 11.5px var(--mono);color:var(--ink3);margin:10px 0 0}
.vrules .ver a{color:var(--cool)}
.vgap{font:400 12.5px var(--mono);color:var(--ink3);margin:10px 0 0}
.vlock{border:1px dashed var(--gold);border-radius:8px;padding:16px 18px;margin:12px 0 0;
  background:rgba(201,162,39,.06);display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.vlock p{margin:0;flex:1 1 280px;font-size:14.5px;color:var(--ink2)}
.vlock p b{color:var(--ink)}
.vlock .wbuy{flex:0 0 auto}
.vpeople{margin:8px 0 0}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:10px 0 0}
.vcard{margin:0;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line2);border-radius:8px;padding:12px}
.vface{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px;background:var(--line2)}
.vinit{display:flex;align-items:center;justify-content:center;font:700 16px var(--mono);color:var(--ink3);letter-spacing:.04em}
.vcard figcaption{min-width:0;font-size:13px;line-height:1.45;color:var(--ink2)}
.vcard figcaption b{display:block;color:var(--ink);font-size:14px}
.vcard figcaption b a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--ink3)}
.vcard .vrole{display:block}
.vcard .vfirm{display:block;color:var(--ink3)}
.vcard .vrec{display:block;font:400 11px var(--mono);color:var(--warm);margin-top:4px}
.vcard .vrec.vonly{color:var(--ink3)}
.vcard .vnote{display:block;font:400 11px var(--mono);color:var(--ink3);margin-top:3px}
.vcard .vcred{display:block;font:400 10.5px var(--mono);color:var(--ink3);margin-top:3px}
.vwho{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:16px 0 0}
.ask{border:1px solid var(--line);border-radius:10px;padding:18px 22px;margin:14px 0 0;
  display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.ask.mark{border-color:rgba(201,162,39,.5)}
.ask div{flex:1 1 280px}
.ask .t{display:block;font:600 15px var(--sans);color:var(--ink);margin:0 0 3px}
.ask p{margin:0;font-size:14px;color:var(--ink2)}
.ask .price{font:700 20px/1 var(--mono);color:var(--ink);margin-right:6px}

/* ---- the readers page ------------------------------------------------------ */
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:18px 0 0}
.principle{border:1px solid var(--line);border-radius:8px;padding:16px 18px;background:var(--panel)}
.principle b{display:block;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--warm);margin:0 0 6px}
.principle .t{font:600 16px var(--sans);color:var(--ink);margin:0 0 6px}
.principle p{margin:0;font-size:14px;color:var(--ink2)}
.gigsplit{width:100%;border-collapse:collapse;font-size:13.5px;margin:10px 0 0}
.gigsplit th,.gigsplit td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:baseline}
.gigsplit th:first-child,.gigsplit td:first-child{text-align:left}
.gigsplit th{color:var(--ink3);font:400 12px var(--sans)}
.gigsplit td{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.gigsplit td:first-child{font-family:var(--sans);font-size:13.5px;color:var(--ink2)}
.gigsplit td.keep{color:var(--cool)}
.gigcap{color:var(--ink3);font-size:12.5px;margin:10px 0 0}
.soonmark{display:inline-block;font:600 10.5px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--warm);border:1px solid var(--warm);border-radius:3px;padding:3px 8px;margin:0 0 12px}
.twocol{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:start}
@media(max-width:840px){ .twocol{grid-template-columns:1fr;gap:22px} }

/* ---- footer ---------------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:22px 0 60px;font-size:12.5px;color:var(--ink3);line-height:1.7}
footer em{font-family:var(--serif);font-style:italic;color:var(--ink2)}
footer a{color:var(--ink2)}
.stamp{font:400 11px var(--mono);color:var(--ink3);margin-top:20px;padding-top:13px;border-top:1px solid var(--line2)}

/* ---- the phone. LAST, on purpose ------------------------------------------- */
@media(max-width:720px){
  h1{font-size:27px}
  .row{grid-template-columns:1fr;gap:5px}
  .go{text-align:left;white-space:normal}
  .wbuy,.finder button{white-space:normal}
  .finder{flex-wrap:wrap}
  .finder input,.finder button{flex:1 1 100%}
  .rail{padding:16px 14px}
  .vrules li{grid-template-columns:1fr;gap:2px}
  .gigsplit{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gigsplit thead,.gigsplit tbody,.gigsplit tr{display:table;width:100%;table-layout:fixed}
}