/* real inputs, styled to the Figma spec */
.pacForm{margin:0}
.fields{display:flex;flex-direction:column;gap:20px}
.fld input[type=text],.fld input[type=email],.fld input[type=tel]{
  width:100%;border:0;background:transparent;outline:0;padding:0;margin:0;color:#000;
  font-family:'Asap Condensed','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;
  line-height:63px;letter-spacing:0}
.fld input::placeholder{color:rgba(0,0,0,.12);opacity:1}
.inp{position:relative}
.inp:focus-within{border-bottom-color:#083400}
.opt{color:#7b8a78;font-weight:400}
.phoneRow{display:flex;gap:20px;align-items:flex-end;margin-top:10px}
.phoneInp{flex:1;min-width:0}
/* country selector */
.cc{position:relative;flex:0 0 auto}
.cc-btn{display:flex;align-items:center;gap:10px;background:transparent;border:0;border-bottom:1px solid #3bb108;
  padding:10px 4px;cursor:pointer;min-height:44px}
.cc-btn:focus-visible{outline:3px solid #3bb108;outline-offset:3px}
.cc-flag{border-radius:3px;object-fit:cover;display:block;background:#eee}
.cc-dial{font-size:46px;line-height:46px;color:#083400}
.cc-pop{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:340px;max-height:320px;overflow:auto;
  background:#fff;border:2px solid #083400;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:8px}
.cc-search{width:100%;box-sizing:border-box;font-size:18px;padding:12px;border:1px solid #dbe3d8;border-radius:8px;margin-bottom:6px;min-height:44px}
.cc-search:focus{outline:2px solid #3bb108;outline-offset:1px}
.cc-list{list-style:none;margin:0;padding:0}
.cc-list li{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:8px;cursor:pointer;min-height:44px;
  font-family:'Inter Tight',system-ui,sans-serif;font-weight:500;font-size:18px;color:#0d2609}
.cc-list li:hover,.cc-list li[aria-selected=true]{background:#eefae9}
.cc-list li .d{margin-left:auto;color:#5b6b58}
/* upload */
.drop{border:2px dashed #3bb108;border-radius:10px;background:#f6fdf3;padding:22px 20px;display:flex;align-items:center;gap:16px;margin-top:10px;cursor:pointer}
.drop:hover{background:#ecfae6;border-color:#083400}
.drop:focus-within{outline:3px solid #3bb108;outline-offset:3px}
.dropText{display:flex;flex-direction:column;gap:2px}
.dropTitle{font-size:28px;line-height:30px;color:#083400}
.dropSub{font-size:16px;line-height:22px;color:#5b6b58}
.drop.has{background:#e4f7dc;border-style:solid}
/* submit */
button.submit{width:100%;border:0;display:block}
.formNote{margin:14px 0 0;font-size:15px;line-height:21px;color:#5b6b58;text-align:center}
.err{display:block;margin-top:8px;font-size:16px;line-height:22px;color:#b3261e;font-family:'Inter Tight',system-ui,sans-serif}
.inp.bad{border-bottom-color:#b3261e}
.okMsg{padding:28px 20px;text-align:center}
@media(max-width:900px){
  .cc-dial{font-size:30px;line-height:32px}
  .cc-pop{width:min(88vw,340px)}
  .dropTitle{font-size:22px;line-height:24px}
  .phoneRow{gap:12px}
}

/* ---- full-bleed section backgrounds, content column stays 1440 ---- */
html,body{background:#fff}
body{display:block !important}
.page{width:100% !important;max-width:none !important;box-shadow:none !important}
.sec,.hero,.hdr,.ftr{width:100% !important;max-width:none !important}
/* header + footer content aligns to the same 1320px column as the sections */
.hdr{padding-left:max(20px,calc((100% - 1320px)/2)) !important;padding-right:max(20px,calc((100% - 1320px)/2)) !important}
.ftr{padding-left:max(20px,calc((100% - 1320px)/2)) !important;padding-right:max(20px,calc((100% - 1320px)/2)) !important}
/* inner blocks keep their designed widths but never overflow a narrow viewport */
.sec > *,.hero > *{max-width:100%}

/* ================================================================
   DESIGN PASS · 2026-08-24
   Every lead so far arrived in the Meta in-app browser on a phone.
   The phone is the design target; 1440 is the fallback.
   ================================================================ */

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* submit-time failure, stated rather than swallowed */
.formError{margin:14px 0 0;padding:12px 16px;background:#fdeceb;border-left:3px solid #b3261e;border-radius:6px;
  font-size:16px;line-height:23px;color:#7a1c15;text-align:left}
.formError a{color:#7a1c15}
.okMsg:focus{outline:none}

/* ---- deliberate vertical rhythm: the hero breathes, proof tightens ---- */
.sec{padding:112px 10px}
.sec + .sec{padding-top:112px}
/* the two dark/green blocks either side of the proof block pull in, so the
   claim and its evidence read as one unit rather than three equal slabs */
.secTight{padding-top:80px;padding-bottom:80px}

/* Section colour alternation is not decoration: white states a claim, green
   carries the promise, dark handles objections. Pairs are bound by rhythm
   (.secTight), not by a gradient. Flat stays flat. */

/* ---- comparison table: stacked cards below 760px, never a squeezed grid ---- */
@media(max-width:760px){
  .cmp{border-width:1px}
  .cmp .row.headRow{display:none !important}
  .cmp .row{display:block !important;height:auto !important;padding:16px 14px}
  .cmp .rowLab{display:block;padding-left:0 !important;font-size:17px !important;line-height:23px !important;
    color:#5b6b58 !important;margin-bottom:10px}
  .cmp .totalRow .rowLab{font-size:26px !important;line-height:30px !important;color:#000 !important}
  .cmp .row .cel{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;
    gap:12px;height:auto !important;padding:10px 12px;border-radius:8px;background:#fafafa}
  .cmp .row .cel + .cel{margin-top:8px}
  .cmp .row .cel[style*="87ea5c"]{background:#87ea5c !important}
  .cmp .row .cel::before{content:attr(data-h);font-family:'Inter Tight',system-ui,sans-serif;font-weight:500;
    font-size:14px;line-height:18px;color:#5b6b58;text-align:left;flex:0 0 46%}
  .cmp .row .cel[style*="87ea5c"]::before{color:#0f4a05}
  .cmp .row .cel span{font-size:26px !important;line-height:28px !important;text-align:right}
  .cmp .totalRow .cel span{font-size:30px !important;line-height:32px !important}
  .cmp .totalRow .cel{flex-wrap:wrap;row-gap:2px}
  .cmp .totalRow .cel span + span{font-size:14px !important;line-height:18px !important;flex:1 0 100%;text-align:right}
  .cmp .row .cel span.bdy{font-size:16px !important;line-height:20px !important}
}

/* ---- the phone view: 390px is the real artboard ---- */
@media(max-width:900px){
  .sec{padding:64px 20px !important}
  .secTight{padding-top:48px !important;padding-bottom:48px !important}

  /* header: 96px of sticky chrome is a third of the fold on a phone */
  .hdr{height:64px !important}
  .hdr img{height:30px !important}
  .hdr .cta-link{padding:8px 16px !important}
  .hdr .cta-link span{font-size:17px !important;line-height:20px !important}
  .hdr a[href^="tel:"]{display:none}

  /* hero: everything above the first field is cost, so spend it carefully */
  .hero{padding-top:24px !important}
  .heroMark{width:88px !important;height:88px !important}
  .eyebrowWrap{padding-top:14px !important}
  .eyebrowWrap .rbt{font-size:13px !important;line-height:17px !important;padding:5px 14px !important}
  .heroHead{margin-top:16px !important;padding:0 !important;gap:2px}
  .heroHead p,.heroHead span{font-size:34px !important;line-height:32px !important}
  .heroHead > div{flex-wrap:wrap;gap:6px !important;justify-content:center}
  /* inline-block makes the highlight a full-width slab that wraps left-aligned.
     Inline + clone gives each line its own pill, hugging the words. */
  .hl{display:inline !important;box-decoration-break:clone;-webkit-box-decoration-break:clone;
      padding:2px 10px;border-radius:14px}
  .heroHead > div:last-child{padding:0 !important}
  .heroSub{margin-top:14px !important;width:100% !important}
  .heroSub p{font-size:17px !important;line-height:24px !important}
  .heroSub p:nth-child(2){display:none}          /* the spacer paragraph */
  .heroSub p:last-child{margin-top:6px;color:#0f4a05 !important;font-weight:600}
  #quote{margin-top:24px !important;width:100% !important}

  /* form: 70px placeholders own the whole screen on a phone */
  .card > div:first-child p,
  #quote + div p{font-size:26px !important;line-height:30px !important}
  .fields{gap:14px}
  .fld{padding:6px 10px}
  .lab{font-size:15px !important;line-height:20px !important}
  .fld input[type=text],.fld input[type=email],.fld input[type=tel]{line-height:38px !important}
  .cc-dial{font-size:24px !important;line-height:30px !important}
  .drop{padding:16px 14px;gap:12px}
  .dropTitle{font-size:19px !important;line-height:22px !important}
  .dropSub{font-size:14px !important;line-height:19px !important}
  .submit span{font-size:24px !important;line-height:30px !important}
  .formNote{font-size:14px !important;line-height:20px !important}

  /* headings + proof */
  .h2{font-size:36px !important;line-height:34px !important}
  .lede{font-size:17px !important;line-height:24px !important}
  .bigNum{font-size:46px !important;line-height:44px !important}
  .bigNumRow svg{transform:rotate(90deg)}
  .sec [style*="border-radius: 20px"] span.dsp{font-size:24px !important;line-height:30px !important}
}

@media(max-width:400px){
  .heroHead p,.heroHead span{font-size:31px !important;line-height:30px !important}
  .h2{font-size:32px !important;line-height:31px !important}
}

/* every section's inner column stops fighting the viewport */
.sec .title,.sec .title > div,.sec > div{max-width:100%}