/* The Bill Rate Index — "night ledger"
   One committed dark identity: a ward corridor after midnight, ruled like an
   account book. Two colours carry all the meaning. Mint is the money that
   reaches the worker. Ember is the money that does not. Nothing else competes. */

:root{
  --ink-0:#07100e;
  --ink-1:#0c1614;
  --ink-2:#121e1b;
  --ink-3:#182725;
  --line:#1b2a27;
  --line-2:#2a3d39;
  --text:#e9f1ed;
  --text-2:#9db2ab;
  --text-3:#7d958d;
  --worker:#5fd3a6;
  --worker-dim:#255f4d;
  --agency:#e8853c;
  --agency-dim:#5f3a1c;
  --alarm:#e8604c;

  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --body:"Spectral",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --step:1.5rem;
}

*{box-sizing:border-box;}

body{
  margin:0;
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background-color:var(--ink-0);
  /* A lamp over the desk, a warmer one further off, and the ruled paper beneath. */
  background-image:
    radial-gradient(1150px 540px at 10% -10%, rgba(95,211,166,.11), transparent 62%),
    radial-gradient(780px 420px at 94% 2%, rgba(232,133,60,.07), transparent 60%),
    repeating-linear-gradient(180deg, rgba(233,241,237,.030) 0 1px, transparent 1px 34px);
  background-attachment:fixed;
}

.wrap{max-width:1020px;margin:0 auto;padding:0 22px 96px;}
.prose{max-width:66ch;}

/* ---------- masthead ---------- */
.brand{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  padding:24px 0 15px;border-bottom:1px solid var(--line-2);
}
.brand .name{
  font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.01em;
}
.brand .name em{font-style:italic;color:var(--worker);}
.brand .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);
}
.brand nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;}
.brand nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;
}
.brand nav a:hover,.brand nav a[aria-current="page"]{color:var(--worker);border-bottom-color:var(--worker);}

/* ---------- type ---------- */
h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(36px,5.6vw,64px);line-height:1.0;letter-spacing:-.012em;
  margin:0 0 18px;text-wrap:balance;
}
h1 em{font-style:italic;color:var(--worker);}
h2{
  font-family:var(--display);font-weight:600;font-size:clamp(25px,3vw,32px);
  line-height:1.12;letter-spacing:-.005em;margin:0 0 8px;text-wrap:balance;
}
h3{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.15em;
   text-transform:uppercase;color:var(--worker);margin:30px 0 8px;}
h4{font-family:var(--display);font-weight:600;font-size:19px;margin:0 0 4px;letter-spacing:.01em;}
p{margin:0 0 15px;}
.lede{font-size:19px;color:var(--text-2);margin:0 0 15px;}
.lede b,.lede strong{color:var(--text);font-weight:600;}
a{color:var(--worker);text-underline-offset:3px;text-decoration-thickness:1px;}
ul{margin:0 0 15px;padding-left:20px;}
li{margin-bottom:8px;}
li::marker{color:var(--worker-dim);}
section{padding-top:56px;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);display:block;margin-bottom:12px;}

/* ---------- hero ---------- */
.hero{padding:52px 0 4px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:46px;align-items:start;}
.hero .figure{font-family:var(--display);font-style:italic;color:var(--worker);}

/* ---------- the split bar: the whole argument, one object ---------- */
.bar{display:flex;height:30px;background:var(--ink-2);overflow:hidden;
  border:1px solid var(--line-2);}
