/* BuildingDue site styles (style.css since the 2026-10-02 redesign).
   Same design language as marketing/landing-page.html: Archivo headings on
   Public Sans body, concrete background, ink rules, amber for anything
   deadline-shaped. One stylesheet, no build step, no framework. */

:root{
  --ink:#16202b;
  --ink-soft:#41505f;
  --concrete:#e7e8e4;
  --paper:#ffffff;
  --rule:#c7c9c3;
  --rule-soft:#e0e1dc;
  --notice:#a35d06;
  --notice-bg:#fbf0dd;
  --steel:#3d5a75;
  --green:#2f6b45;
  --green-bg:#e7f0e9;
  --red:#8c2f2f;
  --red-bg:#f7e8e8;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--concrete); color:var(--ink);
  font:400 16px/1.6 "Public Sans", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Archivo, system-ui, sans-serif; margin:0; letter-spacing:-.02em}
p{margin:0 0 1em}
a{color:var(--steel)}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible{outline:3px solid var(--steel); outline-offset:2px}

.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
.wrap--narrow{max-width:680px}
.band{padding:56px 0; border-top:1px solid var(--rule)}
.band--paper{background:var(--paper)}
.stack > * + *{margin-top:18px}

/* Fonts: Archivo 700/800 and Public Sans 400/600 only - two fewer files to
   download than before (2026-10-02, #8). Use no other weight here. */

/* ---------------------------------------------------------------- masthead
   2026-10-02 redesign: one sticky bar, menus grouped by navigation.py. The
   three zones read differently at a glance - the public site on concrete,
   the customer portal on paper, the staff backroom in ink - so nobody has to
   wonder which side of the counter they are on. */
.sitehead{position:sticky; top:0; z-index:40; background:rgba(231,232,228,.96);
          border-bottom:1px solid var(--rule)}
