, and page.css rules like ".ppx-page a{color:inherit}" (0,1,1) would otherwise out-rank a bare ".ppx-est-btn" (0,1,0) and grey out the button text. The two-class form keeps this section looking the same on every page. The .ppx-gsel-panel rules are the exception: that element is moved to by estimate.js, so it sits outside .ppx-page and needs no extra weight. ========================================================================== */ .ppx-est{ --pe-brand:#0f77b9; --pe-brand-tint:#eef6fc; --pe-brand-tint-2:#d3e6f4; --pe-ink:#0d1b2a; --pe-muted:#7b8a99; --pe-line:#e3e8ee; --pe-soft:#f6f8fa; --pe-r:3px; --pe-r-lg:6px; --pe-fh:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --pe-fb:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --pe-ease:cubic-bezier(.22,1,.36,1); position:relative; background:var(--pe-ink); padding:clamp(64px,8vw,104px) 0; overflow:hidden; font-family:var(--pe-fb);font-size:16px;line-height:1.7; /* the anchor target sits under the sticky header, so offset the scroll stop */ scroll-margin-top:96px; } .ppx-est *,.ppx-est *::before,.ppx-est *::after{box-sizing:border-box} .ppx-est ul{margin:0;padding:0;list-style:none} .ppx-est p{margin:0} .ppx-est h2,.ppx-est h5{margin:0;font-family:var(--pe-fh);font-weight:700; line-height:1.22;letter-spacing:-.015em} .ppx-est .ppx-est-bg{position:absolute;inset:0;background-size:cover; background-position:center;opacity:.22} .ppx-est::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(9,20,32,.90),rgba(9,20,32,.94))} .ppx-est .ppx-est-wrap{position:relative;z-index:3;width:100%;max-width:1250px; margin:0 auto;padding:0 24px} /* ---- heading ---- */ .ppx-est .ppx-est-head{text-align:center;margin-bottom:clamp(32px,4vw,48px)} .ppx-est .ppx-est-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px; font-family:var(--pe-fh);font-weight:700;font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:#fff} .ppx-est .ppx-est-eyebrow::before{content:"";width:24px;height:2px;background:var(--pe-brand)} .ppx-est .ppx-est-head h2{color:#fff;font-size:clamp(26px,3.4vw,42px)} /* ---- card ---- */ .ppx-est .ppx-est-card{border-radius:var(--pe-r-lg);background:#fff} .ppx-est .ppx-est-strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--pe-brand); border-radius:var(--pe-r-lg) var(--pe-r-lg) 0 0;overflow:hidden} .ppx-est .ppx-est-strip li{display:flex;align-items:center;gap:14px;padding:22px 26px; border-right:1px solid rgba(255,255,255,.20);margin:0} .ppx-est .ppx-est-strip li:last-child{border-right:0} .ppx-est .ppx-est-ic{width:42px;height:42px;border-radius:var(--pe-r);flex:none;display:grid; place-items:center;background:rgba(255,255,255,.16);color:#fff;font-size:20px} .ppx-est .ppx-est-strip h5{color:#fff;font-size:15px;line-height:1.45;font-weight:600} .ppx-est .ppx-est-form{padding:clamp(28px,3.5vw,40px)} .ppx-est .ppx-est-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} /* ---- selects ---- */ .ppx-est .ppx-sel{position:relative} .ppx-est .ppx-sel::after{ content:"";position:absolute;right:18px;top:calc(50% - 5px);width:7px;height:7px; border:2px solid var(--pe-muted);border-top:0;border-left:0;transform:rotate(45deg); pointer-events:none; } .ppx-est .ppx-sel select,.ppx-est .ppx-gsel-btn{ width:100%;appearance:none;-webkit-appearance:none;background:#fff;cursor:pointer; border:1px solid var(--pe-line);border-radius:var(--pe-r);padding:15px 40px 15px 16px; font-family:var(--pe-fb);font-weight:500;font-size:15px;color:var(--pe-ink);outline:0; text-align:left;line-height:1.4;transition:.25s var(--pe-ease); } .ppx-est .ppx-sel select:hover,.ppx-est .ppx-gsel-btn:hover{border-color:var(--pe-brand-tint-2)} .ppx-est .ppx-sel select:focus,.ppx-est .ppx-gsel-btn:focus-visible{border-color:var(--pe-brand); box-shadow:0 0 0 3px rgba(15,119,185,.12)} .ppx-est .ppx-est-price{display:flex;align-items:center;justify-content:center; border-radius:var(--pe-r);background:var(--pe-brand-tint);border:1px dashed var(--pe-brand-tint-2)} .ppx-est .ppx-est-price h5{color:var(--pe-brand);font-size:15px;font-weight:700} /* ---- CTA ---- */ .ppx-est .ppx-est-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%; padding:15px 30px;border:0;border-radius:var(--pe-r);cursor:pointer; font-family:var(--pe-fh);font-weight:700;font-size:15px;text-decoration:none; background:var(--pe-brand);color:#fff;transition:.3s var(--pe-ease); } .ppx-est .ppx-est-btn:hover,.ppx-est .ppx-est-btn:focus-visible{background:var(--pe-ink);color:#fff} .ppx-est .ppx-est-btn:focus-visible{outline:3px solid var(--pe-brand-tint-2);outline-offset:3px} .ppx-est .ppx-est-btn i{transition:transform .3s var(--pe-ease)} .ppx-est .ppx-est-btn:hover i{transform:translateX(3px)} .ppx-est .ppx-est-note{margin:24px 0 0;text-align:center;color:var(--pe-muted);font-size:14.5px} /* ---- grid select: "No.Of Cameras" as 4 columns of 8 ---- The native