/* ==========================================================================
   Hubstake stylesheet.

   Three parts, in this order:
     1. the token block from the design bundle (design/bundle/hubstake.css).
        The designer kept our existing token NAMES, so swapping the values here
        re-skins the pages the bundle does not cover -- methodology, pricing,
        coverage, the legal pages -- without touching their markup.
     2. the legacy component styles, for those pages.
     3. the bundle's component styles.  These come last on purpose: where a
        class name appears in both (.btn, .wrap, .label, .fine), the bundle wins.
   ========================================================================== */

/* IBM Plex, self-hosted.  Nothing on the page waits on a third-party font host,
   which matters when the index is tens of thousands of pages.  Sans is a variable
   font, so one file covers every weight; Mono ships one file per weight. */
/* Inter (UI) and Inter Tight (headlines) are variable, latin-subset and self-hosted:
   the CSP is font-src 'self', and a webfont fetched from a third party would be
   blocked. IBM Plex Mono stays for figures, codes and dates -- it is the only face
   here with the tabular, unambiguous digits a price table needs. */
@font-face{font-family:"Inter";src:url("/assets/fonts/inter.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter Tight";src:url("/assets/fonts/inter-tight.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* Paper, not white. The whole surface reads as a document rather than an app
     chrome, which is the point: this is a reference you check, not a dashboard. */
  --bg:#F7F7F4;
  --surface:#FFFFFF;
  --surface-2:#F1F1ED;
  --surface-3:#E7E7E2;
  --line:#E7E7E2;
  --line-soft:#EFEFEA;

  /* Ink and steel. --navy is kept as a token name because ~200 rules reference it;
     it is now graphite, the dark band colour. */
  --navy:#111820;
  --graphite:#111820;
  --graphite-2:#1B242E;
  --ink:#111820;
  --ink-2:#3B4650;
  /* Steel. #66727D, the brief's value, is 4.92:1 on white but only 4.35:1 on the
     surface-2 table header rows, which is a WCAG AA fail for body text. Darkened
     just enough to clear 4.5 on every surface it is used on. */
  --ink-3:#5C6872;

  /* Blueprint blue carries DATA: chart series, links, icon tints, quiet states.
     It never carries a call to action. */
  --blue:#315F79;
  --blue-600:#28506A;
  --blue-700:#1F3F52;
  --blue-wash:#EAF0F4;
  --blue-ring:rgba(49,95,121,.30);
  --on-accent:#ffffff;

  /* Safety orange is the scarce one. Primary CTA, the active route underline, the
     median marker, the eyebrow tick -- and nothing else. If it is on more than a few
     per cent of the pixels, something has gone wrong. */
  /* Safety orange, the brief's value. White text on it is 3.19:1, which fails AA,
     so the brand hex is kept for MARKS -- the median line, the active underline,
     the eyebrow tick, the receipt edge -- where colour is never the only signal,
     and buttons that carry white text use --accent-strong below (5.18:1). Same
     family, same read, and the CTA is legible. */
  --accent:#F06432;
  --accent-strong:#C2410C;
  --accent-strong-600:#A83C16;
  --accent-600:#DC5424;
  --accent-700:#B8431A;
  --accent-wash:#FDEEE8;
  --accent-line:#F6C4AE;
  --accent-ring:rgba(240,100,50,.32);

  --series-1:#315F79;
  --series-2:#7FA5BA;
  --series-3:#C4D5DE;
  --median:#F06432;
  --pos:#1F6B4A;
  --neg:#A8331F;

  --ok:#1F6B4A;
  --ok-wash:#E8F1EC;
  --ok-line:#B7D5C3;
  --warn:#8A4F00;
  --warn-wash:#FBF1DF;
  --warn-line:#E3BE7A;

  /* 4-8px. No pill cards. */
  --radius:8px;
  --radius-sm:5px;
  --radius-xs:3px;
  --maxw:1360px;
  --gut:clamp(16px,4vw,40px);

  /* Almost no elevation: separation is a 1px concrete rule and a tonal step. */
  --shadow-sm:0 0 0 0 rgba(0,0,0,0);
  --shadow:0 1px 2px rgba(17,24,32,.05);
  --shadow-lg:0 2px 4px rgba(17,24,32,.05),0 14px 34px rgba(17,24,32,.10);

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- legacy components ---------- */
/* ============================================================
   Hubstake design system — light theme only, navy/blue palette
   ============================================================ */


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.2;letter-spacing:-.017em;margin:0 0 .5em}
h1{font-size:clamp(1.85rem,1.35rem+1.7vw,2.6rem);letter-spacing:-.024em}
h2{font-size:clamp(1.3rem,1.1rem+.7vw,1.6rem);letter-spacing:-.02em}
h3{font-size:1.06rem}
h4{font-size:.95rem}
p{margin:0 0 1rem}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-600);text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
small{font-size:.82rem}
ul,ol{margin:0 0 1rem;padding-left:1.25rem}
li{margin:.3rem 0}
strong{color:var(--ink);font-weight:640}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a.sr-only:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;padding:.6rem 1rem;background:var(--navy);color:#fff;border-radius:var(--radius-xs);z-index:100}

.eyebrow{
  font-size:.74rem;font-weight:670;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .5rem;
}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head .bar{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  height:62px;display:flex;align-items:center;gap:1.5rem;
}
.site-head .brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none!important}
.site-head .brand .logo{width:26px;height:26px;border-radius:7px;flex:none;display:block}
.site-head .brand .mark{font-size:1.06rem;font-weight:700;color:var(--navy);letter-spacing:-.03em}
.badge{
  font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--blue-700);background:var(--blue-wash);border:1px solid #D2E1FD;
  padding:.16rem .42rem;border-radius:5px;
}
.site-head .nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.site-head .nav a{
  color:var(--ink-2);font-size:.9rem;font-weight:520;
  padding:.45rem .7rem;border-radius:var(--radius-xs);text-decoration:none;
}
.site-head .nav a:hover{color:var(--navy);background:var(--surface-2);text-decoration:none}
.site-head .nav a[aria-current="page"]{color:var(--navy);font-weight:620;background:var(--surface-2)}
.site-head .nav .cta{
  margin-left:.4rem;background:var(--blue);color:#fff;font-weight:600;
  padding:.45rem .85rem;box-shadow:var(--shadow-sm);
}
.site-head .nav .cta:hover{background:var(--blue-600);color:#fff}
@media(max-width:720px){
  /* Scoped under .site-head like the rest of the dead header rules.  Unscoped,
     .nav{width:100%;overflow-x:auto;margin-left:0} was still hitting the live
     header and turning it into a full-width scroll strip on a phone, which put
     the account button to the left of the logo. */
  .site-head .bar{height:auto;padding-top:.65rem;padding-bottom:.65rem;flex-wrap:wrap;gap:.5rem}
  .site-head .nav{margin-left:0;width:100%;overflow-x:auto;gap:.1rem;padding-bottom:.1rem}
  .site-head .nav a{padding:.4rem .55rem;font-size:.85rem;white-space:nowrap}
  .site-head .nav .cta{margin-left:.2rem}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font:inherit;font-size:.92rem;font-weight:600;line-height:1;
  padding:.72rem 1.15rem;border-radius:var(--radius-sm);
  border:1px solid transparent;cursor:pointer;text-decoration:none!important;
  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.25)}
