/* Rig Compliance | stylesheet, v2
   Rebuilt after Myshawn called the v1 build "bland AI template" and asked for it
   to feel closer to TenFour's actual production site: warmer paper background,
   confident display type, real depth via borders/shadow-free layering, a truck
   calculator that visibly recalculates, and generous breathing room. Still
   charcoal + red accent + white per the locked spec; red stays an accent, never
   a large field. System fonts only, no external font requests. */

/* ---------- self-hosted industrial type (Oswald headings + Montserrat body) ---------- */
@font-face{
  font-family:"Oswald";src:url("/fonts/oswald.woff2") format("woff2");
  font-weight:200 700;font-display:swap;
}
@font-face{
  font-family:"Montserrat";src:url("/fonts/montserrat.woff2") format("woff2");
  font-weight:100 900;font-display:swap;
}

:root{
  --ink:#181b1f;
  --ink-2:#2c3138;
  --ink-soft:#5f6670;
  --rule:#e3dfd6;
  --rule-dark:#3a4048;
  --red:#c22730;
  --red-deep:#9c1e26;
  --green:#1a8c52;        /* done / good, on LIGHT surfaces. 4.20:1 on the report paper: clears the 3:1 bar for large text and icons (its only two uses) with room, and reads green rather than charcoal. NOT a body-text green. */
  --green-dark:#7dd3a0;   /* done / good, on DARK surfaces only. 1.77:1 on light paper, so it is never valid there. */
  --paper:#fffdf9;        /* warm paper, not clinical white */
  --card:#ffffff;
  --shell:#f3efe6;        /* warm shell for alt sections, echoes TenFour's cream */
  --tint:#faf7f0;
  --maxw:1160px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}

a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--red)}
a:hover{color:var(--red)}

h1,h2,h3{
  font-family:"Oswald",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.01em;
  text-transform:uppercase;
  margin:0;
}
/* The hero headline is title case, not all-caps: caps read as a promo
   banner, title case reads as an established business. Section labels
   stay uppercase for the industrial hierarchy. */
h1{text-transform:none;letter-spacing:-.005em}

.kicker{
  font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);
}

/* ---------- mobile menu (the phone-number button becomes a hamburger) ----------
   Desktop keeps the nav links and the phone number: that number is proof a real
   person answers, so it stays visible wherever there is room for it. */
.menu-btn{
  display:none;width:42px;height:42px;padding:0;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
  border:1px solid var(--rule);border-radius:6px;background:var(--card);cursor:pointer;
}
.menu-btn span{display:block;width:19px;height:2px;background:var(--ink);border-radius:1px;
  transition:transform .18s ease,opacity .18s ease}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.m-nav{display:none}
.m-nav.open{display:block;background:var(--paper);border-bottom:2px solid var(--ink)}
/* NOTE: do NOT put a .wrap inside .m-nav. The menu lives inside
   <header class="masthead">, and `.masthead .wrap` sets display:flex,
   which silently turned this list into a row. Its own class avoids the
   collision entirely. */
.m-nav .m-inner{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.m-nav a{
  display:block;padding:16px 0;color:var(--ink);
  font-family:"Oswald",system-ui,sans-serif;font-size:17px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  /* The site paints a red underline under EVERY link by default (the
     global `a` rule). The desktop nav cancels it with border-bottom:0;
     this menu never did, so its red dividers were an inheritance
     accident, and a faint second rule from the old border-top stacked
     under them. Both are now canceled and the divider is stated here
     on purpose, so changing the global link style later can no longer
     silently redraw this menu. */
  border-bottom:0;
  border-top:1.5px solid var(--red);
}
/* no rule hanging directly under the header; that border already exists */
.m-nav .m-inner > a:first-child{border-top:0}
.m-nav .m-call{
  margin:14px 0 18px;padding:15px 20px;border:0;border-radius:6px;text-align:center;
  background:var(--red);color:#fff;font-size:15px;letter-spacing:.05em;
}
.m-nav .m-call:hover{background:var(--red-deep)}

/* ---------- header ---------- */
.masthead{border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:20}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1;border:0}
.brand .mark{
  width:30px;height:30px;background:var(--ink);border-radius:4px;flex:none;position:relative;
}
.brand .mark:before{
  content:"";position:absolute;left:7px;top:9px;width:16px;height:9px;border:2px solid var(--red);border-radius:1px;
}
.brand em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.22em;color:var(--red);font-weight:800;margin-top:4px;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:26px;font-size:15px;flex-wrap:wrap}
.nav a{border-bottom:0;font-weight:700}
.nav a:hover{border-bottom:1.5px solid var(--red)}
.nav .phone{
  font-weight:800;font-size:15px;letter-spacing:.01em;white-space:nowrap;
  background:var(--ink);color:#fff;border:0;padding:11px 18px;border-radius:3px;
}
.nav .phone:hover{background:var(--red)}

/* ---------- hero (photographic) ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  /* AVIF first (164KB against 281KB for the JPEG), then the JPEG for the
     browsers that cannot decode it. image-set only downloads the one it picks,
     so the fallback never costs a byte to a modern browser. The scrim over this
     photo is heavy (0.93 down to 0.38), which is why quality 55 is safe here. */
  background-color:#14171a;
  background-image:url("/images/hero-desktop.jpg");
  background-image:image-set(
    url("/images/hero-desktop.avif") type("image/avif"),
    url("/images/hero-desktop.jpg") type("image/jpeg"));
  background-position:center;background-size:cover;background-repeat:no-repeat;
  border-bottom:1px solid var(--rule-dark);
  display:flex;align-items:center;min-height:min(80vh,640px);
}
/* directional overlay: heavy on the left where the text sits, light
   on the right so the truck still reads. Not a flat wash. */
.hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(11,13,16,.93) 0%,
    rgba(11,13,16,.82) 38%,
    rgba(11,13,16,.50) 72%,
    rgba(11,13,16,.38) 100%);
}
.hero .wrap{position:relative;z-index:1;width:100%;padding-top:70px;padding-bottom:70px}
.hero .kicker{color:#ff9198}
.hero h1{
  font-size:clamp(2.2rem,5vw,3.7rem);
  color:#fff;margin:14px 0 0;max-width:18ch;
}
.hero h1 b{color:#fff;border-bottom:5px solid var(--red);padding-bottom:3px;font-weight:700}
.hero .sub{margin-top:18px;max-width:46ch;font-size:clamp(1.02rem,2vw,1.17rem);color:#d9dce1}
.hero .trust-row{margin-top:26px;text-align:left}

/* hero buttons */
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
/* Desktop: size the pair to the WIDER label so both buttons match. Left
   as content-width, the ghost button ("Free DOT check") was 214px against
   173px for the red primary, so the secondary outweighed the primary.
   Mobile keeps its own flex rules below, which already equalise them. */
@media (min-width:761px){
  .hero-cta{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:max-content}
  /* the grid blockifies the buttons, and .btn is inline-block, so the
     label defaulted to left-aligned inside the now-wider box. Centre it. */
  .hero-cta .btn{text-align:center}
}
.btn{
  display:inline-block;font-family:inherit;font-weight:800;font-size:15px;line-height:1;
  letter-spacing:.05em;text-transform:uppercase;padding:17px 30px;border-radius:6px;
  border:2px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-primary:hover{background:#9f1a22;border-color:#9f1a22;color:#fff}
.btn-ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.18);border-color:#fff;color:#fff}

/* ---------- the "what we cover" pills band ---------- */
.pills-band{background:var(--paper);padding:26px 0 28px;border-bottom:1px solid var(--rule)}
.pills-band .pills-row{justify-content:center}

/* ---------- free check popup ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 18px 18px;overflow-y:auto}
.modal[hidden]{display:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(8,10,12,.72);cursor:pointer}
.modal-panel{
  position:relative;z-index:1;background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:12px;
  padding:26px 26px 24px;width:100%;max-width:620px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}
.modal-close{
  position:absolute;top:10px;right:12px;width:38px;height:38px;
  font-family:inherit;font-size:26px;line-height:1;font-weight:700;
  background:transparent;border:0;color:var(--ink-soft);cursor:pointer;border-radius:6px;
}
.modal-close:hover{background:var(--shell);color:var(--ink)}
.modal-panel .tag{
  display:inline-block;background:var(--ink);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:3px;margin-bottom:12px;
}
.modal-panel h2{font-size:22px;font-weight:800;letter-spacing:.01em}
.modal-panel .subhead{font-size:11.5px;color:var(--ink-soft);margin-top:5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
body.modal-open{overflow:hidden}

/* trust row: sits in the dark gap between the check card and the pills.
   Styled to match the original hero bullet row: bold uppercase, wide
   tracking, solid red square bullets between items, all on one line. */
.trust-row{
  margin-top:18px;text-align:center;white-space:nowrap;overflow-x:auto;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#eceef1;
}
.trust-row .sep{
  display:inline-block;width:7px;height:7px;margin:0 12px;background:var(--red);
  border-radius:1px;vertical-align:middle;
}

/* ---------- the check tool, inside the popup ----------
   These styles were scoped to `.check`, the class of the old inline
   section. When the tool moved into `.modal-panel` the selectors
   silently stopped matching and the input and button fell back to bare
   browser defaults: tiny button, stock blue focus ring. Retargeted to
   `.modal-panel` so it cannot happen again, and there is no `.check`
   card left to keep in sync. */
.modal-panel .row{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;align-items:flex-end}
.modal-panel .field{flex:1 1 220px;min-width:0}
.modal-panel label{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px;
}
.modal-panel input[type=text]{
  width:100%;font-size:21px;font-weight:700;letter-spacing:.02em;font-family:inherit;
  padding:14px 15px;border:2px solid var(--ink);border-radius:6px;
  background:var(--paper);color:var(--ink);
}
.modal-panel input[type=text]:focus{outline:3px solid var(--red);outline-offset:1px}
.modal-panel button[type=submit]{
  flex:0 0 auto;font-family:inherit;font-size:14.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:14px 26px;
  border:2px solid var(--ink);border-radius:6px;background:var(--ink);
  color:#fff;cursor:pointer;transition:background .12s ease;
}
.modal-panel button[type=submit]:hover{background:var(--red);border-color:var(--red)}
.modal-panel button[type=submit]:disabled{opacity:.6;cursor:progress}
.modal-panel .note{margin-top:14px;font-size:13.5px;color:var(--ink-soft)}
.modal-panel .note b{color:var(--ink)}

/* what the check actually returns, stated before anyone types a number */
.whatcheck{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
.whatcheck h3{
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0;
}
.whatcheck ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.whatcheck li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.whatcheck li:before{
  content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;
  background:var(--red);border-radius:1px;
}

/* ---------- results ---------- */
#results{margin-top:22px;border-top:2px solid var(--rule);padding-top:20px;display:none}
#results.on{display:block}
/* once a report is on screen the explainer has done its job */
#results.on ~ .whatcheck{display:none}
.res-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start}
.res-head .who{font-size:19px;font-weight:800}
.res-head .meta{font-size:13px;color:var(--ink-soft);margin-top:3px}
.res-badge{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  border:2px solid var(--ink);border-radius:4px;padding:6px 12px;white-space:nowrap;
}
.res-badge.warn{border-color:var(--red);color:var(--red)}
.res-facts{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:14px;font-size:14px;color:var(--ink-soft)}
.res-facts b{color:var(--ink)}
.finding{border:1px solid var(--rule);border-left:5px solid var(--ink-soft);border-radius:6px;padding:15px 17px;margin-top:12px}
.finding.high{border-left-color:var(--red)}
.finding.medium{border-left-color:#a86a00}
.finding.ok{border-left-color:#1f6b3a}
.finding .ft{font-weight:800;font-size:16px}
.finding .fd{font-size:15px;color:var(--ink-2);margin-top:6px;white-space:pre-line}
.finding .ff{font-size:14px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--rule)}
.finding .ff b{color:var(--red)}
.res-err{border:2px solid var(--red);border-radius:6px;padding:15px 17px;font-weight:700}
.cannotsee{border:1px solid var(--rule);border-radius:8px;padding:17px 19px;margin-top:18px;background:var(--tint)}
.cannotsee h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.cannotsee ul{margin:10px 0 0;padding-left:20px;font-size:15px;color:var(--ink-2)}

/* ---------- email capture ---------- */
.capture{margin-top:18px;border:1px solid var(--rule);border-radius:8px;padding:19px;background:var(--tint)}
.capture h3{font-size:19px;font-weight:800}
.capture p{margin:8px 0 0;font-size:15px;color:var(--ink-2)}
.capture form{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.capture input[type=email]{
  flex:1 1 240px;min-width:0;font-size:16px;padding:12px 13px;border-radius:5px;
  border:2px solid var(--ink);font-family:inherit;background:var(--card);
}
.capture input[type=email]:focus{outline:3px solid var(--red);outline-offset:1px}
.capture button{
  font-family:inherit;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 22px;border:2px solid var(--ink);border-radius:5px;background:var(--ink);color:#fff;cursor:pointer;
}
.capture button:hover{background:var(--red);border-color:var(--red)}
.capture .fine{font-size:13px;color:var(--ink-soft);margin-top:10px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{margin-top:10px;font-size:14px;font-weight:700}
.msg.ok{color:#1f6b3a}
.msg.bad{color:var(--red)}

/* ---------- service pills ---------- */
.pills{margin-top:34px;padding-top:28px;border-top:1px solid var(--rule)}
.pills-row{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.pills-row span{
  background:var(--card);border:1px solid var(--rule);
  color:var(--ink-2);font-size:13px;font-weight:700;letter-spacing:.01em;
  padding:9px 15px;border-radius:6px;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* ---------- fact strip (real, checkable numbers; never invented stats) ---------- */
.stakes{
  background:linear-gradient(180deg,#3a1215,#2a0f11);
  border-bottom:1px solid var(--rule-dark);padding:44px 0 48px;
}
.stakes-kicker{
  text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:#ff9198;margin:0 0 26px;
}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 24px}
.facts div{text-align:center;padding:0 6px}
.facts .n{font-size:30px;font-weight:800;color:#fff;line-height:1}
.facts .n.good{color:var(--green-dark)}
.facts .l{font-size:13px;color:#dcc7c8;margin-top:8px;line-height:1.4}

/* ---------- content sections ---------- */
/* ---------- the date-count tool ----------
   Built on the same mechanics as the price calculator: two steppers, a number
   that updates, no lookup and no server. The big figure is ink, not red,
   because it is a fact about their operation rather than a warning, and red on
   this site means "something needs you". */
.dc{
  margin-top:36px;border:2px solid var(--ink);border-radius:12px;background:var(--card);
  padding:28px 28px 26px;
}
.dc-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.dc-top .tag{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.dc-top h3{font-size:23px;font-weight:800;margin-top:6px}
.dc-ctrl{display:flex;gap:22px;flex-wrap:wrap}
.dc-field{display:flex;flex-direction:column;gap:8px}
.dc-k{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.dc-total{margin-top:28px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.dc-total .n{font-family:"Oswald",system-ui,sans-serif;font-size:64px;font-weight:700;line-height:1;color:var(--ink)}
.dc-total .l{font-size:15px;color:var(--ink-soft);max-width:36ch}
.dc-total .l b{color:var(--ink-2)}
.dc-sum{margin-top:20px;max-width:430px;font-size:14.5px}
.dc-sum>div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--rule)}
.dc-sum>div span{color:var(--ink-soft)}
.dc-sum>div b{font-weight:800;color:var(--ink)}
.dc-sum .tot{border-bottom:0;border-top:2px solid var(--ink);margin-top:4px;padding-top:9px}
.dc-sum .tot span{color:var(--ink);font-weight:700}
.dc-note{margin-top:16px;font-size:13.5px;color:var(--ink-soft);max-width:80ch}
.dc-groups{
  margin-top:24px;border-top:1px solid var(--rule);padding-top:22px;
  /* Two columns. Driver and truck stack on the left (6 rows) against company
     level on the right (5 rows). A third column for the single truck row left a
     dead gap in the middle. */
  display:grid;grid-template-columns:1fr 1fr;gap:26px 44px;
}
.dc-col{display:flex;flex-direction:column;gap:24px}
.dc-group h4{
  font-family:"Oswald",system-ui,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;margin:0;padding-bottom:9px;border-bottom:2px solid var(--ink);
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
}
.dc-group h4 span{font-family:"Montserrat",sans-serif;font-size:10px;letter-spacing:.1em;color:var(--ink-soft);font-weight:800}
.dc-group ul{list-style:none;margin:0;padding:0}
.dc-group li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.4}
.dc-group li:last-child{border-bottom:0}
.dc-group li b{display:block;font-weight:700}
.dc-group li span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.dc-conseq{margin-top:22px;font-size:15px;color:var(--ink-2);max-width:76ch}
.dc-cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* The masthead is sticky and 68px tall, and nothing set a scroll margin, so
   every in-page link (#what-we-do, #price, the hero "See Pricing" button) landed
   its target underneath the header. This is the fix. */
section[id],div[id]{scroll-margin-top:88px}

section.band{padding:64px 0;border-bottom:1px solid var(--rule)}
section.band.alt{background:var(--shell)}
section.band .kicker{margin-bottom:10px;display:block}
section.band h2{font-size:clamp(1.55rem,3.3vw,2.15rem)}
section.band .lead{margin-top:14px;font-size:17.5px;color:var(--ink-2);max-width:64ch}

ul.handles{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
ul.handles li{
  padding:20px 22px;border:1px solid var(--rule);border-radius:8px;background:var(--card);
  display:flex;gap:16px;align-items:flex-start;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px -6px rgba(0,0,0,.08);
}
ul.handles .ic{
  flex:none;width:38px;height:38px;border-radius:8px;background:var(--shell);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--red);
}
ul.handles b{display:block;font-size:16px;font-weight:800}
ul.handles span{font-size:14.5px;color:var(--ink-soft)}

.diy-list{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.diy-list li{padding:18px 20px;border:1px solid var(--rule);border-left:4px solid var(--red);border-radius:6px;font-size:16px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px -6px rgba(0,0,0,.08)}
.diy-list li b{font-weight:800;display:block}
.diy-list li span{color:var(--ink-soft);display:block;font-size:14.5px;margin-top:4px}

/* ---------- dynamic truck calculator ---------- */
.calc{
  margin-top:30px;border:2px solid var(--ink);border-radius:12px;background:var(--card);
  padding:28px 28px 26px;box-shadow:0 2px 4px rgba(0,0,0,.06),0 14px 32px -18px rgba(194,39,48,.18);
}
.calc-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.calc-top .tag{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.calc-top h3{font-size:23px;font-weight:800;margin-top:6px}
.stepper{display:flex;align-items:center;gap:0;border:2px solid var(--red);border-radius:8px;overflow:hidden;box-shadow:0 0 0 3px rgba(194,39,48,.12)}
.stepper button{
  font-family:inherit;width:44px;height:52px;border:0;background:var(--paper);font-size:22px;font-weight:800;
  cursor:pointer;color:var(--ink);
}
.stepper button:hover{background:var(--shell)}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper input{
  width:60px;height:52px;text-align:center;border:0;border-left:2px solid var(--red);border-right:2px solid var(--red);
  font-size:22px;font-weight:800;font-family:inherit;background:var(--card);color:var(--ink);
}
.stepper input:focus{outline:none}
.calc-sub{font-size:14px;color:var(--ink-soft);margin-top:6px}
.calc-price{margin-top:26px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.calc-price .n{font-size:48px;font-weight:800;letter-spacing:-.02em;line-height:1}
.calc-price .permo{font-size:17px;font-weight:700;color:var(--ink-soft)}
.calc-formula{margin-top:10px;font-size:15px;color:var(--ink-2)}
.calc-formula b{color:var(--ink)}
.calc-setup{margin-top:6px;font-size:14px;color:var(--ink-soft)}
.calc-included{margin-top:20px;border-top:1px solid var(--rule);padding-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px}
.calc-included div{font-size:14.5px;color:var(--ink-2);display:flex;gap:8px}
.calc-included div:before{content:"✓";color:var(--red);font-weight:800;flex:none}
.calc-cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.calc-cta a.btn{
  display:inline-block;background:var(--ink);color:#fff;font-weight:800;font-size:14.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:14px 24px;border-radius:6px;border:0;
}
.calc-cta a.btn:hover{background:var(--red)}
.calc-cta .note{font-size:13.5px;color:var(--ink-soft)}

.anchor{margin-top:24px;border-left:5px solid var(--red);padding:6px 0 6px 18px;font-size:17.5px}
.anchor b{font-weight:800}

.notinc{margin-top:24px;border:1px solid var(--rule);border-radius:8px;padding:20px 22px;background:var(--tint)}
.notinc h3{font-size:13px;letter-spacing:.13em;text-transform:uppercase;font-weight:800}
.notinc ul{margin:13px 0 0;padding-left:20px;column-count:2;column-gap:30px;font-size:15px;color:var(--ink-2)}
.notinc li{padding:3px 0;break-inside:avoid}

/* ---------- who this is for ---------- */
/* Fit and not-fit side by side. The green squares mark "yes" and the grey ones
   "no", matching the square-bullet idiom already used in the trust row. */
.fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px 44px;margin-top:32px}
.fit h3{
  font-family:"Oswald",system-ui,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;margin:0;padding-bottom:11px;
  border-bottom:2px solid var(--ink);
}
.fit.no h3{color:var(--ink-soft);border-bottom-color:#b9bfc7}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{
  position:relative;padding:11px 0 11px 24px;font-size:16px;
  color:var(--ink-2);border-bottom:1px solid var(--rule);line-height:1.5;
}
.fit li:last-child{border-bottom:0}
.fit li:before{content:"";position:absolute;left:0;top:18px;width:10px;height:10px;background:var(--green)}
.fit.no li:before{background:#737b85}
.fitnote{
  margin-top:34px;max-width:820px;padding:16px 20px;font-size:16px;color:var(--ink-2);
  background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--ink);
}

.who-grid{display:grid;grid-template-columns:1fr 300px;gap:36px;margin-top:28px;align-items:start}
.who-grid p{font-size:16.5px}
.who-grid .name{font-size:24px;font-weight:800;margin:0}
.who-grid .where{font-size:13.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-top:7px}
.who-grid .tel{margin-top:18px;font-size:22px;font-weight:800}
.who-grid .tel a{border-bottom:0}
.who-grid .mail{margin-top:4px;font-size:15px}
/* The photo of Shawn used to sit here in a dashed placeholder box. Myshawn's
   call, Sep 17 2026: the box comes off, because a labelled empty box tells every
   visitor the business is not finished, and text alone reads as a decision.
   The contact block sits in the right column instead, so the section does not
   leave a dead band down the side. When a real photo exists, drop an <img> in
   place of .who-card. */
.who-card{
  border:1px solid var(--rule);border-top:4px solid var(--ink);
  background:var(--card);padding:20px 22px 22px;
}
.who-card .k{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
}

footer.foot{border-top:2px solid var(--ink);padding:34px 0;background:var(--paper)}
footer.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft)}
footer.foot b{display:block;font-size:16px;color:var(--ink)}
footer.foot .legal{font-size:12.5px;max-width:70ch;margin-top:24px;padding-top:20px;border-top:1px solid var(--rule)}

/* ---------- how this works ---------- */
/* The rows run the full width of the wrap, like every other section on the
   site. The step TEXT keeps a readable measure inside that full-width row, so
   the rules line up with the rest of the page without the copy running 120
   characters to a line. */
.steps{list-style:none;margin:32px 0 0;padding:0}
.steps li{display:flex;gap:20px}
.steps li+li{margin-top:24px;padding-top:24px;border-top:1px solid var(--rule)}
.steps .n{
  flex:none;width:30px;font-family:"Oswald",system-ui,sans-serif;
  font-size:26px;font-weight:700;line-height:1;color:var(--red);
}
.steps .c{min-width:0}
.steps .c b{display:block;font-size:17.5px;font-weight:800;letter-spacing:.005em;line-height:1.35;max-width:62ch}
.steps .c span{display:block;color:var(--ink-2);margin-top:6px;max-width:64ch}
h3.rpt-lead{font-size:22px;margin-top:54px}
p.rpt-note{margin:10px 0 0;color:var(--ink-soft);font-size:15px;max-width:76ch}

/* ---------- the sample monthly report, shown as a document ----------
   site/index.html shows a CONDENSED preview. samples/monthly-report.html is the
   FULL document a client receives. So: design changes go in BOTH files, content
   cuts go in the homepage copy only.

   Every class inside .rpt is prefixed r- because .brand, .foot, .legal and .wrap
   already exist in this stylesheet and would leak in otherwise. The type here is
   scaled up from the print sheet, which is why the two files differ in size. */
.rpt{
  margin:26px 0 0;background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-top:5px solid var(--ink);
}
.rpt p{margin:0}

/* masthead. The brand mark is copied from the site header so the document reads
   as ours rather than as a generic PDF. */
.rpt .r-mast{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;
  padding:20px 28px 15px;border-bottom:2px solid var(--red);
}
.rpt .r-brand{display:flex;align-items:center;gap:11px}
.rpt .r-mark{width:30px;height:30px;background:var(--ink);border-radius:4px;flex:none;position:relative}
.rpt .r-mark:before{
  content:"";position:absolute;left:7px;top:9px;width:16px;height:9px;
  border:2px solid var(--red);border-radius:1px;
}
.rpt .r-name{
  font-family:"Oswald",system-ui,sans-serif;font-size:23px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;line-height:1;
}
.rpt .r-name .tag{
  display:block;font-family:"Montserrat",sans-serif;font-size:9px;font-weight:800;
  letter-spacing:.18em;color:var(--red);margin-top:7px;text-transform:uppercase;
}
.rpt .r-contact{text-align:right;font-size:12px;line-height:1.7;color:var(--ink-soft)}
.rpt .r-contact b{
  display:block;font-family:"Oswald",system-ui,sans-serif;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:2px;
}

/* period band */
.rpt .r-band{
  background:var(--ink);color:#fff;padding:9px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.rpt .r-band .sample{color:#f0a0a6;letter-spacing:.09em}

/* client: two tight lines instead of three labelled rows, so the document gets
   to the numbers faster */
.rpt .r-client{padding:15px 28px 16px;border-bottom:1px solid var(--rule)}
.rpt .r-client .name{font-size:15px;font-weight:700}
.rpt .r-client .name em{font-style:normal;font-weight:400;color:var(--ink-soft)}
.rpt .r-client .meta{font-size:12.5px;color:var(--ink-soft);margin-top:3px;letter-spacing:.02em}

/* the three numbers: the focal point, built as a dark scoreboard so it reads as
   one block at arm's length. This mirrors the site's own stats panel, which
   already runs a light green on its dark field. On a dark field the LIGHT greens
   and reds are the readable ones, which is the reverse of the light surfaces.
   Each cell also carries a coloured rule so the state survives a black-and-white
   print job. */
.rpt .r-glance{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--ink);
}
.rpt .r-glance>div{padding:19px 28px 21px;border-right:1px solid rgba(255,255,255,.14);position:relative}
.rpt .r-glance>div:last-child{border-right:0}
.rpt .r-glance>div:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:#a7aeb8;
}
.rpt .r-glance>div.good:after{background:var(--green-dark)}
.rpt .r-glance>div.alert:after{background:#ff9198}
.rpt .gn{font-family:"Oswald",system-ui,sans-serif;font-size:36px;font-weight:700;line-height:1;color:#fff}
.rpt .gn.good{color:var(--green-dark)}
.rpt .gn.alert{color:#ff9198}
.rpt .gl{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#a7aeb8;margin-top:9px}

/* the note */
.rpt .r-note{padding:22px 28px 20px;border-bottom:1px solid var(--rule)}
.rpt .r-note p{margin:0 0 10px;font-size:15.5px;line-height:1.6;max-width:70ch}
.rpt .r-note p:last-of-type{margin-bottom:0}
.rpt .r-note .sig{
  margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--ink-soft);
}
.rpt .r-note .sig b{
  font-family:"Oswald",system-ui,sans-serif;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}

/* section headings */
.rpt h4.rh{
  font-family:"Oswald",system-ui,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;margin:0;padding:22px 28px 11px;color:var(--ink);
}
.rpt h4.rh i{font-style:normal;color:var(--red);margin-right:8px}

/* what needs you */
.rpt .r-asks{padding:0 28px 4px}
.rpt .r-ask{border:1px solid var(--rule);border-left:4px solid var(--red);padding:14px 16px 15px;margin-bottom:9px}
.rpt .r-ask .t{font-weight:800;font-size:15px}
.rpt .r-ask .d{font-size:14px;color:var(--ink-soft);margin-top:4px;line-height:1.5;max-width:80ch}
.rpt .r-ask .by{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-top:10px}

/* handled */
.rpt ul.r-done{list-style:none;margin:0;padding:0 28px}
.rpt ul.r-done li{position:relative;padding:11px 0 11px 27px;font-size:15px;border-bottom:1px solid var(--rule);line-height:1.45}
.rpt ul.r-done li:last-child{border-bottom:0}
.rpt ul.r-done li:before{
  content:"";position:absolute;left:2px;top:17px;width:13px;height:7px;
  border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg);
}
.rpt ul.r-done li span{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:2px}

/* dates table */
.rpt table.r-cal{width:100%;border-collapse:collapse;font-size:14px}
.rpt table.r-cal th{
  text-align:left;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:800;padding:0 28px 8px;border-bottom:1px solid var(--ink);
}
.rpt table.r-cal th:last-child,.rpt table.r-cal td:last-child{text-align:right}
.rpt table.r-cal td{padding:13px 28px;border-bottom:1px solid var(--rule);vertical-align:top}
.rpt table.r-cal td.what{font-weight:700}
.rpt table.r-cal td.who{color:var(--ink-soft)}
.rpt table.r-cal td.when{color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.rpt table.r-cal tr.urgent td{background:#fdf2f3;border-bottom-color:#f3d3d6}
.rpt table.r-cal tr.urgent td.what{border-left:3px solid var(--red);padding-left:25px}
.rpt table.r-cal tr.urgent td.when{color:var(--red);font-weight:800}
.rpt table.r-cal td.when .flag{ display:block;font-size:9px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:3px;white-space:nowrap; }

/* the edge */
.rpt .r-edge{padding:0 28px 6px}
.rpt .r-edge .box{border:1px solid var(--ink);padding:16px 18px;background:var(--tint)}
.rpt .r-edge h5{
  margin:0 0 9px;font-family:"Oswald",system-ui,sans-serif;
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
}
.rpt .r-edge p{margin:0 0 9px;font-size:14px;color:var(--ink-2);line-height:1.55}
.rpt .r-edge ul{margin:0;padding-left:16px;font-size:14px;color:var(--ink-soft)}
.rpt .r-edge ul li{padding:2px 0;line-height:1.45}
.rpt .r-edge ul li b{color:var(--ink-2)}
.rpt .r-edge .close{margin-top:10px;font-size:14px;font-weight:600}

/* the promise */
.rpt .r-promise{margin:24px 0 0;background:var(--ink);padding:19px 28px}
.rpt .r-promise .h{
  font-family:"Oswald",system-ui,sans-serif;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#f0a0a6;margin-bottom:12px;
}
.rpt .r-promise ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}
.rpt .r-promise li{font-size:13.5px;line-height:1.4;padding-left:15px;position:relative;color:#e8eaee}
.rpt .r-promise li:before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;background:var(--red)}
.rpt .r-promise li b{color:#fff}

/* foot + legal */
.rpt .r-foot{
  padding:17px 28px 6px;font-size:13px;color:var(--ink-soft);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.rpt .r-foot b{
  display:block;font-family:"Oswald",system-ui,sans-serif;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:2px;
}
.rpt .r-legal{padding:12px 28px 20px;font-size:11.5px;line-height:1.5;color:var(--ink-soft)}

/* The homepage shows only the top of the report, so this says what the rest
   holds. It sits OUTSIDE the sheet on purpose: explanatory copy printed inside
   the document breaks the illusion that the document is real. */
/* The one link to the full report page, generated from samples/monthly-report.html
   by tools/build-report-page.py. One page, both devices, no extra page length. */
.rpt-caption .rpt-more{font-weight:800;color:var(--red);white-space:nowrap}
.rpt-caption{
  margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--ink-soft);max-width:78ch;
}
.rpt-caption b{color:var(--ink-2)}

@media (max-width:900px){
  .calc-included{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* the nav links and the phone button collapse into the hamburger.
     The number is not lost: it is the first thing in the open menu. */
  .nav{display:none}
  .menu-btn{display:flex}
  .masthead .wrap{flex-wrap:nowrap;gap:12px}
  .brand{font-size:16px}
  .brand .mark{width:24px;height:24px}
  /* photo hero: the truck sits at the BOTTOM of the crop. The overlay
     is a SCRIM, not a wash -- dark only where the words actually are,
     then dying out fast below the trust line so the photo reads as a
     photograph instead of a flat black panel. Darkening pixels that
     have no text on them is wasted readability budget. */
  .hero{
    background-image:url("/images/hero-mobile.jpg");
    background-image:image-set(
      url("/images/hero-mobile.avif") type("image/avif"),
      url("/images/hero-mobile.jpg") type("image/jpeg"));
    background-position:50% 100%;
    min-height:88svh;
  }
  .hero:before{
    background:linear-gradient(180deg,
      rgba(11,13,16,.90) 0%,
      rgba(11,13,16,.84) 38%,
      rgba(11,13,16,.78) 58%,
      rgba(11,13,16,.68) 69%,
      rgba(11,13,16,.20) 82%,
      rgba(11,13,16,.06) 100%);
  }
  /* on a phone the body copy drops the headcount clause -- the headline
     already says "small carriers" -- and keeps all three sentences */
  .hero .sub-trucks{display:none}
  .hero .wrap{padding-top:42px;padding-bottom:150px}
  /* the location kicker is long; at 11.5px/.2em it broke and orphaned
     "UT" on a line of its own. Tighten it so it holds one line. */
  .hero .kicker{font-size:10px;letter-spacing:.11em}
  .hero h1{max-width:none}
  .hero .sub{max-width:none}
  .hero .trust-row{text-align:center;margin-top:20px}
  /* two smaller buttons SIDE BY SIDE; frees the vertical space the
     stacked pair was eating, which is what hid the truck */
  .hero-cta{margin-top:24px;gap:10px;flex-wrap:nowrap}
  .hero-cta .btn{flex:1 1 0;min-width:0;text-align:center;padding:15px 8px;font-size:12.5px;letter-spacing:.03em}
  /* popup goes near-full-screen on a phone */
  /* Content-height card, not a full-height white sheet. At
     min-height:100% the panel was mostly empty white space below the
     form. Capped to the viewport so long results scroll inside it. */
  .modal{padding:16px;align-items:center}
  .modal-panel{
    max-width:none;border-radius:12px;padding:22px 18px 24px;
    max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;
  }
  .modal-close{top:8px;right:6px}
  /* the button wraps below the input on a phone, so give it the full
     width: biggest tap target, and it lines up with the field above */
  .modal-panel button[type=submit]{width:100%}
  /* the "what we cover" pills. Desktop keeps one tidy flex row. On a phone we
     want them 3 across in two rows, the way the market leader lays them out,
     so they read as a set of six at a glance instead of a tall pile.
     Three equal columns give both rows a shared edge. The type steps down to
     11px because "Drug & alcohol consortium" is the longest label we have: at
     the desktop 13px it needs about 218px on one line and would break into
     three lines inside a ~111px column. At 11px each row ends up with one
     two-line label and two single-line ones, so grid stretch makes all six
     pills the same height and the block comes out even. The columns are
     minmax(0,1fr) rather than plain 1fr: a bare 1fr cannot shrink below its
     item's minimum width, so the longest label silently widened its own
     column and the three stopped lining up. */
  .pills-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .pills-row span{
    white-space:normal;text-align:center;line-height:1.25;
    padding:9px 6px;font-size:11px;letter-spacing:0;
    display:flex;align-items:center;justify-content:center;
  }
  ul.handles{grid-template-columns:1fr}
  .who-grid{grid-template-columns:1fr}
  .fitgrid{grid-template-columns:1fr;gap:26px}
  .dc{padding:22px 18px 20px}
  .dc-total .n{font-size:46px}
  .dc-groups{grid-template-columns:1fr;gap:26px}
  .dc-ctrl{gap:14px}
  .notinc ul{column-count:1}
  section.band{padding:48px 0}
  .calc-price .n{font-size:38px}
  .trust-row{font-size:10.5px;letter-spacing:.05em}
  .trust-row .sep{margin:0 8px}
  .facts{grid-template-columns:repeat(2,1fr);gap:22px 16px}
  .stakes{padding:36px 0 40px}
  /* how this works, and the embedded report */
  .steps .n{font-size:22px;width:24px}
  .steps li{gap:14px}
  h3.rpt-lead{font-size:19px;margin-top:42px}
  .rpt{max-width:none;margin-top:20px}
  .rpt .r-mast{padding:16px 18px 13px}
  .rpt .r-contact{text-align:left}
  .rpt .r-mark{width:26px;height:26px}
  .rpt .r-mark:before{left:6px;top:8px;width:14px;height:7px}
  .rpt .r-name{font-size:19px}
  .rpt .r-band,.rpt .r-client,.rpt .r-note,.rpt h4.rh,.rpt .r-asks,
  .rpt .r-edge,.rpt .r-promise,.rpt .r-foot,.rpt .r-legal{padding-left:18px;padding-right:18px}
  .rpt ul.r-done{padding-left:18px;padding-right:18px}
  .rpt table.r-cal th,.rpt table.r-cal td{padding-left:18px;padding-right:18px}
  .rpt table.r-cal tr.urgent td.what{padding-left:15px}
  .rpt .r-glance>div{padding:14px 18px 17px}
  .rpt .r-glance>div:after{left:18px;width:26px}
  .rpt .gn{font-size:28px}
  .rpt .gl{font-size:9px;letter-spacing:.11em}
  .rpt .r-promise ul{grid-template-columns:1fr}
  .rpt .r-foot{text-align:left}
}

/* Very narrow phones (small Android, iPhone SE 1st gen). Three columns leave
   roughly 76px of text width, which forces "Drug & alcohol consortium" onto
   three lines and makes the band taller than the block it replaced. Two
   columns keep every label at two lines or fewer. */
@media (max-width:374px){
  .pills-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pills-row span{font-size:11.5px;padding:10px 8px}
}

/* Narrow phones: the report's dates table is wide enough to push past its own
   container, which makes the WHOLE page scroll sideways, not just the table.
   A fixed layout with wrapping cells keeps it inside at any width. */
@media (max-width:440px){
  .rpt table.r-cal{table-layout:fixed;font-size:12px}
  .rpt table.r-cal th:nth-child(1),.rpt table.r-cal td:nth-child(1){width:46%}
  .rpt table.r-cal th:nth-child(2),.rpt table.r-cal td:nth-child(2){width:29%}
  .rpt table.r-cal th:nth-child(3),.rpt table.r-cal td:nth-child(3){width:25%}
  .rpt table.r-cal th,.rpt table.r-cal td{padding-left:10px;padding-right:10px}
  .rpt table.r-cal tr.urgent td.what{padding-left:7px}
  .rpt table.r-cal td.when{white-space:normal}
}

/* ============================================================
   WHAT YOU CAN VERIFY | WHY THIS IS DIFFERENT | STRAIGHT ANSWERS
   | CLOSING CALL TO ACTION | FOOTER NAV
   Added Sep 17 2026 after mapping both homepages. See
   HOMEPAGE-MAP-COMPARISON.md. The four bands keep the site's
   existing band / band-alt alternation: verify is plain, different is alt,
   answers is plain, and the closing band is the one dark finish,
   echoing .stakes. Two accents only, red and the light red used
   on dark. No third colour.
   ============================================================ */

/* the payroll anchor, in the hero. White on the dark photo, matching .sub. */
.hero-anchor{margin-top:22px;font-size:16px;color:rgba(255,255,255,.88);max-width:58ch;line-height:1.55}
.hero-anchor b{color:#fff;font-weight:800}

/* ---------- reusable mid-page call to action ---------- */
.cta-row{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta-row .btn-ink{background:var(--ink);border-color:var(--ink);color:#fff}
.cta-row .btn-ink:hover{background:var(--red);border-color:var(--red);color:#fff}
.cta-row .hint{flex:1 1 100%;font-size:14.5px;color:var(--ink-soft);margin-top:2px}
.cta-row .hint a{color:var(--red);font-weight:700;border:0}

.vlist{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vlist li{border:1px solid var(--rule);border-radius:8px;padding:18px 20px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.vlist b{display:block;font-size:16.5px;font-weight:800}
.vlist span{display:block;color:var(--ink-2);font-size:14.5px;margin-top:6px}
.vlist .how{display:block;color:var(--red);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-top:10px}
.rlist{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 44px}
.rlist .n{font-family:"Oswald",system-ui,sans-serif;font-size:21px;font-weight:700;line-height:1;color:var(--red)}
.rlist b{display:block;font-size:17px;font-weight:800;margin-top:8px;line-height:1.35}
.rlist span{display:block;color:var(--ink-2);font-size:15px;margin-top:6px;max-width:48ch}
.faq{margin:28px 0 0;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:19px 40px 19px 0;font-size:17px;font-weight:800;position:relative;list-style:none;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:8px;top:15px;font-size:24px;font-weight:700;color:var(--red);line-height:1}
.faq details[open] summary:after{content:"\2212"}
.faq .a{padding:0 0 20px;color:var(--ink-2);font-size:15.5px;max-width:72ch}
footer.foot .wrap.footnav-wrap{display:block}
.foot-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:22px;padding-top:24px;border-top:1px solid var(--rule)}
.foot-nav b{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:800;margin-bottom:10px}
.foot-nav a{display:block;font-size:14.5px;color:var(--ink);padding:3px 0;border:0}
@media (max-width:760px){
  .vlist,.rlist,.foot-nav{grid-template-columns:1fr}
  .rlist{gap:22px}
  .faq summary{font-size:16px;padding:17px 34px 17px 0}
}

/* ---------- closing band ---------- */
section.endband{background:linear-gradient(180deg,#3a1215,#2a0f11);
  border-bottom:1px solid var(--rule-dark);padding:60px 0;color:#fff}
section.endband .kicker{color:#ff9198}
section.endband h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.4rem);max-width:28ch}
section.endband .lead{color:rgba(255,255,255,.85);margin-top:16px;font-size:17.5px;max-width:62ch}
section.endband .cta-row{margin-top:32px}
section.endband .cta-row .hint{color:rgba(255,255,255,.75)}
section.endband .btn-ghost{background:rgba(255,255,255,.07)}

@media (max-width:760px){
  section.endband{padding:44px 0}
  .cta-row .btn{flex:1 1 auto}
}

/* ---------- help panel: "Something already wrong?" ----------
   Myshawn's call, Sep 18 2026: TenFour renders these as separate pill
   buttons. He wanted ONE panel with rounded corners instead, the problems
   stacked as full-width rows with thin rules between them. Rounded corners
   are the only departure from the "borders and rules, not floating cards"
   language: the border stays and no shadow is added.
   Note the explicit border-bottom:0. The global `a` rule paints a red
   underline on every link, and it silently becomes a divider here. */
.helpbox{margin:30px 0 0;border:1px solid var(--rule);border-radius:12px;background:var(--card);overflow:hidden}
.helpbox a{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 22px;border-top:1px solid var(--rule);border-bottom:0;
  font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.35}
.helpbox a:first-child{border-top:0}
.helpbox a:hover{background:var(--tint);color:var(--red)}
.helpbox .arw{flex:none;color:var(--red)}
.helpbox a:hover .arw{transform:translateX(3px)}
.helpnote{margin-top:24px}
@media (max-width:760px){
  .helpbox a{padding:16px 17px;font-size:15.5px;gap:12px}
}

/* ---------- free help article pages (/help/*) ----------
   These pages carry no app.js, so they get their own nav. It deliberately
   does NOT use .nav: that class is display:none below 760px, which would
   hide the phone number on the one page type where a stranded carrier is
   most likely to be reading on a phone. */
.art-nav{display:flex;align-items:center;gap:22px}
.art-nav a{border-bottom:0;font-size:14.5px;font-weight:700}
.art-nav a:hover{border-bottom:1.5px solid var(--red)}
.art-nav .phone{color:var(--red);font-weight:800}
.art-nav .phone:hover{border-bottom:1.5px solid var(--red)}
@media (max-width:760px){
  .art-nav{gap:14px}
  .art-nav a{font-size:13.5px}
  .art-nav .hide-m{display:none}
}

.art-h1{font-size:clamp(1.75rem,4.2vw,2.55rem);max-width:26ch;margin-top:10px}
.needto{margin-top:26px;border:1px solid var(--rule);border-left:4px solid var(--red);
  border-radius:8px;padding:18px 20px;background:var(--tint)}
.needto b{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);font-weight:800;margin-bottom:8px}
.needto p{margin:0;font-size:16.5px;max-width:78ch}
.art{margin-top:12px}
.art h2{font-size:clamp(1.1rem,2.1vw,1.32rem);margin-top:34px;max-width:38ch}
.art p{margin:13px 0 0;max-width:78ch}
.art ul,.art ol{margin:13px 0 0;padding-left:21px;max-width:78ch}
.art li{margin-top:8px}
.art li b{font-weight:800}
.art .src{margin-top:36px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:13.5px;color:var(--ink-soft);max-width:78ch}
.art .src b{font-weight:800;color:var(--ink-2)}
.helpback{margin-top:28px;font-size:15px}

/* ---------- legal pages, and the legal link row in the footer ----------
   The footer's legal paragraph and this nav sit in a block wrapper on purpose:
   `footer.foot .wrap` is flex with space-between, which would put the nav
   alongside the paragraph instead of under it. */
footer.foot .wrap.legalwrap{display:block}
.legal-links{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px}
.legal-links a{border-bottom:0;font-size:14px;font-weight:700;color:var(--ink)}
.legal-links a:hover{border-bottom:1.5px solid var(--red)}