/* Variable fonts, one file per family. Declaring the wght axis as a range is what
   makes 600 and 700 real weights off the axis rather than the browser smearing a
   400 into a fake bold. Subset to the glyphs this site renders: 37 KB for both. */
@font-face{font-family:Bitter;src:url(/assets/fonts/Bitter-var.woff2) format("woff2-variations"),
  url(/assets/fonts/Bitter-var.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/HankenGrotesk-var.woff2) format("woff2-variations"),
  url(/assets/fonts/HankenGrotesk-var.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ink:#101a24; --muted:#5a6774; --line:#dce2e9; --bg:#fff; --soft:#f4f7f9;
  --navy:#12333d; --accent:#1a7a72; --good:#1f7a4d; --warn:#b3541e;
  /* Signal colour. Waste and construction equipment is amber, so the mark and the
     index accents are amber. Used on rules and the logo, never on body text. */
  --amber:#2e9670; --amber-deep:#22795a;
  --steel:#1b2f36;
  /* Every figure on this site is meant to be compared with another figure, so
     numbers are monospaced and tabular throughout. It is the single change that
     makes a price table read as data rather than as decoration. */
  /* Three roles, three faces.
     Serif for anything you read: this is a price report, and a text serif carries
     that better than the system UI font, which is also the face every generated
     page defaults to. Iowan and Charter on Apple, Sitka and Cambria on Windows,
     Georgia as the floor, so it lands somewhere considered on every machine and
     costs no webfont request.
     Sans is kept for the interface only, labels, buttons, table headings.
     Mono for every figure, because the whole product is numbers being compared. */
  --serif:Bitter,"Iowan Old Style",Charter,Cambria,Georgia,serif;
  --sans:"Hanken Grotesk","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:1040px;
}

/* ============================================================================
   DESIGN SPEC — locked before styling, per local-service-design.
   These variables ARE the spec. Nothing ships off-scale.

   TYPE      six sizes sitewide, modular x1.25 from a 16px base. Everything else
             differentiates by weight and colour, never by a new size.
   RADIUS    two values. 4px on anything rectangular, 999px on pills only.
   DEPTH     one technique: a 3-5% background shift. No shadows, no strips.
             Borders are a last resort, after whitespace and after the tint.
   ============================================================================ */
:root{
  --fs-micro:12px;   /* uppercase labels, table meta */
  --fs-sm:14px;      /* secondary prose, captions */
  --fs-body:16px;    /* body */
  --fs-lead:20px;    /* lede, h3 */
  --fs-h2:25px;
  --fs-h1:34px;
  --r:4px;
  --r-pill:999px;
  --tint:var(--soft);          /* the one depth technique */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Body is sans, headings stay serif.
   The body was 17px serif at 1.62 — good for reading an essay, wrong for a page
   somebody is scanning to compare eight companies. With headings at 22px serif
   and body at 17px serif there was barely a weight difference between a section
   title and the paragraph under it, so a long page read as one block with
   nothing to catch the eye. Serif headings keep the character and keep it off
   the sans-everything default that every generated site lands on. */
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.58 var(--sans);
  font-feature-settings:"kern" 1;
  text-rendering:optimizeLegibility;
}
b,strong{font-weight:650}
a{color:var(--accent)}
a:hover{color:var(--navy)}
main{max-width:var(--wrap);margin:0 auto;padding:24px 20px 56px}

/* header / footer */
header.site{border-bottom:1px solid var(--line);background:#fff}
.brand{
  display:inline-block;max-width:var(--wrap);margin:0 auto;padding:16px 20px;
  font-weight:700;font-size:var(--fs-lead);letter-spacing:-.01em;color:var(--navy);text-decoration:none
}
.brand span{color:var(--accent)}
footer.site{
  border-top:1px solid var(--line);background:var(--soft);
  padding:24px 20px;font-size:var(--fs-sm);color:var(--muted)
}
footer.site p{max-width:var(--wrap);margin:0 auto 8px}

/* type */
h1{font:700 34px/1.16 var(--serif);letter-spacing:-.02em;margin:.15em 0 .35em}
h2{font:700 25px/1.25 var(--serif);letter-spacing:-.015em;margin:2.2em 0 .55em}
h3{font:700 17px/1.35 var(--sans);letter-spacing:-.005em;margin:1.6em 0 .4em}
/* a rule above each section gives the eye somewhere to stop on a long page */
main h2{padding-top:.55em;border-top:1px solid var(--line)}
main h2:first-of-type{border-top:0;padding-top:0}
.lede{font-size:var(--fs-lead);line-height:1.5;color:var(--muted);margin-top:0;max-width:62ch}
main p{max-width:68ch}
.muted{color:var(--muted)}
.fine{font-size:var(--fs-micro);color:var(--muted)}

/* breadcrumbs */
.crumbs{font-size:var(--fs-micro);color:var(--muted);margin-bottom:14px}
.crumbs i{font-style:normal;opacity:.5;margin:0 4px}

/* hero + cta */
.hero{padding:12px 0 4px}
.cta{margin-top:40px;padding:22px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r)}
.cta h2{margin-top:0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;text-decoration:none;
  min-height:48px;padding:12px 22px;border-radius:var(--r);font-weight:600;
  /* text-align guards the inline case; justify-content guards the stretched one.
     A button that can ever go width:100% needs both or the label drifts left. */
  text-align:center;
  transition:background .12s ease-out, transform .12s ease-out;
}
.btn:hover{background:var(--accent);color:#fff}
/* Scale DOWN on press, never up on hover. Up-on-hover is the generated-UI
   signature; the press-down is what a design engineer writes. */
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} .btn:active{transform:none} }

/* grids + cards */
.grid{list-style:none;padding:0;margin:0;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.grid li{padding:9px 10px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;gap:10px;align-items:baseline}
.cards{list-style:none;padding:0;margin:0}
.cards li{padding:10px 0;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap}

/* listing table */
table.listing{width:100%;border-collapse:collapse;margin:16px 0;font-size:var(--fs-sm)}
table.listing th{
  text-align:left;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);border-bottom:2px solid var(--line);padding:8px 10px 8px 0;font-weight:600
}
table.listing td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.listing tr:hover td{background:var(--soft)}
.tag{
  display:inline-block;margin-left:7px;font-size:var(--fs-micro);color:var(--warn);
  border:1px solid currentColor;border-radius:var(--r);padding:1px 5px;vertical-align:1px
}

/* Present to a screen reader and to a crawler, absent on screen. Used to give a
   link a real name where the visible text is a drawing plus two fragments. */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}

/* size-to-job table: reference content, so it reads quieter than the listing */
table.sizefit{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:var(--fs-sm)}
table.sizefit caption{
  text-align:left;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding-bottom:6px
}
table.sizefit th{
  text-align:left;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);border-bottom:2px solid var(--line);padding:8px 12px 8px 0;font-weight:600
}
table.sizefit td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.sizefit td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}