.btn-primary:hover{background:var(--blue-600);color:#fff}
.btn-secondary{background:var(--surface);color:var(--navy);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn-secondary:hover{border-color:#C3D2E6;background:#fff;color:var(--navy)}
.btn-ghost{background:transparent;color:var(--blue);padding-left:0;padding-right:0}
.btn-lg{padding:.85rem 1.4rem;font-size:.98rem}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.35rem;box-shadow:var(--shadow-sm);
}
.card-flush{padding:0;overflow:hidden}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* ---------- stat tiles ---------- */
.stat{padding:1.05rem 1.15rem;border-radius:var(--radius-sm);background:var(--surface)}
.stat .k{font-size:.73rem;font-weight:660;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.stat .v{font-size:1.5rem;font-weight:660;color:var(--navy);line-height:1.15}
.stat .s{font-size:.8rem;margin-top:.25rem;color:var(--ink-3)}
.statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
@media(max-width:860px){.statrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.statrow{grid-template-columns:minmax(0,1fr)}}

/* ---------- pills / chips ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:620;
  padding:.2rem .5rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink-2);white-space:nowrap;
}
.pill.s-developer_cfa{background:var(--blue-wash);border-color:#D2E1FD;color:var(--blue-700)}
.pill.s-city_contract{background:#E7ECF4;border-color:#D3DDEB;color:var(--navy)}
.pill.s-txdot{background:var(--surface-2);border-color:var(--line);color:var(--ink-3)}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:550;
  padding:.4rem .75rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);text-decoration:none!important;box-shadow:var(--shadow-sm);
}
.chip:hover{border-color:var(--blue);color:var(--blue-700);background:var(--blue-wash)}

/* ---------- search box ---------- */
.sbox{display:flex;align-items:center;gap:.5rem;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:.35rem .35rem .35rem .9rem;
  box-shadow:var(--shadow);transition:border-color .12s, box-shadow .12s}
.sbox:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-ring)}
.sbox .ico{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.sbox input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;
  font-size:.96rem;color:var(--ink);padding:.5rem 0}
.sbox input::placeholder{color:var(--ink-3)}
.sbox .btn{border-radius:999px;padding-left:1.15rem;padding-right:1.15rem}
.sbox.lg input{font-size:1.02rem;padding:.65rem 0}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.25rem 0 1rem}
.filters select{
  font:inherit;font-size:.87rem;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-xs);padding:.45rem 2rem .45rem .7rem;
  appearance:none;box-shadow:var(--shadow-sm);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' fill='none' stroke='%236B7F99' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55rem center;background-size:12px;
}
.filters select:hover{border-color:#C3D2E6}

/* ---------- item cards / result rows ---------- */
.itemcard{
  display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;text-decoration:none!important;box-shadow:var(--shadow-sm);
  transition:border-color .12s, box-shadow .12s, transform .12s;
}
.itemcard:hover{border-color:#BFD2F5;box-shadow:var(--shadow);transform:translateY(-1px)}
.itemcard .cat{font-size:.7rem;font-weight:680;letter-spacing:.075em;text-transform:uppercase;color:var(--blue-700)}
.itemcard .nm{display:block;color:var(--navy);font-weight:620;font-size:1rem;margin:.3rem 0 .55rem;line-height:1.3}
.itemcard .pv{display:block;color:var(--navy);font-weight:660;font-size:1.22rem}
.itemcard .pv small{font-size:.74rem;font-weight:500;color:var(--ink-3);font-family:var(--sans)}
.itemcard .rg{display:block;color:var(--ink-3);font-size:.8rem;margin-top:.2rem}

.results{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.results:empty{display:none}
.rtable .r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1rem;
  padding:.85rem 1.05rem;background:var(--surface);text-decoration:none!important;align-items:baseline}
.rtable .r:hover{background:var(--blue-wash)}
.rtable .r .nm{color:var(--navy);font-weight:600;font-size:.97rem;grid-column:1;line-height:1.35}
.rtable .r .med{grid-column:2;grid-row:1;text-align:right;color:var(--navy);font-weight:660;font-size:1rem;white-space:nowrap}
.rtable .r .sub{grid-column:1;grid-row:2;color:var(--ink-3);font-size:.79rem}
.rtable .r .rng{grid-column:2;grid-row:2;text-align:right;color:var(--ink-3);font-size:.79rem;white-space:nowrap}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Scoped away from the bundle's tables: a bare `thead th{position:sticky}` was
   leaking onto .obs-table and .bands. */
table:not(.obs-table):not(.bands){width:100%;border-collapse:collapse;font-size:.88rem}
table:not(.obs-table):not(.bands) thead th{
  position:sticky;top:0;background:var(--surface-2);
  font-size:.7rem;font-weight:680;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody td{padding:.6rem .7rem;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
th.n,td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
td.n strong{color:var(--navy)}
.receipt{
  display:inline-flex;align-items:center;gap:.2rem;font-size:.78rem;font-weight:600;
  color:var(--blue);background:var(--blue-wash);border:1px solid #D8E5FD;
  padding:.16rem .45rem;border-radius:var(--radius-xs);white-space:nowrap;text-decoration:none!important;
}
.receipt:hover{background:#DCE9FE;border-color:#BFD5FB}

/* ---------- charts ---------- */
.chart figcaption{margin-bottom:.6rem}
.chart-box{position:relative}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .tick{fill:var(--ink-3);font-size:11px;font-family:var(--sans)}
.chart .line{stroke:var(--blue);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:var(--blue);opacity:.07}
.chart .dot{fill:#fff;stroke:var(--blue);stroke-width:2.25}
.chart .hit{fill:transparent;cursor:pointer}
.chart .pt:hover .dot,.chart .pt:focus .dot{fill:var(--blue)}
.chart .dlabel{fill:var(--navy);font-size:11px;font-weight:640;font-family:var(--mono)}
.tip{
  position:absolute;transform:translate(-50%,-135%);pointer-events:none;
  background:var(--navy);color:#fff;font-size:.76rem;line-height:1.35;
  padding:.4rem .55rem;border-radius:var(--radius-xs);white-space:nowrap;box-shadow:var(--shadow-lg);z-index:5;
}

/* segment bars */
.seg .rows{display:flex;flex-direction:column;gap:.7rem;margin-top:.9rem}
.seg .row{display:grid;grid-template-columns:130px minmax(0,1fr) 88px 58px;gap:.6rem;align-items:center;font-size:.84rem}
.seg .lab{display:flex;align-items:center;gap:.4rem;color:var(--ink-2);font-weight:550}
.seg .swatch{width:9px;height:9px;border-radius:2px;flex:none}
.seg .track{position:relative;height:22px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.seg .bar{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.seg .rng{position:absolute;top:3px;bottom:3px;border:1.5px solid rgba(15,39,71,.32);border-radius:4px}
.seg .none{display:flex;align-items:center;height:100%;padding-left:.5rem;font-size:.74rem;color:var(--ink-3)}
.seg .val{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--navy);font-weight:620}
.seg .n{text-align:right;font-size:.76rem}
.seg .row[data-empty="true"] .val{color:var(--ink-3);font-weight:500}
@media(max-width:640px){.seg .row{grid-template-columns:110px minmax(0,1fr) 74px;}.seg .n{display:none}}

/* distribution strip */
.dist{margin-top:.25rem}
.dist .bar{position:relative;height:30px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3));border-radius:7px}
.dist .iqr{position:absolute;top:0;bottom:0;background:var(--blue-wash);border:1px solid #C7DBFC;border-radius:6px}
.dist .med{position:absolute;top:-4px;bottom:-4px;width:2.5px;background:var(--blue);border-radius:2px}
.dist .obs{position:absolute;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--navy);opacity:.42}
.dist .ends{display:flex;justify-content:space-between;margin-top:.4rem;font-size:.75rem;color:var(--ink-3);
  font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- notices ---------- */
.notice{
  background:var(--blue-wash);border:1px solid #D6E4FD;border-left:3px solid var(--blue);
  border-radius:var(--radius-sm);padding:.9rem 1.1rem;color:var(--ink-2);font-size:.9rem;margin:0;
}
.notice.warn{background:#FFF8EC;border-color:#F5E3C0;border-left-color:#C98A17}

/* ---------- breadcrumb ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.82rem;color:var(--ink-3);margin-bottom:1.1rem}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--blue)}
.crumb span[aria-current]{color:var(--ink-2);font-weight:550}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 380px at 12% -10%, #E6EFFE 0%, rgba(230,239,254,0) 62%),
    radial-gradient(760px 320px at 92% 0%, #DCEBE2 0%, rgba(220,235,226,0) 60%),
    linear-gradient(180deg,#FFFFFF 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.hero .wrap{padding-top:3.6rem;padding-bottom:3rem}
.hero h1{max-width:19ch}
.hero .lede{font-size:1.06rem;color:var(--ink-2);max-width:60ch;margin-bottom:1.6rem}
@media(max-width:640px){.hero .wrap{padding-top:2.4rem;padding-bottom:2.2rem}}

.section{padding:3.2rem 0}
.section-tight{padding:2.2rem 0}
.section-head{margin-bottom:1.5rem}
.section-head p{max-width:64ch;margin:0}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;align-items:start}
@media(max-width:940px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{position:relative;display:flex;flex-direction:column;height:100%}
.plan.featured{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue), var(--shadow)}
.plan .tag{position:absolute;top:-11px;left:1.35rem;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--blue);color:#fff;padding:.22rem .55rem;border-radius:5px}
.plan h3{margin-bottom:.2rem}
.plan .price{font-size:2rem;font-weight:680;color:var(--navy);line-height:1.1;margin:.5rem 0 .1rem}
.plan .per{font-size:.82rem;color:var(--ink-3);margin-bottom:.9rem}
.plan .desc{font-size:.88rem;color:var(--ink-2);min-height:2.6em;margin-bottom:1rem}
.plan ul{list-style:none;padding:0;margin:0 0 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.plan li{display:flex;gap:.55rem;font-size:.88rem;color:var(--ink-2);margin:0;line-height:1.45}
.plan li svg{width:15px;height:15px;flex:none;margin-top:.22rem;stroke:var(--blue);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{margin-top:auto;width:100%}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1rem 2rem 1rem 0;position:relative;
  color:var(--navy);font-weight:600;font-size:.97rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.35rem;width:9px;height:9px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .15s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{margin:0 0 1rem;color:var(--ink-2);font-size:.92rem;max-width:72ch}

/* ---------- prose (legal + methodology) ---------- */
.prose h2{margin-top:2.4rem;padding-top:0}
.prose h3{margin-top:1.6rem;color:var(--navy)}
.prose p,.prose li{color:var(--ink-2)}
.prose .lead{font-size:1.04rem;color:var(--ink-2);max-width:64ch}
.prose ul{padding-left:1.15rem}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;box-shadow:var(--shadow-sm)}
.toc ol{margin:0;padding-left:1.15rem;font-size:.9rem}
.toc li{margin:.3rem 0}

/* ---------- CTA band ---------- */
.cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;
  background:linear-gradient(135deg,#14181B 0%,#25332C 100%);
  border:0;color:#DDE7F5;padding:1.6rem 1.8rem;border-radius:var(--radius);box-shadow:var(--shadow);
}
.cta h3{color:#fff;margin-bottom:.3rem}
.cta p{color:#B9CBE2;margin:0;font-size:.92rem}
.cta .btn-primary{background:#fff;color:var(--navy)}
.cta .btn-primary:hover{background:#DCEBE2;color:var(--navy)}

/* ---------- footer ---------- */
.site-foot{background:var(--surface);border-top:1px solid var(--line);margin-top:4rem;padding:2.8rem 0 2.2rem}
.site-foot .cols{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:1.8rem}
@media(max-width:860px){.site-foot .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}}
.site-foot h4{font-size:.73rem;font-weight:680;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.7rem}
.site-foot a{display:block;color:var(--ink-2);font-size:.88rem;padding:.17rem 0;text-decoration:none}
.site-foot a:hover{color:var(--blue)}
.site-foot .about p{font-size:.85rem;color:var(--ink-3);margin:.6rem 0 0;max-width:34ch}
.foot-legal{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line-soft);
  font-size:.81rem;color:var(--ink-3);max-width:80ch}
.foot-legal a{display:inline}

/* footer brand must stay inline even though footer links are block */
.site-foot .brand{display:inline-flex;align-items:center;gap:.5rem}
.site-foot .brand .mark{color:var(--navy)}

/* hero split layout + sample receipt card */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2.6rem;align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:2rem}.hero-aside{display:none}}
.samp{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden}
.samp .top{padding:1rem 1.15rem;border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
.samp .top .nm{color:var(--navy);font-weight:640;font-size:1rem;margin:.2rem 0 0}
.samp .mid{padding:1.05rem 1.15rem;display:flex;align-items:baseline;gap:.5rem;
  border-bottom:1px solid var(--line-soft)}
.samp .mid .big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.75rem;
  font-weight:660;color:var(--navy);letter-spacing:-.03em}
.samp .mid .u{font-size:.82rem;color:var(--ink-3)}
.samp dl{margin:0;padding:.9rem 1.15rem;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.45rem .9rem;font-size:.82rem}
.samp dt{color:var(--ink-3);white-space:nowrap}
.samp dd{margin:0;color:var(--ink-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.samp .foot{padding:.85rem 1.15rem;border-top:1px solid var(--line-soft);display:flex;
  align-items:center;justify-content:space-between;gap:.75rem;background:var(--surface-2)}
.samp .foot span{font-size:.78rem;color:var(--ink-3)}
.tip strong{color:#fff;font-weight:680}
/* readable measure for long-form prose; tables and cards stay full width */
.prose > p,.prose > ul,.prose > ol,.prose > h2,.prose > h3,.prose > .lead{max-width:74ch}

/* ============================================================
   Round 2 components
   ============================================================ */

/* ---------- header: split nav ---------- */
.site-head .bar{gap:1rem}
.site-head .nav-main{display:flex;align-items:center;gap:.15rem;margin-left:1.25rem}
.site-head .nav-aux{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.site-head .nav-main a{color:var(--ink-2);font-size:.9rem;font-weight:520;padding:.45rem .7rem;
  border-radius:var(--radius-xs);text-decoration:none}
.site-head .nav-main a:hover{color:var(--navy);background:var(--surface-2);text-decoration:none}
.site-head .nav-main a[aria-current="page"]{color:var(--navy);font-weight:620;background:var(--surface-2)}
.site-head .nav-signin{color:var(--ink-2);font-size:.9rem;font-weight:550;text-decoration:none;padding:.45rem .4rem}
.site-head .nav-signin:hover{color:var(--navy);text-decoration:none}
.site-head .nav-cta{background:var(--blue);color:#fff!important;font-weight:600;font-size:.89rem;
  padding:.5rem .95rem;border-radius:var(--radius-sm);text-decoration:none!important;
  box-shadow:0 1px 2px rgba(37,99,235,.25);white-space:nowrap}
.site-head .nav-cta:hover{background:var(--blue-600)}
@media(max-width:860px){
  .site-head .bar{height:auto;padding-top:.6rem;padding-bottom:.6rem;flex-wrap:wrap;row-gap:.5rem}
  .nav-main{order:3;width:100%;margin-left:0;overflow-x:auto;gap:.1rem}
  .nav-main a{white-space:nowrap;padding:.4rem .55rem;font-size:.85rem}
  .nav-aux{margin-left:auto}
}

/* ---------- numbered steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.4rem 1.35rem;box-shadow:var(--shadow-sm)}
.step .no{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.02em;
  color:var(--blue-700);background:var(--blue-wash);border:1px solid #D2E1FD;
  width:34px;height:26px;border-radius:5px;margin-bottom:.85rem}
.step h3{font-size:1.05rem;margin-bottom:.4rem}
.step p{font-size:.9rem;color:var(--ink-2);margin:0}

/* ---------- audience cards ---------- */
.aud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media(max-width:1000px){.aud{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.aud{grid-template-columns:minmax(0,1fr)}}
.aud .card{display:flex;flex-direction:column}
.aud .ic{width:34px;height:34px;border-radius:8px;background:var(--blue-wash);
  border:1px solid #D2E1FD;display:flex;align-items:center;justify-content:center;margin-bottom:.85rem}
.aud .ic svg{width:17px;height:17px;stroke:var(--blue-700);stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.aud h3{font-size:1rem;margin-bottom:.35rem}
.aud p{font-size:.88rem;color:var(--ink-2);margin:0}

/* ---------- search layout ---------- */
.search-layout{display:grid;grid-template-columns:246px minmax(0,1fr);gap:2rem;align-items:start}
@media(max-width:940px){.search-layout{grid-template-columns:minmax(0,1fr);gap:1.2rem}}
.fside{position:sticky;top:78px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.1rem 1.15rem;box-shadow:var(--shadow-sm)}
@media(max-width:940px){.fside{position:static}}
.fside .fhead{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  padding-bottom:.8rem;margin-bottom:.9rem;border-bottom:1px solid var(--line-soft)}
.fside .fhead h2{font-size:.84rem;font-weight:680;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:0}
.fclear{background:none;border:0;padding:0;font:inherit;font-size:.82rem;color:var(--blue);
  cursor:pointer;font-weight:550}
.fclear:hover{text-decoration:underline}
.fclear[disabled]{color:var(--ink-3);cursor:default;text-decoration:none}
.fgroup{margin-bottom:1.1rem}
.fgroup:last-child{margin-bottom:0}
.fgroup > h3{font-size:.78rem;font-weight:660;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .55rem}
.fopt{display:flex;align-items:center;gap:.5rem;font-size:.87rem;color:var(--ink-2);
  padding:.22rem 0;cursor:pointer;line-height:1.35}
.fopt input{accent-color:var(--blue);width:15px;height:15px;flex:none;margin:0;cursor:pointer}
.fopt .c{margin-left:auto;font-size:.76rem;color:var(--ink-3);font-family:var(--mono)}
.fopt:hover{color:var(--navy)}
.fside select{width:100%}

.rhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem;margin-bottom:.9rem}
.rhead .rcount{font-size:.92rem;color:var(--ink-2)}
.rhead .rcount strong{color:var(--navy);font-weight:660}
.rsort{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--ink-3)}

/* ---------- results table ---------- */
.rtable{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.rtable thead th{position:static;background:var(--surface-2);cursor:default}
.rtable tbody tr{cursor:pointer}
.rtable tbody tr:hover{background:var(--blue-wash)}
.rtable tbody tr:focus-within{background:var(--blue-wash)}
.rtable td{padding:.7rem .85rem;vertical-align:middle}
.rtable th{padding:.6rem .85rem}
.rtable .it a{color:var(--navy);font-weight:600;text-decoration:none}
.rtable tbody tr:hover .it a{color:var(--blue-700)}
.rtable .sub{display:block;color:var(--ink-3);font-size:.76rem;font-weight:400;margin-top:.1rem}
.rtable .obs-cell{white-space:nowrap}
.depth{display:inline-block;width:38px;height:5px;border-radius:3px;background:var(--surface-3);
  margin-left:.45rem;vertical-align:middle;position:relative;overflow:hidden}
.depth i{position:absolute;left:0;top:0;bottom:0;background:var(--blue);border-radius:3px}
@media(max-width:720px){
  .rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
  .rtable thead{display:none}
  .rtable{border:0;background:transparent;box-shadow:none;overflow:visible}
  .rtable tbody tr{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:.7rem;padding:.9rem 1rem}
  .rtable td{padding:.2rem 0;border:0;display:flex;justify-content:space-between;gap:1rem;
    align-items:baseline;text-align:right}
  .rtable td.it{display:block;text-align:left;margin-bottom:.5rem}
  .rtable td::before{content:attr(data-l);color:var(--ink-3);font-size:.76rem;
    font-weight:620;letter-spacing:.05em;text-transform:uppercase;text-align:left;flex:none}
  .rtable td.it::before{display:none}
}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);margin-bottom:1.3rem;
  overflow-x:auto}
.tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  font:inherit;font-size:.93rem;font-weight:570;color:var(--ink-3);cursor:pointer;
  padding:.65rem .9rem;margin-bottom:-1px;white-space:nowrap;border-radius:var(--radius-xs) var(--radius-xs) 0 0}
.tab:hover{color:var(--navy);background:var(--surface-2)}
.tab[aria-selected="true"]{color:var(--blue-700);border-bottom-color:var(--blue);font-weight:640}
.tab .n{font-family:var(--mono);font-size:.76rem;color:var(--ink-3);margin-left:.35rem}
.tab[aria-selected="true"] .n{color:var(--blue-700)}
.tabpanel[hidden]{display:none}

/* ---------- sortable table headers ---------- */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--navy)}
th.sortable .ar{opacity:0;margin-left:.25rem;font-size:.7rem}
th.sortable[aria-sort="ascending"] .ar,th.sortable[aria-sort="descending"] .ar{opacity:1;color:var(--blue)}
th.sortable[aria-sort="descending"] .ar{display:inline-block;transform:rotate(180deg)}

/* ---------- source drawer ---------- */
.drawer-scrim{position:fixed;inset:0;background:rgba(15,39,71,.38);opacity:0;pointer-events:none;
  transition:opacity .18s ease;z-index:80}
.drawer-scrim[data-open]{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,92vw);background:var(--surface);
  border-left:1px solid var(--line);box-shadow:-18px 0 48px -24px rgba(15,39,71,.4);
  transform:translateX(100%);transition:transform .22s cubic-bezier(.3,.8,.4,1);z-index:81;
  display:flex;flex-direction:column;overflow:hidden}
.drawer[data-open]{transform:none}
.drawer .dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.3rem;border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
.drawer .dhead h3{margin:0;font-size:1.02rem}
.drawer .dhead .eyebrow{margin:0 0 .2rem}
.dclose{appearance:none;background:none;border:1px solid var(--line);border-radius:var(--radius-xs);
  width:30px;height:30px;flex:none;cursor:pointer;color:var(--ink-2);font-size:1.1rem;line-height:1;
  display:flex;align-items:center;justify-content:center}
.dclose:hover{background:var(--surface);color:var(--navy);border-color:#C3D2E6}
.drawer .dbody{padding:1.2rem 1.3rem;overflow-y:auto;flex:1}
.drawer dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem 1rem;font-size:.88rem}
.drawer dt{color:var(--ink-3);white-space:nowrap}
.drawer dd{margin:0;color:var(--ink-2);text-align:right;overflow-wrap:anywhere}
.drawer dd strong{color:var(--navy)}
.drawer .dfoot{padding:1.1rem 1.3rem;border-top:1px solid var(--line-soft);background:var(--surface-2)}
.drawer .dfoot .btn{width:100%}
.drawer .printed{margin-top:1.2rem;padding:.8rem .9rem;background:var(--surface-2);
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);font-family:var(--mono);
  font-size:.82rem;color:var(--ink-2);overflow-wrap:anywhere}

/* ---------- histogram ---------- */
.hist{width:100%;height:auto;display:block;overflow:visible}
.hist .bar{fill:var(--blue);opacity:.82}
.hist .bar:hover{opacity:1}
.hist .bar.out{fill:var(--series-3);opacity:.75}
.hist .axis{stroke:var(--line);stroke-width:1}
.hist .tick{fill:var(--ink-3);font-size:11px;font-family:var(--sans)}
.hist .medline{stroke:var(--navy);stroke-width:2;stroke-dasharray:4 3}
.hist .medlab{fill:var(--navy);font-size:11px;font-weight:660;font-family:var(--mono)}
.legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.9rem;font-size:.79rem;color:var(--ink-3)}
.legend span{display:inline-flex;align-items:center;gap:.4rem}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* ---------- comparison table ---------- */
.cmp{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.cmp th,.cmp td{padding:.72rem .9rem;border-bottom:1px solid var(--line-soft);font-size:.88rem}
.cmp thead th{background:var(--surface-2);color:var(--ink-3);font-size:.72rem;font-weight:680;
  letter-spacing:.07em;text-transform:uppercase;text-align:center;white-space:nowrap}
.cmp thead th:first-child{text-align:left}
.cmp tbody th{text-align:left;font-weight:550;color:var(--ink-2)}
.cmp td{text-align:center;color:var(--ink-2)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp .yes{color:var(--blue);font-weight:700}
.cmp .no{color:var(--ink-3)}
.cmp .feat{background:#F7FAFF}
.cmp caption{caption-side:top;text-align:left;padding:0 0 .9rem;color:var(--ink-3);font-size:.85rem}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.2rem;
  align-items:start}
@media(max-width:920px){.contact-grid{grid-template-columns:minmax(0,1fr);gap:1.6rem}}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.83rem;font-weight:600;color:var(--navy);margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.92rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem .75rem;
  box-shadow:var(--shadow-sm);transition:border-color .12s, box-shadow .12s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-ring)}
.field .hint{font-size:.78rem;color:var(--ink-3);margin:.3rem 0 0}
.emailbox{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;background:var(--blue-wash);
  border:1px solid #D6E4FD;border-radius:var(--radius);padding:1rem 1.15rem}
.emailbox a{font-weight:640;font-size:1.02rem}

/* ---------- legal layout ---------- */
.legal-grid{display:grid;grid-template-columns:216px minmax(0,1fr);gap:2.4rem;align-items:start}
@media(max-width:900px){.legal-grid{grid-template-columns:minmax(0,1fr);gap:1.4rem}}
.legal-nav{position:sticky;top:78px}
@media(max-width:900px){.legal-nav{position:static;border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem 1.1rem;background:var(--surface)}}
.legal-nav h4{font-size:.73rem;font-weight:680;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.6rem}
.legal-nav a{display:block;font-size:.86rem;color:var(--ink-2);padding:.3rem 0 .3rem .7rem;
  border-left:2px solid var(--line-soft);text-decoration:none;line-height:1.4}
.legal-nav a:hover{color:var(--blue);border-left-color:var(--blue)}
.legal-nav .sep{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line-soft)}
.legal-body{max-width:800px}
.legal-body > *{max-width:100%}
.legal-body h2{scroll-margin-top:86px}
.updated{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--ink-3);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.3rem .75rem}

/* ---------- coverage ---------- */
.covbars{display:flex;flex-direction:column;gap:.75rem}
.covrow{display:grid;grid-template-columns:190px minmax(0,1fr) 92px;gap:.8rem;align-items:center;
  font-size:.87rem}
@media(max-width:620px){.covrow{grid-template-columns:130px minmax(0,1fr) 72px}}
.covrow .lab{color:var(--ink-2);font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.covrow .track{height:20px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.covrow .fill{height:100%;background:var(--blue);border-radius:5px}
.covrow .fill.alt{background:var(--navy)}
.covrow .v{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--navy);
  font-weight:620}

/* select styling applies everywhere, not just inside .filters */
.rsort select,.fside select,.field select{
  font:inherit;font-size:.87rem;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-xs);padding:.45rem 2rem .45rem .7rem;
  appearance:none;box-shadow:var(--shadow-sm);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' fill='none' stroke='%236B7F99' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55rem center;background-size:12px;
}
.field select{font-size:.92rem;padding:.6rem 2rem .6rem .75rem;border-radius:var(--radius-sm)}
.rsort select:hover,.fside select:hover{border-color:#C3D2E6}

/* keep money columns on one line */
.rtable td.n,.rtable th.n{white-space:nowrap}
/* long / mis-parsed category names must not blow out the sidebar */
.fopt > span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fopt{min-width:0}

/* price distribution: chart + spread summary */
.distgrid{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:1.6rem;align-items:start;
  margin-top:.8rem}
@media(max-width:780px){.distgrid{grid-template-columns:minmax(0,1fr)}}
.spread{border-left:1px solid var(--line-soft);padding-left:1.3rem}
@media(max-width:780px){.spread{border-left:0;border-top:1px solid var(--line-soft);
  padding-left:0;padding-top:1rem}}
.spread dl{margin:.7rem 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem .8rem;
  font-size:.85rem}
.spread dt{color:var(--ink-3)}
.spread dd{margin:0;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--navy);font-weight:600}

/* collapsible filter panel */
.fside details > summary{list-style:none;cursor:default}
.fside details > summary::-webkit-details-marker{display:none}
.fside .fhead{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding-bottom:.8rem;margin-bottom:.9rem;border-bottom:1px solid var(--line-soft)}
.fside .fclear{white-space:nowrap}
.fgroup-scroll{max-height:none}
@media(max-width:940px){
  .fside details > summary{cursor:pointer;position:relative;padding-right:1.6rem}
  .fside details > summary::after{content:"";position:absolute;right:.2rem;top:.35rem;width:9px;
    height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
    transform:rotate(45deg);transition:transform .15s ease}
  .fside details[open] > summary::after{transform:rotate(-135deg);top:.6rem}
  .fside details:not([open]) > summary .fhead{margin-bottom:0;padding-bottom:0;border-bottom:0}
  .fgroup-scroll{max-height:220px;overflow-y:auto;padding-right:.3rem}
}

/* collapsed filter summary should not keep its divider */
.fside details:not([open]) > summary.fhead{margin-bottom:0;padding-bottom:0;border-bottom:0}
/* keep brand and the auth actions on one row on narrow phones */
@media(max-width:520px){
  .site-head .brand .badge{display:none}
  .site-head .bar{gap:.5rem}
  .nav-cta{padding:.45rem .8rem;font-size:.85rem}
}

/* coverage status pills */
.pill.st-active{background:#E4F4EC;border-color:#C6E7D6;color:#0F7A5A}
.pill.st-limited{background:#FFF6E5;border-color:#F3E1BC;color:#9A6206}
.pill.st-planned{background:var(--surface-2);border-color:var(--line);color:var(--ink-3)}

/* fourth data series: FDOT */
:root{--series-4:#0E7C86}
.pill.s-fdot{background:#E3F4F5;border-color:#C2E4E7;color:#0B626A}

/* ============================================================
   Round 3 — mockup redesign
   ============================================================ */
/* This block used to redefine --maxw, --gut and the semantic colours after the
   token block, quietly overriding them: every page came out 1280px wide with a
   28px gutter instead of the bundle's 1240/40.  Only the tokens the bundle does
   not define survive here. */
:root{
  --maxw-wide:1420px;
  --foot:#132038;
  --foot-2:#1b2c4a;
}
.wrap.wide{max-width:var(--maxw-wide)}
@media(min-width:1100px){
  h1{font-size:clamp(2.1rem,1.3rem+2.4vw,3.15rem);letter-spacing:-.032em;font-weight:700}
  h2{font-size:clamp(1.4rem,1.05rem+1vw,1.85rem);letter-spacing:-.024em;font-weight:680}
}
.accent{color:var(--blue)}

/* ---------- header (redesign) ---------- */
.site-head{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-head .bar{max-width:var(--maxw-wide);height:68px;gap:1rem}
.site-head .brand .logo{width:28px;height:28px}
.site-head .brand .mark{font-size:1.16rem;letter-spacing:-.035em}
.site-head .brand .badge{
  font-size:.66rem;letter-spacing:.06em;border-radius:999px;padding:.2rem .55rem;margin-left:.15rem;
}
.site-head .nav-main{
  margin:0 auto;display:flex;align-items:center;gap:.4rem;align-self:stretch;
}
.site-head .nav-main > a,.navdrop > button{
  position:relative;display:inline-flex;align-items:center;gap:.3rem;
  font:inherit;font-size:.93rem;font-weight:530;color:var(--ink-2);
  background:none;border:0;cursor:pointer;padding:.5rem .8rem;border-radius:var(--radius-xs);
}
.site-head .nav-main > a:hover,.navdrop > button:hover{color:var(--navy);background:var(--surface-2);text-decoration:none}
.site-head .nav-main > a[aria-current="page"]{color:var(--blue);font-weight:640;background:none}
.site-head .nav-main > a[aria-current="page"]::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:-23px;height:2px;background:var(--blue);
}
.navdrop{position:relative;display:inline-flex}
.navdrop > button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.navdrop:hover > button svg,.navdrop:focus-within > button svg{transform:rotate(180deg)}
.navdrop .menu{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);
  min-width:230px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.45rem;
  opacity:0;visibility:hidden;transition:opacity .13s,transform .13s,visibility .13s;z-index:60;
}
.navdrop:hover .menu,.navdrop:focus-within .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.navdrop .menu a{
  display:block;padding:.5rem .65rem;border-radius:var(--radius-xs);
  font-size:.89rem;font-weight:520;color:var(--ink-2);text-decoration:none;
}
.navdrop .menu a:hover{background:var(--surface-2);color:var(--navy)}
.navdrop .menu a small{display:block;font-size:.76rem;color:var(--ink-3);font-weight:450;margin-top:.1rem}
.site-head .nav-aux{margin-left:0;gap:.7rem}
.headsearch{position:relative;display:none}
@media(min-width:1180px){.headsearch{display:block}}
.headsearch input{
  width:270px;height:38px;padding:0 .8rem 0 2.2rem;font:inherit;font-size:.87rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;color:var(--ink);
}
.headsearch input::placeholder{color:var(--ink-3)}
.headsearch input:focus{outline:none;background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-ring)}
.headsearch svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);
  width:15px;height:15px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.site-head .nav-cta{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.05rem;border-radius:var(--radius-sm)}
.site-head .nav-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1000px){
  .nav-main{margin:0;order:3;width:100%;overflow-x:auto;gap:.1rem;padding-bottom:.15rem}
  .nav-main > a[aria-current="page"]::after{display:none}
  .navdrop .menu{left:0;transform:none}
  .navdrop:hover .menu,.navdrop:focus-within .menu{transform:none}
}

/* ---------- footer (dark) ---------- */
.site-foot{background:var(--foot);border-top:0;color:#AFC2DC;padding:3.2rem 0 2rem}
.site-foot .wrap{max-width:var(--maxw-wide)}
.site-foot .cols{grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:2rem}
.site-foot h4{color:#fff;opacity:.62}
.site-foot a{color:#AFC2DC}
.site-foot a:hover{color:#fff}
.site-foot .brand .mark{color:#fff}
.site-foot .about p{color:#8FA6C5}
.foot-legal{border-top:1px solid rgba(255,255,255,.12);color:#7F97B8;max-width:92ch}
.foot-legal a{color:#AFC2DC;text-decoration:underline;text-underline-offset:2px}
.foot-legal a:hover{color:#fff}
.foot-legal{max-width:none}
.foot-legal > span{display:block;max-width:92ch}

/* ---------- hero (redesign) ---------- */
.hero-x{background:linear-gradient(180deg,#F2F6FD 0%,var(--bg) 62%);padding:3.4rem 0 3.6rem;
  border-bottom:1px solid var(--line-soft)}
.hero-x .hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:3.2rem;align-items:start}
@media(max-width:1060px){.hero-x .hero-grid{grid-template-columns:minmax(0,1fr);gap:2.4rem}}
.kicker{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1rem}
.hero-copy h1{margin:0 0 1.1rem;max-width:14ch}
.hero-copy .lede{font-size:1.05rem;line-height:1.62;color:var(--ink-2);max-width:56ch;margin:0 0 1.7rem}
.sbox.xl{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:.45rem .45rem .45rem 1rem;box-shadow:var(--shadow);max-width:680px}
.sbox.xl .ico{width:19px;height:19px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.sbox.xl input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:.97rem;
  color:var(--ink);height:44px;outline:none}
.sbox.xl input::placeholder{color:var(--ink-3)}
.sbox.xl .btn{height:44px;padding:0 1.15rem;border-radius:9px;gap:.45rem;white-space:nowrap}
.sbox.xl .btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.trythis{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:1.05rem 0 0;
  font-size:.85rem;color:var(--ink-3)}
.trythis .chip{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.3rem .75rem;font-size:.82rem;color:var(--ink-2);text-decoration:none;font-weight:520}
.trythis .chip:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;margin-top:2.2rem;
  padding-top:1.7rem;border-top:1px solid var(--line)}
@media(max-width:760px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem .4rem}}
.tile{display:flex;align-items:center;gap:.7rem;padding-right:.6rem;border-right:1px solid var(--line-soft)}
.tile:last-child{border-right:0}
@media(max-width:760px){.tile:nth-child(2n){border-right:0}}
.tile .ti svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9;display:block}
.tile .tv{display:block;font-size:1.28rem;font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1.15}
.tile .tl{display:block;font-size:.78rem;color:var(--ink-3);margin-top:.1rem}

/* example-item card */
.exitem{background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:1.35rem 1.45rem 1.1rem}
.ex-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.55rem}
.ex-top .eyebrow{margin:0}
.ex-top a{font-size:.83rem;font-weight:580;display:inline-flex;align-items:center;gap:.25rem}
.ex-top a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ex-name{font-size:1.24rem;margin:0 0 .3rem;letter-spacing:-.022em}
.ex-spec{font-size:.85rem;color:var(--ink-3);margin:0 0 1rem}
.ex-spec .sep{opacity:.5;margin:0 .1rem}
.ex-price{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.4rem}
.ex-price .big{font-size:2.25rem;font-weight:700;color:var(--navy);letter-spacing:-.035em;line-height:1}
.ex-price .u{font-size:1.02rem;color:var(--ink-3);margin-left:.35rem;font-weight:520}
.ex-cap{font-size:.8rem;color:var(--ink-3);margin:.45rem 0 0}
.verified{display:inline-flex;align-items:flex-start;gap:.45rem;background:var(--ok-wash);
  border:1px solid var(--ok-line);color:var(--ok);border-radius:9px;padding:.5rem .7rem;
  font-size:.78rem;font-weight:600;line-height:1.35;white-space:nowrap}
.verified svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;margin-top:.05rem}
.ex-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:center;
  padding:.9rem 0 .5rem;border-top:1px solid var(--line-soft);margin-top:.9rem}
@media(max-width:520px){.ex-body{grid-template-columns:minmax(0,1fr)}}
.minihist{width:100%;height:auto;display:block;overflow:visible}
.ex-tbl{border-collapse:collapse;font-size:.81rem;border-left:1px solid var(--line-soft);padding-left:1rem}
.ex-tbl th{text-align:left;font-weight:480;color:var(--ink-3);padding:.24rem 1.1rem .24rem 1rem;white-space:nowrap}
.ex-tbl td{text-align:right;font-weight:640;color:var(--navy);padding:.24rem 0;white-space:nowrap}
.ex-src{display:flex;align-items:center;gap:.7rem;background:var(--surface-2);
  border-radius:10px;padding:.7rem .85rem;margin-top:.4rem;text-decoration:none!important}
.ex-src:hover{background:var(--blue-wash)}
.ex-src > svg:first-child{width:20px;height:20px;flex:none;fill:none;stroke:var(--blue);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ex-src span{flex:1;min-width:0}
.ex-src strong{display:block;font-size:.87rem;color:var(--navy);font-weight:620}
.ex-src small{display:block;font-size:.77rem;color:var(--ink-3);margin-top:.05rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-src > svg:last-child{width:15px;height:15px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- bands with a split heading ---------- */
.band{padding:3.2rem 0;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.band.alt{background:var(--bg)}
.split-head{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,2.28fr);gap:2.6rem;align-items:start}
@media(max-width:940px){.split-head{grid-template-columns:minmax(0,1fr);gap:1.6rem}}
.split-head h2{margin:0;letter-spacing:-.028em}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
@media(max-width:840px){.how{grid-template-columns:minmax(0,1fr);gap:1.4rem}}
.how-step{display:flex;gap:.85rem;padding:0 1.6rem;border-left:1px solid var(--line-soft)}
.how-step:first-child{padding-left:0;border-left:0}
@media(max-width:840px){.how-step{padding:0;border-left:0}}
.how-step .no{flex:none;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;
  font-size:.85rem;font-weight:700;display:grid;place-items:center;margin-top:.05rem}
.how-step h3{font-size:1rem;margin:0 0 .3rem}
.how-step p{font-size:.88rem;color:var(--ink-2);margin:0}
.aud4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
@media(max-width:1040px){.aud4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.aud4{grid-template-columns:minmax(0,1fr)}}
.audcard{position:relative;display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.1rem 1.1rem 1.9rem;text-decoration:none!important;
  box-shadow:var(--shadow-sm);transition:border-color .13s,box-shadow .13s,transform .13s}
.audcard:hover{border-color:#C6D8F8;box-shadow:var(--shadow);transform:translateY(-1px)}
.audcard .ic svg{width:22px;height:22px;fill:none;stroke:var(--blue);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:.7rem}
.audcard h3{font-size:.99rem;margin:0 0 .35rem}
.audcard p{font-size:.85rem;color:var(--ink-2);margin:0}
.audcard .go{position:absolute;right:1rem;bottom:.9rem}
.audcard .go svg{width:15px;height:15px;fill:none;stroke:var(--ink-3);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.audcard:hover .go svg{stroke:var(--blue)}

/* ---------- trace band ---------- */
.trace{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) minmax(0,1fr);
  gap:2.4rem;align-items:center}
@media(max-width:1100px){.trace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.stack{display:none}}
@media(max-width:760px){.trace{grid-template-columns:minmax(0,1fr)}}
.trace-copy h2{margin:0 0 .9rem;letter-spacing:-.028em}
.trace-copy p{font-size:.93rem;max-width:44ch}
.trace-list{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.trace-list li{display:flex;gap:.85rem}
.trace-list svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--blue);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-top:.15rem}
.trace-list h3{font-size:.99rem;margin:0 0 .25rem}
.trace-list p{font-size:.86rem;color:var(--ink-2);margin:0}
.stack{position:relative;height:290px}
.sheet{position:absolute;background:#fff;border:1px solid var(--line);border-radius:6px;
  width:172px;padding:.7rem .75rem;box-shadow:var(--shadow-lg)}
.sheet b{display:block;font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line-soft);padding-bottom:.35rem;margin-bottom:.45rem}
.sheet .ln{display:grid;gap:4px}
.sheet .ln i{display:block;height:3px;border-radius:2px;background:var(--surface-3)}
.sheet.s3{top:6px;right:120px;transform:rotate(-7deg)}
.sheet.s2{top:26px;right:34px;transform:rotate(3deg)}
.sheet.s1{top:96px;right:110px;transform:rotate(-2deg)}
.stack-badge{position:absolute;left:0;bottom:12px;display:flex;align-items:center;gap:.6rem;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;
  box-shadow:var(--shadow-lg)}
.stack-badge svg{width:24px;height:24px;fill:none;stroke:var(--blue);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.stack-badge .num{display:block;font-size:1.22rem;font-weight:700;color:var(--navy);line-height:1.1}
.stack-badge small{display:block;font-size:.72rem;color:var(--ink-3);line-height:1.3;margin-top:.1rem}

/* numbers: proportional sans with tabular figures, per the redesign */
.num{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.012em;
  font-feature-settings:"tnum" 1}
.hero-x .hero-grid{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
.hero-copy h1{max-width:19ch}
.tiles{align-items:start}
.tile .tl{line-height:1.3}
.tile .tv{font-size:1.18rem}
.tile .ti svg{width:23px;height:23px}
.tile{gap:.6rem}
.btn svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-2px}
.btn{display:inline-flex;align-items:center;gap:.45rem}
.audcard .ic svg,.trace-list svg{width:24px;height:24px;stroke-width:1.7}
.sheet.s3{right:150px}.sheet.s2{right:52px}.sheet.s1{right:118px}

/* ---------- search page (redesign) ---------- */
.shero{background:linear-gradient(180deg,#F2F6FD 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line-soft);padding:2.6rem 0 2.2rem}
.shero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:2.4rem;align-items:center;margin-bottom:1.6rem}
@media(max-width:940px){.shero-grid{grid-template-columns:minmax(0,1fr);gap:1.4rem}}
.shero h1{margin:0 0 .5rem}
.shero .lede{font-size:1.02rem;color:var(--ink-2);margin:0;max-width:56ch}
.promo{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.05rem 1.15rem;box-shadow:var(--shadow-sm)}
.promo > svg{width:28px;height:28px;flex:none;fill:none;stroke:var(--blue);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.promo h3{font-size:.97rem;margin:0 0 .25rem}
.promo p{font-size:.84rem;color:var(--ink-2);margin:0}
.promo .btn{flex:none;white-space:nowrap}
@media(max-width:560px){.promo{flex-wrap:wrap}}
.sbox.xl.wide{max-width:none}
.btn-dark{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.btn-dark:hover{background:#17385F;color:#fff}
.shero .trythis{margin-top:.9rem}

/* sidebar */
.fside{width:268px}
.catgroup{max-height:none}
.catgroup .fopt.extra{display:none}
.catgroup.expanded .fopt.extra{display:flex}
.fmore{background:none;border:0;color:var(--blue);font:inherit;font-size:.83rem;font-weight:580;
  cursor:pointer;padding:.35rem 0 0}
.fmore:hover{text-decoration:underline}
.fopt .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.45rem;
  vertical-align:.02em}
.fhead .fclear-slot{margin-left:auto}
.fclear{background:none;border:0;color:var(--blue);font:inherit;font-size:.83rem;font-weight:580;cursor:pointer}
.fclear:disabled{color:var(--ink-3);cursor:default}
.fclear:not(:disabled):hover{text-decoration:underline}

/* results table */
.rtable.big th{font-size:.78rem;vertical-align:bottom}
.rtable.big .th-sub{display:block;font-size:.71rem;font-weight:450;color:var(--ink-3);
  text-transform:none;letter-spacing:0;margin-top:.1rem}
.rtable .pick{width:36px;padding-right:0}
.rtable .pick input{width:15px;height:15px;accent-color:var(--blue);cursor:pointer;margin:0}
.rtable .it a{font-weight:600}
.rtable .it .sub{display:block;font-size:.74rem;color:var(--ink-3);margin-top:.1rem}
.rtable .per{display:block;font-family:var(--sans);font-size:.73rem;font-weight:450;color:var(--ink-3)}
.rtable .tr-cell{width:76px}
.spark{width:64px;height:22px;display:block;overflow:visible}
.spark polyline{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nospark{color:var(--ink-3);font-size:.85rem}
.dpill{display:inline-block;font-size:.73rem;font-weight:640;padding:.2rem .55rem;border-radius:999px;
  white-space:nowrap;border:1px solid transparent}
.dpill.d-deep{background:var(--ok-wash);border-color:var(--ok-line);color:var(--ok)}
.dpill.d-mod{background:var(--blue-wash);border-color:#D2E1FD;color:var(--blue-700)}
.dpill.d-thin{background:var(--warn-wash);border-color:var(--warn-line);color:var(--warn)}
.dpill.d-vthin{background:#FDECE6;border-color:#F6D6C9;color:#9B3A17}
.dpill.d-single{background:var(--surface-2);border-color:var(--line);color:var(--ink-3)}

/* compare */
.cmptray{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--navy);
  box-shadow:0 -6px 24px rgba(15,39,71,.22)}
.cmptray .wrap{display:flex;align-items:center;gap:.8rem;padding-top:.7rem;padding-bottom:.7rem}
.cmptray .ci svg{width:22px;height:22px;fill:none;stroke:#7FAAF5;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.cmptray strong{color:#fff;font-size:.9rem;white-space:nowrap}
.cmptray .cdiv{width:1px;height:22px;background:rgba(255,255,255,.2)}
.cchips{display:flex;gap:.45rem;flex:1;min-width:0;overflow-x:auto}
.cchip{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);color:#DDE7F5;border-radius:7px;
  padding:.28rem .5rem .28rem .65rem;font-size:.82rem;white-space:nowrap}
.cchip button{background:none;border:0;color:#AFC2DC;font-size:1rem;line-height:1;cursor:pointer;padding:0 .1rem}
.cchip button:hover{color:#fff}
.btn-ghost{background:transparent;color:#DDE7F5;border:1px solid rgba(221,231,245,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
body.has-tray{padding-bottom:64px}
.cmp-panel{margin-bottom:1.2rem}
.cmp-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.cmp-head h2{margin:0;font-size:1.1rem}
.cmp-tbl{border-collapse:collapse;width:100%;font-size:.87rem}
.cmp-tbl th,.cmp-tbl td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--line-soft)}
.cmp-tbl thead th{font-size:.82rem;color:var(--navy);font-weight:660;vertical-align:bottom;
  border-bottom:1px solid var(--line)}
.cmp-tbl tbody th{color:var(--ink-3);font-weight:480;white-space:nowrap;width:1%}
.cmp-tbl td{color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:940px){
  .fside{width:auto}
  .cmptray .cchips{display:none}
  .cmptray .cdiv{display:none}
}
.fopt .c{font-family:var(--sans);font-variant-numeric:tabular-nums}
.cmp-panel{scroll-margin-top:88px}
.cmptray .btn{white-space:nowrap;flex:none}
.rtable.big th,.rtable.big td{padding-left:.7rem;padding-right:.7rem}
.rtable.big .it{min-width:190px}
.rtable.big .it .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.rtable.big thead th{text-transform:none;letter-spacing:0;font-size:.84rem;font-weight:620;color:var(--navy)}
.rtable.big .th-sub{font-size:.73rem}
.rtable.big th:last-child,.rtable.big td:last-child{padding-right:1rem}
.rtable.big th:nth-child(2),.rtable.big td:nth-child(2){padding-left:.2rem}

/* ---------- item page (redesign) ---------- */
.crumbrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.lastobs{font-size:.82rem;color:var(--ink-3)}
.lastobs strong{color:var(--ink-2);font-weight:600}
.titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin:.4rem 0 .5rem}
.titlerow h1{margin:0 0 .5rem}
.itags{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0}
.itag{display:inline-block;background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:.2rem .65rem;font-size:.78rem;color:var(--ink-2);font-weight:520}
.itags .sep{display:none}
.tacts{display:flex;gap:.5rem;flex-wrap:wrap}
.btn-sm{padding:.42rem .85rem;font-size:.85rem}
.statcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
@media(max-width:980px){.statcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.statcards{grid-template-columns:minmax(0,1fr)}}
.scard{display:flex;gap:.8rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow-sm)}
.scard .si{flex:none;width:34px;height:34px;border-radius:9px;background:var(--blue-wash);
  display:grid;place-items:center}
.scard .si svg{width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.scard .k{font-size:.78rem;color:var(--ink-3);font-weight:520}
.scard .v{font-size:1.5rem;font-weight:700;color:var(--navy);letter-spacing:-.028em;line-height:1.2;
  margin:.1rem 0}
.scard .v small{font-size:.86rem;font-weight:500;color:var(--ink-3);letter-spacing:0}
.scard .v .dpill{font-size:.8rem;vertical-align:.12em}
.scard .s{font-size:.76rem;color:var(--ink-3)}
.dist-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1rem;margin-top:1.1rem}
@media(max-width:1000px){.dist-grid{grid-template-columns:minmax(0,1fr)}}
.item-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.4rem;
  align-items:start;margin-top:2.2rem}
@media(max-width:1100px){.item-grid{grid-template-columns:minmax(0,1fr)}}
.about{position:sticky;top:88px}
.about-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem}
.about-head h2{font-size:1.02rem;margin:0}
.about-head svg{width:19px;height:19px;fill:none;stroke:var(--blue);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.about > p{font-size:.85rem;color:var(--ink-2)}
.about-tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.about-tbl th{text-align:left;font-weight:480;color:var(--ink-3);padding:.4rem 0;
  border-top:1px solid var(--line-soft);white-space:nowrap;vertical-align:top}
.about-tbl td{text-align:right;color:var(--ink);font-weight:580;padding:.4rem 0;
  border-top:1px solid var(--line-soft);word-break:break-word}
.about-tbl tr:first-child th,.about-tbl tr:first-child td{border-top:0}
.obs-tools{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:.7rem}
.obs-tools h2{font-size:1.06rem;margin:0}
.obs-tools h2 .dim{font-weight:480}
.obs-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.obs-find{position:relative;display:inline-block}
.obs-find svg{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:15px;height:15px;
  fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.obs-find input{width:240px;height:36px;padding:0 .8rem 0 2.1rem;font:inherit;font-size:.86rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink)}
.obs-find input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-ring)}
@media(max-width:560px){.obs-find input{width:100%}.obs-find{display:block;width:100%}}
#obstable td:nth-child(7){max-width:150px}
#obstable td:nth-child(8){max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- coverage charts ---------- */
.vbars{display:grid;grid-template-columns:repeat(var(--vbn),minmax(0,1fr));gap:.5rem;
  align-items:end;height:calc(var(--vbh) + 44px);padding-top:.4rem}
.vb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.vb .vv{font-size:.76rem;font-weight:660;color:var(--navy);margin-bottom:.3rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.vb .vbar{width:100%;max-width:56px;background:var(--blue);border-radius:4px 4px 0 0;
  min-height:3px;display:block}
.vb:nth-child(even) .vbar{background:#4F86F0}
.vb .vl{font-size:.7rem;color:var(--ink-3);margin-top:.4rem;text-align:center;line-height:1.25;
  word-break:break-word}
.donut{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.dring{position:relative;flex:none}
.dring svg{width:170px;height:170px;display:block}
.dcentre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none}
.dcentre span{font-size:1.25rem;font-weight:700;color:var(--navy);line-height:1.1}
.dcentre small{font-size:.75rem;color:var(--ink-3)}
.dlegend{list-style:none;margin:0;padding:0;flex:1;min-width:190px;display:grid;gap:.42rem}
.dlegend li{display:flex;align-items:center;gap:.5rem;font-size:.83rem;color:var(--ink-2)}
.dlegend i{width:9px;height:9px;border-radius:50%;flex:none}
.dlegend span{flex:1;min-width:0}
.dlegend b{font-weight:640;color:var(--navy)}
.dlegend em{font-style:normal;color:var(--ink-3);width:38px;text-align:right}
.unit-tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.unit-tbl th{text-align:left;font-size:.73rem;font-weight:680;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);padding:.4rem .6rem;border-bottom:1px solid var(--line)}
.unit-tbl td{padding:.45rem .6rem;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
.unit-tbl .n{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- coverage cards ---------- */
.cvh{font-size:1.06rem;margin:0 0 .3rem}
.cvs{font-size:.83rem;color:var(--ink-3);margin:0 0 1rem}
.cvbody{margin-top:.2rem}
.cvf{font-size:.78rem;color:var(--ink-3);margin:1rem 0 0}
.cov-scroll{max-height:330px;overflow:auto;margin:-.2rem -.3rem;padding:0 .3rem}
.cov-tbl{width:100%;border-collapse:collapse;font-size:.83rem}
.cov-tbl thead th{position:sticky;top:0;background:var(--surface);text-align:left;
  font-size:.7rem;font-weight:680;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  padding:.35rem .4rem;border-bottom:1px solid var(--line);z-index:1}
.cov-tbl td{padding:.45rem .4rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.cov-tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cov-tbl .sub{display:block;font-size:.72rem;color:var(--ink-3);font-weight:450;margin-top:.05rem}
.cov-tbl .pill{font-size:.7rem;padding:.12rem .45rem}
.grid.g3 > .card{display:flex;flex-direction:column}
.grid.g3 > .card .cvbody{flex:1}
.vb .vl{white-space:nowrap;word-break:normal;font-size:.72rem}

/* ---------- methodology ---------- */
.procband{background:linear-gradient(180deg,#EEF4FE,#F7FAFF)}
.psteps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem}
@media(max-width:1200px){.psteps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.psteps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.psteps{grid-template-columns:minmax(0,1fr)}}
.pstep{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem .95rem;box-shadow:var(--shadow-sm);position:relative}
.pstep .no{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:.78rem;font-weight:700;margin-bottom:.6rem}
.pstep h3{font-size:.95rem;margin:0 0 .3rem}
.pstep p{font-size:.82rem;color:var(--ink-2);margin:0}
.pipeline{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.pstage{flex:1;min-width:190px}
.plab{font-size:.74rem;font-weight:680;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .6rem;text-align:center}
.pdocs{position:relative;height:118px}
.pdoc{position:absolute;top:0;background:#fff;border:1px solid var(--line);border-radius:5px;
  width:98px;padding:.45rem .5rem;box-shadow:var(--shadow)}
.pdoc:nth-child(1){left:2%;transform:rotate(-6deg)}
.pdoc:nth-child(2){left:31%;transform:rotate(2deg);top:6px}
.pdoc:nth-child(3){left:60%;transform:rotate(-2deg);top:2px}
.pdoc b{display:block;font-size:.56rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line-soft);padding-bottom:.25rem;margin-bottom:.3rem}
.pdoc i{display:block;height:3px;border-radius:2px;background:var(--surface-3);margin-bottom:3px}
.parrow svg{width:22px;height:22px;fill:none;stroke:var(--blue);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
@media(max-width:860px){.parrow{display:none}}
.ptbl{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ptbl table{width:100%;border-collapse:collapse;font-size:.74rem}
.ptbl th{background:var(--surface-2);text-align:left;padding:.35rem .5rem;color:var(--ink-3);
  font-weight:620;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em}
.ptbl td{padding:.35rem .5rem;border-top:1px solid var(--line-soft);color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.ptbl .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--navy);font-weight:620}
.pchart{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .8rem}
.pct{display:block;font-size:.72rem;color:var(--ink-3);margin-bottom:.5rem}
.pbars{display:flex;align-items:flex-end;gap:5px;height:76px}
.pbars span{flex:1;background:var(--blue);border-radius:3px 3px 0 0;opacity:.85}
.pbars span:last-child{opacity:1}
.quad .card{display:flex;flex-direction:column}
.quad .qi{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--blue-wash);margin-bottom:.7rem}
.quad .qi svg{width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.quad h3{font-size:.98rem;margin:0 0 .4rem}
.quad p{font-size:.84rem;color:var(--ink-2)}
.ticks{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.32rem}
.ticks li{position:relative;padding-left:1.25rem;font-size:.83rem;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:5px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.updbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1.1rem;font-size:.85rem;
  color:var(--ink-2)}
.updbar svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.updbar strong{color:var(--navy)}
.updbar b{color:var(--navy);font-weight:640}
.updbar em{font-style:normal;color:var(--ink-3);margin-left:auto;font-size:.82rem}
.arw{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;display:inline-block;vertical-align:-2px;flex:none}

/* ---------- pricing ---------- */
.pstats .tiles{margin-top:1.6rem;padding-top:1.4rem}
.verify-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm)}
.verify-panel h2{font-size:1.28rem;margin:0 0 .5rem;letter-spacing:-.024em}
.verify-panel p{font-size:.88rem;color:var(--ink-2);margin:0 0 .9rem}
.pricegrid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:1rem;align-items:start}
@media(max-width:1000px){.pricegrid{grid-template-columns:minmax(0,1fr)}}
.verifcard{position:relative;overflow:hidden}
.verifcard .eyebrow{margin-bottom:.4rem}
.vprice{margin:.9rem 0 1rem}
.vprice .num{font-size:2.1rem;font-weight:700;color:var(--navy);letter-spacing:-.035em}
.vprice small{font-size:.95rem;color:var(--ink-3);margin-left:.3rem}
.vdocs{position:absolute;right:-26px;bottom:-20px;width:150px;height:110px;opacity:.5;pointer-events:none}
.vsheet{position:absolute;right:26px;bottom:24px;width:110px;background:#fff;
  border:1px solid var(--line);border-radius:5px;padding:.5rem .55rem;box-shadow:var(--shadow);
  transform:rotate(-7deg)}
.vsheet b{display:block;font-size:.55rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line-soft);padding-bottom:.25rem;margin-bottom:.3rem}
.vsheet i{display:block;height:3px;border-radius:2px;background:var(--surface-3);margin-bottom:3px}
.vsheet.v2{right:6px;bottom:8px;height:78px;transform:rotate(5deg);z-index:-1}
.faq-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.1rem}
.faq-head h2{margin:0}
.faq-head a{font-size:.87rem;font-weight:560}
.faq2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;align-content:start}
@media(max-width:860px){.faq2{grid-template-columns:minmax(0,1fr)}}
.faq2 details{height:fit-content}
.verifcard > *{position:relative;z-index:1}
.vdocs{z-index:0;right:-34px;bottom:-30px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.4rem;
  align-items:start}
@media(max-width:940px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.emailbox{display:flex;align-items:flex-start;gap:.9rem;background:var(--blue-wash);
  border:1px solid #D2E1FD;border-radius:var(--radius);padding:1.1rem 1.2rem;margin-bottom:1.1rem}
.emailbox .eb-ic{flex:none;width:40px;height:40px;border-radius:10px;background:#fff;
  display:grid;place-items:center}
.emailbox .eb-ic svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.emailbox a{font-size:1.16rem;font-weight:660;color:var(--navy);letter-spacing:-.02em}
.emailbox a:hover{color:var(--blue)}
.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media(max-width:600px){.topics{grid-template-columns:minmax(0,1fr)}}
.topic{position:relative;display:flex;gap:.7rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:.95rem 1.9rem .95rem 1rem;box-shadow:var(--shadow-sm)}
.topic .ti{flex:none;width:32px;height:32px;border-radius:9px;background:var(--blue-wash);
  display:grid;place-items:center}
.topic .ti svg{width:17px;height:17px;fill:none;stroke:var(--blue);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.topic h3{font-size:.92rem;margin:0 0 .2rem}
.topic p{font-size:.82rem;color:var(--ink-2);margin:0}
.topic > svg:last-child{position:absolute;right:.7rem;top:1.15rem;width:14px;height:14px;fill:none;
  stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.faq-block{margin-top:1.4rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem 1.3rem;box-shadow:var(--shadow-sm)}
.faq-block .faq-head h2{font-size:1.1rem}
.statstrip{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1.4rem;box-shadow:var(--shadow-sm)}
.statstrip .tiles{margin:0;padding:0;border-top:0}
@media(max-width:1000px){
  /* the dropdown panel cannot be positioned sanely inside the scrolling nav row;
     these links remain available in the footer */
  .navdrop{display:none}
}
@media(max-width:1000px){.site-foot .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}}
@media(max-width:560px){.site-foot .cols{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1000px){
  /* Scoped: an unscoped .brand{order:1} here was reordering the LIVE header too,
     which is why the account button rendered to the left of the logo on a phone. */
  .site-head .bar{height:auto;padding-top:.55rem;padding-bottom:.55rem;flex-wrap:wrap;row-gap:.45rem}
  .site-head .nav-aux{margin-left:auto;order:2}
  .site-head .brand{order:1}
  .site-head .nav-main{order:3}
}

/* ---------- responsive re-assertions (must stay last) ---------- */
@media(max-width:1060px){
  .hero-x .hero-grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .hero-x .hero-aside{display:block}
  .hero-copy h1{max-width:none}
}
@media(max-width:940px){
  .shero-grid{grid-template-columns:minmax(0,1fr)}
  .split-head{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem .4rem}
  .trace{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
  .titlerow{gap:.8rem}
  .exitem{padding:1.1rem}
  .ex-price{flex-wrap:wrap}
  .band{padding:2.4rem 0}
  .shero{padding:2rem 0 1.8rem}
  .hero-x{padding:2.2rem 0 2.4rem}
}

/* ---------------------------------------------------------- gated sections */
/* Signed-out visitors see the item name, its category, the median and how many
   observations sit behind it. Everything below that is injected server side once a
   session cookie is present, so the locked markup is what the asset server holds. */
.lockpanel{
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:1.15rem 1.25rem;box-shadow:var(--shadow-sm)
}
.lockpanel .lockmark{
  flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:#DCEBE2;color:var(--blue)
}
.lockpanel .lockmark svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
.lockpanel .lockbody{flex:1 1 17rem;min-width:0}
.lockpanel h3{font-size:1rem;margin:0;letter-spacing:-.01em}
.lockpanel p{margin:.22rem 0 0;color:var(--muted);font-size:.87rem;max-width:56ch}
.lockpanel .lockacts{display:flex;gap:.5rem;flex-wrap:wrap;flex:0 0 auto}
@media(max-width:560px){.lockpanel .lockacts{width:100%}.lockpanel .lockacts .btn{flex:1 1 auto}}
.lockcards{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin-bottom:1rem
}
@media(max-width:980px){.lockcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.lockcards{grid-template-columns:minmax(0,1fr)}}
.lockcards .scard .v.locked{
  color:var(--muted);font-size:1.05rem;font-weight:600;letter-spacing:-.01em
}
.lockcards .scard .v.locked a{color:var(--blue);text-decoration:none}
.lockcards .scard .v.locked a:hover{text-decoration:underline}

/* the account strip in the header */
.acct{display:flex;align-items:center;gap:.5rem}
.acct .who{
  font-size:.82rem;color:var(--muted);max-width:16ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap
}
@media(max-width:860px){.acct .who{display:none}}

/* sign-in / sign-up */
.authwrap{max-width:26rem;margin:0 auto;padding:2.6rem 0 4rem}
.authcard{
  border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:1.6rem 1.5rem;box-shadow:var(--shadow-sm)
}
.authcard h1{font-size:1.4rem;margin:0 0 .3rem;letter-spacing:-.02em}
.authcard .sub{color:var(--muted);font-size:.9rem;margin:0 0 1.2rem}
.authcard label{display:block;font-size:.82rem;font-weight:600;margin:.85rem 0 .3rem}
.authcard input{
  width:100%;padding:.62rem .7rem;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:.93rem;background:var(--bg);color:var(--ink)
}
.authcard input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.authcard .btn{width:100%;margin-top:1.1rem;justify-content:center}
.authcard .hint{color:var(--muted);font-size:.78rem;margin:.3rem 0 0}
.authcard .swap{text-align:center;font-size:.86rem;margin:1.1rem 0 0;color:var(--muted)}
.authmsg{
  margin:.9rem 0 0;padding:.6rem .7rem;border-radius:9px;font-size:.85rem;
  border:1px solid #F3C7C2;background:#FDF2F1;color:#8E2E22
}
.authmsg.ok{border-color:#BFE3C9;background:#F1FAF3;color:#215C34}
.authmsg[hidden]{display:none}
.rangelock{
  color:var(--blue);text-decoration:none;font-weight:600;font-size:.84rem;white-space:nowrap
}
.rangelock:hover{text-decoration:underline}
.scopeline{
  margin:.55rem 0 0;font-size:.84rem;color:var(--muted);
  border-left:2px solid var(--line);padding-left:.7rem
}


/* ============================================================
   Direction C — Ledger.  The serif carries the item name and the
   price; everything else stays in the sans.  Tabular columns keep
   the mono, which is what actually lines digits up in a table.
   ============================================================ */
.stat .v{font-family:var(--serif);font-weight:600;letter-spacing:-.012em}
.samp .mid .big{font-family:var(--serif);font-weight:600;letter-spacing:-.015em}
.plan .price{font-family:var(--serif);font-weight:600}
.rtable .r .med{font-family:var(--serif);font-weight:600}
.seg .val{font-family:var(--serif);font-weight:600}
.covrow .v{font-family:var(--serif);font-weight:600}
.spread dd{font-family:var(--serif);font-weight:600}


/* ---------- design bundle components ---------- */
/* Hubstake — single stylesheet. Token names are fixed; values are ours. */


/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--blue-600);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--blue-700)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
h1,h2,h3{margin:0;color:var(--navy);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
mark{background:var(--blue-wash);color:inherit;border-radius:2px;padding:0 1px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font:500 .75rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.fine{font-size:.8125rem;line-height:1.45;color:var(--ink-3)}

/* ---------- header / footer ---------- */
.site-header{background:var(--navy);border-bottom:1px solid var(--navy)}
.site-header .wrap{display:flex;align-items:center;gap:24px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;color:var(--on-accent);text-decoration:none;font-weight:600;font-size:1.375rem;letter-spacing:-.03em}
.brand:hover{color:var(--on-accent)}
.brand-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-xs);background:var(--blue);color:var(--on-accent);font-size:.9375rem;font-weight:700}
.brand-mark::after{content:"H"}
/* The legacy sheet sets .field{margin-bottom:1rem} (line ~635) and the bundle's
   .field does not reset it, so the header search sat 16px above the optical
   centre of the logo and the account buttons.  Zero it here and centre the
   form itself so the field is vertically centred in the 60px bar. */
.header-search{flex:1;max-width:460px;display:flex;align-items:center;margin:0;align-self:center}
.header-search .field{margin:0;width:100%;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.header-search .field input{color:var(--on-accent)}
.header-search .field input::placeholder{color:rgba(255,255,255,.55)}
.header-search .field .btn{background:transparent;border-left:1px solid rgba(255,255,255,.28);color:var(--on-accent)}
.header-search .field .btn:hover{background:rgba(255,255,255,.12)}
.nav{display:flex;align-items:center;gap:20px;margin-left:auto;font-size:.875rem}
.nav a:not(.btn){color:rgba(255,255,255,.78);text-decoration:none}
.nav a:not(.btn):hover{color:var(--on-accent)}
.account{display:flex;align-items:center;gap:8px}
.avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue);color:var(--on-accent);font:600 .6875rem/1 var(--sans);letter-spacing:.02em}
.site-footer{border-top:1px solid var(--navy);margin-top:0;padding:24px 0 40px;background:var(--navy)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.8125rem;color:rgba(255,255,255,.6)}
.site-footer nav{display:flex;gap:20px}
.site-footer a{color:rgba(255,255,255,.8);text-decoration:none}
.site-footer a:hover{color:var(--on-accent)}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:500 .9375rem/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--surface-2);color:var(--ink)}
.btn-primary{background:var(--blue);border-color:var(--blue);color:var(--on-accent)}
.btn-primary:hover{background:var(--blue-600);border-color:var(--blue-600);color:var(--on-accent)}
.btn-sm{height:32px;padding:0 12px;font-size:.8125rem}
.btn-lg{height:48px;padding:0 22px;font-size:1rem}
.btn-block{width:100%}
.field{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.field:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-ring)}
.field input{flex:1;min-width:0;height:36px;padding:0 12px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.9375rem;outline:none}
.field input::placeholder{color:var(--ink-3)}
.field .btn{height:auto;border:0;border-radius:0}
.field--sm .btn{padding:0 12px;font-size:.8125rem;background:var(--surface-2);border-left:1px solid var(--line)}
.field--lg input{height:48px;font-size:1.0625rem;padding:0 16px}
.field--xl{border:1.5px solid var(--navy);border-radius:var(--radius);box-shadow:var(--shadow)}
.field--xl input{height:68px;padding:0 22px;font-size:1.25rem}
.field--xl .btn{padding:0 28px;font-size:1.0625rem}
select{height:34px;padding:0 30px 0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23454a54' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--ink);font:inherit;font-size:.875rem;-webkit-appearance:none;appearance:none}
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:1px solid var(--line-soft);border-radius:var(--radius-xs);background:var(--surface-2);color:var(--ink-2);font:500 .75rem/1 var(--sans);white-space:nowrap;vertical-align:middle}
.tag-warn{background:var(--warn-wash);border-color:var(--warn-line);color:var(--warn)}
.tag-ls{background:var(--navy);border-color:var(--navy);color:var(--on-accent);font-family:var(--mono);letter-spacing:.04em}

/* ---------- homepage ---------- */
.home{padding:0}
.hero-photo{position:relative;overflow:hidden;padding:88px 0 64px}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(13,20,32,.45),rgba(13,20,32,.9))}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(13,20,32,.78) 0%,rgba(13,20,32,.55) 32%,rgba(13,20,32,.15) 62%,transparent 80%)}
.hero-inner{position:relative;z-index:2}
.home-search{max-width:860px}
.home-search h1{color:#fff}
.home-search .lede{margin:12px 0 28px;max-width:58ch;color:rgba(255,255,255,.78);font-size:1.0625rem}
.home-scope{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;font-size:.875rem;color:rgba(255,255,255,.72)}
.home-scope label{display:flex;align-items:center;gap:8px}
.home-scope select{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32);color:#fff}
.field--xl{box-shadow:0 16px 34px rgba(0,0,0,.32);border-color:transparent}
.try{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;font-size:.875rem;color:rgba(255,255,255,.6)}
.try a{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.try a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.stats-band{background:var(--blue-700)}
.stats-band .coverage{border:0;margin:0 auto;padding:20px var(--gut)}
.stats-band .coverage div+div{border-left-color:rgba(255,255,255,.22)}
.stats-band .coverage dt{color:rgba(255,255,255,.7)}
.stats-band .coverage dd{color:#fff}
.content-white{background:var(--surface)}
.coverage-note{margin-top:16px}
.promise{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:28px;list-style:none;font-size:.875rem;color:var(--ink-2)}
.promise li{display:flex;align-items:center;gap:8px}
.promise li::before{content:"";width:6px;height:6px;background:var(--blue);border-radius:1px}
.home-search h1{font-size:clamp(1.75rem,3.4vw,2.4375rem);line-height:1.15;letter-spacing:-.02em;max-width:22ch}
.coverage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.coverage div{padding:0 20px 0 0}
.coverage div+div{padding-left:20px;border-left:1px solid var(--line-soft)}
.coverage dt{font-size:.9375rem;color:var(--ink-3)}
.coverage dd{margin:4px 0 0;color:var(--blue-700);font-size:1.875rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.example{margin-top:56px;padding-bottom:56px}
.example h2,.example>header a{color:var(--navy)}
.example>header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:16px}
.example>header h2{font-size:1.25rem}
.example-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.example-card>div{padding:24px 28px}
.example-card>div+div{border-left:1px solid var(--line-soft);background:var(--blue-wash)}
.example-card h3{font-size:1.125rem;margin:6px 0 16px}
.anno{display:block;margin-bottom:4px}
.ex-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0 20px}
.ex-row dd{margin:2px 0 0;font-weight:500;font-variant-numeric:tabular-nums}
.ex-source p{color:var(--ink-2);font-size:.9375rem;margin-bottom:16px}
.ex-source dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:0 0 20px;font-size:.875rem}
.ex-source dt{color:var(--ink-3)}
.ex-source dd{margin:0;font-variant-numeric:tabular-nums}

/* ---------- search results ---------- */
.search-top{background:var(--surface);border-bottom:1px solid var(--line);padding:20px 0}
.search-top .field{max-width:760px}
.results-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;padding-top:24px}
/* display:block is explicit because the retired search page left a
   `.filters{display:flex}` behind, which laid the Refine label beside the
   fieldsets instead of above them. */
.filters{display:block;position:sticky;top:16px;align-self:start}
.filters>.label{display:block;margin-bottom:16px;color:var(--navy)}
.filter-group{margin:0 0 16px;padding:0 0 16px;border:0;border-bottom:1px solid var(--line-soft)}
.filter-group legend{padding:0;margin-bottom:8px;font-size:.875rem;font-weight:600;color:var(--navy)}
.check{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.875rem;cursor:pointer}
.check input{width:16px;height:16px;margin:0;accent-color:var(--blue)}
.check .count{margin-left:auto;color:var(--ink-3);font-size:.8125rem;font-variant-numeric:tabular-nums}
.check input:checked+span{font-weight:500}
.filter-find{margin-bottom:6px}
.filter-find input{height:32px;font-size:.8125rem}
.more{display:inline-block;margin-top:4px;font-size:.8125rem}
.more-details{margin-top:4px}
.more-details summary{cursor:pointer;list-style:none}
.more-details summary::-webkit-details-marker{display:none}
.more-details summary::marker{content:""}
.more-open{display:none}
.more-details[open] .more-open{display:inline}
.more-details[open] .more-closed{display:none}
.more-details .more-list{display:flex;flex-direction:column;margin-top:4px}
.results-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:12px}
.results-count{font-size:.9375rem;color:var(--ink-2)}
.results-count strong{color:var(--navy);font-weight:600}
.sort{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:.875rem;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;font-size:.8125rem}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 10px;border:1px solid var(--blue-ring);border-radius:999px;background:var(--blue-wash);color:var(--blue-700);text-decoration:none}
.chip:hover{border-color:var(--blue);color:var(--blue-700)}
.chip b{font-weight:500}
.chip .x{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:.875rem;line-height:1}
.chip:hover .x{background:var(--blue);color:var(--on-accent)}
.result-table{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.result-head,.result{display:grid;grid-template-columns:minmax(0,1fr) 120px 56px 84px;gap:16px;align-items:center;padding:0 20px}
.result-head{height:36px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.result-head span:nth-child(n+2),.result-price,.result-obs{text-align:right}
.result-list{list-style:none}
.result{position:relative;padding-top:14px;padding-bottom:14px}
.result+.result{border-top:1px solid var(--line-soft)}
.result:hover{background:var(--bg)}
.result-name{font-size:1rem;font-weight:500;line-height:1.35}
.result-name a{color:var(--navy);text-decoration:none}
.result-name a::after{content:"";position:absolute;inset:0}
.result:hover .result-name a{color:var(--blue-700);text-decoration:underline}
.result-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:3px;font-size:.8125rem;color:var(--ink-3)}
.result-price{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.rp{font-size:1.0625rem;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.2}
.rp small{font-size:.75rem;font-weight:400;color:var(--ink-2)}
.result-unit{font:500 .8125rem var(--mono);color:var(--ink-2)}
.result-obs{font-size:.875rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.result-obs b{color:var(--ink);font-weight:500}
.result-obs.is-thin b{color:var(--warn);font-weight:600}
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;font-size:.875rem;color:var(--ink-2)}
.pager nav{display:flex;gap:6px}
.pager a,.pager span[aria-current]{display:grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);text-decoration:none}
.pager span[aria-current]{background:var(--navy);border-color:var(--navy);color:var(--on-accent)}

/* ---------- zero-result search state ---------- */
.empty-state{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:48px 40px;text-align:left;max-width:640px}
.empty-state h2{font-size:1.25rem;margin-bottom:10px}
.empty-state>p{color:var(--ink-2);font-size:.9375rem;max-width:56ch}
.empty-try,.empty-cats{margin-top:24px}
.empty-try-links,.empty-cat-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.empty-try-links a,.empty-cat-grid a{display:inline-flex;align-items:center;height:32px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:.875rem}
.empty-try-links a:hover,.empty-cat-grid a:hover{border-color:var(--blue);color:var(--blue-700)}
.empty-state .fine{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-soft)}

/* ---------- single-observation item ---------- */
.single-note{margin-top:12px;padding:12px 14px;border:1px solid var(--warn-line);border-radius:var(--radius-sm);background:var(--warn-wash);color:var(--ink);font-size:.875rem}
.single-note strong{color:var(--warn)}
.single-only{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:200px;border:1px dashed var(--line);border-radius:var(--radius-sm);text-align:center;padding:24px}
.single-only .figure{font-size:2.25rem}
.single-only p{max-width:36ch;color:var(--ink-2);font-size:.875rem}

/* ---------- LOW CONFIDENCE (state A) — lives on the number itself ---------- */
.thin{position:relative;display:inline-block;padding:0 .18em;border-bottom:2px dashed var(--warn);background:repeating-linear-gradient(135deg,var(--warn-wash) 0 5px,transparent 5px 10px);color:var(--navy)}
.thin .approx{margin-right:.06em;color:var(--warn);font-weight:500}
.thin-flag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:1px solid var(--warn-line);border-radius:var(--radius-xs);background:var(--warn-wash);color:var(--warn);font:600 .75rem/1 var(--sans);white-space:nowrap}
.thin-flag::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid currentColor}

/* ---------- item page ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;padding:18px 0 0;font-size:.8125rem;color:var(--ink-3)}
.crumbs a{color:var(--ink-2)}
.crumbs span[aria-hidden]{color:var(--line)}
.item-head{padding:14px 0 24px}
.item-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;font-size:.8125rem;color:var(--ink-3)}
.item-head h1{font-size:clamp(1.5rem,2.7vw,2rem);line-height:1.2;letter-spacing:-.02em;max-width:30ch}
.item-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px;font-size:.875rem;color:var(--ink-2)}
.item-meta b{font-weight:500;color:var(--ink)}
.item-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:20px}
.panel-head h2{font-size:1rem}
.price-panel .price,.example-card .price,.single-only .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:8px}
.price .figure,.single-only .figure{color:var(--navy);font-size:3.0625rem;font-weight:600;line-height:1.05;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.price .per{font:500 1rem var(--mono);color:var(--ink-2)}
.price .thin-flag{align-self:center;margin-left:4px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line-soft)}
.stats div{min-width:0}
.stats dt{font-size:.8125rem;color:var(--ink-3)}
.stats dd{margin:2px 0 0;font-size:1.0625rem;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.stats dd small{font-size:.8125rem;font-weight:400;color:var(--ink-3)}
.stats .is-thin dd{color:var(--warn);font-weight:600}
.price-panel .fine{margin-top:18px}

/* range bar: --l/--m/--r are server-computed % positions */
.range{position:relative;height:58px;margin:22px 0 4px}
.range-track{position:absolute;left:0;right:0;top:15px;height:4px;border-radius:2px;background:var(--surface-3)}
.range-iqr{position:absolute;top:8px;left:var(--l);width:calc(var(--r) - var(--l));height:18px;border:1.5px solid var(--blue);border-radius:var(--radius-xs);background:var(--blue-wash)}
.range-med{position:absolute;top:2px;left:var(--m);width:3px;height:30px;margin-left:-1.5px;border-radius:1px;background:var(--navy)}
.range-lab{position:absolute;top:36px;transform:translateX(-50%);font-size:.8125rem;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.range-lab b{font-weight:500;color:var(--ink-3);margin-right:4px;font-size:.75rem}
.range-lab.l{left:var(--l)} .range-lab.r{left:var(--r)}
.range.is-thin .range-iqr{border:1.5px dashed var(--warn);background:repeating-linear-gradient(135deg,var(--warn-wash) 0 5px,var(--surface) 5px 10px)}
.range-caption{font-size:.8125rem;color:var(--ink-3)}

/* thin explanation, attached directly under the figure */
.thin-why{margin-top:12px;padding:12px 14px;border:1px solid var(--warn-line);border-radius:var(--radius-sm);background:var(--warn-wash);color:var(--ink);font-size:.875rem}
.thin-why strong{color:var(--warn)}
.thin-why ul{list-style:none;display:grid;gap:4px;margin:8px 0 0}
.thin-why li{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.thin-why li b{color:var(--warn)}

/* histogram: each .bar gets --h */
.histo{position:relative;display:flex;align-items:flex-end;gap:2px;height:200px;margin-top:28px;border-bottom:1px solid var(--ink-3)}
.histo .bar{flex:1;height:var(--h);min-height:0;border-radius:2px 2px 0 0;background:var(--series-3)}
.histo .bar.in{background:var(--series-1)}
.histo .mark,.strip .mark{position:absolute;top:-22px;bottom:0;left:var(--x);border-left:1.5px dashed var(--series-2)}
.histo .mark span,.strip .mark span{position:absolute;top:0;left:6px;font-size:.75rem;font-weight:500;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.histo .mark.q{border-left-color:var(--blue-700);border-left-style:dotted}
.histo .mark.q span{color:var(--blue-700);font-weight:400}
.histo .mark.q.l span{left:auto;right:6px}
.histo+.axis,.strip+.axis,figure .axis{position:relative;height:22px;margin-top:6px;font-size:.75rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
figure .axis span{position:absolute;left:var(--x);transform:translateX(-50%)}
figure .axis span:first-child{transform:none}
figure .axis span:last-child{transform:translateX(-100%)}
.panel-head .legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8125rem;color:var(--ink-2);list-style:none}
.panel-head .legend li{display:flex;align-items:center;gap:6px}
.sw{width:10px;height:10px;border-radius:2px;background:var(--series-3)}
.sw.in{background:var(--series-1)}
.sw.pt{border-radius:50%;background:var(--navy)}
.sw.hatch{border:1px dashed var(--warn);background:var(--warn-wash)}

/* strip plot for thin items: every observation drawn individually */
.strip{position:relative;height:120px;margin-top:28px;border-bottom:1px solid var(--ink-3)}
.strip-iqr{position:absolute;top:20px;bottom:0;left:var(--l);width:calc(var(--r) - var(--l));border:1px dashed var(--warn);border-bottom:0;background:repeating-linear-gradient(135deg,var(--warn-wash) 0 5px,transparent 5px 10px)}
.strip .dot{position:absolute;left:var(--x);bottom:var(--y);width:14px;height:14px;margin-left:-7px;border:2px solid var(--surface);border-radius:50%;background:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.strip .dot span{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:.6875rem;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.strip .mark{top:0}

/* observations table */
.obs{margin-top:40px}
.obs-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:14px}
.obs-head h2{font-size:1.25rem}
.obs-head p{margin-top:4px;color:var(--ink-2);font-size:.9375rem;max-width:62ch}
.obs-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.table-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.obs-table{width:100%;min-width:680px;border-collapse:collapse;font-size:.875rem}
.obs-table caption{text-align:left}
.obs-table th{padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);color:var(--ink-3);font:500 .75rem/1.25 var(--sans);text-transform:uppercase;letter-spacing:.05em;text-align:left;white-space:nowrap}
.obs-table td{padding:10px 14px;border-top:1px solid var(--line-soft);vertical-align:middle;font-variant-numeric:tabular-nums}
.obs-table tr:first-child td{border-top:0}
.obs-table tbody tr:hover td{background:var(--bg)}
.obs-table .r{text-align:right}
.obs-table .src-col{width:230px;padding-right:10px;position:sticky;right:0;background:var(--surface);box-shadow:-8px 0 8px -8px rgba(19,32,56,.1)}
.obs-table thead .src-col{background:var(--surface-2)}
.obs-table tbody tr:hover .src-col{background:var(--bg)}
.cell-sub{display:block;font-size:.75rem;color:var(--ink-3)}
.cell-price{font-size:.9375rem;font-weight:600;color:var(--navy)}
.delta{font-size:.8125rem}
.delta.up{color:var(--neg)} .delta.down{color:var(--pos)}
.contract{font:400 .8125rem var(--mono);color:var(--ink-2)}

/* THE SOURCE LINK — primary action on every row */
.src{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 8px;border:1px solid var(--blue-ring);border-radius:var(--radius-sm);background:var(--blue-wash);color:var(--blue-700);text-decoration:none}
.src:hover{border-color:var(--blue);background:var(--blue);color:var(--on-accent)}
.src-doc{position:relative;flex:none;display:grid;place-items:end center;width:24px;height:30px;padding-bottom:3px;border:1.5px solid currentColor;border-radius:2px 7px 2px 2px;background:var(--surface);color:var(--blue-700);font:600 .5625rem/1 var(--mono)}
.src:hover .src-doc{color:var(--blue-700);border-color:var(--surface)}
.src-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.src-title{font-size:.8125rem;font-weight:600;line-height:1.2}
.src-file{overflow:hidden;font:400 .6875rem/1.2 var(--mono);text-overflow:ellipsis;white-space:nowrap;opacity:.9}
.src-go{flex:none;font-size:1rem;line-height:1}
.table-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:.875rem;color:var(--ink-2)}

/* ---------- LUMP SUM (state B) ---------- */
.price-panel.is-ls{padding-top:0;overflow:hidden}
.ls-band{display:flex;align-items:center;gap:10px;margin:0 -24px 20px;padding:12px 24px;background:var(--navy);color:var(--on-accent);font-size:.875rem;font-weight:500}
.ls-band .tag-ls{background:var(--surface);color:var(--navy);border-color:var(--surface)}
.ls-note{margin-top:18px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);font-size:.875rem;color:var(--ink-2)}
.ls-note strong{color:var(--navy)}
.bands{width:100%;margin-top:24px;border-collapse:collapse;font-size:.875rem;font-variant-numeric:tabular-nums}
.bands caption{padding-bottom:8px;text-align:left;font-weight:600;color:var(--navy)}
.bands th{padding:6px 0;border-bottom:1px solid var(--line);color:var(--ink-3);font-size:.75rem;font-weight:500;text-align:left}
.bands td{padding:8px 0;border-bottom:1px solid var(--line-soft)}
.bands .r{text-align:right}

/* ---------- signed-out: "behind this price" ---------- */
.unlock h2{font-size:1.25rem}
.unlock>p{margin-top:6px;color:var(--ink-2);font-size:.9375rem}
.manifest{list-style:none;display:grid;gap:0;margin:20px 0;border-top:1px solid var(--line-soft)}
.manifest li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.manifest h3{font-size:.9375rem}
.manifest p{margin-top:2px;font-size:.8125rem;color:var(--ink-2)}
.manifest .pv{position:relative;height:44px;border-radius:var(--radius-xs);background:var(--surface-2)}
.manifest .pv-range::before{content:"";position:absolute;left:10px;right:10px;top:20px;height:3px;background:var(--surface-3)}
.pv-range::after{content:"";position:absolute;left:34%;width:28%;top:14px;height:14px;border:1.5px solid var(--blue);border-radius:2px;background:var(--blue-wash)}
.manifest .pv-histo{display:flex;align-items:flex-end;gap:2px;padding:6px 10px 0}
.pv-histo i{flex:1;height:var(--h);background:var(--series-3);border-radius:1px 1px 0 0}
.pv-histo i.in{background:var(--blue)}
.manifest .pv-rows{display:grid;gap:5px;align-content:center;padding:0 10px}
.pv-rows i{height:5px;border-radius:2px;background:var(--surface-3)}
.pv-rows i:nth-child(2){width:80%} .pv-rows i:nth-child(3){width:90%}
.manifest .pv-docs{display:flex;align-items:center;justify-content:center;gap:5px}
.pv-docs i{width:18px;height:24px;border:1.5px solid var(--blue);border-radius:1px 5px 1px 1px;background:var(--surface)}
.manifest li.key{margin:0 -12px;padding:14px 12px;border:1px solid var(--blue-ring);border-radius:var(--radius-sm);background:var(--blue-wash)}
.manifest li.key .pv{background:var(--surface)}
.unlock-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.unlock-cta span{font-size:.875rem;color:var(--ink-2)}
.unlock .fine{margin-top:12px}
.ghost{display:block;width:var(--w,70%);height:9px;border-radius:3px;background:var(--surface-3)}
.ghost.r{margin-left:auto}
.obs-table.is-ghost td{padding:14px}
.obs-table.is-ghost .src{pointer-events:none;border-style:dashed;background:var(--surface)}
.obs-table.is-ghost .src .ghost{background:var(--blue-ring)}
.ghost-fade td{opacity:.45}
.locked-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-top:1px solid var(--line);background:var(--surface-2);font-size:.9375rem;color:var(--ink-2)}
.locked-foot b{color:var(--navy);font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .item-grid{grid-template-columns:minmax(0,1fr)}
  .example-card{grid-template-columns:minmax(0,1fr)}
  .example-card>div+div{border-left:0;border-top:1px solid var(--line-soft)}
}
@media (max-width:1100px){
  .result-head,.result{grid-template-columns:minmax(0,1fr) auto}
  .result-price{align-items:flex-end}
  .result-unit,.result-obs{display:none}
  .result-head span:nth-child(2),.result-head span:nth-child(3),.result-head span:nth-child(4){display:none}
}
@media (max-width:860px){
  .results-layout{grid-template-columns:minmax(0,1fr);gap:20px}
  .filters{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 24px}
  .filters>.label,.filters>.btn{grid-column:1/-1}
  .coverage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .coverage div:nth-child(3){padding-left:0;border-left:0}
  .coverage div:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .header-search{display:none}
}
@media (max-width:640px){
  .result-head{display:none}
  .result{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .result-main{grid-column:1/-1}
  .result-price{flex-direction:row;align-items:center}
  .result-unit{display:none}
  .field--xl input{height:56px;font-size:1.0625rem;padding:0 16px}
  .field--xl .btn{padding:0 18px}
  .figure{font-size:2.4375rem}
  /* Pricing stays on a phone: someone deciding whether to pay should not have to
     reach the footer to find out what it costs.  Sign in folds away -- an
     existing customer knows where the account is, a prospective one does not
     know what it costs. */
  .site-header .nav a:not(.btn):not(.account):not(.nav-pricing){display:none}
  .site-head .nav a:not(.btn):not(.account){display:none}
  .manifest li{grid-template-columns:72px minmax(0,1fr)}
}

/* A component that sets display: overrides the browser default for [hidden].
   The header toggles account state with the attribute, so it has to win. */
[hidden]{display:none!important}

/* The gating sentinels wrap each panel; the grid must still see the panels. */
#g-cards,#g-dist{display:contents}

/* Hero.  A single fixed photograph, painted by the stylesheet so the page's
   largest element is discoverable in the preload scanner instead of waiting
   on JS.  ds.css restates the image for the split hero; keep them in step. */
.hero-slide{
  background-color:#132038;
  background-image:url("/assets/img/hero-bridge-deck.webp");
  background-size:cover;background-position:center;
}

/* A table caption was overlapping the heading above it on the pricing page. */
table caption{caption-side:top;text-align:left;padding:0 0 10px;color:var(--ink-3);font-size:.8125rem;line-height:1.45}

/* 2. Coverage figures read as a row of headlines, so they centre. */
.stats-band .coverage{text-align:center}
.stats-band .coverage div{padding:0 20px}
.stats-band .coverage div+div{padding-left:20px}

/* With the coverage note gone, .example was the first child of .content-white and
   its top margin collapsed out of the white section, showing a strip of page grey
   under the stats band.  Pad instead of margin so the white starts immediately. */
.content-white .example{margin-top:0;padding-top:56px}

/* Search results bar: the "items with N+ winning bids" qualifier under the count. */
.tail-note{margin:.5rem 0 0;color:var(--ink-3);font-size:.8rem}

/* Sample depth beside the headline price, not only in the distribution card. */
.price-panel .pp-depth{display:flex;align-items:center;gap:.5rem;margin:.1rem 0 .35rem}
.price-panel .pp-depth small{color:var(--ink-3);font-size:.8rem;font-weight:500}
.price-panel .pp-mix{color:var(--warn);font-weight:600}

/* Paid panels on the item page, and their locked state. */
.pro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px;margin:20px 0}
.panel-locked{border-style:dashed;background:var(--surface-2)}
.panel-locked .locked-why{color:var(--ink-3);font-size:.9rem;margin:.2rem 0 .9rem;max-width:52ch}
.seg-rows{list-style:none;margin:.4rem 0 0;padding:0}
.seg-rows li{display:grid;grid-template-columns:11rem 1fr 5.5rem 3rem;align-items:center;
  gap:.6rem;padding:.42rem 0;border-bottom:1px solid var(--line)}
.seg-rows li:last-child{border-bottom:0}
.seg-rows .sl{font-size:.86rem;color:var(--ink)}
.seg-rows .sb{position:relative;height:12px;background:var(--surface-2);border-radius:999px}
.seg-rows .sb i{position:absolute;top:0;height:12px;border-radius:999px;opacity:.55}
.seg-rows .sb b{position:absolute;top:-2px;width:2px;height:16px;background:var(--navy)}
.seg-rows .sv{text-align:right;font-size:.9rem;font-weight:620}
.seg-rows .sn{text-align:right;font-size:.8rem;color:var(--ink-3)}
.trend svg{width:100%;height:auto;display:block}
.trend circle{fill:var(--navy)}
.trend-axis{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-3);
  margin-top:.3rem}
.trend-delta{margin-left:.35rem;font-weight:640}
.trend-delta.up{color:var(--warn)}
.trend-delta.down{color:var(--ok)}
.obs-actions{margin-left:auto}
.roadmap{margin:.6rem 0 0;padding-left:1.1rem;color:var(--ink-2)}
.roadmap li{margin:.3rem 0;font-size:.9rem}
@media (max-width:640px){
  .seg-rows li{grid-template-columns:8rem 1fr 4.6rem}
  .seg-rows .sn{display:none}
}


/* The stats band on a phone.  Two columns, everything centred, and the labels
   given a fixed two-line box so a label that wraps cannot push its number out of
   line with the one beside it -- which is what made the band look ragged. */
@media (max-width:640px){
  .stats-band .coverage{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:8px 10px}
  .stats-band .coverage div{padding:12px 6px;border-left:0;border-top:0;text-align:center}
  .stats-band .coverage div:nth-child(2n){border-left:1px solid rgba(255,255,255,.22)}
  .stats-band .coverage div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.22)}
  .stats-band .coverage dt{display:flex;align-items:flex-end;justify-content:center;
    min-height:1.3em;line-height:1.25;font-size:.84rem;margin:0}
  .stats-band .coverage dd{font-size:1.5rem;margin-top:6px;line-height:1.1}
}