/* What a free sample hides (templates/_masked_note.html). */
.masked-note{display:block; margin-top:6px; font-style:italic}
/* An in-page link (#reports, #report, #buy) lands below the sticky header. */
[id]{scroll-margin-top:84px}
.zone-portal .sitehead{background:var(--paper)}
.zone-staff .sitehead{background:var(--ink); border-bottom-color:#0b1118}
.sitehead__bar{display:flex; align-items:center; gap:14px 22px; min-height:62px; flex-wrap:wrap}
.mark{
  font-family:Archivo; font-weight:800; font-size:19px; letter-spacing:-.03em;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.mark span{color:var(--notice)}
.zone-staff .mark, .mark--light{color:#fff}
.zone{font:700 11px/1 "Public Sans", sans-serif; letter-spacing:.08em; text-transform:uppercase;
      padding:5px 8px; border:1px solid var(--rule); color:var(--ink-soft); margin-left:-10px}
.zone-staff .zone{border-color:#3a4b5d; color:#c7d2dd}
.nav{display:flex; align-items:center; gap:4px 18px; flex-wrap:wrap; font-size:15px; flex:1}
.nav > a, .navmenu > summary{text-decoration:none; color:var(--ink-soft); font-weight:600;
      padding:6px 0; border-bottom:2px solid transparent}
.nav > a:hover, .nav > a.on, .navmenu > summary:hover, .navmenu > summary.on, .navmenu[open] > summary{
      color:var(--ink); border-bottom-color:var(--notice)}
.zone-staff .nav > a, .zone-staff .navmenu > summary, .zone-staff .nav__end a,
.zone-staff .nav__end .btn--link{color:#c7d2dd}
.zone-staff .nav > a:hover, .zone-staff .nav > a.on, .zone-staff .navmenu > summary:hover,
.zone-staff .navmenu > summary.on, .zone-staff .navmenu[open] > summary{color:#fff}
.nav form{margin:0}
.nav__end{display:flex; align-items:center; gap:16px; margin-left:auto}
.nav__end a{text-decoration:none; color:var(--ink-soft); font-weight:600}
.nav__end a:hover{color:var(--ink)}
.nav__end a.btn, .nav__end a.btn:hover{color:#fff}
.nav .who{color:var(--ink-soft); font-size:13px; max-width:22ch; overflow:hidden; text-overflow:ellipsis;
          white-space:nowrap}
.zone-staff .nav .who{color:#8fa0b1}
/* The phone menu: a checkbox and its label - no script needed or allowed. */
.navtoggle{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.navtoggle__label{display:none; margin:0 0 0 auto; cursor:pointer; font:600 14px/1 "Public Sans", sans-serif;
      color:var(--ink); border:1px solid var(--rule); padding:9px 12px; background:var(--paper)}
.zone-staff .navtoggle__label{background:transparent; color:#fff; border-color:#3a4b5d}
.navtoggle:focus-visible + .navtoggle__label{outline:3px solid var(--steel); outline-offset:2px}
@media(max-width:1100px){ .nav .who{display:none} }
@media(max-width:900px){
  .navtoggle__label{display:block}
  .nav{display:none; flex-basis:100%; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0;
       padding:6px 0 14px; max-height:calc(100vh - 70px); overflow-y:auto}
  .navtoggle:checked ~ .nav{display:flex}
  .nav > a, .navmenu > summary{padding:11px 0; border-bottom:1px solid var(--rule-soft)}
  .zone-staff .nav > a, .zone-staff .navmenu > summary{border-bottom-color:#26364a}
  .nav__end{margin:12px 0 0; flex-wrap:wrap}
  .nav .who{display:inline}
}

/* ----------------------------------------------------------------- buttons */
.btn{
  display:inline-block; font-family:Archivo; font-weight:700; font-size:15px;
  background:var(--ink); color:#fff; text-decoration:none;
  padding:12px 20px; border:none; cursor:pointer;
  box-shadow:3px 3px 0 var(--steel); transition:box-shadow .12s, transform .12s;
}
.btn:hover{box-shadow:1px 1px 0 var(--steel); transform:translate(2px,2px)}
.btn--ghost{background:transparent; color:var(--ink); border:2px solid var(--ink); box-shadow:none}
.btn--ghost:hover{background:var(--ink); color:#fff; transform:none}
.btn--sm{font-size:13.5px; padding:8px 14px; box-shadow:2px 2px 0 var(--steel)}
.btn--link{background:none; color:var(--steel); box-shadow:none; padding:0; border:0;
           font-family:"Public Sans"; font-weight:400; text-decoration:underline}
.btn--link:hover{transform:none; box-shadow:none}

/* ------------------------------------------------------------------- hero */
/* Side padding restated: `padding:40px 0 48px` cancelled .wrap's 24px, so on
   any screen under ~1090px every page's heading touched the edge. */
.hero{padding:40px 24px 48px}
.hero h1{font-size:clamp(32px,5.6vw,54px); line-height:1.04; font-weight:800; max-width:17ch}
.hero .lede{font-size:clamp(17px,2vw,20px); color:var(--ink-soft); max-width:58ch; margin-top:20px}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
/* A hero whose content sits in its own .wrap (the redesign's pages). */
.hero--band{padding:56px 0 60px}
.hero--home{background:linear-gradient(180deg, var(--concrete) 0%, #dfe1dc 100%)}
.hero--home h1{max-width:20ch}
.eyebrow{font:700 12px/1.3 "Public Sans", sans-serif; letter-spacing:.09em; text-transform:uppercase;
         color:var(--notice); margin:0 0 14px}
.eyebrow a{color:inherit}
/* Live figures under an industry page's headline. */
.figures{display:flex; flex-wrap:wrap; gap:14px 36px; margin-top:34px; padding-top:22px;
         border-top:1px solid var(--rule)}
.figures div{max-width:24ch}
.figures b{display:block; font-family:Archivo; font-weight:800; font-size:30px; line-height:1.1;
           font-variant-numeric:tabular-nums}
.figures span{font-size:13.5px; color:var(--ink-soft)}

/* ------------------------------------------------------------------ panels */
.panel{background:var(--paper); border:2px solid var(--ink); margin-top:26px}
.panel__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  flex-wrap:wrap; padding:13px 18px; background:var(--ink); color:#fff;
}
.panel__head b{font-family:Archivo; font-weight:700; font-size:15px}
.panel__head em{font-style:normal; font-size:13px; color:#a9b6c4}
.panel__body{padding:18px}
.panel__foot{padding:11px 18px; font-size:13px; color:var(--ink-soft); background:#f7f7f5;
             border-top:1px solid var(--rule-soft)}

.cards{display:grid; gap:16px; margin-top:20px}
@media(min-width:340px) and (max-width:719px){ .cards--4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:720px){
  .cards--2{grid-template-columns:repeat(2,1fr)}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .cards--4{grid-template-columns:repeat(4,1fr)}
}
.card{background:var(--paper); border:1px solid var(--rule); padding:16px 18px; min-width:0; overflow-wrap:anywhere}
.card b{display:block; font-family:Archivo; font-size:26px; font-variant-numeric:tabular-nums}
.card span{font-size:13px; color:var(--ink-soft)}
.card h3{font-size:18px; margin-bottom:8px}
.card p{font-size:15px; color:var(--ink-soft); margin:0}

/* ------------------------------------------------------------------ tables */
table{width:100%; border-collapse:collapse; background:var(--paper)}
.panel table{background:transparent}
th{
  text-align:left; font:600 12px/1.3 "Public Sans", sans-serif; color:var(--ink-soft);
  padding:10px 14px; border-bottom:1px solid var(--rule); white-space:nowrap;
}
td{padding:11px 14px; border-bottom:1px solid var(--rule-soft); font-size:14.5px; vertical-align:top}
tr:last-child td{border-bottom:none}
.addr{font-weight:600}
.sub{display:block; color:var(--ink-soft); font-size:13px; margin-top:2px}
.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.tablewrap{overflow-x:auto; border:1px solid var(--rule); background:var(--paper)}

/* ------------------------------------------------------------------ badges */
.tag{display:inline-block; font:600 11.5px/1 "Public Sans", sans-serif;
     padding:5px 8px; white-space:nowrap; border:1px solid var(--rule)}
.tag--od{background:var(--notice-bg); color:var(--notice); border-color:var(--notice)}
.tag--soon{background:#eef1f5; color:var(--steel); border-color:var(--steel)}
.tag--ok{background:var(--green-bg); color:var(--green); border-color:var(--green)}
.tag--bad{background:var(--red-bg); color:var(--red); border-color:var(--red)}
.tag--mute{background:#f1f1ee; color:var(--ink-soft)}

/* ------------------------------------------------------------------- forms */
form.stack{max-width:520px}
label{display:block; font-size:13.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--rule); background:var(--paper);
  font:inherit; color:var(--ink);
}
textarea{min-height:120px; resize:vertical}
.field{margin-bottom:16px}
.field .hint{font-size:13px; color:var(--ink-soft); margin-top:5px}
.row{display:grid; gap:14px}
@media(min-width:640px){ .row--2{grid-template-columns:1fr 1fr} }
.inline{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0}
.inline select, .inline input{width:auto}
.hp{position:absolute; left:-9999px}  /* honeypot: never shown to a person */

/* ------------------------------------------------------------------ notes */
.notice{padding:14px 16px; border-left:4px solid var(--steel); background:var(--paper);
        font-size:15px; margin:0 0 20px}
.notice--bad{border-color:var(--red); background:var(--red-bg)}
.notice--good{border-color:var(--green); background:var(--green-bg)}
.notice--warn{border-color:var(--notice); background:var(--notice-bg)}
.muted{color:var(--ink-soft)}
.small{font-size:13.5px}
.mono{font-family:Consolas, "SF Mono", monospace; font-size:13px; word-break:break-all}

/* ------------------------------------------------------------------- plans */
/* Compact (owner, 2026-10-25: "the cards are too tall"): what every plan shares is said once
   above them (.plan-common); a card is its name, price, who it is for and what is particular
   to it, with the button at the bottom so cards in a row line up. */
/* Each plan is one row: who it is for | what it has (short tags) | price and the button. */
.plans{display:grid; gap:10px; margin-top:14px}
.plan{background:var(--paper); border:2px solid var(--ink); padding:14px 16px;
      display:grid; grid-template-columns:1fr; gap:10px}
@media(min-width:760px){ .plan{grid-template-columns:minmax(0,1.05fr) minmax(0,1.6fr) 190px; gap:18px; align-items:start} }
.plan--lead{box-shadow:5px 5px 0 var(--notice)}
.plan h3{font-size:17px; font-weight:700; margin:0}
.plan__who p{margin:4px 0 0}
.plan .price{font-family:Archivo; font-weight:800; font-size:28px; margin:0; line-height:1.1;
             font-variant-numeric:tabular-nums}
.plan .price small{font-family:"Public Sans"; font-weight:400; font-size:13px; color:var(--ink-soft)}
.plan__buy{display:flex; flex-direction:column; gap:3px}
.plan__buy .btn{margin-top:8px; align-self:flex-start}
.plan__has{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px}
.plan__has li{font-size:13px; line-height:1.35; padding:4px 9px; border:1px solid var(--rule); background:var(--concrete)}
.plan-common{border:1px solid var(--rule); background:var(--paper); padding:12px 16px; margin:14px 0 6px}
.plan-common b{display:block; font-size:14px; margin-bottom:4px}
.plan-common ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:2px 22px}
.plan-common li{font-size:14px; padding-left:18px; position:relative}
.plan-common li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700}

/* ---------------------------------------------------------------- sections */
ol.steps{list-style:none; margin:30px 0 0; padding:0; counter-reset:s}
ol.steps li{counter-increment:s; padding:20px 0 20px 58px; position:relative;
            border-top:1px solid var(--rule)}
ol.steps li::before{
  content:counter(s); position:absolute; left:0; top:18px; font-family:Archivo;
  font-weight:800; font-size:25px; color:var(--notice); font-variant-numeric:tabular-nums;
}
ol.steps h3{font-size:18px; margin-bottom:5px}
ol.steps p{margin:0; color:var(--ink-soft); font-size:15px; max-width:62ch}

.limits{background:var(--ink); color:#e7eaed}
.limits h2, .limits h3{color:#fff}
.limits p, .limits li{color:#b6c1cc}
.limits a{color:#9dc0e0}

/* --------------------------------------------------------------- footer */
.sitefoot{background:#10181f; color:#9fb0c0; padding:48px 0 40px; font-size:14px; margin-top:0}
.sitefoot a{color:#d5dee7; text-decoration:none}
.sitefoot a:hover{color:#fff; text-decoration:underline}
.sitefoot__cols{display:grid; gap:28px; grid-template-columns:1fr 1fr}
@media(min-width:760px){ .sitefoot__cols{grid-template-columns:1.6fr repeat(4, 1fr)} }
.sitefoot__brand{grid-column:1 / -1}
@media(min-width:760px){ .sitefoot__brand{grid-column:auto} }
.sitefoot__brand p{margin:12px 0 0; max-width:34ch}
.sitefoot__col{display:flex; flex-direction:column; gap:7px}
.sitefoot__col b{font-family:Archivo; color:#fff; font-size:13px; letter-spacing:.06em;
                 text-transform:uppercase; margin-bottom:4px}
.sitefoot__legal{max-width:80ch; margin:36px 0 10px; padding-top:22px; border-top:1px solid #26333f;
                 font-size:12.5px; color:#7f91a2}
.sitefoot .small{font-size:12.5px; color:#7f91a2}

.pager{display:flex; gap:10px; align-items:center; margin-top:16px; font-size:14px}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} }
@media(max-width:620px){
  .hide-sm{display:none}
  td,th{padding-left:11px; padding-right:11px}
}

/* ---------------------------------------------------------------- utilities
   These exist so no template needs a style="" attribute: the site sends a
   strict Content-Security-Policy with no 'unsafe-inline', which blocks inline
   style attributes outright. Keep it that way - add a class here instead. */
.mt0{margin-top:0}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.mt-20{margin-top:20px}
.mt-22{margin-top:22px}
.mt-24{margin-top:24px}
.mt-26{margin-top:26px}
.mt-40{margin-top:40px}
.mb-14{margin-bottom:14px}
.mb-18{margin-bottom:18px}
.m0{margin:0}
.m0-8{margin:0 0 8px}
.m8-0{margin:8px 0 0}
.hero--tight{padding-bottom:18px}
.hero--snug{padding-bottom:22px}
.lede-sm{font-size:18px}
.w-full{max-width:none}
.w-260{min-width:260px}
.grow-260{flex:1; min-width:260px}
.ta-short{min-height:70px}
.colstack{display:flex; flex-direction:column; gap:16px}
.link-light{color:#9dc0e0}
.card--onink{background:transparent; border-color:#33465a}

/* A count that is only interesting when it is not zero: the data-quality
   cards, where a red border is the whole point of the page. */
.card--bad{border-color:var(--red); background:var(--red-bg)}
.card--warn{border-color:var(--notice); background:var(--notice-bg)}

/* A one-word state marker inside a table cell. */
.pill{display:inline-block; padding:1px 7px; margin-right:6px; border:1px solid var(--rule);
      border-radius:2px; font-size:11.5px; font-weight:600; text-transform:uppercase;
      letter-spacing:.04em; vertical-align:1px}
.pill--bad{border-color:var(--red); background:var(--red-bg); color:var(--red)}
.pill--warn{border-color:var(--notice); background:var(--notice-bg); color:var(--notice)}
.pill--good{border-color:var(--green); background:var(--green-bg); color:var(--green)}

/* Recovery codes: a block someone will read off a printout, so monospace,
   wide spacing, and two columns that still work on a phone. */
.codes{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
       gap:10px; margin:22px 0; padding:18px; background:var(--paper);
       border:1px solid var(--rule)}
.codes code{font-size:17px; letter-spacing:.08em; text-align:center; padding:6px 0}

/* Authenticator setup: the QR beside its instructions, stacked on a phone. */
.qr{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap}
.qr img{background:#fff; border:1px solid var(--rule); padding:8px; flex:none}
.qr > div{flex:1; min-width:240px}

/* Letters (proposals, association mailers): editable on screen, one per page in print. */
.letter{background:#fff; border:1px solid var(--rule); padding:36px 40px; margin:18px 0;
        line-height:1.55}
.letter:focus{outline:2px solid var(--rule)}
@media print{
  .topbar, .sitehead, .industry-bar, header.hero, footer, .noprint, nav{display:none !important}
  .band{padding:0; background:#fff}
  .letter{border:none; margin:0; padding:0}
  .pagebreak{page-break-after:always; break-after:page}
  /* The backroom's printed lead list (2026-10-09): the whole table on paper. */
  .printlist .wrap{max-width:none}
  .printlist .tablewrap{overflow:visible !important}
  .printlist table{font-size:9pt}
  .printlist tr{break-inside:avoid; page-break-inside:avoid}
}

/* ---- 2026-09-29 fifth twenty: charts, heat map, accessibility ---- */
svg text { fill: var(--ink); font-family: inherit; }
.bar { fill: var(--steel); }
.heat0 { fill: #f4f5f2; stroke: var(--rule); stroke-width: 1; }
.heat1 { fill: #f3dfbd; stroke: #fff; stroke-width: 1; }
.heat2 { fill: #e3b36e; stroke: #fff; stroke-width: 1; }
.heat3 { fill: #c98428; stroke: #fff; stroke-width: 1; }
.heat4 { fill: #8f4f06; stroke: #fff; stroke-width: 1; }
/* Keyboard users see where they are (accessibility pass, #19). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--paper); color: var(--ink);
  padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }
/* Backroom menus by industry (2026-09-30): a <details> dropdown - the CSP
   allows no scripts, and <details> opens on click, tap and keyboard alike. */
.navmenu { position: relative; }
.navmenu > summary { cursor: pointer; list-style: none; }
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary::after { content: " \25BE"; font-size: 12px; }
.navmenu > summary:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; }
.navmenu__list { position: absolute; left: -14px; top: calc(100% + 12px); z-index: 50; min-width: 270px;
  background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--notice);
  box-shadow: 0 14px 34px rgba(22,32,43,.16); padding: 6px 0; display: flex; flex-direction: column; }
/* The last menus on the bar open leftwards, so they never run off the page. */
.navmenu:nth-last-of-type(-n+2) > .navmenu__list { left: auto; right: -14px; }
/* Long menus in two columns. */
.navmenu__list--wide { display: grid; grid-template-columns: 1fr 1fr; min-width: 520px; }
.nav .navmenu__list a { padding: 8px 14px; color: var(--ink); font-size: 14.5px; text-decoration: none;
  border: none; }
.nav .navmenu__list a .sub { font-size: 12.5px; margin-top: 1px; }
.nav .navmenu__list a:hover, .nav .navmenu__list a.on { background: var(--concrete); }
.nav .navmenu__list a.on { font-weight: 600; box-shadow: inset 3px 0 0 var(--notice); }
/* A menu whose first entry is its overview ("All leads"): ruled off, bold. */
.nav .navmenu__list--lead a:first-child { border-bottom: 1px solid var(--rule-soft); font-weight: 600;
  grid-column: 1 / -1; }
@media (max-width: 900px) {
  .navmenu__list, .navmenu__list--wide { position: static; display: flex; min-width: 0; box-shadow: none;
    border: none; border-left: 3px solid var(--notice); margin: 0 0 8px; padding: 2px 0; }
  .zone-staff .navmenu__list { background: #1d2a37; }
  .zone-staff .nav .navmenu__list a { color: #e3e9ef; }
  .zone-staff .nav .navmenu__list a:hover, .zone-staff .nav .navmenu__list a.on { background: #26364a; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.chips a { border: 1px solid var(--rule); padding: 5px 11px; text-decoration: none; color: var(--ink-soft);
  font-size: 14px; background: var(--paper); }
.chips a.on, .chips a:hover { border-color: var(--ink); color: var(--ink); }
.chips a.on { font-weight: 600; background: var(--concrete); }
.chips .small { align-self: center; }
/* The storm pre-staging map: an inline SVG, sized by CSS (no inline styles). */
.stormmap { display: block; width: 100%; max-width: 640px; height: auto; margin: 12px 0; }
textarea { width: 100%; max-width: 100%; font: inherit; }
/* ------------------------------------------------- 2026-10-02 redesign: by industry */
/* The home page's chooser: one card per industry, each to its own page. */
.industry-grid { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 640px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .industry-grid { grid-template-columns: repeat(4, 1fr); } }
.industry-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px;
  background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--steel);
  color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
.industry-card:hover, .industry-card:focus-visible { transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(22,32,43,.12); border-color: var(--ink); }
.industry-card__title { font-family: Archivo; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.industry-card__pitch { color: var(--ink-soft); font-size: 15px; flex: 1; }
.industry-card__figure { font-size: 13.5px; color: var(--ink-soft); padding-top: 10px;
  border-top: 1px solid var(--rule-soft); }
.industry-card__figure b { font-family: Archivo; font-size: 17px; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.industry-card__go { font-weight: 600; font-size: 14px; color: var(--steel); }
/* Each industry keeps one accent wherever it appears. */
.industry-card--engineering { border-top-color: var(--notice); }
.industry-card--trades { border-top-color: #6b4f2a; }
.industry-card--power { border-top-color: #b8860b; }
.industry-card--inspection { border-top-color: var(--green); }
.industry-card--management { border-top-color: var(--steel); }
.industry-card--boards { border-top-color: #5b4b8a; }
.industry-card--data { border-top-color: var(--ink); }
.industry-card--ask { background: transparent; border-style: dashed; border-top-style: solid; border-top-color: var(--rule); }
/* The switcher across the top of every industry page. */
.industry-bar { background: var(--paper); border-bottom: 1px solid var(--rule); }
.industry-bar .wrap { display: flex; gap: 4px 22px; overflow-x: auto; scrollbar-width: none; }
.industry-bar .wrap::-webkit-scrollbar { display: none; }
.industry-bar a { flex: none; padding: 12px 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.industry-bar a:hover { color: var(--ink); }
.industry-bar a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--notice); }
/* Copy beside a plan card. */
.split { display: grid; gap: 30px; }
@media (min-width: 820px) { .split { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.split .plan { margin-top: 0; }
.split .plan + .plan { margin-top: 18px; }
ul.ticks { list-style: none; padding: 0; margin: 18px 0 20px; }
ul.ticks li { position: relative; padding: 9px 0 9px 30px; border-top: 1px solid var(--rule-soft); }
ul.ticks li:first-child { border-top: none; }
ul.ticks li::before { content: "\2713"; position: absolute; left: 4px; top: 9px; color: var(--green);
  font-weight: 700; }
.card--point { border-left: 4px solid var(--notice); }
.chips--static span { border: 1px solid var(--rule); padding: 5px 11px; font-size: 14px; background: var(--paper);
  color: var(--ink-soft); }
/* The portal overview's tools, built from the plan (navigation.portal_tools). */
.tool-grid { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 640px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
.tool { display: block; padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule);
  text-decoration: none; color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.tool:hover, .tool:focus-visible { border-color: var(--ink); box-shadow: 3px 3px 0 var(--steel); }
.tool b { display: block; font-family: Archivo; font-size: 16px; }
.tool span { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }
/* Staff and portal pages: a calmer header than the marketing hero. */
.zone-staff .hero, .zone-portal .hero { padding-top: 30px; padding-bottom: 26px; }
.zone-staff .hero h1, .zone-portal .hero h1 { font-size: clamp(26px, 3.6vw, 38px); max-width: none; }
.zone-staff .hero .lede, .zone-portal .hero .lede { font-size: 16.5px; margin-top: 10px; }
/* A list page's search and exports, above its filter chips. */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.toolbar form { flex: 1; min-width: 260px; }
.toolbar form input[type=text] { max-width: 420px; }
.toolbar__end { display: flex; gap: 18px; }
.chips + .chips { margin-top: -8px; }
/* Tables scroll inside their panel on a phone rather than pushing the page wide. */
.panel { overflow-x: auto; }
@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  .hero { padding-left: 16px; padding-right: 16px; }
  .hero--band { padding-left: 0; padding-right: 0; padding-top: 36px; }
  .band { padding: 40px 0; }
}

/* Stat cards that open what they count (#35), and checkbox groups (sign-up counties). */
a.card--link { display: block; color: var(--ink); text-decoration: none; transition: border-color .12s, box-shadow .12s; }
a.card--link:hover, a.card--link:focus-visible { border-color: var(--ink); box-shadow: 3px 3px 0 var(--steel); }
.checks { border: 1px solid var(--rule); padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks legend { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); padding: 0 4px; }
.check { display: flex; gap: 6px; align-items: center; font-weight: 400; color: var(--ink); margin: 0; }
.check input { width: auto; }
.checks .hint { flex-basis: 100%; margin: 0; }
/* Sign-up counties by sub-region. "Select all" is taken by the server (no
   scripts on this site), so CSS shows the region as taken: the county boxes
   fade and a line says they are all included. */
.region { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
.region + .region { border-top: 1px solid var(--rule); padding-top: 10px; }
.region-counties { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.region-taken { display: none; }
.region:has(.region-all input:checked) .region-taken { display: block; }
.region:has(.region-all input:checked) .region-counties { opacity: .45; }
/* Column menus on the lead tables (2026-10-02): Filter & Sort per column,
   a <details> per header - no script. The table must not clip them. */
.tablewrap--menus { overflow: visible; }
.colmenu { position: relative; display: inline-block; }
.colmenu > summary { cursor: pointer; list-style: none; white-space: nowrap; }
.colmenu > summary::-webkit-details-marker { display: none; }
.colmenu > summary::after { content: " \25BE"; font-size: 11px; }
.colmenu > summary.on { color: var(--ink); text-decoration: underline; text-decoration-color: var(--notice);
  text-decoration-thickness: 2px; }
.colmenu > summary:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; }
.colmenu__list { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px;
  background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--notice);
  box-shadow: 0 12px 28px rgba(22,32,43,.16); padding: 6px 0; display: flex; flex-direction: column;
  text-align: left; white-space: normal; font-weight: 400; }
.colmenu__list--wide { min-width: 300px; max-height: 70vh; overflow-y: auto; }
.colmenu--right .colmenu__list { left: auto; right: 0; }
.colmenu__list b { font: 600 11px/1.2 "Public Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); padding: 10px 14px 4px; }
.colmenu__list a { padding: 6px 14px; color: var(--ink); text-decoration: none; font-size: 14px; }
.colmenu__list a:hover { background: var(--concrete); }
.colmenu__list a.on { font-weight: 600; box-shadow: inset 3px 0 0 var(--notice); background: #f6f6f3; }
.colmenu__form { display: flex; gap: 6px; padding: 6px 14px; margin: 0; }
.colmenu__form input { width: auto; min-width: 0; flex: 1; padding: 6px 8px; font-size: 14px; }
.chips--filters a { background: var(--notice-bg); border-color: var(--notice); color: var(--ink); }
@media (max-width: 620px) {
  .colmenu__list { position: fixed; left: 8px; right: 8px; top: 72px; min-width: 0; max-height: 75vh; overflow-y: auto; }
  .colmenu--right .colmenu__list { left: 8px; right: 8px; }
}
/* The lead tables' own column for who to call (2026-10-02, the owner): the
   Building column holds the place only. */
td.whotocall { min-width: 220px; max-width: 340px; }
td.whotocall .sub + .sub { margin-top: 4px; }
.contact-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.contact-form input[type=text], .contact-form input[type=email] { width: auto; flex: 1 1 160px; }
.contact-form .check { flex-basis: 100%; }

/* Warm-ups (2026-10-02): a draft to send from your own mail, a script to call with. */
.warm pre.draft { white-space: pre-wrap; font: 14px/1.55 "Public Sans", sans-serif; background: #f7f7f5;
  border: 1px solid var(--rule-soft); padding: 12px 14px; margin: 10px 0 12px; max-height: 340px; overflow-y: auto; }
.warm .draft-script { background: #f7f7f5; border-left: 3px solid var(--notice); padding: 10px 14px; }
.warm__outcome { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.warm__outcome input[type=text] { flex: 1 1 200px; width: auto; }
/* Building facts panel (2026-10-04, building_facts) */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 18px; margin: 0 0 10px; }
.facts dt { color: var(--ink-soft); font-size: 13.5px; }
.facts dd { margin: 0; font-weight: 600; }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; gap: 0; } .facts dd { margin-bottom: 8px; } }

/* Free sample entries with masked fields (templates/_sample_macros.html, 2026-10-25): each
   record as an entry; a masked field shows blurred stand-in text with a lock label, never the
   real value. Same look as the emailed sample (static/report.css). */
.sample-list { list-style: none; margin: 0; padding: 0; }
.sample-item { padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); }
.sample-item:last-child { border-bottom: 0; }
.sample-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sample-item__where { font-weight: 600; }
.sample-item__sub { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.sample-item__locked { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 8px 0 0; }
.sample-item__locked div { min-width: 0; }
.sample-item__locked dt { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.sample-item__locked dd { margin: 2px 0 0; }
.sample-empty { padding: 12px 16px; margin: 0; }
.masked { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 100%; }
.masked__blur { filter: blur(4.5px); color: var(--ink-soft); user-select: none; letter-spacing: .5px; }
.masked__lock { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--steel); background: #e9eff5; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
/* API docs (2026-10-27): a request or a JSON record, scrolling inside its box on a phone. */
pre.code { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px;
  font-size: 13px; line-height: 1.45; overflow-x: auto; max-width: 100%; white-space: pre; }