/* profile */
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.phead h1{margin-top:0}
.where{color:var(--muted);margin:.2em 0 .5em}
.rating b{font-size:var(--fs-body)}
.badge{font-size:var(--fs-micro);font-weight:600;padding:4px 10px;border-radius:var(--r);white-space:nowrap}
.badge.unclaimed{background:#fdf2e6;color:var(--warn);border:1px solid #f0d5b8}

dl.facts{
  display:grid;grid-template-columns:120px 1fr;gap:0;margin:22px 0;
  border-top:1px solid var(--line);font-size:var(--fs-sm)
}
dl.facts dt{padding:11px 0;color:var(--muted);border-bottom:1px solid var(--line)}
dl.facts dd{padding:11px 0;margin:0;border-bottom:1px solid var(--line);word-break:break-word}

/* health card */
.hcard{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:28px 0}
.hcard h2{margin:0 0 12px;font-size:var(--fs-body)}
.bar{height:8px;background:#e3e9ef;border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.bar span{display:block;height:100%;background:var(--accent)}
ul.gaps{margin:0 0 12px;padding-left:20px}
ul.gaps li{margin-bottom:4px;color:var(--warn)}

/* forms */
form.claim{margin:16px 0;max-width:640px}
form.claim label{display:block;margin-bottom:14px;font-size:var(--fs-sm);font-weight:600}
form.claim input,form.claim textarea{
  display:block;width:100%;margin-top:5px;padding:10px 12px;font:inherit;font-weight:400;
  border:1px solid var(--line);border-radius:var(--r);background:#fff
}
form.claim input:focus,form.claim textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
form.claim .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form.claim button{
  background:var(--navy);color:#fff;border:0;padding:12px 24px;border-radius:var(--r);
  font:inherit;font-weight:600;cursor:pointer
}
form.claim button:hover{background:var(--accent)}
.hp{position:absolute;left:-9999px}

@media (max-width:620px){
  h1{font-size:var(--fs-h2)}
  main{padding:18px 16px 40px}
  dl.facts{grid-template-columns:96px 1fr;font-size:var(--fs-sm)}
  form.claim .row{grid-template-columns:1fr;gap:0}
  table.listing{font-size:var(--fs-sm)}
}

.badge.reference{background:#eef2f6;color:var(--muted);border:1px solid var(--line)}
.tag.ref{color:var(--muted)}

a.site{display:block;font-size:var(--fs-micro);color:var(--muted);text-decoration:none;margin-top:2px}
a.site:hover{color:var(--accent);text-decoration:underline}

.actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.btn.call{background:var(--good)}
.btn.call:hover{background:#175f3c}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--soft);color:var(--navy)}
.btn.tiny{padding:7px 13px;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;background:var(--soft);
  color:var(--navy);border:1px solid var(--line)}
.btn.tiny:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (max-width:620px){ .actions .btn{flex:1;text-align:center} }

.chip{display:inline-block;background:#eef4f9;color:var(--navy);border:1px solid #d6e3ee;
  border-radius:var(--r);padding:2px 8px;margin:0 5px 4px 0;font-size:var(--fs-micro);font-weight:600}
.sizes{display:block;font-size:var(--fs-micro);color:var(--navy);margin-top:3px;letter-spacing:.01em}
.srcnote{margin:-8px 0 22px}

.pricing{margin:28px 0}
table.ptable{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-bottom:10px}
table.ptable th{text-align:left;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);border-bottom:2px solid var(--line);padding:8px 12px 8px 0;font-weight:600}
table.ptable td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.pcell{font-weight:700;color:var(--navy)}
.from{font-weight:700;color:var(--navy);white-space:nowrap}

.based{display:block;font-size:var(--fs-micro);color:var(--good);font-weight:600;margin-top:2px}
.away{display:block;font-size:var(--fs-micro);color:var(--muted);margin-top:2px}

table.ptable.idx td:first-child{font-weight:600}
table.ptable.idx th:not(:first-child),table.ptable.idx td:not(:first-child){text-align:right}
ul.terms{margin:0 0 14px;padding-left:20px}
ul.terms li{margin-bottom:6px}

dl.faq{margin:14px 0 0}
dl.faq dt{font-weight:600;margin-top:16px}
dl.faq dd{margin:5px 0 0;color:var(--muted)}

.fnav{max-width:var(--wrap);margin:0 auto 10px;line-height:2}
.fnav a{margin-right:2px}

.grid.nearby li{font-size:var(--fs-sm)}

ul.stats{padding-left:20px}
ul.stats li{margin-bottom:12px;line-height:1.65}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.two h3{font-size:var(--fs-sm);margin:0 0 8px}
ol.rank{margin:0;padding-left:22px;font-size:var(--fs-sm)}
ol.rank li{margin-bottom:6px}
p.cite{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  font-size:var(--fs-sm);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.55}
dl.gloss dt{font-size:var(--fs-body)}
@media (max-width:620px){ .two{grid-template-columns:1fr;gap:18px} }

/* ---- header nav ---- */
.hwrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hwrap .brand{padding:16px 0}
.hnav{display:flex;gap:18px;font-size:var(--fs-sm);font-weight:600}
.hnav a{color:var(--muted);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.hnav a:hover{color:var(--navy);border-bottom-color:var(--accent)}

/* ---- listing table becomes cards on a phone ----
   The phone number is the primary action in this category and a horizontally
   scrolled table hides it off-screen. Restack instead of scrolling. */
@media (max-width:680px){
  table.listing,table.listing tbody,table.listing tr,table.listing td{display:block;width:100%}
  table.listing thead{position:absolute;left:-9999px}
  table.listing tr{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
  table.listing tr:hover td{background:transparent}
  table.listing td{border:0;padding:0}
  table.listing td:first-child{font-size:var(--fs-body);margin-bottom:10px}
  table.listing td[data-label]{display:inline-flex;align-items:baseline;gap:6px;
    margin-right:16px;font-size:var(--fs-sm);color:var(--muted)}
  table.listing td[data-label]::before{content:attr(data-label);font-size:var(--fs-micro);
    text-transform:uppercase;letter-spacing:.06em;color:var(--muted);opacity:.75}
  table.listing td.cell-call{margin-top:12px}
  table.listing td.cell-call .btn.tiny{display:block;text-align:center;padding:11px;
    font-size:var(--fs-sm);background:var(--navy);color:#fff;border-color:var(--navy)}
  .hnav{gap:14px;font-size:var(--fs-sm);width:100%;padding-bottom:10px}
  .hwrap .brand{padding:14px 0 4px}
}

/* index tables scroll rather than restack — they are genuinely tabular */
table.ptable{display:block;overflow-x:auto;white-space:nowrap}
@media (min-width:681px){ table.ptable{display:table;white-space:normal} }

.cards.guides li{display:block;padding:14px 0}
.cards.guides a{font-weight:600;font-size:var(--fs-body)}
.cards.guides .muted{display:block;margin-top:3px;font-size:var(--fs-sm)}
hr.rule{border:0;border-top:1px solid var(--line);margin:32px 0 16px}

.byline{font-size:var(--fs-sm);color:var(--muted);margin:-6px 0 14px}
.cards.posts li{display:block;padding:16px 0}
.cards.posts a{font-weight:600;font-size:var(--fs-body)}
.cards.posts time{display:block;font-size:var(--fs-micro);color:var(--muted);margin-top:2px}
.cards.posts .muted{display:block;margin-top:5px;font-size:var(--fs-sm);line-height:1.55}
.pagi{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-sm);margin:16px 0}

.psize{display:block;font-size:var(--fs-micro);color:var(--muted);font-weight:500;margin-top:1px}

/* chart */
figure.chart{margin:18px 0 22px;padding:0}
figure.chart svg{display:block;width:100%;height:auto;overflow:visible}
figure.chart svg g:hover path{fill:var(--navy)}
figure.chart figcaption{font-size:var(--fs-micro);color:var(--muted);margin-top:10px;max-width:62ch}

/* ---- homepage hero: this is a data product, so lead with the numbers ---- */
.hero{padding:22px 0 6px}
.hero h1{font-size:var(--fs-h1);max-width:19ch}
@media (max-width:620px){ .hero h1{font-size:var(--fs-h2)} }

.statbar{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin:26px 0 22px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}
.statbar div{background:#fff;padding:15px 16px}
.statbar b{
  display:block;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em;
  color:var(--navy);font-weight:700
}
.statbar span{
  display:block;margin-top:4px;font-size:var(--fs-micro);text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);font-weight:600
}
@media (max-width:620px){
  .statbar{grid-template-columns:1fr 1fr}
  .statbar b{font-size:var(--fs-lead)}
}

.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
@media (max-width:620px){ .hero-cta .btn{flex:1;text-align:center} }

/* The dated, sourced line under a price heading. Small, but it is the line that
   makes the number quotable rather than just another figure on a page. */
.stamp{
  font-size:var(--fs-micro);color:var(--muted);margin:-2px 0 12px;
  padding-left:0
}
.sub{font-size:var(--fs-sm);color:var(--muted);margin:-4px 0 12px}

.explain{
  margin:34px 0;padding:22px 24px;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--r)}
.explain h2{margin-top:0}
.explain p:last-child{margin-bottom:0}
.explain .stamp{border-left-color:#cfdae4}

.grid.cities li,.grid.states li{font-size:var(--fs-sm)}
.grid.states .muted{white-space:nowrap;font-variant-numeric:tabular-nums}

ul.sizelist{list-style:none;padding:0;margin:12px 0 16px;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
ul.sizelist li{padding:9px 10px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;gap:10px;align-items:baseline;font-size:var(--fs-sm)}

/* ============================================================================
   Product surface

   The look this is aiming at is trade software, not a content site: a masthead
   with a mark, dense hairline tables, uppercase micro-labels, and monospaced
   tabular figures everywhere a number appears. Corners are 3px because precision
   reads as more credible than friendliness when the whole product is a price.
   ========================================================================== */

/* ---- masthead ---- */
header.site{
  border-bottom:1px solid var(--line);background:#fff;
  box-shadow:inset 0 3px 0 var(--steel)
}
.hwrap{padding:0 20px}
.brand{
  display:flex;align-items:center;gap:9px;padding:14px 0;
  font-weight:700;font-size:var(--fs-body);letter-spacing:-.012em;color:var(--steel)
}
.brand span{color:var(--accent)}
.brand svg{display:block;flex:none}
.hnav{gap:20px;font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.hnav a{color:var(--muted);padding:7px 0;border-bottom:2px solid transparent}
.hnav a:hover{color:var(--steel);border-bottom-color:var(--amber)}

/* ---- numbers ---- */
.pcell,.from,.statbar b,.rating b,.grid .muted,.sizelist .muted,
table.ptable td:not(:first-child),.crumbs .muted{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;letter-spacing:-.02em
}
.pcell,.from{font-weight:700;color:var(--steel)}
.psize{font-family:var(--mono);letter-spacing:0}

/* ---- micro-labels ---- */
.statbar span,table.listing th,table.ptable th,.badge,.tag{
  font-variant-numeric:normal;letter-spacing:.07em
}

/* ---- tables: hairlines, zebra, numbers right ---- */
table.listing,table.ptable{border:1px solid var(--line);border-radius:var(--r)}
table.listing th,table.ptable th{
  background:var(--soft);border-bottom:1px solid var(--line);
  padding:9px 12px;font-size:var(--fs-micro);color:var(--muted)
}
table.listing td,table.ptable td{padding:12px}
table.listing tbody tr:nth-child(even){background:#fbfcfd}
table.listing tbody tr:last-child td,table.ptable tbody tr:last-child td{border-bottom:0}
table.listing tr:hover td{background:#eef4f9}
table.ptable td:first-child{font-weight:600}
table.ptable th:not(:first-child),table.ptable td:not(:first-child){text-align:right}
table.ptable td:not(:first-child){color:var(--steel)}

/* ---- surfaces ---- */
.cta,.hcard,.explain,.statbar,p.cite,.btn,.chip,
form.claim input,form.claim textarea,form.claim button{border-radius:var(--r)}
.cta{background:var(--soft);border-color:var(--line)}
.btn{background:var(--steel);font-weight:650;letter-spacing:.005em}
.btn:hover{background:var(--navy)}
.btn.ghost:hover{border-color:var(--muted)}

/* ---- statbar: the index reading ---- */
.statbar{border-radius:var(--r);border-top:2px solid var(--amber)}
.statbar b{font-size:var(--fs-h2);color:var(--steel);font-weight:700;letter-spacing:-.03em}
.statbar span{font-size:var(--fs-micro);letter-spacing:.08em}
.statbar div:first-child b{color:var(--amber-deep)}

/* ---- the dated, sourced line ---- */
.stamp{
  font-family:var(--mono);font-size:var(--fs-micro);line-height:1.55;letter-spacing:-.01em;
  border-left-width:2px;border-left-color:var(--amber);padding-left:10px
}
.explain .stamp{border-left-color:var(--amber)}

/* ---- explain block reads as a report note ---- */
.explain{}

/* ---- grids: rules on both axes, like a spec sheet ---- */
.grid,ul.sizelist{gap:0;border-top:1px solid var(--line)}
.grid li,ul.sizelist li{border-bottom:1px solid var(--line);padding:8px 12px 8px 2px}
.grid li:hover,ul.sizelist li:hover{background:var(--soft)}

/* ---- footer: closing plate ---- */
footer.site{background:var(--steel);color:#9fb0bf;border-top:0}
footer.site p{color:#8fa2b2;font-size:var(--fs-micro)}
footer.site a{color:#cfdae4;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
.fnav{font-size:var(--fs-micro)}

@media (max-width:620px){
  .hnav{font-size:var(--fs-micro);letter-spacing:.05em;gap:14px}
  .brand{font-size:var(--fs-body)}
  table.listing td,table.ptable td{padding:10px}
}
@media (max-width:680px){
  table.listing{border:0;border-radius:var(--r)}
  table.listing tr{border-radius:var(--r)}
  table.listing tbody tr:nth-child(even){background:transparent}
}
.brand b{font-weight:700;letter-spacing:-.015em}

/* Numeric columns align right and hold a fixed width, so prices and ratings stack
   into scannable columns instead of drifting with the company name beside them.
   Desktop only: below 680px the table restacks into cards. */
@media (min-width:681px){
  table.listing th:nth-child(2),table.listing td:nth-child(2),
  table.listing th:nth-child(3),table.listing td:nth-child(3){text-align:right}
  table.listing th:nth-child(2),table.listing th:nth-child(3){width:112px}
  table.listing th:nth-child(4){width:168px}
  table.listing td:nth-child(4){text-align:right}
}
@media (min-width:681px){
  table.listing th:nth-child(3){width:134px}
  table.listing th:nth-child(4){text-align:right}
}

/* The desktop cell padding must not survive the restack, or the inline PRICE and
   GOOGLE labels get pushed onto separate lines inside each card. */
@media (max-width:680px){
  table.listing td{padding:0}
  table.listing td[data-label]{margin-right:18px}
  table.listing tr{padding:14px 16px}
}

/* ---- charts ---- */
figure.chart{margin:14px 0 30px}
figure.chart svg{display:block;width:100%;height:auto;overflow:visible}
figure.chart figcaption{
  font-size:var(--fs-micro);color:var(--muted);margin-top:12px;max-width:70ch;line-height:1.55
}

/* range plot: sizes against a shared price scale */
.chart.ranges .gl{stroke:#e8edf2;stroke-width:1}
.chart.ranges .ax{font:600 11px/1 var(--mono);fill:var(--muted);letter-spacing:-.02em}
.chart.ranges .sz{font:650 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;fill:var(--ink)}
.chart.ranges .band{fill:#f6dcb4}
.chart.ranges .med{fill:#a8620d}
.chart.ranges .val{font:700 15px/1 var(--mono);fill:var(--steel);letter-spacing:-.03em}
.chart.ranges .n{font:400 10.5px/1 var(--mono);fill:var(--muted)}
.chart.ranges .rw:hover .band{fill:#f0cd97}

/* tile grid map */
.chart.tilemap .ab{font:700 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;letter-spacing:.02em}
.chart.tilemap .pr{font:600 10.5px/1 var(--mono);letter-spacing:-.03em;opacity:.82}
.chart.tilemap .lg{font:500 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;fill:var(--muted)}
/* No data reads as an absence: white, dashed, and lighter than any band. */
.chart.tilemap .nd rect{fill:#fff;stroke:#ccd6de;stroke-width:1;stroke-dasharray:3 3}
.chart.tilemap .nd .ab{fill:#b3bfc9;font-weight:600}
.chart.tilemap a.tl{cursor:pointer}
.chart.tilemap a.tl rect{transition:none}
.chart.tilemap a.tl:hover rect{stroke:var(--steel);stroke-width:2}

/* The legend runs out of room on a phone, so the map drops it and the caption
   carries the reading instead. */
@media (max-width:620px){
  .chart.ranges .sz{font-size:var(--fs-micro)}
  .chart.tilemap .pr{display:none}
}

/* City price table: long, so it scrolls in its own box rather than running the page
   to 400 rows, and the delta column is coloured because that is the column people
   actually scan. */
table.citytable{display:block;max-height:560px;overflow-y:auto;white-space:normal}
table.citytable thead th{position:sticky;top:0;z-index:1;background:var(--soft);
  box-shadow:inset 0 -1px 0 var(--line)}
table.citytable td.up{color:var(--amber-deep);font-weight:600}
table.citytable td.down{color:#1f5d8a;font-weight:600}

/* Table sort controls. Hidden in the markup and revealed by script, so a reader
   without JavaScript never sees a button that cannot do anything. */
.tctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 10px}
.tctl[hidden]{display:none}
.tctl-l{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:700;margin-right:2px}
.tctl button{
  font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  background:#fff;color:var(--steel);border:1px solid var(--line);
  border-radius:var(--r);padding:6px 13px
}
.tctl button:hover{border-color:var(--muted)}
.tctl button[aria-pressed="true"]{
  background:var(--steel);color:#fff;border-color:var(--steel)
}
.tctl-f{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);
  color:var(--muted);cursor:pointer;margin-left:4px}
.tctl-f input{accent-color:var(--steel);cursor:pointer}
@media (max-width:620px){
  .tctl{gap:6px}
  .tctl button{padding:6px 11px;font-size:var(--fs-micro)}
  .tctl-f{width:100%;margin-left:0}
}

/* Compact standing strip on a company profile. Same component as the homepage
   statbar, tightened because it sits above the fold next to the call button. */
.statbar.compact{margin:18px 0 10px}
.statbar.compact div{padding:12px 14px}
.statbar.compact b{font-size:var(--fs-lead)}
.statbar.compact span{font-size:var(--fs-micro)}

/* The company whose page this is, inside its own comparison table. */
table.compare tr.self td{background:#fdf6ea}
table.compare tr.self:hover td{background:#fbf0dc}
@media (max-width:680px){
  table.compare tr.self{border-color:var(--amber);background:#fdf6ea}
  table.compare tr.self td:first-child{}
}

/* Company mark. A third of companies publish no usable logo, so the monogram is
   not a placeholder for a missing feature, it is the design for that case. */
.pident{display:flex;align-items:flex-start;gap:16px}
/* Wider than tall, because company logos are: a wordmark squeezed into a square
   box is mostly empty space with unreadable type in the middle. */
.logo{
  flex:none;width:112px;height:70px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:6px 8px
}
.logo.mono{
  width:70px;display:flex;align-items:center;justify-content:center;padding:0;
  font:700 26px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.02em;color:#fff;background:var(--m);border-color:var(--m)
}
@media (max-width:620px){
  .logo{width:88px;height:56px}
  .logo.mono{width:56px;font-size:var(--fs-lead)}
  .pident{gap:12px}
}

/* Confirmed by phone. The only claim on this site that did not come off a crawler,
   so it gets the one colour reserved for something being genuinely verified. */
.badge.verified{background:#e8f5ee;color:var(--good);border:1px solid #b9dfc9}
.srcnote.confirmed{
  color:var(--good);font-weight:600
}

/* Social profile links. nofollow throughout: these are identity signals for a
   machine, not endorsements, and we are not passing rank to Facebook. */
.socials{display:flex;flex-wrap:wrap;gap:6px}
.socials a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-micro);font-weight:600;text-decoration:none;color:var(--steel);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:5px 10px 5px 8px
}
.socials a:hover{background:var(--soft);border-color:var(--muted)}
.socials svg{flex:none;display:block}

/* Earned badges.
   Three families because they answer different questions: value is what the money
   buys, rep is what other customers found, trust is who they are. Within each, the
   hard-won ones are filled solid and the rest are tinted, so a page with eight
   badges still has an obvious first thing to read. Each carries a title with the
   figure behind it. */
ul.badges{
  display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:16px 0 0
}
ul.badges li{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.005em;line-height:1;
  padding:7px 12px 7px 10px;border-radius:var(--r);border:1px solid;
  white-space:nowrap
}
ul.badges svg{flex:none;opacity:.9}

/* tinted */
.b-value{background:#fdf3e3;color:#8a5510;border-color:#eed7ab}
.b-rep{background:#e9f6ef;color:#186b4c;border-color:#bfe0cd}
.b-trust{background:#eef2f6;color:var(--steel);border-color:#d3dde6}

/* earned the hard way: solid, and carrying a little more weight */
.b-value.hero{background:#b5710f;color:#fff;border-color:#9c6009;
  }
.b-rep.hero{background:#1a6b4b;color:#fff;border-color:#155739;
  }
.b-trust.hero{background:var(--steel);color:#fff;border-color:#0f1a24;
  }
ul.badges li.hero svg{opacity:1}

@media (max-width:620px){
  ul.badges{gap:6px}
  ul.badges li{font-size:var(--fs-micro);padding:6px 10px 6px 8px;gap:5px}
  ul.badges svg{width:12px;height:12px}
}
a.logolink{display:block;flex:none;border-radius:var(--r)}
a.logolink:hover .logo{border-color:var(--amber)}
a.logolink:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ZIP lookup. Hidden in the markup and revealed by script, so nobody without
   JavaScript is shown a box that cannot do anything; the state and city grids
   below are the path in that case. */
.ziplook{margin:20px 0 4px;max-width:420px}
.ziplook[hidden]{display:none}
.ziplook label{
  display:block;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;margin-bottom:6px
}
.ziprow{display:flex;gap:8px}
.ziprow input{
  flex:1;min-width:0;font:700 17px/1.2 var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:.04em;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:11px 13px
}
.ziprow input:focus-visible,.ziprow button:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.ziprow button{
  font:650 14.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  cursor:pointer;background:var(--steel);color:#fff;border:1px solid var(--steel);
  border-radius:var(--r);padding:0 18px;white-space:nowrap
}
.ziprow button:hover{background:var(--navy);border-color:var(--navy)}
.zipout{min-height:1.2em;margin:7px 0 0;font-size:var(--fs-micro);color:var(--muted)}
@media (max-width:480px){ .ziprow{flex-direction:column} .ziprow button{padding:12px} }
/* A logo drawn in white for a dark header gets one. */
.logo.ondark{background:var(--steel);border-color:var(--steel)}
a.logolink:hover .logo.ondark{border-color:var(--amber)}


/* ---- interface furniture stays sans ---- */
.brand,.hnav,.crumbs,.btn,.badge,ul.badges li,.statbar span,.tctl,.tctl button,
table.listing th,table.ptable th,label,select,input,button,.terms span,
.sizes,.based,.away,.tag,.chip,figcaption,.fine,.sub,.zipout,.ziprow button,
.fnav,footer.site,.pagi,.psize,.socials a,dl.facts dt{
  font-family:var(--sans)
}
.logo.mono{font-family:var(--sans)}
/* the site's own headline face should not leak into the data */
.pcell,.from,.statbar b,table.ptable td:not(:first-child){font-family:var(--mono)}
/* serif needs a touch more air between rows than the UI font did */
table.listing td{line-height:1.5}
dl.faq dt{font-family:var(--serif);font-size:var(--fs-body)}

/* Container sizes, drawn against a shared scale.
   The point of the drawing is the comparison: a 20, 30 and 40 share a footprint
   and differ only in wall height, which a list of numbers cannot show. Every
   silhouette uses the same pixels-per-foot, so the row is honest. */
ul.sizerow{
  list-style:none;padding:0;margin:14px 0 10px;
  display:grid;gap:2px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  align-items:stretch
}
ul.sizerow li{margin:0}
ul.sizerow li{display:flex}
ul.sizerow a,ul.sizerow .nolink{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:10px 6px 12px;border-radius:var(--r);text-decoration:none;color:inherit;
  border:1px solid transparent
}
ul.sizerow a:hover{background:var(--soft);border-color:var(--line)}
ul.sizerow a:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.cbox{display:block;width:100%;height:auto;max-width:150px}
.cbody{fill:#f3d9b0;stroke:#c9922f;stroke-width:1.2;stroke-linejoin:round}
.crim{stroke:#a8620d;stroke-width:2;stroke-linecap:round;fill:none}
.crail{fill:var(--steel)}
ul.sizerow a:hover .cbody{fill:#eecd97}
ul.sizerow b{
  font:700 15px/1 var(--sans);margin-top:8px;color:var(--steel);
  font-variant-numeric:tabular-nums
}
ul.sizerow a b{color:var(--accent)}
ul.sizerow small{
  font:600 10.5px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-top:4px;text-align:center
}
@media (max-width:620px){
  ul.sizerow{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  ul.sizerow b{font-size:var(--fs-sm)}
  ul.sizerow small{font-size:var(--fs-micro)}
}

/* Collapsible FAQ, native <details>, no script.
   Used only where the FAQ is supplementary to a full article. The marker is a
   drawn chevron rather than the browser default triangle, which differs on every
   platform and reads as an unstyled page. */
.faq.acc{border-top:1px solid var(--line);margin:14px 0 0}
.faq.acc details{border-bottom:1px solid var(--line)}
.faq.acc summary{
  list-style:none;cursor:pointer;position:relative;
  font:700 17px/1.4 var(--serif);color:var(--ink);
  padding:15px 34px 15px 0
}
.faq.acc summary::-webkit-details-marker{display:none}
/* Rotate about the centre, not a fixed offset: with a fixed `top` the open state
   drifted and read as a corner bracket rather than a chevron. */
.faq.acc summary::after{
  content:"";position:absolute;right:10px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transform-origin:center;
  transition:transform .18s ease
}
.faq.acc details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq.acc summary:hover{color:var(--accent)}
.faq.acc summary:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.faq.acc details > div{padding:0 0 16px;color:var(--muted);max-width:70ch}
@media (prefers-reduced-motion:reduce){ .faq.acc summary::after{transition:none} }

/* cost calculator */
form.calc{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:18px 0 22px;background:var(--soft)}
.calcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 16px}
.calcgrid label{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-micro);text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);font-weight:600}
.calcgrid select,.calcgrid input{
  font:inherit;font-size:var(--fs-sm);text-transform:none;letter-spacing:0;color:var(--ink);
  padding:8px 9px;border:1px solid var(--line);border-radius:var(--r);background:#fff;width:100%
}
.calcout{display:block;margin-top:14px;padding-top:13px;border-top:2px solid var(--line)}
.calcout strong{font-size:var(--fs-h2);font-variant-numeric:tabular-nums;display:inline-block}
.calcout span{display:block;font-size:var(--fs-micro);color:var(--muted);margin-top:3px}

/* quote request block */
.quote{margin:34px 0 8px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--soft)}
.quote h2{margin-top:0}
.quote form.claim{max-width:none;margin-top:14px}
.quote textarea{resize:vertical}

/* Index Score badge in the listing table */
.iscore{
  display:inline-block;min-width:34px;text-align:center;padding:3px 7px;border-radius:var(--r);
  font:600 14px/1.25 var(--mono);font-variant-numeric:tabular-nums;
  background:#eef3f7;color:var(--navy);border:1px solid var(--line)
}

/* ---- listing rows: denser, logo-led, two actions ---------------------------
   The table was four lines of stacked text per company and fit four rows on a
   laptop screen. A directory is scanned, not read: the job is to compare eight
   companies without scrolling, which means the logo does the identifying and
   the numbers do the comparing. */
.proof{
  display:flex;flex-wrap:wrap;gap:6px 26px;margin:0 0 14px;padding:11px 14px;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r);
  font:14px/1.35 var(--sans);color:var(--muted)
}
.proof b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}

.corow{display:flex;align-items:center;gap:11px}
.corow .logo{width:40px;height:40px;flex:0 0 40px;object-fit:contain;border-radius:var(--r);background:#fff}
.corow .logo.mono{
  display:flex;align-items:center;justify-content:center;font:700 14px/1 var(--sans);
  color:#fff;background:var(--m,#1b2a38);border-radius:var(--r)}
.corow .logolink{display:block;flex:0 0 40px;line-height:0}
.cometa{min-width:0}
a.coname{display:block;font:600 15.5px/1.3 var(--sans);text-decoration:none;color:var(--accent)}
a.coname:hover{text-decoration:underline}
.coline{display:block;font:12.5px/1.4 var(--sans);color:var(--muted);margin-top:2px}
.coline .based{color:var(--good);font-weight:600}
.coline .sizes{color:var(--muted)}

table.listing td{padding:8px 10px 8px 0;vertical-align:middle}
.cell-co{width:44%}
/* side by side, not stacked — stacking them made the row taller than the
   four-line text block it was meant to replace */
.acts{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
/* Website is secondary to the call. As a second bordered button it wrapped to
   its own line and made the row taller than the layout it replaced; as a plain
   link it costs almost no height and still reads as an action. */
.btn.tiny.ghost{
  background:none;border:0;padding:0;font:600 12.5px/1.3 var(--sans);
  color:var(--muted);text-decoration:underline;text-underline-offset:2px
}
.btn.tiny.ghost:hover{background:none;color:var(--accent)}

/* the score is the headline metric — make it read like one */
.iscore{
  min-width:40px;padding:5px 9px;font:700 16px/1.2 var(--mono);
  background:var(--navy);color:#fff;border:0
}
.from{font:700 17px/1.2 var(--mono);font-variant-numeric:tabular-nums}

@media (max-width:720px){
  .cell-co{width:auto}
  .corow .logo,.corow .logolink{width:32px;height:32px;flex-basis:32px}
  .proof{gap:4px 16px;font-size:var(--fs-micro)}
}

/* ---- quote capture --------------------------------------------------------
   Five directories checked and every one opens with a single field: Dumpster-
   Comparison takes an email behind "Reveal Price", HometownDumpsterRental and
   Dumpsters.com take a ZIP, Thumbtack takes a ZIP, and Angi asks for nothing at
   all behind "Click to reveal". None of them ask for five things up front,
   which is what this form used to do. Phone rather than email because it is the
   field a hauler can act on. */
.quote .qlede{margin:0 0 14px;color:var(--muted)}
.qform{margin:0}
.qrow{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.qrow input[type=tel]{
  flex:1 1 260px;min-width:0;padding:13px 15px;font:17px/1.2 var(--sans);
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink)
}
.qrow input[type=tel]:focus{outline:2px solid var(--accent);outline-offset:-1px}
.qrow button{
  flex:0 0 auto;background:var(--navy);color:#fff;border:0;padding:13px 26px;border-radius:var(--r);
  font:600 16px/1.2 var(--sans);cursor:pointer
}
.qrow button:hover{background:var(--accent)}
.qmore{margin-top:12px}
.qmore summary{
  cursor:pointer;font:600 13px/1.4 var(--sans);color:var(--muted);
  text-decoration:underline;text-underline-offset:2px;list-style:none
}
.qmore summary::-webkit-details-marker{display:none}
.qmore summary:hover{color:var(--accent)}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px 14px;margin-top:12px}
.qgrid label{display:flex;flex-direction:column;gap:5px;font:600 12px/1.3 var(--sans);
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.qgrid input,.qgrid select{
  font:15px/1.2 var(--sans);text-transform:none;letter-spacing:0;color:var(--ink);
  padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);background:#fff;width:100%
}

/* the spread: the argument for the site, in one line, above the form */
.spread{
  margin:30px 0 0;padding:20px 22px 18px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--tint)
}
.spread-n{margin:0 0 6px;font:700 34px/1.05 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.spread-n i{font:400 20px/1 var(--sans);font-style:normal;color:var(--muted);margin:0 6px}
.spread-t{margin:0;max-width:60ch;color:var(--muted)}
.spread-t b{color:var(--ink)}
.quote{margin-top:14px}
@media (max-width:620px){ .spread-n{font-size:var(--fs-h2)} }

/* material disposal guides */
.verdict{display:flex;align-items:center;gap:14px;margin:18px 0 24px;padding:14px 18px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--soft)}
.verdict .vlabel{font:600 12px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.verdict .vval{font:700 21px/1.1 var(--sans)}
.verdict.good .vval{color:var(--good)}
.verdict.warn .vval{color:var(--amber-deep)}
.verdict.bad .vval{color:var(--warn)}
.mcta{margin:26px 0;padding:18px 20px;background:var(--tint);border-radius:var(--r);
  border-radius:var(--r);background:#fff}
.mcta p{margin:0 0 12px}

/* ---- listing on a phone -----------------------------------------------------
   The five-column table did not overflow on a 375px screen, it squeezed: every
   cell wrapped until a single company row stood 355px tall. Eighteen of them is
   6,390px of scrolling to compare a town, which is no comparison at all.
   Below 620px each row becomes a card — identity on top, the three numbers in
   one strip, the call across the bottom. */
@media (max-width:620px){
  table.listing, table.listing tbody, table.listing tr, table.listing td{display:block;width:auto}
  table.listing thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.listing{border-collapse:separate;border-spacing:0}
  table.listing tr{
    border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;margin-bottom:9px;background:#fff
  }
  table.listing tr:hover td{background:none}
  table.listing td{border:0;padding:0}

  .cell-co{margin-bottom:9px}
  .corow .logo,.corow .logolink{width:38px;height:38px;flex-basis:38px}
  a.coname{font-size:var(--fs-body)}

  /* score, price and rating share one strip instead of stacking */
  td[data-label="Score"],td[data-label="Price"],td[data-label="Google"]{
    display:inline-flex;align-items:baseline;gap:6px;margin:0 16px 8px 0
  }
  td[data-label="Score"]::before{content:"Score";font:600 10.5px/1 var(--sans);
    text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
  td[data-label="Price"]::before{content:"20 yd";font:600 10.5px/1 var(--sans);
    text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
  td[data-label="Google"]::before{content:"Google";font:600 10.5px/1 var(--sans);
    text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
  .iscore{min-width:0;padding:3px 8px;font-size:var(--fs-sm)}
  .from{font-size:var(--fs-body)}
  .psize{margin-left:3px;color:var(--muted);font-size:var(--fs-micro)}

  /* the call is the action, so it gets the full width */
  .cell-call .acts{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  .cell-call .btn.tiny{flex:1;text-align:center;padding:11px 14px;font-size:var(--fs-sm)}
  .cell-call .btn.tiny.ghost{flex:0 0 auto;padding:0}
}

/* town -> county up-link */
.countyup{margin:26px 0 0;padding:13px 16px;background:var(--tint);border-radius:var(--r);
  border-radius:var(--r);font-size:var(--fs-sm);color:var(--muted)}
.countyup a{font-weight:600}

/* ---- table that reads as a bar chart ---------------------------------------
   Markup stays a table so every figure is still extractable — the AI-retrieval
   research is consistent that tables and lists get lifted before prose — and
   the bar is drawn behind the value in CSS. No script, no canvas, no image. */
table.bars{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:var(--fs-sm)}
table.bars caption{
  text-align:left;font:600 12px/1.3 var(--sans);text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);padding-bottom:8px
}
table.bars th[scope=col]{
  text-align:left;font:600 11px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);border-bottom:1px solid var(--line);padding:0 10px 6px 0
}
table.bars th[scope=row]{
  text-align:left;font:400 15px/1.35 var(--sans);padding:7px 12px 7px 0;
  white-space:nowrap;vertical-align:middle
}
table.bars td{padding:7px 10px 7px 0;vertical-align:middle}
table.bars .barcell{position:relative;width:100%;min-width:120px}
table.bars .bar{
  display:block;height:22px;width:var(--w);border-radius:var(--r);
  background:linear-gradient(90deg,var(--accent),#4b93c4);opacity:.22
}
table.bars .barcell b{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  font:650 14px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)
}
table.bars td.muted{white-space:nowrap;font-size:var(--fs-micro)}
table.bars tr:hover .bar{opacity:.34}
@media (max-width:620px){
  table.bars th[scope=row]{max-width:38vw;white-space:normal}
  table.bars .barcell b{font-size:var(--fs-micro)}
}

/* Container row, enlarged where the drawings are the point of the page.
   scale() does not affect layout, so the boxes grew into each other and three
   containers read as one continuous shape. The gap has to cover the overflow
   the transform creates, not the untransformed width. */
.sizerow.big{gap:52px;margin:22px 0 30px;flex-wrap:wrap}
.sizerow.big .cbox{transform:scale(1.3);transform-origin:bottom center;margin-bottom:12px}
@media (max-width:620px){ .sizerow.big{gap:34px} .sizerow.big .cbox{transform:scale(1.1)} }

/* ---- price-by-size range bars ----------------------------------------------
   The bar spans p25 to p75 rather than reaching from zero, with the median
   ticked inside it. For a dumpster price the spread IS the finding — $350 to
   $485 around a $410 median tells you something a bar ending at $410 cannot. */
table.ranges{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:var(--fs-sm)}
table.ranges th[scope=col]{
  text-align:left;font:600 11px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);border-bottom:1px solid var(--line);padding:0 12px 6px 0
}
table.ranges th[scope=row]{
  text-align:left;font:650 15px/1.3 var(--sans);white-space:nowrap;padding:9px 14px 9px 0
}
table.ranges td{padding:9px 12px 9px 0;vertical-align:middle}
table.ranges .rangecell{width:60%;min-width:150px}
.rtrack{position:relative;display:block;height:20px;background:var(--soft);
  border-radius:var(--r);overflow:hidden}
.rspan{position:absolute;top:0;bottom:0;left:var(--a);width:calc(var(--b) - var(--a));
  background:linear-gradient(90deg,#8fbcd8,var(--accent));opacity:.45;border-radius:var(--r)}
.rmid{position:absolute;top:-2px;bottom:-2px;left:var(--m);width:2px;background:var(--navy)}
.rlab{display:block;margin-top:3px;font:400 12px/1.2 var(--mono);color:var(--muted)}
table.ranges .pcell{font:650 16px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.ranges td.muted{white-space:nowrap;font-size:var(--fs-micro)}
@media (max-width:620px){
  table.ranges th[scope=row]{padding-right:8px}
  table.ranges .rangecell{width:auto}
  table.ranges td.muted{display:none}
}

/* Unit coverage on town and state pages. A count plus a bar: the bar is read at a
   glance, the count is what makes it checkable. */
.unitrow{list-style:none;margin:14px 0 6px;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.unitrow a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink)}
.unitrow a:hover{border-color:var(--accent);background:var(--soft)}
.unitrow .uname{font-weight:600;font-size:var(--fs-sm)}
.unitrow .ucount{font-size:var(--fs-micro);color:var(--muted);font-variant-numeric:tabular-nums}
.unitrow .ubar{grid-column:1/-1;height:4px;background:var(--line);border-radius:var(--r);overflow:hidden}
.unitrow .ubar i{display:block;height:100%;background:var(--amber)}

/* Sizing calculator. Two independent fieldsets rather than one form, because an
   event and a job site are different questions with different legal footing. */
.calc{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:18px 0}
.calc fieldset{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 16px;margin:0}
.calc legend{font-weight:700;font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:0 6px}
.calc label{display:block;font-size:var(--fs-sm);margin:0 0 10px;font-weight:600}
.calc label.chk{font-weight:400;display:flex;gap:8px;align-items:center}
.calc input[type=number]{display:block;width:100%;margin-top:4px;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--r);font:inherit;font-variant-numeric:tabular-nums}
.calc input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.calc .out{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font-size:var(--fs-sm);line-height:1.5}
table.ratio{border-collapse:collapse;width:100%;margin:14px 0;font-variant-numeric:tabular-nums}
table.ratio caption{text-align:left;font-size:var(--fs-micro);color:var(--muted);padding-bottom:6px}
table.ratio th,table.ratio td{border-bottom:1px solid var(--line);padding:7px 10px;text-align:left;font-size:var(--fs-sm)}
table.ratio thead th{border-bottom:2px solid var(--steel);font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
dl.units dt{font-weight:700;margin-top:12px}
dl.units dd{margin:2px 0 0;color:var(--muted);font-size:var(--fs-sm)}

/* Unit evidence on a company page. The quote is the point: it lets a reader check
   our reading against the company's own words instead of trusting a badge. */
dl.unitev{margin:12px 0 6px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
dl.unitev dt{font-weight:700;font-size:var(--fs-sm);white-space:nowrap}
dl.unitev dd{margin:0;font-size:var(--fs-sm);color:var(--muted);min-width:0}
dl.unitev q{quotes:"\201C" "\201D";font-style:italic}
@media (max-width:560px){
  dl.unitev{grid-template-columns:1fr;gap:1px 0}
  dl.unitev dd{margin:0 0 9px}
}

/* The unclaimed badge doubles as the claim entry point, so it has to read as
   clickable without shouting louder than the company name beside it. */
a.badge.unclaimed{text-decoration:none;cursor:pointer}
a.badge.unclaimed:hover,a.badge.unclaimed:focus-visible{
  background:var(--amber);color:#fff;border-color:var(--amber)}
ul.ticks{list-style:none;padding:0;margin:14px 0;display:grid;gap:10px}
ul.ticks li{position:relative;padding-left:26px;font-size:var(--fs-sm);line-height:1.55}
ul.ticks li::before{content:"";position:absolute;left:4px;top:.55em;width:9px;height:5px;
  border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}

/* ---- Pricing page ------------------------------------------------------- */
/* A callout that carries the one non-obvious fact on the page. Left rule rather
   than a tinted box, so it reads as an aside and not as an advert. */
.keynote{background:var(--tint);padding:16px 20px;margin:22px 0;border-radius:var(--r)}
.keynote p{margin:0 0 8px}
.keynote p:last-child{margin:0}
.keynote.cta{background:#eef4f2}

/* Wide tables scroll inside their own box rather than pushing the page sideways. */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
table.ptable.wide{min-width:660px}
table.ptable.wide td.pcell{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}

/* The availability bar is the column no competitor can print, so it gets the
   visual weight: a measured share, drawn, with the number beside it. */
.availbar{display:inline-block;vertical-align:middle;width:64px;height:6px;
  background:var(--line);border-radius:var(--r);overflow:hidden;margin-right:7px}
.availbar i{display:block;height:100%;background:var(--amber)}
.availn{font-variant-numeric:tabular-nums;font-size:var(--fs-micro);color:var(--muted)}

.twocol{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:16px 0}
.twocol h3{margin:0 0 8px;font-size:var(--fs-sm)}
.twocol ul{margin:0;padding-left:18px}
.twocol li{margin:0 0 5px;font-size:var(--fs-sm);line-height:1.5}
.twocol .inc{border-top:2px solid var(--good);padding-top:12px}
.twocol .exc{border-top:2px solid var(--warn);padding-top:12px}

dl.factors{margin:14px 0}
dl.factors dt{font-weight:700;margin-top:13px;font-size:var(--fs-sm)}
dl.factors dd{margin:3px 0 0;color:var(--muted);font-size:var(--fs-sm);line-height:1.55}

ol.tips{margin:14px 0;padding-left:22px}
ol.tips li{margin:0 0 9px;line-height:1.55}

@media (max-width:620px){
  table.ptable.wide{min-width:0}
  table.ptable.wide thead{position:absolute;left:-9999px}
  table.ptable.wide tr{display:block;border:1px solid var(--line);border-radius:var(--r);
    padding:10px 12px;margin:0 0 10px}
  table.ptable.wide td{display:flex;justify-content:space-between;gap:14px;border:0;padding:3px 0}
  table.ptable.wide td::before{content:attr(data-label);color:var(--muted);font-size:var(--fs-micro)}
}

/* ---- Hero: full-bleed tinted band with a line-art texture ---------------- */
.hero{
  position:relative;
  margin:-24px calc(50% - 50vw) 26px;
  padding:34px max(20px, calc(50vw - 500px)) 30px;
  background:linear-gradient(180deg,#e9f3ee 0%,#f2f8f5 55%,#ffffff 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero .heropat{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.06; z-index:0; pointer-events:none;
}
.hero-in{position:relative; z-index:1}
.hero h1{margin:.35em 0 .3em}
/* the trust chip: measured proof, not a vague badge */
.trustchip{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 4px; padding:5px 13px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  font:600 12.5px/1 var(--sans); color:var(--muted); letter-spacing:.01em;
}
.trustchip .stars{color:#e8a21e; letter-spacing:1px; font-size:var(--fs-micro)}
@media (max-width:620px){
  .hero{margin-top:-16px; padding-top:24px}
}

/* ---- Homepage rhythm ----------------------------------------------------- */
/* A full-bleed tinted band breaks the page into movements. The competitor does
   this with a near-black section; a tint in the brand hue does the same work
   without the page turning into a slide deck. */
.band{
  position:relative;
  margin:34px calc(50% - 50vw);
  padding:30px max(20px, calc(50vw - 500px)) 32px;
  background:var(--soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.band > h2:first-child{margin-top:0}
.bandcta{margin:18px 0 0}

/* Use-case cards: the job, the reason, and the measured count. */
.usecards{list-style:none;margin:16px 0 0;padding:0;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.usecards a{
  display:grid;gap:5px;height:100%;grid-template-rows:auto 1fr auto;
  padding:15px 16px 13px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:var(--ink);
  transition:border-color .12s ease, transform .12s ease;
}
.usecards a:hover,.usecards a:focus-visible{border-color:var(--amber);transform:translateY(-1px)}
.usecards .uc-t{font:700 16px/1.25 var(--serif);color:var(--navy)}
.usecards .uc-d{font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.usecards .uc-n{margin-top:4px;padding-top:8px;border-top:1px solid var(--line);
  font-size:var(--fs-micro);color:var(--muted);font-variant-numeric:tabular-nums}
.usecards .uc-n b{color:var(--amber-deep);font-size:var(--fs-sm)}

/* Operator cards: logo, score, review count, unit chips. */
/* Top-operator cards. Borderless: whitespace and the house tint do the separating,
   and the rank number carries the ordering the old floating score badge implied
   without explaining. Chips drop the standard unit, since every operator has one
   and a chip every card shares differentiates nothing. */
.cocards{list-style:none;margin:18px 0 0;padding:0;
  display:grid;gap:0;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cocards a{
  position:relative;display:grid;gap:0;height:100%;padding:18px 17px 15px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);background:var(--bg);
  transition:background .13s ease;
}
.cocards a:hover,.cocards a:focus-visible{background:var(--soft)}
.cocards a:active{transform:scale(.995)}
.cocards .cc-rank{position:absolute;top:15px;right:15px;
  font:700 var(--fs-micro)/1 var(--sans);color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.cocards .cc-head{display:flex;align-items:flex-start;gap:10px;min-width:0;padding-right:20px}
.cocards .cc-head img,.cocards .cc-head .mono{
  width:34px;height:34px;flex:0 0 34px;border-radius:var(--r);object-fit:contain;
  background:var(--bg)}
.cocards .cc-name{font:700 var(--fs-body)/1.25 var(--serif);letter-spacing:-.01em;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cocards .cc-meta{margin-top:9px;font:var(--fs-sm)/1.3 var(--sans);color:var(--muted)}
.cocards .cc-row{display:flex;align-items:baseline;gap:8px;margin-top:11px}
.cocards .cc-rev{font:var(--fs-sm)/1.3 var(--sans);color:var(--steel);
  font-variant-numeric:tabular-nums}
.cocards .cc-rev b{font:700 var(--fs-lead)/1 var(--serif);color:var(--ink)}
.cocards .cc-units{margin-top:11px;font:var(--fs-sm)/1.3 var(--sans);color:var(--muted);
  font-variant-numeric:tabular-nums}
.cocards .cc-units b{color:var(--ink);font-weight:700}
.cocards .cc-foot{margin-top:auto;padding-top:13px;
  font:var(--fs-micro)/1.3 var(--sans);color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.cocards .cc-foot b{color:var(--accent);font-weight:700;font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums}
@media(max-width:980px){.cocards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.cocards{grid-template-columns:1fr}}

/* City tiles. The town is the only word that differs between these links, so it
   leads and gets the weight; the keyword stays in the anchor text underneath. */
.citytiles{list-style:none;margin:18px 0 0;padding:0;
  display:grid;gap:0;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.citytiles a{display:block;padding:15px 16px 13px;background:var(--bg);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);transition:background .13s ease}
.citytiles a:hover,.citytiles a:focus-visible{background:var(--soft)}
.citytiles b{display:block;font:700 var(--fs-lead)/1.2 var(--serif);letter-spacing:-.015em}
.citytiles span{display:block;margin-top:3px;font:var(--fs-micro)/1.3 var(--sans);
  color:var(--muted)}
.citytiles i{display:block;margin-top:9px;font:600 var(--fs-sm)/1.3 var(--sans);
  font-style:normal;color:var(--accent);font-variant-numeric:tabular-nums}
@media(max-width:980px){.citytiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.citytiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.citytiles{grid-template-columns:1fr}}

}

/* ---- State cartogram: five views, no JavaScript -------------------------- */
/* Radio inputs drive the fills through sibling selectors. The competitor filters
   a Google Maps embed client-side; this switches instantly, works with scripting
   off, and leaves all 47 anchors in the served HTML in every view. */
.mapwrap{margin:20px 0 8px}
.mapwrap .mv{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.mvtabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.mvtab{
  display:inline-block;padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;color:var(--muted);cursor:pointer;
  font:600 13px/1 var(--sans);letter-spacing:.01em;white-space:nowrap;
  transition:border-color .12s ease,color .12s ease,background .12s ease;
}
.mvtab:hover{border-color:var(--accent);color:var(--accent)}
.mapwrap .mv:focus-visible + .mvtabs .mvtab,
.mapwrap .mv:focus-visible ~ .mvtabs .mvtab{outline:none}
.mapwrap .mv:focus-visible ~ .mvtabs label[for]{}

.cartogram{margin:0;padding:0}
.cartogram svg{width:100%;height:auto;max-width:790px;display:block}
.cartogram .tile rect{transition:fill .14s ease}
.cartogram .tile:hover rect,.cartogram .tile:focus-visible rect{
  stroke:var(--steel);stroke-width:2.5;paint-order:stroke}
.cartogram .tile:focus-visible{outline:none}
.cartogram .tl-ab{font:700 17px/1 var(--sans);text-anchor:middle;letter-spacing:.03em}
.cartogram .tl-n{font:500 12.5px/1 var(--sans);text-anchor:middle;font-variant-numeric:tabular-nums;
  font-variant-numeric:tabular-nums;display:none}
.cartogram figcaption{margin-top:11px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.legend{display:flex;align-items:center;gap:3px;font-size:var(--fs-micro);color:var(--muted)}
.legend b{display:inline-block;width:28px;height:11px;border:1px solid rgba(0,0,0,.06)}
.legend b.s0{background:#eef4f1;border-radius:var(--r)}
.legend b.s1{background:#cfe4da}
.legend b.s2{background:#9ecfba}
.legend b.s3{background:#4f9e83}
.legend b.s4{background:#1c6553;border-radius:var(--r)}
.legend .lg-t{margin-left:6px}
.legend .lg-r{margin-left:0}
.legend-note{font-size:var(--fs-micro);color:var(--muted)}
.readout{display:none;background:var(--tint);padding:14px 18px;border-radius:var(--r);
  margin:16px 0 22px;font-size:var(--fs-sm);line-height:1.6}
@media (max-width:620px){
  .cartogram .tl-ab{font-size:var(--fs-lead)}
  .cartogram .tl-n{font-size:var(--fs-sm)}
  .mvtab{padding:7px 11px;font-size:var(--fs-micro)}
}

#mv-ada:checked ~ .cartogram .b-ada-0 rect{fill:#eef4f1}
#mv-ada:checked ~ .cartogram .b-ada-0 .tl-ab{fill:#12333d}
#mv-ada:checked ~ .cartogram .b-ada-0 .tl-n{fill:#5a6774}
#mv-ada:checked ~ .cartogram .b-ada-1 rect{fill:#cfe4da}
#mv-ada:checked ~ .cartogram .b-ada-1 .tl-ab{fill:#12333d}
#mv-ada:checked ~ .cartogram .b-ada-1 .tl-n{fill:#48596a}
#mv-ada:checked ~ .cartogram .b-ada-2 rect{fill:#9ecfba}
#mv-ada:checked ~ .cartogram .b-ada-2 .tl-ab{fill:#0f2b25}
#mv-ada:checked ~ .cartogram .b-ada-2 .tl-n{fill:#2c4740}
#mv-ada:checked ~ .cartogram .b-ada-3 rect{fill:#4f9e83}
#mv-ada:checked ~ .cartogram .b-ada-3 .tl-ab{fill:#ffffff}
#mv-ada:checked ~ .cartogram .b-ada-3 .tl-n{fill:rgba(255,255,255,.88)}
#mv-ada:checked ~ .cartogram .b-ada-4 rect{fill:#1c6553}
#mv-ada:checked ~ .cartogram .b-ada-4 .tl-ab{fill:#ffffff}
#mv-ada:checked ~ .cartogram .b-ada-4 .tl-n{fill:rgba(255,255,255,.88)}
#mv-trailer:checked ~ .cartogram .b-trailer-0 rect{fill:#eef4f1}
#mv-trailer:checked ~ .cartogram .b-trailer-0 .tl-ab{fill:#12333d}
#mv-trailer:checked ~ .cartogram .b-trailer-0 .tl-n{fill:#5a6774}
#mv-trailer:checked ~ .cartogram .b-trailer-1 rect{fill:#cfe4da}
#mv-trailer:checked ~ .cartogram .b-trailer-1 .tl-ab{fill:#12333d}
#mv-trailer:checked ~ .cartogram .b-trailer-1 .tl-n{fill:#48596a}
#mv-trailer:checked ~ .cartogram .b-trailer-2 rect{fill:#9ecfba}
#mv-trailer:checked ~ .cartogram .b-trailer-2 .tl-ab{fill:#0f2b25}
#mv-trailer:checked ~ .cartogram .b-trailer-2 .tl-n{fill:#2c4740}
#mv-trailer:checked ~ .cartogram .b-trailer-3 rect{fill:#4f9e83}
#mv-trailer:checked ~ .cartogram .b-trailer-3 .tl-ab{fill:#ffffff}
#mv-trailer:checked ~ .cartogram .b-trailer-3 .tl-n{fill:rgba(255,255,255,.88)}
#mv-trailer:checked ~ .cartogram .b-trailer-4 rect{fill:#1c6553}
#mv-trailer:checked ~ .cartogram .b-trailer-4 .tl-ab{fill:#ffffff}
#mv-trailer:checked ~ .cartogram .b-trailer-4 .tl-n{fill:rgba(255,255,255,.88)}
#mv-handwash:checked ~ .cartogram .b-handwash-0 rect{fill:#eef4f1}
#mv-handwash:checked ~ .cartogram .b-handwash-0 .tl-ab{fill:#12333d}
#mv-handwash:checked ~ .cartogram .b-handwash-0 .tl-n{fill:#5a6774}
#mv-handwash:checked ~ .cartogram .b-handwash-1 rect{fill:#cfe4da}
#mv-handwash:checked ~ .cartogram .b-handwash-1 .tl-ab{fill:#12333d}
#mv-handwash:checked ~ .cartogram .b-handwash-1 .tl-n{fill:#48596a}
#mv-handwash:checked ~ .cartogram .b-handwash-2 rect{fill:#9ecfba}
#mv-handwash:checked ~ .cartogram .b-handwash-2 .tl-ab{fill:#0f2b25}
#mv-handwash:checked ~ .cartogram .b-handwash-2 .tl-n{fill:#2c4740}
#mv-handwash:checked ~ .cartogram .b-handwash-3 rect{fill:#4f9e83}
#mv-handwash:checked ~ .cartogram .b-handwash-3 .tl-ab{fill:#ffffff}
#mv-handwash:checked ~ .cartogram .b-handwash-3 .tl-n{fill:rgba(255,255,255,.88)}
#mv-handwash:checked ~ .cartogram .b-handwash-4 rect{fill:#1c6553}
#mv-handwash:checked ~ .cartogram .b-handwash-4 .tl-ab{fill:#ffffff}
#mv-handwash:checked ~ .cartogram .b-handwash-4 .tl-n{fill:rgba(255,255,255,.88)}
#mv-flushing:checked ~ .cartogram .b-flushing-0 rect{fill:#eef4f1}
#mv-flushing:checked ~ .cartogram .b-flushing-0 .tl-ab{fill:#12333d}
#mv-flushing:checked ~ .cartogram .b-flushing-0 .tl-n{fill:#5a6774}
#mv-flushing:checked ~ .cartogram .b-flushing-1 rect{fill:#cfe4da}
#mv-flushing:checked ~ .cartogram .b-flushing-1 .tl-ab{fill:#12333d}
#mv-flushing:checked ~ .cartogram .b-flushing-1 .tl-n{fill:#48596a}
#mv-flushing:checked ~ .cartogram .b-flushing-2 rect{fill:#9ecfba}
#mv-flushing:checked ~ .cartogram .b-flushing-2 .tl-ab{fill:#0f2b25}
#mv-flushing:checked ~ .cartogram .b-flushing-2 .tl-n{fill:#2c4740}
#mv-flushing:checked ~ .cartogram .b-flushing-3 rect{fill:#4f9e83}
#mv-flushing:checked ~ .cartogram .b-flushing-3 .tl-ab{fill:#ffffff}
#mv-flushing:checked ~ .cartogram .b-flushing-3 .tl-n{fill:rgba(255,255,255,.88)}
#mv-flushing:checked ~ .cartogram .b-flushing-4 rect{fill:#1c6553}
#mv-flushing:checked ~ .cartogram .b-flushing-4 .tl-ab{fill:#ffffff}
#mv-flushing:checked ~ .cartogram .b-flushing-4 .tl-n{fill:rgba(255,255,255,.88)}
#mv-density:checked ~ .cartogram .b-density-0 rect{fill:#eef4f1}
#mv-density:checked ~ .cartogram .b-density-0 .tl-ab{fill:#12333d}
#mv-density:checked ~ .cartogram .b-density-0 .tl-n{fill:#5a6774}
#mv-density:checked ~ .cartogram .b-density-1 rect{fill:#cfe4da}
#mv-density:checked ~ .cartogram .b-density-1 .tl-ab{fill:#12333d}
#mv-density:checked ~ .cartogram .b-density-1 .tl-n{fill:#48596a}
#mv-density:checked ~ .cartogram .b-density-2 rect{fill:#9ecfba}
#mv-density:checked ~ .cartogram .b-density-2 .tl-ab{fill:#0f2b25}
#mv-density:checked ~ .cartogram .b-density-2 .tl-n{fill:#2c4740}
#mv-density:checked ~ .cartogram .b-density-3 rect{fill:#4f9e83}
#mv-density:checked ~ .cartogram .b-density-3 .tl-ab{fill:#ffffff}
#mv-density:checked ~ .cartogram .b-density-3 .tl-n{fill:rgba(255,255,255,.88)}
#mv-density:checked ~ .cartogram .b-density-4 rect{fill:#1c6553}
#mv-density:checked ~ .cartogram .b-density-4 .tl-ab{fill:#ffffff}
#mv-density:checked ~ .cartogram .b-density-4 .tl-n{fill:rgba(255,255,255,.88)}
#mv-ada:checked ~ .cartogram .n-ada{display:block}
#mv-trailer:checked ~ .cartogram .n-trailer{display:block}
#mv-handwash:checked ~ .cartogram .n-handwash{display:block}
#mv-flushing:checked ~ .cartogram .n-flushing{display:block}
#mv-density:checked ~ .cartogram .n-density{display:block}
#mv-ada:checked ~ .mvtabs .mt-ada{background:var(--steel);color:#fff;border-color:var(--steel)}
#mv-trailer:checked ~ .mvtabs .mt-trailer{background:var(--steel);color:#fff;border-color:var(--steel)}
#mv-handwash:checked ~ .mvtabs .mt-handwash{background:var(--steel);color:#fff;border-color:var(--steel)}
#mv-flushing:checked ~ .mvtabs .mt-flushing{background:var(--steel);color:#fff;border-color:var(--steel)}
#mv-density:checked ~ .mvtabs .mt-density{background:var(--steel);color:#fff;border-color:var(--steel)}
#mv-ada:checked ~ .r-ada{display:block}
#mv-trailer:checked ~ .r-trailer{display:block}
#mv-handwash:checked ~ .r-handwash{display:block}
#mv-flushing:checked ~ .r-flushing{display:block}
#mv-density:checked ~ .r-density{display:block}

/* Map search + detail panel. Progressive enhancement: both are hidden until the
   script un-hides them, so a no-JS visitor sees the map and tabs working and
   never a dead input. */
.mapsearch{margin:0 0 14px;max-width:420px}
.mapsearch input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);
  font:inherit;font-size:var(--fs-sm);background:#fff}
.mapsearch input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.stresult{margin:7px 0 0;font-size:var(--fs-sm);color:var(--muted);min-height:1.2em}
.cartogram .tile.hit rect{stroke:var(--amber-deep);stroke-width:3.5;paint-order:stroke}
.mapdetail{margin:14px 0 0;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;min-height:78px}
.mapdetail .md-empty{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.md-name{margin:0 0 9px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.md-name a{font:700 17px/1.2 var(--serif);color:var(--navy);text-decoration:none}
.md-name a:hover{text-decoration:underline}
.md-co{font-size:var(--fs-micro);color:var(--muted);font-variant-numeric:tabular-nums}
.md-stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.md-stats li{display:grid;gap:1px}
.md-stats b{font:700 19px/1 var(--sans);color:var(--amber-deep);font-variant-numeric:tabular-nums}
.md-stats span{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

/* ---- Pricing hero + estimator ------------------------------------------- */
.pricehero{margin-bottom:28px}
.pricehero .crumbs{margin-bottom:10px}
.pricehero h1{margin:.3em 0 .3em}

.estwrap{margin:26px 0 30px}
.est{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:14px}
.est-in{display:grid;gap:14px;grid-template-columns:2fr 1.4fr .8fr;
  padding:16px 18px;background:var(--soft);border-bottom:1px solid var(--line)}
.est-in label{display:grid;gap:5px;font:600 12.5px/1 var(--sans);
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.est-in select,.est-in input{
  padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  font:inherit;font-size:var(--fs-sm);color:var(--ink);width:100%}
.est-in select:focus-visible,.est-in input:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.est-out{display:grid;gap:7px;padding:18px}
.eo-fig{font:700 30px/1.05 var(--serif);color:var(--navy);font-variant-numeric:tabular-nums}
.eo-per{font-size:var(--fs-sm);color:var(--muted)}
.eo-note{font-size:var(--fs-sm);line-height:1.55;padding-top:9px;border-top:1px solid var(--line)}
.eo-cta{margin-top:4px}
@media (max-width:620px){
  .est-in{grid-template-columns:1fr;gap:11px;padding:14px}
  .eo-fig{font-size:var(--fs-h2)}
}

/* ---- The drawn unit set -------------------------------------------------- */
/* One shared 120x100 grid, so a trailer reads wider than a standard unit and a
   hand-wash station reads smaller. Stroke inherits colour, so the same drawing
   works on the tint, on white, and inside a link. */
.uart{display:block;color:var(--steel);opacity:.9}
.uart-md{width:104px;height:87px}
.uart-sm{width:52px;height:44px;flex:0 0 52px}

.unitcell{display:flex;align-items:center;gap:12px;text-decoration:none}
.unitcell .uart{color:var(--amber-deep);opacity:1}

.unithero{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.unithero .uart{color:var(--amber);flex:0 0 104px}
.unithero h1{margin:0}

.unitset{list-style:none;margin:18px 0 0;padding:0;
  display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.unitset{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.unitset{grid-template-columns:1fr}}
.unitset a{display:grid;gap:8px;height:100%;padding:18px 18px 16px;
  background:var(--tint);border-radius:var(--r);text-decoration:none;color:var(--ink)}
.unitset a:hover,.unitset a:focus-visible{background:#e8f1ed}
.unitset .uart{color:var(--amber-deep)}
.unitset .us-n{font:700 var(--fs-body)/1.25 var(--serif);color:var(--navy)}
.unitset .us-d{font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}

.usecards a{grid-template-rows:auto auto 1fr auto}
.usecards .uart{color:var(--amber-deep);margin-bottom:2px}
@media (max-width:620px){ .unithero .uart{flex:0 0 80px;width:80px;height:67px} }

/* ============================================================================
   MONEY PAGES — pricing, units, calculator, states.
   These carry the traffic, so they get the one real visual investment: the unit
   line drawings at display size, and the price ranges drawn on a shared axis
   instead of listed in a table. Everything obeys the spec above: no new hues,
   no shadows, the tint is still the only depth technique.
   ============================================================================ */

/* --- hero: asymmetric split, art on the right ---------------------------- */
.mhero .hero-in{max-width:var(--wrap)}
.mhero .msplit{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:34px;align-items:center}
.mhero h1{font-size:clamp(36px,5.2vw,54px);line-height:1.04;margin:.1em 0 .3em}
.mhero .lede{max-width:34em;font-size:var(--fs-lead);color:var(--steel)}
.mhero .mart{justify-self:end;color:var(--accent);opacity:.9;width:100%;max-width:300px}
.mhero .mart svg.uart{width:100%;height:auto;color:var(--accent);opacity:1;stroke-width:1.5}
@media(max-width:860px){
  .mhero .msplit{grid-template-columns:1fr;gap:18px}
  .mhero .mart{display:none}
}

/* --- figures without a box ----------------------------------------------- */
/* Border diet: whitespace first, then a rule under the number. No 4-up grid. */
.mstat{display:flex;flex-wrap:wrap;gap:0 44px;margin:26px 0 0;padding:0;border:0}
.mstat div{padding:0 0 2px}
.mstat b{display:block;font:700 clamp(24px,3vw,31px)/1 var(--serif);color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mstat span{display:block;margin-top:7px;font:600 var(--fs-micro)/1.3 var(--sans);
  color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.mstat div::after{content:"";display:block;width:26px;height:3px;margin-top:10px;
  background:var(--accent);opacity:.55}

/* --- range chart: every unit on one dollar axis --------------------------- */
/* The comparison a table cannot make. A trailer is ten times a standard unit and
   that should be visible, not arithmetic the reader has to do. */
.rchart{margin:22px 0 8px}
.rchart .rrow{display:grid;grid-template-columns:192px minmax(0,1fr);gap:16px;
  align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.rchart .rrow:first-of-type{border-top:0}
.rchart .rname{display:flex;align-items:center;gap:9px;min-width:0;
  text-decoration:none;color:var(--ink)}
.rchart .rname svg.uart{flex:0 0 40px;width:40px;height:34px;color:var(--navy);opacity:.85}
.rchart .rname b{font:600 var(--fs-sm)/1.25 var(--sans);letter-spacing:-.005em}
.rchart .rname:hover b{color:var(--accent)}
.rchart .rgtrack{position:relative;height:34px;background:var(--soft);border-radius:var(--r)}
.rchart .rbar{position:absolute;top:9px;height:16px;border-radius:var(--r);
  background:var(--navy)}
.rchart .rglab{position:absolute;top:8px;font:600 var(--fs-sm)/17px var(--sans);
  color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.rchart .raxis{position:relative;height:22px;margin-left:208px;border-top:1px solid var(--line)}
.rchart .raxis i{position:absolute;top:5px;transform:translateX(-50%);
  font:var(--fs-micro)/1 var(--sans);color:var(--muted);font-style:normal;
  font-variant-numeric:tabular-nums}
@media(max-width:700px){
  .rchart .rrow{grid-template-columns:1fr;gap:4px;padding:13px 0}
  .rchart .rgtrack{height:28px}
  .rchart .raxis{margin-left:0}
}

/* --- unit cards: the drawing is the card --------------------------------- */
.ucards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px;margin:22px 0 6px;background:var(--line)}
.ucard{display:flex;flex-direction:column;gap:0;padding:22px 20px 20px;
  background:var(--bg);text-decoration:none;color:inherit;transition:background .15s ease}
.ucard:hover{background:var(--soft)}
.ucard:active{transform:scale(.99)}
.ucard .uc-art{color:var(--accent);height:94px;margin:-2px 0 10px}
.ucard .uc-art svg.uart{width:auto;height:100%;color:var(--accent);opacity:1;stroke-width:1.9}
.ucard h3{font:700 var(--fs-lead)/1.2 var(--serif);color:var(--ink);margin:0;
  letter-spacing:-.015em}
.ucard .uc-wk{margin:12px 0 0;font:700 26px/1 var(--serif);color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ucard .uc-per{margin:6px 0 0;font:600 var(--fs-micro)/1.3 var(--sans);color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em}
.ucard .uc-mo{margin:11px 0 0;font:var(--fs-sm)/1.4 var(--sans);color:var(--steel);
  font-variant-numeric:tabular-nums}
.ucard .uc-who{margin:9px 0 0;font:var(--fs-sm)/1.45 var(--sans);color:var(--muted)}
.ucard .uc-cov{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line)}
.ucard .uc-cov span{display:block;font:600 var(--fs-micro)/1.3 var(--sans);color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px}
.ucard .uc-cov i{display:block;height:6px;border-radius:var(--r-pill);background:var(--line)}
.ucard .uc-cov i b{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}
.ucard .uc-covn{font-variant-numeric:tabular-nums;color:var(--ink)}
@media(max-width:900px){.ucards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ucards{grid-template-columns:1fr}}


/* Unit-types hub: the subject of the page is the six units, so the hero art is
   all six rather than a representative one. */
.mhero .martgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px;
  justify-self:end;width:100%;max-width:290px;color:var(--accent)}
.mhero .martgrid svg.uart{width:100%;height:auto;color:var(--accent);opacity:.85;stroke-width:2}
@media(max-width:860px){.mhero .martgrid{display:none}}

/* ============================================================================
   CLAIM CTA — the owner-facing conversion on every claimable profile.
   Tint band, one filled button, and the completeness ring doing the persuading.
   ============================================================================ */
.claimcta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
  margin:34px 0;padding:26px 28px;background:var(--soft);border-radius:var(--r)}
.claimcta .cc-eyebrow{margin:0;font:600 var(--fs-micro)/1.3 var(--sans);color:var(--accent);
  text-transform:uppercase;letter-spacing:.09em}
.claimcta h2{margin:.25em 0 .3em;font:700 var(--fs-h2)/1.18 var(--serif);color:var(--ink);
  letter-spacing:-.015em}
.claimcta .cc-lede{margin:0;font:var(--fs-body)/1.55 var(--sans);color:var(--steel);max-width:52ch}
.claimcta .cc-missing{margin:15px 0 7px;font:600 var(--fs-micro)/1.3 var(--sans);
  color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.claimcta .cc-gaps{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.claimcta .cc-gaps li{padding:5px 11px;border-radius:var(--r-pill);background:var(--bg);
  font:600 var(--fs-sm)/1.3 var(--sans);color:var(--steel)}
.claimcta .cc-act{margin:19px 0 0}
.claimcta .cc-act .btn{min-height:50px;display:inline-flex;align-items:center;padding:0 26px}
.claimcta .cc-fine{margin:11px 0 0;font:var(--fs-sm)/1.45 var(--sans);color:var(--muted)}

.claimcta .cc-score{display:flex;flex-direction:column;align-items:center;gap:8px;
  width:118px;flex:0 0 118px}
.claimcta .cc-score svg{width:100%;height:auto;transform:rotate(-90deg)}
.claimcta .cc-ring-bg{fill:none;stroke:var(--line);stroke-width:8}
.claimcta .cc-ring{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round}
.claimcta .cc-score text{fill:var(--ink);font:700 20px/1 var(--serif);
  font-variant-numeric:tabular-nums;transform:rotate(90deg);transform-origin:44px 44px}
.claimcta .cc-score span{font:600 var(--fs-micro)/1.3 var(--sans);color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em}
@media(max-width:720px){
  .claimcta{grid-template-columns:1fr;gap:18px;padding:22px 20px}
  .claimcta .cc-score{flex-direction:row;width:auto;flex:none;order:-1}
  .claimcta .cc-score svg{width:74px}
}

/* Cost-band tile map. Same-hue ramp, so the bands read as one scale. */
.cbmap{margin:24px 0 10px}
.cbmap svg{width:100%;height:auto;max-width:660px;display:block}
.cbmap .ctile rect{stroke:var(--bg);stroke-width:1.5;transition:opacity .12s ease}
.cbmap .ctile text{font:600 11px/1 var(--sans);fill:var(--ink)}
.cbmap .ctile:hover rect{opacity:.72}
.cbmap .cb-low rect{fill:#dbe9e6}
.cbmap .cb-mid rect{fill:#8fbdb5}
.cbmap .cb-high rect{fill:#2f6f68}
.cbmap .cb-high text{fill:#fff}
.cbmap figcaption{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}
.cbmap .cbkey{display:flex;align-items:center;gap:8px;font:var(--fs-sm)/1.4 var(--sans);
  color:var(--muted)}
.cbmap .cbkey b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.cbmap .cbkey i{width:15px;height:15px;border-radius:3px;flex:0 0 15px}
.cbmap .cbkey i.cb-low{background:#dbe9e6}
.cbmap .cbkey i.cb-mid{background:#8fbdb5}
.cbmap .cbkey i.cb-high{background:#2f6f68}


/* State tiles. Same grammar as the city tiles: the state leads, the two numbers
   read as figures instead of trailing the link as "27 · 11 ADA". */
.statetiles{list-style:none;margin:18px 0 0;padding:0;
  display:grid;gap:0;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.statetiles a{display:block;padding:14px 16px 12px;background:var(--bg);
  text-decoration:none;color:var(--ink);transition:background .13s ease;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.statetiles a:hover,.statetiles a:focus-visible{background:var(--soft)}
.statetiles b{display:block;font:700 var(--fs-body)/1.25 var(--serif);letter-spacing:-.01em}
.statetiles span{display:flex;gap:14px;margin-top:8px;font:var(--fs-sm)/1.3 var(--sans);
  color:var(--muted);font-variant-numeric:tabular-nums}
.statetiles span b{display:inline;font:700 var(--fs-sm)/1.3 var(--sans);color:var(--ink)}
@media(max-width:980px){.statetiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.statetiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.statetiles{grid-template-columns:1fr}}
/* Compact claim prompt for place pages. Same offer as the profile CTA, no ring. */
.claimband{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  margin:30px 0;padding:22px 24px;background:var(--soft);border-radius:var(--r)}
.claimband .cb-eyebrow{margin:0;font:600 var(--fs-micro)/1.3 var(--sans);color:var(--accent);
  text-transform:uppercase;letter-spacing:.09em}
.claimband h2{margin:.25em 0 .3em;font:700 var(--fs-h2)/1.18 var(--serif);color:var(--ink);
  letter-spacing:-.015em}
.claimband p{margin:0;font:var(--fs-body)/1.55 var(--sans);color:var(--steel);max-width:56ch}
.claimband .cb-act{margin:0}
.claimband .cb-act .btn{min-height:50px;display:inline-flex;align-items:center;
  padding:0 24px;white-space:nowrap}
@media(max-width:720px){
  .claimband{grid-template-columns:1fr;gap:16px;padding:20px}
  .claimband .cb-act .btn{width:100%;justify-content:center}
}

/* Tile search, shared by the homepage and the state pages. */
.tilesearch{margin:16px 0 0;max-width:420px}
.tilesearch input{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r);font:var(--fs-body)/1.2 var(--sans);background:var(--bg);color:var(--ink)}
.tilesearch input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;
  border-color:var(--accent)}
.ts-none{margin:14px 0 0;font:var(--fs-sm)/1.4 var(--sans);color:var(--muted)}
.tsresults{list-style:none;margin:18px 0 0;padding:0;
  display:grid;gap:0;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tsresults li.ts-none{grid-column:1/-1;margin:0;padding:14px 16px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tsresults a{display:block;padding:15px 16px 13px;background:var(--bg);
  text-decoration:none;color:var(--ink);transition:background .13s ease;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tsresults a:hover,.tsresults a:focus-visible{background:var(--soft)}
.tsresults b{display:block;font:700 var(--fs-lead)/1.2 var(--serif);letter-spacing:-.015em}
.tsresults span{display:block;margin-top:3px;font:var(--fs-micro)/1.3 var(--sans);color:var(--muted)}
.tsresults i{display:block;margin-top:9px;font:600 var(--fs-sm)/1.3 var(--sans);
  font-style:normal;color:var(--accent);font-variant-numeric:tabular-nums}
@media(max-width:980px){.tsresults{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.tsresults{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.tsresults{grid-template-columns:1fr}}