/* Pricing sits in the header now: someone deciding whether to pay should not have
   to reach the footer to find out what it costs.

   It carries no visual weight of its own. An earlier version set it bolder and
   brighter than Sign in, which read as two different kinds of link sitting side by
   side rather than one nav. The class stays because the mobile rule above uses it
   to keep Pricing visible when the rest of the nav folds away -- prominence comes
   from being in the header at all, not from out-styling its neighbour. */
.site-header .nav .nav-pricing{font-weight:inherit;color:rgba(255,255,255,.78)}
.site-header .nav .nav-pricing:hover{color:var(--on-accent)}
@media (max-width:560px){
  .site-header .wrap{gap:10px;min-height:54px}
  .site-header .nav{gap:10px;margin-left:auto;font-size:.82rem;white-space:nowrap}
  .site-header .nav .btn-sm{padding:.4rem .6rem;font-size:.78rem}
}
@media (max-width:380px){
  .site-header .brand{font-size:1rem}
  .site-header .nav{gap:8px;font-size:.78rem}
  .site-header .nav .btn-sm{padding:.36rem .5rem;font-size:.74rem}
}

/* ---- touch targets ---------------------------------------------------------
   Measured on a 390px viewport: the footer's navigation links rendered 20px tall
   and the header's Pricing link 42x20.  WCAG 2.5.8 puts the floor at 24px and a
   thumb is closer to 44px, so the two places a phone user actually navigates from
   were the two hardest things on the page to hit -- including the Pricing link
   that was moved into the header precisely so it would get tapped.

   Scoped to pointer:coarse rather than a width breakpoint: it is the input device
   that makes a 20px target hard, not the screen size, and it keeps the desktop
   footer's compact spacing exactly as designed.  Inline links inside running text
   are deliberately left alone -- WCAG exempts them, and padding them out would
   break the line spacing of every paragraph on the site. */