.bar .w{background:linear-gradient(180deg,var(--worker),#49b98e);}
.bar .a{background:linear-gradient(180deg,var(--agency),#c96c28);}
.bar.sm{height:13px;min-width:92px;border-width:1px;}
.legend{display:flex;gap:20px;margin-top:11px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--text-2);flex-wrap:wrap;}
.legend i{display:inline-block;width:10px;height:10px;margin-right:7px;}
.legend .w i{background:var(--worker);}
.legend .a i{background:var(--agency);}

/* ---------- panels ---------- */
.panel,.step,.compare,.headline-split,.cta{
  background:linear-gradient(180deg,var(--ink-1),var(--ink-0));
  border:1px solid var(--line);
}
.headline-split{padding:22px;}
.headline-split + .headline-split{margin-top:14px;}
.headline-split .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:13px;}
.headline-split .place{font-family:var(--display);font-weight:600;font-size:19px;margin-bottom:4px;}
.headline-split .detail{font-family:var(--mono);font-size:12.5px;color:var(--text-2);
  margin-bottom:13px;font-variant-numeric:tabular-nums;}

.cta{border-left:3px solid var(--worker);padding:26px 28px;margin-top:36px;}
.cta h4{margin-top:0;}
.cta p{margin-bottom:0;color:var(--text-2);}
a.btn,button.go{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:18px;border:1px solid var(--worker);border-radius:3px;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  background:var(--worker);color:#04120d;padding:13px 22px;text-decoration:none;
  min-height:44px;transition:background .16s,border-color .16s,transform .1s;
}
a.btn:hover,button.go:hover{background:#7ce0ba;border-color:#7ce0ba;}
a.btn:active,button.go:active{transform:translateY(1px);}
button.go:disabled{opacity:.4;cursor:not-allowed;transform:none;}
a.btn.ghost,button.ghost{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid var(--line-2);border-radius:3px;color:var(--text-2);
  padding:12px 18px;cursor:pointer;margin-top:18px;min-height:44px;
}
a.btn.ghost:hover,button.ghost:hover{border-color:var(--worker);color:var(--worker);background:rgba(95,211,166,.06);}

/* Spacing between buttons belongs to the pair, not to one of them, so a lone
   ghost button is not indented by 10px for no reason. */
a.btn + a.btn,a.btn + button,button + a.btn,button.go + button.ghost{margin-left:10px;}

a.btn.small{margin-top:0;padding:9px 14px;font-size:11px;white-space:nowrap;min-height:0;}
a.alt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  margin-left:12px;white-space:nowrap;color:var(--text-2);
  border-bottom:1px solid var(--line-2);text-decoration:none;}
a.alt:hover{color:var(--worker);border-bottom-color:var(--worker);}
.soldout{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px;}
.stat{background:var(--ink-1);padding:20px 22px;display:flex;flex-direction:column;gap:6px;}
.stat .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);}
.stat .v{font-family:var(--display);font-weight:600;font-size:38px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--worker);letter-spacing:-.01em;}
.stat .v.ember{color:var(--agency);}
.stat .n{font-size:14.5px;color:var(--text-2);line-height:1.45;}

/* ---------- readout (submit page) ---------- */
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin:20px 0;}
.readout div{background:var(--ink-1);padding:16px 18px;display:flex;flex-direction:column;gap:4px;}
.readout .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);}
.readout .v{font-family:var(--display);font-weight:600;font-size:28px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--worker);}
.readout .s{font-family:var(--mono);font-size:11.5px;color:var(--text-2);}

.compare{padding:22px;margin-top:20px;}
.compare .row{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line);}
.compare .row:last-child{border-bottom:0;}
.compare .lab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);}
.compare .val{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;}

/* ---------- steps (submit page) ---------- */
.step{padding:26px;margin-top:24px;}
.step > .num{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--worker);display:block;margin-bottom:12px;}
.step[hidden]{display:none !important;}
.locked{border:1px dashed var(--line-2);background:rgba(232,133,60,.05);padding:24px;margin-top:22px;}
.locked h4{margin-top:0;}
.locked .why{font-size:15.5px;color:var(--text-2);}

/* ---------- forms ---------- */
textarea,input,select{
  font-family:var(--mono);font-size:14px;background:var(--ink-2);color:var(--text);
  border:1px solid var(--line-2);padding:10px 12px;width:100%;
}
textarea{min-height:124px;resize:vertical;line-height:1.55;}
input::placeholder,textarea::placeholder{color:var(--text-3);}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:15px 17px;margin-top:5px;}
.f{display:flex;flex-direction:column;gap:6px;}
.f label,.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);}
.f .hint{font-family:var(--mono);font-size:11px;color:var(--text-3);}

/* ---------- controls ---------- */
.controls{display:flex;flex-wrap:wrap;gap:15px 24px;align-items:flex-end;
  margin:24px 0 0;padding:18px 20px;background:var(--ink-1);border:1px solid var(--line);}
.field{display:flex;flex-direction:column;gap:7px;}
.seg{display:flex;border:1px solid var(--line-2);}
.seg button{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:8px 14px;
  background:transparent;color:var(--text-2);border:0;border-right:1px solid var(--line-2);cursor:pointer;}
