/* web2.css — Website 2.0 (112.277.9): type, tokens, header and shared components.

   Loaded LAST on every marketing page (after each page's inline styles and site.css), so these rules win
   at equal specificity. Page-specific layout stays on the page. The application (app.html) and the
   customer pages (portal, quote, invoice, work, signin) do not load this file; they are a separate track.

   Typeface: Inter, self-hosted (public/fonts, SIL Open Font License, Inter-OFL.txt). One variable file,
   latin subset, weights 100–900, ~48 KB, preloaded by each page. It replaces the Google Fonts request for
   Archivo, so the marketing site no longer depends on a third party to render text. The fallback is
   metric-matched to Arial so the page does not jump when Inter arrives (font-display: swap).

   Scale (desktop → phone): hero 62 → 38, page heading 40 → 30, section heading 34 → 26, card heading
   18–20, body 16.5–17, secondary 15, labels 13. Numbers that line up use tabular figures. Monospace is
   kept for identifiers (R-102, WO-3033) and the wordmark only. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');
  size-adjust:107.4%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%}

:root{
  --sans:'Inter','Inter Fallback',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ink:#101418; --ink-2:#34464D; --ink-3:#5A6A70; --graphite:#5A6A70;
  --steel:#1B4B5A; --steel-700:#143A46; --steel-50:#EEF4F5; --steel-100:#DCE9EB;
  --hivis:#F2A007; --hivis-ink:#2A1D00; --hivis-50:#FFF6E2;
  --done:#2C7A5B; --danger:#B4451F;
  --board:#F5F7F6; --card:#fff; --surface-2:#F1F4F3;
  --line:#E0E6E3; --line-strong:#C9D2CF;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --shadow-1:0 1px 2px rgba(16,32,38,.06),0 1px 3px rgba(16,32,38,.05);
  --shadow-2:0 18px 40px -20px rgba(16,48,58,.30),0 2px 6px rgba(16,32,38,.05);
  --shadow-3:0 30px 70px -30px rgba(16,48,58,.45);
  --fs-hero:clamp(38px,4.4vw,62px); --fs-h1:clamp(30px,3.3vw,42px); --fs-h2:clamp(26px,2.6vw,36px);
  --fs-h3:clamp(18px,1.4vw,20px); --fs-body:16.5px; --fs-lead:clamp(17px,1.35vw,19.5px); --fs-small:14.5px; --fs-label:13px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- base type ---- */
body{font-family:var(--sans);background:var(--board);color:var(--ink);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-feature-settings:'calt' 1}
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);text-wrap:balance}
h1{font-weight:750;letter-spacing:-.028em;line-height:1.06}
h2{font-weight:720;letter-spacing:-.022em;line-height:1.12}
h3{font-weight:650;letter-spacing:-.012em;line-height:1.25}
p{text-wrap:pretty}
.num,.tnum,td.num,th.num,.price,.money,time{font-variant-numeric:tabular-nums}
code,kbd,.ref,.mono{font-family:var(--mono)}

/* The old system set labels in 9–11px tracked monospace capitals. Labels are now sentence-case Inter,
   readable at a glance; the wordmark keeps its monospace. */
.eyebrow{font-family:var(--sans);font-size:var(--fs-label);font-weight:650;letter-spacing:.01em;text-transform:none;
  color:var(--steel)}
.note{font-family:var(--sans);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink-3);line-height:1.5}
.final .note{font-size:13.5px}
figure.shotfig figcaption,.shotcap{font-family:var(--sans);font-size:13.5px;letter-spacing:0;color:var(--ink-3)}
.copy p,.copy li{font-size:var(--fs-body);line-height:1.65;color:var(--ink-2)}
.copy h2{font-size:var(--fs-h2)}
.copy h3{font-size:var(--fs-h3)}
.plans .plan{font-family:var(--sans);font-size:14px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--steel)}
.plans .price span{font-family:var(--sans);font-size:15px}
.calc legend,.calc-hero .crumbs,.roicalc label{font-family:var(--sans);letter-spacing:.01em;text-transform:none;font-size:13px}
footer .mono{font-family:var(--sans);letter-spacing:.02em;text-transform:none;font-size:12.5px}