@media (pointer:coarse){
  .site-foot .cols a,
  .site-header .nav a:not(.btn),
  .site-head .nav a:not(.btn){
    min-height:34px;
    display:flex;
    align-items:center;
  }
  .foot-legal a{
    display:inline-flex;
    align-items:center;
    min-height:34px;
  }
  /* The homepage example-search chips: 30px tall, just under the floor. */
  .chip,.example-chip,.chips a,.chips button{min-height:34px}
}

/* ==========================================================================
   ROUND 4 — the full design system

   One header on every route, a real footer site map, and the shared blocks the
   new section pages are built from.  Appended, per the ordering rule at the top
   of this file: anything responsive goes in the re-assertions block at the end,
   never here.
   ========================================================================== */

/* ---------- header: section nav ---------- */
.site-header .wrap{gap:20px}
.nav-main{display:flex;align-items:center;gap:26px;font-size:.9rem;margin-left:8px}
.nav-main a{
  position:relative;color:rgba(255,255,255,.78);text-decoration:none;
  padding:22px 0;line-height:1;white-space:nowrap;
}
.nav-main a:hover{color:#fff}
.nav-main a.on{color:#fff;font-weight:500}
/* The active marker is a bar under the link, drawn on the header's own bottom
   edge so it reads as a tab rather than an underline. */
.nav-main a.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--blue);border-radius:2px 2px 0 0;
}
.nav-main a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}

/* ---------- header: mobile drawer ---------- */
.navburger{
  display:none;margin-left:auto;width:40px;height:40px;padding:9px 8px;
  background:transparent;border:1px solid rgba(255,255,255,.26);
  border-radius:var(--radius-sm);cursor:pointer;
}
.navburger span{display:block;height:2px;background:#fff;border-radius:2px;margin:3px 0}
.navburger:hover{background:rgba(255,255,255,.1)}
.navdrawer{display:none;border-top:1px solid rgba(255,255,255,.14);background:var(--navy)}
.navdrawer nav{
  display:flex;flex-direction:column;gap:2px;
  padding:10px var(--gut) 18px;max-width:var(--maxw-wide,1420px);margin:0 auto;
}
.navdrawer a:not(.btn){
  color:rgba(255,255,255,.86);text-decoration:none;font-size:1rem;
  padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.08);
}
.navdrawer a:not(.btn):hover{color:#fff}
.navdrawer .btn{margin-top:12px}
html.navopen{overflow:hidden}

/* ---------- footer: site map ---------- */
.site-footer{padding:56px 0 34px}
.site-footer .wrap{display:block}
.site-footer .cols{
  display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));
  gap:34px;align-items:start;
}
.site-footer .about .brand{font-size:1.2rem;margin-bottom:14px}
.site-footer .about p{
  margin:0 0 8px;max-width:34ch;font-size:.875rem;line-height:1.6;
  color:rgba(255,255,255,.62);
}
.site-footer .about p.dim{color:rgba(255,255,255,.44);font-size:.82rem}
.site-footer h4{
  margin:0 0 12px;font-size:.72rem;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}
.site-footer .cols a{
  display:block;padding:5px 0;font-size:.875rem;color:rgba(255,255,255,.78);
  text-decoration:none;
}
.site-footer .cols a:hover{color:#fff}
.site-footer .foot-legal{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
}
.site-footer .foot-legal p{margin:0;font-size:.8125rem;color:rgba(255,255,255,.5)}
.site-footer .foot-legal a{color:rgba(255,255,255,.72);text-decoration:underline}

/* ---------- section page hero ---------- */
.pagehero{
  background:var(--navy);color:#fff;padding:72px 0 64px;
  background-size:cover;background-position:center;
}
.pagehero .eyebrow{
  color:var(--blue-2,#7da4ff);font-size:.75rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:650;margin:0 0 14px;
}
.pagehero h1{
  margin:0 0 18px;font-size:clamp(2.1rem,4.6vw,3.35rem);line-height:1.08;
  letter-spacing:-.028em;font-weight:660;color:#fff;
}
.pagehero .lead{
  margin:0;max-width:62ch;font-size:1.0625rem;line-height:1.65;
  color:rgba(255,255,255,.8);
}
.pagehero.has-photo{background-color:#0b1426}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pillar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow-sm);
}
.pillar .pi{
  display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-sm);
  background:var(--blue-wash);color:var(--blue);margin-bottom:14px;
}
/* The icon set is drawn as outlines: without fill:none they render as solid
   blobs, which is how every new icon block on the site has to declare it. */
.pillar .pi svg,.flowcard .fi svg,.authlist .ck svg{
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.pillar .pi svg{width:19px;height:19px}
.pillar h3{margin:0 0 8px;font-size:1.0625rem;letter-spacing:-.01em}
.pillar p{margin:0;font-size:.9rem;line-height:1.62;color:var(--ink-2)}

/* ---------- closing CTA band ---------- */
.ctaband{background:var(--navy);color:#fff;padding:60px 0;margin-top:64px}
.ctaband h2{
  margin:0 0 10px;color:#fff;font-size:clamp(1.55rem,3vw,2.1rem);
  letter-spacing:-.022em;
}
.ctaband p{margin:0 0 26px;color:rgba(255,255,255,.74);font-size:1.0125rem}
.ctarow{display:flex;gap:12px;flex-wrap:wrap}
.ctaband .btn:not(.btn-primary){
  background:transparent;border-color:rgba(255,255,255,.34);color:#fff;
}
.ctaband .btn:not(.btn-primary):hover{background:rgba(255,255,255,.1);color:#fff}
.btn-lg{height:48px;padding:0 22px;font-size:1rem}
.btn-block{width:100%}

/* ---------- generic layout helpers ---------- */
.section{padding:56px 0}
.split2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;align-items:start}
.prose.narrow{max-width:70ch}
.card.padded{padding:26px 24px}
.arrowlink{
  display:inline-flex;align-items:center;gap:6px;font-weight:550;font-size:.9rem;
  color:var(--blue);text-decoration:none;
}
.arrowlink:hover{text-decoration:underline}
.linkish{
  background:none;border:0;padding:0;color:var(--blue);font:inherit;cursor:pointer;
  text-decoration:underline;
}

/* ---------- data page ---------- */
.flowgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.flowcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.flowcard .fi{
  display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-sm);
  background:var(--blue-wash);color:var(--blue);margin-bottom:16px;
}
.flowcard .fi svg{width:21px;height:21px}
.flowcard h3{margin:0 0 10px;font-size:1.125rem;letter-spacing:-.012em}
.flowcard p{margin:0 0 18px;font-size:.9rem;line-height:1.64;color:var(--ink-2);flex:1}
.fieldtbl td{padding:10px 12px;font-size:.875rem;vertical-align:top;line-height:1.55}
.fieldtbl td:first-child{white-space:nowrap;width:1%}
.exdata{padding:26px 24px}
.exdata h3{margin:.3rem 0 4px;font-size:1.25rem;letter-spacing:-.015em}
.exgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 4px}
.exgrid > div{
  background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:14px 15px;
}
.exgrid .k{
  display:block;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:6px;
}
.exgrid .v{display:block;font-size:1.3rem;font-weight:640;letter-spacing:-.02em}
.exgrid .s{display:block;font-size:.78rem;color:var(--ink-3);margin-top:2px}
.dbar{display:grid;grid-template-columns:8.5rem 1fr 5rem;align-items:center;gap:12px;padding:6px 0}
.dbl{font-size:.875rem;color:var(--ink-2)}
.dbt{display:block;height:9px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.dbt i{display:block;height:100%;border-radius:5px;background:var(--blue)}
.dbv{text-align:right;font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ---------- resources ---------- */
.resbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:22px;
}
.reschips{display:flex;gap:8px;flex-wrap:wrap}
.reschip{
  height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-2);font:500 .875rem/1 var(--sans);cursor:pointer;
}
.reschip:hover{background:var(--surface-2)}
.reschip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.ressearch input{
  height:38px;min-width:230px;padding:0 13px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);font:.9rem var(--sans);
}
.ressearch input:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-ring);
}
.resgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rescard{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 21px;
  text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.rescard:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-1px)}
.restag{
  align-self:flex-start;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
  font-weight:650;color:var(--blue);background:var(--blue-wash);
  border-radius:999px;padding:4px 9px;margin-bottom:13px;
}
.rescard h3{margin:0 0 9px;font-size:1.0125rem;line-height:1.35;letter-spacing:-.01em}
.rescard p{margin:0 0 16px;font-size:.875rem;line-height:1.6;color:var(--ink-2);flex:1}
.resempty{margin-top:22px;color:var(--ink-2)}

/* ---------- auth split ---------- */
.authsplit{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:calc(100vh - 60px);align-items:stretch;
}
.authpane{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:56px var(--gut);background:var(--bg);
}
.authpane .authcard{
  width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px 30px;box-shadow:var(--shadow);
}
.authcard h1{margin:.2rem 0 6px;font-size:1.55rem;letter-spacing:-.02em}
.authcard .sub{margin:0 0 22px;color:var(--ink-2);font-size:.9375rem;line-height:1.55}
.authcard label{
  display:block;margin:14px 0 6px;font-size:.8125rem;font-weight:600;color:var(--ink-2);
}
.authcard input[type=email],.authcard input[type=password]{
  width:100%;height:42px;padding:0 13px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);font:.9375rem var(--sans);
}
.authcard input:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-ring);
}
.authcard .hint{margin:6px 0 0;font-size:.8rem;color:var(--ink-3)}
.authcard .btn{margin-top:20px}
.authcard .swap{margin:16px 0 0;font-size:.875rem;color:var(--ink-2);text-align:center}
.authforgot{margin:10px 0 0;text-align:center;font-size:.8375rem}
.authmsg{
  margin:14px 0 0;padding:10px 12px;border-radius:var(--radius-sm);font-size:.875rem;
  background:#fdeceb;border:1px solid #f3c2bd;color:#8a231b;
}
.authmsg.ok{background:var(--ok-wash);border-color:var(--ok-line);color:var(--ok)}
.authfine{
  margin:18px auto 0;max-width:400px;font-size:.8125rem;line-height:1.6;
  color:var(--ink-3);text-align:center;
}
.authaside{
  background:var(--navy);color:#fff;display:flex;align-items:center;
  padding:56px var(--gut);
  background-image:linear-gradient(180deg,rgba(11,20,38,.9),rgba(11,20,38,.97)),
                   url(/assets/img/hero-drainage.webp);
  background-size:cover;background-position:center;
}
.authaside-in{max-width:440px}
.authaside .eyebrow{color:#7da4ff;margin:0 0 14px}
.authaside h2{
  margin:0 0 26px;color:#fff;font-size:1.65rem;line-height:1.28;letter-spacing:-.022em;
}
.authaside .authp{color:rgba(255,255,255,.78);line-height:1.65;margin:0 0 24px}
.authlist{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:18px}
.authlist li{display:flex;gap:13px;align-items:flex-start}
.authlist .ck{
  display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  background:rgba(125,164,255,.18);color:#9dbaff;margin-top:1px;
}
.authlist .ck svg{width:13px;height:13px}
.authlist strong{display:block;font-size:.9375rem;font-weight:600;color:#fff}
.authlist span:not(.ck){
  display:block;font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.66);margin-top:3px;
}
.authstat{
  margin:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.8125rem;color:rgba(255,255,255,.6);
}
.authstat .num{color:#fff;font-weight:620}
.authaside .btn{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.authaside .btn:hover{background:rgba(255,255,255,.1);color:#fff}

/* ==========================================================================
   ROUND 4 — responsive re-assertions.  These must stay at the very end of the
   file: theme.css is append-only by round, and a later rule beats an earlier
   @media block at every width.
   ========================================================================== */
@media (max-width:1180px){
  .nav-main{gap:18px;font-size:.855rem}
}
@media (max-width:1024px){
  /* The section nav and the account buttons cannot both fit; the drawer takes
     over and carries everything, so nothing becomes unreachable. */
  .nav-main{display:none}
  .site-header .nav{display:none}
  .navburger{display:block}
  .navdrawer{display:block}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flowgrid{grid-template-columns:1fr}
  .resgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split2{grid-template-columns:1fr;gap:30px}
  .site-footer .cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-footer .about{grid-column:1/-1}
  .authsplit{grid-template-columns:1fr;min-height:0}
  /* On a phone the argument for the account goes above the form, not below it:
     someone who arrived from a range lock already knows why they are here. */
  .authaside{order:-1;padding:38px var(--gut)}
  .authaside h2{font-size:1.35rem;margin-bottom:20px}
  .authaside .authlist{gap:14px;margin-bottom:20px}
  .authpane{padding:38px var(--gut)}
}
@media (max-width:760px){
  .pillars{grid-template-columns:1fr}
  .resgrid{grid-template-columns:1fr}
  .exgrid{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .pagehero{padding:52px 0 46px}
  .section{padding:40px 0}
  .ctaband{padding:44px 0;margin-top:44px}
  .ctarow .btn{width:100%}
  .dbar{grid-template-columns:7rem 1fr 4.4rem;gap:9px}
  .resbar{align-items:stretch}
  .ressearch,.ressearch input{width:100%;min-width:0}
}
@media (max-width:430px){
  .site-footer .cols{grid-template-columns:1fr}
  .authpane .authcard{padding:24px 20px}
}
/* Honour a reduced-motion preference: the only transitions here are hover
   affordances, and none of them carries meaning. */
@media (prefers-reduced-motion:reduce){
  .rescard,.rescard:hover{transition:none;transform:none}
}

/* ---- prose rhythm on the new section pages --------------------------------
   The legacy .prose rules were written for the legal pages, which set their own
   paragraph spacing. On About and Data the paragraphs ran together into a wall,
   so the block spacing is declared here rather than inherited by accident. */
.prose h2{margin:2.2rem 0 .8rem;font-size:1.45rem;letter-spacing:-.018em}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.6rem 0 .6rem;font-size:1.125rem}
.prose p{margin:0 0 1.05rem;line-height:1.72;color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0 0 1.05rem;padding-left:1.2rem;line-height:1.72;color:var(--ink-2)}
.prose li{margin:.3rem 0}
.section > h2,.split2 h2{margin:0 0 .7rem;font-size:1.45rem;letter-spacing:-.018em}
.section .muted{margin:0 0 1.2rem;color:var(--ink-2);line-height:1.6}

/* ---- homepage, round 4 ----------------------------------------------------- */
/* The emphasis in the headline is the whole positioning: not "what construction
   costs" but what it ACTUALLY costs, which is the difference between an index and
   a record. <em> rather than a span so it still reads as emphasis unstyled. */
.home-search h1 em{color:#5b8cff;font-style:normal}
.home-search h1{letter-spacing:-.032em;line-height:1.05}

.hchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hchip{
  display:inline-flex;align-items:center;height:34px;padding:0 14px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);
  font-size:.875rem;text-decoration:none;backdrop-filter:blur(2px);
}
.hchip:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.44);color:#fff}

.truststrip{background:var(--navy);border-top:1px solid rgba(255,255,255,.1)}
.truststrip ul{
  list-style:none;margin:0;padding:18px 0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
}
.truststrip li{display:flex;gap:12px;align-items:center}
.truststrip .ti{
  display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;
  border-radius:var(--radius-sm);background:rgba(91,140,255,.16);color:#8fb0ff;
}
.truststrip .ti svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.truststrip strong{display:block;font-size:.9375rem;font-weight:600;color:#fff;line-height:1.25}
.truststrip span:not(.ti){display:block;font-size:.8125rem;color:rgba(255,255,255,.58);margin-top:2px}

.props-h{
  margin:0 0 26px;font-size:clamp(1.5rem,2.6vw,1.95rem);letter-spacing:-.022em;
  max-width:24ch;
}
.props{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.prop{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow-sm);
}
.prop .pi{
  display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-sm);
  background:var(--blue-wash);color:var(--blue);margin-bottom:14px;
}
.prop .pi svg{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.prop h3{margin:0 0 8px;font-size:1.0625rem;letter-spacing:-.012em}
.prop p{margin:0;font-size:.9rem;line-height:1.62;color:var(--ink-2)}

/* round 4 homepage — responsive re-assertions (stay last) */
@media (max-width:1024px){
  .truststrip ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .props{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .truststrip ul{grid-template-columns:1fr;gap:14px;padding:16px 0}
  .props{grid-template-columns:1fr}
  .home-search h1{font-size:clamp(2rem,8vw,2.6rem)}
}

/* ---- live statistics band, round 4 -----------------------------------------
   Dark rather than the old bright blue: it sits directly under the navy trust
   strip, and two saturated blues stacked read as a banner ad. The number leads
   and the label follows, because the number is what the visitor came for. */
.stats-band{background:#0e1a30;border-top:1px solid rgba(255,255,255,.08)}
.stats-band .wrap{padding-top:0;padding-bottom:0}
.stats-band .coverage{
  border:0;margin:0;padding:30px 0;gap:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.stats-band .coverage div{
  padding:0 26px;border-left:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;align-items:flex-start;
}
.stats-band .coverage div:first-child{border-left:0;padding-left:0}
.stats-band .coverage .ci{
  display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);
  background:rgba(91,140,255,.16);color:#8fb0ff;margin-bottom:12px;
}
.stats-band .coverage .ci svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.stats-band .coverage dd{
  margin:0;color:#fff;font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:640;
  letter-spacing:-.028em;font-variant-numeric:tabular-nums;line-height:1.1;
}
.stats-band .coverage dt{
  margin-top:5px;color:rgba(255,255,255,.58);font-size:.82rem;font-weight:500;
  letter-spacing:.01em;
}

/* round 4 stats band — responsive re-assertions (stay last) */
@media (max-width:860px){
  .stats-band .coverage{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0;padding:24px 0}
  .stats-band .coverage div:nth-child(odd){border-left:0;padding-left:0}
  .stats-band .coverage div:nth-child(3){border-left:0}
}
@media (max-width:430px){
  .stats-band .coverage{grid-template-columns:1fr;gap:20px}
  .stats-band .coverage div{border-left:0;padding-left:0}
}

/* ---- item page: stat tiles and provenance, round 4 ------------------------- */
.itiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}
.itile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-sm);
}
.itile .ii{
  display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);
  background:var(--blue-wash);color:var(--blue);margin-bottom:12px;
}
.itile .ii svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.itile .iv{
  display:block;font-size:1.35rem;font-weight:640;letter-spacing:-.022em;
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.itile .il{
  display:block;margin-top:3px;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
}

/* The provenance panel is the argument for the whole product, so it is the one
   block on the page with a tinted ground rather than plain white. */
.prov{
  background:var(--blue-wash);border:1px solid #cfdcfa;border-radius:var(--radius);
  padding:24px 24px 22px;margin:22px 0;
}
.prov h2{margin:0 0 6px;font-size:1.125rem;letter-spacing:-.012em}
.prov-sub{margin:0 0 18px;font-size:.9rem;color:var(--ink-2);max-width:66ch}
.prov-dl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px 22px;margin:0 0 18px;
}
.prov-dl div{min-width:0}
.prov-dl dt{
  font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);font-weight:650;margin-bottom:4px;
}
.prov-dl dd{margin:0;font-size:.9375rem;color:var(--ink);line-height:1.4}
.prov .src{background:var(--surface);border-color:#c3d3f7}

/* round 4 item page — responsive re-assertions (stay last) */
@media (max-width:760px){
  .itiles{grid-template-columns:1fr;gap:12px;margin:18px 0}
  .itile{display:flex;align-items:center;gap:14px;padding:14px 16px}
  .itile .ii{margin-bottom:0;flex:0 0 34px}
  .itile .iv{font-size:1.15rem}
  .prov{padding:20px 18px}
}

/* ---- search filters, round 4 ----------------------------------------------- */
.filters-head{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.filters-head .label{margin:0;flex:1}
.clearall{font-size:.8125rem;color:var(--blue);text-decoration:none}
.clearall:hover{text-decoration:underline}
.filterclose{
  display:none;width:32px;height:32px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);
  font-size:1.2rem;line-height:1;cursor:pointer;color:var(--ink-2);
}
/* <details> for the groups: collapsible with no JavaScript, and it keeps working
   with the script blocked. */
details.filter-group{
  border:0;border-bottom:1px solid var(--line);padding:0 0 14px;margin:0 0 14px;
}
details.filter-group > summary{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;list-style:none;padding:4px 0;margin-bottom:8px;
  font-size:.8125rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);
}
details.filter-group > summary::-webkit-details-marker{display:none}
details.filter-group > summary::after{
  content:"";width:8px;height:8px;margin-left:8px;flex:0 0 8px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease;
}
details.filter-group[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
details.filter-group > summary:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:3px;
}
.findwrap input,.selwrap select{
  width:100%;height:34px;padding:0 10px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);font:.875rem var(--sans);
}
.findwrap input:focus,.selwrap select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-ring);
}
#agencylist{max-height:290px;overflow:auto}
.filter-note{margin:4px 0 0;font-size:.78rem;line-height:1.45;color:var(--ink-3)}
.results-bar .filterbtn{display:none;margin-right:12px}

/* round 4 search — responsive re-assertions (stay last) */
@media (max-width:900px){
  /* The sidebar becomes a drawer: on a phone a column of checkboxes above the
     results pushes the results themselves off the first two screens. */
  .results-bar .filterbtn{display:inline-flex}
  .results-layout{display:block}
  .filters{
    position:fixed;top:0;left:0;bottom:0;width:min(340px,86vw);z-index:60;
    background:var(--surface);border-right:1px solid var(--line);
    padding:18px 18px 28px;overflow:auto;
    transform:translateX(-102%);transition:transform .2s ease;
    box-shadow:var(--shadow-lg);
  }
  html.filtersopen .filters{transform:none}
  html.filtersopen body{overflow:hidden}
  html.filtersopen .filters::before{content:none}
  .filterclose{display:block}
  /* Scrim: a sibling would need markup, so the drawer's own shadow plus this
     fixed overlay on <html> does the job. */
  html.filtersopen::after{
    content:"";position:fixed;inset:0;z-index:55;background:rgba(11,20,38,.44);
  }
}
@media (prefers-reduced-motion:reduce){
  .filters{transition:none}
}

/* ---- coverage: the state tile map ------------------------------------------ */
.usmap{margin:0 0 26px;padding:0}
.usmap svg{width:100%;max-width:640px;height:auto;display:block;margin:0 auto}
.usmap .tc{transition:fill .12s ease}
.tc-0{fill:var(--surface-2);stroke:var(--line);stroke-width:1}
.tc-1{fill:#d7e2fb}
.tc-2{fill:#a8c0f5}
.tc-3{fill:#5c86e8}
.tc-4{fill:var(--blue)}
.usmap .tt{
  font:600 12px/1 var(--sans);text-anchor:middle;fill:var(--ink-2);
  pointer-events:none;letter-spacing:.02em;
}
.usmap .tt-0{fill:var(--ink-3)}
.usmap .tt-3,.usmap .tt-4{fill:#fff}
.usmap .tile-a{cursor:pointer}
.usmap .tile-a:hover .tc{fill:var(--navy)}
.usmap .tile-a:hover .tt{fill:#fff}
.usmap .tile-a:focus-visible .tc{stroke:var(--navy);stroke-width:2.5}
.maplegend{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin-top:16px;font-size:.8125rem;color:var(--ink-2);justify-content:center;
}
.maplegend .lg{display:inline-flex;align-items:center;gap:6px}
.maplegend .lg i{
  width:13px;height:13px;border-radius:3px;display:inline-block;
  background:currentColor;
}
.maplegend .lg i.tc-0{background:var(--surface-2);border:1px solid var(--line)}
.maplegend .lg i.tc-1{background:#d7e2fb}
.maplegend .lg i.tc-2{background:#a8c0f5}
.maplegend .lg i.tc-3{background:#5c86e8}
.maplegend .lg i.tc-4{background:var(--blue)}
.maplegend .lg-note{flex-basis:100%;text-align:center;color:var(--ink-3);font-size:.78rem}
.geo2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;align-items:start}
@media (max-width:860px){
  .geo2{grid-template-columns:1fr;gap:26px}
}
@media (prefers-reduced-motion:reduce){
  .usmap .tc{transition:none}
}

/* ---- item page: tabbed analytics ------------------------------------------- */
.itabs{margin:26px 0}
.itabs-strip{
  display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:22px;
  overflow-x:auto;scrollbar-width:thin;
}
.itabs-strip button{
  position:relative;flex:0 0 auto;padding:12px 16px;border:0;background:none;
  font:550 .9375rem/1 var(--sans);color:var(--ink-3);cursor:pointer;white-space:nowrap;
}
.itabs-strip button:hover{color:var(--ink)}
.itabs-strip button[aria-selected="true"]{color:var(--blue)}
.itabs-strip button[aria-selected="true"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;
  background:var(--blue);border-radius:2px 2px 0 0;
}
.itabs-strip button:focus-visible{
  outline:2px solid var(--blue);outline-offset:-2px;border-radius:4px;
}
/* Without the script every panel is visible in sequence, which is a correct page
   in its own right; the tab strip stays hidden until the script can drive it. */
.itabs-panel + .itabs-panel{margin-top:22px}
.itabs[data-itabs] .itabs-panel[hidden]{display:none}

.rellist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rellist a{
  display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:baseline;
  padding:11px 12px;border-radius:var(--radius-sm);text-decoration:none;color:inherit;
}
.rellist a:hover{background:var(--blue-wash)}
.rellist .rn{font-size:.9375rem;color:var(--ink);min-width:0}
.rellist a:hover .rn{color:var(--blue)}
.rellist .rp{font-weight:620;font-variant-numeric:tabular-nums;white-space:nowrap}
.rellist .ro{
  font-size:.8125rem;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums;min-width:6.5rem;text-align:right;
}

/* round 4 item tabs — responsive re-assertions (stay last) */
@media (max-width:640px){
  .itabs-strip button{padding:11px 12px;font-size:.875rem}
  .rellist a{grid-template-columns:1fr auto;gap:4px 12px}
  .rellist .ro{grid-column:1/-1;text-align:left;min-width:0}
}

/* ==========================================================================
   ROUND 4b — the hero, rebuilt against the mockup.

   What was wrong: the text ran 60% of the way across the photograph so the
   picture was mostly scrim, the headline broke at whatever width was left, the
   search field spanned the whole column, and two small grey <select>s sat on the
   image looking like a form somebody forgot to remove.

   The fix is a fixed narrow column. The headline is set to break in three, the
   copy is capped at ~54ch, and the search field and trust strip are bounded to
   the same column, so the photograph reads as a photograph on the right.
   ========================================================================== */
.hero-inner .home-search{max-width:660px}
.hero-eyebrow{
  margin:0 0 16px;font-size:.75rem;font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:#7da4ff;
}
.home-search h1{
  margin:0 0 20px;font-size:clamp(2.4rem,4.6vw,3.65rem);line-height:1.04;
  letter-spacing:-.034em;font-weight:660;max-width:14ch;
}
.home-search .lede{
  margin:0 0 26px;max-width:54ch;font-size:1.0625rem;line-height:1.62;
  color:rgba(255,255,255,.82);
}
.hero-inner .field--xl{max-width:620px;margin:0}
.hero-inner .hchips{max-width:620px;margin-top:14px}

/* The trust strip now lives on the photograph, under the chips. Two columns
   rather than four: four across 620px gives each one about nine characters. */
.hero-inner .truststrip{
  list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 28px;margin:34px 0 0;padding:24px 0 0;max-width:620px;
  border-top:1px solid rgba(255,255,255,.16);background:none;
}
.hero-inner .truststrip li{display:flex;gap:11px;align-items:center}
.hero-inner .truststrip .ti{
  display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;
  border-radius:var(--radius-sm);background:rgba(125,164,255,.16);color:#9dbaff;
}
.hero-inner .truststrip .ti svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.hero-inner .truststrip strong{
  display:block;font-size:.875rem;font-weight:600;color:#fff;line-height:1.25;
}
.hero-inner .truststrip span:not(.ti){
  display:block;font-size:.78rem;color:rgba(255,255,255,.55);margin-top:2px;
}
/* The scrim was tuned for text running the full width; with the copy in a 660px
   column it can fall away sooner and let the photograph through. */
.hero-photo .hero-scrim{
  background:linear-gradient(90deg,rgba(8,15,30,.94) 0%,rgba(8,15,30,.86) 34%,
             rgba(8,15,30,.48) 62%,rgba(8,15,30,.28) 100%);
}

/* round 4b hero — responsive re-assertions (stay last) */
@media (max-width:900px){
  .hero-inner .home-search,.hero-inner .field--xl,
  .hero-inner .hchips,.hero-inner .truststrip{max-width:none}
  .hero-photo .hero-scrim{
    background:linear-gradient(180deg,rgba(8,15,30,.9) 0%,rgba(8,15,30,.92) 100%);
  }
}
@media (max-width:560px){
  .hero-inner .truststrip{grid-template-columns:1fr;gap:13px;margin-top:26px;padding-top:20px}
  .home-search h1{max-width:none}
}

/* round 4b hero, second pass.
   The placeholder was being clipped at 620px, and the scrim still buried the
   right-hand third of the photograph. */
.hero-inner .field--xl,.hero-inner .hchips,.hero-inner .truststrip{max-width:700px}
.hero-photo .hero-scrim{
  background:linear-gradient(90deg,rgba(8,15,30,.93) 0%,rgba(8,15,30,.84) 36%,
             rgba(8,15,30,.42) 64%,rgba(8,15,30,.16) 100%);
}
@media (max-width:900px){
  .hero-inner .field--xl,.hero-inner .hchips,.hero-inner .truststrip{max-width:none}
  .hero-photo .hero-scrim{
    background:linear-gradient(180deg,rgba(8,15,30,.9) 0%,rgba(8,15,30,.92) 100%);
  }
}

/* round 4b: the value-prop band.
   The heading was wrapping mid-phrase and the cards were ragged because the copy
   lengths differ. A fixed measure on the heading and a flex column on the card
   fixes both without shortening anything to fit. */
.props-h{max-width:34ch;text-wrap:balance}
.prop{display:flex;flex-direction:column}
.prop p{flex:1}
/* The example card's two halves stretch to the same height, and the letting span
   is kept on one line so the left column does not end in a hole. */
.example-card{align-items:stretch}

/* The letting span wraps, and that is correct.
   Two earlier attempts made this worse. Forcing nowrap fixed a hole at the bottom
   of the desktop card but ran the date range under the card's right edge, where it
   was clipped; scoping the nowrap to >=860px kept the clipping at every width a
   laptop actually uses. A two-line date range is not a defect -- the three columns
   just need to be allowed to size to their content and wrap inside it. */
.example-card .ex-row{
  grid-template-columns:repeat(3,minmax(0,auto));
  gap:0 1.75rem;align-items:start;
}
.example-card .ex-row > div{min-width:0}
.example-card .ex-row dd{white-space:normal;line-height:1.35}

/* round 4b: the homepage hero's default frame, and the auth panel's photograph.
   The CSS default must match the preloaded image or the browser fetches one frame
   and paints another. */
.hero-photo .hero-slide{background-image:url("/assets/img/hero-bridge-deck.webp")}
.authaside{
  background-image:linear-gradient(180deg,rgba(11,20,38,.9),rgba(11,20,38,.97)),
                   url(/assets/img/hero-pipe.webp);
}

/* The coverage hero stays light.
   It was going to carry the aerial photograph, but .shero is a light band with
   dark text, a promo aside and four stat cards inside it; putting a dark image
   behind that means recolouring all of it, and a half-recoloured hero with grey
   text on a photograph is worse than a clean light one. The aerial is used on the
   homepage rotation instead, where the treatment already exists. */

/* ---- skeleton rows and sticky table headers, round 4 ----------------------- */
.result.is-skel{pointer-events:none}
.sk{
  display:block;height:.75rem;border-radius:4px;
  background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,
             var(--surface-2) 100%);
  background-size:220% 100%;animation:skshimmer 1.15s linear infinite;
}
.sk-name{width:56%;height:.95rem;margin-bottom:.45rem}
.sk-meta{width:32%;height:.7rem}
.sk-price{width:4.6rem;height:1rem;margin-left:auto}
.sk-unit{width:2.2rem;height:.7rem}
.sk-obs{width:3.4rem;height:.7rem;margin-left:auto}
@keyframes skshimmer{from{background-position:120% 0}to{background-position:-120% 0}}
/* A shimmering placeholder is decoration, not information: with reduced motion it
   becomes a flat block rather than disappearing, so the layout still holds. */
@media (prefers-reduced-motion:reduce){
  .sk{animation:none;background:var(--surface-2)}
}

/* Sticky headers on the long tables. The observation table on a deep item runs to
   200 rows, and by row 40 the column a number belongs to is a guess. */
.table-scroll{max-height:none}
.obs-table thead th,
.table-scroll table thead th{
  position:sticky;top:0;z-index:2;background:var(--surface);
  box-shadow:inset 0 -1px 0 var(--line);
}
.results .result-head{
  position:sticky;top:0;z-index:2;background:var(--surface);
  box-shadow:inset 0 -1px 0 var(--line);
}

/* ---- methodology: the five-step process, round 4 ---------------------------
   Five loose white cards read as a list. These read as a sequence: a connector
   between each pair, the step number and the icon for what that step does on one
   line, and a blue top edge that only the hovered card lights up. */
.psteps{gap:1rem}
.pstep{padding:1.15rem 1.05rem;overflow:visible}
.pstep::before{
  content:"";position:absolute;inset:-1px -1px auto -1px;height:3px;
  border-radius:var(--radius) var(--radius) 0 0;background:var(--line);
  transition:background .14s ease;
}
.pstep:hover::before{background:var(--blue)}
/* The connector. Drawn on the card rather than between them so it survives the
   grid re-flowing at every breakpoint; hidden on the last card of each row by the
   media queries below. */
.pstep::after{
  content:"";position:absolute;top:calc(1.15rem + 13px);right:-1rem;width:1rem;
  height:1px;background:var(--line);
}
.pstep:last-child::after{display:none}
.pstep-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.pstep .no{margin:0;width:28px;height:28px;font-size:.8rem}
.pstep .pico{
  display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-sm);
  background:var(--blue-wash);color:var(--blue);
}
.pstep .pico svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.pstep h3{font-size:1rem;margin:0 0 .35rem;letter-spacing:-.01em}
.pstep p{font-size:.845rem;line-height:1.55}
@media (max-width:1200px){
  .psteps .pstep:nth-child(3n)::after{display:none}
}
@media (max-width:700px){
  .psteps .pstep:nth-child(3n)::after{content:""}
  .psteps .pstep:nth-child(2n)::after{display:none}
}
@media (max-width:460px){
  .pstep::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pstep::before{transition:none}
}

/* The five step cards share a row, so they share a height: a ragged row of five
   reads as five unrelated notes rather than one sequence. */
.psteps{align-items:stretch}
.pstep{display:flex;flex-direction:column}
.pstep p{flex:1}

/* The pipeline figure's sample table. Its cells were being clipped at every width
   because the stage is a fixed-ish column inside a three-stage flex row; the
   content now fits, and the table is allowed to lay out to it rather than being
   forced to a width it cannot honour. */
.ptbl{overflow-x:auto}
.ptbl table{width:100%;table-layout:auto}
.ptbl td,.ptbl th{white-space:nowrap;padding:.42rem .55rem;font-size:.8rem}
.ptbl td:first-child{white-space:normal;min-width:11ch}

/* .covrow had two fixed columns — 190px label, 92px value — with a flexible track
   between them. Inside the methodology page's narrower container at 1024px the
   fixed pair plus gaps exceeded the width and the value column was pushed 46px
   past the page edge. All three columns can now shrink; the label keeps its
   ellipsis and the value keeps enough room for a seven-digit count. */
.covrow{
  grid-template-columns:minmax(5.5rem,190px) minmax(0,1fr) minmax(3.6rem,92px);
}
@media (max-width:620px){
  .covrow{grid-template-columns:minmax(4.5rem,130px) minmax(0,1fr) minmax(3.2rem,72px)}
}

/* ==========================================================================
   Focus visibility — WCAG 2.4.7.

   Measured with a keyboard: 8 to 49 interactive elements per page had no visible
   focus indicator at all. Several components set their own :focus-visible ring and
   the rest inherited nothing, so tabbing through the site was invisible. This is
   the floor, declared once for everything focusable; components that draw a better
   ring of their own still win, because they come earlier and are more specific
   only where they mean to be.
   ========================================================================== */
:where(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:3px;
}
/* On the navy surfaces a blue ring on near-navy is invisible. */
:where(.site-header, .site-footer, .pagehero, .hero-photo, .ctaband, .authaside,
       .stats-band) :where(a[href], button, input, select, summary):focus-visible{
  outline-color:#fff;
  outline-offset:3px;
}
/* The skip link is 1px until focused; it has to become a real, visible control. */
.visually-hidden:focus,.visually-hidden:focus-visible{
  position:fixed;top:12px;left:12px;z-index:200;
  width:auto;height:auto;margin:0;padding:10px 16px;clip:auto;clip-path:none;
  overflow:visible;white-space:normal;
  background:var(--surface);color:var(--ink);border:1px solid var(--blue);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);font-weight:600;
}
/* Footer column headings are h2s for the document outline; the look is unchanged. */
.site-footer .foot-h{
  margin:0 0 12px;font-size:.72rem;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}
.promo-h{font-size:1.0625rem;margin:0 0 .35rem;letter-spacing:-.01em}

/* ---- contact: arriving from an item page ----------------------------------- */
.citem{
  margin:0 0 4px;padding:10px 13px;border-radius:var(--radius-sm);
  background:var(--blue-wash);border:1px solid #cfdcfa;
  font-size:.875rem;color:var(--ink-2);
}
.citem strong{color:var(--ink)}
.item-report{
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:.875rem;color:var(--ink-3);
}
.item-report a{font-weight:550}

/* ---- coverage: agency table filter ----------------------------------------- */
.agbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;
}
.agfind{flex:1;min-width:190px}
.agfind input,.agsort select{
  width:100%;height:36px;padding:0 11px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);font:.875rem var(--sans);
}
.agsort select{width:auto;min-width:11rem}
.agfind input:focus,.agsort select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-ring);
}
.agcount{
  font-size:.8125rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.agnone{margin:14px 0 0;font-size:.875rem;color:var(--ink-2)}
.cov-tbl .sub{display:block;font-size:.76rem;color:var(--ink-3);margin-top:2px}
@media (max-width:560px){
  .agbar{gap:8px}
  .agfind,.agsort,.agsort select{width:100%;min-width:0;flex:1 1 100%}
  .agcount{flex:1 1 100%}
}

/* ==========================================================================
   Search results, round 4 — the columns the brief asked for.

   Was: Line item | Median | Unit | Winning bids.
   Now: Line item | Median | Range | Unit | Agencies | States | Last let | Bids.

   Agencies is a COUNT, not a name. A search row is a canonical item, and "RC Pipe
   (CL III)(24 in)" is priced by 25 agencies; picking one to display would imply
   the other 24 do not exist.
   ========================================================================== */
.result-head,.result{
  grid-template-columns:
    minmax(0,1fr)      /* line item              */
    110px              /* median                 */
    140px              /* p25-p75 range          */
    52px               /* unit                   */
    88px               /* agency count           */
    108px              /* states                 */
    72px               /* last letting year      */
    84px;              /* winning bids           */
  gap:14px;
}
.result-range,.result-ag,.result-st,.result-yr{
  font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.result-range{text-align:right}
.result-yr,.result-ag{text-align:right}
.result-range .rr{font-variant-numeric:tabular-nums}
.result-range .rr-lock a{color:var(--blue);text-decoration:none;font-size:.78rem}
.result-range .rr-lock a:hover{text-decoration:underline}

/* Under 1200px the full table stops being readable, so it stacks: the item keeps
   its own line and everything else becomes a labelled meta row underneath. A
   horizontally scrolling eight-column table on a laptop is not "exceptionally
   readable", which is what the brief asked for. */
@media (max-width:1200px){
  .result-head{display:none}
  .result{
    grid-template-columns:minmax(0,1fr) auto;
    gap:4px 14px;align-items:baseline;
  }
  .result-main{grid-column:1/-1}
  .result-price{grid-column:1;justify-self:start}
  .result-obs{grid-column:2;justify-self:end}
  .result-range,.result-unit,.result-ag,.result-st,.result-yr{
    grid-column:1/-1;display:inline;white-space:normal;text-align:left;
  }
  /* One meta line instead of five stacked cells. */
  .result-range::before{content:"Range "}
  .result-ag::before{content:" · "}
  .result-st::before{content:" · "}
  .result-yr::before{content:" · last let "}
  .result-range,.result-ag,.result-st,.result-yr{
    display:inline;font-size:.8rem;color:var(--ink-3);
  }
  .result-unit{display:none}
}

/* ---- chart tooltips --------------------------------------------------------
   Every chart already carried a title attribute, which the browser shows after a
   second's hover, never on keyboard focus, and not at all on touch. This upgrades
   them in place: same text, shown immediately, on hover AND on focus, so the
   charts are readable with a keyboard. */
.hstip{
  position:fixed;z-index:120;pointer-events:none;opacity:0;
  transform:translate(-50%,-100%) translateY(-9px);
  background:var(--navy);color:#fff;font:500 .78rem/1.4 var(--sans);
  padding:7px 10px;border-radius:var(--radius-sm);max-width:20rem;
  box-shadow:var(--shadow-lg);transition:opacity .09s ease;white-space:normal;
}
.hstip[data-on]{opacity:1}
.hstip::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--navy);
}
/* Chart marks become focusable, so the ring has to look deliberate on them. */
[data-tip]:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.hstip{transition:none}}