.seg button:last-child{border-right:0;}
.seg button:hover{color:var(--worker);}
.seg button[aria-pressed="true"]{background:var(--worker);color:#04120d;font-weight:500;}
input[type="search"]{min-width:210px;}
.count{font-family:var(--mono);font-size:12px;color:var(--text-3);
  margin-left:auto;align-self:flex-end;padding-bottom:11px;white-space:nowrap;}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-top:0;background:var(--ink-1);}
table{border-collapse:collapse;width:100%;min-width:640px;}
th,td{padding:11px 17px;text-align:left;border-bottom:1px solid var(--line);}
th{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);white-space:nowrap;background:var(--ink-2);}
th button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  letter-spacing:inherit;text-transform:inherit;}
th button:hover{color:var(--worker);}
th[aria-sort="ascending"] button::after{content:" \2191";color:var(--worker);}
th[aria-sort="descending"] button::after{content:" \2193";color:var(--worker);}
td{font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--text-2);}
td.place{font-family:var(--display);font-weight:600;font-size:16px;color:var(--text);
  letter-spacing:.01em;}
td.n{text-align:right;}
td.ember{color:var(--agency);}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover td{background:var(--ink-2);}
tbody tr:has(a):hover{cursor:pointer;}
tbody tr.flagged td.place::after{content:" \26A0";color:var(--agency);font-size:12px;}
.share-cell{display:flex;align-items:center;gap:13px;min-width:180px;}
.share-cell > span{width:48px;text-align:right;color:var(--text);}
.empty{padding:28px 17px;color:var(--text-3);font-family:var(--mono);font-size:13px;}
caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:14px 17px 12px;
  border-bottom:1px solid var(--line);}

/* ---------- mini trend table inside a headline panel ---------- */
/* The wide-table minimum above does not apply here: this one lives inside a
   hero panel and must stay inside it. */
table.mini{width:100%;min-width:0;border-collapse:collapse;margin-bottom:4px;}
table.mini th,table.mini td{border:0;padding:5px 0;background:none;text-transform:none;
  letter-spacing:0;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;
  white-space:nowrap;}
table.mini th{color:var(--text-3);font-weight:500;width:56px;text-align:left;}
table.mini td{color:var(--text-2);padding-right:10px;}
/* Premium is the point; the filing count beside it is the caveat. */
table.mini td.n{color:var(--agency);text-align:right;padding-right:0;width:42px;}
table.mini td.filings{color:var(--text-3);width:46px;padding-left:10px;}
.undertable{font-family:var(--mono);font-size:10.5px;line-height:1.5;
  color:var(--text-3);margin:10px 0 0;}
table.mini .bar.sm{min-width:60px;height:10px;}
td.place a{color:inherit;text-decoration:none;border-bottom:1px solid var(--worker-dim);}
td.place a:hover{color:var(--worker);border-bottom-color:var(--worker);}

/* ---------- sponsor rail ----------
   Three widths, three shapes. Wide enough for both margins and the tiles split
   into two pinned columns, one down each side of the page. Wide enough for one
   margin and they all pin right. Narrower and they become a grid above the
   footer. An unsold tile carries its own price and is itself the booking link. */
.rail{
  margin:56px 0 0;padding-top:22px;border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px;
}
.rail[hidden]{display:none;}
.rail-col{display:contents;}
.rail .lab,.rail .ask{grid-column:1/-1;}
.rail .lab,.rc-b::before{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3);
}
.rc-b::before{content:none;}
.rail .spot{
  display:flex;gap:11px;align-items:flex-start;text-decoration:none;
  padding:11px 13px;min-width:0;background:var(--ink-1);border-radius:3px;
  border:1px solid var(--line);
  transition:border-color .18s,transform .18s,background .18s;
}
.rail .spot:hover{border-color:var(--worker);transform:translateY(-1px);}
.rail .spot:active{transform:translateY(0);}
.rail .spot.open{background:none;border-style:dashed;border-color:var(--line-2);}
.rail .spot.open:hover{background:rgba(95,211,166,.05);}
.rail .ico{
  flex:0 0 27px;width:27px;height:27px;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:14px;color:var(--text);
  background:var(--ink-3);border-radius:3px;
}
.rail .ico.plus{
  font-family:var(--mono);font-weight:400;font-size:15px;
  color:var(--worker);background:none;border:1px solid var(--worker-dim);
}
.rail .txt{min-width:0;display:flex;flex-direction:column;gap:2px;}
.rail .who{
  font-family:var(--display);font-weight:600;font-size:15px;line-height:1.2;
  color:var(--text);
}
.rail .spot.open .who{color:var(--worker);}
.rail .line{
  font-family:var(--mono);font-size:10.5px;line-height:1.4;color:var(--text-3);
}
.rail .ask{
  justify-self:start;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--text-3);text-decoration:none;border-bottom:1px solid var(--line-2);
}
.rail .ask:hover{color:var(--worker);}

