/* site-nav.css — the header and the buttons, shared by every marketing page.

   Why this file exists: 25 pages each carried their own copy of the nav CSS,
   and they drifted. On 12 September 2026 eight pages had the "Built for" and
   "Compare" dropdown markup with none of its styling (raw ▶ markers, a menu
   that opened into nothing), and every trade page's hero buttons were
   invisible because they used a class the page never defined.

   This file is linked LAST in every marketing head, so it wins over the
   inline copy. qa/static.js fails the suite if a page with a <nav> does not
   link it. Page-specific styling stays inline; what is here is what must be
   identical everywhere. */

/* ---- header row ---- */
nav .wrap{display:flex;align-items:center;gap:10px;padding-top:12px;padding-bottom:12px}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.markicon{width:36px;height:36px;flex-shrink:0;border-radius:8px}
.logo span{font-family:var(--mono,ui-monospace,monospace);font-size:14px;font-weight:600;
           letter-spacing:.18em;text-transform:uppercase;opacity:.95;margin-left:4px}

/* ---- dropdowns ---- */
nav .navmenu{position:relative}
nav .navmenu summary{list-style:none;cursor:pointer;font-size:13.5px;opacity:.85;user-select:none;
                     color:inherit;text-decoration:none}
nav .navmenu summary::-webkit-details-marker{display:none}
nav .navmenu summary::marker{content:""}
nav .navmenu summary::after{content:" \25BE";font-size:11px}
nav .navmenu .menu{position:absolute;top:calc(100% + 10px);left:-10px;background:var(--steel,#1B4B5A);
  border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:6px 0;min-width:190px;z-index:20;
  display:grid;grid-template-columns:1fr 1fr;box-shadow:0 8px 24px rgba(0,0,0,.25)}
nav .navmenu .menu a{display:block;padding:8px 14px;white-space:nowrap;color:#fff;text-decoration:none;opacity:.9;font-size:13.5px}
nav .navmenu .menu a:hover{background:rgba(255,255,255,.08);opacity:1}
nav .navmenu.compare .menu,nav .navmenu:last-of-type .menu{grid-template-columns:1fr}

/* ---- phones: dropdowns live inside the burger menu, not in the bar ---- */
@media(max-width:640px){
  nav .navmenu{display:none}
  .navtoggle:checked ~ .links .navmenu{display:block;border-bottom:1px solid rgba(255,255,255,.10)}
  .navtoggle:checked ~ .links .navmenu summary{display:block;padding:13px 2px;font-size:15px;opacity:.95}
  .navtoggle:checked ~ .links .navmenu .menu{position:static;border:0;box-shadow:none;padding:0 0 6px 14px;
    grid-template-columns:1fr 1fr;background:transparent;min-width:0}
  .navtoggle:checked ~ .links .navmenu .menu a{padding:9px 2px;font-size:14px;border:0;white-space:normal}
  .markicon{width:34px;height:34px}
  .logo span{font-size:13px}
}

/* ---- buttons: a bare .btn or .btn.ghost still renders as a button ---- */
.btn{padding:14px 22px;border-radius:4px;font-size:15px;font-weight:650;text-decoration:none;
     display:inline-block;border:1px solid transparent;cursor:pointer}
.btn:not(.btn-ghost):not(.ghost):not(.btn-secondary){background:var(--steel,#1B4B5A);color:#fff;border-color:var(--steel,#1B4B5A)}
.btn.ghost,.btn-ghost,.btn-secondary{background:var(--card,#fff);color:var(--ink,#101418);border-color:var(--line,#D2D7D4)}

/* ---- content blocks shared by the trade, comparison and realty pages ---- */
section.alt{background:var(--card,#fff)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:22px}
.card{background:var(--card,#fff);border:1px solid var(--line,#D2D7D4);border-radius:6px;padding:18px 18px 16px}
section.alt .card{background:var(--board,#E7EAE8)}
.card h4{margin:0 0 8px;font-size:16px;font-weight:650}
.card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--graphite,#5C6670)}
.qa{border-top:1px solid var(--line,#D2D7D4);padding:16px 0}
.qa:first-of-type{border-top:0;padding-top:4px}
.qa h4{margin:0 0 6px;font-size:15.5px;font-weight:650}
.qa p{margin:0;font-size:14.5px;line-height:1.55;color:var(--graphite,#5C6670);max-width:64ch}
.note{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite,#5C6670)}
header.hero{padding:46px 0 10px}
header.hero .lede{font-size:clamp(15px,2.2vw,18px);color:var(--graphite,#5C6670);max-width:52ch;margin-top:14px;line-height:1.55}
header.hero .btn{margin-top:18px;margin-right:6px}

/* ---- the ROI calculator ---- */
.roicalc{padding:18px}
.roicalc .two{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.roicalc .two > div{flex:1 1 200px;min-width:0}
.roicalc label{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;
               letter-spacing:.12em;text-transform:uppercase;color:var(--graphite,#5C6670);margin:12px 0 5px}
.roicalc input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--line,#D2D7D4);
               border-radius:4px;font-size:16px;font-family:var(--sans,system-ui);color:var(--ink,#101418);background:#fff}
.roicalc .hint{display:inline;font-size:12px;color:var(--graphite,#5C6670)}
.roiout{margin-top:18px;border-top:1px solid var(--line,#D2D7D4);padding-top:16px}
.roihead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.roihead span:first-child{font-size:clamp(20px,4vw,28px);font-weight:700;line-height:1.15}
.roihead .sub{font-size:14px;color:var(--graphite,#5C6670)}
.roitab{width:100%;border-collapse:collapse;font-size:14px}
.roitab th{text-align:left;font-weight:650;padding:9px 8px 9px 0;vertical-align:top;width:34%}
.roitab td{padding:9px 0;color:var(--graphite,#5C6670);vertical-align:top}
.roitab td.n{text-align:right;color:var(--ink,#101418);font-family:var(--mono,ui-monospace,monospace);
             white-space:nowrap;font-size:13.5px}
.roitab tr{border-top:1px solid var(--line,#D2D7D4)}
.roitab tr.tot th,.roitab tr.tot td{font-weight:700;color:var(--ink,#101418)}
@media(max-width:560px){
  .roitab th{width:44%;font-size:13.5px}
  .roitab td{font-size:13px}
}

/* Calculator buttons. The class is shared with the ROI page's action row. */
.repacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.repacts .go{background:var(--steel,#1B4B5A);color:#fff;border:0;border-radius:5px;padding:11px 18px;
              font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.repacts .go:hover{filter:brightness(1.08)}
.roiout:focus{outline:2px solid var(--hivis,#F2A007);outline-offset:3px}

/* ---- footer: the "Built for" strip lives inside the wrap ----
   It used to be a <p> after the wrap, so it ran edge to edge with no padding
   on every page. Now it is the last flex item, full width. */
/* v112.229: flex:0 0 100% and no max-width, at a specificity that beats the pages' inline `.wrap .sub{max-width:72ch}`
   (it is a <p class="sub built">). With only flex-basis:100%, that 72ch cap held it at ~536px, and Safari then kept it on the links' line, squeezed into a two-line column on the right. */
footer .wrap .built{flex:0 0 100%;max-width:none;width:100%;margin:10px 0 0;font-size:13px;opacity:.85;line-height:1.7}
footer .built a{opacity:1}
footer .sep{opacity:.4}
@media(max-width:640px){
  footer .sep{display:none}
  footer .wrap{gap:10px 14px}
}

/* =====================================================================
   PUBLIC-SITE DESIGN SYSTEM — v112.165
   The homepage (v112.164) is the benchmark; these are its patterns made
   shared so every marketing page draws on one set: eyebrow, product
   screenshot frames, captions, proof sections, the workflow strip, trade
   chips, pricing cards and the final CTA band. Page-specific layout stays
   inline on the page; what is here is what should look identical everywhere.
   ===================================================================== */
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3,#56666C)}
.copy h2{font-size:clamp(26px,3vw,38px);line-height:1.12;letter-spacing:-.015em;margin:10px 0 16px}
.copy h3{font-size:22px;line-height:1.2;margin:0 0 10px}
.copy p{font-size:17px;line-height:1.55;color:var(--ink-2,#3E4F55);margin:0 0 12px}
.copy p a{color:var(--steel,#1B4B5A);font-weight:600}
.copy.centered{text-align:center;max-width:820px;margin:0 auto 34px}

/* screenshot frames: a desktop capture and a phone capture */
img.shot,.shot img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid rgba(27,75,90,.16);
  box-shadow:0 18px 44px -22px rgba(27,75,90,.38)}
img.shot.wide{width:100%}
img.phone,.phone img{display:block;max-width:100%;height:auto;border-radius:22px;border:5px solid #16323C;background:#16323C;
  box-shadow:0 26px 52px -22px rgba(0,0,0,.45)}
figure.shotfig{margin:0}
figure.shotfig figcaption,.shotcap{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3,#56666C);margin-top:12px}
figure.shotfig figcaption a,.shotcap a{color:inherit}

/* proof sections: copy beside a capture, alternating */
.proof{padding:84px 0}
.proof.alt{background:#F2F4F3}
.proof .two{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.proof .two.flip{grid-template-columns:7fr 5fr}
.proof .two.tight{margin-top:56px;grid-template-columns:4fr 7fr}
.proof .shots{position:relative}
.proof .shots > img:first-child{width:100%}
.proof .shots > img.phone{position:absolute;right:-6px;bottom:-24px;width:26%;max-width:230px}
.proof .shots.phones{display:flex;gap:22px;justify-content:center;align-items:flex-start}
.proof .shots.phones img.phone{position:static;width:46%;max-width:280px}
.proof .shots.phones.single img.phone{width:60%;max-width:300px}
.proof .two.tight img.phone{width:100%;max-width:300px;margin:0 auto}

/* the workflow strip */
.flow{background:var(--steel,#1B4B5A);color:#fff;padding:26px 0}
.strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr)}
.strip li{padding:6px 14px 6px 14px;border-left:1px solid rgba(255,255,255,.18);min-width:0}
.strip li:first-child{border-left:0;padding-left:0}
.strip b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.strip b::after{content:" \2192";opacity:.45;font-weight:400}
.strip li:last-child b::after{content:""}
.strip span{display:block;font-size:13px;opacity:.78;margin-top:3px;line-height:1.35}
.strip.five{grid-template-columns:repeat(5,1fr)}
.strip.seven{grid-template-columns:repeat(7,1fr)}

/* trade chips */
.chips{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:820px}
.chips a{display:inline-block;padding:11px 16px;border:1px solid var(--line,#CFD8D6);border-radius:999px;text-decoration:none;color:var(--ink,#111);font-weight:600;font-size:15px;background:#fff;min-height:44px;box-sizing:border-box}
.chips a:hover,.chips a.on{border-color:var(--steel,#1B4B5A);color:var(--steel,#1B4B5A)}
.note.centered{text-align:center;margin:22px auto 0;max-width:none}
/* v112.218: the closing note stays a small mono line. .final p (18px) and some pages' inline .note callout box
   were overriding it, making it a large boxed block on /, /customer-hub, /phone-integration and /for/dumpster-brokers. */
.final .note{font-size:11.5px;line-height:1.6;background:none;border:0;padding:0;border-radius:0;margin:22px auto 0;color:var(--graphite,#5C6670)}
.note a{color:inherit}

/* pricing cards, shared between / and /pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.plans .tier{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#DDE3E1);border-radius:10px;padding:26px 24px}
.plans .tier.featured{border:2px solid var(--steel,#1B4B5A)}
.plans .tier > .btn{margin-top:auto}
.plans .plan{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3,#56666C)}
.plans .price{font-size:44px;font-weight:800;letter-spacing:-.02em;margin:10px 0 8px;font-family:var(--sans,inherit)}
.plans .price span{font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:0;color:var(--ink-3,#56666C);margin-left:6px}
.plans .tier p{font-size:15px;line-height:1.5;color:var(--ink-2,#3E4F55);margin:0 0 22px}
.plans .tier ul{margin:0 0 22px;padding:0;list-style:none;font-size:15px;line-height:1.6;color:var(--ink-2,#3E4F55)}
.plans .tier ul li::before{content:"\2713  ";color:var(--green,#2C7A5B)}

/* final CTA band */
.final{padding:88px 0;text-align:center}
.final h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.02em;margin:0 0 12px}
.final p{font-size:18px;color:var(--ink-2,#3E4F55);margin:0 0 26px}
.actions.centered{justify-content:center}

/* small tables that must survive a phone */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
.tablewrap table{min-width:560px}

@media(max-width:900px){
  .proof .two,.proof .two.flip,.proof .two.tight{grid-template-columns:1fr;gap:30px}
  .proof .two.tight{margin-top:40px}
  .proof .two.tight > img.phone,.proof .two.tight > img{order:2}
  .proof .shots > img.phone{position:static;width:44%;margin:-40px 0 0 auto}
  .plans{grid-template-columns:1fr}
  .strip,.strip.five,.strip.seven{grid-template-columns:repeat(3,1fr);row-gap:16px}
  .strip li:nth-child(3n+1){border-left:0;padding-left:0}
}
@media(max-width:640px){
  .m-hide{display:none !important}
  .proof{padding:56px 0}
  .proof .shots.phones{gap:12px}
  .proof .shots > img.phone{position:static;width:72%;margin:0 auto}
  .proof .two.tight img.phone{width:72%}
  .proof picture img.wide{width:72%;margin:0 auto;border-radius:22px;border:5px solid #16323C;background:#16323C}
  .strip,.strip.five,.strip.seven{grid-template-columns:repeat(2,1fr)}
  .strip li:nth-child(3n+1){border-left:1px solid rgba(255,255,255,.18);padding-left:14px}
  .strip li:nth-child(odd){border-left:0;padding-left:0}
  .actions{flex-direction:column}
  .actions .btn{text-align:center}
  .final{padding:60px 0}
  #pricing{padding-bottom:40px}
}

/* =====================================================================
   CALCULATORS — v112.170
   /calculators/* and the three /tools pages. The calculator sits above the
   fold: a short hero, then inputs beside the result on a wide screen and
   inputs above the result on a phone. Inputs are text with inputmode, not
   type=number, so "1,800" is accepted, iOS shows the decimal pad, and a
   scroll wheel never changes a figure.
   ===================================================================== */
.calc-hero{padding:34px 0 8px}
.calc-hero h1{font-size:clamp(28px,4.6vw,46px);line-height:1.06;letter-spacing:-.025em;margin:10px 0 0;font-weight:800;max-width:22ch}
.calc-hero .lede{font-size:clamp(15.5px,2vw,18px);color:var(--ink-2,#3E4F55);max-width:60ch;margin:12px 0 0;line-height:1.5}
.calc-hero .crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite,#5C6670)}
.calc-hero .crumbs a{color:inherit;text-decoration:none}
.calc-hero .crumbs a:hover{text-decoration:underline}
.calc-main{padding:18px 0 40px;border-top:0}
.calc-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:22px;align-items:start}
@media(max-width:860px){.calc-grid{grid-template-columns:1fr;gap:16px}}
.calc{background:#fff;border:1px solid var(--line,#D2D7D4);border-radius:10px;padding:20px 20px 16px;margin:0}
.calc fieldset{border:0;margin:0;padding:0;min-width:0}
.calc legend{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel,#1B4B5A);font-weight:700;padding:0;margin:0 0 4px}
.calc fieldset + fieldset{margin-top:16px;padding-top:14px;border-top:1px solid var(--line,#D2D7D4)}
.calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
@media(max-width:520px){.calc-fields{grid-template-columns:1fr}}
.calc-field{min-width:0}
.calc-field[hidden]{display:none}
.calc-field label{display:block;font-size:14px;font-weight:650;color:var(--ink,#101418);margin:12px 0 6px;line-height:1.3}
.calc-input{display:flex;align-items:stretch;border:1px solid #B9C2BF;border-radius:6px;background:#fff;overflow:hidden}
.calc-input:focus-within{border-color:var(--steel,#1B4B5A);box-shadow:0 0 0 3px rgba(27,75,90,.18)}
.calc-input span{display:flex;align-items:center;padding:0 11px;background:#F2F4F3;color:var(--graphite,#5C6670);font-family:var(--mono);font-size:14px;flex:0 0 auto}
.calc-input input{flex:1 1 auto;min-width:0;border:0;outline:0;padding:12px;font-size:17px;font-family:var(--sans);color:var(--ink,#101418);background:transparent;min-height:48px}
.calc-input input[aria-invalid="true"]{background:#FDF3EF}
.calc-field:has([aria-invalid="true"]) .calc-input{border-color:var(--danger,#B4451F)}
.calc-hint{font-size:12.5px;color:var(--graphite,#5C6670);margin:5px 0 0;line-height:1.4}
.calc-err{font-size:13px;color:var(--danger,#B4451F);font-weight:600;margin:5px 0 0;line-height:1.35}
.calc-err[hidden]{display:none}
.calc-modes{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.calc-modes label{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;padding:10px 12px;border:1px solid var(--line,#D2D7D4);border-radius:6px;cursor:pointer;min-height:46px;margin:0}
.calc-modes label:has(input:checked){border-color:var(--steel,#1B4B5A);background:#EEF4F5}
.calc-modes input{width:20px;height:20px;accent-color:var(--steel,#1B4B5A);flex:0 0 auto;margin:0}
.calc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.calc-acts button{font-family:inherit;font-size:15px;font-weight:650;border-radius:6px;padding:12px 18px;min-height:46px;cursor:pointer}
.calc-acts .go{background:var(--steel,#1B4B5A);color:#fff;border:1px solid var(--steel,#1B4B5A)}
.calc-acts .quiet{background:#fff;color:var(--ink,#101418);border:1px solid var(--line,#D2D7D4)}
.calc-acts button:hover{filter:brightness(1.06)}
.calc button:focus-visible,.calc input:focus-visible,.calc-out a:focus-visible,.calc-cta a:focus-visible,.cc-banner button:focus-visible,.cc-dialog button:focus-visible,.cc-dialog input:focus-visible{outline:3px solid var(--hivis,#F2A007);outline-offset:2px}
.calc-status{font-size:13px;color:var(--done,#2C7A5B);min-height:1.2em;margin:8px 0 0}
.calc-out{background:var(--steel,#1B4B5A);color:#fff;border-radius:10px;padding:20px;position:sticky;top:14px}
@media(max-width:860px){.calc-out{position:static}}
.calc-out .eyebrow{color:rgba(255,255,255,.72)}
.calc-out [data-live]{display:block;margin:8px 0 14px;outline:0}
.calc-big{display:block;font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.08;color:#fff}
.calc-big.neg{color:#FFB199}
.calc-bigsub{display:block;font-size:15px;opacity:.85;margin-top:4px}
.calc-tab{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;color:var(--ink,#101418);border-radius:8px;overflow:hidden}
.calc-tab th,.calc-tab td{padding:10px 12px;border-top:1px solid #E3E7E5;vertical-align:top}
.calc-tab tr:first-child th,.calc-tab tr:first-child td{border-top:0}
.calc-tab th{text-align:left;font-weight:600}
.calc-tab td{text-align:right;font-family:var(--mono);white-space:nowrap;font-size:14px}
.calc-note{display:block;font-weight:400;font-size:12px;color:var(--graphite,#5C6670);margin-top:2px}
.calc-tab tr.rsum th,.calc-tab tr.rsum td{border-top:2px solid #C9D1CE}
.calc-tab tr.tot th,.calc-tab tr.tot td{font-weight:800;background:#F4F7F6}
.calc-tab tr.tgt th,.calc-tab tr.tgt td{background:#FFF6E3}
.calc-tab tr.neg td{color:var(--danger,#B4451F)}
.calc-interp{font-size:15px;line-height:1.55;margin:14px 0 0;color:#fff}
.calc-next{font-size:14.5px;line-height:1.55;margin:10px 0 0;padding:12px 14px;background:rgba(255,255,255,.08);border-left:3px solid var(--hivis,#F2A007);border-radius:0 6px 6px 0}
.calc-out-empty [data-live]{font-size:16px;font-weight:600}
.calc-cta{margin-top:14px;padding:16px;border:1px solid rgba(255,255,255,.22);border-radius:8px}
.calc-cta p{margin:0 0 12px;font-size:14.5px;line-height:1.5}
.calc-cta .btn{margin:0 6px 6px 0;padding:12px 16px;font-size:14.5px}
/* specificity has to beat the shared .btn:not(...) fill above */
.calc-out .calc-cta a.btn.hv{background:var(--hivis,#F2A007);color:#241a02;border-color:var(--hivis,#F2A007)}
.calc-out .calc-cta a.btn.ol{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.calc-learn{padding:48px 0;border-top:1px solid var(--line,#D2D7D4)}
.calc-learn .copy{max-width:760px}
.calc-learn h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.015em;margin:8px 0 14px;max-width:30ch}
.calc-learn h3{font-size:18px;margin:26px 0 8px}
.calc-learn p,.calc-learn li{font-size:16px;line-height:1.6;color:var(--ink-2,#3E4F55)}
.calc-learn ul{padding-left:20px}
.calc-learn .formula{font-family:var(--mono);font-size:14.5px;background:#fff;border:1px solid var(--line,#D2D7D4);border-left:3px solid var(--hivis,#F2A007);border-radius:4px;padding:12px 14px;line-height:1.7;overflow-x:auto;color:var(--ink,#101418)}
.calc-learn table{width:100%;border-collapse:collapse;background:#fff;font-size:15px;border:1px solid var(--line,#D2D7D4);border-radius:6px}
.calc-learn th,.calc-learn td{padding:9px 12px;border-bottom:1px solid var(--line,#D2D7D4);text-align:left}
.calc-learn td.n,.calc-learn th.n{text-align:right;font-family:var(--mono)}
.calc-learn .tablewrap table{min-width:0}
.calc-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:18px}
.calc-related a{display:block;background:#fff;border:1px solid var(--line,#D2D7D4);border-radius:8px;padding:16px;text-decoration:none;min-height:44px}
.calc-related a:hover{border-color:var(--steel,#1B4B5A)}
.calc-related b{display:block;font-size:16px;color:var(--ink,#101418)}
.calc-related span{display:block;font-size:14px;color:var(--graphite,#5C6670);margin-top:4px;line-height:1.45}
.calc-proof{padding:48px 0;background:#F2F4F3;border-top:1px solid var(--line,#D2D7D4)}
.calc-proof .two{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}
@media(max-width:900px){.calc-proof .two{grid-template-columns:1fr;gap:24px}}
.calc-proof picture img,.calc-proof img.phone{margin:0 auto}
@media(max-width:640px){.calc-proof picture img.shot{width:72%;margin:0 auto;border-radius:22px;border:5px solid #16323C;background:#16323C}}
.hub-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:18px}
.hub-cards a,.hubcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#D2D7D4);border-radius:10px;padding:20px;text-decoration:none;color:var(--ink,#101418);min-height:44px}
.hub-cards a:hover{border-color:var(--steel,#1B4B5A);box-shadow:0 10px 26px -18px rgba(27,75,90,.5)}
.hub-cards .eyebrow{margin-bottom:6px}
.hub-cards b{font-size:19px;letter-spacing:-.01em}
.hub-cards span{font-size:15px;color:var(--ink-2,#3E4F55);margin-top:6px;line-height:1.5}
.hub-cards em{font-style:normal;margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--steel,#1B4B5A)}

/* Cookie consent styles live in consent.js (v112.172): the banner must look
   right even when a browser holds a stale copy of this file. */

/* ---- the /tools calculators, brought into the same system (v112.170) ---- */
.roicalc.tool{border-radius:10px;padding:20px}
.roicalc.tool input,.roicalc.tool select{min-height:48px;font-size:17px;border-color:#B9C2BF;border-radius:6px}
.roicalc.tool select{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #B9C2BF;background:#fff;font-family:var(--sans,system-ui);color:var(--ink,#101418)}
.roicalc.tool input:focus,.roicalc.tool select:focus{outline:3px solid var(--hivis,#F2A007);outline-offset:1px}
.roicalc.tool label{font-family:var(--sans,system-ui);font-size:14px;letter-spacing:0;text-transform:none;font-weight:650;color:var(--ink,#101418)}
.roicalc.tool .hint{display:block;margin-top:5px}
.roicalc.tool .repacts button{min-height:46px}
.repacts .quiet{background:#fff;color:var(--ink,#101418);border:1px solid var(--line,#D2D7D4);border-radius:5px;padding:11px 16px;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.roicalc.tool .roiout{background:#F4F7F6;border:1px solid var(--line,#D2D7D4);border-radius:8px;padding:12px 14px}
.roicalc.tool .roitab tr.tot th,.roicalc.tool .roitab tr.tot td{font-size:16px}
.tool-note{color:var(--ink-2,#3E4F55);font-size:14.5px;margin:10px 0 0}

.two-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.calc-links{padding:30px 0}
.calc-links .sub a{color:var(--steel,#1B4B5A);font-weight:600}

/* Three phones: the main screen forward, two supporting screens behind it.
   On a phone only the main screen shows; a tiny collage would be unreadable. */
.proof .shots.phones.trio{align-items:center;gap:0}
.proof .shots.phones.trio img.phone{width:30%;max-width:200px;border-radius:22px;box-shadow:0 18px 44px rgba(22,50,60,.18)}
.proof .shots.phones.trio img.phone.main{width:38%;max-width:250px;position:relative;z-index:2;margin:0 -4%}
.proof .shots.phones.trio img.phone.side{opacity:.96;transform:scale(.94)}
@media (max-width: 700px){
  .proof .shots.phones.trio img.phone.side{display:none}
  .proof .shots.phones.trio img.phone.main{width:72%;max-width:280px;margin:0 auto}
}

/* v112.219 — phone-first polish (agency-grade iPhone pass) */
.loop,.loop-note{display:none}
@media (max-width: 640px){
  header.hero{padding:26px 0 6px}
  .hero-copy .eyebrow{margin-bottom:10px}
  .loop{display:flex;flex-wrap:wrap;row-gap:8px;align-items:center;list-style:none;margin:18px 0 4px;padding:0;gap:0;max-width:100%}
  .loop li{display:flex;align-items:center;flex:0 0 auto}
  .loop li + li::before{content:"\2192";color:var(--steel,#1B4B5A);font-weight:700;font-size:14px;margin:0 4px;line-height:1}
  .loop li span{display:inline-block;font-size:12.5px;font-weight:700;color:#fff;background:var(--steel,#1B4B5A);padding:7px 8px;border-radius:999px;line-height:1;letter-spacing:0}
  .loop-note{display:block;font-size:14px;color:var(--ink-2,#3E4F55);margin:6px 0 0}
  section.flow{display:none}
  /* phone screenshots at a size you can read */
  /* single phone shots grow to a readable size; a PAIR of phone shots stays side by side at half width each */
  .proof .two.tight img.phone,.proof .shots.phones.single img.phone,.proof .shots:not(.phones) > img.phone{width:min(82vw,320px);max-width:none;margin-left:auto;margin-right:auto}
  .proof .shots.phones:not(.single){display:flex;gap:10px;justify-content:center}
  .proof .shots.phones:not(.single) img.phone{width:calc(50% - 5px);max-width:220px;margin:0}
  header .hero-shot picture img{width:min(82vw,320px);margin:0 auto;display:block}
}
@media (max-width: 374px){
  .loop li span{font-size:11.5px;padding:6px 6px}
  .loop li + li::before{margin:0 2px;font-size:12px}
}
@media (max-width: 480px){
  nav .signin{display:none}
  nav .cta{white-space:nowrap}
  /* v112.265.4: the compact phone header hides Sign in to fit one row, but that rule also hid it inside the open menu,
     so a phone had no Sign in anywhere. In the open menu it is a full-width button above Start free. */
  nav .navtoggle:checked ~ .links .signin{display:block;text-align:center;margin-top:10px;padding:12px 18px;font-size:15px}
}
/* v112.265.6: on common phone widths (360–480px) Sign in sits in the header next to a more compact Start free, so it is one tap
   away without opening the menu. Below 360px the row has no room; Sign in stays in the open menu (rule above). */
/* Selectors carry .wrap .links so they outrank each page's own copy of the header rules (loaded after this file). */
@media (min-width: 360px) and (max-width: 480px){
  nav .wrap .links{gap:6px}
  nav .wrap .links a.signin{display:inline-flex;align-items:center;min-height:34px;padding:0 9px;font-size:12px;line-height:1.1;white-space:nowrap}
  nav .wrap .links a.cta{display:inline-flex;align-items:center;min-height:34px;padding:0 9px;font-size:9.5px;letter-spacing:.05em;line-height:1.1;white-space:nowrap}
  nav .wrap .navtoggle:checked ~ .links a.signin{display:block;padding:12px 18px;font-size:15px}
  nav .wrap .navtoggle:checked ~ .links a.cta{display:block;padding:12px 18px;font-size:11px;letter-spacing:.1em}
}
/* Some pages hide every header link but Start free up to 640px; Sign in stays visible there too. */
@media (min-width: 481px) and (max-width: 640px){
  nav .wrap .links a.signin{display:inline-flex;align-items:center}
}

/* v112.219: wide legal tables scroll inside their own box on small phones instead of widening the page */
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll:focus-visible{outline:3px solid var(--hivis,#F2A007);outline-offset:2px}

/* v112.229: closing sections center their headline and sentence on the page. Both have a max-width but had no
   auto side margins, so each box pinned left and its text centered inside it — 75px and 189px left of center on
   the homepage, /customer-hub, /phone-integration and /for/dumpster-brokers at desktop widths. */
section.final h2,section.final p{margin-left:auto;margin-right:auto}

/* v112.242: centered-copy headings center their box, not only their text. h2 keeps a max-width (30ch/34ch) with 0 side
   margins, so each centered heading sat left of center (26px at 1288-1440, 99px at 1024) on the homepage, pricing,
   /customer-hub, /phone-integration and /for/dumpster-brokers. */
.copy.centered h1,.copy.centered h2,.copy.centered > p{margin-left:auto;margin-right:auto}

/* ===== v112.255 Wide-desktop editorial layout =====
   Text-only sections (eyebrow + h2 + body, no screenshots/tables/forms/card grids) stopped at ~40% of the fluid .wrap on wide
   screens. From 1100px: the eyebrow is a full-width first row; the heading takes the left column and the body the right column
   (both from row 2, in source order) at a reading measure. .wrap keeps its own width; only .copy drops its narrow cap.
   Phones and tablets (<1100px), centered sections, heroes and media/card sections are untouched. */
@media (min-width: 1100px) {
  :is(section > .wrap, section > .wrap:not(.two) > .copy):has(> :is(.eyebrow, p.note):first-child + h2):not(.centered):not(:has(> .cards, > .grid, > .tiles, > .two, > .cols, > img, > figure, > table, > form)) { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 7fr); column-gap: clamp(48px, 5vw, 112px); align-items: start; }
  section > .wrap > .copy:has(> :is(.eyebrow, p.note):first-child + h2):not(.centered):not(:has(> .cards, > .grid, > .tiles, > .two, > .cols, > img, > figure, > table, > form)) { max-width: none; }
  :is(section > .wrap, section > .wrap:not(.two) > .copy):has(> :is(.eyebrow, p.note):first-child + h2):not(.centered):not(:has(> .cards, > .grid, > .tiles, > .two, > .cols, > img, > figure, > table, > form)) > :is(.eyebrow, p.note):first-child { grid-column: 1 / -1; }
  :is(section > .wrap, section > .wrap:not(.two) > .copy):has(> :is(.eyebrow, p.note):first-child + h2):not(.centered):not(:has(> .cards, > .grid, > .tiles, > .two, > .cols, > img, > figure, > table, > form)) > :is(.eyebrow, p.note):first-child + h2 { grid-column: 1; grid-row: 2 / span 40; margin-top: 6px; }
  :is(section > .wrap, section > .wrap:not(.two) > .copy):has(> :is(.eyebrow, p.note):first-child + h2):not(.centered):not(:has(> .cards, > .grid, > .tiles, > .two, > .cols, > img, > figure, > table, > form)) > :not(:first-child):not(:is(.eyebrow, p.note):first-child + h2) { grid-column: 2; max-width: min(70ch, 100%); }
  :is(section > .wrap, section > .wrap:not(.two) > .copy):has(> :is(.eyebrow, p.note):first-child + h2):not(.centered):not(:has(> .cards, > .grid, > .tiles, > .two, > .cols, > img, > figure, > table, > form)) > :is(.eyebrow, p.note):first-child + h2 + * { margin-top: 0; }
}
@media (min-width: 1100px) {   /* section > .wrap:has(> .eyebrow:first-child + .qa):not(:has(> h2, > .cards, > .grid, > img, > figure, > table, > form))AQ sections without an h2 (trade pages): eyebrow left, questions right */
  section > .wrap:has(> .eyebrow:first-child + .qa):not(:has(> h2, > .cards, > .grid, > img, > figure, > table, > form)) { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 7fr); column-gap: clamp(48px, 5vw, 112px); align-items: start; }
  section > .wrap:has(> .eyebrow:first-child + .qa):not(:has(> h2, > .cards, > .grid, > img, > figure, > table, > form)) > .eyebrow:first-child { grid-column: 1; grid-row: 1 / span 40; }
  section > .wrap:has(> .eyebrow:first-child + .qa):not(:has(> h2, > .cards, > .grid, > img, > figure, > table, > form)) > :not(:first-child) { grid-column: 2; max-width: min(70ch, 100%); }
}