/* Pact Compliance - homepage layer. Oct 18, 2026: the redesign (reports/Pact website redesign spec (Oct 17 2026).md).
   Loads after styles.css, only on the homepage, linked as /home.css?v=... so bump_assets.py versions it.
   Build step 3 moved the shared parts (tokens, buttons, header, footer, frames, plan cards, video dialog, motion and print
   basics) into styles.css. Part B is the homepage's own pieces that used to sit in styles.css (roster table, calculator,
   audit check, cost table), one rule each. Part C is the page itself. Part D is its motion. */

/* ===== B. Homepage pieces moved from styles.css (Oct 18, 2026, build step 3) ===== */
.section-inner{display:block}
/* The roster figure in the 27% band */
.roster table{width:100%;border-collapse:collapse;font-size:15px}
.roster thead tr{background:var(--mist);color:var(--muted);text-align:left}
.roster th{padding:12px 10px;font-weight:600}
.roster td{padding:16px 10px}
.roster th:first-child,.roster td:first-child{padding-left:20px;width:22%}
.roster th:last-child,.roster td:last-child{padding-right:20px}
.roster tbody tr{border-top:1px solid var(--line-2)}
.roster td:first-child{font-weight:600}
.roster .ok{color:var(--royal)}
.roster .date{color:var(--muted)}
.roster-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px;background:var(--royal);color:#fff}
.roster-head strong{font-weight:700;font-size:16px}
.roster-head span{font-size:14px;color:var(--pale)}
.roster-head .live{display:inline-flex;align-items:center;gap:8px}
.roster-head .live i{width:8px;height:8px;border-radius:50%;background:#5BE49B}
.roster-wrap{position:relative;min-width:0}
.row-watch{background:#FFFBF2}
.row-watch.is-renewed{background:#F3F7FF}
.badge-expiring{display:inline-flex;align-items:center;padding:4px 10px;border-radius:4px;background:var(--amber-bg);color:var(--amber-text);font-weight:700;white-space:nowrap}
.badge-renewed{display:none;align-items:center;gap:7px;font-weight:700;line-height:1.25;color:var(--royal)}
/* Oct 18, 2026 (DOM budget, spec 6.2): the check is a CSS mask, not an inline svg */
.badge-renewed::before{content:"";width:18px;height:18px;flex:0 0 18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 L9.5 18 L20 6.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 L9.5 18 L20 6.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.row-watch.is-renewed .badge-expiring{display:none}
.row-watch.is-renewed .badge-renewed{display:inline-flex}
/* Oct 18, 2026 (DOM budget): the number is a CSS counter in ::before, the text sits straight in the toast */
.toasts{counter-reset:toast}
.toast{position:relative;counter-increment:toast;display:block;padding:10px 12px 10px 44px;border:1px solid rgba(0,0,0,.06);border-radius:16px;background:#fff;color:var(--ink);font-size:13.5px;line-height:1.35;box-shadow:0 20px 44px -18px rgba(0,16,64,.6)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.toast{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)}}
.toast::before{content:counter(toast);position:absolute;left:12px;top:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--royal);color:#fff;font-family:var(--font-display);font-weight:800;font-size:12px;font-style:normal}
.toast b{display:block;color:var(--royal);font-size:14px}
@media (max-width:600px){
  .roster .col-pool,.roster .col-mvr{display:none}
  .roster th:first-child,.roster td:first-child{width:auto;padding-left:16px;white-space:nowrap}
  .roster th:last-child,.roster td:last-child{padding-right:16px}
  .roster-head{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px}
}
/* The calculator */
.calc-row{display:flex;align-items:center;gap:18px}
.calc-row input[type=range]{flex:1;min-width:0;height:10px;-webkit-appearance:none;appearance:none;border-radius:99px;outline-offset:6px;accent-color:var(--royal);cursor:pointer;background:linear-gradient(90deg,var(--royal),#3F6FD8 var(--pct,10%),#DCE4F2 var(--pct,10%))}
.calc-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--royal);box-shadow:0 6px 16px -4px rgba(0,49,149,.6),0 0 0 6px rgba(63,111,216,.14);cursor:grab}
.calc-row input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}
.calc-row input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--royal);box-shadow:0 6px 16px -4px rgba(0,49,149,.6);cursor:grab}
.calc-row input[type=range]::-moz-range-track{background:transparent}
.calc-row input[type=number]{width:112px;padding:8px 10px;border:1.5px solid var(--card-line);border-radius:10px;background:#fff;text-align:center;font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--royal)}
.calc-row input[type=number]:focus-visible,.calc-row input[type=range]:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.calc-out{margin:0;display:grid}
@media (max-width:600px){.calc-row input[type=number]{width:88px;font-size:20px}}
/* The audit check */
.ready-list{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ready-list label{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:#fff;color:var(--muted);cursor:pointer;transition:border-color .15s,background-color .15s}
.ready-list label:hover{border-color:var(--sky)}
.ready-list input{grid-row:span 2;width:20px;height:20px;margin:2px 0 0;accent-color:var(--royal);cursor:pointer}
.ready-list li:has(input:checked) label{border-color:var(--royal);background:#F2F6FF;color:var(--ink)}
.ready-list em{display:block;margin-top:2px;font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--muted-2)}
.ready-meter{height:10px;margin-top:16px;border-radius:99px;background:var(--line-2);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,32,95,.08)}
.ready-meter span{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#E8A33A,#F2C46B)}
.ready-meter span.full{background:linear-gradient(90deg,#1F8A52,#2FAE6B);box-shadow:0 0 14px rgba(47,174,107,.6)}
.ready-result{margin-top:16px;font-weight:700;color:var(--muted)}
.ready-result.ok{color:#12502E}
.ready-result.gap{color:#8A1B1B}
.sixteen{margin:36px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:8px;counter-reset:sixteen}
.sixteen li{position:relative;counter-increment:sixteen;padding:11px 14px 11px 52px;white-space:pre-line;line-height:1.4;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--muted-2);font-size:15.5px}
.sixteen li::before{content:counter(sixteen);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--mist);color:var(--muted-2);font-family:var(--font-display);font-weight:800;font-size:12px}
.sixteen li.mine{border-color:var(--royal);background:linear-gradient(90deg,#F2F6FF,#fff 70%);color:var(--ink);font-weight:600;box-shadow:0 6px 18px -12px rgba(0,32,95,.5)}
.sixteen li.mine::before{background:var(--royal);color:#fff}
/* Oct 18, 2026 (DOM budget): the CFR code is the first line of each item (was a span.k) */
.sixteen li::first-line{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--muted-2)}
.sixteen li.mine::first-line{color:var(--royal)}
@media (min-width:720px){.sixteen{grid-template-columns:1fr 1fr;gap:8px 22px}}
/* The first-year cost table (pricing <details>) */
.cost-h{margin:26px 0 10px;font-size:16px;color:var(--ink)}
.cost-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cost-table{width:100%;min-width:420px;border-collapse:collapse;font-size:14.5px}
.cost-table th,.cost-table td{padding:10px 8px;border-bottom:1px solid #C9D5EC;text-align:right;vertical-align:top;white-space:nowrap}
.cost-table thead th{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2)}
.cost-table th[scope=row],.cost-table thead th:first-child{text-align:left;white-space:normal;font-weight:700;color:var(--ink)}
.cost-table th[scope=row] span{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.cost-table tr.us td,.cost-table tr.us th{background:rgba(255,255,255,.7)}
.cost-table tr.us td{color:var(--royal);font-weight:700}
@media (max-width:520px){.cost-table{min-width:0;font-size:13px}.cost-table th,.cost-table td{padding:8px 4px;white-space:normal}.cost-table th[scope=row]{width:40%}}

/* ===== C. The homepage ===== */
.sec{padding:var(--sec) var(--gutter)}
.mist{background:var(--mist)}
.head{max-width:1000px;margin:0 auto clamp(36px,5vw,64px);text-align:center}
.head h2{margin:0;font:700 var(--t-h2)/1.06 var(--font-display);letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
/* Oct 18, 2026 (screens check, spec 3.3 "one line on desktop"): this H2 is about 1,020px at 56px, so its head gets the 1,100px it needs from 1241px up */
@media (min-width:1241px){#start .head{max-width:1100px}}
.head .lede{max-width:var(--text);margin:16px auto 0}
.fine{font-size:var(--t-small);line-height:1.5;color:var(--muted-2)}
.center{text-align:center}
.head .more,p.more{margin-top:16px}
.cfr{font-size:13px;color:var(--muted-2)}

/* Text links that end in a chevron, like .more a in styles.css */
.pick-line a::after,.doc .go::after{content:"\00a0\203A";content:"\00a0\203A"/""}

/* 1. Hero + Fleet readiness panel */
.hero{display:block;position:relative;overflow:hidden;gap:0;padding:clamp(40px,6vw,88px) var(--gutter) clamp(32px,4vw,56px);text-align:center}
.hero-in{max-width:var(--wide);margin:0 auto}
.hero .eyebrow,.price-line{text-wrap:balance}
.hero h1{margin:0;font:700 var(--t-hero)/1.04 var(--font-display);letter-spacing:-.03em;color:#fff}
.hl{background:linear-gradient(90deg,#7FB2FF,#C4DAFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{max-width:640px;margin:18px auto 0;font-size:var(--t-lede);line-height:1.5;color:#C9D6EE}
.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.price-line{margin-top:18px;font-size:15px;color:#C9D6EE}
.price-line b{font-weight:600;color:#fff}
.pick-line{margin-top:4px;font-size:15px}
/* Oct 24, 2026 (website audit conversion P1-4): one click from the homepage hero to each industry page */
.ind-line{margin-top:4px;font-size:15px;color:#C9D6EE}
.ind-line a{display:inline-flex;align-items:center;min-height:44px;color:var(--sky);font-weight:600;text-decoration:none}
.ind-line a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pick-line a,.hero .hero-watch{display:inline-flex;align-items:center;min-height:44px;color:var(--sky);font-weight:600;text-decoration:none}
.pick-line a:hover,.hero .hero-watch:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hero .hero-watch{position:relative;gap:10px;margin:0;font-size:15px;color:#fff}
.hero .hero-watch::before,.watch::before{content:"";flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--sky)}
.hero .hero-watch::after,.watch::after{content:"";position:absolute;left:11px;top:50%;margin-top:-6px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--night)}
.hero-shot{max-width:1080px;margin:clamp(28px,4vw,48px) auto 0}
.glance{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:20px;align-items:center;padding:20px}
.glance-summary{display:flex;align-items:center;gap:16px;min-width:0}
.glance .gh{margin:0 0 4px;font:700 22px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.glance-summary p{font-size:14px;line-height:1.5;color:var(--muted)}
.glance-summary b{color:var(--ink)}
.glance-summary a{color:var(--royal)}
/* Oct 18, 2026 (screens check): the hole is wider (46px, a 10px stroke) and the label is sentence case with no tracking, like the
   portal's own words, so "need nothing" clears the ring line by at least 3px on each side at every width (ring_clear.py) */
.glance .ring{--c:var(--hot);--hole:46px;width:112px;height:112px;flex:0 0 112px;border-radius:50%;display:grid;place-content:center;justify-items:center;text-align:center;background:radial-gradient(closest-side,#fff calc(var(--hole) - 1px),var(--line) calc(var(--hole) - 1px) var(--hole),transparent var(--hole)),conic-gradient(var(--c) calc(var(--p)*1%),#E3E9F5 0)}
.glance .ring b{font:700 26px/1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.glance .ring span{margin-top:3px;font-size:11px;line-height:1;letter-spacing:0;white-space:nowrap;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.tile .l,.tile .n{font-size:12.5px;line-height:1.35;color:var(--muted)}
.tile .l{font-weight:700}
.tile b{font:700 24px/1.05 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.tile b small{margin-left:1px;font-size:14px;color:var(--muted)}
/* Oct 18, 2026 (DOM budget): each tile's bar is drawn above its note: track .n::before, fill .n::after (width --w) */
.tile .n{position:relative;padding-top:10px}
.tile .n::before,.tile .n::after{content:"";position:absolute;left:0;top:0;height:6px;border-radius:3px}
.tile .n::before{right:0;background:#E3E9F5}
.tile .n::after{width:var(--w);background:var(--ok)}
.tile.warm .n::after{background:var(--warn)} .tile.hot .n::after{background:var(--hot)} .tile.neutral .n::after{background:var(--royal)}
.tile.warm .n{font-weight:600;color:var(--warn-text)} .tile.hot .n{font-weight:600;color:var(--hot-text)}
@media (max-width:1100px){.glance{grid-template-columns:minmax(0,1fr)}}
@media (max-width:559px){
  .glance{gap:14px;padding:14px}
  .tiles{grid-template-columns:1fr 1fr;gap:8px}
  .tile{padding:10px 12px}
  .glance .ring{--hole:39px;width:92px;height:92px;flex-basis:92px}
  .glance .ring b{font-size:21px}
  .glance .ring span{margin-top:1px;font-size:9.5px}
  .glance .gh{font-size:19px}
}

/* 2. Chooser strip */
.chooser{padding:24px var(--gutter) 16px;background:#fff;border-bottom:1px solid var(--line)}
.chooser .lbl{margin:0 0 10px;text-align:center;font-size:14px;color:var(--muted-2)}
.chooser ul{max-width:var(--wide);margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.chooser li{display:flex;min-width:0}
/* Oct 18, 2026 (screens check): every tile's text starts at the top, so all five names start on the same line. On desktop the five
   columns are sized to their text (auto tracks share the spare room), so "Nursing homes & assisted living" keeps to one line. */
.chooser a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:64px;padding:10px 8px;border-radius:14px;text-align:center;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;line-height:1.25}
.chooser a span{margin-top:3px;font-weight:400;font-size:13px;color:var(--muted-2)}
@media (min-width:761px){.chooser ul{grid-template-columns:repeat(5,auto)}}
.chooser a:hover{background:var(--mist);color:var(--ink)}
@media (max-width:760px){.chooser ul{grid-template-columns:1fr 1fr}.chooser li:last-child{grid-column:1/-1}}

/* Oct 18, 2026 (DOM budget, spec 6.2): the browser bar of the homepage's 3 frames, drawn by ::before (was 5 elements each). Same look as .frame-bar. */
.frame.fb::before{content:"portal.pactcompliance.com";content:"portal.pactcompliance.com"/"";display:flex;align-items:center;height:34px;padding:0 14px 0 72px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted-2);background:radial-gradient(circle at 19px 50%,#D3D9E4 5px,transparent 5.5px),radial-gradient(circle at 35px 50%,#D3D9E4 5px,transparent 5.5px),radial-gradient(circle at 51px 50%,#D3D9E4 5px,transparent 5.5px),#EEF1F6}

/* 3. The Today page */
.today{max-width:980px;margin:0 auto}
.today-body{padding:22px 24px 10px}
.today .gh2{font:700 26px/1.2 var(--font-display);color:var(--ink)}
.today .meta{margin:2px 0 14px;font-size:14px;color:var(--muted)}
.tasks{margin:0;padding:0;list-style:none}
.tasks li{display:grid;grid-template-columns:128px minmax(0,1fr) auto;grid-template-areas:"chip name go" "chip line go";gap:0 14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.chip{grid-area:chip;justify-self:start;padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.chip.amber{background:var(--warn-bg);color:var(--warn-text)} .chip.royal{background:#E6EEFF;color:var(--royal)}
.tasks b{grid-area:name;align-self:end;min-width:0;font-size:15px;color:var(--ink)}
.tasks small{grid-area:line;align-self:start;min-width:0;font-size:14px;line-height:1.4;color:var(--muted)}
.tasks .go{grid-area:go;padding:8px 14px;border-radius:999px;background:var(--royal);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap}
.today+.cap{max-width:980px;margin-left:auto;margin-right:auto}
@media (max-width:640px){.today-body{padding:16px}.tasks li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"chip chip" "name go" "line go";gap:0 10px}.tasks .chip{margin-bottom:8px}}

/* 4. The 27% band */
.band{text-align:center}
.band .bignum{margin:8px 0 0;font:700 var(--t-band)/1 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,#9DC2FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.band .statline{max-width:720px;margin:10px auto 0;font-size:clamp(19px,2vw,26px);font-weight:600;line-height:1.3;letter-spacing:-.6px;color:#fff}
/* Oct 18, 2026 (screens check, spec 3.3): the band H2 is about 1,190px at 56px, wider than the 1,152px container at 1280, so from 1241px
   up it is 4vw (54px at 1440, 51px at 1280) on the full container width and stays one line; below that it wraps, balanced */
.band h2{max-width:900px;margin:clamp(48px,7vw,96px) auto 0;font:700 var(--t-h2)/1.06 var(--font-display);letter-spacing:-.022em;text-wrap:balance}
@media (min-width:1241px){.band h2{max-width:var(--wide);font-size:min(4vw,54px)}}
.hl-sky{color:var(--sky)}
.band .lede{max-width:680px;margin:16px auto 0}
.band .small{margin:10px auto 0;font-size:15px;color:#9FB0D0}
.band .roster-wrap{max-width:720px;margin:40px auto 0;text-align:left}
.band .roster{border:0;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.band .toasts{position:static;width:auto;margin:12px 0 0;display:grid;gap:8px;pointer-events:none}
.roster-wrap.is-playing .toast:not(.is-on){visibility:hidden}
@media (max-width:640px){.band .roster .col-pool{display:none}}
@media (max-width:600px){.band .roster th,.band .roster td{padding-left:14px;padding-right:14px}}
.band .src{margin:28px auto 0;max-width:var(--text);font-size:14px;color:#9FB0D0}
.band .src a{color:#C9D6EE;text-underline-offset:2px}
.band .src a:hover{color:#fff}

/* 5. What we run */
.keynote{max-width:1000px;margin:0 auto 18px;padding:0;list-style:none;text-align:center}
.keynote li{font:600 clamp(22px,2.6vw,34px)/1.25 var(--font-display);letter-spacing:-.015em;color:var(--muted-2)}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cell{display:flex;flex-direction:column;gap:8px;min-width:0;padding:28px;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow)}
.cell .num{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.cell b.spec-num{display:inline}
.cell .num:not(.spec-num){font-size:16px;font-weight:600;color:var(--muted)}   /* the unit after the numeral (was span.unit) */
.cell h3{margin-top:6px;font:700 21px/1.25 var(--font-display);letter-spacing:-.01em}
.cell p{color:var(--muted)}
.cell .cfr{margin-top:auto;padding-top:6px}
.cell.tall{grid-row:span 2}
.cell.wide{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 28px;align-items:center}
.cell.wide .cfr{margin:0;padding:0}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.cell{padding:22px}.cell.tall{grid-row:auto}.cell.wide{grid-template-columns:1fr}}
.cell .phone-frame{width:240px;max-width:100%;margin:16px auto 0;padding:10px}
.phone-in{padding:18px 14px 16px;border-radius:28px;background:#fff;font-size:12.5px;line-height:1.35;color:var(--ink)}
.phone-in .hi{font:700 20px/1.1 var(--font-display)}
.phone-in .co{margin:2px 0 12px;font-size:11.5px;color:var(--muted-2)}
.phone-in .file{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.phone-in .file b{display:block;font-size:13.5px}
.phone-in .ring{--c:var(--royal);width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(closest-side,#fff 18px,transparent 18.5px),conic-gradient(var(--c) calc(var(--p)*1%),#E3E9F5 0);font:700 11.5px/1 var(--font-body);color:var(--ink)}
.phone-in ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.phone-in li{position:relative;padding-left:24px}
.phone-in li::before{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:10px;line-height:1}
.phone-in li.done::before{content:"\2713";content:"\2713"/"Done: ";background:var(--ok);color:#fff}
.phone-in li.open::before{content:"";content:""/"To do: ";background:#fff;box-shadow:inset 0 0 0 1.5px var(--warn)}
.phone-in li small{display:block;font-size:11px;font-style:italic;color:var(--muted-2)}
.phone-in .send{margin-top:12px;font-weight:700;color:var(--royal)}

/* 6. Getting covered */
.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steps li{min-width:0;padding:28px;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow)}
.steps .k{font:700 clamp(40px,4.4vw,56px)/1 var(--font-display);letter-spacing:-.03em;color:var(--royal)}
.steps h3{margin:12px 0 4px;font:700 21px/1.25 var(--font-display)}
.steps p{color:var(--muted)}
.start-act{margin-top:32px;text-align:center}
.start-act .fine{max-width:640px;margin:16px auto 0}
@media (max-width:760px){.steps{grid-template-columns:1fr}.steps li{padding:22px}}

/* 7. Proof */
.docs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.doc{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:center;min-width:0;padding:24px;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
.doc:hover{color:var(--ink);box-shadow:0 1px 2px rgba(15,27,51,.06),0 18px 48px -14px rgba(15,27,51,.22)}
.doc h3{font:700 21px/1.25 var(--font-display)}
.doc p{margin:6px 0 10px;color:var(--muted)}
.doc .go{font-weight:600;color:var(--royal)}
.doc:hover .go{text-decoration:underline;text-underline-offset:3px}
.doc .paper{width:auto;margin:0}
.doc+.doc .paper{transform:rotate(2deg)}
.doc .p-stamp{left:auto;top:auto;right:8px;bottom:10px;padding:1px 5px;border:1.5px solid currentColor;border-radius:3px;transform:rotate(-8deg);font-size:11px;letter-spacing:.1em;color:var(--hot-text)}
/* Oct 18, 2026 (DOM budget): the paper's grey text lines are one span with 4 background bars (--n:3 shows 3) */
.doc .p-lines{display:block;height:calc(var(--n,4)*11px - 6px);background:linear-gradient(var(--line-2) 0 0) 0 0/100% 5px,linear-gradient(var(--line-2) 0 0) 0 11px/82% 5px,linear-gradient(var(--line-2) 0 0) 0 22px/100% 5px,linear-gradient(var(--line-2) 0 0) 0 33px/82% 5px;background-repeat:no-repeat}
/* Phones: the stamp moves to the empty top-right corner, clear of the draw record's lines (Oct 18, 2026) */
@media (max-width:760px){.docs{grid-template-columns:1fr}.doc{grid-template-columns:120px minmax(0,1fr);gap:18px;padding:18px}.doc .paper{padding:10px 9px;gap:4px}.doc .p-stamp{top:9px;right:7px;bottom:auto;font-size:8px;transform:rotate(-6deg)}}
#audit{max-width:var(--text);margin:24px auto 0;padding:28px;border:0;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow);text-align:left}
#audit h3{font:700 24px/1.25 var(--font-display)}
#audit>p:not([class]){margin:8px 0 4px;color:var(--muted)}
.fold{margin-top:20px;padding-top:4px;border-top:1px solid var(--line)}
.fold summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;color:var(--royal)}
.fold summary{gap:10px;list-style:none}   /* Oct 18, 2026: the same + / minus mark as the FAQ rows */
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"+";font-weight:400;font-size:24px;line-height:1}
.fold[open] summary::after{content:"\2212"}
.fold[open] summary{margin-bottom:8px}
.fold>p{margin-top:14px;color:var(--muted)}
#audit .sixteen{margin-top:4px}
@media (max-width:600px){#audit{padding:20px}}

/* 8. Healthcare, nursing homes & NEMT */
.hc-vis{max-width:1000px;margin:0 auto}
.hc-vis+.cap{margin-top:52px}
.hc-specs{max-width:1000px;margin:56px auto 0}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px;margin-top:40px}
.links a{display:inline-flex;align-items:center;min-height:44px}
.watch{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:12px;font-weight:600;color:var(--royal);text-decoration:none}
.watch:hover{color:var(--deep);text-decoration:underline;text-underline-offset:3px}
.watch::before{background:var(--royal)}
.watch::after{border-left-color:#fff}
/* Oct 18, 2026 (screens check): under 560px the board stays and the phone sits under it (spec 3.6; the shared .composite rule in
   styles.css does the stacking). It used to hide the board, which dropped the section's main picture on phones. */
@media (max-width:559px){.hc-vis+.cap{margin-top:16px}}

/* 9. Calculator */
.calc-card{max-width:900px;margin:0 auto;padding:clamp(20px,4vw,40px);border:0;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow);display:grid;gap:22px}
.calc-mode{min-width:0;margin:0;padding:0;border:0}
.calc-mode legend{margin-bottom:8px;padding:0;font-size:14px;font-weight:600;color:var(--muted)}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--mist)}
.seg label{position:relative;display:flex;min-width:0;cursor:pointer}
.seg input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.seg span{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;border-radius:10px;text-align:center;font-size:15px;font-weight:600;line-height:1.2;color:var(--muted)}
.seg input:checked+span{background:#fff;color:var(--royal);box-shadow:0 1px 3px rgba(15,27,51,.14)}
.seg input:focus-visible+span{outline:3px solid var(--sky);outline-offset:1px}
@media (max-width:559px){.seg{grid-template-columns:1fr 1fr}}
.calc-input label{display:block;margin-bottom:10px;font:700 17px/1.3 var(--font-body);color:var(--ink)}
.calc-card .calc-price{margin:0;font-size:clamp(18px,1.6vw,21px);font-weight:600;line-height:1.4;color:var(--ink)}
.calc-h{margin:0 0 12px;font:600 17px/1.3 var(--font-body);color:var(--ink)}
.calc-card .calc-out{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.calc-card .calc-out>div{display:flex;flex-direction:column;min-width:0;padding:16px 12px;border-radius:16px;background:var(--mist);text-align:center}
.calc-card .calc-out .n{order:-1;margin:0;font:700 clamp(36px,4.4vw,56px)/1 var(--font-display);letter-spacing:-.03em;color:var(--royal);font-variant-numeric:tabular-nums}
.calc-card .calc-out dt{margin-top:6px;font-size:14px;font-weight:600;line-height:1.3}
.calc-card .calc-out .s{margin:4px 0 0;font-size:12.5px;line-height:1.35;color:var(--muted-2)}
.calc-card .fine{margin:12px 0 0}
.calc-card .btn{justify-self:start}
@media (max-width:760px){.calc-card .calc-out{grid-template-columns:1fr 1fr}.calc-card .calc-out>div:last-child{grid-column:1/-1}}
@media (max-width:600px){.calc-card .btn{justify-self:stretch}}

/* 10. Pricing */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.plans{grid-template-columns:1fr}}
.after{max-width:var(--text);margin:32px auto 0;text-align:center}
.after>p{margin-top:12px;color:var(--muted)}
.after>p b{color:var(--ink)}
.after .fold{text-align:left}
.bill{margin:12px 0 0;padding-left:20px;color:var(--muted)}
.bill li{margin-top:6px}

/* 11. FAQ */
#faq .faq-list{max-width:var(--text);margin:0 auto}   /* the row style is the shared one in styles.css (Oct 18, 2026) */

/* 12. Call the owner + form: shared with /healthcare/'s contact section, so it lives in styles.css (Oct 18, 2026) */

/* ===== D. Motion (spec 3.7). The shared reveal, ring and keyframes are at the end of styles.css; these are the homepage's own.
   Transform and opacity only, once; nothing moves with reduced motion. Print rules are in styles.css. ===== */
@media (prefers-reduced-motion:no-preference){
  .reveal.will-reveal.reveal-x{transform:translateX(24px)}
  .reveal.reveal-x{transition-delay:.15s}
  .r16{--rise:16px}
  .keynote.reveal{--rise:0px}
  .keynote li{transition:transform .6s var(--ease) calc(var(--i,0)*120ms)}
  .keynote.will-reveal li{transform:translateY(16px)}
  .hero .frame{animation:rise24 .9s var(--ease) both}
  .hero .ring{animation:ring-fill 1.2s var(--ease) .3s both}
  .hero .tile .n::after{transform-origin:left;animation:bar-grow 1s var(--ease) .5s both}
  .reveal.is-in .phone-frame .ring{animation:ring-fill 1.2s var(--ease) both}
  .roster-wrap.is-playing .toast{transition:transform .4s var(--ease)}
  .roster-wrap.is-playing .toast:not(.is-on){transform:translateY(8px)}
  .ready-meter span{transition:width .45s var(--ease),background .3s}
  .calc-row input[type=range]::-webkit-slider-thumb{transition:transform .15s}
  .calc-row input[type=range]::-webkit-slider-thumb:active{transform:scale(1.12)}
}
@keyframes rise24{from{transform:translateY(24px)}}
/* Oct 18, 2026 (print check): the board and phone are lazy images, so a page printed before they scroll into view printed two empty
   frames. The section's words, prices and links still print. */
@media print{.hc-vis,.hc-vis+.cap{display:none!important}}
/* Oct 18, 2026 (screens check, phone height): small phone-only trims in the bento and the plan cards (card padding stays 22px, spec 3.4) */
@media (max-width:559px){.cell{gap:6px}.cell .phone-frame{width:210px;margin-top:12px}.plans{gap:12px}.plan{padding:22px}.plan .btn{margin-top:8px}}
/* Oct 24, 2026 (redesign phase 2): this file is the /trucking/ page's layer now (the homepage became the industry chooser).
   The hero's one text line under its two buttons. */
.hero .hero-helper{max-width:560px;margin-top:14px;font-size:14px;line-height:1.5;color:#C9D6EE}
.hero .hero-helper a{color:#fff}