/* ---- search: table / distribution toggle ----------------------------------- */
.viewtog{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.viewtog button{
  padding:0 13px;height:32px;border:0;background:var(--surface);
  font:500 .8125rem/1 var(--sans);color:var(--ink-2);cursor:pointer;
}
.viewtog button + button{border-left:1px solid var(--line)}
.viewtog button:hover{background:var(--surface-2)}
.viewtog button.on{background:var(--blue);color:#fff}
.viewtog button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.rchart{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 18px;
}
.rchart-head h3{margin:0 0 4px;font-size:1.0625rem;letter-spacing:-.012em}
.rchart-head p{margin:0 0 18px;font-size:.85rem;color:var(--ink-2)}
.rchart-axis{
  display:flex;justify-content:space-between;margin-top:8px;
  font-size:.75rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.rchart .fine{margin-top:12px}
.rchart-none{margin:0;color:var(--ink-2);font-size:.9rem}
@media (max-width:760px){
  .results-bar{flex-wrap:wrap;gap:10px}
  .viewtog{order:3}
}

/* ---- item page: category photograph ---------------------------------------- */
.itemphoto{
  position:relative;height:150px;margin:22px 0 0;border-radius:var(--radius);
  background-size:cover;background-position:center;
  border:1px solid var(--line);overflow:hidden;
}
.itemphoto span{
  position:absolute;left:18px;bottom:14px;color:#fff;font-weight:600;
  font-size:.875rem;letter-spacing:.03em;text-transform:uppercase;
  text-shadow:0 1px 6px rgba(8,15,30,.6);
}
@media (max-width:640px){
  .itemphoto{height:112px;margin-top:18px}
}

/* ==========================================================================
   Watchlist — the star, and the tracked-items page.
   ========================================================================== */
.item-title{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.item-title h1{margin:0;flex:1;min-width:0}
.watchbtn{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font:550 .875rem/1 var(--sans);color:var(--ink-2);cursor:pointer;flex:0 0 auto;
  transition:border-color .13s ease,background .13s ease,color .13s ease;
}
.watchbtn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-wash)}
.watchbtn .wicon svg{
  width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linejoin:round;
}
.watchbtn.on{background:var(--blue);border-color:var(--blue);color:#fff}
.watchbtn.on .wicon svg{fill:currentColor}
.watchbtn:disabled{opacity:.55;cursor:default}
.watchbtn.is-anon{color:var(--ink-3)}

.wlbar{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.wlbar h2{margin:0;font-size:1.3rem;letter-spacing:-.018em}
.wlcount{font-size:.8125rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.wltbl{width:100%;border-collapse:collapse}
.wltbl th,.wltbl td{padding:13px 14px;text-align:left;vertical-align:top;font-size:.9rem}
.wltbl th{
  font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  font-weight:650;border-bottom:1px solid var(--line);
}
.wltbl td.n,.wltbl th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wltbl tbody tr + tr td{border-top:1px solid var(--line-soft)}
.wltbl a{font-weight:550;text-decoration:none}
.wltbl a:hover{text-decoration:underline}
.wsub{display:block;font-size:.76rem;color:var(--ink-3);margin-top:3px;font-weight:400}
/* Direction is carried by an arrow as well as colour: red-green alone fails for
   the ~8% of men with a colour deficiency, and this is a number people act on. */
.wchg{font-weight:600}
.wchg.up{color:var(--neg)}
.wchg.up::before{content:"\2191 "}
.wchg.down{color:var(--pos)}
.wchg.down::before{content:"\2193 "}
.wchg.flat{color:var(--ink-3)}
.wdim{color:var(--ink-3)}
.wdrop{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-sm);
  padding:5px 11px;font:.8125rem var(--sans);color:var(--ink-2);cursor:pointer;
}
.wdrop:hover{border-color:var(--neg);color:var(--neg)}
.wlstate{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;text-align:center;
}
.wlstate h3{margin:0 0 8px;font-size:1.15rem;letter-spacing:-.012em}
.wlstate p{margin:0 auto 20px;max-width:52ch;color:var(--ink-2);line-height:1.6}
.wlstate .btn + .btn{margin-left:10px}
.wlmsg{
  margin:14px 0 0;padding:10px 13px;border-radius:var(--radius-sm);font-size:.875rem;
  background:#fdeceb;border:1px solid #f3c2bd;color:#8a231b;
}
.navwatch{font-size:.875rem}
@media (max-width:640px){
  .item-title{gap:12px}
  .watchbtn{height:34px}
  .wlstate .btn{display:block;width:100%}
  .wlstate .btn + .btn{margin:10px 0 0}
}
@media (prefers-reduced-motion:reduce){.watchbtn{transition:none}}

/* ==========================================================================
   The section-page hero, unified.

   Methodology, Coverage, Pricing and Contact were built on `.shero`, a light
   gradient with dark text, while About, Data and Resources used the dark
   photographic band. Landing on one and then the other read as two different
   products. `.shero` is now the same dark band; everything that lives inside it
   is recoloured here rather than having four page bodies restructured.
   ========================================================================== */
.shero.has-photo{
  background-color:#0b1426;background-size:cover;background-position:center;
  border-bottom:0;padding:64px 0 56px;color:#fff;
}
.shero.has-photo .kicker{
  color:#7da4ff;font-size:.75rem;font-weight:650;letter-spacing:.13em;
  text-transform:uppercase;
}
.shero.has-photo h1{color:#fff;letter-spacing:-.03em;line-height:1.08}
.shero.has-photo .lede{color:rgba(255,255,255,.82);max-width:60ch}
.shero.has-photo a:not(.btn){color:#9dbaff}

/* The promo aside and the pricing verify panel: glass on the photograph rather
   than a white card punched into it. */
.shero.has-photo .promo,
.shero.has-photo .verify-panel{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:#fff;backdrop-filter:blur(3px);
}
.shero.has-photo .promo h2,
.shero.has-photo .promo h3,
.shero.has-photo .verify-panel h2{color:#fff}
.shero.has-photo .promo p,
.shero.has-photo .verify-panel p{color:rgba(255,255,255,.76)}
.shero.has-photo .promo svg{stroke:#9dbaff}
.shero.has-photo .verify-panel .ticks li{color:rgba(255,255,255,.86)}
.shero.has-photo .verify-panel .ticks li::before{color:#7da4ff}

/* Stat cards sitting on the photograph. */
.shero.has-photo .scard{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  box-shadow:none;
}
.shero.has-photo .scard .k{color:rgba(255,255,255,.62)}
.shero.has-photo .scard .v{color:#fff}
.shero.has-photo .scard .s{color:rgba(255,255,255,.55)}
.shero.has-photo .scard .si{background:rgba(125,164,255,.16)}
.shero.has-photo .scard .si svg{stroke:#9dbaff}

/* The pricing page's inline stat strip. */
.shero.has-photo .pstats{color:rgba(255,255,255,.78)}
.shero.has-photo .pstats strong,
.shero.has-photo .pstats b,
.shero.has-photo .pstats .num{color:#fff}
.shero.has-photo .pstats svg{stroke:#9dbaff}

@media (max-width:900px){
  .shero.has-photo{
    padding:48px 0 42px;
    background-image:linear-gradient(180deg,rgba(8,15,30,.9),rgba(8,15,30,.95)),
                     var(--shero-photo,none);
  }
}

/* The compare-plans caption sits inside .table-scroll, which draws a border, so
   with only bottom padding the text was pressed against that border and read as
   overlapping it. Pad it on all sides and give it a rule of its own, so it reads
   as the card's header rather than stray text on the table's edge. */
.cmp caption{
  padding:16px 18px;background:var(--surface);color:var(--ink-2);
  border-bottom:1px solid var(--line-soft);line-height:1.55;
}
.pricegrid .table-scroll,
.card > .table-scroll{overflow:hidden}

/* ---------- round 5: account & billing ----------------------------------- */
.acctdl{display:grid;gap:0;margin:0}
.acctdl>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid var(--line-soft)}
.acctdl>div:last-child{border-bottom:0}
.acctdl dt{font-size:.82rem;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em}
.acctdl dd{margin:0;font-size:.95rem;font-weight:600;color:var(--navy);
  text-align:right;overflow-wrap:anywhere}
.acctbtns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.15rem}
.acctbtns .btn{flex:1 1 auto}
@media (max-width:520px){
  .acctdl>div{flex-direction:column;gap:.2rem}
  .acctdl dd{text-align:left}
  .acctbtns .btn{flex:1 1 100%}
}

/* ---------- round 5b: hero trust strip, larger -------------------------------
   The four proof points were set at .875/.78rem, which read as fine print next to
   a 3.4rem headline -- the one part of the hero a visitor is meant to take in at a
   glance was the smallest thing on it. Stays last so the round-4b responsive
   re-assertions above cannot win on size. */
.hero-inner .truststrip{gap:22px 34px;padding-top:26px}
.hero-inner .truststrip li{gap:14px}
.hero-inner .truststrip .ti{flex:0 0 40px;width:40px;height:40px;border-radius:10px}
.hero-inner .truststrip .ti svg{width:20px;height:20px;stroke-width:1.75}
.hero-inner .truststrip strong{font-size:1.0625rem;line-height:1.3;letter-spacing:-.006em}
.hero-inner .truststrip span:not(.ti){
  font-size:.9375rem;color:rgba(255,255,255,.68);margin-top:3px;line-height:1.35}
@media (max-width:900px){
  .hero-inner .truststrip strong{font-size:1rem}
  .hero-inner .truststrip span:not(.ti){font-size:.9rem}
}
@media (max-width:520px){
  .hero-inner .truststrip{gap:18px}
  .hero-inner .truststrip .ti{flex:0 0 36px;width:36px;height:36px}
  .hero-inner .truststrip .ti svg{width:18px;height:18px}
  .hero-inner .truststrip strong{font-size:.9688rem}
  .hero-inner .truststrip span:not(.ti){font-size:.875rem}
}

/* ==========================================================================
   Round 6 — design system v2: paper, ink, blueprint blue, safety orange.

   The token block at the top does most of the re-skin, because the palette kept
   the old token names. This block handles the parts a token swap cannot reach:
   the header and footer change from a dark navy band to paper with a rule, the
   headline face becomes Inter Tight, and the accent forks in two -- blueprint
   blue for DATA, safety orange for ACTION. Those two were the same colour
   before, which is why the old site read as a dashboard rather than a document.

   It is last in the file on purpose: several of these selectors also appear in
   the bundle block above, and appending is how this sheet has always resolved
   that, rather than editing rules the bundle may regenerate.
   ========================================================================== */

/* ---------- type ---------- */
h1,h2,h3,.plan h3,.cvh,.props-h,.faq-head h2{
  font-family:var(--display);font-weight:640;color:var(--ink);
}
h1{letter-spacing:-.03em;line-height:1.06}
h2{letter-spacing:-.022em;line-height:1.16}
body{color:var(--ink-2)}
.num,.price,.mono,code,kbd,.acctdl dd,td .num{font-variant-numeric:tabular-nums}

/* Uppercase technical eyebrow with a small orange tick, per the references. */
.eyebrow,.kicker{
  display:flex;align-items:center;gap:8px;color:var(--ink-3);font-weight:600;
}
.eyebrow::before,.kicker::before{
  content:"";flex:none;width:9px;height:9px;border-radius:1px;
  background:var(--accent);
}

/* ---------- header: paper, not a navy band ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{min-height:66px}
.brand{
  color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.22rem;
  letter-spacing:.01em;text-transform:uppercase;
}
.brand:hover{color:var(--ink)}
.brand-mark{display:none}
.nav-main a{color:var(--ink-2);padding:24px 0}
.nav-main a:hover{color:var(--ink)}
.nav-main a.on{color:var(--ink);font-weight:600}
.nav-main a.on::after{background:var(--accent);height:2px}
.nav-main a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.nav a:not(.btn){color:var(--ink-2)}
.nav a:not(.btn):hover{color:var(--ink)}
.site-header .nav .nav-pricing{color:var(--ink-2)}
.site-header .nav .nav-pricing:hover{color:var(--ink)}
.header-search .field{
  border-color:var(--line);background:var(--surface);border-radius:var(--radius-sm);
}
.header-search .field input{color:var(--ink)}
.header-search .field input::placeholder{color:var(--ink-3)}
.header-search .field .btn{
  background:transparent;border-left:1px solid var(--line);color:var(--ink-2);
}
.header-search .field .btn:hover{background:var(--surface-2);color:var(--ink)}
.avatar{background:var(--blue)}
.navburger{border-color:var(--line)}
.navburger span{background:var(--ink)}
.navdrawer{background:var(--surface);border-bottom:1px solid var(--line)}
.navdrawer a{color:var(--ink-2)}

/* ---------- action vs data ---------- */
.btn{border-radius:var(--radius-sm)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:none;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-600);border-color:var(--accent-600);color:#fff}
.btn-secondary{
  background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none;
}
.btn-secondary:hover{background:var(--surface-2);border-color:#D6D6CF;color:var(--ink)}
.btn-ghost{color:var(--blue)}
a{color:var(--blue)}
a:hover{color:var(--blue-700)}
.plan .tag{background:var(--accent);color:#fff;border-color:var(--accent)}
.plan.featured{border-color:var(--accent-line)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- surfaces ---------- */
.card,.prop,.rescard,.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:none;
}
.table-scroll{border-radius:var(--radius)}
thead th{color:var(--ink-3);font-weight:600}

/* ---------- footer ---------- */
.site-footer{background:var(--graphite);border-top:0}

/* ---------- round 6: split hero ----------------------------------------------
   The photograph is a panel on the right, not a backdrop behind the words. The
   left 52% is paper, so the headline, the search field and the four proof points
   are all set against one known colour instead of against whichever frame the
   rotation happened to pick. */
.hero-photo.hero-split{
  position:relative;background:var(--bg);overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-photo.hero-split .hero-slides{
  position:absolute;inset:0 0 0 auto;width:50%;z-index:0;
}
.hero-photo.hero-split .hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:52% 50%;
}
/* Paper fades into the photograph rather than meeting it at a hard seam. */
.hero-photo.hero-split .hero-overlay{
  position:absolute;inset:0 0 0 auto;width:58%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(247,247,244,.92) 14%,
             rgba(247,247,244,.35) 40%,rgba(247,247,244,0) 68%);
}
.hero-photo.hero-split .hero-scrim{display:none}
.hero-photo.hero-split .hero-inner{
  position:relative;z-index:2;padding:76px 0 70px;
}
.hero-split .home-search{max-width:600px}
.hero-split .hero-eyebrow{
  display:flex;align-items:center;gap:8px;
  color:var(--ink-3);font-size:.75rem;font-weight:650;letter-spacing:.11em;
  text-transform:uppercase;margin:0 0 18px;
}
.hero-split .hero-eyebrow::before{
  content:"";flex:none;width:9px;height:9px;border-radius:1px;background:var(--accent);
}
.hero-split h1{
  font-family:var(--display);font-weight:680;color:var(--ink);
  font-size:clamp(2.3rem,1.5rem+2.6vw,3.5rem);line-height:1.04;letter-spacing:-.034em;
  margin:0 0 20px;max-width:none;
}
.hero-split .lede{
  color:var(--ink-2);font-size:1.0625rem;line-height:1.6;max-width:50ch;margin:0 0 26px;
}
.hero-split .field--xl{
  max-width:600px;background:var(--surface);border:1px solid #D9D9D2;
  border-radius:var(--radius-sm);box-shadow:none;padding:.3rem .3rem .3rem .9rem;
}
.hero-split .field--xl input{color:var(--ink)}
.hero-split .field--xl input::placeholder{color:var(--ink-3)}
.hero-split .hchips{max-width:600px;margin-top:14px}
.hero-split .hchip{
  background:var(--surface);border-color:var(--line);color:var(--ink-2);
  backdrop-filter:none;border-radius:var(--radius-sm);
}
.hero-split .hchip:hover{background:var(--surface-2);border-color:#D0D0C8;color:var(--ink)}
/* Trust strip, now on paper. */
.hero-split .truststrip{
  max-width:600px;border-top:1px solid var(--line);
  grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px;margin-top:36px;padding-top:26px;
}
.hero-split .truststrip .ti{background:var(--blue-wash);color:var(--blue)}
.hero-split .truststrip strong{color:var(--ink);font-size:1.0625rem}
.hero-split .truststrip span:not(.ti){color:var(--ink-3);font-size:.9375rem}

/* Below 1080px the photograph stops earning its half and the copy takes the page. */
@media (max-width:1080px){
  .hero-photo.hero-split .hero-slides{width:38%}
  .hero-photo.hero-split .hero-overlay{width:52%}
  .hero-split .home-search,.hero-split .field--xl,
  .hero-split .hchips,.hero-split .truststrip{max-width:560px}
}
@media (max-width:860px){
  .hero-photo.hero-split .hero-slides,
  .hero-photo.hero-split .hero-overlay{display:none}
  .hero-photo.hero-split .hero-inner{padding:52px 0 48px}
  .hero-split .home-search,.hero-split .field--xl,
  .hero-split .hchips,.hero-split .truststrip{max-width:none}
}

/* ---------- round 6: KPI strip on paper --------------------------------------
   Was a second dark band immediately under a dark hero, which read as two
   unrelated headers. Mono numerals, one rule above and below, nothing else. */
.stats-band{background:var(--surface);border-bottom:1px solid var(--line)}
.stats-band .coverage{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:26px 0;
}
.stats-band .coverage>div{padding:0 28px;border-left:1px solid var(--line)}
.stats-band .coverage>div:first-child{border-left:0;padding-left:0}
.stats-band .ci{display:inline-grid;place-items:center;width:30px;height:30px;
  border-radius:var(--radius-xs);background:var(--blue-wash);color:var(--blue);margin-bottom:10px}
.stats-band .ci svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.stats-band dd{margin:0;font-family:var(--mono);font-weight:500;color:var(--ink);
  font-size:clamp(1.5rem,1.1rem+1.1vw,2rem);letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.stats-band dt{margin-top:5px;font-size:.8125rem;color:var(--ink-3)}
@media (max-width:820px){
  .stats-band .coverage{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0}
  .stats-band .coverage>div:nth-child(odd){border-left:0;padding-left:0}
}

/* Round 6 fixes — hero gutter, height and seam.
   .hero-inner is a .wrap, and setting `padding:76px 0` above wiped the wrap's own
   horizontal gutter, so the headline was sitting 8px from the viewport edge. */
:root{--maxw-wide:1440px}
.hero-photo.hero-split .hero-inner{
  padding:74px var(--gut) 66px;
  min-height:600px;display:flex;align-items:center;
}
.hero-photo.hero-split .hero-slides{width:46%}
.hero-photo.hero-split .hero-overlay{
  width:62%;
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 26%,rgba(247,247,244,.86) 46%,
             rgba(247,247,244,.42) 66%,rgba(247,247,244,0) 92%);
}
@media (max-width:1080px){
  .hero-photo.hero-split .hero-slides{width:36%}
  .hero-photo.hero-split .hero-overlay{width:56%}
}
@media (max-width:860px){
  .hero-photo.hero-split .hero-inner{min-height:0;padding:52px var(--gut) 48px}
}
.stats-band .coverage{padding:22px 0}

/* Round 6 — hero field width. The placeholder was being clipped mid-word because
   the button took its width out of a 600px box. */
.hero-split .field--xl{max-width:660px}
.hero-split .field--xl input{min-width:0;flex:1 1 auto}
.hero-split .home-search,.hero-split .hchips{max-width:660px}
.hero-photo.hero-split .hero-inner{min-height:540px}
@media (max-width:1080px){
  .hero-split .home-search,.hero-split .field--xl,.hero-split .hchips{max-width:560px}
}

/* Round 6 — KPI strip, overriding the round-4 dark-band rules above.
   Those used `.stats-band .coverage dd`, which outranks a bare `.stats-band dd`,
   so the numerals stayed white and vanished on paper. Matched specificity here. */
.stats-band{background:var(--surface);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.stats-band .coverage{padding:24px 0}
.stats-band .coverage div{border-left:1px solid var(--line)}
.stats-band .coverage div:first-child{border-left:0}
.stats-band .coverage .ci{
  background:var(--blue-wash);color:var(--blue);width:30px;height:30px;
  border-radius:var(--radius-xs);margin-bottom:11px;
}
.stats-band .coverage .ci svg{width:16px;height:16px}
.stats-band .coverage dd{
  color:var(--ink);font-family:var(--mono);font-weight:500;
  font-size:clamp(1.45rem,1.05rem+1.1vw,1.95rem);letter-spacing:-.025em;
}
.stats-band .coverage dt{color:var(--ink-3);font-size:.8125rem}
@media (max-width:860px){
  .stats-band .coverage div:nth-child(odd){border-left:0}
  .stats-band .coverage div:nth-child(3){border-left:0}
}

/* Round 6 — hero height and field. The input was not shrinking, so the button
   pushed the placeholder out of its own box. */
.hero-photo.hero-split .hero-inner{padding:62px var(--gut) 58px;min-height:0}
.hero-split .field--xl input{min-width:0;flex:1 1 1px;width:100%}
.hero-split .field--xl{display:flex;align-items:center;gap:.4rem}

/* Round 6 — hero search field, final. Turning .field--xl into a flex row collapsed
   the button, because the bundle sizes it with padding and flex gave it a zero
   basis. Input takes the slack; the button keeps its own size and full height. */
.hero-split .field--xl{
  display:flex;align-items:stretch;gap:0;padding:0 0 0 1rem;overflow:hidden;
  border-radius:var(--radius-sm);
}
.hero-split .field--xl input{
  flex:1 1 auto;min-width:0;width:auto;border:0;background:transparent;
  padding:1rem 0;font-size:1rem;
}
.hero-split .field--xl .btn{
  flex:0 0 auto;align-self:stretch;height:auto;margin:0;border-radius:0;
  padding:0 1.6rem;font-size:.95rem;
}

/* ==========================================================================
   Round 6 — inner-page heroes: paper, not a photograph.

   Methodology, Coverage, Pricing, Contact, About, Data and Resources all carried
   a dark photographic band. Two problems. Every element inside had to be
   recoloured for white-on-photo, which is why the pricing stat tiles rendered
   their labels and not their numbers the moment the palette went light -- the
   numerals were still `color:#fff`. And a photograph behind body copy means the
   contrast ratio depends on which frame loaded.

   These heroes are now paper with faint blueprint linework, per the references.
   The homepage keeps its photograph, because there the image IS the argument;
   on a methodology page it was decoration that cost legibility.
   ========================================================================== */
.shero-blueprint{
  background-color:var(--bg);
  background-image:
    linear-gradient(to right,rgba(49,95,121,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(49,95,121,.055) 1px,transparent 1px);
  background-size:64px 64px,64px 64px;
  background-position:right top;
  border-bottom:1px solid var(--line);
  padding:66px 0 58px;color:var(--ink-2);position:relative;overflow:hidden;
}
/* A single crosshair, top right, at the intersection of the drawing grid. */
.shero-blueprint::after{
  content:"";position:absolute;top:56px;right:7%;width:88px;height:88px;
  pointer-events:none;opacity:.5;
  background:
    linear-gradient(to right,transparent 43px,rgba(49,95,121,.3) 43px,
      rgba(49,95,121,.3) 45px,transparent 45px),
    linear-gradient(to bottom,transparent 43px,rgba(49,95,121,.3) 43px,
      rgba(49,95,121,.3) 45px,transparent 45px);
}
@media (max-width:900px){.shero-blueprint::after{display:none}}

.shero-blueprint .kicker,.shero-blueprint .eyebrow{
  display:flex;align-items:center;gap:8px;
  color:var(--ink-3);font-size:.75rem;font-weight:650;letter-spacing:.11em;
  text-transform:uppercase;
}
.shero-blueprint .kicker::before,.shero-blueprint .eyebrow::before{
  content:"";flex:none;width:9px;height:9px;border-radius:1px;background:var(--accent);
}
.shero-blueprint h1{
  color:var(--ink);font-family:var(--display);font-weight:680;
  letter-spacing:-.032em;line-height:1.05;
  font-size:clamp(2.1rem,1.4rem+2.3vw,3.1rem);
}
.shero-blueprint .lede{color:var(--ink-2);max-width:62ch}
.shero-blueprint a:not(.btn){color:var(--blue)}
.shero-blueprint a:not(.btn):hover{color:var(--blue-700)}

/* The asides that used to be glass on a photograph are cards on paper. */
.shero-blueprint .promo,
.shero-blueprint .verify-panel{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  backdrop-filter:none;border-radius:var(--radius);
}
.shero-blueprint .promo h2,
.shero-blueprint .promo h3,
.shero-blueprint .verify-panel h2{color:var(--ink);font-family:var(--display)}
.shero-blueprint .promo p,
.shero-blueprint .verify-panel p{color:var(--ink-2)}
.shero-blueprint .promo svg{stroke:var(--blue)}
.shero-blueprint .verify-panel .ticks li{color:var(--ink-2)}
.shero-blueprint .verify-panel .ticks li::before{color:var(--blue)}

.shero-blueprint .scard{
  background:var(--surface);border-color:var(--line);box-shadow:none;
}
.shero-blueprint .scard .k{color:var(--ink-3)}
.shero-blueprint .scard .v{color:var(--ink);font-family:var(--mono);font-weight:500}
.shero-blueprint .scard .s{color:var(--ink-3)}
.shero-blueprint .scard .si{background:var(--blue-wash)}
.shero-blueprint .scard .si svg{stroke:var(--blue)}

/* The inline stat strip. These three were the blank numerals. */
.shero-blueprint .pstats{color:var(--ink-3)}
.shero-blueprint .pstats strong,
.shero-blueprint .pstats b,
.shero-blueprint .pstats .num,
.shero-blueprint .pstats .tv{
  color:var(--ink);font-family:var(--mono);font-weight:500;
  font-variant-numeric:tabular-nums;
}
.shero-blueprint .pstats .tl{color:var(--ink-3)}
.shero-blueprint .pstats svg{stroke:var(--blue)}
.shero-blueprint .tile{border-right-color:var(--line)}
.shero-blueprint .tile .ti svg{stroke:var(--blue)}
.shero-blueprint .tile .tv{color:var(--ink);font-family:var(--mono);font-weight:500}
.shero-blueprint .tile .tl{color:var(--ink-3)}

/* The light non-photo .shero keeps the same type treatment so the two cannot
   drift apart again. */
.shero{background:var(--bg);border-bottom:1px solid var(--line)}
.shero h1{font-family:var(--display);color:var(--ink);letter-spacing:-.03em}

/* ==========================================================================
   Round 6b — the hardcoded blues.

   Roughly forty rules named a blue hex directly rather than a token, so the
   palette swap left tinted panels, periwinkle borders and a navy footer behind
   on pages that were otherwise already on paper. These are the ones the token
   block could not reach. Each is mapped to its role in the new system: tinted
   panel -> paper or white, hairline -> concrete, data ramp -> blueprint.
   ========================================================================== */

/* Tinted section bands become paper. A band earns a tint only when it is
   separating two dense sections, and then it is paper against white. */
.hero-x{background:var(--bg)}
.procband{background:var(--bg);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.cmp .feat{background:var(--surface-2)}

/* Periwinkle hairlines become concrete. */
.callout,.notice,.prov .src,.pill.s-developer_cfa,.unlock{border-color:var(--line)!important}
.notice,.callout{background:var(--surface-2)}
.btn-secondary:hover,.filters select:hover,.dclose:hover{border-color:#D6D6CF}

/* The coverage map: a blueprint ramp, light to dark, so the quartiles read as
   one scale instead of three unrelated blues. */
.tc-0{fill:var(--surface-3)}
.tc-1{fill:#CFDCE3}
.tc-2{fill:#8FAEBF}
.tc-3{fill:var(--blue)}
.maplegend .lg i.tc-1{background:#CFDCE3}
.maplegend .lg i.tc-2{background:#8FAEBF}
.maplegend .lg i.tc-3{background:var(--blue)}
.usmap .tile-a:hover .tc{fill:var(--accent)}
.usmap .tile-a:hover .tt{fill:#fff}
.usmap .tile-a:focus-visible .tc{stroke:var(--blue);stroke-width:2.5}

/* Footer: graphite, not navy. */
:root{--foot:#111820}
.site-foot{background:var(--foot);color:#9AA5AE}
.site-foot a{color:#9AA5AE}
.site-foot a:hover{color:#fff}
.foot-legal a{color:#9AA5AE}
.foot-h{color:#fff}

/* Dark CTA band. Orange on graphite is the one place the CTA inverts. */
.cta .btn-primary{background:var(--accent);color:#fff}
.cta .btn-primary:hover{background:var(--accent-600);color:#fff}

/* Icon chips that were periwinkle-on-navy. */
.authaside .eyebrow{color:rgba(255,255,255,.72)}

/* ==========================================================================
   Round 6b — .pagehero, the other dark photo band.

   Account, watchlist and the auth pages use `.pagehero.has-photo`, a separate
   dark band from `.shero`. Same treatment, so every page above the fold is one
   surface.
   ========================================================================== */
.pagehero,.pagehero.has-photo{
  background-color:var(--bg);background-image:
    linear-gradient(to right,rgba(49,95,121,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(49,95,121,.055) 1px,transparent 1px);
  background-size:64px 64px,64px 64px;background-position:right top;
  border-bottom:1px solid var(--line);color:var(--ink-2);
}
.pagehero h1,.pagehero.has-photo h1{
  color:var(--ink);font-family:var(--display);font-weight:680;letter-spacing:-.032em;
}
.pagehero .lede,.pagehero.has-photo .lede{color:var(--ink-2)}
.pagehero .eyebrow,.pagehero.has-photo .eyebrow{
  display:flex;align-items:center;gap:8px;color:var(--ink-3);
}
.pagehero .eyebrow::before,.pagehero.has-photo .eyebrow::before{
  content:"";flex:none;width:9px;height:9px;border-radius:1px;background:var(--accent);
}
.pagehero a:not(.btn){color:var(--blue)}

/* ==========================================================================
   Round 6c — one chart grammar.

   Rule, applied everywhere: the data is blueprint blue, the median is safety
   orange, gridlines are concrete, and nothing else gets a colour. The old sheet
   alternated bar fills (`.vb:nth-child(even)` was a brighter blue) purely for
   rhythm, which reads as a second series that does not exist. Quantity is shown
   by length, never by hue.
   ========================================================================== */
.vb .vbar{background:var(--series-1);border-radius:3px 3px 0 0}
.vb:nth-child(even) .vbar{background:var(--series-1)}
.vb .vv{color:var(--ink);font-family:var(--mono);font-weight:500;
  font-variant-numeric:tabular-nums}
.vb .vl{color:var(--ink-3)}

.covrow .track{background:var(--surface-2)}
.covrow .fill,.covrow .fill.alt{background:var(--series-1);border-radius:4px}
.covrow .v{color:var(--ink)}
.covrow .lab{color:var(--ink-2)}

.histo .bar{background:var(--series-3);border-radius:2px 2px 0 0}
.histo .bar.in{background:var(--series-1)}
.sw{background:var(--series-3)}
.sw.in{background:var(--series-1)}
/* The median is the only orange mark on a chart, and it is dashed so it still
   reads without colour. */
.histo .mark,.strip .mark{border-left:1.5px dashed var(--median)}

.hist .bar{fill:var(--series-1);opacity:.9}
.hist .bar:hover{opacity:1}
.hist .bar.out{fill:var(--series-3);opacity:.85}

.chart .area{fill:var(--blue);opacity:.08}
.chart .line{stroke:var(--median)}
.chart .pt:hover .dot,.chart .pt:focus .dot{fill:var(--median)}
.chart .grid line,.chart .grid path{stroke:var(--line)}

/* The p25-p75 strip on an item page. */
.dist .bar{background:var(--surface-2)}
.dist .iqr{background:var(--blue-wash);border:1px solid #CBDBE3}
.dist .med{background:var(--median);width:3px}
.dist .obs{background:var(--series-2)}
.seg .bar{border-radius:4px}

/* ==========================================================================
   Round 6d — item detail.

   The reference makes this page read as an instrument: one horizontal
   intelligence strip across the top, then the receipt, then the tabs. What was
   here was a tall median card with three tiles stacked beneath it, so the five
   numbers a user actually compares were spread over 500px of scroll.

   The markup is unchanged. `.itiles` becomes the strip, `.prov` becomes the
   branded receipt, and the figures move to mono so a price column lines up.
   ========================================================================== */

/* ---- head ---- */
.crumbs{font-size:.8125rem;color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--blue)}
.item-kicker .mono,.item-kicker .tag{font-family:var(--mono);font-size:.8rem}
.item-title{
  font-family:var(--display);font-weight:680;color:var(--ink);
  letter-spacing:-.032em;line-height:1.05;
}
.item-meta{color:var(--ink-3);font-size:.875rem}
.item-meta strong,.item-meta b{color:var(--ink);font-weight:600}

/* ---- the intelligence strip ---- */
.itiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin:0 0 22px;
}
.itile{
  display:flex;flex-direction:column;gap:2px;padding:16px 20px;
  border-left:1px solid var(--line);background:transparent;border-radius:0;
  box-shadow:none;border-top:0;border-right:0;border-bottom:0;
}
.itile:first-child{border-left:0}
.itile .ii{display:none}
.itile .iv{
  font-family:var(--mono);font-weight:500;color:var(--ink);
  font-size:1.18rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2;
}
.itile .il{
  font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);
}
@media (max-width:760px){
  .itiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .itile:nth-child(odd){border-left:0}
  .itile:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---- the price panel ---- */
.price-panel{background:var(--surface);border:1px solid var(--line);box-shadow:none}
.price-panel .label{
  font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
.price-panel .price,.price-panel .figure{
  font-family:var(--mono);font-weight:500;color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.price-panel .per{color:var(--ink-3);font-family:var(--mono)}
.stats .num{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- the receipt ----------------------------------------------------------
   This is the brand device, so it gets the one piece of deliberate decoration
   on the page: a document-edge rule down the left, a mono label, and a source
   action that looks like something you tear off. */
.prov{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);
}
.prov>h2,.prov>h3{
  font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.prov-sub{color:var(--ink-2);font-size:.9rem}
.prov-dl dt,.prov-dl .il,.prov-dl .label{
  font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
}
.prov-dl dd,.prov-dl .iv{color:var(--ink);font-size:.9375rem}
.prov .src{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.prov .src:hover{border-color:var(--accent-line);background:var(--accent-wash)}
.src-title{color:var(--ink);font-weight:600}
.src-file{font-family:var(--mono);font-size:.78rem;color:var(--ink-3)}
.src-doc{
  font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.06em;
  color:var(--blue);background:var(--blue-wash);border:1px solid #CBDBE3;
  border-radius:var(--radius-xs);
}
.src-go{color:var(--ink-3)}
.prov .src:hover .src-go{color:var(--accent)}

/* ---- tabs ---- */
.itabs-strip{border-bottom:1px solid var(--line);gap:26px}
.itabs-strip button,.itabs-strip a{
  color:var(--ink-3);font-weight:550;font-size:.9rem;padding:12px 0;border:0;background:none;
}
.itabs-strip button:hover{color:var(--ink)}
.itabs-strip [aria-selected="true"],.itabs-strip .on{
  color:var(--ink);font-weight:650;box-shadow:inset 0 -2px 0 var(--accent);
}
.itabs-body{padding-top:22px}
.panel{background:var(--surface);border:1px solid var(--line);box-shadow:none;
  border-radius:var(--radius)}
.panel-locked{background:var(--surface-2);border-style:dashed}

/* ---- watch ---- */
.watchbtn{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--radius-sm);
}
.watchbtn:hover{border-color:#D6D6CF;background:var(--surface-2)}
.watchbtn[aria-pressed="true"]{
  border-color:var(--accent-line);background:var(--accent-wash);color:var(--accent-700);
}
.watchbtn[aria-pressed="true"] .wicon{color:var(--accent)}

/* ==========================================================================
   Round 6e — search results.
   ========================================================================== */
.search-top{
  background:var(--bg);border-bottom:1px solid var(--line);padding:38px 0 30px;
  background-image:
    linear-gradient(to right,rgba(49,95,121,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(49,95,121,.05) 1px,transparent 1px);
  background-size:64px 64px,64px 64px;background-position:right top;
}
.search-top h1{
  font-family:var(--display);font-weight:680;color:var(--ink);
  font-size:clamp(1.9rem,1.3rem+1.9vw,2.6rem);letter-spacing:-.032em;
  line-height:1.06;margin:0 0 10px;
}
.search-lede{color:var(--ink-2);max-width:62ch;margin:0 0 22px;font-size:1rem}
.search-top .field--lg{
  max-width:720px;background:var(--surface);border:1px solid #D9D9D2;
  border-radius:var(--radius-sm);box-shadow:none;display:flex;align-items:stretch;
  padding:0 0 0 1rem;overflow:hidden;
}
.search-top .field--lg input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;padding:.92rem 0;font-size:1rem;
}
.search-top .field--lg .btn{flex:0 0 auto;border-radius:0;padding:0 1.5rem}

/* The results column sat on the page background, so the whole right-hand side
   read as an empty grey plate before anything loaded. */
.results-layout{background:transparent;padding-top:26px;padding-bottom:40px}
.filters{background:transparent}
.filters-head .label{
  font-size:.7rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
.clearall{color:var(--blue);font-size:.8125rem}
.filter-group summary,.filter-group>summary{
  font-size:.72rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
}
.check{color:var(--ink-2);font-size:.875rem}
.check .count{color:var(--ink-3);font-family:var(--mono);font-size:.78rem}
.more{color:var(--blue);font-size:.8125rem}

/* Table / Distribution: a quiet segmented control, not a filled navy pill. */
.viewtog{border-color:var(--line);border-radius:var(--radius-sm)}
.viewtog button{color:var(--ink-3);background:var(--surface)}
.viewtog button:hover{background:var(--surface-2);color:var(--ink)}
.viewtog button.on{background:var(--surface-2);color:var(--ink);font-weight:650;
  box-shadow:inset 0 -2px 0 var(--accent)}
.rsort select:hover,.fside select:hover{border-color:#D6D6CF}

/* Round 6e fixes.
   `.results` is a 1px-gap flex stack whose own background shows through as the
   row separator. That colour was the separator AND the empty-state backdrop, so
   with no results the whole right-hand column read as a grey plate. */
.results{background:var(--line);border-radius:var(--radius);overflow:hidden}
.results:empty{background:transparent}
.results .result,.results .result-head{background:var(--surface)}
.rhead .rcount strong{color:var(--ink)}

/* Only the filter group headings are uppercase. The "+ 12 more" disclosure is a
   sentence and was being shouted. */
.filter-group>summary{text-transform:uppercase}
.more-details>summary,.more,.more-closed,.more-open{
  text-transform:none;letter-spacing:0;font-weight:500;
}

/* Round 6f — pagehero copy colour and a quieter drawing grid.
   The lede class here is `.lead`, not `.lede`, so the round-6b rule missed it and
   the watchlist strapline was white on paper. The grid also ran edge to edge,
   which reads as graph paper rather than as a drawing; it is now masked to the
   top-right corner where the crosshair sits. */
.pagehero .lead{color:var(--ink-2)}
.pagehero h1{line-height:1.05}
.pagehero,.shero-blueprint,.search-top{
  -webkit-mask-image:none;
}
.pagehero::before,.shero-blueprint::before,.search-top::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,var(--bg) 0%,var(--bg) 38%,rgba(247,247,244,.72) 58%,
             rgba(247,247,244,0) 86%);
}
.pagehero,.search-top{position:relative;overflow:hidden}
.pagehero>*,.shero-blueprint>*,.search-top>*{position:relative;z-index:1}
@media (max-width:860px){
  .pagehero::before,.shero-blueprint::before,.search-top::before{background:var(--bg)}
}

/* Round 6g — every remaining dark surface becomes graphite, so the site has one
   dark value rather than navy in some places and near-black in others. */
.authaside,.ctaband,.cta,.site-footer,.site-foot,.promo-dark,.verifcard.dark{
  background-color:var(--graphite);
}
.authaside{background-image:none}
.authaside h2,.ctaband h2,.cta h2{color:#fff;font-family:var(--display)}
.authaside p,.ctaband p,.cta p{color:rgba(255,255,255,.76)}
.authaside .ticks li,.ctaband .ticks li{color:rgba(255,255,255,.86)}
.authaside .ticks li::before,.authaside svg{color:var(--accent);stroke:var(--accent)}
.authaside .eyebrow::before,.ctaband .eyebrow::before{background:var(--accent)}
.authaside strong,.authaside b{color:#fff}
.ctaband .btn-secondary,.cta .btn-secondary{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.32);
}
.ctaband .btn-secondary:hover,.cta .btn-secondary:hover{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff;
}

/* Round 6h — WCAG AA on the call to action.
   Anything that puts white text on orange uses --accent-strong. The marks keep
   the brand hex, because a median line and an active underline are not text and
   never carry meaning by colour alone. */
.btn-primary,.plan .tag{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn-primary:hover{background:var(--accent-strong-600);border-color:var(--accent-strong-600)}
.cta .btn-primary{background:var(--accent-strong)}
.cta .btn-primary:hover{background:var(--accent-strong-600)}
.watchbtn[aria-pressed="true"]{color:var(--accent-strong-600)}

/* ==========================================================================
   Round 7 — homepage to the reference.

   Geometry first, because it is also the fix for the soft photography. The hero
   panel was ~720x730 CSS px, a near-square crop out of a 2228x880 landscape
   source: at 2x that is a 1.6x UPSCALE, which is what made the images look soft
   on a retina screen. The reference's hero is much shorter and the panel wider,
   which lands close to the native aspect and stops the upscaling.
   ========================================================================== */

/* ---- header ---- */
.site-header .wrap{min-height:62px;gap:20px}
.nav-main{gap:24px;font-size:.9375rem}
.nav-main a{padding:20px 0}
.nav{gap:12px}
.nav .btn-sm{padding:.5rem .9rem;font-size:.875rem}
.nav .btn-secondary{background:var(--surface);border-color:var(--line);color:var(--ink)}
#navjoin{gap:.4rem}

/* ---- hero ---- */
.hero-photo.hero-split .hero-inner{padding:54px var(--gut) 50px;min-height:0}
.hero-photo.hero-split .hero-slides{width:54%}
.hero-photo.hero-split .hero-slide{background-position:50% 50%}
.hero-photo.hero-split .hero-overlay{
  width:64%;
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 30%,rgba(247,247,244,.84) 50%,
             rgba(247,247,244,.34) 72%,rgba(247,247,244,0) 94%);
}
.hero-split .home-search{max-width:560px}
.hero-split h1{font-size:clamp(2.2rem,1.45rem+2.35vw,3.25rem);margin:0 0 18px}
.hero-split .lede{font-size:1.0125rem;max-width:44ch;margin:0 0 24px}
.hero-split .field--xl,.hero-split .hchips{max-width:520px}

/* Magnifier inside the field, per the reference. */
.hero-split .field--xl{padding:0 0 0 .95rem;gap:.6rem;align-items:stretch}
.fieldicon{display:flex;align-items:center;color:var(--ink-3);flex:none}
.fieldicon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.hero-split .field--xl input{padding:.88rem 0;font-size:.975rem}
.hero-split .field--xl .btn{padding:0 1.45rem;font-size:.9375rem}
.hero-split .hchip{border-radius:999px;font-size:.8125rem;height:32px;padding:0 13px}

@media (max-width:1180px){
  .hero-photo.hero-split .hero-slides{width:44%}
  .hero-photo.hero-split .hero-overlay{width:58%}
}
@media (max-width:860px){
  .hero-photo.hero-split .hero-inner{padding:44px var(--gut) 40px}
  .hero-split .home-search,.hero-split .field--xl,.hero-split .hchips{max-width:none}
}

/* ---- KPI strip: icon beside the number, not above it ---- */
.stats-band .coverage{padding:20px 0}
.stats-band .coverage>div{
  display:flex;flex-direction:row;align-items:center;gap:14px;padding:4px 30px;
}
.stats-band .coverage .ci{margin-bottom:0;width:34px;height:34px;flex:none;
  background:transparent;color:var(--ink-3)}
.stats-band .coverage .ci svg{width:22px;height:22px;stroke-width:1.5}
.stats-band .coverage .cv{display:flex;flex-direction:column;min-width:0}
.stats-band .coverage dd{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.5rem,1.1rem+1.2vw,2.05rem);line-height:1.05;
}
.stats-band .coverage dt{margin-top:1px;font-size:.875rem;color:var(--ink-3)}
@media (max-width:820px){
  .stats-band .coverage>div{padding:8px 16px}
}

/* Round 7b — hero height, which is the real sharpness fix.
   A 2228x880 source can fill a 778 CSS px wide panel at 2x without upscaling only
   up to about 440 CSS px tall. The reference's hero is ~510px at this width, so
   matching it puts the crop back inside the source's native resolution instead of
   stretching it 1.6x. Everything below is trimmed to land there. */
.hero-photo.hero-split .hero-inner{padding:40px var(--gut) 40px}
.hero-split h1{font-size:clamp(2.05rem,1.35rem+2.1vw,2.95rem);margin:0 0 14px;line-height:1.05}
.hero-split .hero-eyebrow{margin:0 0 14px}
.hero-split .lede{font-size:1rem;margin:0 0 20px;line-height:1.55}
.hero-split .field--xl input{padding:.8rem 0}
.hero-split .hchips{margin-top:12px}
.hero-photo.hero-split .hero-slide{background-position:56% 50%}

/* Round 7c — the hero's real height budget.
   `.hero-photo` carried 88px/64px of its own padding on top of `.hero-inner`'s
   40/40, and a legacy `.hero-copy h1` rule was overriding the size back up to
   58px. Together that is ~190px of height nobody asked for, and it is what pushed
   the photo panel to 646px -- a 1.37x upscale of a 941px-tall source. Zeroing the
   outer padding and pinning the headline lands the panel at roughly its native
   resolution. */
.hero-photo.hero-split{padding:0}
.hero-photo.hero-split .hero-inner{padding:42px var(--gut) 44px}
.hero-photo.hero-split .home-search h1,
.hero-split h1#h1{
  font-size:clamp(2.05rem,1.3rem+2.1vw,3.25rem);line-height:1.06;margin:0 0 16px;
  font-family:var(--display);font-weight:680;letter-spacing:-.034em;
  /* No colour here. This rule carries an id selector, so it outranked every
     class-based override; while the hero sat on a light paper panel it set
     --ink, and when the hero became a full-bleed photograph that painted the
     headline near-black on a dark image. Colour now comes from ds.css. */
}

/* ---- Round 7d: the three sections the reference has and the page did not ---- */

/* Example header: heading left, supporting line and link right. */
.example > header{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:28px;align-items:end;margin-bottom:22px;
}
.example > header h2{
  font-family:var(--display);font-weight:680;color:var(--ink);
  font-size:clamp(1.5rem,1.1rem+1.3vw,2.05rem);letter-spacing:-.028em;margin:0;
}
.exh-sub{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.exh-sub p{margin:0;color:var(--ink-3);font-size:.9375rem;max-width:42ch}
.exh-sub a{font-size:.9375rem;font-weight:550}
@media (max-width:820px){
  .example > header{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
}

/* Three steps. */
.flow{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;
  padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.flowstep{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;
  column-gap:12px;row-gap:4px;align-items:center}
.flowstep .fn{
  grid-row:1;font-family:var(--mono);font-size:.8125rem;font-weight:600;
  color:var(--accent);letter-spacing:.02em;
}
.flowstep .fi{grid-row:1;display:grid;place-items:center;color:var(--ink-2)}
.flowstep .fi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.flowstep h3{grid-row:1;margin:0;font-family:var(--display);font-weight:650;
  font-size:1.0625rem;color:var(--ink)}
.flowstep p{grid-row:2;grid-column:3;margin:0;color:var(--ink-3);font-size:.9rem;
  line-height:1.5;max-width:34ch}
@media (max-width:860px){
  .flow{grid-template-columns:minmax(0,1fr);gap:22px;padding:26px 0}
}

/* Coverage band. */
.covband{background:var(--bg);border-bottom:1px solid var(--line);padding:56px 0 60px}
.covband-grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
  gap:52px;align-items:center;
}
.covband h2{
  font-family:var(--display);font-weight:680;color:var(--ink);margin:0 0 14px;
  font-size:clamp(1.55rem,1.1rem+1.5vw,2.2rem);letter-spacing:-.03em;line-height:1.12;
}
.covband .lede{color:var(--ink-2);font-size:1rem;margin:0 0 22px;max-width:46ch}
.covband .btn-secondary{color:var(--accent-strong);border-color:var(--accent-line)}
.covband .btn-secondary:hover{background:var(--accent-wash);border-color:var(--accent)}
.covband-map .usmap{width:100%;height:auto}
@media (max-width:940px){
  .covband-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .covband{padding:40px 0 44px}
}

/* Audience cards. */
.props-h{
  font-family:var(--display);font-weight:680;color:var(--ink);margin:0 0 26px;
  font-size:clamp(1.5rem,1.1rem+1.3vw,2.05rem);letter-spacing:-.028em;max-width:none;
}
.prop{padding:22px 20px}
.prop .pi{
  display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);
  background:var(--blue-wash);color:var(--blue);margin-bottom:14px;
}
.prop .pi svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.prop h3{margin:0 0 6px;font-family:var(--display);font-weight:650;font-size:1.0625rem;
  color:var(--ink)}
.prop p{margin:0;color:var(--ink-3);font-size:.9rem;line-height:1.5}

/* KPI dividers, which the round-7 padding change had dropped. */
.stats-band .coverage>div{border-left:1px solid var(--line)}
.stats-band .coverage>div:first-child{border-left:0;padding-left:0}

/* ---- Round 7e: the geographic map --------------------------------------------
   Paths now, not tiles. Stroke is paper so neighbouring states separate without a
   dark outline, and the hover fill is the accent so a clickable state reads as
   clickable. The legend still names every band: fill is never the only signal. */
.usmap svg{width:100%;height:auto;display:block}
.usmap .tc{stroke:var(--bg);stroke-width:1;stroke-linejoin:round;
  transition:fill .12s ease}
.usmap .tile-a{cursor:pointer}
.usmap .tile-a:hover .tc{fill:var(--accent)}
.usmap .tile-a:focus-visible{outline:none}
.usmap .tile-a:focus-visible .tc{stroke:var(--ink);stroke-width:2}
.maplegend{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:14px;
  font-size:.8125rem;color:var(--ink-3);
}
.maplegend .lg{display:inline-flex;align-items:center;gap:7px}
.maplegend .lg i{width:11px;height:11px;border-radius:2px;display:inline-block;
  border:1px solid rgba(17,24,32,.08)}
.maplegend .lg i.tc-0{background:var(--surface-3)}
.maplegend .lg i.tc-4{background:var(--blue-700)}
.lg-note{flex:1 1 100%;color:var(--ink-3)}
.tc-4{fill:var(--blue-700)}

/* The covered-state abbreviations beside the map. */
.mapchips{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.mapchips-h{
  display:block;font-size:.7rem;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;
}
.mapchips-grid{display:flex;flex-wrap:wrap;gap:6px}
.mapchips-grid a{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;
  height:26px;padding:0 7px;border:1px solid var(--line);border-radius:var(--radius-xs);
  background:var(--surface);color:var(--ink-2);font-family:var(--mono);
  font-size:.75rem;font-weight:500;text-decoration:none;
}
.mapchips-grid a:hover{border-color:var(--accent-line);background:var(--accent-wash);
  color:var(--accent-strong)}

/* On the homepage band the map is the right-hand half and needs no chip list --
   /coverage is one click away and carries the full breakdown. */
.covband-map .mapchips{display:none}
.covband-map .lg-note{display:none}

/* Example header baseline. */
.example > header{align-items:start}
.exh-sub{align-items:flex-start}

/* Round 7f — orange as TEXT has to be the darker variant.
   The step numerals and the coverage button label are text on paper: the brand
   hex is 2.98:1 there, which fails AA. Marks keep #F06432; anything read as a
   word uses --accent-strong. */
.flowstep .fn{color:var(--accent-strong)}
.covband .btn-secondary{color:var(--accent-strong)}
.mapchips-grid a:hover{color:var(--accent-strong)}
.watchbtn[aria-pressed="true"]{color:var(--accent-strong)}

/* ==========================================================================
   Round 8 — let the photograph read.

   The paper-to-photo fade was doing too much: it held full paper opacity to 30%
   of the overlay and was still at 84% at the midpoint, so the left third of the
   image was washed almost white and the subject only emerged near the right
   edge. The scrim exists to keep the headline legible, and the headline column
   ends well before the photo starts -- so the fade can be much shorter and much
   weaker than it was.

   Panel is wider, the opaque run is short, and the ramp clears to nothing by the
   midpoint instead of trailing to 94%.
   ========================================================================== */
.hero-photo.hero-split .hero-slides{width:58%}
.hero-photo.hero-split .hero-overlay{
  width:46%;
  background:linear-gradient(90deg,
    var(--bg) 0%,
    var(--bg) 22%,
    rgba(247,247,244,.72) 44%,
    rgba(247,247,244,.28) 68%,
    rgba(247,247,244,0) 100%);
}
@media (max-width:1180px){
  .hero-photo.hero-split .hero-slides{width:48%}
  .hero-photo.hero-split .hero-overlay{width:44%}
}

/* The section-page bands got the same treatment: the drawing-grid scrim was
   fading the linework out before it reached the right edge. */
.pagehero::before,.shero-blueprint::before,.search-top::before{
  background:linear-gradient(100deg,var(--bg) 0%,var(--bg) 34%,
             rgba(247,247,244,.55) 56%,rgba(247,247,244,0) 82%);
}

/* Round 8b — the overlay has to start where the photograph starts.
   The panel is 58% wide but the scrim was 46%, both right-aligned, so the scrim
   began 173px inside the image: a hard cut at the photo's left edge and a washed
   band further in. Same width, and the fade clears within the first half of it. */
.hero-photo.hero-split .hero-overlay{
  width:58%;
  background:linear-gradient(90deg,
    var(--bg) 0%,
    rgba(247,247,244,.92) 10%,
    rgba(247,247,244,.55) 26%,
    rgba(247,247,244,.18) 42%,
    rgba(247,247,244,0) 58%);
}
@media (max-width:1180px){
  .hero-photo.hero-split .hero-slides,
  .hero-photo.hero-split .hero-overlay{width:48%}
}


/* ============================================================
   Round 9 — rebuild regressions
   The rebuilt generator emitted class names this stylesheet had never heard
   of, so whole blocks fell back to browser defaults.  Each fix below names
   the symptom it removes.
   ============================================================ */

/* --- footer: .cols is now brand + THREE columns, not brand + four ---------
   The "How it works" column was deleted in the footer restructure but the grid
   template still reserved five tracks, so the three real columns were squeezed
   into the left half with a dead gap on the right. */
.site-foot .cols{grid-template-columns:1.7fr repeat(3,minmax(0,1fr));gap:2.4rem}
@media(max-width:860px){
  .site-foot .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.7rem}
  .site-foot .about{grid-column:1/-1}
}
@media(max-width:460px){
  .site-foot .cols{grid-template-columns:1fr}
}

/* The footer wordmark was dark navy on the dark navy footer — contrast 1.00,
   i.e. literally invisible.  It only ever got its white from a .mark child the
   rebuilt markup stopped emitting; the markup now emits it again, and this
   makes the colour explicit rather than inherited. */
.site-foot .brand{color:#fff;font-size:1.12rem;font-weight:700;letter-spacing:-.03em}
.site-foot .brand .mark{color:#fff}
.site-foot .about p{margin:.7rem 0 0}
.site-foot .about .fine{font-size:.78rem;opacity:.62;margin-top:.35rem}

/* --- .section was zeroing the page gutter --------------------------------
   `.section{padding:40px 0}` is a shorthand, so on any element that is BOTH
   .wrap and .section it also set padding-left/right to 0 and the content ran
   flush to the viewport edge.  Restore the horizontal gutter without touching
   the vertical rhythm. */
.wrap.section{padding-left:var(--gut);padding-right:var(--gut)}

/* --- resources cards: icons were unscoped ---------------------------------
   `.pi` is only sized and stroked inside .pillar and .prop.  The rebuilt
   resources grid used a bare `.pi`, so the SVGs took the browser default —
   fill:black and no intrinsic size — and rendered as 424px solid blobs. */
.rescard .pi{
  display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-sm);
  background:var(--blue-wash);color:var(--blue);margin-bottom:14px;
}
.rescard .pi svg{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Belt and braces: any future bare .pi inherits sane icon behaviour instead of
   painting a black blob the next time someone adds a card block. */
.pi svg{fill:none;stroke:currentColor}

/* Four featured cards read as 3-up + 1 orphan on desktop.  Two rows of two. */
.resgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
@media(max-width:720px){.resgrid{grid-template-columns:1fr}}
.rescard{display:flex;flex-direction:column}
.rescard p{flex:1 1 auto}
.reslink{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;
  font-size:.88rem;font-weight:600;color:var(--blue);
}
.rescard:hover .reslink{text-decoration:underline}

/* --- the source link's hover state was unreadable -------------------------
   `.src:hover` flips the box to solid blue and the anchor to white, but each
   child span carries its own explicit colour, so on hover the title stayed
   near-black (#111820) and the filename stayed grey on a dark blue field.
   The spans have to follow the anchor. */
.src:hover .src-title,
.src:hover .src-text,
.src:hover .src-file,
.src:hover .src-go,
.src:focus-visible .src-title,
.src:focus-visible .src-text,
.src:focus-visible .src-file,
.src:focus-visible .src-go{color:var(--on-accent)}
.src:hover .src-file,
.src:focus-visible .src-file{opacity:.82}
/* A global a:hover underline was striking through the composed label. */
.src:hover,.src:focus-visible{text-decoration:none}
.src:hover .src-title{text-decoration:underline;text-underline-offset:2px}

/* The source link has TWO hover treatments and the rule above only suited one.
   In the observation table `.src:hover` fills solid blue, so the child spans
   must go white.  Inside a provenance card `.prov .src:hover` fills a pale
   accent wash, where white spans would vanish just as badly as the near-black
   ones did on blue.  Put the light-hover colours back, after the white rule. */
.prov .src:hover .src-text,
.prov .src:focus-visible .src-text{color:var(--blue-700)}
.prov .src:hover .src-title,
.prov .src:focus-visible .src-title{color:var(--ink)}
.prov .src:hover .src-file,
.prov .src:focus-visible .src-file{color:var(--ink-3);opacity:1}
/* --accent on the pale accent wash is 2.83:1 — under the 3:1 floor for a
   non-text glyph.  --accent-strong is the same hue at 5.18:1. */
.prov .src:hover .src-go,
.prov .src:focus-visible .src-go{color:var(--accent-strong)}
.prov .src:hover .src-doc,
.prov .src:focus-visible .src-doc{color:var(--blue-700);border-color:var(--line)}


/* ============================================================
   Round 10 — page edits
   ============================================================ */

/* --- Data page: "from document to price" -------------------------------- */
.pipe4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;margin-top:1.3rem}
@media(max-width:900px){.pipe4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.pipe4{grid-template-columns:1fr}}
.pstep{position:relative;padding:1.1rem 1.1rem 1.1rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface-2)}
.pstep .pn{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;
  background:var(--blue);color:var(--on-accent);font-size:.8rem;font-weight:700;
  margin-bottom:.6rem}
.pstep h3{font-size:.98rem;margin:0 0 .35rem}
.pstep p{font-size:.88rem;color:var(--ink-2);margin:0}

/* --- Data page: the annotated specimen row ------------------------------
   Every value in here is read out of the index at build time, so the figure
   is a real observation rather than a mock-up. */
.rowspec{margin:1.4rem 0 0;padding:0;border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2)}
.rowspec-cap{padding:.8rem 1.1rem;border-bottom:1px solid var(--line);
  background:var(--surface);font-size:.86rem;color:var(--ink-3)}
.rowspec-cap a{font-weight:600}
.rowspec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line)}
@media(max-width:900px){.rowspec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.rowspec-grid{grid-template-columns:1fr}}
.rf{background:var(--surface);padding:.95rem 1.05rem 1rem;position:relative}
.rf .rfn{position:absolute;top:.85rem;right:.9rem;display:grid;place-items:center;
  width:19px;height:19px;border-radius:999px;background:var(--blue-wash);
  color:var(--blue-700);font-size:.68rem;font-weight:700}
.rf .rfk{display:block;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);font-weight:680;margin-bottom:.3rem}
.rf .rfv{display:block;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:.96rem;color:var(--ink);font-weight:600;line-height:1.35;
  margin-bottom:.45rem;word-break:break-word}
.rf .rfv .na{font-family:inherit;font-style:italic;font-weight:500;color:var(--ink-3)}
.rf .rfd{display:block;font-size:.81rem;color:var(--ink-2);line-height:1.5}
.rowspec-foot{margin:0;padding:.8rem 1.1rem;border-top:1px solid var(--line);
  background:var(--surface);font-size:.84rem;color:var(--ink-3)}

/* --- E: the four coverage tiles read too small for headline figures ------ */
.tiles .tile .tv{font-size:2.45rem;line-height:1.05;letter-spacing:-.025em}
.tiles .tile .tl{font-size:1rem;margin-top:.15rem}
.tiles .tile{padding:1.45rem 1.4rem}
.tiles .tile .ti svg{width:26px;height:26px}
@media(max-width:1100px){.tiles .tile .tv{font-size:2.05rem}}
@media(max-width:900px){.tiles .tile .tv{font-size:1.8rem}.tiles .tile .tl{font-size:.94rem}}

/* --- I: the sign-up right column was set small for a full-height panel --- */
.authaside .authaside-in h2{font-size:1.5rem;line-height:1.25}
.authaside .authlist li strong{font-size:1rem}
.authaside .authlist li span{font-size:.92rem;line-height:1.55}
.authaside .authstat{font-size:.92rem}
@media(max-width:1080px){.authaside .authaside-in h2{font-size:1.32rem}}

/* --- J: contact ---------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:1.3rem;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-side{display:grid;gap:1.3rem}
.fl2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:560px){.fl2{grid-template-columns:1fr}}
.fl .opt{font-weight:400;color:var(--ink-3);font-size:.82rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.steps-min{list-style:none;margin:.2rem 0 0;padding:0;counter-reset:s}
.steps-min li{position:relative;padding-left:1.9rem;margin-bottom:.85rem;
  font-size:.9rem;color:var(--ink-2);line-height:1.55}
.steps-min li:last-child{margin-bottom:0}
.steps-min li::before{counter-increment:s;content:counter(s);position:absolute;left:0;
  top:.05rem;display:grid;place-items:center;width:20px;height:20px;border-radius:999px;
  background:var(--blue-wash);color:var(--blue-700);font-size:.7rem;font-weight:700}
.steps-min li strong{color:var(--ink)}

/* --- K/L/M: "Last updated" now sits at the foot of the legal pages ------- */
.legal-updated{margin:0;font-size:.85rem;color:var(--ink-3)}

/* --- the contact form's own field class was never styled -----------------
   `.fl` showed up in the orphan sweep: the markup used it on every label but
   the stylesheet had no rule, so labels sat inline with their inputs, the
   textarea fell back to a monospace default and the whole form read as broken.
   This is the missing definition, not a restyle. */
.fl{display:block;margin-bottom:1rem;font-size:.87rem;font-weight:600;color:var(--ink)}
.fl > input,
.fl > select,
.fl > textarea{
  display:block;width:100%;margin-top:.4rem;padding:.62rem .75rem;
  font:inherit;font-weight:400;font-size:.95rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);
  -webkit-appearance:none;appearance:none;
}
.fl > textarea{min-height:9rem;line-height:1.55;resize:vertical}
.fl > select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C6872' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;
  background-size:12px 8px;padding-right:2.2rem;
}
.fl > input::placeholder,
.fl > textarea::placeholder{color:var(--ink-3);opacity:.85}
.fl > input:focus-visible,
.fl > select:focus-visible,
.fl > textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue);
}
#cform .btn{margin-top:.3rem}
#cform .fine{margin-top:.9rem}
#cmsg{margin-top:.9rem}
.fl > input,.fl > select,.fl > textarea{line-height:1.45}
.fl > select{height:auto;padding-top:.6rem;padding-bottom:.6rem}


/* ============================================================
   Round 11 — coverage charts, spacing, hover consistency
   ============================================================ */

/* --- the category bars never rendered ------------------------------------
   `.covrow .fill` is a <span>, and nothing ever gave it a display. An inline
   box ignores width and height, so every fill measured 0x0 and all you saw was
   the grey track — twelve identical pills carrying no information at all. */
.covrow .fill{display:block;height:100%;min-width:3px}
.covrow .track{display:block;position:relative;overflow:hidden}

/* Give the row a bit more chart and less dead label column, and let the value
   sit closer to the bar it belongs to. */
.covrow{grid-template-columns:minmax(6rem,150px) minmax(0,1fr) minmax(3.4rem,74px);
  gap:.7rem}
.covrow .lab{font-size:.88rem}
.covrow .track{height:18px;border-radius:4px}

/* --- "Documents by type": labels collided, chart floated in dead space ----
   The labels were nowrap at .72rem inside a grid column ~75px wide, so
   "All bids received" ran straight into "Bid tabulation". They wrap now, and
   the chart grows to use the height the card already had. */
.vbars{height:auto!important;min-height:210px;align-items:end;gap:.7rem}
.vb{justify-content:flex-end}
.vb .vbar{min-height:4px}
.vb .vl{white-space:normal;word-break:break-word;hyphens:auto;line-height:1.3;
  font-size:.7rem;margin-top:.5rem;max-width:100%}
.vb .vv{font-size:.72rem}
/* The three coverage cards are different natural heights; stretching them left
   a 255px void under the shortest chart. Let the chart body take the slack. */
.grid.g3 > .card{display:flex;flex-direction:column}
.grid.g3 > .card > .cvbody{flex:1 1 auto;display:flex;flex-direction:column;
  justify-content:flex-start}
.grid.g3 > .card > .cvbody > .vbars{margin-top:.4rem}

/* --- H: the map card sat flush against the three cards below it ---------- */
.grid.g3{margin-top:1.4rem}

/* --- G: the agency search + sort row ------------------------------------- */
.covtools{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:.9rem 0 .8rem}
.covtools input[type="search"],
.covtools select{
  font:inherit;font-size:.88rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.48rem .7rem;-webkit-appearance:none;appearance:none;
}
.covtools input[type="search"]{flex:1 1 11rem;min-width:0}
.covtools select{
  padding-right:2rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C6872' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:11px 7px;
}
.covtools input:focus-visible,
.covtools select:focus-visible{outline:2px solid var(--blue);outline-offset:1px;
  border-color:var(--blue)}
.covtools .agcount{font-size:.8rem;color:var(--ink-3);white-space:nowrap}
.cov-tbl tbody td{padding-top:.55rem;padding-bottom:.55rem}
.cov-tbl .dim{font-size:.76rem}

/* --- A: the three-step strip read as small grey text in a lot of space --- */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;
  padding:.4rem 0}
@media(max-width:820px){.flow{grid-template-columns:1fr;gap:.9rem}}
.flowstep{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon num" "icon title" "icon body";
  column-gap:1rem;row-gap:.15rem;align-items:start;
  padding:1.5rem 1.5rem 1.6rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
}
.flowstep .fi{grid-area:icon;display:grid;place-items:center;width:46px;height:46px;
  border-radius:12px;background:var(--blue-wash);color:var(--blue);align-self:start}
.flowstep .fi svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.flowstep .fn{grid-area:num;font-family:var(--mono);font-size:.7rem;font-weight:700;
  letter-spacing:.1em;color:var(--accent-strong)}
.flowstep h3{grid-area:title;margin:.1rem 0 .25rem;font-size:1.18rem;line-height:1.2}
.flowstep p{grid-area:body;margin:0;font-size:.94rem;line-height:1.55;color:var(--ink-2)}

/* --- B: one hover for the source link, everywhere -----------------------
   Item pages put the link inside .prov, which had its own pale-wash hover, so
   the same control behaved one way on the home page and another on an item
   page. The dark treatment wins; the .prov override and its text-colour
   patches are cancelled here rather than deleted above, because this file is
   append-only by round. */
.prov .src:hover,
.prov .src:focus-visible{border-color:var(--blue);background:var(--blue)}
.prov .src:hover .src-text,
.prov .src:hover .src-title,
.prov .src:hover .src-file,
.prov .src:hover .src-go,
.prov .src:focus-visible .src-text,
.prov .src:focus-visible .src-title,
.prov .src:focus-visible .src-file,
.prov .src:focus-visible .src-go{color:var(--on-accent)}
.prov .src:hover .src-file,
.prov .src:focus-visible .src-file{opacity:.82}
.prov .src:hover .src-doc,
.prov .src:focus-visible .src-doc{color:var(--blue-700);border-color:var(--surface)}

/* --- D/M: the gap between the last block and the footer ------------------
   .site-foot carried a 4rem margin-top on top of the last section's own
   padding, which read as a band of empty paper — and directly under the dark
   CTA it looked like a rendering fault. The CTA now runs straight into the
   footer; everything else keeps a smaller, deliberate gap. */
.site-foot{margin-top:2.25rem}
.ctaband + footer.site-foot,
.cta + footer.site-foot{margin-top:0}
.ctaband{margin-bottom:0}
main > :last-child{margin-bottom:0}

/* --- the coverage chart still floated above 243px of nothing ------------- */
.grid.g3 > .card > .cvbody > .vbars{flex:1 1 auto;max-height:400px}

/* --- About page spacing --------------------------------------------------
   Measured rather than eyeballed: .lede had 0 margin top and bottom, so two
   consecutive lead paragraphs ran together as one block; the hero's rule sat
   58px below the button and 56px above the next heading; the props grid ended
   56px above a .covband painted the same colour as the page, which read as a
   void rather than a section; and the covband's own bottom border drew a line
   36px above the footer for no reason. */
.lede + .lede{margin-top:.8rem}
.shero + .wrap.section,
.shero + div > .wrap.section{padding-top:52px}
.shero{padding-bottom:52px}
/* A band that carries the page background needs no seam at either end, and
   none at all when the footer follows it. */
.covband{border-bottom:0}
.covband + footer.site-foot{margin-top:0;border-top:1px solid var(--line)}
.wrap.section > .props:last-child{margin-bottom:0}
.wrap.section:has(> .props:last-child){padding-bottom:34px}
.covband{padding-top:44px}

/* --- footer: the update stamp read as a faded afterthought ---------------
   Same hue as the tagline but at 62% opacity and a smaller size, which is what
   made it look like a different colour and font. Matched to the tagline rather
   than set in the accent: orange is the call-to-action colour everywhere else
   on the site, and spending it on a non-interactive timestamp would blunt that
   signal. It reads clearly now without competing with the wordmark. */
.site-foot .about .fine{opacity:1;font-size:.85rem;color:inherit}

/* --- the last band still sat 36px above the footer -----------------------
   `.covband + footer` never matched: the band is the last child of <main>, and
   the footer is a sibling of <main>, not of the band. */
main:has(> .covband:last-child) + .site-foot,
main:has(> .ctaband:last-child) + .site-foot,
main:has(> div:last-child > .covband:last-child) + .site-foot{margin-top:0}

/* The pricing page's last section exists only to hold #buymsg, the hidden
   element the Stripe flow writes its status into. While it is hidden the
   section still contributed its padding, which is the empty band that showed
   between the verification card and the footer. */
section.section-tight:has(> .wrap > #buymsg[hidden]:only-child){padding:0}

/* `color:inherit` lost to a more specific .fine rule, so the stamp still came
   out #9AA5AE against the tagline's #8FA6C5. Stated explicitly. */
.site-foot .about p.fine{color:#8FA6C5;opacity:1;font-size:.85rem}


/* ==========================================================================
   HUBSTAKE DESIGN SYSTEM
   Loaded after theme.css so it wins on cascade order. Tokens sampled directly
   from the approved mockup rather than eyeballed:
     accent  #FED53B  hue 47deg, sat 0.99, light 0.61   (safety amber)
     ink     #08090B  near-black, used for headers, bands and footer
     surface #FDFDFD  off-white page ground
   ========================================================================== */

:root{
  /* --- ground ------------------------------------------------------------ */
  --ds-bg:          #FCFCFB;   /* page: off-white, a half-degree warm */
  --ds-surface:     #FFFFFF;   /* panels sitting on the page */
  --ds-surface-2:   #F6F6F4;   /* inset wells, table stripes */
  --ds-ink:         #08090B;   /* near-black: headers, bands, footer */
  --ds-ink-1:       #14161A;   /* primary text */
  --ds-ink-2:       #4A5158;   /* secondary text */
  --ds-ink-3:       #6D707D;   /* tertiary / labels — clears AA on BOTH
                               --ds-bg (4.6:1) and --ds-surface-2 (4.6:1); the
                               original #6E767E measured 4.49 and 4.26. */

  /* --- line ---------------------------------------------------------------
     Thin borders and grid lines carry the structure here, so they are tokens
     in their own right rather than one grey reused at three opacities. */
  --ds-line:        #E2E3E0;
  --ds-line-strong: #C9CBC7;
  --ds-line-dark:   #23262B;   /* rules inside dark bands */

  /* --- accent -------------------------------------------------------------
     #FED53B is 1.4:1 against white, so it is NEVER text on a light ground.
     It is a fill that carries dark text, a 2-3px mark, or a single focal
     series in a chart. --ds-accent-ink is the only text colour allowed on it. */
  --ds-accent:      #FED53B;
  --ds-accent-dim:  #F2C520;   /* hover/pressed */
  --ds-accent-wash: #FFF8DC;   /* selected rows, active filter background */
  --ds-accent-ink:  #14110A;   /* text ON accent — 12.1:1 */

  /* --- evidence-depth scale ----------------------------------------------
     Thresholds are documented in ds-depth-* below and applied consistently;
     these are the only semantic colours in the system. */
  --ds-deep:        #1F6B4A;
  --ds-deep-bg:     #DDF0E4;
  --ds-solid:       #2E6B86;
  --ds-solid-bg:    #DEEDF5;
  --ds-limited:     #8A5A1B;
  --ds-limited-bg:  #F8EBD6;

  /* --- type ---------------------------------------------------------------
     One grotesk for interface, one monospace for anything numeric. Prices,
     source ids, agency codes and dates all render mono so a column of numbers
     reads like a terminal rather than prose. */
  --ds-sans: 'Inter Tight', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ds-t-hero:   clamp(2.6rem, 5.2vw, 4.15rem);
  --ds-t-h1:     clamp(2.1rem, 3.8vw, 3.1rem);
  --ds-t-h2:     clamp(1.55rem, 2.4vw, 2.05rem);
  --ds-t-h3:     1.1rem;
  --ds-t-body:   .955rem;
  --ds-t-small:  .85rem;
  --ds-t-micro:  .735rem;

  /* --- rhythm -------------------------------------------------------------
     A 4px base. The old stylesheet used eight different breakpoints picked
     ad hoc; the system uses three. */
  --ds-1: 4px;  --ds-2: 8px;  --ds-3: 12px; --ds-4: 16px;
  --ds-5: 24px; --ds-6: 32px; --ds-7: 48px; --ds-8: 64px; --ds-9: 96px;

  /* Small radius only. No pill cards. */
  --ds-r:    3px;
  --ds-r-lg: 5px;

  --ds-shadow: 0 1px 2px rgba(8,9,11,.04);
}

/* --- breakpoints, named so they stop multiplying -------------------------
   --bp-sm 600  --bp-md 860  --bp-lg 1100  --bp-xl 1400
   Use only these four. ------------------------------------------------- */

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */

/* Numeric type. Anything that is a measurement wears this. */
.ds-num{
  font-family:var(--ds-mono); font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.01em; font-feature-settings:"zero" 1;
}

/* The price, as it appears at the top of an item page. */
.ds-price{
  font-family:var(--ds-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(2.4rem,4.4vw,3.4rem); font-weight:600; line-height:1;
  letter-spacing:-.035em; color:var(--ds-ink-1);
}
.ds-price .unit{font-size:.42em; font-weight:500; color:var(--ds-ink-2); letter-spacing:0}

/* Eyebrow: the small tracked label above a headline. */
.ds-eyebrow{
  font-size:var(--ds-t-micro); font-weight:650; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ds-ink-3);
}

/* Panel: thin border, small radius, flat. The default container. */
.ds-panel{
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-r);
}
.ds-panel-pad{padding:var(--ds-5)}
.ds-panel-dark{background:var(--ds-ink); border-color:var(--ds-line-dark); color:#E8EAEC}

/* Evidence-depth badge. Thresholds, applied everywhere without exception:
     DEEP     >= 100 observations AND >= 5 agencies
     SOLID    >=  30 observations AND >= 3 agencies
     LIMITED  anything published below that
   These describe how much evidence sits behind a number. They are not a claim
   about statistical reliability, and nothing in the UI should imply one. */
.ds-depth{
  display:inline-flex; align-items:center; gap:var(--ds-1);
  font-size:var(--ds-t-micro); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:3px var(--ds-2); border-radius:2px;
  font-family:var(--ds-sans);
}
.ds-depth-deep{color:var(--ds-deep); background:var(--ds-deep-bg)}
.ds-depth-solid{color:var(--ds-solid); background:var(--ds-solid-bg)}
.ds-depth-limited{color:var(--ds-limited); background:var(--ds-limited-bg)}

/* Buttons. The amber is a fill with dark text — never amber text. */
.ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ds-2);
  font:inherit; font-size:var(--ds-t-small); font-weight:640; line-height:1;
  padding:11px var(--ds-4); border-radius:var(--ds-r); border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color .13s ease, border-color .13s ease, color .13s ease;
}
.ds-btn-primary{background:var(--ds-accent); color:var(--ds-accent-ink); border-color:var(--ds-accent)}
.ds-btn-primary:hover{background:var(--ds-accent-dim); border-color:var(--ds-accent-dim); color:var(--ds-accent-ink)}
.ds-btn-ghost{background:transparent; color:var(--ds-ink-1); border-color:var(--ds-line-strong)}
.ds-btn-ghost:hover{background:var(--ds-surface-2); border-color:var(--ds-ink-3)}
.ds-btn-dark{background:var(--ds-ink); color:#fff; border-color:var(--ds-ink)}
.ds-btn-dark:hover{background:#1B1E23; color:#fff}
.ds-btn:focus-visible{outline:2px solid var(--ds-ink-1); outline-offset:2px}

/* Metric: a figure with its label, as used in the KPI strips. */
.ds-metric .v{
  display:block; font-family:var(--ds-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:600; letter-spacing:-.03em;
  line-height:1.05; color:var(--ds-ink-1);
}
.ds-metric .k{
  display:block; margin-top:var(--ds-1); font-size:var(--ds-t-small);
  color:var(--ds-ink-3);
}
.ds-panel-dark .ds-metric .v{color:#fff}
.ds-panel-dark .ds-metric .k{color:#9BA3AB}

/* Source-verified mark. The recurring provenance motif. */
.ds-verified{
  display:inline-flex; align-items:center; gap:var(--ds-2);
  font-size:var(--ds-t-micro); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ds-deep);
}
.ds-verified svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2}

/* Data table. Dense, aligned, numbers right and mono. */
.ds-table{width:100%; border-collapse:collapse; font-size:var(--ds-t-small)}
.ds-table th{
  text-align:left; font-size:var(--ds-t-micro); font-weight:680; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ds-ink-3); padding:var(--ds-2) var(--ds-3);
  border-bottom:1px solid var(--ds-line-strong); white-space:nowrap;
}
.ds-table td{padding:10px var(--ds-3); border-bottom:1px solid var(--ds-line); color:var(--ds-ink-1)}
.ds-table td.n, .ds-table th.n{text-align:right; font-family:var(--ds-mono); font-variant-numeric:tabular-nums}
.ds-table tbody tr:hover{background:var(--ds-surface-2)}

/* Skeleton, for expensive queries. Respects reduced-motion. */
.ds-skel{
  background:linear-gradient(90deg,var(--ds-surface-2) 25%,#EDEDEA 37%,var(--ds-surface-2) 63%);
  background-size:400% 100%; animation:ds-shimmer 1.3s ease-in-out infinite;
  border-radius:2px;
}
@keyframes ds-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
  .ds-skel{animation:none}
  .ds-btn{transition:none}
}

/* ==========================================================================
   PHASE 3 — GLOBAL CHROME
   One header and one footer on every route, marketing and application alike.
   ========================================================================== */

.ds-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ds-ink); color:#fff; padding:10px var(--ds-4);
  font-size:var(--ds-t-small); font-weight:600;
}
.ds-skip:focus{left:0}

.ds-btn-sm{padding:8px var(--ds-3); font-size:var(--ds-t-micro)}
.ds-btn-block{display:flex; width:100%}

/* --- header --------------------------------------------------------------- */
.hs-head{
  position:sticky; top:0; z-index:60;
  background:var(--ds-surface); border-bottom:1px solid var(--ds-line);
}
.hs-head-in{
  max-width:1420px; margin:0 auto; padding:0 var(--ds-5);
  height:58px; display:flex; align-items:center; gap:var(--ds-5);
}
.hs-brand{
  display:inline-flex; align-items:center; gap:var(--ds-2);
  font-size:1.06rem; font-weight:700; letter-spacing:-.025em;
  color:var(--ds-ink-1); text-decoration:none; flex:none;
}
.hs-brand-mark{
  width:15px; height:15px; border-radius:2px; background:var(--ds-accent);
  box-shadow:inset 0 0 0 3px var(--ds-ink);
}
.hs-nav{display:flex; align-items:center; gap:var(--ds-5); flex:none}
.hs-nav a{
  font-size:var(--ds-t-small); font-weight:520; color:var(--ds-ink-2);
  text-decoration:none; padding:19px 0; position:relative;
}
.hs-nav a:hover{color:var(--ds-ink-1)}
/* Active state is the accent, used as a 2px mark rather than as text colour. */
.hs-nav a.on{color:var(--ds-ink-1); font-weight:620}
.hs-nav a.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--ds-accent);
}
.hs-hsearch{
  flex:1 1 auto; max-width:380px; margin-left:auto;
  display:flex; align-items:center; gap:var(--ds-2);
  background:var(--ds-surface-2); border:1px solid var(--ds-line);
  border-radius:var(--ds-r); padding:0 var(--ds-3); height:34px;
}
.hs-hsearch svg{width:15px; height:15px; flex:none; fill:none; stroke:var(--ds-ink-3); stroke-width:2}
.hs-hsearch input{
  flex:1; border:0; background:transparent; font:inherit;
  font-size:var(--ds-t-small); color:var(--ds-ink-1); min-width:0;
  -webkit-appearance:none; appearance:none;
}
.hs-hsearch input::placeholder{color:var(--ds-ink-3)}
.hs-hsearch:focus-within{border-color:var(--ds-ink-3); background:var(--ds-surface)}
.hs-acct{display:flex; align-items:center; gap:var(--ds-3); margin-left:auto; flex:none}
.hs-hsearch ~ .hs-acct{margin-left:0}
.hs-signin{
  font-size:var(--ds-t-small); font-weight:560; color:var(--ds-ink-2); text-decoration:none;
}
.hs-signin:hover{color:var(--ds-ink-1)}
.hs-me{display:flex; align-items:center; gap:var(--ds-3)}

@media(max-width:1100px){
  .hs-hsearch{display:none}
  .hs-nav{gap:var(--ds-4)}
}
@media(max-width:860px){
  .hs-nav, .hs-acct{display:none}
  .hs-head-in{gap:var(--ds-3); padding:0 var(--ds-4)}
}

/* --- footer --------------------------------------------------------------- */
.site-foot{
  background:var(--ds-ink); color:#9BA3AB; border-top:0; margin-top:0;
  padding:var(--ds-8) 0 var(--ds-6);
}
.site-foot .wrap{max-width:1420px; padding-left:var(--ds-5); padding-right:var(--ds-5)}
.site-foot .cols{
  display:grid; grid-template-columns:2fr repeat(3,minmax(0,1fr));
  gap:var(--ds-6); align-items:start;
}
.site-foot .about .brand{display:inline-flex; align-items:center; gap:var(--ds-2)}
.site-foot .about .brand .mark{
  color:#fff; font-size:1.06rem; font-weight:700; letter-spacing:-.025em;
}
.site-foot .about p{
  color:#8A929A; font-size:var(--ds-t-small); margin:var(--ds-3) 0 0; max-width:30ch;
}
.site-foot .about p.fine{color:#6F777E; font-size:var(--ds-t-micro); margin-top:var(--ds-2)}
.site-foot h4{
  color:#fff; font-size:var(--ds-t-micro); font-weight:680; letter-spacing:.11em;
  text-transform:uppercase; margin:0 0 var(--ds-3); opacity:1;
}
.site-foot a{
  display:block; color:#9BA3AB; font-size:var(--ds-t-small);
  padding:5px 0; text-decoration:none;
}
.site-foot a:hover{color:#fff}
.site-foot .foot-legal{
  margin-top:var(--ds-7); padding-top:var(--ds-4);
  border-top:1px solid var(--ds-line-dark); color:#6F777E;
  font-size:var(--ds-t-micro); max-width:none;
}
.site-foot .foot-legal a{display:inline; color:#9BA3AB; text-decoration:underline}
@media(max-width:860px){
  .site-foot .cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ds-5)}
  .site-foot .about{grid-column:1/-1}
}
@media(max-width:600px){
  .site-foot .cols{grid-template-columns:1fr}
}

/* ==========================================================================
   PHASE 4 — HOMEPAGE
   ========================================================================== */

/* --- hero: full-bleed cinematic, quiet on the left ------------------------
   The mockup runs the photograph edge to edge with the headline sitting over
   it, rather than the right-hand panel the site shipped. The left 42% is held
   quiet by a gradient so the type never fights detail, and the crop is pushed
   right so the action stays out from under it. */
.hero-photo.hero-split .hero-slides{width:100%; max-width:none}
.hero-photo.hero-split .hero-slide{background-position:64% 50%}
.hero-photo.hero-split .hero-overlay{
  display:block; width:100%;
  background:linear-gradient(90deg,
    rgba(8,9,11,.93) 0%, rgba(8,9,11,.88) 26%, rgba(8,9,11,.66) 46%,
    rgba(8,9,11,.30) 66%, rgba(8,9,11,.16) 100%);
}
.hero-photo.hero-split .hero-inner{
  min-height:0; padding:var(--ds-9) var(--ds-5) calc(var(--ds-9) + var(--ds-4));
  max-width:1420px;
}
.hero-photo.hero-split .home-search{max-width:600px}
.hero-photo.hero-split .hero-eyebrow{
  font-size:var(--ds-t-micro); font-weight:650; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ds-accent); margin-bottom:var(--ds-4);
}
.hero-photo.hero-split h1{
  font-size:var(--ds-t-hero); line-height:1.03; letter-spacing:-.035em;
  font-weight:700; color:#fff; margin:0 0 var(--ds-4);
}
.hero-photo.hero-split .lede{
  color:#D3D7DB; font-size:1.02rem; line-height:1.55; max-width:46ch;
  margin:0 0 var(--ds-5);
}
/* Search field: the primary action on the site. */
.hero-photo.hero-split .field--xl{
  background:rgba(255,255,255,.97); border:1px solid rgba(255,255,255,.3);
  border-radius:var(--ds-r); height:54px; padding:0 0 0 var(--ds-4);
  display:flex; align-items:center; gap:var(--ds-3); box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.hero-photo.hero-split .field--xl input{font-size:1rem; color:var(--ds-ink-1)}
.hero-photo.hero-split .field--xl .btn{
  height:54px; border-radius:0 var(--ds-r) var(--ds-r) 0;
  background:var(--ds-accent); color:var(--ds-accent-ink); border:0;
  font-weight:660; padding:0 var(--ds-5);
}
.hero-photo.hero-split .field--xl .btn:hover{background:var(--ds-accent-dim)}
.hero-photo.hero-split .hchips{display:flex; flex-wrap:wrap; gap:var(--ds-2); margin-top:var(--ds-4)}
.hero-photo.hero-split .hchips .hchip{
  font-size:var(--ds-t-small); color:#C8CCD1; text-decoration:none;
  border:1px solid rgba(255,255,255,.22); border-radius:var(--ds-r);
  padding:5px var(--ds-3); background:rgba(255,255,255,.06);
}
.hero-photo.hero-split .hchips .hchip:hover{
  color:var(--ds-accent-ink); background:var(--ds-accent); border-color:var(--ds-accent);
}
@media(max-width:860px){
  .hero-photo.hero-split .hero-inner{padding:var(--ds-7) var(--ds-4)}
  .hero-photo.hero-split .hero-overlay{
    background:linear-gradient(180deg, rgba(8,9,11,.82) 0%, rgba(8,9,11,.92) 60%);
  }
  .hero-photo.hero-split .field--xl{height:48px}
  .hero-photo.hero-split .field--xl .btn{height:48px; padding:0 var(--ds-4)}
}

/* --- KPI strip: dark band, terminal numerals ------------------------------ */
.stats-band{background:var(--ds-ink); border:0; padding:var(--ds-5) 0}
.stats-band .wrap{max-width:1420px; padding:0 var(--ds-5)}
.stats-band .coverage{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0;
}
.stats-band .coverage > div{
  display:flex; align-items:center; gap:var(--ds-3);
  padding:0 var(--ds-5); border-left:1px solid var(--ds-line-dark);
}
.stats-band .coverage > div:first-child{border-left:0; padding-left:0}
.stats-band .ci{display:none}
.stats-band .cv dd{
  margin:0; font-family:var(--ds-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(1.7rem,2.9vw,2.35rem); font-weight:600; letter-spacing:-.03em;
  line-height:1.05; color:#fff;
}
.stats-band .cv dt{
  margin-top:3px; font-size:.92rem; color:#8A929A; font-weight:400;
}
@media(max-width:860px){
  .stats-band .coverage{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ds-4) 0}
  .stats-band .coverage > div:nth-child(odd){border-left:0; padding-left:0}
}
@media(max-width:420px){
  .stats-band .coverage{grid-template-columns:1fr}
  .stats-band .coverage > div{border-left:0; padding-left:0}
}

/* Specificity notes: the legacy sheet styles the KPI icons at .stats-band
   .coverage .ci, so the rule that removes them has to match that weight. The
   mockup's strip is numerals and labels only. */
.stats-band .coverage .ci{display:none}
.hero-photo.hero-split .home-search h1{color:#fff}

/* --- "Not estimated. Observed." — the market card and its receipt ---------
   Two panels, equal weight: the number on the left, the single observation
   that proves it on the right. This pairing is the brand argument, so it gets
   the strongest treatment on the page. */
.content-white{background:var(--ds-bg); border-top:1px solid var(--ds-line)}
.content-white .wrap{max-width:1420px; padding:var(--ds-9) var(--ds-5)}
.example > header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--ds-5); margin-bottom:var(--ds-6); flex-wrap:wrap;
}
.example > header h2{
  font-size:var(--ds-t-h2); font-weight:700; letter-spacing:-.03em;
  margin:0; color:var(--ds-ink-1);
}
.example .exh-sub{text-align:right}
.example .exh-sub p{margin:0; color:var(--ds-ink-2); font-size:var(--ds-t-body)}
.example .exh-sub a{
  display:inline-block; margin-top:var(--ds-2); font-size:var(--ds-t-small);
  font-weight:620; color:var(--ds-ink-1); text-decoration:none;
  border-bottom:2px solid var(--ds-accent); padding-bottom:1px;
}
.example-card{
  display:grid; grid-template-columns:1.25fr 1fr; gap:0;
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-r); overflow:hidden;
}
.example-card > div{padding:var(--ds-6)}
.example-card > .ex-source{
  background:var(--ds-surface-2); border-left:1px solid var(--ds-line);
}
.example-card .label{
  display:block; font-size:var(--ds-t-micro); font-weight:650; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ds-ink-3);
}
.example-card h3{
  font-size:1.28rem; font-weight:660; letter-spacing:-.02em;
  margin:var(--ds-2) 0 var(--ds-5); color:var(--ds-ink-1);
}
.example-card .price{display:flex; align-items:baseline; gap:var(--ds-2); margin:var(--ds-1) 0 var(--ds-5)}
.example-card .price .figure{
  font-family:var(--ds-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(2.3rem,4vw,3.1rem); font-weight:600; letter-spacing:-.035em;
  line-height:1; color:var(--ds-ink-1);
}
.example-card .price .per{font-size:1rem; color:var(--ds-ink-2); font-weight:500}
.example-card .ex-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--ds-4); margin:var(--ds-6) 0 0; padding-top:var(--ds-5);
  border-top:1px solid var(--ds-line);
}
.example-card .ex-row dt{
  font-size:var(--ds-t-micro); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ds-ink-3); font-weight:650; margin:0;
}
.example-card .ex-row dd{
  margin:var(--ds-1) 0 0; font-family:var(--ds-mono);
  font-variant-numeric:tabular-nums; font-size:1.05rem; font-weight:600;
  color:var(--ds-ink-1); letter-spacing:-.02em;
}
/* the receipt side */
.ex-source > p{
  margin:var(--ds-3) 0 var(--ds-5); font-size:var(--ds-t-small);
  color:var(--ds-ink-2); line-height:1.55;
}
.ex-source dl{display:grid; grid-template-columns:auto 1fr; gap:var(--ds-3) var(--ds-5); margin:0 0 var(--ds-5)}
.ex-source dt{
  font-size:var(--ds-t-micro); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ds-ink-3); font-weight:650;
}
.ex-source dd{
  margin:0; font-family:var(--ds-mono); font-size:var(--ds-t-small);
  color:var(--ds-ink-1); font-variant-numeric:tabular-nums;
}
.ex-source dd b{font-weight:650}
/* the histogram under the price */
.example-card .histo{
  display:flex; align-items:flex-end; gap:2px; height:64px; margin-top:var(--ds-4);
}
.example-card .histo .bar{
  flex:1; background:var(--ds-line-strong); height:var(--h,4%); min-height:2px;
  border-radius:1px 1px 0 0;
}
.example-card .histo .bar.in{background:var(--ds-accent)}
@media(max-width:940px){
  .example-card{grid-template-columns:1fr}
  .example-card > .ex-source{border-left:0; border-top:1px solid var(--ds-line)}
  .example > header{flex-direction:column; align-items:flex-start}
  .example .exh-sub{text-align:left}
  .content-white .wrap{padding:var(--ds-7) var(--ds-4)}
}

/* The p25/p75 captions and the histogram axis were set as inline spans with no
   separation, so they rendered as "p25 $91.65p75 $140" and
   "$61.37$109$157$204$252". Both are axes: space them, and let them shrink
   rather than collide. */
.example-card .range-caption,
.example-card .histo-axis,
.histo-axis{
  display:flex; justify-content:space-between; gap:var(--ds-3);
  font-family:var(--ds-mono); font-size:var(--ds-t-micro);
  color:var(--ds-ink-3); font-variant-numeric:tabular-nums;
  margin-top:var(--ds-2);
}
.example-card .range-caption > *,
.histo-axis > *{white-space:nowrap}
.example-card .histo{margin-top:var(--ds-5)}
.example-card .histo .bar{background:var(--ds-line-strong)}
.example-card .histo .bar.in{background:var(--ds-accent)}

/* The section subhead ran past the panel edge at 1440. */
.example .exh-sub{max-width:34ch; flex:0 1 auto}

/* The hero image, set in CSS so it is discoverable at parse time and paired
   with the <link rel=preload> in the head. Previously a script assigned it
   after first paint, which delayed the page's largest element behind JS. */
.hero-photo.hero-split .hero-slide{
  background-image:url("/assets/img/hero-bridge-deck.webp");
  background-size:cover; background-repeat:no-repeat;
}


/* ==========================================================================
   PHASE 5 — SEARCH
   The results table is the product. Everything here serves one idea: a dense,
   scannable price ledger where the eye runs down a column of numerals, not a
   card grid. Numerals are mono and tabular throughout so digits align by place
   value; the sidebar is quiet chrome; the accent appears exactly twice (the
   submit button and the active-filter chips) so it still means something.
   ========================================================================== */

/* --- masthead ------------------------------------------------------------ */
.search-top{
  background:var(--ds-ink); color:#fff;
  border-bottom:1px solid var(--ds-line-dark);
  padding:var(--ds-6) 0 var(--ds-7);
}
.search-top .eyebrow{
  font-family:var(--ds-mono); font-size:var(--ds-t-micro);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ds-accent); margin:0 0 var(--ds-3);
}
.search-top h1{
  font-family:var(--ds-sans); font-size:var(--ds-t-h1);
  letter-spacing:-.022em; line-height:1.04;
  color:#fff; margin:0 0 var(--ds-3); max-width:20ch;
}
.search-top .search-lede{
  font-size:var(--ds-t-body); line-height:1.55;
  color:#B9BDC4; max-width:62ch; margin:0 0 var(--ds-5);
}
/* The search field is the one control on this band, so it gets the width. */
.search-top .field--lg{
  display:flex; max-width:760px; gap:0;
  border:1px solid #3A3F47; border-radius:var(--ds-r);
  background:#101317; overflow:hidden;
}
.search-top .field--lg:focus-within{
  border-color:var(--ds-accent);
  box-shadow:0 0 0 3px rgba(254,213,59,.22);
}
.search-top .field--lg input{
  flex:1 1 auto; min-width:0; border:0; background:transparent;
  color:#fff; font-family:var(--ds-sans); font-size:1.02rem;
  padding:14px var(--ds-4);
}
.search-top .field--lg input::placeholder{color:#767C85}
.search-top .field--lg input:focus{outline:none}
.search-top .field--lg .btn-primary{
  flex:0 0 auto; border:0; border-radius:0;
  background:var(--ds-accent); color:var(--ds-accent-ink);
  font-weight:600; font-size:var(--ds-t-small);
  letter-spacing:.02em; padding:0 var(--ds-5); cursor:pointer;
}
.search-top .field--lg .btn-primary:hover{background:var(--ds-accent-dim)}

/* --- layout -------------------------------------------------------------- */
.results-layout{
  grid-template-columns:232px minmax(0,1fr);
  gap:var(--ds-7); padding-top:var(--ds-6); padding-bottom:var(--ds-8);
  background:transparent;
}

/* --- sidebar ------------------------------------------------------------- */
.filters{
  align-self:start; position:sticky; top:76px;
  max-height:calc(100vh - 96px); overflow-y:auto;
  padding-right:var(--ds-2);
}
.filters-head{
  display:flex; align-items:center; gap:var(--ds-3);
  padding-bottom:var(--ds-3); margin-bottom:var(--ds-2);
  border-bottom:1px solid var(--ds-line-strong);
}
.filters-head .label{
  font-family:var(--ds-mono); font-size:var(--ds-t-micro);
  letter-spacing:.13em; text-transform:uppercase; color:var(--ds-ink-1);
  margin-right:auto;
}
.filters-head .clearall{
  font-size:var(--ds-t-micro); color:var(--ds-ink-3);
  text-decoration:none; border-bottom:1px solid transparent;
}
.filters-head .clearall:hover{color:var(--ds-ink-1);border-bottom-color:var(--ds-line-strong)}

.filter-group{border-bottom:1px solid var(--ds-line); padding:var(--ds-3) 0}
.filter-group>summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--ds-t-small); font-weight:600; color:var(--ds-ink-1);
  padding:var(--ds-1) 0;
}
.filter-group>summary::-webkit-details-marker{display:none}
.filter-group>summary::after{
  content:''; width:7px; height:7px; flex:0 0 auto; margin-left:var(--ds-2);
  border-right:1.5px solid var(--ds-ink-3); border-bottom:1.5px solid var(--ds-ink-3);
  transform:rotate(45deg) translateY(-2px); transition:transform .12s ease;
}
.filter-group[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.filter-group>summary:hover{color:var(--ds-ink)}

/* One checkbox row. The count is mono so the column of numbers on the right
   lines up and can be compared at a glance. */
.filter-group .check{
  display:grid; grid-template-columns:15px minmax(0,1fr) auto;
  align-items:center; gap:var(--ds-2);
  padding:5px 0; cursor:pointer; font-size:var(--ds-t-small);
  color:var(--ds-ink-2); line-height:1.3;
}
.filter-group .check:hover{color:var(--ds-ink-1)}
.filter-group .check input{
  width:15px; height:15px; margin:0; accent-color:var(--ds-ink);
  cursor:pointer;
}
.filter-group .check>span:nth-of-type(1){
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.filter-group .check .count{
  font-family:var(--ds-mono); font-size:var(--ds-t-micro);
  font-variant-numeric:tabular-nums; color:var(--ds-ink-3);
}
.filter-group .check:has(input:checked){color:var(--ds-ink); font-weight:600}
.filter-group .check:has(input:checked) .count{color:var(--ds-ink-1)}

.more-details{margin-top:var(--ds-1)}
.more-details>summary.more{
  list-style:none; cursor:pointer;
  font-size:var(--ds-t-micro); color:var(--ds-ink-3);
  padding:var(--ds-1) 0;
}
.more-details>summary.more::-webkit-details-marker{display:none}
.more-details>summary.more:hover{color:var(--ds-ink-1)}
.more-details .more-open{display:none}
.more-details[open] .more-closed{display:none}
.more-details[open] .more-open{display:inline}

.findwrap input,.selwrap select{
  width:100%; box-sizing:border-box; height:auto;
  border:1px solid var(--ds-line-strong); border-radius:var(--ds-r);
  background-color:var(--ds-surface); color:var(--ds-ink-1);
  font-family:var(--ds-sans); font-size:var(--ds-t-small);
  padding:7px var(--ds-2); margin:var(--ds-2) 0;
}
/* The base stylesheet paints the dropdown chevron as a background IMAGE on
   `select`, so any rule here that sets `background` shorthand erases it and
   leaves a bare box.  Only the colour is overridden, never the shorthand. */
.selwrap select{padding-right:28px}
.findwrap input:focus,.selwrap select:focus{
  outline:none; border-color:var(--ds-ink-1);
  box-shadow:0 0 0 2px rgba(8,9,11,.08);
}
.filter-note{
  font-size:var(--ds-t-micro); color:var(--ds-ink-3);
  line-height:1.45; margin:var(--ds-1) 0 0;
}
.filters .btn-block{
  display:block; width:100%; margin-top:var(--ds-4);
  background:var(--ds-ink); color:#fff; border:1px solid var(--ds-ink);
  border-radius:var(--ds-r); padding:10px var(--ds-3);
  font-size:var(--ds-t-small); font-weight:600; cursor:pointer;
}
.filters .btn-block:hover{background:#000}

/* --- results bar --------------------------------------------------------- */
.results-bar{
  display:flex; align-items:center; gap:var(--ds-4);
  padding:0 0 var(--ds-3);
  border-bottom:1px solid var(--ds-line-strong);
  margin-bottom:var(--ds-3);
}
.results-count{
  margin:0; margin-right:auto;
  font-size:var(--ds-t-small); color:var(--ds-ink-2);
}
.results-count strong{
  font-family:var(--ds-mono); font-variant-numeric:tabular-nums;
  font-size:var(--ds-t-body); font-weight:600; color:var(--ds-ink);
}
.viewtog{display:inline-flex; border:1px solid var(--ds-line-strong); border-radius:var(--ds-r); overflow:hidden}
.viewtog button{
  border:0; background:var(--ds-surface); color:var(--ds-ink-2);
  font-family:var(--ds-sans); font-size:var(--ds-t-micro); font-weight:600;
  letter-spacing:.02em; padding:6px var(--ds-3); cursor:pointer;
}
.viewtog button+button{border-left:1px solid var(--ds-line-strong)}
.viewtog button:hover{background:var(--ds-surface-2); color:var(--ds-ink-1)}
.viewtog button.on{background:var(--ds-ink); color:#fff}
.sort{
  display:inline-flex; align-items:center; gap:var(--ds-2);
  font-size:var(--ds-t-micro); color:var(--ds-ink-3);
}
.sort select{
  height:auto; border:1px solid var(--ds-line-strong); border-radius:var(--ds-r);
  background-color:var(--ds-surface); color:var(--ds-ink-1);
  font-family:var(--ds-sans); font-size:var(--ds-t-small);
  padding:5px 26px 5px var(--ds-2); margin:0;
}

/* --- active filter chips ------------------------------------------------- */
.chips{display:flex; flex-wrap:wrap; gap:var(--ds-2); margin-bottom:var(--ds-3)}
.chips .chip{
  display:inline-flex; align-items:center; gap:var(--ds-2);
  background:var(--ds-accent-wash); border:1px solid var(--ds-accent-dim);
  border-radius:var(--ds-r); padding:3px var(--ds-2);
  font-size:var(--ds-t-micro); color:var(--ds-accent-ink); text-decoration:none;
}
.chips .chip b{font-weight:600}
.chips .chip .x{color:var(--ds-ink-2); font-size:.9rem; line-height:1}
.chips .chip:hover{background:var(--ds-accent); border-color:var(--ds-accent)}
.chips>a:last-child{
  font-size:var(--ds-t-micro); color:var(--ds-ink-3);
  text-decoration:none; align-self:center; padding:3px 0;
}
.chips>a:last-child:hover{color:var(--ds-ink-1); text-decoration:underline}

/* --- the ledger ---------------------------------------------------------- */
.result-table{
  border:1px solid var(--ds-line); border-radius:var(--ds-r);
  background:var(--ds-surface); overflow:hidden;
}
.results .result-head{
  height:auto; padding-top:9px; padding-bottom:9px;
  background:var(--ds-surface-2);
  border-bottom:1px solid var(--ds-line-strong);
  font-family:var(--ds-mono); font-size:var(--ds-t-micro);
  letter-spacing:.09em; text-transform:uppercase; color:var(--ds-ink-3);
}
.results .result{
  background:var(--ds-surface);
  padding-top:11px; padding-bottom:11px;
}
.results .result+.result{border-top:1px solid var(--ds-line)}
.results .result:hover{background:var(--ds-accent-wash)}
.result-name{margin:0; font-size:var(--ds-t-body); line-height:1.3; font-weight:600}
.result-name a{color:var(--ds-ink-1); text-decoration:none}
.result-name a:hover{color:var(--ds-ink); text-decoration:underline; text-underline-offset:2px}
.result-meta{
  margin:2px 0 0; display:flex; gap:var(--ds-2); flex-wrap:wrap;
  font-size:var(--ds-t-micro); color:var(--ds-ink-3);
}
.result-meta .mono{font-family:var(--ds-mono)}

/* Prices, ranges, counts and years: one mono column family. */
.result-price,.result-range,.result-ag,.result-st,.result-yr,.result-obs,.result-unit{
  font-family:var(--ds-mono); font-variant-numeric:tabular-nums;
}
.result-price .rp{font-size:var(--ds-t-body); font-weight:600; color:var(--ds-ink)}
.result-price .thin{color:var(--ds-limited)}
.result-price .approx{opacity:.65; margin-right:1px}
.thin-flag{
  display:block; font-family:var(--ds-sans); font-size:var(--ds-t-micro);
  color:var(--ds-limited); letter-spacing:.02em;
}
.result-range,.result-ag,.result-st,.result-yr{font-size:var(--ds-t-micro); color:var(--ds-ink-2)}
.result-range .rr-lock a{
  font-family:var(--ds-sans); font-size:var(--ds-t-micro);
  color:var(--ds-solid); text-decoration:none;
  border-bottom:1px solid rgba(46,107,134,.35);
}
.result-range .rr-lock a:hover{border-bottom-color:var(--ds-solid)}
.result-unit{font-size:var(--ds-t-micro); color:var(--ds-ink-3); text-transform:uppercase}
.result-unit .tag-ls{
  display:inline-block; background:var(--ds-surface-2);
  border:1px solid var(--ds-line-strong); border-radius:2px;
  padding:1px 4px; font-size:var(--ds-t-micro); color:var(--ds-ink-2);
}
.result-obs{font-size:var(--ds-t-micro); color:var(--ds-ink-3)}
.result-obs b{font-size:var(--ds-t-small); font-weight:600; color:var(--ds-ink-1)}
.result-obs.is-thin b{color:var(--ds-limited)}

/* --- skeleton ------------------------------------------------------------ */
.result.is-skel{background:var(--ds-surface)}
.result.is-skel:hover{background:var(--ds-surface)}
.result .sk{
  display:block; height:11px; border-radius:2px;
  background:linear-gradient(90deg,var(--ds-surface-2) 0%,#EDEDEA 50%,var(--ds-surface-2) 100%);
  background-size:200% 100%; animation:ds-sheen 1.1s linear infinite;
}
.result .sk-name{width:62%; height:13px}
.result .sk-meta{width:34%; height:9px; margin-top:6px}
.result .sk-price{width:100%; margin-left:auto}
.result .sk-unit{width:100%}
.result .sk-obs{width:100%; margin-left:auto}
@keyframes ds-sheen{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.result .sk{animation:none}}

/* --- pager --------------------------------------------------------------- */
.pager{
  display:flex; align-items:center; gap:var(--ds-4);
  padding-top:var(--ds-4); font-size:var(--ds-t-micro); color:var(--ds-ink-3);
}
.pager>span{font-family:var(--ds-mono); font-variant-numeric:tabular-nums; margin-right:auto}
.pager nav{display:flex; gap:var(--ds-1); align-items:center}
.pager nav a,.pager nav span{
  font-family:var(--ds-mono); font-size:var(--ds-t-micro);
  min-width:26px; text-align:center; padding:4px 6px;
  border:1px solid transparent; border-radius:var(--ds-r);
  color:var(--ds-ink-2); text-decoration:none;
}
.pager nav a:hover{border-color:var(--ds-line-strong); color:var(--ds-ink)}
.pager nav [aria-current="page"]{
  background:var(--ds-ink); color:#fff; border-color:var(--ds-ink); font-weight:600;
}

/* --- empty state --------------------------------------------------------- */
.empty-state{
  border:1px solid var(--ds-line); border-radius:var(--ds-r);
  background:var(--ds-surface); padding:var(--ds-7) var(--ds-6);
}
.empty-state h2{font-size:var(--ds-t-h3); margin:0 0 var(--ds-2); color:var(--ds-ink)}
.empty-state p{font-size:var(--ds-t-small); color:var(--ds-ink-2); max-width:58ch; margin:0 0 var(--ds-5)}
.empty-cats .label{
  display:block; font-family:var(--ds-mono); font-size:var(--ds-t-micro);
  letter-spacing:.13em; text-transform:uppercase; color:var(--ds-ink-3);
  margin-bottom:var(--ds-2);
}
.empty-cat-grid{display:flex; flex-wrap:wrap; gap:var(--ds-2)}
.empty-cat-grid a{
  border:1px solid var(--ds-line-strong); border-radius:var(--ds-r);
  padding:5px var(--ds-3); font-size:var(--ds-t-small);
  color:var(--ds-ink-1); text-decoration:none; background:var(--ds-surface);
}
.empty-cat-grid a:hover{background:var(--ds-ink); color:#fff; border-color:var(--ds-ink)}

/* --- distribution view --------------------------------------------------- */
.rchart{
  border:1px solid var(--ds-line); border-radius:var(--ds-r);
  background:var(--ds-surface); padding:var(--ds-5);
}
.rchart-head h3{font-size:var(--ds-t-h3); margin:0 0 var(--ds-1); color:var(--ds-ink)}
.rchart-head p{
  margin:0 0 var(--ds-5); font-family:var(--ds-mono);
  font-size:var(--ds-t-micro); color:var(--ds-ink-2);
}
.rchart .histo{
  display:flex; align-items:flex-end; gap:2px; height:176px;
  border-bottom:1px solid var(--ds-line-strong);
}
.rchart .histo .bar{
  flex:1 1 0; min-width:0; height:var(--h); background:var(--ds-ink-2);
  border-radius:1px 1px 0 0;
}
.rchart .histo .bar:hover{background:var(--ds-accent-dim)}
.rchart-axis{
  display:flex; justify-content:space-between; padding-top:var(--ds-2);
  font-family:var(--ds-mono); font-size:var(--ds-t-micro); color:var(--ds-ink-3);
}
.rchart-none{font-size:var(--ds-t-small); color:var(--ds-ink-2); margin:0}

/* --- mobile drawer ------------------------------------------------------- */
.results-bar .filterbtn{display:none}
@media (max-width:1100px){
  .results-layout{grid-template-columns:minmax(0,1fr); gap:var(--ds-4)}
  .results-bar .filterbtn{
    display:inline-flex; align-items:center; border:1px solid var(--ds-line-strong);
    border-radius:var(--ds-r); background:var(--ds-surface);
    font-size:var(--ds-t-micro); font-weight:600; color:var(--ds-ink-1);
    padding:6px var(--ds-3); cursor:pointer;
  }
  .filters{
    /* Above the sticky header (z-index 60), or the header sits outside the
       drawer scrim and the page still looks interactive behind it. */
    position:fixed; inset:0 auto 0 0; z-index:70; width:min(86vw,320px);
    max-height:none; background:var(--ds-surface);
    border-right:1px solid var(--ds-line-strong);
    padding:var(--ds-4); overflow-y:auto;
    transform:translateX(-102%); transition:transform .18s ease;
  }
  .filtersopen .filters{transform:none; box-shadow:0 0 0 100vmax rgba(8,9,11,.45)}
  .filterclose{
    display:inline-block; border:0; background:transparent;
    font-size:1.35rem; line-height:1; color:var(--ds-ink-2); cursor:pointer;
  }
}
@media (min-width:1101px){.filterclose{display:none}}

/* --- Phase 5 corrections against the legacy stylesheet --------------------
   Two rules in theme.css were written for a LIGHT search masthead and a flex
   results stack, and both fight the new dark ledger:

   1. `.search-top::before` lays a page-coloured scrim over the band so an old
      blueprint illustration could fade out to the right. Over a near-black
      masthead that scrim turns the left half of the white h1 into pale grey on
      pale grey — the headline was effectively invisible above 860px.
   2. `.results` is a 1px-gap flex column whose own background is the row
      separator, so the section paints a full-height grey plate behind the
      table and, before results land, behind nothing at all. The rows now carry
      their own borders, so the section needs no background of its own.       */
.search-top::before{display:none}
.results{
  display:block; gap:0;
  background:transparent; border-radius:0; overflow:visible;
}
.results:empty{background:transparent}
.viewtog button.on{box-shadow:none}
/* theme.css caps the empty state at 640px so it read as a card in a wide grey
   plate. With the plate gone it is the only thing in the column and should own
   the column's width, like the table it replaces. */
.empty-state{max-width:none}
.empty-state>p{max-width:58ch}
.empty-state .fine{
  margin-top:var(--ds-6); padding-top:var(--ds-4);
  border-top:1px solid var(--ds-line);
  font-size:var(--ds-t-small); color:var(--ds-ink-2);
}

/* --- thin-data marking ----------------------------------------------------
   theme.css marks a thin price with a dashed underline, a diagonal hatch fill
   and a badge carrying a CSS-triangle warning glyph. At item-page scale that
   reads as a caution note; repeated down twenty-five table rows it reads as
   damage — the hatch fights the numerals and the triangle looks like a broken
   image. In the ledger the signal is carried by colour, the approximate sign
   and one micro label, which is enough to stop a reader trusting the number
   and costs the row no legibility. */
.result-price .thin{
  display:inline; padding:0; border-bottom:0; background:none;
  color:var(--ds-limited);
}
.result-price .thin .approx{color:var(--ds-limited); font-weight:400; margin-right:1px}
.result-price .thin-flag{
  display:block; height:auto; padding:2px 0 0; margin:0;
  border:0; background:none; white-space:nowrap;
  font:600 var(--ds-t-micro)/1.1 var(--ds-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ds-limited); text-align:right;
}
.result-price .thin-flag::before{content:none}

/* "Winning bids" was wrapping to two lines and pushing the header row taller
   than the data rows it labels.
   SCOPED to the width where the eight-column table actually exists. Unscoped,
   this rule sat later in the cascade than theme.css's `@media (max-width:1200px)`
   stack and beat it on source order, so below 1200px every cell went back to
   its own grid column and each row became a nine-line block. */
@media (min-width:1201px){
  .result-head,.result{
    grid-template-columns:
      minmax(0,1fr) 104px 138px 46px 86px 104px 62px 92px;
  }
}

/* --- stacked row, below the table breakpoint ------------------------------
   theme.css tries to collapse the five meta cells onto "one meta line" by
   giving each `grid-column:1/-1; display:inline`. That cannot work: a grid item
   is blockified, so `display:inline` is discarded and each cell takes a row of
   its own — every result rendered as a nine-line block on a laptop, which is
   the opposite of what that rule set out to do. Dropping the row out of grid
   layout entirely is what makes the cells inline, so they do flow onto one
   line. The unit comes back too; on a unit-price index, hiding the unit next
   to the price is the one thing the row cannot afford to lose. */
@media (max-width:1200px){
  .results .result{display:block; padding:13px 18px}
  .result.is-skel{display:block}
  .result-main{margin:0 0 5px}
  .result-price{display:block; margin-bottom:3px; text-align:left}
  .result-price .rp{font-size:1.05rem}
  .result-price .thin-flag{
    display:inline; margin-left:var(--ds-2); text-align:left;
  }
  .result-range,.result-unit,.result-ag,.result-st,.result-yr,.result-obs{
    display:inline; white-space:normal; text-align:left;
    font-size:var(--ds-t-micro); color:var(--ds-ink-2);
  }
  /* The meta line reads as one sentence, so the first cell carries no
     separator and every later one carries its own. `text-transform` is reset
     because the uppercase rule for the unit column also shouts the prefix. */
  .result-unit{text-transform:none}
  .result-unit::before{content:" · per "}
  .result-range::before{content:"range "}
  .result-obs::before{content:" · "}
  .result-obs b{font-size:var(--ds-t-micro)}
  /* theme.css hides the unit at this width; on a unit-price index it stays. */
  .result-unit{display:inline}
}

/* "LAST LET" and "WINNING BIDS" were wrapping in the header and making the
   header band taller than the rows beneath it. */
@media (min-width:1201px){
  .result-head,.result{
    grid-template-columns:
      minmax(0,1fr) 100px 132px 44px 84px 98px 58px 96px;
  }
}


/* ==========================================================================
   PHASE 6 — VERTICAL RHYTHM
   The page was breathing at roughly 150px between sections where the design
   calls for about 56px, and in one place at 0px where it needed air. Both come
   from the same defect rather than from taste:

   theme.css declares `.section-tight{padding:2.2rem 0}` at line 393 and then
   `.wrap{padding:0 var(--gut)}` at line 1501. Equal specificity, later wins, so
   on every `<div class="wrap wide section-tight">` the vertical padding is
   zeroed and the class does nothing at all. The space that remained came from
   whatever padding the neighbouring band happened to carry -- 96px on
   .content-white plus another 56px on .example, stacked, which is the 153px
   above "Not estimated. Observed." and the 152px under the example card.

   Setting the rhythm on `.wrap.section` / `.wrap.section-tight` (specificity
   0,2,0) puts it back under one rule, and the horizontal gutter is restated
   because the shorthand these override is what used to remove it.
   ========================================================================== */
.wrap.section{
  padding:var(--ds-6) var(--gut);
}
.wrap.section-tight{
  padding:var(--ds-5) var(--gut);
}
/* .content-white stacked its own 96px on top of .example's 56px. The band
   carries the rhythm; the section inside it carries none. */
.content-white .wrap{padding:var(--ds-6) var(--ds-5)}
.content-white .example{padding-top:0}
.example{margin-top:0; padding-bottom:0}
.covband{padding:var(--ds-6) 0}

@media (max-width:860px){
  .wrap.section{padding:var(--ds-5) var(--ds-4)}
  .wrap.section-tight{padding:var(--ds-4) var(--ds-4)}
  .content-white .wrap{padding:var(--ds-5) var(--ds-4)}
  .covband{padding:var(--ds-5) 0}
}

/* --- pricing plans: one rule between cards, not two ----------------------
   The grid put a 17.6px gap between three 1px-bordered cards, so each seam
   read as a pair of parallel lines. Collapsing the gap and pulling each card
   one pixel onto its neighbour leaves a single shared border. The featured
   card is lifted so its accent border wins the seam on both sides instead of
   being half-covered by the plain card next to it. */
.plans{gap:0}
.plans > .plan + .plan{margin-left:-1px}
.plans > .plan{position:relative}
.plans > .plan.featured{z-index:2}
@media (max-width:860px){
  .plans{gap:var(--ds-4)}
  .plans > .plan + .plan{margin-left:0}
}

/* The stat cells carry their own separator (`.coverage > div`, suppressed on the
   first). theme.css also has a DESCENDANT rule, `.stats-band .coverage div`,
   which therefore paints a left border on the inner `.cv` as well -- a second
   rule hard against every number, and on the first cell a stray line hanging off
   the left edge separating nothing. Three classes, to clear that selector's
   (0,2,1); two was not enough and the border stayed. */
.stats-band .coverage div.cv{border-left:0; padding-left:0}
/* Below 640px theme.css gives `.coverage div:nth-child(2n)` a border to make
   the two-column grid, and `.cv` is the second child of its own cell, so it
   picked that up too. `div.cv` matches that selector's weight and wins on
   order. */

/* ==========================================================================
   PHASE 7 — CHART SCALES AND THE EXAMPLE ROW
   Two chart parts were styled only inside a parent that most instances of them
   do not have, so they fell back to plain inline flow:

     `figure .axis span { position:absolute; left:var(--x) }`  (theme.css 1744)
     `.dist .ends { display:flex; justify-content:space-between }` (theme.css 362)

   The histogram on an item page and on the homepage example card sits in a
   plain div, not a <figure>, and its range caption is not inside `.dist`. So
   every tick collapsed to the left edge and rendered as one run of digits --
   "$1.00$50.11$99.21$148$197" -- and the p25/p75 caption came out as
   "p25 $91.65p75 $140". The scale is the part of a price chart that makes it
   readable, so these are unscoped now: wherever the markup appears, the ticks
   position themselves.
   ========================================================================== */
.axis{
  position:relative; height:20px; margin-top:7px;
  font-family:var(--ds-mono); font-size:var(--ds-t-micro);
  color:var(--ds-ink-3); font-variant-numeric:tabular-nums;
}
.axis > span{
  position:absolute; left:var(--x); transform:translateX(-50%); white-space:nowrap;
}
.axis > span:first-child{transform:none}
.axis > span:last-child{transform:translateX(-100%)}

.ends{
  display:flex; justify-content:space-between; gap:var(--ds-4);
  margin-top:6px; font-family:var(--ds-mono); font-size:var(--ds-t-micro);
  color:var(--ds-ink-3); font-variant-numeric:tabular-nums;
}

/* --- the example card's summary row --------------------------------------
   Three equal columns left two short numbers stranded at the far left of very
   wide cells while the date range -- the longest value by far -- was squeezed
   into the same width and wrapped onto a second line, which read as the
   columns overlapping. Sizing the first two to their content and giving the
   remainder to the dates fixes the balance and keeps the range on one line. */
.example-card .ex-row{
  grid-template-columns:auto auto minmax(0,1fr);
  gap:0 var(--ds-7); align-items:start;
}
.example-card .ex-row dt{
  font-size:.775rem; letter-spacing:.085em; color:var(--ds-ink-3); font-weight:650;
}
.example-card .ex-row dd{
  margin-top:5px; font-size:1.22rem; line-height:1.25; white-space:nowrap;
}
@media (max-width:640px){
  .example-card .ex-row{grid-template-columns:auto auto; gap:var(--ds-4) var(--ds-5)}
  .example-card .ex-row > div:last-child{grid-column:1/-1}
  .example-card .ex-row dd{white-space:normal; font-size:1.1rem}
}

/* --- the Estimator group -------------------------------------------------
   Three separately gated teasers used to stack as three near-identical boxes,
   each with its own "Estimator" pill and its own "See what Estimator adds"
   button pointing at the same page. One box, three columns, one call to
   action.

   The gate swaps each fragment in place, so the same markup has to serve both
   states. :has() decides: while any child is still `.panel-locked` this is a
   teaser and lays out in columns with the shared pill and button; once a
   subscriber's real panels arrive nothing matches `.panel-locked`, the columns
   collapse back to full-width blocks and the sales furniture hides itself. */
.pro-group{margin-top:var(--ds-6)}
.pro-group > .pro-group-head,
.pro-group > .pro-cta{display:none}

.pro-group:has(.panel-locked){
  border:1px solid var(--ds-line); border-radius:var(--ds-r);
  background:var(--ds-surface); padding:var(--ds-6);
}
.pro-group:has(.panel-locked) > .pro-group-head{
  display:flex; align-items:center; gap:var(--ds-3);
  padding-bottom:var(--ds-4); margin-bottom:var(--ds-5);
  border-bottom:1px solid var(--ds-line);
}
.pro-group:has(.panel-locked) > .pro-group-head h2{
  margin:0; font-size:var(--ds-t-h3); color:var(--ds-ink); letter-spacing:-.01em;
}
.pro-group:has(.panel-locked) > .pro-cta{
  display:inline-flex; align-items:center; margin-top:var(--ds-5);
}
.pro-group-cols:has(.panel-locked){
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ds-5);
}
.pro-group-cols > .panel-locked{
  margin:0; padding:0 var(--ds-5) 0 0; border:0; border-radius:0;
  background:none; box-shadow:none;
}
.pro-group-cols > .panel-locked + .panel-locked{
  border-left:1px solid var(--ds-line); padding-left:var(--ds-5);
}
.pro-group-cols > .panel-locked .panel-head{margin:0 0 var(--ds-2); padding:0; border:0}
.pro-group-cols > .panel-locked h2{
  margin:0; font-size:.985rem; font-weight:650; color:var(--ds-ink-1); letter-spacing:0;
}
.pro-group-cols > .panel-locked .locked-why{
  margin:0; font-size:var(--ds-t-small); color:var(--ds-ink-2); line-height:1.5;
}
@media (max-width:760px){
  .pro-group-cols:has(.panel-locked){grid-template-columns:1fr; gap:var(--ds-4)}
  .pro-group-cols > .panel-locked + .panel-locked{
    border-left:0; padding-left:0; border-top:1px solid var(--ds-line);
    padding-top:var(--ds-4);
  }
  .pro-group-cols > .panel-locked{padding-right:0}
}

/* The 1-9 badges on the "what is in a row" figure were small enough to read as
   specks rather than as the step numbers they are. */
.rf .rfn{
  width:23px; height:23px; font-size:.8rem; top:.8rem; right:.85rem;
}

/* ==========================================================================
   PHASE 8 — BASELINES AND SECTION RHYTHM
   ========================================================================== */

/* Each bar is a flex column holding value, bar and label, bottom-aligned. The
   label is inside that column, so a caption that wraps to two lines ("All bids
   received") pushed its own bar upward while a one-line caption ("Bid tab")
   let its bar sit lower -- five bars, five different baselines. Giving every
   bar the same three-row structure, with a label band of fixed height, puts
   the bars back on one line. */
.vbars .vb{
  display:grid; grid-template-rows:auto minmax(0,1fr) var(--vbl,2.9em);
  height:100%; align-items:end; justify-items:center;
}
.vbars .vb .vv{grid-row:1; align-self:end; margin-bottom:.3rem}
.vbars .vb .vbar{grid-row:2; align-self:end}
.vbars .vb .vl{
  grid-row:3; align-self:start; margin-top:.45rem;
  display:flex; align-items:flex-start; justify-content:center;
}

/* One rhythm for every band on every page. `.section` and `.section-tight`
   were 32px and 24px, so the gap between two boxes depended on which class the
   page happened to use -- the pricing page steps through both and the spacing
   visibly changes down the page. Both carry the same padding now, so any two
   consecutive sections are the same distance apart wherever they appear. */
.section,
.section-tight{padding-top:var(--ds-6); padding-bottom:var(--ds-6)}
.wrap.section,
.wrap.section-tight{padding-left:var(--gut); padding-right:var(--gut)}
/* `.grid.g3` added 1.4rem of its own on top of the section padding, which is
   why the coverage cards sat 86px apart where everything else sat 64. */
.grid.g3{margin-top:0}
@media (max-width:860px){
  .section,
  .section-tight{padding-top:var(--ds-5); padding-bottom:var(--ds-5)}
  .wrap.section,
  .wrap.section-tight{padding-left:var(--ds-4); padding-right:var(--ds-4)}
}

/* The Estimator box sat directly against the footer with nothing between it
   and the black band. */
.pro-group{margin-bottom:var(--ds-6)}   /* 32px, matching every other band-to-footer gap */

/* --- mobile defects found on a real phone, measured at 320-414px ---------- */

/* 1. The mobile nav drawer was white text on a white panel: unreadable, and it
      reads as a tall blank gap above the page. theme.css sets the drawer to
      the light surface for the light header but only recolours `.navdrawer a`
      (0-1-1), which loses to the base `.navdrawer a:not(.btn)` (0-2-1), so the
      links stayed white. Matched at equal weight here, and the separators and
      the burger go with them. */
.navdrawer{background:var(--surface); border-bottom:1px solid var(--line)}
.navdrawer a:not(.btn){
  color:var(--ink-2); border-bottom:1px solid var(--line-soft);
}
.navdrawer a:not(.btn):hover{color:var(--ink)}
/* and the drawer must honour its own `hidden` attribute: the <=1024px rule
   `.navdrawer{display:block}` outweighs the UA's `[hidden]{display:none}`, so
   without this the drawer is permanently open on every phone. */
.navdrawer[hidden]{display:none}

/* 2. The coverage tiles overflowed their own box on every phone width -- the
      widest figure ran 32px past the tile at 390 and 67px at 320, which is the
      clipped "5,801,59" a reader actually sees. The flex row could not shrink
      (no min-width:0) and the figure was a fixed size. */
.tiles{gap:.9rem .5rem}
.tile{min-width:0}
.tile > div{min-width:0}
.tile .tv{
  font-size:clamp(1.05rem, 5.4vw, 1.8rem);
  overflow-wrap:normal; word-break:normal;
}
.tile .tl{overflow-wrap:break-word}
@media(max-width:400px){
  .tiles{grid-template-columns:1fr}
  .tile{border-right:0}
  .tile .tv{font-size:1.5rem}
}

/* 3. The KPI band went two-up while its labels are two words long, so every
      cell wrapped ("Local-agency / prices") and the strip read as cramped.
      One stat per row below 560px instead of 420. */
@media(max-width:560px){
  .stats-band .coverage{grid-template-columns:1fr; gap:var(--ds-4) 0}
  .stats-band .coverage > div{border-left:0; padding-left:0}
  .stats-band .cv dt{white-space:nowrap}
}