/* ==========================================================================
   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.  One photo per pageview, chosen by the script on the homepage; this rule
   paints the first one so the band is never empty before the script runs. */
.hero-slide{
  background-color:#132038;
  background-image:url("/assets/img/hero-earthwork.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-paving.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)}