/* Six tints, both site hues only, so a stack of tiles reads as a rail. */
.rail .ico.t0{background:rgba(95,211,166,.16);}
.rail .ico.t1{background:rgba(232,133,60,.16);}
.rail .ico.t2{background:rgba(95,211,166,.09);}
.rail .ico.t3{background:rgba(232,133,60,.09);}
.rail .ico.t4{background:rgba(95,211,166,.22);}
.rail .ico.t5{background:rgba(232,133,60,.22);}

/* The rails are anchored to the window edges and the page is padded to make
   room, rather than positioned off the centred column. Positioning off the
   column needs the viewport to be wider than the column plus two rails before
   anything fits, which left the rail hanging off the right of a 1366px laptop. */
@media (min-width:1180px) and (max-width:1499px){
  body{padding-right:240px;}
  .rail{
    position:fixed;top:96px;right:18px;width:206px;
    margin:0;padding:0;border-top:0;z-index:5;
    display:flex;flex-direction:column;gap:8px;
    max-height:calc(100vh - 126px);overflow-y:auto;scrollbar-width:thin;
  }
}

/* Both margins: the tiles split down each side of the window. */
@media (min-width:1500px){
  body{padding:0 240px;}
  .rail{display:block;margin:0;padding:0;border-top:0;}
  .rail-col{
    position:fixed;top:96px;width:206px;z-index:5;
    display:flex;flex-direction:column;gap:8px;
    max-height:calc(100vh - 126px);overflow-y:auto;scrollbar-width:thin;
  }
  .rc-a{left:18px;}
  .rc-b{right:18px;}
  .rc-b::before{content:"Sponsors";}
}

/* ---------- what a state publishes of its own ----------
   Three states publish something, forty-nine publish nothing. The column is
   there to show the nothing, so the nothing gets a style of its own. */
.tag-charges,.tag-caps,.tag-none{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;white-space:nowrap;
  padding:3px 9px;border-radius:2px;display:inline-block;
}
.tag-charges{color:var(--worker);background:rgba(95,211,166,.11);
  border:1px solid var(--worker-dim);}
.tag-caps{color:var(--agency);background:rgba(232,133,60,.09);
  border:1px solid var(--agency-dim);}
.tag-none{color:var(--text-3);border:1px solid var(--line);}
td .none{color:var(--text-3);}

/* ---------- notes ---------- */
.note{font-size:15px;color:var(--text-2);background:var(--ink-1);
  border-left:3px solid var(--line-2);padding:15px 19px;margin:20px 0;}
.note.warn{border-left-color:var(--agency);}
.status{font-family:var(--mono);font-size:12.5px;margin-top:15px;color:var(--text-2);}
.status.bad{color:var(--alarm);}
.srcs{font-family:var(--mono);font-size:12.5px;line-height:1.95;color:var(--text-2);}

footer{margin-top:64px;padding-top:22px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);display:flex;flex-wrap:wrap;gap:8px 24px;}

:focus-visible{outline:2px solid var(--worker);outline-offset:3px;border-radius:2px;}
a.btn:focus-visible,button:focus-visible{outline-offset:2px;}

/* ---------- one orchestrated arrival ---------- */
@media (prefers-reduced-motion: no-preference){
  .rise{animation:rise .7s cubic-bezier(.2,.7,.3,1) both;}
  .rise-1{animation-delay:.05s;} .rise-2{animation-delay:.16s;}
  .rise-3{animation-delay:.27s;} .rise-4{animation-delay:.38s;}
  .rise-5{animation-delay:.5s;}
  @keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
  /* The bar fills to its real width: the reveal is the point, so it runs last. */
  .bar .w,.bar .a{animation:fill .9s cubic-bezier(.25,.8,.3,1) both;animation-delay:.55s;}
  @keyframes fill{from{flex-basis:0;}}
  .bar.sm .w,.bar.sm .a{animation:none;}
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr !important;gap:30px !important;}
}
@media (max-width:600px){
  .compare .row{grid-template-columns:1fr;gap:5px;}
  .brand nav{margin-left:0;width:100%;}
}