/* ---- buttons ---- */
.btn{font-family:var(--sans);font-size:15.5px;font-weight:620;line-height:1.2;padding:13px 22px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:background-color .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
.btn:not(.btn-ghost):not(.ghost):not(.btn-secondary):not(.btn-cta){background:var(--steel);color:#fff;border-color:var(--steel);box-shadow:var(--shadow-1)}
.btn:not(.btn-ghost):not(.ghost):not(.btn-secondary):not(.btn-cta):hover{background:var(--steel-700);border-color:var(--steel-700);filter:none}
.btn.ghost,.btn-ghost,.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow-1)}
.btn.ghost:hover,.btn-ghost:hover,.btn-secondary:hover{border-color:var(--steel);color:var(--steel);filter:none}
.btn.btn-cta:not(.btn-ghost):not(.ghost):not(.btn-secondary),.btn-cta{background:var(--hivis);color:var(--hivis-ink);border-color:var(--hivis);box-shadow:0 1px 0 rgba(0,0,0,.06),0 6px 16px -8px rgba(242,160,7,.7)}
.btn.btn-cta:not(.btn-ghost):not(.ghost):not(.btn-secondary):hover,.btn-cta:hover{background:#F7AE1E;border-color:#F7AE1E;filter:none}
.btn:active{transform:translateY(1px)}
.btn .arr{transition:transform .15s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--hivis);outline-offset:3px;border-radius:6px}
.textlink{color:var(--steel);font-weight:620;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.textlink:hover{text-decoration-thickness:2px}

/* ---- cards ---- */
.card{border-radius:var(--r-md);border-color:var(--line);box-shadow:var(--shadow-1)}
.card h4{font-size:17px;font-weight:650;letter-spacing:-.01em}
.card p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.plans .tier{border-radius:var(--r-lg);border-color:var(--line);box-shadow:var(--shadow-1)}
img.shot,.shot img{border-radius:var(--r-md);border-color:rgba(27,75,90,.14)}
.chips a{border-radius:999px;font-size:15px;font-weight:600}

/* =====================================================================
   HEADER — one bar, three menus, one call to action.
   Markup: <nav><div class="wrap gnav">…<details class="navmenu mega">…</details>…</div></nav>
   The menus are <details>: they open with no script (click, tap, Enter, Space). /nav.js adds hover
   with a short close delay, one-open-at-a-time, Escape, outside click and the phone menu button.
   The selectors carry nav .wrap.gnav so they outrank each page's older inline header rules.
   ===================================================================== */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);color:var(--ink);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){nav{background:#fff}}
nav .wrap.gnav{display:flex;align-items:center;gap:8px;min-height:68px;padding-top:0;padding-bottom:0;flex-wrap:nowrap}
nav .wrap.gnav .logo{color:var(--ink);margin-right:18px;flex:0 0 auto}
nav .wrap.gnav .logo span{font-family:var(--mono);font-size:14px;font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:1}
nav .wrap.gnav .markicon{width:34px;height:34px;border-radius:9px}
nav .wrap.gnav .links{display:flex;align-items:center;gap:2px;margin-left:0;flex:1 1 auto;flex-wrap:nowrap}
nav .wrap.gnav .links > a,nav .wrap.gnav .navmenu > summary{font-family:var(--sans);font-size:15px;font-weight:560;color:var(--ink-2);
  opacity:1;text-decoration:none;padding:9px 12px;border-radius:9px;line-height:1.2;display:inline-flex;align-items:center;gap:6px;
  transition:background-color .15s var(--ease),color .15s var(--ease);white-space:nowrap;min-height:40px}
nav .wrap.gnav .links > a:hover,nav .wrap.gnav .navmenu > summary:hover,nav .wrap.gnav .navmenu[open] > summary{background:var(--surface-2);color:var(--ink)}
nav .wrap.gnav .links > a[aria-current="page"]{color:var(--steel);background:var(--steel-50)}
nav .wrap.gnav summary,nav .wrap.gnav a,nav .wrap.gnav button{-webkit-tap-highlight-color:transparent}
nav .wrap.gnav .navmenu > summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.6;transition:transform .18s var(--ease);font-size:0;margin-left:2px}
nav .wrap.gnav .navmenu[open] > summary::after{transform:translateY(1px) rotate(225deg)}
nav .wrap.gnav .spacer{flex:1 1 auto}
nav .wrap.gnav .links > a.signin{background:transparent;border:0;color:var(--ink-2);font-weight:560;padding:9px 12px}
nav .wrap.gnav .links > a.signin:hover{background:var(--surface-2);color:var(--ink)}
nav .wrap.gnav .links > a.startfree{border:1px solid var(--line-strong);color:var(--ink);background:#fff;font-weight:600;margin-left:4px;padding:9px 14px}
nav .wrap.gnav .links > a.startfree:hover{border-color:var(--steel);color:var(--steel);background:#fff}
nav .wrap.gnav a.cta{font-family:var(--sans);font-size:15px;font-weight:650;letter-spacing:0;text-transform:none;background:var(--hivis);
  color:var(--hivis-ink);border:1px solid var(--hivis);padding:9px 16px;border-radius:9px;margin-left:6px;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:40px;text-decoration:none;box-shadow:0 6px 16px -10px rgba(242,160,7,.9);filter:none}
nav .wrap.gnav a.cta:hover{background:#F7AE1E;border-color:#F7AE1E}
nav .wrap.gnav .burger{display:none}
nav .wrap.gnav a.cta.mcta{display:none}

/* mega panels */
nav .wrap.gnav .navmenu{position:static}
nav .wrap.gnav .navmenu > .menu{position:absolute;left:50%;top:calc(100% - 6px);transform:translateX(-50%);
  width:min(1040px,calc(100vw - 40px));background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);padding:22px;display:grid;gap:8px 22px;z-index:60;min-width:0;
  animation:gnav-in .16s var(--ease)}
nav .wrap.gnav{position:relative}
/* An invisible bridge between the trigger and the panel: the pointer crosses it without leaving the menu. */
nav .wrap.gnav .navmenu > .menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
@keyframes gnav-in{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
nav .wrap.gnav .menu .mcol{display:flex;flex-direction:column;gap:2px;min-width:0}
nav .wrap.gnav .menu .mhead{font-size:12.5px;font-weight:650;color:var(--ink-3);letter-spacing:.01em;margin:2px 10px 6px;text-transform:none}
nav .wrap.gnav .menu a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;
  font-size:15px;font-weight:600;line-height:1.3;white-space:normal;opacity:1;background:transparent;transition:background-color .12s var(--ease)}
nav .wrap.gnav .menu a small{display:block;font-size:13.5px;font-weight:420;color:var(--ink-3);line-height:1.4}
nav .wrap.gnav .menu a:hover,nav .wrap.gnav .menu a:focus-visible{background:var(--surface-2)}
nav .wrap.gnav .menu a.plain{font-weight:520;font-size:14.5px;padding:7px 12px}
nav .wrap.gnav .menu a .tag{align-self:flex-start;margin:3px 0 1px}
nav .wrap.gnav .menu .tag{display:inline-block;font-size:11.5px;font-weight:650;color:#6B4A00;background:var(--hivis-50);border:1px solid #F6D58A;
  border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:1px;letter-spacing:.01em}
nav .wrap.gnav .menu .feature{background:linear-gradient(160deg,var(--steel) 0%,#123844 100%);color:#fff;border-radius:14px;padding:18px;gap:6px;justify-content:flex-start}
nav .wrap.gnav .menu .feature:hover,nav .wrap.gnav .menu .feature:focus-visible{background:linear-gradient(160deg,#21596A 0%,#123844 100%)}
nav .wrap.gnav .menu .feature b{font-size:17px;font-weight:700;letter-spacing:-.01em;color:#fff}
nav .wrap.gnav .menu .feature small{color:rgba(255,255,255,.82);font-size:14px}
nav .wrap.gnav .menu .feature .pill{align-self:flex-start;font-size:12px;font-weight:650;background:var(--hivis);color:var(--hivis-ink);border-radius:999px;padding:2px 9px;margin-bottom:6px}
nav .wrap.gnav .menu .feature .go{margin-top:auto;padding-top:10px;font-size:14px;font-weight:650;color:#fff}
nav .wrap.gnav .menu .mfoot{grid-column:1/-1;border-top:1px solid var(--line);margin-top:8px;padding-top:12px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
  font-size:14px;color:var(--ink-3)}
nav .wrap.gnav .menu .mfoot a{display:inline-flex;flex-direction:row;padding:6px 8px;font-size:14px;font-weight:600;color:var(--steel)}
nav .wrap.gnav .navmenu.product > .menu{grid-template-columns:1.25fr 1.25fr 1fr}
nav .wrap.gnav .navmenu.industries > .menu{grid-template-columns:1.1fr 1fr 1fr 1fr}
nav .wrap.gnav .navmenu.resources > .menu{grid-template-columns:1fr 1fr 1fr}
nav .wrap.gnav .menu .mcol.span2{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:2px 22px;align-content:start}
nav .wrap.gnav .menu .mcol.span2 .mhead{grid-column:1/-1}

/* tablets and phones: one button opens the whole menu; the three groups are accordions */
@media(max-width:1060px){
  nav .wrap.gnav .links > a,nav .wrap.gnav .navmenu > summary{padding:9px 9px;font-size:14.5px}
  nav .wrap.gnav .links > a.startfree{display:none}
}
@media(max-width:960px){
  nav .wrap.gnav{min-height:60px;flex-wrap:wrap;gap:6px}
  nav .wrap.gnav .logo{margin-right:auto}
  nav .wrap.gnav a.cta.mcta{display:inline-flex;order:2;font-size:14px;padding:8px 13px;min-height:40px;margin:0}
  nav .wrap.gnav .burger{display:inline-flex;order:3;align-items:center;justify-content:center;flex-direction:column;gap:4px;width:44px;height:44px;
    margin:0 -6px 0 2px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--ink);cursor:pointer}
  nav .wrap.gnav .burger span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .18s var(--ease),opacity .18s var(--ease)}
  nav .wrap.gnav .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  nav .wrap.gnav .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  nav .wrap.gnav .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  nav .wrap.gnav .links{order:9;flex:0 0 100%;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 16px;
    border-top:1px solid var(--line);max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);overflow-y:auto;overscroll-behavior:contain}
  /* With the script running the menu starts closed; without it the links stay visible (nothing is unreachable). */
  nav.js-nav .wrap.gnav .links{display:none}
  nav.js-nav .wrap.gnav .links.open{display:flex}
  nav .wrap.gnav .links > a,nav .wrap.gnav .navmenu > summary{display:flex;justify-content:space-between;width:100%;padding:14px 4px;font-size:16.5px;
    font-weight:600;color:var(--ink);border-radius:0;border-bottom:1px solid var(--line);min-height:52px}
  nav .wrap.gnav .links > a:hover,nav .wrap.gnav .navmenu > summary:hover,nav .wrap.gnav .navmenu[open] > summary{background:transparent}
  nav .wrap.gnav .navmenu{display:block}
  nav .wrap.gnav .navmenu > .menu{position:static;transform:none;width:auto;box-shadow:none;border:0;border-radius:0;padding:6px 0 12px;
    display:flex;flex-direction:column;gap:4px;animation:none;border-bottom:1px solid var(--line)}
  nav .wrap.gnav .navmenu > .menu::before{display:none}
  nav .wrap.gnav .menu .mcol.span2{display:flex;grid-column:auto}
  nav .wrap.gnav .menu a{padding:10px 8px;font-size:15.5px}
  nav .wrap.gnav .menu a small{font-size:14px}
  nav .wrap.gnav .menu .feature{margin:4px 0 6px;padding:16px}
  nav .wrap.gnav .menu .mhead{margin:12px 8px 4px}
  nav .wrap.gnav .menu .mfoot{border-top:0;margin-top:0;padding-top:4px}
  nav .wrap.gnav .links > a.signin,nav .wrap.gnav .links > a.startfree{display:flex;justify-content:center;margin:14px 0 0;border:1px solid var(--line-strong);
    border-radius:10px;padding:13px;font-size:16px;font-weight:620;color:var(--ink);background:#fff}
  nav .wrap.gnav .links > a.startfree{margin-top:8px}
  nav .wrap.gnav .links > a.cta{display:flex;justify-content:center;margin:8px 0 0;padding:13px;font-size:16px;border-radius:10px}
}
@media(max-width:380px){
  nav .wrap.gnav .logo span{display:none}
  nav .wrap.gnav a.cta.mcta{padding:8px 11px}
}
@media(min-width:961px){
  /* the phone-only copies never show on a desktop bar */
  nav .wrap.gnav .links > a.mobile-only{display:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* =====================================================================
   Shared section patterns for Website 2.0 pages (homepage, pricing)
   ===================================================================== */
.w2-section{padding:clamp(64px,8vw,112px) 0;border-top:0}
.w2-section.tint{background:#fff}
.w2-section.deep{background:linear-gradient(180deg,#123844 0%,#1B4B5A 100%);color:#fff}
.w2-section.deep h2,.w2-section.deep h3{color:#fff}
.w2-section.deep p{color:rgba(255,255,255,.84)}
.w2-section.deep .eyebrow{color:#FFC94D}
.w2-head{max-width:760px;margin:0 0 clamp(28px,4vw,48px)}
.w2-head.center{text-align:center;margin-left:auto;margin-right:auto}
.w2-head h2{font-size:var(--fs-h2);margin:10px 0 14px;max-width:none}
.w2-head p{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2);margin:0;max-width:62ch}
.w2-head.center p{margin-left:auto;margin-right:auto}
.w2-section.deep .w2-head p{color:rgba(255,255,255,.84)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:620;border-radius:999px;padding:4px 10px;line-height:1.3;
  background:var(--steel-50);color:var(--steel);border:1px solid var(--steel-100)}
.badge.amber{background:var(--hivis-50);color:#6B4A00;border-color:#F6D58A}
.badge.green{background:#E9F5EF;color:#1F6248;border-color:#C6E5D5}
.frame{border-radius:var(--r-lg);border:1px solid rgba(16,48,58,.12);background:#fff;box-shadow:var(--shadow-3);overflow:hidden}
.frame img{display:block;width:100%;height:auto}
.phoneframe{border-radius:30px;border:7px solid #0F2A33;background:#0F2A33;box-shadow:var(--shadow-3);overflow:hidden}
.phoneframe img{display:block;width:100%;height:auto;border-radius:23px}
.sample{font-size:13px;color:var(--ink-3);margin-top:12px}

/* a11y (112.277.9): the footer "Built for" line sits on the dark footer, so it needs a light color to reach 4.5:1 (was #4f5d63 on #101418, 2.71:1). */
footer .wrap .built,footer .built.sub{color:#B7C3C8;opacity:1}
footer .built a{color:inherit}
.tablewrap:focus-visible{outline:2px solid var(--accent,#0E7C86);outline-offset:2px}
.lede code{color:var(--ink-2)}

/* ===== Site review (112.279.16): alignment and consistency fixes found by the page-by-page audit ===== */

/* Grids that left a lonely last row (5+1, 5+2, 3+1): choose the column count from the number of cards. */
@media(min-width:961px){
  .cards:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards:has(> :nth-child(7):last-child),.cards:has(> :nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .quick:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:760px) and (max-width:960px){
  .quick:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:561px) and (max-width:960px){
  .strip.seven{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Cards in one row end on the same line: the last action sits at the bottom of every card. */
.cards > .card{display:flex;flex-direction:column}
.cards > .card > :last-child:is(a.btn,.btn,.act,p:has(> a.btn),.go,.more){margin-top:auto}

/* /demos: fourteen demo companies read better three across than five */
@media(min-width:1100px){.cards:has(> .card.showroom){grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
@media(min-width:680px) and (max-width:1099px){.cards:has(> .card.showroom){grid-template-columns:repeat(2,minmax(0,1fr))}}
.card.showroom .act .btn{white-space:nowrap}

/* Monospace was left on a few labels; the site uses one face (monospace is for code and identifiers only). */
.cat h3,.signoff .role,.calc-learn .formula{font-family:var(--sans);letter-spacing:0;text-transform:none}
.cat h3{font-size:14px;font-weight:650;color:var(--ink-2)}
.signoff .role{font-size:13px;color:var(--ink-3)}
.calc-learn .formula{font-size:15px;line-height:1.7;font-variant-numeric:tabular-nums;border-radius:var(--r-md)}

/* A caption under a centered heading follows it. */
section:has(.copy.centered) .shotcap,.copy.centered + picture + .shotcap{text-align:center}
/* the homepage's "Primary focus" badge stays on one line on phones */
.ind .lead-card .badge{align-self:flex-start;white-space:nowrap}
/* calculator result subtitle: full opacity on the dark result panel (was .85, under 4.5:1 on the lighter state) */
.calc-bigsub{opacity:1;color:rgba(255,255,255,.92)}

/* =====================================================================
   DESIGN SYSTEM 2 (112.279.18) — one system for every marketing page.
   Measured in the browser (computed styles + geometry) across 29 pages × 7 widths before changing anything; see
   WEBSITE-2.0-CONSISTENCY-112.279.18.md. Each page keeps its own layout; these rules set the shared scale.
   <body data-tpl="landing|page|doc" data-page="…"> marks the template (landing = product/industry/home/pricing,
   page = resources, comparisons, calculators, about; doc = legal). The :root prefix gives these rules the weight
   to win over each page's older inline copy (loaded earlier) without !important.
   ===================================================================== */
:root{
  /* spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:80px;--sp-10:96px;
  --section-y:clamp(48px,5.6vw,80px);      /* every content section: 48 phone → 80 desktop */
  --hero-top:clamp(40px,4.6vw,72px);       /* first heading sits at the same height on every page */
  --cta-y:clamp(64px,7vw,96px);            /* closing call to action */
  /* containers: one width per breakpoint for nav, content and footer, so left edges line up */
  --gutter:20px; --wrap:1080px;
  --measure:70ch;                          /* body copy line length */
  /* type scale (desktop target in brackets) */
  --fs-hero:clamp(38px,4vw,58px);          /* [58] landing heroes */
  --fs-h1:clamp(30px,2.95vw,42px);         /* [42] page titles */
  --fs-h2:clamp(26px,2.36vw,34px);         /* [34] section headings */
  --fs-cta:clamp(30px,3.05vw,44px);        /* [44] closing call to action */
  --fs-h3:clamp(17px,1.25vw,18px);         /* [18] card headings */
  --fs-doc-h2:clamp(19px,1.5vw,22px);      /* [22] numbered clauses in legal documents */
  --fs-table:15px; --fs-th:12.5px;
}
@media(min-width:768px){:root{--gutter:28px}}
@media(min-width:1280px){:root{--gutter:32px;--wrap:min(92vw,1320px)}}
@media(min-width:1680px){:root{--wrap:1440px}}
@media(min-width:2200px){:root{--wrap:1560px}}

/* ---- containers ----
   Before: 1040px up to 1279px, then min(92vw, 2200px) — 2136px of content at 2560 wide, which stretched card rows and
   pushed hero copy and its screenshot to opposite edges. Now the container grows in steps and stops at 1560px. */
:root .wrap{max-width:var(--wrap);padding-left:var(--gutter);padding-right:var(--gutter);margin-left:auto;margin-right:auto}
:root nav .wrap.gnav{max-width:var(--wrap);padding-left:var(--gutter);padding-right:var(--gutter)}
:root footer .wrap{max-width:var(--wrap);padding-left:var(--gutter);padding-right:var(--gutter)}
:root .blogwrap{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter);min-height:56vh}
/* Copy keeps a reading measure at any container width; headings keep a display measure. */
:root body[data-tpl] :is(section,header,main) p{max-width:var(--measure)}
:root body[data-tpl] :is(section,header,main) p:is(.centered,[style*="text-align:center"]){margin-left:auto;margin-right:auto}
:root body[data-tpl] :is(.centered,.center,.final,.close2,.p2,[style*="text-align:center"]) :is(p,h1,h2){margin-left:auto;margin-right:auto}
:root body[data-tpl] :is(td,th,figcaption) p{max-width:none}
:root body[data-tpl] :is(.card,.tier,.cards) p{max-width:var(--measure)}
:root body[data-tpl] :is(main,section) .card.roicalc p,:root body[data-tpl] main section .wrap > p.shotcap{max-width:var(--measure)}

/* ---- headings: one size per role ---- */
:root body[data-tpl] h1{font-family:var(--sans);font-weight:760;letter-spacing:-.026em;line-height:1.06}
:root body[data-tpl="landing"] h1{font-size:var(--fs-hero)}
:root body[data-tpl="page"] h1,:root body[data-tpl="page"] header.hero h1,:root body[data-tpl="page"] .calc-hero h1{font-size:var(--fs-h1)}
:root body[data-tpl="doc"] h1{font-size:var(--fs-h1)}
:root body[data-tpl] :is(section,main,.wrap) h2:not(.card h2):not(.tier h2){font-size:var(--fs-h2);font-weight:720;letter-spacing:-.02em;line-height:1.14}
:root body[data-tpl] :is(.final,.close2,section.cta,.w2-section.deep.close) h2{font-size:var(--fs-cta);letter-spacing:-.024em;line-height:1.1}
:root body[data-tpl="doc"] .legal h2,:root body[data-tpl="doc"] :is(section,main) h2[id]{font-size:var(--fs-doc-h2);letter-spacing:-.01em;line-height:1.3}
:root body[data-tpl] :is(.card,.cards > *,.tile,.grid > *) :is(h3,h4){font-size:var(--fs-h3);font-weight:650;letter-spacing:-.01em;line-height:1.3}
:root body[data-tpl] :is(section,main) h3:not(.card h3):not(.cards h3):not(.tier h3){font-size:clamp(18px,1.4vw,20px);font-weight:650;letter-spacing:-.012em;line-height:1.3}

/* ---- body text ---- */
:root body[data-tpl] :is(section,main) .wrap > p:not(.note):not(.sample),:root body[data-tpl] :is(section,main) .copy > p,
:root body[data-tpl] :is(section,main) .wrap > ul > li,:root body[data-tpl] .blogwrap > p{font-size:var(--fs-body);line-height:1.65}
:root body[data-tpl] :is(section,header,main) :is(.lede,.lead,.sub,p.sub,.w2-head p):not(.built){font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2)}
:root body[data-tpl] .w2-section.deep .w2-head p,:root body[data-tpl] :is(.final,.close2,.cta,.flow,[class*=deep],[class*=dark]) :is(.lede,.lead,.sub){color:inherit}
:root body[data-tpl] :is(.card,.tile,.tier) p{font-size:15px;line-height:1.6}

/* ---- vertical rhythm ---- (inline style="padding:…" on a section is an intentional exception and still wins) */
:root body[data-tpl] :is(section,div):is(.proof,.alt,.faq,.w2-section,.calc-learn,.calc-proof,.calc-links){padding-top:var(--section-y);padding-bottom:var(--section-y)}
:root body[data-tpl] > section:not([class]),:root body[data-tpl] > main > section:not([class]){padding-top:var(--section-y);padding-bottom:var(--section-y)}
:root body[data-tpl] :is(section,div).final,:root body[data-tpl] section.close2{padding-top:var(--cta-y);padding-bottom:var(--cta-y)}
:root body[data-tpl] > header{padding-top:var(--hero-top)}
:root body[data-tpl] h1 + :is(p,.lede,.lead,.sub){margin-top:var(--sp-4)}
:root body[data-tpl] :is(.eyebrow) + :is(h1,h2){margin-top:var(--sp-2)}
:root body[data-tpl] :is(h2) + :is(p,.lede,.sub){margin-top:var(--sp-3)}

/* ---- cards ---- */
:root body[data-tpl] .card{border-radius:var(--r-md);padding:var(--sp-5)}
@media(max-width:560px){:root body[data-tpl] .card{padding:20px}}
:root body[data-tpl] .cards{gap:var(--sp-4)}
@media(min-width:960px){:root body[data-tpl] .cards{gap:20px}}

/* ---- tables: Inter with tabular figures; labels are sentence case, never 9–10px tracked capitals ---- */
:root body[data-tpl] table :is(th,td){font-family:var(--sans)}
:root body[data-tpl] table th{font-size:var(--fs-th);font-weight:650;letter-spacing:0;text-transform:none;color:var(--ink-3)}
:root body[data-tpl] table tbody th,:root body[data-tpl] table tr th:first-child:not(thead th){color:var(--ink-2)}
:root body[data-tpl] table td{font-size:var(--fs-table)}
:root body[data-tpl] table :is(td,th):is(.num,.n,.win),:root body[data-tpl] table td b{font-family:var(--sans);font-variant-numeric:tabular-nums}
:root body[data-tpl] table td::before{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;font-weight:650;color:var(--ink-3)}
/* identifiers stay monospace: API endpoints and verbs, AI tool names */
:root body[data-page="developers"] table td:first-child,:root body[data-page="ai"] table td:first-child code,:root body[data-tpl] table td code{font-family:var(--mono);font-size:13px}
:root body[data-page="developers"] .verb{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
@media(max-width:560px){:root body[data-tpl] table td{font-size:14px}}

/* ---- labels that were 9.5–11px tracked monospace ---- */
:root body[data-tpl] ol.time li .yr{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:0;text-transform:none}
:root body[data-tpl] .legal .updated{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-3)}
:root body[data-tpl] .q .go{font-family:var(--sans);font-size:14px;font-weight:650;letter-spacing:0;text-transform:none}
:root body[data-tpl] :is(.stat,.b) .n{font-family:var(--sans);font-weight:760;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
:root body[data-tpl] em.go,:root body[data-tpl] .cat em,:root body[data-tpl] .card em{font-family:var(--sans)}
:root body[data-tpl] :is(.k,.kv .k){font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none}
:root body[data-tpl] .hub-four span{font-family:var(--sans);font-size:13px;font-weight:650;letter-spacing:0;text-transform:none}
:root body[data-tpl] .legs span{font-family:var(--sans);font-size:13.5px}
:root body[data-tpl] .calc-input span{font-family:var(--sans);font-size:14px}
:root body[data-tpl] .hub-cards em{font-family:var(--sans);font-size:14px;font-weight:650;letter-spacing:0}
/* a caption under a centered screenshot is centered on it, not just text-aligned inside a left-hugging box */
:root body[data-tpl] p.shotcap[style*="text-align:center"],:root body[data-tpl] :is(.centered,.center) p.shotcap,:root body[data-tpl] section:has(.copy.centered) p.shotcap{margin-left:auto;margin-right:auto}
/* Homepage worked-example invoice on a phone: five columns cannot fit 390px, and the card clipped the Amount column.
   Each charge becomes a small block with labelled rows (the same pattern as the waste page's table). */
@media(max-width:560px){
  :root body[data-tpl] .ledger thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  :root body[data-tpl] .ledger :is(table,tbody,tr,td){display:block;width:auto}
  :root body[data-tpl] .ledger tr{padding:12px 16px;border-bottom:1px solid var(--line)}
  :root body[data-tpl] .ledger td{border:0;padding:3px 0;text-align:left}
  :root body[data-tpl] .ledger td:first-child{font-weight:650;padding-bottom:6px}
  :root body[data-tpl] .ledger td[data-label]{display:flex;justify-content:space-between;gap:12px}
  :root body[data-tpl] .ledger td[data-label]::before{content:attr(data-label)}
  :root body[data-tpl] .ledger tr.tot td{display:flex;justify-content:space-between;font-weight:700}
  :root body[data-tpl] .ledger tr.tot td[colspan]{padding-bottom:0}
  :root body[data-tpl] .ledger tr.tot{display:flex;flex-direction:column}
}
:root body[data-tpl] .ledger .lh .ref{white-space:nowrap}
:root body[data-page="for-waste"] #mobile .shotcap{max-width:var(--measure)}
/* pricing descriptions keep the 1.5 line height their two-line min-height was set for (plan prices line up across cards) */
:root body[data-tpl] .tier2 .who{line-height:1.5}
/* legal documents: the title is a page title like any other page */
:root body[data-tpl="doc"] :is(.legal,main,header,section) h1{font-size:var(--fs-h1);font-weight:760;letter-spacing:-.026em}
/* FAQ answers are body copy, not small print */
:root body[data-tpl] .qa p,:root body[data-tpl] .faq p{font-size:16px;line-height:1.6}
/* Wide screens: text-and-screenshot rows give the extra width to the screenshot, not to the gap between them.
   The text column keeps a reading width; the product screen grows (nested widths, same left edge as the nav). */
@media(min-width:1680px){
  :root body[data-tpl] .wrap.split:not(.flip){grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  :root body[data-tpl] .wrap.split.flip{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
  :root body[data-tpl] :is(section,main) .two:has(img,picture,.frame,.phoneframe):not(.flip){grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  :root body[data-tpl] :is(section,main) .two.flip:has(img,picture,.frame,.phoneframe){grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
}
/* phone menu: plain submenu links share the indent of the rich links above them (were 4px further in) */
@media(max-width:960px){:root nav .wrap.gnav .menu a.plain{padding-left:8px;padding-right:8px}}
:root body[data-tpl] :is(.cards,.quick) > :not(.card):not(.showroom){border-radius:var(--r-md)}

/* ===== 112.279.19 — completeness pass: components measured on every public page (46) ===== */
/* footer: one markup on every page (was five variants); the logo is the same everywhere */
:root footer .logo{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;opacity:1}
:root footer .markicon{width:32px;height:32px;border-radius:8px;flex:0 0 auto}
:root footer .logo span{font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:#fff}
/* buttons: one shape and type everywhere (were 4px / 8px corners, 14.5px or 600–700 weight on some pages) */
:root body[data-tpl] :is(a,button).btn{border-radius:10px;font-size:15.5px;font-weight:620;min-height:48px;letter-spacing:0;text-transform:none;font-family:var(--sans)}
:root body[data-tpl] :is(.calc-acts,.repacts) :is(button,a){min-height:48px;border-radius:10px;font-family:var(--sans);font-size:15.5px;font-weight:620;letter-spacing:0;text-transform:none}
/* form controls: 48px tall, 10px corners, 16px Inter (were 0 / 4 / 5 / 6px corners, 44–52px tall) */
:root body[data-tpl] main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select),
:root body[data-tpl] section :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select){min-height:48px;border-radius:10px;font-family:var(--sans);font-size:16px}
:root body[data-tpl] :is(main,section) textarea{border-radius:10px;font-family:var(--sans);font-size:16px}
:root body[data-tpl] .calc-input{border-radius:10px;overflow:hidden}
:root body[data-tpl] :is(main,section) .calc-input input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){border-radius:0;min-height:46px}
:root body[data-tpl] :is(main,section) :is(label,legend){font-family:var(--sans);font-size:14px;font-weight:650;letter-spacing:0;text-transform:none}
/* product screenshots: desktop screens 12px corners, 1px border, soft shadow; phone screens one bezel */
:root body[data-tpl] :is(img.shot,img.shot-dt,img.pi-settings,img.pi-wide,.frame){border-radius:var(--r-md)}
:root body[data-tpl] :is(img.phone,img.hub-phone,img.thumb.phone){border-radius:22px;border-width:5px;border-style:solid}
:root body[data-tpl] .phoneframe{border-radius:27px;border-width:5px}
:root body[data-tpl] .phoneframe img{border-radius:22px}
/* screens captured at 1100px never stretch past their own width (were upscaled to 1256px at 1440) */
:root body[data-page="switch"] img.shot.wide,:root body[data-page="phone-integration"] img.pi-settings{max-width:1100px;margin-left:auto;margin-right:auto;display:block}
/* pricing cards: one padding everywhere (were 26 / 28px) — their 16px corners are the pricing-card role */
:root body[data-tpl] :is(.tier,.tier2){padding:28px}
@media(max-width:560px){:root body[data-tpl] :is(.tier,.tier2){padding:24px}}
/* spacing between related elements, from the scale */
:root body[data-tpl] :is(section,header,main) h1:has(+ :is(p,.lede,.lead,.sub)){margin-bottom:0}
:root body[data-tpl] :is(section,header,main) h1 + :is(p,.lede,.lead,.sub){margin-top:var(--sp-4)}
:root body[data-tpl] :is(section,main) h2:has(+ p){margin-bottom:0}
:root body[data-tpl] :is(section,main) h2 + p{margin-top:var(--sp-3)}
:root body[data-tpl] :is(section,header,main) p:has(+ :is(.actions,.cta-row,.ctas)){margin-bottom:0}
:root body[data-tpl] :is(section,header,main) p + :is(.actions,.cta-row,.ctas){margin-top:var(--sp-5)}
:root body[data-tpl] :is(section,main) :is(img,picture,.frame,figure,.two) + p.shotcap{margin-top:var(--sp-3)}
:root body[data-page="for-waste"] #mobile .shotcap{margin-top:var(--sp-3)}
/* brand reference page: its sample tag shows the current badge, not the retired 9.5px monospace label */
:root body[data-page="brand"] .opthead .tag,:root body[data-page="brand"] .tag{font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:0;text-transform:none;border-radius:999px;padding:2px 9px}
/* footer links: one treatment on every page (pages underlined them, or not, and spaced them 12 or 16px apart) */
:root footer .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:28px;padding-bottom:28px}
:root footer .wrap > a:not(.logo),:root footer .built a{color:#C9D3D6;font-size:13px;font-weight:500;text-decoration:none;opacity:1}
:root footer .wrap > a:not(.logo):hover,:root footer .built a:hover,:root footer .wrap > a:not(.logo):focus-visible,:root footer .built a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}
:root footer .wrap > a[aria-current="page"]{color:#fff}
:root footer .sep{color:#5A6A70}
:root footer .wrap .built{font-size:13px;color:#B7C3C8;margin:6px 0 0;flex:0 0 100%}
/* stragglers found by the all-pages component audit */
:root body[data-tpl] .proof .shots > img.shot:not(.phone){border-radius:var(--r-md)}
:root body[data-tpl] .tier .btn{border-width:1px}
:root body[data-tpl] .searchbox input{min-height:48px;border-radius:10px;font-size:16px}
:root body[data-tpl] :is(section,main) :is(figure > figcaption,p.cap){margin-top:var(--sp-3)}
:root body[data-tpl] #plans .tier .btn{padding-top:13px;padding-bottom:13px}
:root body[data-tpl] .searchbox input{padding-top:11px;padding-bottom:11px}
:root body[data-tpl] :is(ul,ol) + p.shotcap{margin-top:var(--sp-3)}

/* 112.280.16: a menu link to a section (/for/waste#junk-removal, #containers, #sanitation-fencing …) lands with the
   heading below the sticky header (61px phone, 69px desktop), not under it. */
[id]{scroll-margin-top:84px}