*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#111c2a;background:#fff;line-height:1.55}.container{width:min(1180px,calc(100% - 40px));margin:auto}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:10px;top:10px;z-index:999;background:#fff;padding:10px}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid #e6ebf1;backdrop-filter:blur(12px)}.header-inner{min-height:78px;display:flex;align-items:center;gap:28px}.logo-wrap{display:block;width:245px;max-width:38vw}.logo-wrap img{display:block;width:100%;height:auto}.site-nav{margin-left:auto;display:flex;align-items:center;gap:24px}.site-nav a{font-size:14px;font-weight:800;text-decoration:none;color:#243448}.site-nav a:hover,.site-nav a.active{color:#0869e8}.site-nav .nav-button{background:#0b61d8;color:#fff;padding:11px 15px;border-radius:10px;box-shadow:0 8px 18px rgba(11,97,216,.15)}.nav-toggle{display:none;background:none;border:0}.hero{position:relative;overflow:hidden;padding:80px 0 68px;background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 48%,#e8f1ff 100%);border-bottom:1px solid #dfeaf7}.hero:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;right:-200px;top:-240px;background:radial-gradient(circle,rgba(0,104,232,.12),transparent 68%)}.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:62px;align-items:center}.eyebrow{display:block;font-size:12px;letter-spacing:1.7px;font-weight:950;color:#075ecf;margin-bottom:13px}.eyebrow.blue{color:#0869e8}.eyebrow.light-blue{color:#8fc2ff}.hero h1,.simple-hero h1,.city-hero h1,.search-head h1,.form-hero h1{font-size:clamp(44px,5vw,72px);line-height:.98;letter-spacing:-3px;margin:0 0 22px;color:#0b1725}.hero h1 span,.city-hero h1 span,.search-head h1 span{color:#096be8}.hero-lead{font-size:20px;line-height:1.65;color:#536476;max-width:700px;margin:0 0 28px}.hero-search{background:#fff;border:1px solid #d7e2ef;border-radius:18px;padding:20px;box-shadow:0 20px 50px rgba(21,55,91,.12)}.hero-search label{display:block;font-weight:900;margin-bottom:10px}.search-input-row{display:flex;gap:10px}.search-input-wrap{position:relative;display:flex;align-items:center;flex:1}.search-input-wrap .pin{position:absolute;left:15px;color:#0869e8;font-weight:900}.search-input-wrap input{width:100%;border:1px solid #cbd7e4;border-radius:11px;padding:15px 15px 15px 41px;font-size:16px;outline:none;background:#fff}.search-input-wrap input:focus{border-color:#0869e8;box-shadow:0 0 0 3px rgba(8,105,232,.12)}button,.btn{border:0;border-radius:11px;padding:14px 19px;font-weight:900;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:.18s ease}.hero-search button,.results-search button{background:#0869e8;color:#fff;padding-inline:22px}.hero-search button:hover,.results-search button:hover,.btn.primary:hover{background:#0558c5;transform:translateY(-1px)}.search-help{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;font-size:12px;color:#718295}.search-help a{color:#245985;text-decoration:none;background:#f2f6fa;border-radius:999px;padding:5px 9px;font-weight:800}.trust-row{display:flex;gap:34px;margin-top:25px}.trust-row div{display:flex;flex-direction:column}.trust-row strong{font-size:23px;color:#0b61d8}.trust-row span{font-size:12px;color:#65778a;font-weight:700}.hero-side{background:#0d1a29;border-radius:26px;padding:28px;color:#fff;box-shadow:0 30px 60px rgba(9,31,53,.18)}.hose-illustration{height:92px;display:flex;align-items:center}.hose-line{height:30px;flex:1;background:repeating-linear-gradient(90deg,#111 0 17px,#172f4a 17px 26px);border:4px solid #070c11}.fitting{width:70px;height:54px;background:linear-gradient(90deg,#6e7c87,#e3e9ed 45%,#7a8790);border:4px solid #3f4d57;border-radius:12px 4px 4px 12px}.fitting.right{border-radius:4px 12px 12px 4px}.hero-side-content{border-top:1px solid rgba(255,255,255,.12);padding-top:22px}.mini-kicker{font-size:11px;letter-spacing:1.6px;color:#86bfff;font-weight:950}.hero-side h2{font-size:31px;line-height:1.05;margin:8px 0 20px}.need-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.need-grid a{display:flex;flex-direction:column;background:#14283c;color:#fff;text-decoration:none;padding:14px;border:1px solid #203c57;border-radius:12px}.need-grid a:hover{border-color:#438ee6;background:#17314a}.need-grid b{font-size:14px}.need-grid small{color:#aebdcb;margin-top:4px}.quick-strip{background:#0b61d8;color:#fff}.quick-strip-grid{display:grid;grid-template-columns:repeat(3,1fr)}.quick-strip-grid>div{padding:22px 28px;display:grid;grid-template-columns:38px 1fr;column-gap:12px;border-right:1px solid rgba(255,255,255,.18)}.quick-strip-grid span{grid-row:1/3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b61d8;font-weight:950}.quick-strip-grid b{font-size:15px}.quick-strip-grid small{color:#cfe3ff}.section{padding:82px 0}.section.compact{padding:42px 0}.section.light{background:#f5f8fb}.section-heading{margin-bottom:34px}.section-heading.centered{text-align:center;max-width:780px;margin-left:auto;margin-right:auto}.section-heading h2,.provider-cta h2{font-size:clamp(34px,4vw,50px);line-height:1.05;letter-spacing:-1.8px;margin:0 0 12px}.section-heading p{color:#607184;font-size:17px}.split-heading{display:flex;justify-content:space-between;align-items:end;gap:30px}.need-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.need-card{border:1px solid #dce5ee;border-radius:18px;padding:25px;color:#152538;text-decoration:none;background:#fff;box-shadow:0 12px 30px rgba(25,55,84,.05);transition:.2s}.need-card:hover{transform:translateY(-4px);border-color:#8ab9ee;box-shadow:0 18px 38px rgba(25,55,84,.10)}.need-card .icon{font-size:30px;display:block}.need-card h3{font-size:20px;margin:15px 0 8px}.need-card p{color:#667689;min-height:82px}.need-card b{color:#096be8;font-size:13px}.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.city-grid a{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;border:1px solid #dde6ef;background:#fff;padding:16px 18px;border-radius:12px;text-decoration:none;color:#162638}.city-grid a:hover{border-color:#8cb9ec}.city-grid b{font-size:16px}.city-grid span{font-size:12px;color:#738497}.city-grid em{grid-row:1/3;grid-column:2;align-self:center;color:#0870f3;font-size:20px;font-style:normal}.text-link{font-weight:900;color:#0869e8;text-decoration:none}.provider-cta{background:linear-gradient(135deg,#061a33,#0b4aa8);color:#fff}.provider-cta-inner{display:grid;grid-template-columns:1.5fr .5fr;gap:55px;align-items:center}.provider-cta h2{color:#fff;margin-top:0}.provider-cta p{color:#cbdcf0;font-size:17px;max-width:700px}.cta-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.btn.white{background:#fff;color:#0b4aa8}.btn.outline-white{color:#fff;border:1px solid rgba(255,255,255,.5);background:transparent}.claim-card{background:#fff;color:#152538;border-radius:20px;padding:25px;box-shadow:0 22px 48px rgba(0,0,0,.2)}.claim-card>span{font-size:11px;font-weight:950;color:#0b61d8;letter-spacing:1.5px}.claim-card strong{font-size:48px;display:block;line-height:1;margin:12px 0}.claim-card ul{padding-left:20px;color:#596b7e}.disclosure{padding:22px;border:1px solid #dde5ed;border-radius:14px;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center}.disclosure p{margin:0;color:#647487}.search-head,.city-hero,.simple-hero{padding:62px 0 50px;background:linear-gradient(135deg,#07192f,#0c345f);color:#fff}.search-head h1,.city-hero h1,.simple-hero h1{color:#fff;font-size:clamp(38px,4vw,58px)}.simple-hero p,.city-hero p{font-size:18px;color:#c9d9e9;max-width:780px}.simple-hero .results-search,.city-search{max-width:760px;margin-top:25px}.simple-hero.dark-blue{background:linear-gradient(135deg,#061528,#0b61d8)}.results-search{display:flex;gap:10px;max-width:850px}.results-search .search-input-wrap{background:#fff;border-radius:11px}.search-section{background:#f6f8fb}.results-layout{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}.filters{position:sticky;top:96px}.filter-card,.filter-note{background:#fff;border:1px solid #dce4ec;border-radius:15px;padding:20px;margin-bottom:14px}.filter-card h3{margin:0 0 14px}.check-row{display:flex;gap:10px;padding:9px 0;font-weight:750;font-size:14px}.check-row input{width:18px;height:18px;accent-color:#0b61d8}.btn.primary{background:#0b61d8;color:#fff}.btn.secondary{background:#eaf2fc;color:#0a58ba}.btn.ghost{background:#fff;color:#2f4b68;border:1px solid #ccd9e5}.btn.big{padding:15px 20px}.btn.full{display:flex;width:100%}.clear-link{display:block;text-align:center;color:#688099;font-size:12px;margin-top:10px}.filter-note b{color:#0b61d8}.filter-note p{font-size:13px;color:#67788a}.filter-note a{font-size:13px;font-weight:900;color:#0b61d8;text-decoration:none}.results-meta{display:flex;justify-content:space-between;gap:20px;margin-bottom:15px;color:#536678;font-size:13px}.results-meta b{color:#0d1c2c;font-size:18px}.provider-card{background:#fff;border:1px solid #dbe4ed;border-radius:18px;padding:23px;margin-bottom:14px;box-shadow:0 10px 25px rgba(23,47,72,.05)}.provider-card-top{display:flex;gap:17px}.provider-logo-box,.profile-logo{width:66px;height:66px;flex:0 0 66px;border-radius:14px;border:1px solid #dbe5ee;background:#fff;display:grid;place-items:center;overflow:hidden}.provider-logo-box img,.profile-logo img{max-width:44px;max-height:44px}.provider-initials,.profile-logo span{width:100%;height:100%;display:grid;place-items:center;background:#edf5ff;color:#096be8;font-weight:950;font-size:18px}.provider-heading{min-width:0}.provider-heading h2{font-size:23px;margin:7px 0 3px;line-height:1.1}.provider-heading h2 a{color:#112235;text-decoration:none}.location-line{margin:0;color:#627487;font-size:14px}.badge-row{display:flex;flex-wrap:wrap;gap:6px}.badge{font-size:10px;padding:5px 7px;border-radius:999px;font-weight:900;text-transform:uppercase;letter-spacing:.35px;background:#edf2f6;color:#5c6d7d}.badge.verified{background:#e7f6ef;color:#16724b}.badge.free{background:#eef3f7;color:#56697b}.badge.mobile{background:#e7f1ff;color:#0b61d8}.badge.emergency{background:#fff1e6;color:#ae5000}.badge.shop{background:#eef5ed;color:#3d7440}.provider-summary{color:#596b7d;margin:18px 0 13px}.service-chips{display:flex;gap:6px;flex-wrap:wrap}.service-chips span{padding:6px 9px;border-radius:8px;background:#f3f6f9;color:#4e6275;font-size:11px;font-weight:800}.provider-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:17px;border-top:1px solid #e7edf3}.empty-state{background:#fff;border:1px dashed #bdccda;border-radius:18px;padding:42px;text-align:center;margin-bottom:18px}.empty-state>span{font-size:34px;color:#0b61d8}.empty-state h2,.empty-state h1{margin:8px 0}.empty-state p{color:#66788b}.profile-hero{padding:45px 0;background:#f1f6fc;border-bottom:1px solid #dce6f0}.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:#6c7d8d;margin-bottom:25px}.breadcrumbs a{color:#0b61d8;text-decoration:none}.profile-grid{display:grid;grid-template-columns:1fr 300px;gap:30px}.profile-title-row{display:flex;gap:18px}.profile-logo{width:82px;height:82px;flex-basis:82px}.profile-logo img{max-width:58px;max-height:58px}.profile-main h1{font-size:clamp(34px,4vw,52px);letter-spacing:-1.5px;line-height:1;margin:8px 0}.profile-title-row p{margin:0;color:#617386}.profile-summary{font-size:17px;color:#53677a;max-width:780px}.profile-actions{display:flex;gap:9px;flex-wrap:wrap}.profile-claim{background:#0a2e5b;color:#fff;border-radius:17px;padding:22px}.profile-claim>span{font-size:10px;color:#8fc2ff;letter-spacing:1.4px;font-weight:950}.profile-claim h2{font-size:25px;margin:8px 0}.profile-claim p{color:#c3d5e7;font-size:14px}.profile-content-grid{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start}.content-card{background:#fff;border:1px solid #dce5ed;border-radius:17px;padding:25px;margin-bottom:17px}.content-card h2{font-size:27px;margin-top:0}.content-card.wide{max-width:850px}.content-card.sticky{position:sticky;top:96px}.capability-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.capability-grid div{padding:12px;border:1px solid #e2e8ee;border-radius:10px;font-weight:750}.capability-grid span{color:#0b61d8;margin-right:8px}.details-list{margin:0}.details-list>div{display:grid;grid-template-columns:130px 1fr;padding:13px 0;border-bottom:1px solid #e5ebf0}.details-list dt{font-weight:900}.details-list dd{margin:0;color:#5a6c7e}.details-list a{color:#0b61d8}.small-copy{font-size:13px;color:#67798a}.narrow-results{max-width:900px}.seo-copy{margin-top:45px;border-top:1px solid #dce4ec;padding-top:35px}.seo-copy p,.seo-copy li{color:#5f7182}.browse-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.browse-groups section{border:1px solid #dce5ed;border-radius:16px;padding:20px}.browse-groups h2{margin-top:0;color:#0b61d8}.browse-list{display:grid;gap:6px}.browse-list a{display:flex;justify-content:space-between;padding:10px;border-radius:9px;text-decoration:none;color:#213448}.browse-list a:hover{background:#f0f6fd}.browse-list span{color:#708296;font-size:12px}.form-hero{padding:65px 0;background:#f2f7fd}.form-container{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:start}.form-hero p{color:#5a6e82;font-size:17px}.form-benefits{padding-left:20px;color:#4f6479}.form-card{background:#fff;border:1px solid #d9e4ee;border-radius:20px;padding:26px;box-shadow:0 18px 45px rgba(22,56,91,.08)}.form-card h2{font-size:18px;margin:18px 0 12px}.form-card h2:first-child{margin-top:0}label{display:block;font-size:13px;font-weight:850;color:#34495f;margin-bottom:13px}input,textarea{font:inherit}.form-card input,.form-card textarea{display:block;width:100%;margin-top:6px;border:1px solid #cbd7e3;border-radius:9px;padding:11px;outline:none}.form-card input:focus,.form-card textarea:focus{border-color:#0b61d8;box-shadow:0 0 0 3px rgba(11,97,216,.1)}.form-grid{display:grid;gap:12px}.form-grid.two{grid-template-columns:1fr 1fr}.form-grid.three{grid-template-columns:1fr 90px 110px}.hp{position:absolute!important;left:-9999px!important}.success-box{padding:18px;background:#ecf9f1;border:1px solid #bce8ce;border-radius:12px;color:#235d3d}.error-box{padding:12px;background:#fff0ef;border:1px solid #f0c6c3;border-radius:10px;color:#9b2f29;margin-bottom:12px}.selected-listing{display:flex;gap:10px;padding:13px;background:#edf5ff;border-radius:10px;margin-bottom:15px}.selected-listing span{display:flex;flex-direction:column}.selected-listing small{color:#67809a}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.price-card{border:1px solid #dce5ed;border-radius:18px;padding:26px;background:#fff}.price-card.featured{border:2px solid #0b61d8;box-shadow:0 18px 42px rgba(11,97,216,.12)}.price-card>span{font-size:10px;letter-spacing:1.3px;color:#0b61d8;font-weight:950}.price-card h3{font-size:25px;margin:9px 0}.price-card strong{font-size:35px}.price-card p,.price-card li{color:#637487}.price-card ul{padding-left:20px;min-height:145px}.steps-large{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px}.steps-large>div{border-top:4px solid #0b61d8;padding:20px 10px}.steps-large span{font-size:13px;font-weight:950;color:#0b61d8}.steps-large h2{font-size:24px;line-height:1.1}.steps-large p{color:#627487}.policy-grid{display:grid;grid-template-columns:1fr 360px;gap:25px;align-items:start}.site-footer{background:#071522;color:#b4c2cf;padding:50px 0 20px}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:38px}.footer-grid>div{display:flex;flex-direction:column;gap:8px}.footer-logo{display:block;width:230px;background:#fff;border-radius:10px;padding:8px;margin-bottom:8px}.footer-logo img{width:100%;display:block}.footer-grid p{max-width:380px}.footer-grid h3{color:#fff;font-size:14px;margin:0 0 8px}.footer-grid a{color:#b4c2cf;text-decoration:none;font-size:13px}.footer-grid a:hover{color:#fff}.footer-bottom{margin-top:35px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#8395a6}@media(max-width:980px){.site-nav{display:none;position:absolute;left:20px;right:20px;top:70px;background:#fff;border:1px solid #dfe6ed;border-radius:14px;padding:15px;box-shadow:0 20px 45px rgba(0,0,0,.15);flex-direction:column;align-items:stretch}.site-nav.open{display:flex}.nav-toggle{display:flex;margin-left:auto;align-items:center;gap:3px;flex-direction:column}.nav-toggle span{width:23px;height:2px;background:#19334e}.nav-toggle b{font-size:9px;margin-top:2px}.hero-grid,.provider-cta-inner,.form-container,.profile-grid,.profile-content-grid,.policy-grid{grid-template-columns:1fr}.hero-side{max-width:650px}.need-cards{grid-template-columns:1fr 1fr}.city-grid{grid-template-columns:1fr 1fr}.results-layout{grid-template-columns:1fr}.filters{position:static}.filter-card form{display:grid;grid-template-columns:repeat(2,1fr);gap:3px 15px}.filter-card .btn,.filter-card .clear-link{grid-column:1/-1}.browse-groups{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}.price-card ul{min-height:auto}.steps-large{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.content-card.sticky{position:static}}@media(max-width:650px){.container{width:min(100% - 28px,1180px)}.header-inner{min-height:68px}.logo-wrap{width:205px;max-width:66vw}.hero{padding:55px 0 45px}.hero h1,.simple-hero h1,.city-hero h1,.search-head h1,.form-hero h1{letter-spacing:-1.8px}.hero-side{display:none}.hero-lead{font-size:17px}.search-input-row,.results-search{flex-direction:column}.trust-row{gap:17px}.quick-strip-grid{grid-template-columns:1fr}.quick-strip-grid>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.17);padding:15px}.section{padding:58px 0}.need-cards,.city-grid{grid-template-columns:1fr}.need-card p{min-height:auto}.split-heading{align-items:flex-start;flex-direction:column}.disclosure{grid-template-columns:1fr;gap:7px}.provider-card{padding:18px}.provider-card-top{align-items:flex-start}.provider-logo-box{width:54px;height:54px;flex-basis:54px}.provider-heading h2{font-size:20px}.provider-actions{display:grid;grid-template-columns:1fr 1fr}.provider-actions .primary{grid-column:1/-1}.profile-title-row{align-items:flex-start}.profile-logo{width:62px;height:62px;flex-basis:62px}.profile-actions{display:grid}.capability-grid{grid-template-columns:1fr}.details-list>div{grid-template-columns:1fr;gap:3px}.form-grid.two,.form-grid.three{grid-template-columns:1fr}.results-meta{flex-direction:column;gap:4px}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.need-grid{grid-template-columns:1fr 1fr}}
/* V3 national directory + premium listing system */
.badge.premium{background:linear-gradient(135deg,#eaf3ff,#d9eaff);color:#064fae;border:1px solid #9fc5ef}
.badge.featured{background:linear-gradient(135deg,#fff4c7,#ffe289);color:#714900;border:1px solid #e7bd45}
.badge.national{background:#eef0ff;color:#5145a8}
.premium-card{position:relative;border:2px solid #76aeea;box-shadow:0 18px 44px rgba(11,97,216,.13);overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)}
.premium-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#064da9,#0f7cff,#6db7ff)}
.premium-ribbon{position:absolute;right:18px;top:18px;background:linear-gradient(135deg,#082d60,#0b61d8);color:#fff;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:950;letter-spacing:.8px;box-shadow:0 7px 18px rgba(11,97,216,.2)}
.premium-ribbon span{color:#ffd36e}.premium-logo{box-shadow:0 0 0 3px #dbeaff}.premium-benefit-line{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding:11px 13px;border-radius:10px;background:#edf6ff;color:#255d97;font-size:11px;font-weight:850}
.upgrade-pulse{margin-top:16px;padding:12px 14px;border:1px solid #9fc5ef;border-radius:11px;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;text-decoration:none;background:#edf6ff;color:#0b4f9f;animation:premiumPulse 1.8s ease-in-out infinite}
.upgrade-pulse span{font-size:9px;letter-spacing:.8px;font-weight:900}.upgrade-pulse b{font-size:12px}.upgrade-pulse em{font-style:normal;font-size:11px;font-weight:900}
@keyframes premiumPulse{0%,100%{box-shadow:0 0 0 0 rgba(11,97,216,.05);transform:translateY(0)}50%{box-shadow:0 0 0 5px rgba(11,97,216,.10);transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.upgrade-pulse{animation:none}}
.premium-section-label,.standard-section-label{display:flex;align-items:center;gap:11px;margin:18px 0 12px;padding:12px 14px;border-radius:11px}
.premium-section-label{background:linear-gradient(90deg,#092d5e,#0b61d8);color:#fff}.premium-section-label>span{color:#ffd56e;font-size:21px}.premium-section-label div{display:flex;flex-direction:column}.premium-section-label small{color:#cfe3ff}
.standard-section-label{background:#edf2f6;color:#405469;justify-content:space-between;font-size:12px}.standard-section-label b{letter-spacing:.8px}
.premium-home{background:#fff}.premium-showcase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.premium-showcase-grid .provider-card{margin:0}
.upgrade-band{background:linear-gradient(135deg,#07192f,#0b61d8);color:#fff}.upgrade-band-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}.upgrade-band h2{font-size:clamp(34px,4vw,50px);line-height:1.05;margin:0 0 10px;letter-spacing:-1.7px}.upgrade-band p{color:#c6daef;max-width:760px}.premium-btn{background:linear-gradient(135deg,#ffd56a,#ffb728);color:#2b2107}.premium-hero span{color:#8fc2ff}.pricing-grid.four{grid-template-columns:repeat(4,1fr)}.price-card strong small{font-size:13px;color:#697a8a}.premium-price{position:relative}.premium-price:before{content:"BEST VALUE";position:absolute;top:-12px;right:18px;background:#0b61d8;color:#fff;border-radius:999px;padding:5px 9px;font-size:9px;font-weight:950;letter-spacing:1px}.annual{display:block;text-align:center;margin-top:8px;color:#75869a}.comparison-table{border:1px solid #d9e3ec;border-radius:16px;overflow:hidden;background:#fff}.comparison-row{display:grid;grid-template-columns:2fr repeat(3,1fr);border-bottom:1px solid #e4eaf0}.comparison-row:last-child{border-bottom:0}.comparison-row>*{padding:13px 16px;border-right:1px solid #e4eaf0}.comparison-row>*:last-child{border-right:0}.comparison-row.head{background:#0b2c55;color:#fff}.compare-wrap{max-width:950px}.upgrade-form-wrap{align-items:center}
.state-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.state-grid a{display:grid;grid-template-columns:42px 1fr auto;gap:11px;align-items:center;padding:14px;border:1px solid #dce5ed;border-radius:12px;text-decoration:none;color:#22364b;background:#fff}.state-grid a:hover{border-color:#83b2e8;transform:translateY(-1px)}.state-grid a.no-coverage{opacity:.68;background:#f7f9fb}.state-abbr{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:#e8f2fd;color:#0b61d8;font-weight:950}.state-grid b,.state-grid small{display:block}.state-grid small{color:#748597;margin-top:2px}.state-grid em{font-style:normal;color:#0b61d8;font-size:20px}
.profile-premium{background:linear-gradient(135deg,#eef6ff,#dfefff)}.profile-premium .profile-claim{background:linear-gradient(135deg,#062858,#0b61d8)}.profile-premium .profile-logo{box-shadow:0 0 0 4px #cfe4fb}
@media(max-width:1050px){.pricing-grid.four{grid-template-columns:1fr 1fr}.state-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.premium-showcase-grid{grid-template-columns:1fr}.upgrade-band-inner{align-items:flex-start;flex-direction:column}.state-grid{grid-template-columns:1fr 1fr}.premium-ribbon{position:static;display:inline-flex;margin-bottom:12px}.upgrade-pulse{grid-template-columns:1fr auto}.upgrade-pulse span{grid-column:1/-1}.comparison-row{grid-template-columns:1.5fr repeat(3,.7fr)}.comparison-row>*{padding:10px 7px;font-size:11px}}
@media(max-width:520px){.pricing-grid.four,.state-grid{grid-template-columns:1fr}.comparison-table{overflow-x:auto}.comparison-row{min-width:560px}}
/* =========================================================
V3.1 BADGE BRAND SYSTEM
Palette pulled from the supplied Find My Hose badge:
Black / gunmetal / royal blue / bright steel blue / silver / white
========================================================= */
:root{
--fmh-black:#05080d;
--fmh-ink:#0b1119;
--fmh-navy:#0b1f3c;
--fmh-blue-deep:#123b82;
--fmh-blue:#1e5bb0;
--fmh-blue-bright:#397ed0;
--fmh-blue-pale:#eaf3ff;
--fmh-silver-dark:#7c8792;
--fmh-silver:#c3cad1;
--fmh-silver-light:#edf1f4;
--fmh-white:#ffffff;
}
body{color:var(--fmh-ink)}
.site-header{
background:linear-gradient(180deg,#070b11 0%,#0b1119 100%);
border-bottom:1px solid #22354b;
box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.header-inner{min-height:86px}
.brand-lockup{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:260px}
.brand-badge{width:68px;height:68px;display:grid;place-items:center;background:#fff;border-radius:13px;padding:3px;box-shadow:0 0 0 1px #5c6875,0 6px 18px rgba(0,0,0,.35);overflow:hidden}
.brand-badge img{width:100%;height:100%;object-fit:contain;display:block;border-radius:10px}
.brand-words{display:flex;flex-direction:column;line-height:1}
.brand-words b{font-size:21px;letter-spacing:-.7px;color:#f7f9fb}
.brand-words small{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#72a8e8;font-weight:900;margin-top:7px}
.site-nav a{color:#d9e0e6}
.site-nav a:hover,.site-nav a.active{color:#69a6ed}
.site-nav .nav-button{background:linear-gradient(135deg,var(--fmh-blue-deep),var(--fmh-blue-bright));color:#fff;border:1px solid #4f8ed3;box-shadow:0 8px 20px rgba(9,63,137,.28)}
.nav-toggle span{background:#dce5ed}.nav-toggle b{color:#dce5ed}
.hero{
background:
radial-gradient(circle at 78% 18%,rgba(57,126,208,.20),transparent 26%),
linear-gradient(135deg,#f8fafc 0%,#edf2f7 48%,#e7eef7 100%);
border-bottom:1px solid #cbd5df;
}
.hero:before{background:radial-gradient(circle,rgba(26,83,167,.12),transparent 68%)}
.eyebrow,.eyebrow.blue{color:var(--fmh-blue)}
.hero h1 span,.city-hero h1 span,.search-head h1 span{color:var(--fmh-blue)}
.hero-search{border-color:#c7d0d8;box-shadow:0 20px 50px rgba(13,35,62,.14)}
.search-input-wrap .pin{color:var(--fmh-blue)}
.search-input-wrap input:focus{border-color:var(--fmh-blue);box-shadow:0 0 0 3px rgba(30,91,176,.13)}
.hero-search button,.results-search button,.btn.primary{background:linear-gradient(135deg,var(--fmh-blue-deep),var(--fmh-blue-bright));border:1px solid #2f6fbd}
.hero-search button:hover,.results-search button:hover,.btn.primary:hover{background:linear-gradient(135deg,#0f3475,#246ac0)}
.search-help a{color:#294e79;background:#edf2f7;border:1px solid #d5dde5}
.trust-row strong{color:var(--fmh-blue)}
.hero-side{
position:relative;
background:
linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,0)),
linear-gradient(145deg,#080d14,#101b28);
border:1px solid #394857;
box-shadow:0 30px 65px rgba(5,13,23,.23),inset 0 0 0 1px rgba(255,255,255,.025);
overflow:hidden;
}
.hero-side:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 35%,rgba(170,190,210,.07) 48%,transparent 60%);pointer-events:none}
.hero-logo-stage{position:relative;min-height:255px;display:grid;place-items:center;padding:3px 20px 18px}
.hero-logo-glow{position:absolute;width:280px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(47,116,201,.28),transparent 67%);filter:blur(6px)}
.hero-badge-logo{position:relative;width:min(245px,78%);aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:22px;padding:5px;border:1px solid #9ea8b2;box-shadow:0 22px 40px rgba(0,0,0,.38),0 0 0 5px rgba(43,104,180,.16)}
.hero-brand-tag{position:absolute;bottom:0;background:#0a111b;color:#9ec7f3;border:1px solid #2f5988;border-radius:999px;padding:7px 12px;font-size:9px;font-weight:950;letter-spacing:1.4px}
.hero-side-content{border-top:1px solid rgba(195,202,209,.18)}
.mini-kicker{color:#78afea}
.need-grid a{background:linear-gradient(145deg,#111e2b,#14283d);border-color:#294967}
.need-grid a:hover{border-color:#5a94d5;background:#17314a}
.quick-strip{background:linear-gradient(90deg,#0d326e,#1e5bb0 55%,#2c72c5)}
.quick-strip-grid span{color:#164e96;background:#f4f7fa;border:1px solid #cbd4dc}
.quick-strip-grid small{color:#d8e7f8}
.text-link,.filter-note b,.filter-note a,.details-list a,.breadcrumbs a,.need-card b,.browse-groups h2{color:var(--fmh-blue)}
.need-card:hover,.city-grid a:hover{border-color:#72a7df}
.need-card{box-shadow:0 12px 30px rgba(12,31,53,.055)}
.need-card .icon{filter:saturate(.8)}
.provider-cta,.upgrade-band{background:linear-gradient(135deg,#050b13 0%,#0d2d61 48%,#1d5bae 100%)}
.claim-card{border:1px solid #aeb7c1}
.claim-card>span{color:var(--fmh-blue)}
.disclosure{border-color:#cfd7df;background:linear-gradient(180deg,#fff,#f8fafc)}
.search-head,.city-hero,.simple-hero{
background:
radial-gradient(circle at 86% 18%,rgba(75,139,212,.18),transparent 30%),
linear-gradient(135deg,#050a11,#0b1f3c 58%,#123b82);
border-bottom:1px solid #334e6c;
}
.simple-hero.dark-blue{background:linear-gradient(135deg,#050a11,#0d326e,#1e5bb0)}
.filter-card,.filter-note,.provider-card,.content-card,.form-card,.price-card{border-color:#d4dce4}
.btn.secondary{background:#e7f0fb;color:#174f94;border:1px solid #c8ddf4}
.btn.ghost{background:#fff;color:#304a65;border-color:#bdc9d5}
.badge.premium{background:linear-gradient(135deg,#e8f2fd,#d3e6fa);color:#104b91;border-color:#8cb6e4}
.badge.featured{background:linear-gradient(135deg,#e8edf2,#cbd3db);color:#222c35;border-color:#9ea9b4}
.badge.mobile{background:#e9f2fc;color:#15589f}
.badge.national{background:#e9edf8;color:#314e84}
.premium-card{
border:2px solid #7d9fca;
box-shadow:0 18px 44px rgba(15,57,112,.13);
background:linear-gradient(180deg,#fff 0%,#f3f7fb 100%);
}
.premium-card:before{background:linear-gradient(90deg,#89939d,#d8dde2 18%,#1c5caf 52%,#76a8e0 82%,#78828c)}
.premium-ribbon{background:linear-gradient(135deg,#101820,#174f94);border:1px solid #7d9fca;color:#f6f8fa}
.premium-ribbon span{color:#a8c8ec}
.premium-logo{box-shadow:0 0 0 3px #d7e4f3}
.premium-benefit-line{background:#eaf1f8;color:#295987;border:1px solid #ceddeb}
.upgrade-pulse{
border-color:#719ed0;
background:linear-gradient(90deg,#eaf2fb,#f5f8fb,#eaf2fb);
color:#123f77;
}
@keyframes premiumPulse{0%,100%{box-shadow:0 0 0 0 rgba(41,102,177,.04);transform:translateY(0)}50%{box-shadow:0 0 0 5px rgba(41,102,177,.11);transform:translateY(-1px)}}
.premium-section-label{background:linear-gradient(90deg,#090f17,#123b82 58%,#1f63b5);border:1px solid #537ca9}
.premium-section-label>span{color:#b9d3ef}
.standard-section-label{background:linear-gradient(180deg,#eef1f4,#e5e9ed);color:#33485d;border:1px solid #d2d8de}
.premium-hero{position:relative;overflow:hidden}
.premium-hero-grid{display:grid;grid-template-columns:1fr 320px;gap:55px;align-items:center}
.premium-hero-logo{display:grid;place-items:center}
.premium-hero-logo img{width:250px;max-width:100%;background:#fff;border-radius:24px;padding:5px;border:1px solid #aeb8c2;box-shadow:0 25px 52px rgba(0,0,0,.38),0 0 0 6px rgba(68,132,207,.12)}
.price-card.featured{border-color:#315f94;box-shadow:0 18px 42px rgba(14,58,113,.13)}
.premium-price:before{background:linear-gradient(135deg,#070d15,#1f5fac);border:1px solid #6e9dd1}
.comparison-row.head{background:linear-gradient(90deg,#070e16,#123b82)}
.state-abbr{background:linear-gradient(145deg,#eaf1f8,#dce7f3);color:#164e90;border:1px solid #c4d4e5}
.state-grid a:hover{border-color:#7ea9d8}
.profile-premium{background:linear-gradient(135deg,#edf3f8,#dfe9f4)}
.profile-premium .profile-claim{background:linear-gradient(135deg,#080f18,#123b82 62%,#205fae)}
.profile-premium .profile-logo{box-shadow:0 0 0 4px #c9d8e8}
.site-footer{
background:
linear-gradient(180deg,#080d13,#030609);
color:#aeb9c3;
border-top:4px solid #1c5caf;
}
.footer-brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-bottom:13px}
.footer-badge{width:88px;height:88px;display:grid;place-items:center;background:#fff;border-radius:15px;padding:4px;overflow:hidden;border:1px solid #8995a0}
.footer-badge img{width:100%;height:100%;object-fit:contain;display:block;border-radius:11px}
.footer-brand>span:last-child{display:flex;flex-direction:column}
.footer-brand b{color:#f3f6f8;font-size:22px;letter-spacing:-.7px}
.footer-brand small{color:#70a5df;text-transform:uppercase;font-size:9px;letter-spacing:1.5px;font-weight:900;margin-top:4px}
.footer-grid h3{color:#edf2f5}
.footer-grid a:hover{color:#86b5e8}
.footer-bottom{color:#7e8c98}
@media(max-width:980px){
.brand-lockup{min-width:0}
.brand-words small{display:none}
.site-nav{background:#080e16;border-color:#31465d}
.premium-hero-grid{grid-template-columns:1fr 220px}
}
@media(max-width:650px){
.header-inner{min-height:74px}
.brand-badge{width:54px;height:54px}
.brand-words b{font-size:17px}
.hero-logo-stage{min-height:220px}
.hero-badge-logo{width:205px}
.premium-hero-grid{grid-template-columns:1fr}
.premium-hero-logo{display:none}
.footer-badge{width:70px;height:70px}
}
/* =====================================================
V3.2 — PREMIUM MUST LOOK PREMIUM
===================================================== */
.free-card{
border:1px solid #d6dde4;
background:#fff;
box-shadow:0 7px 17px rgba(17,35,54,.035);
}
.free-card .provider-heading h2{font-size:21px}
.free-card .provider-summary{font-size:14px}
.free-card .provider-logo-box{filter:saturate(.78)}
.free-card .service-chips span{background:#f3f5f7;color:#657585}
.premium-card-v2{
border:0;
padding:0;
background:#07101a;
border-radius:21px;
box-shadow:
0 24px 58px rgba(5,19,38,.22),
0 0 0 2px #7397bd,
0 0 0 5px rgba(38,100,177,.12);
overflow:hidden;
}
.premium-card-v2:before{display:none}
.premium-topbar{
display:flex;align-items:center;justify-content:space-between;gap:15px;
padding:11px 18px;
background:linear-gradient(90deg,#05090e 0%,#123b82 52%,#2b72c1 100%);
color:#fff;border-bottom:1px solid rgba(255,255,255,.18)
}
.premium-topbar>div{display:flex;align-items:center;gap:8px}
.premium-topbar b{font-size:12px;letter-spacing:1.3px}
.premium-star{color:#dfe8f2;font-size:16px;text-shadow:0 0 10px #7ab2ee}
.premium-value{font-size:9px;font-weight:950;letter-spacing:1.2px;color:#d9e9fb;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 9px}
.premium-card-body{
background:
radial-gradient(circle at 88% 4%,rgba(52,117,194,.13),transparent 27%),
linear-gradient(180deg,#fff,#f3f7fb);
padding:25px;
}
.premium-card-v2 .provider-card-top{align-items:center}
.premium-logo-xl{width:84px;height:84px;flex-basis:84px;border-radius:18px;border:2px solid #789bc1;box-shadow:0 0 0 4px #dfeaf5,0 10px 22px rgba(12,47,89,.13)}
.premium-logo-xl img{max-width:60px;max-height:60px}
.premium-card-v2 .provider-heading h2{font-size:27px;letter-spacing:-.7px;margin-top:9px}
.premium-card-v2 .provider-heading h2 a{color:#091a2d}
.premium-card-v2 .provider-summary{font-size:15px;color:#435a70}
.premium-chips span{background:#e5eff9;border:1px solid #c4d8ec;color:#264f7b}
.premium-lead-benefits{
display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:19px 0 2px
}
.premium-lead-benefits>div{
position:relative;padding:13px 12px 13px 48px;border-radius:12px;
background:linear-gradient(145deg,#0a1a2c,#12345c);
color:#fff;border:1px solid #315e8c
}
.premium-benefit-icon{
position:absolute;left:13px;top:13px;width:27px;height:27px;border-radius:8px;
display:grid;place-items:center;background:#dbe9f8;color:#103f76;font-weight:950
}
.premium-lead-benefits b,.premium-lead-benefits small{display:block}
.premium-lead-benefits b{font-size:12px}
.premium-lead-benefits small{color:#b8cee4;font-size:10px;margin-top:3px}
.premium-actions{padding-top:19px;border-top:1px solid #ccd9e5}
.premium-actions .btn.primary{padding-inline:25px;box-shadow:0 10px 20px rgba(14,74,145,.18)}
.upgrade-pulse-v2{
margin:0;border:0;border-top:1px solid #a9c4df;border-radius:0;
padding:11px 17px;
grid-template-columns:auto 1fr auto auto;
background:linear-gradient(90deg,#e7eef5,#f4f8fc,#deebf8);
}
.upgrade-pulse-v2 span{color:#63768a}
.upgrade-pulse-v2 b{color:#183b63}
.upgrade-pulse-v2 strong{
background:#123f76;color:#fff;border-radius:7px;padding:5px 8px;font-size:10px;letter-spacing:.6px
}
.upgrade-pulse-v2 em{color:#174f94}
.service-truck-ad{
display:grid;grid-template-columns:42px 1fr;gap:10px;
padding:16px;border-radius:15px;
background:linear-gradient(145deg,#07111d,#123761);
color:#fff;border:1px solid #315b86;box-shadow:0 12px 24px rgba(4,24,48,.14)
}
.truck-ad-icon{width:42px;height:42px;border-radius:11px;background:#e8f2fc;display:grid;place-items:center;font-size:22px}
.service-truck-ad small,.service-truck-ad b,.service-truck-ad p{display:block}
.service-truck-ad small{font-size:9px;letter-spacing:1.2px;color:#86b5e9;font-weight:950}
.service-truck-ad b{font-size:14px;line-height:1.25;margin:5px 0}
.service-truck-ad p{font-size:11px;color:#b8cade;line-height:1.45;margin:6px 0}
.service-truck-ad a{color:#fff;font-size:11px;font-weight:950}
.service-truck-home-ad{padding:24px 0;background:#e9f1f8;border-top:1px solid #c8d7e5;border-bottom:1px solid #c8d7e5}
.service-truck-home-inner{display:grid;grid-template-columns:60px 1fr auto;gap:18px;align-items:center}
.service-truck-home-icon{width:60px;height:60px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#08101a,#174d88);font-size:29px;box-shadow:0 8px 20px rgba(12,51,95,.16)}
.service-truck-home-inner span{font-size:9px;font-weight:950;letter-spacing:1.4px;color:#1d5796}
.service-truck-home-inner h2{font-size:22px;margin:3px 0 2px;letter-spacing:-.6px}
.service-truck-home-inner p{margin:0;color:#5d7083;font-size:13px}
.premium-lead-section{
padding:78px 0;background:
radial-gradient(circle at 80% 10%,rgba(58,127,207,.15),transparent 28%),
linear-gradient(135deg,#050b12,#0b1f3c 58%,#123b82);
color:#fff
}
.premium-lead-section .section-heading h2{color:#fff}
.premium-lead-section .section-heading p{color:#c8d9ea}
.lead-flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.lead-flow-grid>div{padding:23px;border:1px solid #345a84;border-radius:16px;background:rgba(255,255,255,.045)}
.lead-flow-grid span{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;background:#e9f1f9;color:#123e73;font-weight:950}
.lead-flow-grid b{display:block;font-size:18px;margin:15px 0 6px}
.lead-flow-grid p{color:#bdcfe0;font-size:13px}
.lead-guarantee-strip{display:flex;justify-content:center;gap:18px;align-items:center;margin-top:22px;padding:14px;border:1px solid #527aa7;border-radius:12px;background:#0a1726}
.lead-guarantee-strip b{color:#fff;letter-spacing:.8px}
.lead-guarantee-strip span{color:#9eb9d5;font-size:12px}
@media(max-width:760px){
.premium-topbar{align-items:flex-start;flex-direction:column}
.premium-value{align-self:flex-start}
.premium-lead-benefits{grid-template-columns:1fr}
.upgrade-pulse-v2{grid-template-columns:1fr auto}
.upgrade-pulse-v2 span,.upgrade-pulse-v2 b{grid-column:1/-1}
.service-truck-home-inner{grid-template-columns:52px 1fr}
.service-truck-home-inner .btn{grid-column:1/-1}
.lead-flow-grid{grid-template-columns:1fr}
.lead-guarantee-strip{align-items:flex-start;flex-direction:column;gap:4px}
}
/* V3.3 — ALL SOCIAL CHANNELS */
.social-panel{margin-top:18px;padding:16px;border:1px solid #c7d7e7;border-radius:14px;background:linear-gradient(145deg,#f8fbfe,#eaf2fa)}
.social-panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}
.social-panel-head span{font-size:9px;letter-spacing:1.25px;font-weight:950;color:#1a579b}
.social-panel-head b{font-size:12px;color:#3c536a}
.social-links{display:flex;flex-wrap:wrap;gap:8px}
.social-link{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;text-decoration:none;color:#1a334d;background:#fff;border:1px solid #cbd8e4;font-size:11px;box-shadow:0 3px 8px rgba(17,46,75,.04)}
.social-link>span{min-width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:#102f55;color:#fff;font-size:10px;font-weight:950}
.social-link:hover{border-color:#6c9fd6;transform:translateY(-1px)}
.field-help{display:block;font-weight:500;color:#728399;font-size:10px;margin-top:5px}
@media(max-width:650px){.social-panel-head{align-items:flex-start;flex-direction:column;gap:3px}.social-links{display:grid;grid-template-columns:1fr 1fr}}
/* ==========================================================
V4 MARKETPLACE / LEAD ENGINE
========================================================== */
.nav-help{background:linear-gradient(135deg,#c72a1e,#ef4b2f)!important;border-color:#ef7969!important;box-shadow:0 8px 18px rgba(190,44,32,.25)!important}
.nav-company{font-size:11px!important;color:#9eb8d5!important}
.hero-emergency-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:15px}
.emergency-help{background:linear-gradient(135deg,#a91e15,#eb452d);color:#fff;box-shadow:0 10px 24px rgba(187,45,31,.2)}
.hero-emergency-row>span{font-size:11px;color:#647a91;font-weight:750}
.btn.lead-btn{background:linear-gradient(135deg,#b92318,#e7472d);color:#fff;border:1px solid #ef745e}
.lead-hero{padding:68px 0;background:radial-gradient(circle at 80% 15%,rgba(53,124,208,.18),transparent 28%),linear-gradient(135deg,#050a10,#0b1f3c 60%,#153f78);color:#fff}
.lead-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:45px;align-items:center}
.lead-hero h1{font-size:clamp(46px,6vw,76px);line-height:.95;letter-spacing:-3px;margin:0 0 18px}
.lead-hero h1 span{color:#65a4eb}.lead-hero p{font-size:18px;color:#c5d5e5;max-width:760px}
.lead-hero-points{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.lead-hero-points span{padding:8px 10px;border:1px solid #365d86;border-radius:999px;background:rgba(255,255,255,.04);font-size:11px;font-weight:850;color:#dce9f6}
.lead-trust-card{padding:24px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid #496d95}.lead-trust-card b{font-size:16px}.lead-trust-card p{font-size:14px}.lead-trust-card small{color:#91afd0}
.lead-form-section{background:#f3f6f9}.lead-form-container{max-width:920px}.lead-form{background:#fff;border:1px solid #d7e0e8;border-radius:22px;padding:28px;box-shadow:0 18px 48px rgba(13,39,68,.08)}
.lead-form-step{display:flex;align-items:center;gap:12px;margin:28px 0 13px}.lead-form-step:first-of-type{margin-top:0}.lead-form-step>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#113e75;color:#fff;font-weight:950}.lead-form-step b,.lead-form-step small{display:block}.lead-form-step b{font-size:18px}.lead-form-step small{color:#718397}
.choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.choice-grid label{margin:0;cursor:pointer}.choice-grid input{position:absolute;opacity:0}.choice-grid label>span{min-height:92px;display:flex;flex-direction:column;justify-content:center;padding:13px;border:1px solid #ced9e4;border-radius:13px;background:#f9fbfd}.choice-grid input:checked+span{border:2px solid #1d5fac;background:#eaf3fd;box-shadow:0 0 0 3px rgba(29,95,172,.08)}.choice-grid .urgent input:checked+span{border-color:#d23a28;background:#fff0ed;box-shadow:0 0 0 3px rgba(210,58,40,.07)}.choice-grid b{font-size:13px}.choice-grid small{font-size:10px;color:#718296;margin-top:4px}
.urgency-grid{grid-template-columns:repeat(3,1fr)}.photo-upload{padding:14px;border:1px dashed #aebecd;border-radius:12px;background:#f9fbfd}.photo-upload small{display:block;color:#718397;font-weight:500;margin-top:5px}
.lead-submit{width:100%;padding:17px;font-size:16px;background:linear-gradient(135deg,#a91e15,#eb452d)!important;border-color:#ef745e!important;margin-top:10px}.lead-consent{text-align:center;font-size:10px;color:#8493a2}
.lead-success{text-align:center;background:#fff;border:1px solid #cddbe8;border-radius:22px;padding:55px 35px;box-shadow:0 18px 48px rgba(13,39,68,.08)}.lead-success>span{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#e7f5ee;color:#197149;font-size:28px;font-weight:950}.lead-success h1{font-size:38px;margin:15px 0 5px}.lead-success p{color:#5f7183}.lead-success-actions{display:flex;gap:10px;justify-content:center;margin-top:20px}
.service-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service-hub-grid a{position:relative;padding:24px;border:1px solid #d5e0ea;border-radius:16px;text-decoration:none;color:#13273d;background:#fff;box-shadow:0 10px 26px rgba(16,43,71,.05)}.service-hub-grid a>span{position:absolute;right:18px;top:18px;color:#1d5fac;font-size:22px}.service-hub-grid h2{font-size:21px;margin:0 0 8px}.service-hub-grid p{color:#647589;font-size:13px}
.equipment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.equipment-grid a{display:flex;justify-content:space-between;gap:12px;padding:16px;border:1px solid #d8e1e9;border-radius:12px;text-decoration:none;color:#17304a;background:#fff}.equipment-grid span{color:#1d5fac;font-size:11px;font-weight:900}
.square-pay:after{content:"Secure checkout";font-size:8px;opacity:.75;margin-left:4px}
@media(max-width:900px){.lead-hero-grid{grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr 1fr}.service-hub-grid,.equipment-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.lead-form{padding:18px}.choice-grid,.urgency-grid,.service-hub-grid,.equipment-grid{grid-template-columns:1fr}.lead-success-actions{flex-direction:column}.lead-location-grid{grid-template-columns:1fr!important}.lead-hero h1{letter-spacing:-2px}}
/* ==========================================================
V4.1 — FREE MUST LOOK BASIC / PREMIUM MUST LOOK PREMIUM
========================================================== */
.basic-free-card{
background:#fff;
border:1px solid #d9dee3;
border-radius:11px;
padding:0;
margin-bottom:11px;
box-shadow:none;
overflow:hidden;
}
.basic-free-head{
display:flex;
gap:12px;
align-items:flex-start;
padding:15px 16px 10px;
}
.basic-free-icon{
width:42px;height:42px;flex:0 0 42px;
display:grid;place-items:center;
border-radius:8px;
background:#edf0f3;
color:#6d7781;
border:1px solid #d9dee3;
font-size:13px;font-weight:900;
}
.basic-free-label{
display:inline-block;
font-size:8px;
letter-spacing:1px;
font-weight:950;
color:#7d8791;
margin-bottom:4px;
}
.basic-free-head h2{
font-size:18px;
line-height:1.15;
margin:0 0 3px;
letter-spacing:-.25px;
}
.basic-free-head h2 a{color:#263746;text-decoration:none}
.basic-free-head p{margin:0;color:#7a8793;font-size:12px}
.basic-free-details{
display:flex;flex-direction:column;gap:4px;
padding:0 16px 10px 70px;
color:#65727e;
font-size:11px;
}
.basic-free-details a{color:#415f7a;text-decoration:none}
.basic-free-services{
display:flex;gap:5px;flex-wrap:wrap;
padding:0 16px 11px 70px;
}
.basic-free-services span{
font-size:9px;
color:#65727e;
background:#f3f5f6;
border:1px solid #e1e5e8;
border-radius:6px;
padding:4px 6px;
}
.basic-free-actions{
display:flex;
gap:6px;
padding:9px 16px;
border-top:1px solid #edf0f2;
background:#fafbfc;
}
.btn.basic-call,.btn.basic-details{
padding:8px 12px;
font-size:10px;
border-radius:7px;
box-shadow:none;
}
.btn.basic-call{background:#e9edf1;color:#263c50;border:1px solid #d1d8de}
.btn.basic-details{background:#fff;color:#627486;border:1px solid #d7dde3}
.basic-upgrade-banner{
display:grid;
grid-template-columns:auto auto 1fr;
gap:9px;
align-items:center;
padding:8px 14px;
background:#f1f5f9;
border-top:1px solid #d9e3ed;
text-decoration:none;
color:#234b76;
}
.basic-upgrade-banner span{
font-size:8px;font-weight:900;letter-spacing:.8px;color:#7a8997
}
.basic-upgrade-banner b{
font-size:10px;
background:#183f6d;
color:#fff;
padding:4px 7px;
border-radius:5px;
}
.basic-upgrade-banner em{
font-style:normal;
font-size:9px;
color:#536b81;
text-align:right;
}
/* Premium cards should feel 3x more substantial */
.premium-card-v3{
margin:22px 0 28px;
transform:scale(1.01);
transform-origin:center;
box-shadow:
0 28px 70px rgba(7,28,56,.22),
0 0 0 2px #6e95c1,
0 0 0 6px rgba(28,93,170,.09);
}
.premium-card-v3 .premium-card-body{padding:28px}
.premium-card-v3 .provider-heading h2{font-size:29px}
.premium-card-v3 .provider-summary{font-size:16px;line-height:1.65}
.premium-card-v3 .service-chips span{font-size:11px;padding:7px 10px}
.premium-card-v3 .provider-actions .btn{padding:13px 17px}
/* Free profile page is intentionally plain */
.basic-profile-hero{
padding:48px 0;
background:#f5f7f9;
border-bottom:1px solid #dde2e7;
}
.basic-profile-wrap{max-width:850px}
.basic-profile-label{
display:inline-block;
color:#7c8792;
background:#e9edf0;
border:1px solid #d3d9de;
padding:5px 8px;
border-radius:6px;
font-size:9px;
font-weight:950;
letter-spacing:1px;
}
.basic-profile-hero h1{
font-size:38px;
line-height:1.05;
letter-spacing:-1px;
margin:14px 0 5px;
color:#263746;
}
.basic-profile-location{
color:#75828e;
font-size:14px;
margin-bottom:23px;
}
.basic-profile-info{
max-width:680px;
border:1px solid #dbe0e4;
border-radius:10px;
background:#fff;
}
.basic-profile-info>div{
display:grid;
grid-template-columns:110px 1fr;
gap:15px;
padding:11px 14px;
border-bottom:1px solid #edf0f2;
font-size:12px;
}
.basic-profile-info>div:last-child{border-bottom:0}
.basic-profile-info b{color:#697681}
.basic-profile-info a{color:#345d84}
.basic-profile-services{margin-top:20px}
.basic-profile-services>b{
display:block;
color:#6e7a85;
font-size:11px;
margin-bottom:7px;
}
.basic-profile-services>div{display:flex;gap:5px;flex-wrap:wrap}
.basic-profile-services span{
background:#e9edf0;
color:#66727d;
border-radius:6px;
padding:5px 7px;
font-size:10px;
}
.basic-profile-buttons{display:flex;gap:7px;margin-top:20px}
.basic-upgrade-section{padding:34px 0;background:#fff}
.basic-upgrade-box{
display:grid;
grid-template-columns:1fr auto;
gap:30px;
align-items:center;
border:2px solid #1c5da9;
border-radius:16px;
padding:25px;
background:linear-gradient(135deg,#f6faff,#e9f3ff);
box-shadow:0 12px 30px rgba(25,81,146,.09);
}
.basic-upgrade-box>div>span{
font-size:9px;
color:#1b579b;
letter-spacing:1.2px;
font-weight:950;
}
.basic-upgrade-box h2{font-size:28px;margin:5px 0 7px}
.basic-upgrade-box p{color:#536b82;max-width:760px}
.basic-upgrade-actions{display:flex;gap:8px;flex-direction:column;min-width:180px}
.basic-profile-disclaimer{
max-width:850px;
margin:auto;
color:#7e8994;
font-size:11px;
text-align:center;
}
/* Premium profile extra emphasis */
.premium-profile-banner{
display:inline-flex;
background:linear-gradient(90deg,#07111c,#174f92);
color:#fff;
border:1px solid #6f9bc9;
border-radius:999px;
padding:7px 12px;
font-size:10px;
letter-spacing:1px;
font-weight:950;
margin-bottom:18px;
}
.premium-profile-logo{
width:105px!important;
height:105px!important;
flex-basis:105px!important;
border:2px solid #789fc9!important;
}
.premium-profile-logo img{max-width:78px!important;max-height:78px!important}
.premium-profile-side{
box-shadow:0 20px 45px rgba(6,31,62,.2);
}
.premium-side-points{
display:flex;
flex-direction:column;
gap:7px;
margin:16px 0 0;
color:#d6e6f6;
font-size:11px;
}
.premium-content-card{
border:1px solid #bfcfe0;
box-shadow:0 12px 28px rgba(15,55,99,.06);
}
.premium-contact-card{
border:2px solid #6e97c2;
box-shadow:0 15px 36px rgba(12,53,99,.13);
}
.premium-contact-card .lead-btn{margin-top:8px}
@media(max-width:700px){
.basic-free-details,.basic-free-services{padding-left:16px}
.basic-upgrade-banner{grid-template-columns:1fr}
.basic-upgrade-banner em{text-align:left}
.basic-upgrade-box{grid-template-columns:1fr}
.basic-upgrade-actions{flex-direction:row;min-width:0}
.premium-card-v3{transform:none}
}
/* V4.3 — SIN CITY PREMIUM LOGO */
.premium-logo-xl img[src*="sin-city-hose-pro"]{
max-width:76px!important;
max-height:76px!important;
object-fit:contain;
}
.premium-profile-logo img[src*="sin-city-hose-pro"]{
max-width:96px!important;
max-height:96px!important;
object-fit:contain;
}
/* V4.4 — TEXAS HOSE PRO PREMIUM LOGO */
.premium-logo-xl img[src*="texas-hose-pro"]{
max-width:74px!important;
max-height:74px!important;
object-fit:contain;
}
.premium-profile-logo img[src*="texas-hose-pro"]{
max-width:94px!important;
max-height:94px!important;
object-fit:contain;
}
/* V4.5 — TEXAS HOSE PRO LOGO: LARGE / TIGHT CROP */
.premium-logo-xl img[src*="texas-hose-pro"]{
width:88px!important;
height:88px!important;
max-width:none!important;
max-height:none!important;
object-fit:contain!important;
}
.premium-profile-logo img[src*="texas-hose-pro"]{
width:112px!important;
height:112px!important;
max-width:none!important;
max-height:none!important;
object-fit:contain!important;
}
/* ==========================================================
V5 — PROVIDER ONBOARDING / PLAN VALUE / STATE PRO
========================================================== */
.plans-hero-v5{padding:76px 0;background:radial-gradient(circle at 80% 20%,rgba(66,139,224,.22),transparent 30%),linear-gradient(135deg,#04080d,#0b1c34 58%,#143f78);color:#fff}
.plans-v5-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:55px;align-items:center}
.plans-hero-v5 h1{font-size:clamp(45px,5.8vw,74px);line-height:.98;letter-spacing:-3px;margin:0 0 18px}
.plans-hero-v5 h1 span{color:#6fa9eb}.plans-hero-v5 p{font-size:18px;line-height:1.65;color:#c5d7e9;max-width:800px}
.plans-hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.plans-hero-tags span{font-size:10px;font-weight:900;letter-spacing:.4px;border:1px solid #385d83;border-radius:999px;padding:8px 11px;background:rgba(255,255,255,.04)}
.plans-hero-visual{padding:26px;border:1px solid #426b97;border-radius:20px;background:rgba(255,255,255,.055);box-shadow:0 28px 55px rgba(0,0,0,.22)}
.plans-hero-visual>b{font-size:9px;letter-spacing:1.4px;color:#7cb0e9}.intent-search{margin-top:12px;background:#fff;color:#26394c;border-radius:12px;padding:15px 16px;font-size:14px;display:flex;justify-content:space-between}.intent-search span{color:#1e5fac;font-size:22px}.intent-arrow{text-align:center;color:#7ab1eb;font-size:28px;padding:8px}.intent-provider{padding:17px;border:2px solid #6ea1d8;border-radius:14px;background:linear-gradient(135deg,#07111d,#164c89);font-size:16px}.intent-provider small{color:#b9d3ec;font-size:10px}
.walkthrough-section{padding:78px 0;background:#f4f7fa}
.walkthrough-player{max-width:950px;margin:0 auto;border:1px solid #cbd8e4;border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 22px 55px rgba(13,42,72,.11)}
.walkthrough-top{height:50px;padding:0 18px;background:#0a1726;display:flex;align-items:center;justify-content:space-between}
.walk-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#42586f;margin-right:5px}.walk-dot.active{background:#68a5e8}
.walk-controls{display:flex;gap:7px}.walk-controls button{background:#162b42;color:#dbe8f4;border:1px solid #35506b;border-radius:7px;padding:6px 10px;font-size:9px;font-weight:900}
.walk-screen{display:none;min-height:330px;padding:43px 50px}.walk-screen.active{display:block;animation:walkFade .35s ease}
.walk-step{font-size:9px;letter-spacing:1.3px;font-weight:950;color:#1e5fac}.walk-screen h3{font-size:34px;margin:8px 0 22px;letter-spacing:-1px}.walk-screen>p{color:#66798c}
@keyframes walkFade{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
.demo-business-types{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.demo-business-types span{padding:20px;border:1px solid #d5dee7;border-radius:13px;text-align:center;font-weight:850;color:#5c6f82;background:#f8fafc}.demo-business-types .selected{border:2px solid #2768b4;background:#eaf3fd;color:#143f74;box-shadow:0 0 0 4px rgba(39,104,180,.08)}
.demo-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.demo-fields div{padding:18px;border:1px solid #d8e1e9;border-radius:12px;background:#f7f9fb}.demo-fields small,.demo-fields b{display:block}.demo-fields small{color:#768798;font-size:9px}.demo-fields b{font-size:15px;margin-top:6px;color:#163e6a}
.demo-rates{display:grid;gap:8px}.demo-rates div{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:13px 15px;border:1px solid #d8e1e9;border-radius:11px}.demo-rates b{font-size:12px}.demo-rates span{font-weight:900}.demo-rates em{font-style:normal;font-size:9px;color:#1d6d4a;background:#e9f5ef;border-radius:999px;padding:5px 8px}
.demo-routing{display:grid;grid-template-columns:1fr 1fr;gap:12px}.demo-routing>div{padding:23px;border-radius:15px;background:linear-gradient(145deg,#081420,#153d68);color:#fff;border:1px solid #35628f}.demo-routing span{font-size:30px}.demo-routing b,.demo-routing small{display:block}.demo-routing b{margin-top:8px}.demo-routing small{color:#a9c1da;margin-top:4px}
.demo-premium-profile{padding:27px;border-radius:18px;background:linear-gradient(135deg,#06101b,#164f91);color:#fff;border:2px solid #6e9fd2;margin-bottom:22px}.demo-premium-profile span,.demo-premium-profile b,.demo-premium-profile small{display:block}.demo-premium-profile span{font-size:9px;letter-spacing:1.2px;color:#a8cbf0}.demo-premium-profile b{font-size:28px;margin:8px 0}.demo-premium-profile small{color:#c1d6eb}
.walk-progress{height:5px;background:#dde6ee}.walk-progress span{display:block;height:100%;width:20%;background:linear-gradient(90deg,#0e3b74,#3b83d2);transition:width .3s ease}
.pricing-grid-v5{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;align-items:stretch}
.plan-card-v5{display:flex;flex-direction:column;padding:22px;border:1px solid #d6dfe7;border-radius:18px;background:#fff;box-shadow:0 10px 25px rgba(16,43,72,.04)}
.paid-plan{border:2px solid #7ea3cb;box-shadow:0 18px 40px rgba(13,54,101,.10)}
.leader-plan{transform:translateY(-9px);border-color:#2e6db4;box-shadow:0 25px 55px rgba(11,69,136,.17)}
.state-plan{border-color:#5f7d9e;background:linear-gradient(180deg,#fff,#f2f6fa)}
.plan-kicker{font-size:8px;letter-spacing:1.25px;color:#1d5c9f;font-weight:950}.plan-card-v5 h3{font-size:26px;margin:7px 0}.plan-card-v5>strong{font-size:35px;letter-spacing:-1.4px}.plan-card-v5>strong small{font-size:12px;color:#65798d}.annual-price{font-size:10px;color:#5f7590;font-weight:850;margin:2px 0 12px}.plan-card-v5>p{font-size:12px;color:#637689;min-height:58px}.plan-card-v5 ul{padding-left:18px;font-size:11px;line-height:1.7;flex-grow:1}.not-included{display:flex;flex-direction:column;gap:3px;padding:11px;background:#f2f4f6;border-radius:9px;margin:10px 0;color:#77838e;font-size:9px}.not-included b{color:#596774}.plan-why{padding:12px;background:#eaf3fd;border:1px solid #c6dcef;border-radius:10px;margin:12px 0}.plan-why b{font-size:9px;letter-spacing:.8px;color:#174e8c}.plan-why p{font-size:10px;line-height:1.45;color:#52708f;margin:5px 0 0}
.payback-section{padding:78px 0;background:radial-gradient(circle at 85% 5%,rgba(58,125,202,.15),transparent 25%),linear-gradient(135deg,#050b12,#0b1e35 58%,#113b70);color:#fff}
.payback-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}.payback-grid h2{font-size:42px;line-height:1.03;margin:7px 0 12px;letter-spacing:-1.6px}.payback-grid>div>p{color:#bcd0e3}
.calc-controls{display:grid;gap:12px;margin-top:24px}.calc-controls label{color:#dce8f4;font-size:11px}.calc-controls select,.calc-controls input[type=number]{width:100%;margin-top:6px;padding:13px;border-radius:10px;border:1px solid #506d8c;background:#fff;color:#172b40;font-size:16px}.profit-input{position:relative}.profit-input span{position:absolute;left:12px;top:21px;color:#5d7288;font-weight:900}.profit-input input{padding-left:28px!important}.calc-controls input[type=range]{width:100%}
.payback-result{padding:28px;border:1px solid #3f668f;border-radius:20px;background:rgba(255,255,255,.055)}.payback-result>span{font-size:9px;letter-spacing:1.2px;color:#83b3e7;font-weight:950}.payback-result>strong{display:block;font-size:58px;letter-spacing:-2px;margin:5px 0}.payback-result>p{color:#c7d9e9}
.hydraulic-meter{margin:22px 0}.meter-title{display:flex;justify-content:space-between;font-size:9px;color:#acc3da;margin-bottom:7px}.meter-shell{height:31px;border-radius:18px;background:#111b25;border:3px solid #7b8a99;position:relative;overflow:hidden;box-shadow:inset 0 3px 8px rgba(0,0,0,.6)}.meter-shell>div{height:100%;width:0;background:linear-gradient(90deg,#276bb4,#55a1ec);transition:width .3s ease}.meter-coupling{position:absolute;top:-4px;width:22px;height:34px;background:linear-gradient(90deg,#626d77,#e5e9ed,#737f89);border:1px solid #333}.meter-coupling.left{left:0}.meter-coupling.right{right:0}.meter-hoses{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.payoff-hose{padding:5px 7px;border-radius:5px;background:#15283c;border:1px solid #385b7e;color:#9bb6d1;font-size:8px;font-weight:900}.payoff-hose.final{background:#2469b2;color:#fff;border-color:#73a7dc}
.payback-scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:17px}.payback-scenarios>div{padding:11px;border:1px solid #365b81;border-radius:10px;background:#0b1724}.payback-scenarios small,.payback-scenarios b{display:block}.payback-scenarios small{color:#8faac4;font-size:8px}.payback-scenarios b{font-size:17px;margin-top:3px}.calculator-disclaimer{display:block;color:#7f99b3;margin-top:13px;font-size:8px;line-height:1.4}
.intent-explainer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.intent-explainer-grid>div{padding:22px;border:1px solid #d8e1e9;border-radius:14px;background:#fff}.intent-explainer-grid>div>span{font-size:27px;color:#1e5fac}.intent-explainer-grid h3{margin:8px 0 5px}.intent-explainer-grid p{color:#64778a;font-size:12px}
/* Provider signup */
.signup-hero{padding:65px 0;background:radial-gradient(circle at 82% 12%,rgba(63,135,218,.18),transparent 28%),linear-gradient(135deg,#050a10,#0b1f3c 60%,#153f78);color:#fff}
.signup-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:42px;align-items:center}.signup-hero h1{font-size:50px;letter-spacing:-2px;margin:4px 0 12px}.signup-hero p{color:#c5d7e8;font-size:17px}.signup-plan-pill{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}.signup-plan-pill>*{padding:7px 9px;border-radius:999px;border:1px solid #42698f;font-size:10px}.signup-plan-pill b{background:#fff;color:#163c68}.signup-plan-pill em{font-style:normal;color:#b9d3ec}
.signup-benefit-card{display:flex;flex-direction:column;gap:9px;padding:23px;border:1px solid #41688f;border-radius:17px;background:rgba(255,255,255,.05)}.signup-benefit-card>span{font-size:8px;letter-spacing:1.3px;color:#82b2e6;font-weight:950}.signup-benefit-card>b{font-size:12px;color:#e2ecf6}
.signup-section{background:#f4f7fa}.signup-wrap{max-width:980px}.provider-signup-form{display:grid;gap:15px}.signup-step{padding:24px;border:1px solid #d3dde6;border-radius:17px;background:#fff;box-shadow:0 8px 20px rgba(16,42,69,.035)}.signup-step-head{display:flex;align-items:center;gap:11px;margin-bottom:17px}.signup-step-head>span{min-width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:#123f76;color:#fff;font-size:10px;font-weight:950}.signup-step-head b,.signup-step-head small{display:block}.signup-step-head b{font-size:18px}.signup-step-head small{color:#758697;margin-top:2px}
.business-type-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.business-type-picker label{margin:0;cursor:pointer}.business-type-picker input{position:absolute;opacity:0}.business-type-picker label>span{display:flex;flex-direction:column;min-height:105px;justify-content:center;padding:15px;border:1px solid #d1dce6;border-radius:13px;background:#f9fbfd}.business-type-picker input:checked+span{border:2px solid #2363ae;background:#e9f3fd;box-shadow:0 0 0 4px rgba(35,99,174,.08)}.business-type-picker strong{font-size:14px}.business-type-picker small{font-size:10px;color:#758697;margin-top:6px}
.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.toggle-grid label{margin:0}.toggle-grid label>span{display:block;padding:12px 12px 12px 38px;border:1px solid #d8e0e7;border-radius:10px;background:#f9fbfc;position:relative}.toggle-grid input{position:absolute;margin:15px 0 0 12px}.toggle-grid b,.toggle-grid small{display:block}.toggle-grid b{font-size:11px}.toggle-grid small{font-size:9px;color:#748596;margin-top:3px}
.rate-section{margin:17px 0;padding:16px;border:1px solid #cad8e5;border-radius:13px;background:#f5f9fc}.rate-head{display:flex;justify-content:space-between;gap:15px;margin-bottom:11px}.rate-head small{color:#6d8093}.rate-grid{display:grid;gap:8px}.rate-row{display:grid;grid-template-columns:1fr 150px;gap:10px;align-items:end}.rate-row label{margin:0}.show-rate{display:flex;align-items:center;gap:7px;height:45px;font-size:10px;font-weight:850;color:#365978}
.signup-submit-bar{position:sticky;bottom:10px;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 16px;border:1px solid #789bc0;border-radius:14px;background:rgba(6,19,33,.95);box-shadow:0 18px 38px rgba(5,19,38,.22);backdrop-filter:blur(8px)}.signup-submit-bar div{display:flex;flex-direction:column;color:#fff}.signup-submit-bar b{font-size:15px}.signup-submit-bar span{font-size:10px;color:#9db7d2}.signup-success{text-align:center;background:#fff;padding:50px;border:1px solid #d2dce5;border-radius:20px}.signup-success>span{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#e5f3eb;color:#196d45;font-size:26px;margin:auto}.signup-success-plan{display:flex;justify-content:center;gap:12px;margin:18px 0}.payment-pending{padding:11px;background:#fff6df;border:1px solid #ead08b;border-radius:9px;color:#76591a}
.google-reviews-btn{background:#fff;color:#315d8c;border:1px solid #c8d5e1}
.basic-google-link{display:inline-flex;align-items:center;font-size:10px;color:#4e6d8b;text-decoration:none;padding:8px 0}
.basic-google-link:hover{text-decoration:underline}
@media(max-width:1050px){
.pricing-grid-v5{grid-template-columns:1fr 1fr}.leader-plan{transform:none}
}
@media(max-width:850px){
.plans-v5-grid,.payback-grid,.signup-hero-grid{grid-template-columns:1fr}
.demo-fields{grid-template-columns:1fr 1fr}
.intent-explainer-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
.pricing-grid-v5,.business-type-picker,.toggle-grid,.demo-business-types,.demo-routing,.payback-scenarios{grid-template-columns:1fr}
.walk-screen{padding:28px 20px;min-height:390px}.walk-screen h3{font-size:27px}
.demo-fields{grid-template-columns:1fr 1fr}
.demo-rates div{grid-template-columns:1fr auto}.demo-rates em{grid-column:1/-1}
.rate-row{grid-template-columns:1fr}.show-rate{height:auto}
.signup-submit-bar{align-items:stretch;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.walk-screen.active{animation:none}.walk-progress span,.meter-shell>div{transition:none}}
/* ==========================================================
V5.1 — GET HOSE HELP FORM: FULL PROFESSIONAL FIELD STYLING
========================================================== */
.lead-form{
overflow:hidden;
}
.lead-form label{
display:block;
min-width:0;
margin:0 0 15px;
color:#2d435a;
font-size:12px;
font-weight:900;
line-height:1.25;
}
.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form input[type="tel"],
.lead-form input:not([type]),
.lead-form textarea,
.lead-form select{
display:block;
width:100%;
min-width:0;
margin-top:7px;
padding:13px 14px;
border:1px solid #c7d4e1;
border-radius:10px;
background:#fff;
color:#17283a;
font-size:15px;
line-height:1.35;
outline:none;
box-shadow:0 1px 0 rgba(18,45,74,.02);
transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.lead-form textarea{
min-height:118px;
resize:vertical;
}
.lead-form input::placeholder,
.lead-form textarea::placeholder{
color:#8a98a7;
opacity:1;
}
.lead-form input:focus,
.lead-form textarea:focus,
.lead-form select:focus{
border-color:#2468b5;
box-shadow:0 0 0 4px rgba(36,104,181,.10);
background:#fbfdff;
}
.lead-form .form-grid{
width:100%;
align-items:start;
}
.lead-form .form-grid.two{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:14px;
}
.lead-form .form-grid.three.lead-location-grid{
grid-template-columns:minmax(260px,1fr) 120px 170px;
gap:14px;
}
.lead-form-step{
padding-top:7px;
}
.lead-form-step:not(:first-of-type){
border-top:1px solid #e4ebf1;
padding-top:27px;
margin-top:30px;
}
.lead-form-step>span{
flex:0 0 36px;
width:36px;
height:36px;
border-radius:11px;
box-shadow:0 5px 12px rgba(17,62,117,.12);
}
.lead-form-step b{
color:#152436;
font-size:19px;
}
.lead-form-step small{
margin-top:2px;
color:#6d8195;
font-size:12px;
}
.choice-grid{
margin-bottom:4px;
}
.choice-grid label>span{
min-height:94px;
padding:14px;
}
.choice-grid b{
color:#304963;
font-size:13px;
}
.choice-grid input:checked+span b{
color:#183e6c;
}
.photo-upload{
display:block!important;
padding:18px!important;
border:1.5px dashed #9fb5ca!important;
border-radius:13px!important;
background:#f7fafc!important;
color:#29435e!important;
margin-top:4px!important;
}
.photo-upload input[type="file"]{
width:100%;
margin-top:10px;
padding:10px;
border:1px solid #cad6e1;
border-radius:9px;
background:#fff;
font-size:13px;
color:#425b73;
}
.photo-upload input[type="file"]::file-selector-button{
margin-right:10px;
padding:8px 11px;
border:0;
border-radius:7px;
background:#e7f0fa;
color:#154f8c;
font-weight:900;
cursor:pointer;
}
.photo-upload small{
margin-top:7px!important;
line-height:1.4;
}
.lead-submit{
min-height:56px;
border-radius:12px!important;
font-size:16px!important;
letter-spacing:.2px;
box-shadow:0 10px 22px rgba(190,47,29,.18);
}
.lead-consent{
max-width:760px;
margin:11px auto 0;
line-height:1.45;
}
@media(max-width:760px){
.lead-form .form-grid.two,
.lead-form .form-grid.three.lead-location-grid{
grid-template-columns:1fr;
gap:0;
}
.lead-form-step{
align-items:flex-start;
}
.lead-form-step b{
font-size:17px;
}
}
/* V5.2 — BREAKDOWN LOCATION DETECTION */
.location-assist{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin:2px 0 18px 48px;
}
.use-location-btn{
min-height:42px;
padding:10px 15px;
border:1px solid #7fa6d1;
border-radius:10px;
background:#eaf3fd;
color:#174f8d;
font-size:12px;
font-weight:950;
cursor:pointer;
box-shadow:0 3px 9px rgba(22,72,126,.06);
}
.use-location-btn:hover{
background:#dcecff;
border-color:#4e82bc;
}
.use-location-btn:disabled{
opacity:.65;
cursor:wait;
}
.location-status{
color:#667d94;
font-size:11px;
font-weight:750;
}
.location-status.success{color:#23704b}
.location-status.error{color:#a84435}
.location-status.working{color:#2a619c}
.lead-step-content{min-width:0}
@media(max-width:650px){
.location-assist{
margin-left:0;
align-items:stretch;
flex-direction:column;
}
.use-location-btn{width:100%}
}
/* ==========================================================
V5.3 — SMART CITY / STATE LOCATION PLUG
========================================================== */
.search-input-wrap{position:relative}
.location-suggestions{
position:absolute;
z-index:40;
left:0;
right:0;
top:calc(100% + 7px);
overflow:hidden;
border:1px solid #cbd9e6;
border-radius:13px;
background:#fff;
box-shadow:0 18px 42px rgba(14,43,75,.18);
}
.location-suggestions[hidden]{display:none!important}
.location-suggestion{
width:100%;
min-height:52px;
display:flex;
align-items:center;
gap:11px;
padding:9px 13px;
border:0;
border-bottom:1px solid #edf1f5;
background:#fff;
color:#21384f;
text-align:left;
cursor:pointer;
}
.location-suggestion:last-child{border-bottom:0}
.location-suggestion:hover,
.location-suggestion:focus{background:#edf5fd;outline:none}
.location-suggestion>span{
display:grid;
place-items:center;
width:31px;
height:31px;
border-radius:9px;
background:#e8f2fc;
color:#1b5b9f;
font-weight:950;
}
.location-suggestion b,
.location-suggestion small{display:block}
.location-suggestion b{font-size:12px;color:#203a55}
.location-suggestion small{font-size:9px;color:#74889b;margin-top:1px}
.smart-search-head .location-breadcrumb{
display:flex;
gap:7px;
align-items:center;
margin-bottom:10px;
font-size:10px;
font-weight:850;
}
.smart-search-head .location-breadcrumb a{color:#75a9e3}
.smart-search-head .location-breadcrumb span{color:#71869c}
.smart-search-head .location-breadcrumb b{color:#dbe9f6}
.search-correction{
display:inline-block;
margin:4px 0 11px;
padding:7px 10px;
border:1px solid #416a95;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#bed4e8;
font-size:10px;
}
.search-correction b{color:#fff}
.search-scope-chips{
display:flex;
gap:8px;
align-items:center;
flex-wrap:wrap;
margin:13px 0 17px;
}
.search-scope-chips span,
.search-scope-chips a{
display:inline-flex;
align-items:center;
min-height:32px;
padding:6px 10px;
border-radius:999px;
font-size:9px;
font-weight:950;
text-decoration:none;
}
.search-scope-chips .active{
background:#e7f2fd;
color:#16518e;
border:1px solid #9bc0e6;
}
.search-head .search-scope-chips .active{
background:#fff;
color:#174c83;
border-color:#fff;
}
.search-scope-chips a{
border:1px solid #45709c;
color:#c6dbef;
background:rgba(255,255,255,.04);
}
.city-hero .search-scope-chips a{
border-color:#c6d7e7;
color:#2d628f;
background:#fff;
}
.state-scope-note{
border-color:#abc8e4!important;
background:#edf6ff!important;
}
.state-fallback-section{
margin-top:34px;
padding-top:28px;
border-top:3px solid #dbe6f0;
}
.state-fallback-head{
display:flex;
justify-content:space-between;
align-items:end;
gap:20px;
margin-bottom:17px;
}
.state-fallback-head>div>span{
display:block;
color:#1d5e9f;
font-size:9px;
letter-spacing:1.1px;
font-weight:950;
}
.state-fallback-head h2{
margin:5px 0 4px;
font-size:28px;
letter-spacing:-.7px;
}
.state-fallback-head p{
max-width:650px;
margin:0;
color:#6b7f92;
font-size:11px;
line-height:1.5;
}
@media(max-width:700px){
.state-fallback-head{align-items:stretch;flex-direction:column}
.state-fallback-head .btn{width:100%;text-align:center}
}
/* ==========================================================
V5.4 MASTER — VALUE STORY / INDUSTRIAL PLAN DIFFERENTIATION
========================================================== */
.money-mission{
padding:78px 0;
background:
linear-gradient(120deg,rgba(9,25,42,.98),rgba(12,43,76,.98)),
repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.02) 22px 24px);
color:#fff;
border-top:1px solid #315b84;
border-bottom:1px solid #315b84;
}
.money-mission-head{max-width:900px;margin:0 auto 34px;text-align:center}
.money-mission-head>span{font-size:9px;font-weight:950;letter-spacing:1.6px;color:#75afea}
.money-mission-head h2{margin:8px 0 0;font-size:clamp(38px,6vw,70px);line-height:.95;letter-spacing:-2.7px;color:#fff}
.money-mission-head h3{margin:8px 0 15px;font-size:clamp(23px,3.2vw,38px);letter-spacing:-1px;color:#c9ddf1}
.money-mission-head h3 em{font-style:normal;color:#64a8ef}
.money-mission-head p{max-width:780px;margin:0 auto;color:#b9cfe3;font-size:15px;line-height:1.65}
.money-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.money-step{position:relative;overflow:hidden;min-height:275px;padding:24px;border-radius:18px;border:1px solid rgba(255,255,255,.16);box-shadow:0 22px 45px rgba(0,0,0,.16)}
.money-step:after{content:"";position:absolute;right:-45px;bottom:-55px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.06)}
.money-step.need{background:linear-gradient(145deg,#5a1b15,#b13a29)}
.money-step.search{background:linear-gradient(145deg,#0d3158,#1c67b5)}
.money-step.earn{background:linear-gradient(145deg,#114837,#258460)}
.money-step-num{position:absolute;right:18px;top:14px;font-size:58px;line-height:1;font-weight:950;opacity:.13}
.money-step-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:18px;border-radius:13px;background:rgba(255,255,255,.13);font-size:24px}
.money-step>span{font-size:8px;letter-spacing:1.2px;font-weight:950;color:#e9f4ff}
.money-step h3{margin:7px 0 8px;font-size:25px;letter-spacing:-.7px;color:#fff}
.money-step p{margin:0;color:#e2edf6;font-size:12px;line-height:1.55}
.money-bottom-line{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:26px;margin-top:18px;padding:19px 22px;border:1px solid #4e759b;border-radius:15px;background:#06111d}
.money-bottom-line>div{display:flex;flex-direction:column}
.money-bottom-line>div b{font-size:9px;color:#7eb6f0;letter-spacing:1px}
.money-bottom-line>div span{font-size:10px;color:#9fb6cb;margin-top:3px}
.money-bottom-line>strong{text-align:right;font-size:20px;letter-spacing:-.3px}
.money-bottom-line>strong em{font-style:normal;color:#65aaf0}
.plan-card-v5{position:relative;overflow:hidden}
.plan-card-v5:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:#a8b2bc}
.plan-card-v5.local-pro:before{background:linear-gradient(90deg,#1f61a8,#5ea2e6)}
.plan-card-v5.leader-plan:before{background:linear-gradient(90deg,#b88413,#f0c254)}
.plan-card-v5.state-plan:before{background:linear-gradient(90deg,#182f4d,#4f789f)}
.plan-card-v5.local-pro{background:linear-gradient(180deg,#fff,#f4f9ff)}
.plan-card-v5.leader-plan{background:linear-gradient(180deg,#fffdf7,#f9f3e5)}
.plan-card-v5.state-plan{background:linear-gradient(180deg,#f9fbfd,#edf2f7)}
.plan-card-v5 li{position:relative;list-style:none;padding-left:17px;margin:3px 0}
.plan-card-v5 li:before{content:"✓";position:absolute;left:0;top:0;color:#247249;font-weight:950}
.free-plan li:before{color:#6f7d88}
.upgrade-adds{margin:13px 0 7px;padding:12px;border-radius:11px;border:1px solid}
.upgrade-adds>span{display:block;font-size:8px;font-weight:950;letter-spacing:1px;margin-bottom:8px}
.upgrade-adds>div{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.upgrade-adds b{display:block;padding:7px;border-radius:7px;font-size:8px;text-align:center}
.local-adds{border-color:#b8d4ef;background:#eaf4fe}.local-adds>span{color:#1b5b9b}.local-adds b{background:#fff;color:#1f5f9f;border:1px solid #c8dff3}
.leader-adds{border-color:#e7cc8b;background:#fff7df}.leader-adds>span{color:#8a6518}.leader-adds b{background:#fff;color:#745615;border:1px solid #ead69f}
.state-adds{border-color:#bdcad7;background:#eef3f7}.state-adds>span{color:#344f6b}.state-adds b{background:#fff;color:#294761;border:1px solid #cfdae4}
.plan-why{border-left:5px solid #377dc5!important}
.leader-plan .plan-why{border-left-color:#ca951e!important}
.state-plan .plan-why{border-left-color:#536f8b!important}
.provider-money-banner{padding:58px 0;background:linear-gradient(135deg,#06101c,#123f73);color:#fff;text-align:center}
.provider-money-banner span{font-size:9px;letter-spacing:1.4px;color:#7eb4e9;font-weight:950}
.provider-money-banner h1{font-size:48px;letter-spacing:-2px;margin:7px 0 5px}
.provider-money-banner h2{font-size:25px;margin:0;color:#c6d9eb}
.provider-money-banner p{color:#9fb8d0;max-width:760px;margin:13px auto 0}
@media(max-width:800px){
.money-steps{grid-template-columns:1fr}
.money-bottom-line{grid-template-columns:1fr}
.money-bottom-line>strong{text-align:left}
}
/* ==========================================================
V5.5 — CALL ATTRIBUTION / REVIEW BOOSTER
========================================================== */
.tracking-value-section{padding:72px 0;background:#eef4f9;border-top:1px solid #d4e0ea;border-bottom:1px solid #d4e0ea}
.tracking-value-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
.tracking-value-grid h2{font-size:42px;line-height:1.02;letter-spacing:-1.6px;margin:7px 0 12px;color:#142a40}
.tracking-value-grid p{color:#62778b;line-height:1.65}
.tracking-disclaimer{margin-top:17px;padding:10px 12px;border-left:4px solid #7f9fbe;background:#fff;color:#6b7e91;font-size:9px;line-height:1.45}
.tracking-funnel-demo{padding:23px;border-radius:18px;background:linear-gradient(145deg,#07111c,#123b68);box-shadow:0 20px 45px rgba(15,48,82,.17)}
.track-node{display:flex;align-items:center;gap:15px;padding:14px 16px;border:1px solid #3b668f;border-radius:12px;background:#0e2236;color:#fff}
.track-node>span{display:grid;place-items:center;width:43px;height:43px;border-radius:11px;background:#183b5d;font-size:22px}
.track-node small,.track-node b{display:block}.track-node small{font-size:8px;letter-spacing:1.1px;color:#94b4d2}.track-node b{font-size:27px;margin-top:2px}
.track-node.completed{background:#153929;border-color:#317357}.track-node.completed>span{background:#235640}
.track-node.reviews{background:#423615;border-color:#806d2e}.track-node.reviews>span{background:#645323}
.tracking-funnel-demo>i{display:block;text-align:center;color:#6f9dcc;font-size:20px;font-style:normal;padding:5px}
.track-bottom{text-align:center;color:#9ab4cc;font-size:9px;margin-top:11px}
.provider-call-hero{padding:55px 0;background:radial-gradient(circle at 85% 10%,rgba(55,125,204,.18),transparent 30%),linear-gradient(135deg,#06101b,#123e70);color:#fff}
.call-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.call-hero-grid>div:first-child>span{font-size:8px;letter-spacing:1.3px;color:#77afe8;font-weight:950}
.call-hero-grid h1{font-size:42px;letter-spacing:-1.7px;margin:6px 0 8px}.call-hero-grid p{color:#bad0e3}
.tracking-number-card{padding:20px;border:1px solid #47719d;border-radius:15px;background:rgba(255,255,255,.055)}
.tracking-number-card small,.tracking-number-card b,.tracking-number-card span{display:block}.tracking-number-card small{color:#8eb9e3;font-size:8px;letter-spacing:1.2px}.tracking-number-card b{font-size:25px;margin:6px 0}.tracking-number-card span{color:#bed2e5;font-size:10px}
.call-dashboard{background:#f5f8fb}
.call-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:28px}
.call-stats>div{padding:17px;border:1px solid #d5e0e9;border-radius:13px;background:#fff}.call-stats span{font-size:22px}.call-stats small,.call-stats b{display:block}.call-stats small{font-size:8px;color:#6f8294;margin:6px 0 3px}.call-stats b{font-size:28px;color:#173b63}
.call-dashboard-head{margin-bottom:15px}.call-dashboard-head span{font-size:8px;letter-spacing:1px;color:#1d5f9f;font-weight:950}.call-dashboard-head h2{margin:4px 0}.call-dashboard-head p{color:#6d8092}
.call-list{display:grid;gap:10px}.call-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:17px;border:1px solid #d5dfe8;border-radius:13px;background:#fff}
.call-main{display:flex;align-items:center;gap:12px}.call-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#e8f2fc;color:#1d5e9e}.call-main b,.call-main small{display:block}.call-main small{color:#788b9c;margin-top:3px;font-size:9px}
.job-status{align-self:center;padding:6px 9px;border-radius:999px;font-size:8px;font-weight:950;text-transform:uppercase;background:#eef1f4;color:#657584}.job-status.completed{background:#e6f4eb;color:#216c49}.job-status.quote{background:#fff5dd;color:#84611c}.job-status.not-job,.job-status.referred{background:#f3eceb;color:#80524b}
.call-actions{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;padding-top:10px;border-top:1px solid #edf1f4}
.mini-action{min-height:34px;padding:7px 10px;border:1px solid #c9d6e1;border-radius:8px;background:#fff;color:#35536f;font-size:9px;font-weight:900;cursor:pointer}.mini-action.success{border-color:#9fceb2;background:#eaf6ef;color:#226746}.mini-action.review-action{background:#174f8d;color:#fff;border-color:#174f8d}.mini-action:disabled{opacity:.5;cursor:not-allowed}
.review-send-box{grid-column:1/-1;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:12px;border:1px solid #e3d48e;border-radius:10px;background:#fff9e8}.review-send-box b,.review-send-box small{display:block}.review-send-box b{font-size:10px;color:#765814}.review-send-box small{font-size:9px;color:#8a7747;margin-top:2px}.consent-check{display:flex;align-items:center;gap:7px;font-size:9px;color:#5f6f7d}
.success-box,.error-box{padding:12px 14px;border-radius:10px;margin-bottom:14px}.success-box{background:#e7f5ed;border:1px solid #b4dcc4;color:#246847}.error-box{background:#fff0ed;border:1px solid #e2b5ad;color:#9a4437}
@media(max-width:850px){
.tracking-value-grid,.call-hero-grid{grid-template-columns:1fr}
.call-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
.call-stats{grid-template-columns:1fr}
.call-row{grid-template-columns:1fr}
.review-send-box{grid-template-columns:1fr}
}
/* ==========================================================
V5.6 — PLANS PAGE CLEANUP
========================================================== */
.plan-pricing-v6{
background:#f5f7f9;
font-family:Arial, Helvetica, sans-serif;
}
.plan-heading-v6 h2{
max-width:820px;
margin-left:auto;
margin-right:auto;
color:#172a3c;
font-family:Arial, Helvetica, sans-serif;
font-size:clamp(36px,4.6vw,56px);
line-height:1.02;
letter-spacing:-2px;
}
.plan-heading-v6 p{
max-width:760px;
margin-left:auto;
margin-right:auto;
color:#64778a;
font-size:15px;
line-height:1.65;
}
.plan-payback-control{
max-width:920px;
display:grid;
grid-template-columns:1fr 180px;
gap:10px 22px;
align-items:center;
margin:0 auto 28px;
padding:18px 20px;
border:1px solid #c7d5e1;
border-radius:15px;
background:#fff;
}
.plan-payback-control>div:first-child span,
.plan-payback-control>div:first-child b{display:block}
.plan-payback-control>div:first-child span{
color:#1d5f9f;
font-size:8px;
font-weight:950;
letter-spacing:1.2px;
}
.plan-payback-control>div:first-child b{
margin-top:4px;
color:#1b3249;
font-size:14px;
}
.plan-payback-control>small{
grid-column:1/-1;
color:#7b8b9b;
font-size:8px;
}
.plan-profit-entry{position:relative}
.plan-profit-entry span{
position:absolute;
left:12px;
top:13px;
z-index:2;
color:#50677d;
font-weight:900;
}
.plan-profit-entry input{
width:100%;
min-height:44px;
padding:10px 12px 10px 28px;
border:1px solid #b9c9d8;
border-radius:10px;
background:#f9fbfc;
color:#182c40;
font-size:17px;
font-weight:900;
}
.pricing-grid-v6{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:15px;
align-items:start;
}
.plan-card-v6{
position:relative;
min-width:0;
overflow:hidden;
padding:27px 20px 20px;
border:1px solid #cfd9e2;
border-radius:18px;
background:#fff;
box-shadow:0 12px 28px rgba(19,49,78,.06);
}
.plan-card-v6.paid{border-width:2px}
.plan-topline{position:absolute;top:0;left:0;right:0;height:7px}
.plan-topline.free{background:#9ca8b4}
.plan-topline.local{background:linear-gradient(90deg,#1d5d9f,#63a7e9)}
.plan-topline.leader{background:linear-gradient(90deg,#a66f0d,#f0c55a)}
.plan-topline.state{background:linear-gradient(90deg,#17314e,#6684a2)}
.plan-card-v6 .plan-kicker{
color:#59718a;
font-size:8px;
font-weight:950;
letter-spacing:1.25px;
}
.plan-card-v6 h3{
margin:7px 0 5px;
color:#152a3e;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
line-height:1;
letter-spacing:-1.1px;
}
.price-line{display:flex;align-items:flex-end;gap:5px}
.price-line strong{
color:#132c46;
font-size:40px;
line-height:1;
letter-spacing:-1.5px;
}
.price-line small{
margin-bottom:5px;
color:#6d8093;
font-size:11px;
font-weight:800;
}
.plan-card-v6 .annual-price{
margin:5px 0 11px;
color:#5d7288;
font-size:10px;
font-weight:850;
}
.plan-summary{
min-height:75px;
color:#62768a;
font-size:12px;
line-height:1.55;
}
.best-badge{
position:absolute;
top:14px;
right:12px;
padding:5px 7px;
border-radius:999px;
background:#f8e8b9;
color:#755516;
font-size:7px;
font-weight:950;
letter-spacing:.65px;
}
.plan-value-box{
margin:13px 0;
padding:14px;
border-radius:12px;
border:1px solid;
}
.plan-value-box span,
.plan-value-box strong,
.plan-value-box small{display:block}
.plan-value-box span{
font-size:7px;
font-weight:950;
letter-spacing:1px;
}
.plan-value-box strong{
margin:3px 0;
font-size:27px;
letter-spacing:-.8px;
}
.plan-value-box small{
font-size:8px;
line-height:1.35;
}
.plan-value-box.local{background:#edf6ff;border-color:#bad7ef;color:#1e588f}
.plan-value-box.leader{background:#fff7df;border-color:#e5ce8a;color:#755815}
.plan-value-box.state{background:#eef3f7;border-color:#c6d1db;color:#35516c}
.plan-quick{
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
margin:13px 0;
}
.plan-quick span{
min-width:0;
padding:7px 6px;
border:1px solid #d9e2e9;
border-radius:8px;
background:#f8fafc;
color:#435d75;
font-size:8px;
font-weight:850;
text-align:center;
}
.plan-details{
margin:7px 0;
border:1px solid #d7e0e7;
border-radius:10px;
background:#fff;
}
.plan-details summary{
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
min-height:43px;
padding:9px 11px;
cursor:pointer;
color:#27445f;
font-size:9px;
font-weight:950;
letter-spacing:.55px;
}
.plan-details summary::-webkit-details-marker{display:none}
.plan-details summary b{
display:grid;
place-items:center;
min-width:24px;
height:24px;
border-radius:7px;
background:#eaf1f7;
color:#1a5c9e;
font-size:16px;
}
.plan-details>div{
padding:0 12px 12px;
border-top:1px solid #eef2f5;
}
.plan-details ul{
margin:9px 0 0;
padding-left:18px;
color:#586e83;
font-size:10px;
line-height:1.7;
}
.plan-details p{
margin:10px 0 0;
color:#5f7387;
font-size:10px;
line-height:1.55;
}
.plan-details.why{border-left:4px solid #4f86bc}
.plan-details.value{border-left:4px solid #3d8a60}
.plan-missing{
display:flex;
flex-direction:column;
gap:4px;
margin:13px 0;
padding:11px;
border-radius:9px;
background:#f1f3f5;
color:#778490;
font-size:8px;
}
.plan-missing b{color:#5a6875;letter-spacing:.8px}
.website-kicker-mini{
display:flex;
flex-direction:column;
gap:2px;
margin-top:8px;
padding:10px 11px;
border:1px dashed #9cb7d0;
border-radius:9px;
background:#f5f9fd;
color:#23547f;
text-decoration:none;
}
.website-kicker-mini b{font-size:9px}
.website-kicker-mini span{font-size:8px;color:#647e96}
.plan-footnote{
max-width:1000px;
margin:20px auto 0;
color:#778797;
font-size:8px;
line-height:1.45;
text-align:center;
}
.website-kicker-section{
padding:68px 0;
background:#081523;
color:#fff;
}
.website-kicker-grid{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:40px;
align-items:center;
}
.website-kicker-copy>span{
color:#73aae2;
font-size:9px;
font-weight:950;
letter-spacing:1.35px;
}
.website-kicker-copy h2{
margin:7px 0 10px;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:44px;
line-height:1.04;
letter-spacing:-1.6px;
}
.website-kicker-copy h2 strong{color:#6fb0ef}
.website-kicker-copy>p{color:#b7cce0;line-height:1.6}
.website-kicker-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px 18px;
margin:20px 0;
}
.website-kicker-list span{
color:#dce8f3;
font-size:10px;
font-weight:750;
}
.website-kicker-copy>small{
display:block;
max-width:760px;
color:#7995af;
font-size:8px;
line-height:1.5;
}
.website-kicker-card{
padding:27px;
border:1px solid #43688e;
border-radius:18px;
background:linear-gradient(145deg,#102740,#174c80);
box-shadow:0 25px 55px rgba(0,0,0,.2);
}
.website-kicker-card small,
.website-kicker-card b,
.website-kicker-card span{display:block}
.website-kicker-card small{
color:#90b8df;
font-size:8px;
font-weight:950;
letter-spacing:1.2px;
}
.website-kicker-card b{
margin-top:5px;
font-size:58px;
line-height:1;
letter-spacing:-2px;
}
.website-kicker-card>span{
margin-top:3px;
color:#a8c5e0;
font-size:9px;
font-weight:900;
}
.website-kicker-card p{
margin:18px 0;
color:#c9dae9;
font-size:11px;
line-height:1.55;
}
.website-kicker-signup{
border:2px solid #7fa6cb!important;
background:linear-gradient(180deg,#f7fbff,#edf5fd)!important;
}
.kicker-mini-list{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:10px;
}
.kicker-mini-list span{
padding:6px 8px;
border:1px solid #c6d9ea;
border-radius:999px;
background:#fff;
color:#3b6489;
font-size:8px;
font-weight:850;
}
@media(max-width:1100px){
.pricing-grid-v6{grid-template-columns:1fr 1fr}
}
@media(max-width:780px){
.plan-payback-control,
.website-kicker-grid{grid-template-columns:1fr}
.website-kicker-list{grid-template-columns:1fr}
}
@media(max-width:620px){
.pricing-grid-v6{grid-template-columns:1fr}
.plan-summary{min-height:0}
.website-kicker-copy h2{font-size:34px}
}
/* ==========================================================
V5.6.1 — WIDER COLUMNS + EXPAND PLAN MODAL
========================================================== */
.pricing-grid-v6{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
max-width:1320px;
margin:0 auto;
}
.plan-card-v6{
padding:30px 24px 24px;
border-radius:20px;
}
.plan-card-v6 h3{
font-size:40px;
line-height:1;
letter-spacing:-1.6px;
}
.price-line strong{
font-size:54px;
}
.price-line small{
font-size:16px;
margin-bottom:7px;
}
.plan-card-v6 .annual-price{
font-size:13px;
margin:6px 0 14px;
}
.plan-summary{
min-height:96px;
font-size:18px;
line-height:1.55;
}
.plan-quick{
gap:8px;
}
.plan-quick span{
padding:11px 8px;
font-size:12px;
border-radius:10px;
}
.plan-value-box{
padding:18px;
}
.plan-value-box span{
font-size:10px;
}
.plan-value-box strong{
font-size:48px;
}
.plan-value-box small{
font-size:11px;
}
.plan-details summary{
min-height:50px;
padding:12px 14px;
font-size:12px;
}
.plan-details summary b{
min-width:28px;
height:28px;
font-size:18px;
}
.plan-details ul{
font-size:13px;
}
.plan-details p{
font-size:14px;
}
.plan-missing{
font-size:11px;
gap:6px;
}
.plan-missing b{
font-size:11px;
}
.best-badge{
top:16px;
right:14px;
padding:6px 9px;
font-size:8px;
}
.plan-card-v6 .plan-kicker{
font-size:10px;
}
.expand-plan-btn{
width:100%;
min-height:48px;
margin-top:10px;
border:1px solid #91afd0;
border-radius:10px;
background:#eef5fc;
color:#1f5d99;
font-size:14px;
font-weight:900;
cursor:pointer;
}
.expand-plan-btn:hover{
background:#e3eef9;
}
.website-kicker-mini{
margin-top:10px;
padding:12px 13px;
}
.website-kicker-mini b{
font-size:12px;
}
.website-kicker-mini span{
font-size:11px;
}
.plan-payback-control{
max-width:1100px;
grid-template-columns:1fr 220px;
}
.plan-payback-control>div:first-child span{
font-size:10px;
}
.plan-payback-control>div:first-child b{
font-size:28px;
}
.plan-payback-control>small{
font-size:10px;
}
.plan-profit-entry input{
min-height:52px;
font-size:34px;
padding-left:38px;
}
.plan-profit-entry span{
top:12px;
font-size:28px;
}
.plan-modal{
position:fixed;
inset:0;
z-index:9999;
display:none;
}
.plan-modal.open{
display:block;
}
.plan-modal-backdrop{
position:absolute;
inset:0;
background:rgba(7,19,31,.62);
}
.plan-modal-dialog{
position:relative;
width:min(980px,calc(100vw - 32px));
max-height:calc(100vh - 32px);
overflow:auto;
margin:16px auto;
padding:28px 26px 24px;
border-radius:22px;
background:#fff;
box-shadow:0 30px 80px rgba(0,0,0,.28);
}
.plan-modal-close{
position:absolute;
top:12px;
right:12px;
width:42px;
height:42px;
border:none;
border-radius:999px;
background:#edf3f8;
color:#204f7d;
font-size:28px;
line-height:1;
cursor:pointer;
}
.plan-modal-head span{
display:block;
color:#1a629f;
font-size:11px;
font-weight:950;
letter-spacing:1.2px;
}
.plan-modal-head h2{
margin:7px 0 6px;
color:#162b40;
font-size:50px;
line-height:1;
letter-spacing:-1.7px;
}
.plan-modal-price{
color:#204f7d;
font-size:26px;
font-weight:900;
}
.plan-modal-head p{
margin:12px 0 0;
color:#5f7387;
font-size:18px;
line-height:1.6;
}
.plan-modal-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
margin-top:22px;
}
.plan-modal-grid section{
padding:18px;
border:1px solid #d7e2eb;
border-radius:16px;
background:#f8fbfd;
}
.plan-modal-grid h3{
margin:0 0 10px;
color:#1b3650;
font-size:18px;
}
.plan-modal-grid ul{
margin:0;
padding-left:20px;
color:#54697f;
font-size:16px;
line-height:1.8;
}
.plan-modal-grid p{
color:#5c7085;
font-size:16px;
line-height:1.7;
}
body.plan-modal-open{
overflow:hidden;
}
@media(min-width:1700px){
.pricing-grid-v6{
grid-template-columns:repeat(4,minmax(0,1fr));
max-width:1750px;
}
}
@media(max-width:1100px){
.pricing-grid-v6{
grid-template-columns:1fr;
}
}
@media(max-width:700px){
.plan-card-v6 h3{font-size:34px;}
.price-line strong{font-size:46px;}
.plan-summary{font-size:16px;min-height:0;}
.plan-modal-grid{grid-template-columns:1fr;}
.plan-modal-head h2{font-size:38px;}
.plan-modal-head p,.plan-modal-grid p,.plan-modal-grid ul{font-size:15px;}
.plan-payback-control{grid-template-columns:1fr;}
}
/* ==========================================================
V5.6.2 — RICHER COLORS + STRONGER BORDERS + EASIER BANNER
========================================================== */
.money-step.need{background:linear-gradient(145deg,#6d1b14,#d84a34)}
.money-step.search{background:linear-gradient(145deg,#0d3b6c,#2b7fd6)}
.money-step.earn{background:linear-gradient(145deg,#0f513c,#2da772)}
.money-step{border:2px solid rgba(255,255,255,.24);box-shadow:0 24px 55px rgba(0,0,0,.22)}
.money-step h3{font-size:29px;line-height:1.05}
.money-step p{font-size:14px;line-height:1.6;color:#edf5fb}
.money-step>span{font-size:10px}
.money-step-icon{width:54px;height:54px;font-size:28px}
.money-bottom-line{grid-template-columns:340px 1fr;gap:28px;margin-top:20px;padding:24px 28px;border:2px solid #5a97d1;border-radius:18px;background:linear-gradient(90deg,#04101b 0%,#071a2b 42%,#0b2a45 100%);box-shadow:0 18px 40px rgba(0,0,0,.2)}
.money-bottom-line>div b{font-size:12px;color:#8fc6ff;letter-spacing:1.25px}
.money-bottom-line>div span{font-size:16px;line-height:1.45;color:#d5e7f7;margin-top:4px;font-weight:700}
.money-bottom-line>strong{text-align:right;font-size:38px;line-height:1.1;letter-spacing:-1.2px;color:#fff}
.money-bottom-line>strong em{font-style:normal;color:#7ab7ff}
.plan-card-v6{border-width:3px;box-shadow:0 18px 38px rgba(17,44,71,.09)}
.plan-topline{height:9px}
.free-plan-v6{border-color:#b9c7d5}
.local-pro-v6{border-color:#7fb8ee;background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)}
.leader-v6{border-color:#dfb742;background:linear-gradient(180deg,#ffffff 0%,#fffdfa 100%)}
.state-v6{border-color:#8ea7c3;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%)}
.plan-card-v6:hover{transform:translateY(-2px);transition:transform .18s ease, box-shadow .18s ease;box-shadow:0 22px 46px rgba(17,44,71,.14)}
.plan-quick span{border:1.5px solid #c3d2df;background:#f5f9fd;color:#314f69;font-weight:900}
.local-pro-v6 .plan-quick span{border-color:#b3d4f3;background:#eef6ff}
.leader-v6 .plan-quick span{border-color:#ead28a;background:#fff8e8}
.state-v6 .plan-quick span{border-color:#c8d3dd;background:#f2f6f9}
.plan-details{border-width:1.5px;border-color:#cdd9e3}
.local-pro-v6 .plan-details{border-color:#bfd7ed}
.leader-v6 .plan-details{border-color:#e6cf8b}
.state-v6 .plan-details{border-color:#ced8e1}
.plan-details summary{color:#1e4366;font-size:13px}
.plan-details ul{font-size:14px;line-height:1.78}
.plan-details p{font-size:15px;line-height:1.7}
.plan-missing{background:#eff3f6;border:1.5px solid #d2dbe3}
.plan-card-v6 h3{color:#11263b}
.price-line strong{color:#15324f}
.plan-summary{color:#556d84}
.best-badge{background:#ffe7a9;color:#75510d;border:1px solid #efce71}
.expand-plan-btn{border:2px solid #86b2db;background:linear-gradient(180deg,#f4f9fe 0%,#e9f3fd 100%);font-size:15px}
.expand-plan-btn:hover{background:linear-gradient(180deg,#eaf3fd 0%,#dcecff 100%)}
@media(max-width:900px){
.money-bottom-line{grid-template-columns:1fr;gap:14px;padding:20px}
.money-bottom-line>strong{text-align:left;font-size:30px}
.money-bottom-line>div span{font-size:14px}
}
/* V5.6.3 — EXPANDED PLAN PAYBACK MESSAGE */
.modal-payback-highlight{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:14px;
margin:20px 0 4px;
padding:16px;
border:2px solid #8db8df;
border-radius:16px;
background:linear-gradient(135deg,#eef7ff,#f8fbfe);
}
.modal-payback-highlight>div:first-child{
padding:14px;
}
.modal-payback-highlight span,
.modal-payback-highlight strong,
.modal-payback-highlight small{display:block}
.modal-payback-highlight span{
color:#1d5d98;
font-size:10px;
font-weight:950;
letter-spacing:1px;
}
.modal-payback-highlight strong{
margin:5px 0;
color:#173f68;
font-size:34px;
line-height:1;
letter-spacing:-1px;
}
.modal-payback-highlight small{
color:#607991;
font-size:12px;
line-height:1.5;
}
.modal-payback-callout{
display:flex;
flex-direction:column;
justify-content:center;
padding:17px 18px;
border-radius:13px;
background:linear-gradient(135deg,#123f72,#1d67ab);
color:#fff;
}
.modal-payback-callout b{
font-size:22px;
line-height:1.1;
letter-spacing:-.4px;
}
.modal-payback-callout p{
margin:7px 0 0;
color:#dbeaf7;
font-size:13px;
line-height:1.55;
}
@media(max-width:700px){
.modal-payback-highlight{grid-template-columns:1fr}
.modal-payback-highlight strong{font-size:29px}
}
/* ==========================================================
V5.7 — CINEMATIC PROVIDER WALKTHROUGH
========================================================== */
.cinematic-walkthrough{
padding:90px 0 82px;
background:
radial-gradient(circle at 18% 8%,rgba(54,129,207,.12),transparent 27%),
linear-gradient(180deg,#f2f6fa 0%,#eaf1f7 100%);
}
.cinematic-heading h2{
max-width:900px;
margin-left:auto;
margin-right:auto;
font-size:clamp(40px,5.2vw,64px)!important;
line-height:.98;
letter-spacing:-2.5px!important;
}
.cinematic-heading p{
max-width:790px;
margin-left:auto;
margin-right:auto;
font-size:17px;
line-height:1.6;
}
.cinema-player{
max-width:1180px;
margin:34px auto 0;
overflow:hidden;
border:2px solid #163b61;
border-radius:24px;
background:#06111d;
box-shadow:0 32px 75px rgba(9,39,68,.22);
}
.cinema-chrome{
min-height:62px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:10px 18px;
border-bottom:1px solid #244762;
background:linear-gradient(90deg,#07111d,#0b2034);
}
.cinema-brand{
display:grid;
grid-template-columns:auto auto;
column-gap:9px;
align-items:center;
}
.cinema-live-dot{
grid-row:1/3;
width:12px;
height:12px;
border-radius:50%;
background:#4ca1f2;
box-shadow:0 0 0 5px rgba(76,161,242,.13),0 0 18px rgba(76,161,242,.85);
animation:cinemaPulse 1.6s ease-in-out infinite;
}
.cinema-brand b{
color:#eaf4fd;
font-size:11px;
letter-spacing:1px;
}
.cinema-brand small{
color:#6e92b2;
font-size:7px;
letter-spacing:1.3px;
}
.cinema-controls{
display:flex;
align-items:center;
gap:8px;
}
.cinema-controls>span{
margin-right:5px;
color:#8caac5;
font-size:9px;
font-weight:850;
font-variant-numeric:tabular-nums;
}
.cinema-controls button{
min-height:36px;
padding:7px 12px;
border:1px solid #3b607e;
border-radius:9px;
background:#112c43;
color:#e5eff8;
font-size:9px;
font-weight:900;
cursor:pointer;
}
.cinema-controls button:hover{background:#173a58}
.cinema-stage{
position:relative;
min-height:555px;
overflow:hidden;
background:
radial-gradient(circle at 82% 22%,rgba(54,135,216,.20),transparent 28%),
radial-gradient(circle at 23% 92%,rgba(37,103,166,.12),transparent 30%),
linear-gradient(145deg,#06101a,#0b1c2d 60%,#09243f);
}
.cinema-grid-bg{
position:absolute;
inset:0;
opacity:.15;
background-image:
linear-gradient(rgba(111,169,224,.18) 1px,transparent 1px),
linear-gradient(90deg,rgba(111,169,224,.18) 1px,transparent 1px);
background-size:42px 42px;
transform:perspective(700px) rotateX(58deg) scale(1.35) translateY(22%);
transform-origin:center bottom;
}
.cinema-scan{
position:absolute;
left:0;right:0;
height:140px;
top:-160px;
background:linear-gradient(180deg,transparent,rgba(69,156,238,.07),transparent);
animation:cinemaScan 7s linear infinite;
pointer-events:none;
}
.cinema-scene{
position:absolute;
inset:0;
z-index:2;
display:grid;
grid-template-columns:.82fr 1.18fr;
gap:45px;
align-items:center;
padding:54px 62px 72px;
opacity:0;
transform:scale(1.025) translateY(8px);
pointer-events:none;
transition:opacity .55s ease,transform .65s ease;
}
.cinema-scene.active{
opacity:1;
transform:scale(1) translateY(0);
pointer-events:auto;
}
.scene-copy{min-width:0}
.scene-number{
display:block;
margin-bottom:10px;
color:#2e78be;
font-size:62px;
line-height:.85;
font-weight:950;
letter-spacing:-3px;
opacity:.55;
}
.scene-copy>small{
color:#68a9e8;
font-size:9px;
font-weight:950;
letter-spacing:1.5px;
}
.scene-copy h3{
margin:8px 0 12px;
color:#fff;
font-size:clamp(35px,4vw,52px);
line-height:.98;
letter-spacing:-2px;
}
.scene-copy p{
margin:0;
max-width:470px;
color:#a9c0d5;
font-size:15px;
line-height:1.65;
}
.scene-visual{
min-width:0;
min-height:330px;
position:relative;
}
/* Scene 1 */
.operation-visual{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
align-content:center;
}
.operation-choice{
position:relative;
min-height:178px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:18px;
border:1px solid #355571;
border-radius:17px;
background:linear-gradient(180deg,rgba(20,45,67,.92),rgba(9,26,42,.96));
color:#8faac1;
transform:translateY(16px);
opacity:.45;
}
.active .operation-choice{
animation:choiceRise .55s ease forwards;
}
.active .mobile-choice{animation-delay:.18s}
.active .both-choice{animation-delay:.36s}
.operation-choice.selected{
border:2px solid #5aa6ec;
background:linear-gradient(180deg,#123b61,#0d2b47);
box-shadow:0 0 0 5px rgba(56,137,215,.10),0 18px 35px rgba(0,0,0,.22);
color:#fff;
}
.op-icon{font-size:38px;margin-bottom:12px}
.operation-choice b{font-size:13px;letter-spacing:.3px}
.operation-choice small{margin-top:5px;color:#7894aa;font-size:9px;text-align:center}
.operation-choice.selected small{color:#add0ee}
.choice-pulse{
position:absolute;
inset:-8px;
border:1px solid rgba(85,166,235,.45);
border-radius:22px;
animation:choicePulse 1.8s ease-out infinite;
}
.selection-line{
grid-column:1/-1;
height:3px;
margin:8px 20% 0;
border-radius:3px;
background:#12304c;
overflow:hidden;
}
.selection-line:after{
content:"";
display:block;
width:0;height:100%;
background:linear-gradient(90deg,#1f6eb5,#6cb5f5);
}
.active .selection-line:after{animation:lineFill 1.7s .4s ease forwards}
.selected-caption{
grid-column:1/-1;
text-align:center;
color:#78b6ee;
font-size:9px;
font-weight:950;
letter-spacing:1px;
opacity:0;
}
.active .selected-caption{animation:captionIn .5s 1.2s ease forwards}
/* Scene 2 */
.profile-build-visual{display:grid;place-items:center}
.profile-build-card{
width:min(100%,520px);
overflow:hidden;
border:1px solid #39617f;
border-radius:18px;
background:rgba(5,17,29,.93);
box-shadow:0 24px 50px rgba(0,0,0,.25);
}
.profile-build-head{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:10px;
padding:15px;
border-bottom:1px solid #27465f;
background:#0b2236;
}
.mini-logo{
display:grid;place-items:center;
width:38px;height:38px;
border-radius:10px;
background:#eaf3fd;
color:#174e84;
font-size:11px;
font-weight:950;
}
.profile-build-head b,.profile-build-head small{display:block}
.profile-build-head b{color:#fff;font-size:11px}
.profile-build-head small{color:#718da5;font-size:8px;margin-top:2px}
.profile-build-head em{
font-style:normal;
color:#78b8ee;
font-size:8px;
font-weight:950;
letter-spacing:.8px;
}
.typing-row{
display:grid;
grid-template-columns:140px 1fr;
gap:10px;
padding:14px 16px;
border-bottom:1px solid #182f42;
}
.typing-row span{
color:#6f8da7;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
}
.typing-row b{
position:relative;
overflow:hidden;
white-space:nowrap;
width:0;
color:#dcecf8;
font-size:12px;
}
.active .type-value{animation:typeReveal .7s .35s steps(16,end) forwards}
.active .type-value.delay-1{animation-delay:.85s}
.active .type-value.delay-2{animation-delay:1.35s}
.active .type-value.delay-3{animation-delay:1.85s}
.profile-build-status{
display:flex;
align-items:center;
gap:9px;
padding:14px 16px;
color:#72b7ec;
font-size:8px;
font-weight:950;
letter-spacing:.9px;
}
.profile-build-status i{
width:8px;height:8px;border-radius:50%;
background:#35bf80;
box-shadow:0 0 14px rgba(53,191,128,.8);
opacity:0;
}
.active .profile-build-status i{animation:statusOn .3s 2.6s forwards}
/* Scene 3 */
.search-demand-visual{display:grid;place-items:center}
.search-demo-window{
width:min(100%,560px);
padding:17px;
border:1px solid #3b617e;
border-radius:18px;
background:rgba(4,15,25,.93);
box-shadow:0 25px 55px rgba(0,0,0,.28);
}
.search-demo-bar{
display:grid;
grid-template-columns:auto 1fr auto;
gap:9px;
align-items:center;
min-height:52px;
padding:0 14px;
border:1px solid #50708a;
border-radius:12px;
background:#fff;
color:#24425f;
}
.search-demo-bar>span{font-size:20px;color:#286bac}
.search-demo-bar b{
overflow:hidden;
width:0;
white-space:nowrap;
font-size:12px;
}
.active .search-type{animation:searchType 1.2s .3s steps(28,end) forwards}
.search-demo-bar i{
width:8px;height:8px;border-radius:50%;
background:#2b84d3;
box-shadow:0 0 14px rgba(43,132,211,.8);
}
.search-signal{
position:relative;
min-height:170px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.map-pin{
position:relative;
z-index:3;
display:grid;place-items:center;
width:46px;height:46px;
border-radius:50% 50% 50% 0;
transform:rotate(-45deg) scale(.4);
background:#e94834;
color:#fff;
font-size:22px;
opacity:0;
}
.map-pin::after{content:"";transform:rotate(45deg)}
.active .map-pin{animation:pinDrop .45s 1.45s cubic-bezier(.2,.8,.2,1.2) forwards}
.search-signal>b,.search-signal>small{position:relative;z-index:3;opacity:0}
.search-signal>b{margin-top:12px;color:#fff;font-size:14px;letter-spacing:.4px}
.search-signal>small{margin-top:3px;color:#6fa9dd;font-size:8px;font-weight:950;letter-spacing:1px}
.active .search-signal>b,.active .search-signal>small{animation:captionIn .35s 1.8s forwards}
.signal-ring{
position:absolute;
width:50px;height:50px;
border:1px solid #2c7ec3;
border-radius:50%;
opacity:0;
}
.active .signal-ring{animation:signalRing 1.5s 1.7s ease-out infinite}
.active .signal-ring.r2{animation-delay:2.05s}
.active .signal-ring.r3{animation-delay:2.4s}
.provider-hit{
padding:13px 14px;
border:1px solid #2c7ac0;
border-radius:12px;
background:linear-gradient(90deg,#0d2943,#164d7c);
transform:translateY(14px);
opacity:0;
}
.provider-hit span,.provider-hit b,.provider-hit small{display:block}
.provider-hit span{color:#8fc8fa;font-size:7px;font-weight:950;letter-spacing:.9px}
.provider-hit b{margin-top:4px;color:#fff;font-size:13px}
.provider-hit small{margin-top:3px;color:#9bb7cf;font-size:8px}
.active .provider-hit{animation:providerHit .45s 2.4s ease forwards}
/* Scene 4 */
.contact-flow-visual{
display:grid;
grid-template-columns:150px 1fr 250px;
gap:12px;
align-items:center;
}
.contact-customer{
padding:18px 12px;
border:1px solid #73443e;
border-radius:15px;
background:linear-gradient(145deg,#3d1916,#67231d);
text-align:center;
opacity:0;
}
.contact-customer>span{font-size:37px}
.contact-customer b,.contact-customer small{display:block}
.contact-customer b{margin-top:8px;color:#fff;font-size:10px}
.contact-customer small{margin-top:3px;color:#e0aaa4;font-size:8px}
.active .contact-customer{animation:captionIn .4s .3s forwards}
.flow-line{
position:relative;
height:4px;
background:#173a57;
border-radius:5px;
}
.flow-line:after{
content:"";
position:absolute;inset:0;
width:0;
border-radius:5px;
background:linear-gradient(90deg,#e84934,#4c9fea);
}
.active .flow-line:after{animation:lineFill 1.1s .8s ease forwards}
.flow-packet{
position:absolute;
top:50%;
left:0;
z-index:3;
display:grid;place-items:center;
width:34px;height:34px;
margin-top:-17px;
border-radius:50%;
background:#f6fbff;
color:#1b5f9d;
font-style:normal;
opacity:0;
}
.active .flow-packet{animation:packetTravel 1.4s 1.15s ease-in-out forwards}
.active .flow-packet.p2{animation-delay:1.5s}
.contact-provider{
display:grid;
gap:10px;
}
.provider-phone,.provider-inbox{
display:flex;
align-items:center;
gap:10px;
padding:13px;
border:1px solid #2f668f;
border-radius:12px;
background:#0d2b45;
opacity:0;
transform:translateX(15px);
}
.active .provider-phone{animation:providerReceive .4s 2.2s forwards}
.active .provider-inbox{animation:providerReceive .4s 2.55s forwards}
.provider-phone>span,.provider-inbox>span{
display:grid;place-items:center;
width:34px;height:34px;border-radius:9px;
background:#174a74;font-size:18px;
}
.provider-phone small,.provider-phone b,.provider-inbox small,.provider-inbox b{display:block}
.provider-phone small,.provider-inbox small{color:#80a8c8;font-size:7px}
.provider-phone b,.provider-inbox b{color:#fff;font-size:11px;margin-top:2px}
.contact-status{
padding:9px;
border:1px solid #377960;
border-radius:9px;
background:#123a2d;
color:#75d2aa;
text-align:center;
font-size:8px;
font-weight:950;
letter-spacing:.8px;
opacity:0;
}
.active .contact-status{animation:captionIn .35s 3s forwards}
/* Scene 5 */
.completion-visual{
display:flex;
flex-direction:column;
justify-content:center;
}
.completion-flow{
display:grid;
grid-template-columns:1fr auto 1fr auto 1fr;
gap:10px;
align-items:center;
}
.completion-flow>i{color:#4d84ae;font-size:24px;font-style:normal;opacity:.4}
.complete-node{
min-height:130px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:14px;
border:1px solid #315d7e;
border-radius:15px;
background:#0d293f;
opacity:0;
transform:translateY(14px);
}
.complete-node>span{font-size:30px}
.complete-node small{margin-top:8px;color:#7e9db7;font-size:7px;font-weight:950;letter-spacing:.8px}
.complete-node b{margin-top:4px;color:#fff;font-size:14px}
.complete-node.job{border-color:#3d8061;background:#123a2d}
.complete-node.review{border-color:#8c752f;background:#473b17}
.active .complete-node.call{animation:providerHit .4s .3s forwards}
.active .complete-node.job{animation:providerHit .4s 1s forwards}
.active .complete-node.review{animation:providerHit .4s 1.7s forwards}
.completion-bottom{
margin-top:22px;
padding:18px;
border:1px solid #3b72a4;
border-radius:13px;
background:linear-gradient(90deg,#071726,#0d3252);
text-align:center;
opacity:0;
}
.completion-bottom span,.completion-bottom b,.completion-bottom em{display:inline-block}
.completion-bottom span{color:#a8c8e3;font-size:11px;font-weight:900}
.completion-bottom b{margin-left:5px;color:#fff;font-size:20px}
.completion-bottom em{margin-left:5px;color:#67aff1;font-size:20px;font-style:normal;font-weight:950}
.active .completion-bottom{animation:captionIn .5s 2.35s forwards}
.cinema-caption{
position:absolute;
left:20px;
bottom:18px;
z-index:5;
display:flex;
align-items:center;
gap:9px;
padding:8px 11px;
border:1px solid rgba(103,166,222,.22);
border-radius:8px;
background:rgba(4,14,23,.72);
backdrop-filter:blur(6px);
}
.cinema-caption span{
color:#64aaea;
font-size:9px;
font-weight:950;
}
.cinema-caption b{
color:#cbddeb;
font-size:8px;
letter-spacing:.8px;
}
.cinema-timeline{
padding:0 18px 15px;
background:#07121e;
}
.timeline-track{
height:4px;
overflow:hidden;
border-radius:5px;
background:#183047;
}
.timeline-track>span{
display:block;
width:0;
height:100%;
border-radius:5px;
background:linear-gradient(90deg,#2b79bd,#65b6fa);
box-shadow:0 0 12px rgba(78,164,236,.65);
transition:width .3s linear;
}
.timeline-chapters{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:5px;
margin-top:9px;
}
.timeline-chapters .walk-dot{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
min-height:36px;
width:auto;height:auto;
margin:0;
padding:6px 8px;
border:1px solid transparent;
border-radius:8px;
background:transparent;
color:#67849d;
cursor:pointer;
}
.timeline-chapters .walk-dot span{
font-size:7px;
font-weight:950;
}
.timeline-chapters .walk-dot b{
font-size:8px;
letter-spacing:.4px;
}
.timeline-chapters .walk-dot.active{
border-color:#2c608a;
background:#0d2a43;
color:#a9d1f2;
}
.cinema-after{
max-width:1080px;
display:grid;
grid-template-columns:auto 1fr auto;
gap:15px;
align-items:center;
margin:16px auto 0;
padding:12px 16px;
border:1px solid #cedbe6;
border-radius:12px;
background:#fff;
}
.cinema-after span{
color:#1e64a4;
font-size:8px;
font-weight:950;
letter-spacing:1px;
}
.cinema-after b{
color:#445e75;
font-size:11px;
}
.cinema-after a{
color:#1a5b98;
font-size:10px;
font-weight:900;
text-decoration:none;
}
/* Pause all in-scene animations without changing layout */
.cinema-player.paused .cinema-scene *,
.cinema-player.paused .cinema-scan,
.cinema-player.paused .cinema-live-dot{
animation-play-state:paused!important;
}
@keyframes cinemaPulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@keyframes cinemaScan{0%{transform:translateY(0)}100%{transform:translateY(760px)}}
@keyframes choiceRise{to{opacity:1;transform:translateY(0)}}
@keyframes choicePulse{0%{opacity:.65;transform:scale(.96)}100%{opacity:0;transform:scale(1.08)}}
@keyframes lineFill{to{width:100%}}
@keyframes captionIn{to{opacity:1;transform:none}}
@keyframes typeReveal{to{width:100%}}
@keyframes statusOn{to{opacity:1}}
@keyframes searchType{to{width:100%}}
@keyframes pinDrop{to{opacity:1;transform:rotate(-45deg) scale(1)}}
@keyframes signalRing{0%{opacity:.45;transform:scale(.8)}100%{opacity:0;transform:scale(3.3)}}
@keyframes providerHit{to{opacity:1;transform:translateY(0)}}
@keyframes packetTravel{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 34px);opacity:0}}
@keyframes providerReceive{to{opacity:1;transform:translateX(0)}}
@media(max-width:900px){
.cinema-stage{min-height:760px}
.cinema-scene{
grid-template-columns:1fr;
align-content:center;
gap:24px;
padding:35px 30px 70px;
}
.scene-copy{text-align:center}
.scene-copy p{margin-left:auto;margin-right:auto}
.scene-number{font-size:45px}
.scene-copy h3{font-size:36px}
.scene-visual{min-height:300px}
.cinema-after{grid-template-columns:1fr;text-align:center}
}
@media(max-width:650px){
.cinematic-walkthrough{padding:60px 0}
.cinema-player{border-radius:16px}
.cinema-chrome{align-items:flex-start;flex-direction:column}
.cinema-controls{width:100%;justify-content:space-between}
.cinema-stage{min-height:825px}
.cinema-scene{padding:28px 18px 70px}
.operation-visual{grid-template-columns:1fr}
.operation-choice{min-height:90px;flex-direction:row;gap:10px;justify-content:flex-start}
.operation-choice small{margin:0 0 0 auto}
.selection-line,.selected-caption{grid-column:1}
.contact-flow-visual{grid-template-columns:1fr}
.flow-line{height:55px;width:4px;margin:auto}
.flow-line:after{width:100%;height:0}
.active .flow-line:after{animation:lineFillVertical 1.1s .8s ease forwards}
.active .flow-packet{animation:packetTravelVertical 1.4s 1.15s ease-in-out forwards}
.completion-flow{grid-template-columns:1fr}
.completion-flow>i{transform:rotate(90deg);text-align:center}
.completion-bottom span,.completion-bottom b,.completion-bottom em{display:block;margin:3px 0}
.timeline-chapters .walk-dot b{display:none}
.cinematic-heading p{font-size:15px}
}
@keyframes lineFillVertical{to{height:100%}}
@keyframes packetTravelVertical{0%{top:0;left:50%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 34px);left:50%;opacity:0}}
@media(prefers-reduced-motion:reduce){
.cinema-player *{animation:none!important;transition:none!important}
.cinema-scene{display:none;opacity:1;transform:none}
.cinema-scene.active{display:grid}
.operation-choice,.provider-hit,.contact-customer,.provider-phone,.provider-inbox,.contact-status,.complete-node,.completion-bottom,.profile-build-status i,.search-signal>b,.search-signal>small{
opacity:1!important;transform:none!important;
}
.typing-row b,.search-demo-bar b{width:100%!important}
}
/* ==========================================================
V5.7.1 — ENLARGED / GLOWING NO-PAY-PER-LEAD MESSAGE
========================================================== */
.money-bottom-line{
grid-template-columns:430px 1fr;
gap:34px;
padding:22px 28px;
border:2px solid #5d9dde;
border-radius:20px;
background:
radial-gradient(circle at 12% 50%, rgba(67,145,229,.18), transparent 30%),
linear-gradient(90deg,#05111d 0%,#0a2136 45%,#0d2d49 100%);
box-shadow:
0 0 0 1px rgba(121,181,244,.08) inset,
0 20px 45px rgba(2,13,24,.24);
}
.money-bottom-line > div:first-child{
position:relative;
padding:22px 24px;
border:2px solid rgba(117,181,245,.55);
border-radius:18px;
background:
radial-gradient(circle at 20% 40%, rgba(96,176,255,.16), transparent 42%),
linear-gradient(135deg, rgba(6,25,43,.96), rgba(8,38,65,.96));
box-shadow:
0 0 28px rgba(68,154,241,.18),
inset 0 0 26px rgba(72,160,247,.07);
}
.money-bottom-line > div:first-child::after{
content:"";
position:absolute;
inset:-1px;
border-radius:18px;
pointer-events:none;
box-shadow:0 0 38px rgba(71,160,247,.16);
}
.money-bottom-line>div b{
font-size:15px;
line-height:1.35;
color:#8fc9ff;
letter-spacing:1.4px;
}
.money-bottom-line>div span{
font-size:26px;
line-height:1.28;
color:#ffffff;
margin-top:7px;
font-weight:900;
max-width:300px;
}
.money-bottom-line>strong{
font-size:44px;
line-height:1.1;
letter-spacing:-1.3px;
text-shadow:0 1px 0 rgba(0,0,0,.2);
}
.money-bottom-line>strong em{
color:#7bc2ff;
}
@media(max-width:1050px){
.money-bottom-line{
grid-template-columns:1fr;
gap:18px;
}
.money-bottom-line > div:first-child{
max-width:100%;
}
.money-bottom-line>div span{
max-width:none;
font-size:23px;
}
.money-bottom-line>strong{
text-align:left;
font-size:38px;
}
}
@media(max-width:650px){
.money-bottom-line{
padding:18px;
}
.money-bottom-line > div:first-child{
padding:18px;
}
.money-bottom-line>div b{
font-size:13px;
}
.money-bottom-line>div span{
font-size:21px;
}
.money-bottom-line>strong{
font-size:31px;
}
}
/* ==========================================================
V5.8 — PACKAGE-SPECIFIC BENEFIT DEMOS
========================================================== */
.package-demo-section{
padding:78px 0;
background:
radial-gradient(circle at 15% 12%,rgba(46,126,206,.10),transparent 26%),
linear-gradient(180deg,#f3f7fa,#eaf1f7);
}
.package-demo-heading h2{
font-size:clamp(40px,5vw,58px)!important;
letter-spacing:-2px!important;
}
.package-demo-heading p{
max-width:760px;
margin-left:auto;
margin-right:auto;
font-size:16px;
}
.package-demo-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
max-width:1160px;
margin:30px auto 0;
}
.package-demo-card{
position:relative;
min-height:310px;
display:flex;
flex-direction:column;
padding:25px;
border:2px solid #c6d6e4;
border-radius:20px;
background:#fff;
box-shadow:0 18px 42px rgba(13,45,77,.08);
}
.package-demo-card.local{border-color:#80b4e5}
.package-demo-card.market{
border-color:#ddae39;
background:linear-gradient(180deg,#fffefa,#fff9e9);
transform:translateY(-8px);
box-shadow:0 26px 58px rgba(93,68,12,.14);
}
.package-demo-card.state{border-color:#839eb9}
.demo-ribbon{
position:absolute;
top:13px;
right:13px;
padding:6px 8px;
border-radius:999px;
background:#f4d06a;
color:#674d11;
font-size:7px;
font-weight:950;
letter-spacing:.7px;
}
.demo-plan-icon{
display:grid;
place-items:center;
width:52px;
height:52px;
margin-bottom:18px;
border-radius:14px;
background:#eaf3fd;
color:#1f65a5;
font-size:25px;
}
.package-demo-card.market .demo-plan-icon{background:#fff0c3;color:#856212}
.package-demo-card.state .demo-plan-icon{background:#edf2f6;color:#425f7a}
.package-demo-card>span{
color:#1e5f9d;
font-size:8px;
font-weight:950;
letter-spacing:1.1px;
}
.package-demo-card h3{
margin:6px 0 9px;
color:#172d43;
font-size:31px;
letter-spacing:-1px;
}
.package-demo-card p{
flex-grow:1;
color:#60758a;
font-size:13px;
line-height:1.6;
}
.watch-plan-demo,
.plan-demo-link{
min-height:48px;
padding:10px 12px;
border:2px solid #8db6da;
border-radius:10px;
background:#eef6fe;
color:#195c99;
font-size:12px;
font-weight:950;
cursor:pointer;
}
.watch-plan-demo.primary-demo{
border-color:#cf9d24;
background:linear-gradient(180deg,#f5ce62,#e5b33c);
color:#4d390c;
}
.plan-demo-link{
width:100%;
margin:8px 0;
background:linear-gradient(180deg,#f5f9fd,#e9f3fc);
}
.plan-demo-link.market{
border-color:#deb54e;
background:#fff7dd;
color:#705216;
}
/* Dedicated demo modal */
.benefit-demo-modal{
position:fixed;
inset:0;
z-index:10020;
display:none;
}
.benefit-demo-modal.open{display:block}
.benefit-demo-backdrop{
position:absolute;
inset:0;
background:rgba(3,12,20,.78);
backdrop-filter:blur(5px);
}
.benefit-demo-dialog{
position:relative;
width:min(1050px,calc(100vw - 28px));
max-height:calc(100vh - 28px);
overflow:auto;
margin:14px auto;
border:2px solid #406d98;
border-radius:23px;
background:#06111c;
color:#fff;
box-shadow:0 36px 90px rgba(0,0,0,.42);
}
.benefit-demo-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
min-height:68px;
padding:12px 18px;
border-bottom:1px solid #31516d;
background:linear-gradient(90deg,#081522,#0d2942);
}
.benefit-demo-top>div:first-child span,
.benefit-demo-top>div:first-child b{display:block}
.benefit-demo-top>div:first-child span{
color:#75b2ea;
font-size:8px;
font-weight:950;
letter-spacing:1.2px;
}
.benefit-demo-top>div:first-child b{
margin-top:3px;
font-size:21px;
}
.benefit-demo-actions{
display:flex;
align-items:center;
gap:7px;
}
.benefit-demo-actions>span{
color:#88a7c2;
font-size:9px;
font-variant-numeric:tabular-nums;
}
.benefit-demo-actions button{
min-height:35px;
padding:7px 10px;
border:1px solid #436887;
border-radius:8px;
background:#14334e;
color:#e2edf6;
font-size:9px;
font-weight:900;
cursor:pointer;
}
.benefit-demo-actions .benefit-demo-close{
width:37px;
padding:0;
font-size:22px;
}
.benefit-demo-stage{
min-height:485px;
padding:42px;
background:
radial-gradient(circle at 82% 18%,rgba(53,132,211,.18),transparent 26%),
linear-gradient(145deg,#06101a,#0b1f33);
}
.benefit-demo-scene{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:40px;
align-items:center;
min-height:390px;
}
.demo-scene-copy>span{
color:#67a9e6;
font-size:9px;
font-weight:950;
letter-spacing:1.3px;
}
.demo-scene-copy h3{
margin:8px 0 13px;
color:#fff;
font-size:44px;
line-height:1.02;
letter-spacing:-1.6px;
}
.demo-scene-copy p{
color:#adc2d4;
font-size:15px;
line-height:1.65;
}
.demo-scene-visual{
min-height:290px;
display:grid;
place-items:center;
}
.demo-scene-visual>div{
width:min(100%,520px);
}
/* Local visuals */
.demo-profile-card{
padding:27px;
border:2px solid #4e8ac2;
border-radius:19px;
background:linear-gradient(145deg,#0f3150,#164c79);
box-shadow:0 25px 50px rgba(0,0,0,.28);
}
.demo-profile-card>span,.demo-profile-card>b,.demo-profile-card>small{display:block}
.demo-profile-card>span{color:#8ec9fa;font-size:8px;font-weight:950;letter-spacing:1px}
.demo-profile-card>b{margin:8px 0 3px;font-size:28px}
.demo-profile-card>small{color:#a9c3d9}
.demo-profile-card>div{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:22px}
.demo-profile-card i{padding:10px 5px;border:1px solid #4c7596;border-radius:8px;background:#0b2943;color:#9fc2df;font-size:8px;font-style:normal;text-align:center}
.demo-search-card{
padding:22px;
border:1px solid #436b8b;
border-radius:17px;
background:#0a1e30;
}
.demo-search-card>div{padding:14px;border-radius:10px;background:#fff;color:#304b65;font-size:13px}
.demo-search-card>span,.demo-search-card>b,.demo-search-card>small{display:block}
.demo-search-card>span{margin-top:22px;color:#6ea9df;font-size:9px;font-weight:950}
.demo-search-card>b{margin-top:7px;padding:16px;border:2px solid #4e9be0;border-radius:12px;background:#123c61;font-size:20px}
.demo-search-card>small{margin-top:5px;color:#8daac2}
.demo-direct-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.demo-direct-grid>div{padding:25px;border:1px solid #386c97;border-radius:15px;background:#0d2d49;text-align:center}
.demo-direct-grid span{font-size:36px}
.demo-direct-grid b,.demo-direct-grid small{display:block}
.demo-direct-grid b{margin-top:8px}
.demo-direct-grid small{margin-top:4px;color:#87a8c3}
.demo-payback{padding:28px;border:2px solid #4d8dca;border-radius:19px;background:linear-gradient(145deg,#0b2944,#124e80);text-align:center}
.demo-payback span,.demo-payback b,.demo-payback small{display:block}
.demo-payback span{color:#8cc4f4;font-size:9px;font-weight:950}
.demo-payback b{margin:7px 0;font-size:62px;letter-spacing:-2px}
.demo-payback small{color:#b8d1e7}
.demo-payback>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:20px}
.demo-payback i{height:13px;border-radius:8px;background:#62aef0}
/* Market leader visuals */
.demo-ranking{display:grid;gap:9px}
.demo-ranking>div{padding:14px;border-radius:11px}
.rank-basic{border:1px solid #405363;background:#121d27;color:#758694}
.rank-premium{border:1px solid #39729f;background:#0f314e;color:#a8cae7}
.rank-leader{border:2px solid #dfb84f;background:linear-gradient(90deg,#4e3c11,#73581a);color:#ffe9a4;font-size:20px;font-weight:950;box-shadow:0 0 25px rgba(223,184,79,.15)}
.demo-call-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:9px;align-items:center}
.demo-call-flow>div{padding:18px;border:1px solid #3c6789;border-radius:13px;background:#0d2a42;text-align:center}
.demo-call-flow>div.tracked{border-color:#d6ae45;background:#4b3a12}
.demo-call-flow span{display:block;font-size:29px}
.demo-call-flow b{display:block;margin-top:5px;font-size:10px}
.demo-call-flow>i{color:#68a9df;font-size:22px;font-style:normal}
.demo-dashboard{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:9px;
padding:21px;
border:1px solid #406c8e;
border-radius:16px;
background:#0a2032;
}
.demo-dashboard>span{grid-column:1/-1;color:#78afe0;font-size:8px;font-weight:950;letter-spacing:.9px}
.demo-dashboard>div{padding:17px;border:1px solid #344f65;border-radius:10px;background:#101c27;text-align:center}
.demo-dashboard>div.green{border-color:#3d765d;background:#123a2c}
.demo-dashboard b,.demo-dashboard small{display:block}
.demo-dashboard b{font-size:35px}
.demo-dashboard small{margin-top:3px;color:#8198aa;font-size:7px}
.demo-review-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:center}
.demo-review-flow>div{padding:20px 10px;border:1px solid #537089;border-radius:12px;background:#0e2b43;text-align:center}
.demo-review-flow>i{color:#72a9d6;font-style:normal;font-size:20px}
.demo-review-flow b{font-size:9px}
.demo-weekly{padding:24px;border:2px solid #ddb34a;border-radius:17px;background:linear-gradient(145deg,#30270e,#5b4611)}
.demo-weekly span,.demo-weekly b,.demo-weekly small{display:block}
.demo-weekly span{color:#f3d884;font-size:8px;font-weight:950;letter-spacing:1px}
.demo-weekly b{margin-top:10px;font-size:24px}
.demo-weekly small{margin-top:16px;color:#e1cf9d}
/* State visuals */
.demo-state-map{
min-height:300px;
position:relative;
border:2px solid #547492;
border-radius:18px;
background:linear-gradient(145deg,#10283e,#1a456b);
}
.demo-state-map>span{position:absolute;left:22px;top:17px;color:#88afd2;font-size:10px;font-weight:950;letter-spacing:1px}
.demo-state-map>i{position:absolute;padding:8px 10px;border-radius:999px;background:#eaf3fb;color:#244d73;font-size:9px;font-style:normal;font-weight:900}
.demo-state-map>i:nth-of-type(1){left:26%;top:38%}
.demo-state-map>i:nth-of-type(2){left:56%;top:25%}
.demo-state-map>i:nth-of-type(3){left:45%;top:55%}
.demo-state-map>i:nth-of-type(4){left:35%;top:72%}
.demo-state-map>b{position:absolute;left:20px;right:20px;bottom:17px;padding:11px;border:1px solid #6b90b3;border-radius:9px;background:#0b2337;text-align:center}
.demo-routing-grid{display:grid;gap:9px}
.demo-routing-grid>div{display:flex;justify-content:space-between;gap:10px;padding:16px;border:1px solid #456886;border-radius:11px;background:#0d293f}
.demo-routing-grid span{color:#83abd0;font-size:9px;font-weight:950}
.demo-branch-reviews{display:grid;gap:9px}
.demo-branch-reviews>div{display:flex;justify-content:space-between;padding:17px;border:1px solid #55728b;border-radius:11px;background:#0e2b43}
.demo-branch-reviews b{color:#f0cf67}
.demo-state-report{padding:22px;border:1px solid #4a6b86;border-radius:15px;background:#0b2133}
.demo-state-report>span{display:block;color:#80aad0;font-size:8px;font-weight:950}
.demo-state-report>div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #28445a}
.demo-state-report i{color:#a6bfd3;font-style:normal}
.demo-state-report>strong{display:block;margin-top:17px;color:#75b8ee;font-size:25px}
.benefit-demo-progress{height:5px;background:#142b3e}
.benefit-demo-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#2b79bd,#65b6fa);transition:width .3s ease}
.benefit-demo-chapters{display:flex;justify-content:center;gap:7px;padding:11px;background:#07131f}
.benefit-demo-chapters button{width:34px;height:34px;border:1px solid #385a75;border-radius:9px;background:#0e2a42;color:#718ba2;font-size:9px;font-weight:950;cursor:pointer}
.benefit-demo-chapters button.active{border-color:#6eb1eb;background:#174f7d;color:#fff}
.benefit-demo-bottom{
display:grid;
grid-template-columns:1fr auto;
gap:20px;
align-items:center;
padding:16px 19px;
border-top:1px solid #294961;
background:#091827;
}
.benefit-demo-bottom>div{color:#a8bfd2;font-size:11px;line-height:1.5}
body.benefit-demo-open{overflow:hidden}
@media(max-width:850px){
.package-demo-grid{grid-template-columns:1fr}
.package-demo-card.market{transform:none}
.benefit-demo-scene{grid-template-columns:1fr}
.benefit-demo-stage{padding:28px;min-height:650px}
.demo-scene-copy{text-align:center}
.demo-scene-copy h3{font-size:36px}
.benefit-demo-bottom{grid-template-columns:1fr}
}
@media(max-width:600px){
.benefit-demo-top{align-items:flex-start;flex-direction:column}
.benefit-demo-actions{width:100%;flex-wrap:wrap}
.benefit-demo-stage{padding:20px;min-height:720px}
.demo-call-flow,.demo-review-flow{grid-template-columns:1fr}
.demo-call-flow>i,.demo-review-flow>i{transform:rotate(90deg);text-align:center}
.demo-direct-grid{grid-template-columns:1fr}
.demo-profile-card>div{grid-template-columns:1fr 1fr}
}
/* ==========================================================
V5.8.1 — SITE-WIDE FORM DESIGN SYSTEM
Fixes legacy browser-default fields across the entire site.
========================================================== */
:root{
--form-border:#b9cada;
--form-border-strong:#7ca9d3;
--form-bg:#ffffff;
--form-bg-soft:#f8fbfd;
--form-text:#1b3248;
--form-muted:#71869a;
--form-blue:#185b9d;
--form-focus:rgba(35,111,184,.13);
}
/* All standard fields, everywhere on the public site. */
form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]),
form select,
form textarea{
display:block;
width:100%;
min-width:0;
min-height:50px;
margin-top:7px;
padding:12px 14px;
border:1.5px solid var(--form-border);
border-radius:11px;
background:var(--form-bg);
color:var(--form-text);
font-family:inherit;
font-size:15px;
font-weight:650;
line-height:1.35;
outline:none;
box-shadow:0 1px 0 rgba(18,47,76,.025);
transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
form textarea{
min-height:125px;
resize:vertical;
}
form select{
cursor:pointer;
padding-right:38px;
appearance:auto;
}
form input::placeholder,
form textarea::placeholder{
color:#8a99a8;
opacity:1;
font-weight:600;
}
form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
form select:focus,
form textarea:focus{
border-color:#2a73b9;
background:#fbfdff;
box-shadow:0 0 0 4px var(--form-focus);
}
/* Labels and help copy */
form label{
display:block;
min-width:0;
margin:0 0 16px;
color:#29445e;
font-size:12px;
font-weight:900;
line-height:1.3;
}
form .field-help,
form label > small{
display:block;
margin-top:6px;
color:var(--form-muted);
font-size:9px;
font-weight:650;
line-height:1.45;
}
/* Correct the legacy tiny fixed-width grid. */
.form-grid{
display:grid;
width:100%;
gap:14px 16px;
align-items:start;
}
.form-grid.two{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.form-grid.three,
.form-grid.location-three{
grid-template-columns:minmax(0,1.7fr) minmax(110px,.65fr) minmax(130px,.8fr);
}
.form-grid > *{
min-width:0;
}
.field-full{
width:100%;
}
/* Provider signup gets slightly roomier fields. */
.provider-signup-form .signup-step{
padding:28px;
border:1.5px solid #cbd9e5;
box-shadow:0 10px 28px rgba(16,45,75,.045);
}
.provider-signup-form .signup-step-head{
padding-bottom:16px;
margin-bottom:22px;
border-bottom:1px solid #e8eef3;
}
.provider-signup-form .signup-step-head>span{
min-width:39px;
width:39px;
height:39px;
border-radius:11px;
font-size:11px;
box-shadow:0 5px 12px rgba(18,63,118,.12);
}
.provider-signup-form .signup-step-head b{
color:#172d43;
font-size:20px;
}
.provider-signup-form .signup-step-head small{
color:#71869a;
font-size:11px;
line-height:1.4;
}
/* Make the State Pro state field visually intentional. */
.provider-signup-form input[name="state_coverage"]{
max-width:260px;
text-transform:uppercase;
font-weight:850;
}
/* Social fields: clean URL layout */
.social-link-grid label{
margin-bottom:7px;
}
.social-link-grid input{
font-size:13px!important;
}
/* Checkbox / radio baseline — specialized cards can override. */
form input[type="checkbox"],
form input[type="radio"]{
accent-color:#1761a8;
}
/* Generic checkbox rows outside special pickers. */
form label:has(> input[type="checkbox"]):not(.check-row):not(.show-rate):not(.consent-check){
min-width:0;
}
/* File upload normalization */
form input[type="file"]{
max-width:100%;
font-family:inherit;
color:#526b82;
font-size:12px;
}
form input[type="file"]::file-selector-button{
min-height:38px;
margin-right:10px;
padding:8px 12px;
border:1px solid #aec7df;
border-radius:8px;
background:#eaf3fc;
color:#185990;
font-family:inherit;
font-weight:900;
cursor:pointer;
}
/* Search forms retain their compact treatment. */
.hero-search input,
.results-search input{
min-height:50px;
margin-top:0!important;
}
.hero-search label{
margin-bottom:10px;
}
/* Form cards / policy forms / claim forms now share visual polish. */
.form-card,
.content-card form{
min-width:0;
}
.form-card{
border:1.5px solid #cad9e6;
box-shadow:0 18px 45px rgba(22,56,91,.075);
}
.form-card h2{
color:#172d43;
}
/* Business type cards remain clean and don't inherit normal field boxes. */
.business-type-picker label{
margin-bottom:0;
}
.business-type-picker label>span{
min-height:120px;
padding:18px;
border:1.5px solid #cbd9e5;
background:#f8fbfd;
}
.business-type-picker input:checked+span{
border:2px solid #2469ad;
background:linear-gradient(180deg,#edf6ff,#e4f1fd);
box-shadow:0 0 0 4px rgba(36,105,173,.08);
}
/* Toggle cards */
.toggle-grid label{
margin-bottom:0;
}
.toggle-grid label>span{
min-height:70px;
padding:14px 14px 14px 42px;
border:1.5px solid #d0dce6;
background:#f8fbfd;
}
.toggle-grid input{
width:18px;
height:18px;
}
/* Rate section */
.rate-section{
padding:19px;
border:1.5px solid #c5d7e7;
background:#f3f8fc;
}
.rate-row{
grid-template-columns:minmax(0,1fr) 165px;
gap:14px;
padding:5px 0;
}
.show-rate{
min-height:50px;
display:flex!important;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 12px;
border:1.5px solid #c8d8e6;
border-radius:10px;
background:#fff;
color:#365a7a!important;
}
.show-rate input{
width:18px;
height:18px;
}
/* Sticky submit bar spacing */
.signup-submit-bar{
bottom:14px;
padding:16px 18px;
border:1.5px solid #6d96bd;
}
/* Corrections / Add Business / Claim get more breathing room even if
they do not use provider-signup classes. */
.form-card form,
.content-card form{
width:100%;
}
.form-card form > h2,
.content-card form > h2{
margin-top:25px;
padding-bottom:8px;
border-bottom:1px solid #e7edf2;
}
.form-card form > h2:first-child,
.content-card form > h2:first-child{
margin-top:0;
}
/* Call dashboard consent field */
.consent-check{
display:flex!important;
align-items:flex-start;
gap:9px;
margin:0!important;
color:#526b82!important;
font-size:10px!important;
line-height:1.4;
}
.consent-check input{
width:18px;
height:18px;
flex:0 0 18px;
}
/* Mobile */
@media(max-width:760px){
.form-grid.two,
.form-grid.three,
.form-grid.location-three{
grid-template-columns:1fr;
gap:0;
}
.provider-signup-form .signup-step{
padding:20px 17px;
}
.rate-row{
grid-template-columns:1fr;
}
.show-rate{
justify-content:flex-start;
min-height:44px;
}
.provider-signup-form input[name="state_coverage"]{
max-width:none;
}
}
/* ==========================================================
V5.8.2 — BILLING SAVINGS + ANNUAL AUTO-RENEW DISCLOSURE
========================================================== */
.billing-toggle-wrap{
max-width:1180px;
display:grid;
grid-template-columns:1fr auto;
gap:14px 24px;
align-items:center;
margin:0 auto 26px;
padding:19px 21px;
border:2px solid #b9d0e4;
border-radius:17px;
background:linear-gradient(180deg,#fff,#f5f9fd);
box-shadow:0 12px 28px rgba(19,55,89,.06);
}
.billing-toggle-label span,.billing-toggle-label b{display:block}
.billing-toggle-label span{color:#1c61a0;font-size:9px;font-weight:950;letter-spacing:1.15px}
.billing-toggle-label b{margin-top:4px;color:#1a334b;font-size:19px}
.billing-toggle{display:flex;padding:5px;border:1.5px solid #bad0e2;border-radius:12px;background:#eaf1f7}
.billing-toggle-btn{min-width:145px;min-height:48px;padding:8px 13px;border:0;border-radius:9px;background:transparent;color:#5a7084;font-size:13px;font-weight:900;cursor:pointer}
.billing-toggle-btn small{display:block;margin-top:1px;color:#8b6a1b;font-size:7px;letter-spacing:.7px}
.billing-toggle-btn.active{background:#fff;color:#174f86;box-shadow:0 4px 13px rgba(22,61,101,.12)}
.billing-toggle-btn[data-billing="annual"].active{background:linear-gradient(180deg,#fff9e7,#fff1c8);color:#654a0d}
.annual-ladder{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.annual-ladder span{padding:10px 11px;border:1px solid #d1dce5;border-radius:9px;background:#fff;color:#64798d;font-size:10px;text-align:center}
.annual-ladder b{color:#244966}
.annual-renew-fineprint{
grid-column:1/-1;
padding:10px 12px;
border-top:1px solid #d9e3eb;
color:#778797;
font-size:8px;
line-height:1.55;
}
.annual-savings-badge{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin:7px 0 12px;
padding:8px 9px;
border:1px solid #e4c96c;
border-radius:9px;
background:linear-gradient(180deg,#fff9e4,#ffefb8);
color:#72520d;
font-size:9px;
font-weight:950;
}
.annual-savings-badge b{color:#4f3909}
.billing-choice-step{border:2px solid #9ec2e2!important;background:linear-gradient(180deg,#fbfdff,#f0f7fd)!important}
.billing-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.billing-choice-grid label{margin:0!important;cursor:pointer}
.billing-choice-grid input{position:absolute;opacity:0;pointer-events:none}
.billing-choice-grid label>span{min-height:150px;display:flex;flex-direction:column;justify-content:center;padding:18px;border:2px solid #c9d8e4;border-radius:14px;background:#fff;transition:.16s ease}
.billing-choice-grid label input:checked+span{border-color:#2b72b5;background:linear-gradient(180deg,#f4faff,#e8f4ff);box-shadow:0 0 0 4px rgba(43,114,181,.09)}
.billing-choice-grid .annual-choice input:checked+span{border-color:#d3aa39;background:linear-gradient(180deg,#fffdf5,#fff3cf);box-shadow:0 0 0 4px rgba(211,170,57,.10)}
.billing-choice-grid small{color:#65809a;font-size:8px;font-weight:950;letter-spacing:1px}
.billing-choice-grid strong{margin:7px 0 4px;color:#193c60;font-size:31px;line-height:1}
.billing-choice-grid strong em{color:#72879a;font-size:11px;font-style:normal}
.billing-choice-grid b{color:#1f5f9c;font-size:11px}
.billing-choice-grid .annual-choice b{color:#87620e}
.billing-choice-grid i{margin-top:4px;color:#75889a;font-size:9px;font-style:normal}
.annual-renew-terms{
margin-top:14px;
padding:13px 14px;
border:1.5px solid #d9bf68;
border-radius:11px;
background:#fff9e5;
}
.annual-renew-terms[hidden]{display:none!important}
.annual-renew-terms label{
display:flex!important;
align-items:flex-start;
gap:10px;
margin:0!important;
cursor:pointer;
}
.annual-renew-terms input{
position:static!important;
opacity:1!important;
pointer-events:auto!important;
width:19px!important;
height:19px!important;
flex:0 0 19px;
margin-top:2px!important;
}
.annual-renew-terms span b,.annual-renew-terms span small{display:block}
.annual-renew-terms span b{color:#694e11;font-size:11px}
.annual-renew-terms span small{margin-top:4px;color:#806f47;font-size:9px;line-height:1.5}
.welcome-call-step{border-color:#c9d7e3!important}
.signup-plan-pill .annual-save-pill{border-color:#d7b956!important;background:#fff3c6!important;color:#674b0c!important;font-weight:950}
@media(max-width:780px){
.billing-toggle-wrap{grid-template-columns:1fr}
.billing-toggle{width:100%}
.billing-toggle-btn{flex:1;min-width:0}
.annual-ladder,.billing-choice-grid{grid-template-columns:1fr}
}
/* V5.8.3 — CUSTOMER-ONLY HOMEPAGE */
.customer-help-section{padding:76px 0;background:#fff}
.customer-heading h2{max-width:850px;margin-left:auto;margin-right:auto}
.customer-heading p{max-width:780px;margin-left:auto;margin-right:auto}
.customer-help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:29px}
.customer-help-card{min-height:350px;display:flex;flex-direction:column;padding:27px;border:2px solid #cbd9e5;border-radius:20px;background:#f9fbfd;color:#243c54;text-decoration:none;box-shadow:0 15px 32px rgba(18,51,82,.06);transition:.16s ease}
.customer-help-card:hover{transform:translateY(-3px);box-shadow:0 22px 43px rgba(18,51,82,.11)}
.customer-help-card.shop-help{border-color:#7eb0df;background:linear-gradient(180deg,#fff,#f0f7fe)}
.customer-help-card.mobile-help{border-color:#5e8fbd;background:linear-gradient(180deg,#fff,#edf5fb)}
.customer-help-card.emergency-card{border-color:#df735e;background:linear-gradient(180deg,#fff,#fff0ed)}
.customer-help-icon{display:grid;place-items:center;width:57px;height:57px;margin-bottom:20px;border-radius:16px;background:#e9f3fc;font-size:29px}
.emergency-card .customer-help-icon{background:#ffe5df}
.customer-help-card>span{color:#1d5c99;font-size:9px;font-weight:950;letter-spacing:1.1px}
.emergency-card>span{color:#a43a2a}
.customer-help-card h3{margin:7px 0 10px;color:#152d43;font-size:28px;line-height:1.05;letter-spacing:-.8px}
.customer-help-card p{flex-grow:1;color:#60768a;font-size:13px;line-height:1.65}
.customer-help-card>b{margin-top:18px;color:#185b99;font-size:12px}
.emergency-card>b{color:#b43b2a}
.equipment-home-section{padding:72px 0;background:#eef4f8}
.consumer-equipment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.consumer-equipment-grid a{display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:center;min-height:100px;padding:17px;border:1.5px solid #c8d7e3;border-radius:14px;background:#fff;color:#29445c;text-decoration:none}
.consumer-equipment-grid a:hover{border-color:#79a9d5;box-shadow:0 11px 26px rgba(17,52,84,.08)}
.consumer-equipment-grid span{grid-row:1/3;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#eaf3fb;font-size:23px}
.consumer-equipment-grid b{align-self:end;font-size:13px}
.consumer-equipment-grid small{align-self:start;color:#768a9d;font-size:9px;line-height:1.35}
.customer-final-cta{padding:49px 0;background:radial-gradient(circle at 85% 35%,rgba(62,139,214,.19),transparent 28%),linear-gradient(135deg,#06111d,#123d6b);color:#fff}
.customer-final-inner{display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center}
.customer-final-inner span{color:#80b7e9;font-size:9px;font-weight:950;letter-spacing:1.25px}
.customer-final-inner h2{margin:5px 0 7px;font-size:35px;line-height:1.05;letter-spacing:-1.2px}
.customer-final-inner p{max-width:740px;margin:0;color:#b8cede;font-size:12px;line-height:1.6}
.consumer-disclosure{background:#f7f9fb}
@media(max-width:900px){
.customer-help-grid,.consumer-equipment-grid{grid-template-columns:1fr 1fr}
.customer-final-inner{grid-template-columns:1fr}
}
@media(max-width:650px){
.customer-help-grid,.consumer-equipment-grid{grid-template-columns:1fr}
.customer-help-card{min-height:0}
.customer-final-inner .btn{width:100%;text-align:center}
}
/* ==========================================================
V5.8.4 — FIND ME + 3 CLICK MAX CUSTOMER FLOW
========================================================== */
.consumer-hero .search-input-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
gap:9px;
}
.find-me-btn{
min-width:126px;
min-height:50px;
padding:10px 17px!important;
border:2px solid #1763aa!important;
border-radius:11px!important;
background:linear-gradient(180deg,#eef7ff,#dceeff)!important;
color:#14558f!important;
font-size:12px!important;
font-weight:950!important;
box-shadow:0 7px 18px rgba(21,88,148,.10);
white-space:nowrap;
}
.find-me-btn:hover{
background:linear-gradient(180deg,#e5f2ff,#d2e8fc)!important;
border-color:#0e5598!important;
}
.find-me-btn.locating{
cursor:wait;
opacity:.8;
}
.find-me-spinner{
display:inline-block;
width:15px;
height:15px;
margin-right:6px;
vertical-align:-3px;
border:2px solid #a9c0d5;
border-top-color:#185f9f;
border-radius:50%;
animation:findMeSpin .7s linear infinite;
}
.find-me-status{
min-height:0;
overflow:hidden;
color:#667d92;
font-size:10px;
font-weight:750;
line-height:1.4;
}
.find-me-status:not(:empty){
min-height:32px;
margin-top:9px;
padding:8px 10px;
border-radius:8px;
}
.find-me-status.working{background:#edf5fc;color:#2a628f}
.find-me-status.success{background:#e8f6ee;color:#267049}
.find-me-status.error{background:#fff0ed;color:#a3483b}
@keyframes findMeSpin{to{transform:rotate(360deg)}}
.detected-location-badge{
display:inline-flex;
align-items:center;
margin:5px 0 8px;
padding:7px 10px;
border:1px solid #76a9da;
border-radius:999px;
background:#e8f3fd;
color:#185c9a;
font-size:9px;
font-weight:950;
letter-spacing:.8px;
}
.detected-location-copy{
max-width:760px;
color:#c1d4e5!important;
font-size:13px!important;
}
.three-click-path{
display:flex;
align-items:center;
gap:9px;
flex-wrap:wrap;
margin:15px 0 18px;
}
.three-click-path span{
display:inline-flex;
align-items:center;
gap:7px;
padding:8px 10px;
border:1px solid #416a91;
border-radius:9px;
background:rgba(255,255,255,.06);
color:#d6e6f4;
font-size:9px;
font-weight:900;
}
.three-click-path span b{
display:grid;
place-items:center;
width:22px;
height:22px;
border-radius:7px;
background:#3179bc;
color:#fff;
}
.three-click-path i{
color:#7194b5;
font-style:normal;
}
.provider-card-clickable{
position:relative;
cursor:pointer;
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.provider-card-clickable:hover,
.provider-card-clickable:focus{
transform:translateY(-2px);
outline:none;
border-color:#6ca1d0!important;
box-shadow:0 19px 40px rgba(19,56,91,.13);
}
.provider-card-clickable:focus-visible{
box-shadow:0 0 0 4px rgba(44,116,181,.16),0 19px 40px rgba(19,56,91,.13);
}
.nearby-card-tip{
margin:12px 0 5px;
color:#5e7e9b;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
}
.nearby-card-tip::before{
content:"→ ";
color:#1e68a9;
}
.nearby-actions{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px!important;
}
.basic-free-actions.nearby-actions{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.nearby-actions .btn{
min-height:48px;
display:flex!important;
align-items:center;
justify-content:center;
padding:9px 10px!important;
text-align:center;
font-size:11px!important;
font-weight:950!important;
}
.directions-fast{
border:1.5px solid #7ea6c9!important;
background:#edf5fc!important;
color:#225f95!important;
}
.directions-fast:hover{
background:#dfedfa!important;
}
.nearby-help-card{
padding:17px;
border:2px solid #e17a67;
border-radius:14px;
background:linear-gradient(180deg,#fff7f5,#ffebe7);
}
.nearby-help-card span,.nearby-help-card b,.nearby-help-card p,.nearby-help-card a{display:block}
.nearby-help-card span{color:#b33d2c;font-size:8px;font-weight:950;letter-spacing:.8px}
.nearby-help-card b{margin-top:6px;color:#762b20;font-size:15px}
.nearby-help-card p{color:#845e58;font-size:10px;line-height:1.5}
.nearby-help-card a{color:#b33d2c;font-size:10px;font-weight:950;text-decoration:none}
@media(max-width:900px){
.consumer-hero .search-input-row{
grid-template-columns:minmax(0,1fr) auto;
}
.consumer-hero .find-service-btn{
grid-column:1/-1;
grid-row:2;
}
}
@media(max-width:650px){
.consumer-hero .search-input-row{
grid-template-columns:1fr;
}
.consumer-hero .find-service-btn,
.find-me-btn{
grid-column:1;
width:100%;
}
.nearby-actions,
.basic-free-actions.nearby-actions{
grid-template-columns:1fr;
}
.three-click-path{
display:grid;
grid-template-columns:1fr;
}
.three-click-path i{display:none}
}
/* ==========================================================
V5.8.5 — TWO-CHOICE SEARCH
Local first / Different Location reveals the address search.
========================================================== */
.choice-first-search{
padding:21px!important;
overflow:visible!important;
}
.choice-first-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
margin-bottom:13px;
}
.choice-first-heading span{
color:#1d62a2;
font-size:9px;
font-weight:950;
letter-spacing:1.05px;
}
.choice-first-heading b{
color:#1a334b;
font-size:17px;
}
.search-choice-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.search-choice-btn{
position:relative;
min-height:116px;
display:flex;
align-items:center;
gap:15px;
padding:17px 20px;
border-radius:22px;
cursor:pointer;
overflow:hidden;
text-align:left;
transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.search-choice-btn:hover{
transform:translateY(-2px);
}
.search-choice-btn:active{
transform:translateY(0) scale(.995);
}
.choice-main-icon{
flex:0 0 auto;
display:grid;
place-items:center;
width:54px;
height:54px;
border-radius:50%;
font-size:30px;
font-weight:950;
}
.choice-copy{
min-width:0;
display:flex;
flex-direction:column;
gap:5px;
}
.choice-copy strong{
font-size:18px;
line-height:1.05;
letter-spacing:-.3px;
}
.choice-copy small{
font-size:10px;
line-height:1.35;
font-weight:750;
}
.local-choice-btn{
border:3px solid #cf1d16!important;
background:
radial-gradient(circle at 32% 0%,rgba(255,255,255,.40),transparent 20%),
linear-gradient(180deg,#ff3429 0%,#d7150f 52%,#a70c08 100%)!important;
color:#fff!important;
box-shadow:
inset 0 2px 2px rgba(255,255,255,.36),
inset 0 -6px 15px rgba(80,0,0,.18),
0 0 0 5px rgba(226,34,25,.08),
0 13px 27px rgba(180,24,16,.25);
}
.local-choice-btn::before,
.local-choice-btn::after{
content:"";
position:absolute;
inset:-12px;
border:2px solid rgba(239,42,31,.22);
border-radius:29px;
pointer-events:none;
animation:localSearchPulse 2.1s ease-out infinite;
}
.local-choice-btn::after{
animation-delay:1.05s;
}
.local-choice-btn .choice-main-icon{
background:#fff;
color:#e11f17;
box-shadow:0 5px 15px rgba(83,0,0,.18);
}
.local-choice-btn .choice-copy small{color:#ffe7e4}
.different-choice-btn{
border:3px solid #145fc9!important;
background:
radial-gradient(circle at 30% 0%,rgba(255,255,255,.25),transparent 22%),
linear-gradient(180deg,#2578ee 0%,#125ed1 54%,#0d43a1 100%)!important;
color:#fff!important;
box-shadow:
inset 0 2px 2px rgba(255,255,255,.26),
inset 0 -6px 15px rgba(0,31,91,.18),
0 13px 27px rgba(18,84,175,.20);
}
.different-choice-btn .choice-main-icon{
background:#fff;
color:#1765d7;
box-shadow:0 5px 15px rgba(0,35,92,.17);
}
.different-choice-btn .choice-copy small{color:#ddebff}
.search-choice-btn.selected{
box-shadow:
0 0 0 6px rgba(54,134,218,.11),
0 18px 34px rgba(20,68,117,.24);
}
.manual-location-panel{
margin-top:15px;
padding:17px;
border:2px solid #8fb8dc;
border-radius:16px;
background:linear-gradient(180deg,#f8fcff,#edf6fe);
box-shadow:0 16px 30px rgba(27,71,112,.09);
}
.manual-location-panel[hidden]{display:none!important}
.manual-location-panel.open{
animation:manualPanelIn .22s ease-out both;
}
.manual-location-head{
display:flex;
justify-content:space-between;
gap:15px;
align-items:center;
margin-bottom:12px;
}
.manual-location-head span,
.manual-location-head b{
display:block;
}
.manual-location-head span{
color:#1e65a4;
font-size:8px;
font-weight:950;
letter-spacing:1.05px;
}
.manual-location-head b{
margin-top:2px;
color:#18344d;
font-size:16px;
}
.manual-location-close{
flex:0 0 auto;
width:34px;
height:34px;
border:1px solid #b7ccdc!important;
border-radius:50%!important;
background:#fff!important;
color:#42627c!important;
font-size:21px!important;
line-height:1!important;
cursor:pointer;
}
.manual-location-row{
display:grid;
grid-template-columns:minmax(0,1fr) 190px;
gap:9px;
}
.manual-location-row .search-input-wrap{
min-width:0;
}
.manual-location-row .find-service-btn{
min-height:52px;
border-radius:11px!important;
}
.manual-location-panel .search-help{
margin-top:10px;
}
.hero-three-clicks{
display:flex;
align-items:center;
justify-content:space-between;
gap:7px;
flex-wrap:wrap;
margin-top:16px;
padding-top:14px;
border-top:1px solid #2b4e6c;
}
.hero-three-clicks span{
display:inline-flex;
align-items:center;
gap:6px;
color:#b4c9dc;
font-size:8px;
font-weight:850;
}
.hero-three-clicks span b{
display:grid;
place-items:center;
width:22px;
height:22px;
border-radius:7px;
background:#1e68aa;
color:#fff;
font-size:9px;
}
.hero-three-clicks i{
color:#5e83a4;
font-style:normal;
}
@keyframes localSearchPulse{
0%{opacity:.44;transform:scale(.965)}
100%{opacity:0;transform:scale(1.09)}
}
@keyframes manualPanelIn{
from{opacity:0;transform:translateY(-7px)}
to{opacity:1;transform:translateY(0)}
}
@media(max-width:780px){
.search-choice-buttons{
grid-template-columns:1fr;
}
.search-choice-btn{
min-height:105px;
}
.manual-location-row{
grid-template-columns:1fr;
}
.manual-location-row .find-service-btn{
width:100%;
}
.choice-first-heading{
align-items:flex-start;
flex-direction:column;
}
}
@media(max-width:480px){
.search-choice-btn{
padding:15px;
border-radius:17px;
}
.choice-main-icon{
width:46px;
height:46px;
font-size:25px;
}
.choice-copy strong{
font-size:16px;
}
}
/* ==========================================================
V5.8.6 — STEP 2: HOSE SHOP OR HYDRAULIC SERVICE TRUCK
========================================================== */
.local-service-panel{
margin-top:15px;
padding:19px;
border:2px solid #83acd2;
border-radius:17px;
background:linear-gradient(180deg,#f9fcff,#edf6fd);
box-shadow:0 15px 32px rgba(23,66,105,.10);
}
.local-service-panel[hidden]{display:none!important}
.local-service-panel.open{animation:manualPanelIn .22s ease-out both}
.local-service-head{
margin-bottom:13px;
text-align:center;
}
.local-service-head span{
display:block;
color:#1d62a2;
font-size:8px;
font-weight:950;
letter-spacing:1.1px;
}
.local-service-head b{
display:block;
margin-top:3px;
color:#18354f;
font-size:21px;
}
.local-service-head small{
display:block;
margin-top:4px;
color:#688198;
font-size:10px;
font-weight:750;
}
.service-type-choice{
display:grid;
grid-template-columns:1fr 1fr;
gap:11px;
}
.manual-service-choice{
margin-top:13px;
}
.service-type-btn{
min-height:112px;
display:flex;
align-items:center;
gap:14px;
padding:17px;
border:2px solid!important;
border-radius:16px!important;
cursor:pointer;
text-align:left;
transition:transform .15s ease,box-shadow .15s ease;
}
.service-type-btn:hover{
transform:translateY(-2px);
}
.service-type-btn>span:last-child{
display:flex;
flex-direction:column;
gap:4px;
}
.service-type-btn strong{
font-size:17px;
line-height:1.1;
}
.service-type-btn small{
font-size:10px;
font-weight:750;
line-height:1.35;
}
.service-type-icon{
flex:0 0 auto;
display:grid;
place-items:center;
width:51px;
height:51px;
border-radius:13px;
font-size:27px;
}
.shop-type-btn{
border-color:#377bb9!important;
background:linear-gradient(180deg,#edf7ff,#dceefe)!important;
color:#174e80!important;
box-shadow:0 9px 20px rgba(28,91,147,.09);
}
.shop-type-btn .service-type-icon{
background:#fff;
color:#2467a2;
}
.shop-type-btn small{color:#60809b}
.truck-type-btn{
border-color:#d83b2b!important;
background:linear-gradient(180deg,#fff3f0,#ffe2dc)!important;
color:#8d291d!important;
box-shadow:0 9px 20px rgba(176,49,34,.10);
}
.truck-type-btn .service-type-icon{
background:#fff;
color:#cc3525;
}
.truck-type-btn small{color:#936057}
.single-location-row{
grid-template-columns:1fr!important;
}
.hero-two-choice{
grid-template-columns:1fr!important;
}
.hero-two-choice>div{
min-height:92px;
display:flex;
flex-direction:column;
justify-content:center;
padding:16px;
border:1px solid #315a7c;
border-radius:12px;
background:#102c45;
color:#fff;
}
.hero-two-choice>div b{font-size:13px}
.hero-two-choice>div small{margin-top:4px;color:#98b4cb;font-size:9px}
.nearby-choice-bar{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin:14px 0 4px;
}
.nearby-choice-bar>b{
color:#aac4da;
font-size:9px;
}
.nearby-choice-bar a{
display:inline-flex;
align-items:center;
min-height:38px;
padding:8px 11px;
border:1px solid #416a8d;
border-radius:9px;
background:rgba(255,255,255,.055);
color:#c3d8e9;
font-size:9px;
font-weight:900;
text-decoration:none;
}
.nearby-choice-bar a.active{
border-color:#75b7ee;
background:#174b75;
color:#fff;
}
.nearby-choice-bar a:last-child{
border-color:#786761;
background:#2d2321;
color:#efc1b8;
}
@media(max-width:700px){
.service-type-choice{
grid-template-columns:1fr;
}
.service-type-btn{
min-height:96px;
}
}
/* ==========================================================
V5.8.7 — ULTRA-SIMPLE HYDRAULIC HOSE LANDING PAGE
Two primary actions. One optional alternate-location path.
========================================================== */
.site-header{background:linear-gradient(180deg,#070b10,#101820)!important;border-bottom:3px solid #1f67bd!important;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.header-inner{min-height:98px!important}
.industrial-brand{display:flex;align-items:center;width:330px;max-width:38vw;text-decoration:none}
.industrial-brand-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 6px rgba(0,0,0,.32))}
.site-nav a{color:#d7e1eb!important}
.site-nav a:hover,.site-nav a.active{color:#fff!important}
.nav-toggle span{background:#fff!important}.nav-toggle b{color:#fff!important}
.tesla-home{padding:74px 0 68px!important;background:
linear-gradient(90deg,rgba(255,255,255,.96),rgba(244,248,252,.97)),
repeating-linear-gradient(135deg,rgba(12,32,52,.035) 0 2px,transparent 2px 10px)!important;
border-bottom:5px solid #182330!important}
.tesla-home:before{width:700px;height:700px;right:-240px;top:-300px;background:radial-gradient(circle,rgba(16,93,179,.13),transparent 65%)}
.tesla-home-inner{position:relative;max-width:1100px}
.tesla-home-copy{max-width:980px;margin:0 auto;text-align:center}
.tesla-home .eyebrow{color:#1b5da8;margin-bottom:16px;letter-spacing:2.1px}
.tesla-home h1{font-size:clamp(48px,6.4vw,82px)!important;line-height:.94!important;letter-spacing:-4px!important;text-transform:uppercase;margin-bottom:20px!important;color:#0b1118!important}
.tesla-home h1 span{display:inline-block;color:#1766bd!important}
.tesla-home .hero-lead{max-width:760px;margin:0 auto 32px!important;font-size:19px!important;color:#526579}
.tesla-primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 auto;max-width:980px}
.tesla-action-btn{min-height:164px!important;border-radius:13px!important;padding:25px 27px!important;text-align:left!important;justify-content:flex-start!important;gap:19px!important;color:#fff!important;box-shadow:0 18px 35px rgba(7,24,43,.19)!important;transition:.16s ease!important;border:3px solid rgba(255,255,255,.14)!important}
.tesla-action-btn:hover{transform:translateY(-3px)!important;filter:brightness(1.05)}
.tesla-action-btn.shop-action{background:linear-gradient(145deg,#12263b,#174f88 70%,#1f6ac0)!important}
.tesla-action-btn.truck-action{background:linear-gradient(145deg,#181d23,#353f49 72%,#53606d)!important}
.tesla-action-icon{display:grid;place-items:center;flex:0 0 70px;width:70px;height:70px;border-radius:9px;background:#f4f7fa;color:#101820;font-size:36px;box-shadow:inset 0 0 0 2px #b7c2cc,0 7px 16px rgba(0,0,0,.2)}
.tesla-action-btn>span:last-child{display:flex;flex-direction:column;gap:8px}
.tesla-action-btn strong{font-size:21px;line-height:1.12;letter-spacing:-.4px}
.tesla-action-btn small{font-size:12px;color:#d9e5f0;font-weight:750}
.alternate-location-wrap{margin:23px 0 0;text-align:center}
.alternate-location-link{padding:8px 12px!important;background:transparent!important;border:0!important;color:#294963!important;box-shadow:none!important;font-size:15px!important;text-decoration:none}
.alternate-location-link b{color:#125da9;text-decoration:underline;text-underline-offset:3px}
.alternate-location-link:hover{background:transparent!important;color:#122b40!important;transform:none!important}
.tesla-manual-location{max-width:760px;margin:18px auto 0!important;text-align:left}
.tesla-manual-location .manual-location-head b{font-size:19px}
.alternate-service-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.alternate-service-btn{min-height:58px!important;border-radius:9px!important;background:linear-gradient(145deg,#10263c,#1a5a9c)!important;color:#fff!important;text-align:left!important;justify-content:flex-start!important}
.alternate-service-btn:last-child{background:linear-gradient(145deg,#20262d,#47535f)!important}
.alternate-service-btn span{font-size:22px}.alternate-service-btn b{font-size:12px;letter-spacing:.3px}
.tesla-home .find-me-status{max-width:760px;margin:10px auto 0}
.tesla-trust-line{display:flex;justify-content:center;align-items:center;gap:13px;flex-wrap:wrap;margin-top:23px;color:#66798a;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.tesla-trust-line strong{color:#155eae;font-size:15px}.tesla-trust-line i{font-style:normal;color:#9eabb7}
@media(max-width:980px){
.industrial-brand{width:280px;max-width:56vw}
.site-nav{background:#0b121a!important;border-color:#34485b!important}
}
@media(max-width:760px){
.header-inner{min-height:82px!important}
.industrial-brand{width:255px;max-width:70vw}
.tesla-home{padding:50px 0 45px!important}
.tesla-home h1{font-size:clamp(43px,12vw,62px)!important;letter-spacing:-2.7px!important}
.tesla-home .hero-lead{font-size:16px!important;margin-bottom:24px!important}
.tesla-primary-actions{grid-template-columns:1fr;gap:13px}
.tesla-action-btn{min-height:128px!important;padding:20px!important}
.tesla-action-icon{width:58px;height:58px;flex-basis:58px;font-size:30px}
.tesla-action-btn strong{font-size:17px}
.alternate-service-choice{grid-template-columns:1fr}
}
@media(max-width:480px){
.industrial-brand{width:220px;max-width:72vw}
.tesla-action-btn{align-items:flex-start!important;gap:13px!important;padding:17px!important}
.tesla-action-icon{width:48px;height:48px;flex-basis:48px;font-size:25px}
.tesla-action-btn strong{font-size:15px}
}
/* v5.8.8 — locked industrial brand + simplified customer path */
.industrial-brand{display:flex;align-items:center;min-width:310px;max-width:430px}
.industrial-brand-logo{width:100%;height:auto;max-height:78px;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.38))}
.site-header{background:linear-gradient(180deg,#06101b 0%,#091827 100%);border-bottom:2px solid #f47b20;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.tesla-primary-actions{gap:18px}
.tesla-action-btn{position:relative;overflow:hidden;min-height:132px;border:2px solid #ff8a2a!important;border-radius:14px!important;background:linear-gradient(145deg,#071d3d,#0b4d91)!important;box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 0 14px rgba(255,118,22,.95),0 9px 20px rgba(4,20,42,.28)!important;transform:translateZ(0);transition:transform .16s ease,box-shadow .16s ease}
.tesla-action-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.08),transparent 38%,rgba(255,132,30,.09));pointer-events:none}
.tesla-action-btn:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 0 22px rgba(255,118,22,1),0 14px 28px rgba(4,20,42,.34)!important}
.tesla-action-btn strong{font-weight:900;letter-spacing:-.02em}
.tesla-action-btn small{opacity:.9}
.pro-icon{display:grid!important;place-items:center;background:linear-gradient(145deg,#fff,#d8e0e7)!important;border:1px solid #aab7c3!important;box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(0,0,0,.28)!important}
.pro-icon svg{width:54px;height:54px;fill:#0a315f;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.truck-pro-icon svg{fill:#f47b20;stroke:#0a315f;stroke-width:2}
.alternate-location-wrap{margin-top:24px}
.alternate-location-link{font-size:17px!important;padding:10px 18px!important;border-radius:999px;background:#fff;border:1px solid #c8d3dd;box-shadow:0 4px 12px rgba(10,39,70,.08)}
.tesla-manual-location{border:1px solid #d1dbe4!important;border-top:3px solid #f47b20!important;box-shadow:0 12px 30px rgba(6,25,47,.14)!important}
.tesla-trust-line{margin-top:22px!important;padding-top:18px!important;border-top:1px solid #d5dde5}
@media(max-width:900px){.industrial-brand{min-width:0;max-width:285px}.industrial-brand-logo{max-height:64px}.tesla-action-btn{min-height:116px}}
@media(max-width:620px){.industrial-brand{max-width:225px}.tesla-action-btn{min-height:112px}.pro-icon svg{width:44px;height:44px}}
/* ==========================================================
V5.8.9 — LOCKED LOGO + ULTRA-CLEAN HOME + SHOP OWNER CTA
========================================================== */
.header-inner{min-height:118px!important;gap:24px}
.industrial-brand{width:470px!important;max-width:43vw!important;min-width:360px!important}
.industrial-brand-logo{width:100%!important;max-height:none!important;height:auto!important;object-fit:contain!important;filter:drop-shadow(0 6px 14px rgba(0,0,0,.36))!important}
.site-nav{gap:22px!important}
.site-nav a{font-size:13px!important;white-space:nowrap}
.site-nav a[href="/claim.php"]{color:#ff9a36!important}
.tesla-home{padding:34px 0 58px!important}
.home-official-logo-wrap{display:flex;justify-content:center;margin:0 auto 28px;max-width:1000px}
.home-official-logo{display:block;width:min(940px,92vw);height:auto;filter:drop-shadow(0 12px 20px rgba(8,24,42,.18))}
.tesla-home .eyebrow{margin-top:0!important}
.tesla-home h1{font-size:clamp(52px,6.2vw,84px)!important;margin-top:10px!important}
.tesla-primary-actions{max-width:1020px!important}
.tesla-action-btn{min-height:150px!important;box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 0 18px rgba(255,118,22,.95),0 13px 30px rgba(4,20,42,.27)!important}
.tesla-action-icon{width:76px!important;height:76px!important;flex-basis:76px!important}
.pro-icon svg{width:58px!important;height:58px!important}
.tesla-action-btn strong{font-size:22px!important}
.alternate-location-link{background:transparent!important;border:0!important;box-shadow:none!important}
.shop-owner-cta{padding:54px 0;background:linear-gradient(145deg,#07131f,#0b2238);border-top:3px solid #1f6fd1;border-bottom:3px solid #f47b20;color:#fff}
.shop-owner-cta-inner{display:grid;grid-template-columns:1.5fr .7fr;gap:36px;align-items:center}
.shop-owner-cta span{display:block;color:#58a5ff;font-weight:900;font-size:12px;letter-spacing:1.4px;margin-bottom:8px}
.shop-owner-cta h2{margin:0 0 10px;font-size:clamp(30px,3.5vw,46px);line-height:1.02;color:#fff}
.shop-owner-cta p{margin:0;max-width:760px;color:#c6d5e3;font-size:16px;line-height:1.65}
.shop-owner-cta-actions{display:flex;flex-direction:column;gap:13px;align-items:stretch}
.shop-lock-primary{display:flex!important;align-items:center!important;justify-content:center!important;min-height:58px;background:linear-gradient(180deg,#ff8a28,#e95a0b)!important;color:#fff!important;border:1px solid #ffb16e!important;box-shadow:0 0 18px rgba(255,116,22,.55),0 8px 18px rgba(0,0,0,.25)!important;font-weight:900!important}
.shop-lock-secondary{display:flex!important;align-items:center!important;justify-content:center!important;min-height:58px;background:linear-gradient(180deg,#195fae,#10447e)!important;color:#fff!important;border:1px solid #66a7ec!important;font-weight:900!important}
.shop-owner-text-link{color:#d7e7f8;text-align:center;font-weight:800;text-decoration:none}
.shop-owner-text-link:hover{color:#fff;text-decoration:underline}
.clean-footer{background:#06101a!important;border-top:0!important;padding-top:38px!important}
.clean-footer-inner{text-align:center;max-width:920px!important}
.footer-logo-link{display:block;margin:0 auto 20px;max-width:760px}
.footer-official-logo{display:block;width:min(720px,90vw);height:auto;margin:0 auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.footer-links-clean{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:8px 0 16px}
.footer-links-clean a{color:#dbe8f4;text-decoration:none;font-weight:850;font-size:13px}
.footer-links-clean a:hover{color:#ff9634}
.clean-footer-inner p{color:#94aabd!important;margin:0 auto!important;max-width:680px;font-size:14px!important}
.clean-footer-bottom{justify-content:center!important;border-top:1px solid #203242!important;margin-top:28px!important;padding-top:16px!important;padding-bottom:22px!important}
.shop-lock-page{padding:90px 0 100px;background:linear-gradient(135deg,#f8fafc,#eaf2f9)}
.shop-lock-inner{max-width:920px;text-align:center}
.shop-lock-page h1{font-size:clamp(48px,7vw,86px);line-height:.96;letter-spacing:-3px;text-transform:uppercase;margin:16px 0 20px;color:#08121d}
.shop-lock-page p{max-width:760px;margin:0 auto 30px;color:#51667a;font-size:18px;line-height:1.65}
.shop-lock-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.shop-lock-actions .btn{min-width:220px}
@media(max-width:1100px){
.header-inner{min-height:96px!important}
.industrial-brand{width:350px!important;min-width:280px!important;max-width:44vw!important}
.site-nav{gap:13px!important}
.site-nav a{font-size:11px!important}
}
@media(max-width:900px){
.industrial-brand{width:300px!important;min-width:0!important;max-width:70vw!important}
.shop-owner-cta-inner{grid-template-columns:1fr;text-align:center}
.shop-owner-cta p{margin-left:auto;margin-right:auto}
.shop-owner-cta-actions{max-width:420px;margin:0 auto;width:100%}
}
@media(max-width:760px){
.home-official-logo-wrap{margin-bottom:20px}
.home-official-logo{width:96vw}
.tesla-home h1{font-size:clamp(42px,12vw,64px)!important}
.tesla-action-btn{min-height:126px!important}
.footer-logo-link{max-width:95vw}
.footer-official-logo{width:94vw}
}
/* ==========================================================
V5.8.10 — SINGLE LOCKED LOGO / TIGHTER ABOVE-THE-FOLD
========================================================== */
.header-inner{min-height:138px!important;gap:20px!important}
.industrial-brand{width:560px!important;max-width:49vw!important;min-width:410px!important;flex:0 1 auto!important}
.industrial-brand-logo{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;display:block!important}
.tesla-home{padding:42px 0 54px!important}
.tesla-home .tesla-home-copy{padding-top:0!important}
.tesla-home .eyebrow{margin-top:0!important;margin-bottom:12px!important}
.tesla-home h1{margin-top:0!important}
.home-official-logo-wrap{display:none!important}
@media(max-width:1180px){
.header-inner{min-height:116px!important}
.industrial-brand{width:430px!important;min-width:330px!important;max-width:43vw!important}
.site-nav{gap:11px!important}
.site-nav a{font-size:11px!important}
}
@media(max-width:980px){
.header-inner{min-height:102px!important}
.industrial-brand{width:390px!important;min-width:0!important;max-width:72vw!important}
}
@media(max-width:650px){
.header-inner{min-height:88px!important}
.industrial-brand{width:300px!important;max-width:76vw!important}
.tesla-home{padding-top:34px!important}
}
/* ==========================================================
V5.8.11 — LOCKED CENTERED BRAND / TWO-ROW DESKTOP HEADER
Exact approved logo artwork. Large and centered. Nav below.
========================================================== */
@media(min-width:981px){
.site-header{position:sticky!important;top:0!important;background:linear-gradient(180deg,#040a12 0%,#081522 100%)!important;border-bottom:3px solid #1766c5!important;box-shadow:0 8px 24px rgba(0,0,0,.24)!important}
.header-inner{min-height:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:12px!important;padding:12px 0 14px!important}
.industrial-brand{display:flex!important;justify-content:center!important;align-items:center!important;width:min(820px,86vw)!important;max-width:820px!important;min-width:0!important;margin:0 auto!important;flex:0 0 auto!important}
.industrial-brand-logo{display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;filter:drop-shadow(0 9px 16px rgba(0,0,0,.42))!important}
.site-nav{width:100%!important;margin:0!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:34px!important;padding:0!important}
.site-nav a{font-size:14px!important;font-weight:900!important;letter-spacing:.05px!important;white-space:nowrap!important}
.site-nav a[href="/claim.php"]{color:#ff952f!important}
.site-nav .nav-help{padding:14px 20px!important;background:linear-gradient(180deg,#ff6c36,#dd3725)!important;border:1px solid #ff8c62!important;box-shadow:0 0 16px rgba(255,93,45,.45),0 7px 16px rgba(0,0,0,.25)!important}
.nav-toggle{display:none!important}
.tesla-home{padding-top:42px!important}
}
@media(min-width:1400px){
.industrial-brand{width:min(900px,82vw)!important;max-width:900px!important}
.site-nav{gap:40px!important}
}
@media(max-width:980px){
.header-inner{min-height:94px!important;display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;gap:14px!important;padding:8px 0!important}
.industrial-brand{width:340px!important;max-width:72vw!important;min-width:0!important;margin:0!important}
.industrial-brand-logo{width:100%!important;height:auto!important;max-height:none!important}
.site-nav{top:94px!important}
.nav-toggle{display:flex!important}
}
@media(max-width:650px){
.header-inner{min-height:82px!important}
.industrial-brand{width:280px!important;max-width:73vw!important}
.site-nav{top:82px!important}
}
/* ==========================================================
FINDMYHOSE v5.8.16 — SIMPLE HYDRAULIC SHOPS FLOW
========================================================== */
/* Header: centered brand, normal scroll, one shop-owner button */
.site-header{
position:relative!important;
top:auto!important;
z-index:20!important;
background:linear-gradient(180deg,#040a12 0%,#081522 100%)!important;
border-bottom:2px solid #1766c5!important;
}
.header-inner{
min-height:0!important;
padding:6px 0 8px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
}
.industrial-brand{
width:min(610px,68vw)!important;
max-width:610px!important;
margin:0 auto!important;
padding:0!important;
border:0!important;
box-shadow:none!important;
background:transparent!important;
}
.industrial-brand-logo{
display:block!important;
width:100%!important;
height:auto!important;
max-height:128px!important;
object-fit:contain!important;
margin:-5px auto -10px!important;
padding:0!important;
border:0!important;
box-shadow:none!important;
background:transparent!important;
clip-path:inset(3% 1% 8% 1%)!important;
filter:drop-shadow(0 5px 9px rgba(0,0,0,.32))!important;
}
.site-nav{
width:100%!important;
margin:0!important;
padding:0!important;
display:flex!important;
justify-content:center!important;
align-items:center!important;
gap:26px!important;
}
.site-nav a{
color:#dce7f1!important;
font-size:13px!important;
font-weight:900!important;
}
.site-nav a:hover,.site-nav a.active{color:#fff!important}
.hydraulic-shop-nav{
min-width:190px!important;
padding:8px 17px!important;
border:1px solid #ff9b47!important;
background:linear-gradient(180deg,#ff8a22,#e75c0c)!important;
color:#fff!important;
box-shadow:0 0 16px rgba(255,116,22,.38)!important;
display:flex!important;
flex-direction:column!important;
gap:2px!important;
line-height:1!important;
}
.hydraulic-shop-nav span{font-size:10px!important;letter-spacing:.9px!important}
.hydraulic-shop-nav b{font-size:15px!important;color:#fff!important}
/* Hydraulic shops landing */
.hose-shops-hero{
position:relative;
overflow:hidden;
padding:64px 0 58px;
text-align:center;
color:#fff;
background:
linear-gradient(135deg,rgba(4,13,22,.97),rgba(7,32,53,.94)),
repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 11px);
border-bottom:3px solid #f47b20;
}
.hose-shops-hero:before{
content:"";
position:absolute;
inset:auto -180px -260px auto;
width:620px;
height:620px;
border-radius:50%;
background:radial-gradient(circle,rgba(19,105,219,.20),transparent 66%);
}
.hose-shops-hero-inner{position:relative;max-width:920px!important}
.hose-shops-hero .eyebrow{color:#62aaff}
.hose-shops-hero h1{
margin:0 0 12px;
color:#fff;
text-transform:uppercase;
font-size:clamp(46px,6vw,78px);
line-height:.96;
letter-spacing:-3px;
}
.hose-shops-kicker{
margin:0 0 12px;
font-size:clamp(24px,3vw,38px);
font-weight:800;
}
.hose-shops-kicker strong{color:#ff841d}
.hose-shops-lead{
max-width:760px;
margin:0 auto 26px;
color:#cbd9e6;
font-size:17px;
line-height:1.65;
}
.free-shop-hero-btn{
min-height:58px;
padding:16px 28px!important;
color:#fff!important;
background:linear-gradient(180deg,#ff8a23,#e75d0b)!important;
border:1px solid #ffb36f!important;
box-shadow:0 0 20px rgba(255,119,22,.46),0 10px 28px rgba(0,0,0,.25)!important;
}
.hose-shop-plans{
padding:66px 0 72px;
background:linear-gradient(180deg,#f7faff,#edf4fb);
}
.hose-shop-plans-heading{text-align:center;max-width:820px;margin:0 auto 34px}
.hose-shop-plans-heading h2{
margin:0;
color:#0b1725;
font-size:clamp(34px,4vw,54px);
letter-spacing:-2px;
}
.hose-shop-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
align-items:stretch;
}
.hose-shop-price-card{
position:relative;
display:flex;
flex-direction:column;
min-width:0;
padding:30px;
border-radius:20px;
background:#081827;
color:#fff;
border:1px solid #2869aa;
box-shadow:0 20px 42px rgba(8,28,49,.14);
}
.hose-shop-price-card.local-plan{background:linear-gradient(160deg,#071828,#0b2a49)}
.hose-shop-price-card.leader-plan{
background:linear-gradient(160deg,#19150d,#0f1115);
border:2px solid #f19817;
box-shadow:0 0 24px rgba(245,148,18,.24),0 22px 46px rgba(8,28,49,.16);
}
.plan-kicker{
color:#66afff;
font-size:11px;
letter-spacing:1.5px;
font-weight:950;
}
.leader-plan .plan-kicker{color:#ffac32}
.hose-shop-price-card h3{
margin:10px 0 12px;
color:#fff;
font-size:30px;
}
.plan-price{
display:flex;
align-items:flex-end;
gap:10px;
padding-bottom:18px;
border-bottom:1px solid rgba(255,255,255,.16);
}
.plan-price strong{font-size:58px;line-height:.9}
.plan-price small{font-size:13px;font-weight:900;color:#8ec4ff;margin-bottom:6px}
.leader-plan .plan-price small{color:#ffc56a}
.hose-shop-price-card ul{
flex:1;
margin:22px 0 26px;
padding:0;
list-style:none;
}
.hose-shop-price-card li{
position:relative;
padding:8px 0 8px 28px;
color:#d3e0eb;
line-height:1.35;
}
.hose-shop-price-card li:before{
content:"✓";
position:absolute;
left:0;
color:#59aaff;
font-weight:950;
}
.leader-plan li:before{color:#ff9d1c}
.plan-btn{width:100%;min-height:54px;color:#fff!important}
.free-plan-btn,.local-plan-btn{
background:linear-gradient(180deg,#0f73ed,#0856ba)!important;
border:1px solid #5ca4ef!important;
}
.leader-plan-btn{
background:linear-gradient(180deg,#ff8b22,#e85b09)!important;
border:1px solid #ffb061!important;
}
.best-value-badge{
position:absolute;
top:16px;
right:16px;
padding:6px 9px;
border-radius:999px;
background:#ff8a17;
color:#fff;
font-size:10px;
letter-spacing:.9px;
font-weight:950;
}
.pricing-note{
margin:22px auto 0;
text-align:center;
color:#687b8e;
font-size:13px;
}
@media(max-width:980px){
.industrial-brand{width:310px!important;max-width:68vw!important}
.industrial-brand-logo{max-height:72px!important;margin:-3px auto -6px!important}
.site-nav{
top:74px!important;
gap:10px!important;
}
.hydraulic-shop-nav{min-width:0!important}
.hose-shop-pricing-grid{grid-template-columns:1fr}
.hose-shop-price-card{max-width:640px;margin:0 auto;width:100%}
}
@media(max-width:650px){
.hose-shops-hero{padding:44px 0 42px}
.hose-shop-plans{padding:48px 0}
.hose-shop-price-card{padding:24px}
.plan-price strong{font-size:48px}
}
/* ==========================================================
FINDMYHOSE v5.8.17 — NO WHITE LOGO FRAME / COMPACT HEADER
Exact approved logo image FILE is unchanged.
The white edge is hidden only by CSS cropping.
========================================================== */
.site-header{
position:relative!important;
top:auto!important;
background:linear-gradient(180deg,#030b13 0%,#071522 100%)!important;
border-bottom:2px solid #1766c5!important;
box-shadow:0 4px 14px rgba(0,0,0,.18)!important;
}
.header-inner{
min-height:0!important;
padding:4px 0 7px!important;
gap:3px!important;
}
/* Crop the visible white border without editing the locked logo file. */
.industrial-brand{
position:relative!important;
width:min(620px,68vw)!important;
max-width:620px!important;
height:132px!important;
overflow:hidden!important;
margin:0 auto!important;
padding:0!important;
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
}
.industrial-brand-logo{
position:absolute!important;
left:50%!important;
top:50%!important;
width:108%!important;
max-width:none!important;
height:auto!important;
max-height:none!important;
transform:translate(-50%,-50%)!important;
object-fit:contain!important;
margin:0!important;
padding:0!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
background:transparent!important;
filter:drop-shadow(0 5px 10px rgba(0,0,0,.32))!important;
}
.site-nav{
margin:0!important;
padding:0!important;
min-height:38px!important;
gap:24px!important;
}
.site-nav a{
font-size:12px!important;
line-height:1!important;
}
.hydraulic-shop-nav{
min-width:180px!important;
padding:8px 15px!important;
}
@media(min-width:1400px){
.industrial-brand{
width:min(660px,64vw)!important;
max-width:660px!important;
height:140px!important;
}
}
@media(max-width:980px){
.header-inner{min-height:0!important;padding:4px 0!important}
.industrial-brand{
width:310px!important;
max-width:70vw!important;
height:68px!important;
}
.industrial-brand-logo{width:110%!important}
.site-nav{top:72px!important}
}
@media(max-width:650px){
.industrial-brand{
width:260px!important;
max-width:72vw!important;
height:58px!important;
}
.industrial-brand-logo{width:112%!important}
.site-nav{top:62px!important}
}
/* ==========================================================
v5.8.18 — BORDER CLEANUP
Removes the heavy border / orange outline from the 2 big
homepage action cards for a cleaner look.
========================================================== */
.tesla-action-btn{
border:0!important;
outline:0!important;
box-shadow:0 16px 32px rgba(8,26,45,.16)!important;
}
.tesla-action-btn:hover{
box-shadow:0 18px 36px rgba(8,26,45,.20)!important;
}
.tesla-action-btn.shop-action,
.tesla-action-btn.truck-action{
border:0!important;
}
.tesla-action-icon{
box-shadow:0 7px 16px rgba(0,0,0,.18)!important;
}
.tesla-home .hero-lead{
margin-bottom:28px!important;
}
.tesla-trust-line,
.hero-three-clicks{
border-top:0!important;
}
/* ==========================================================
v5.8.19 — HEADER CROP + LOGO BORDER CLEANUP
Fixes top crop on the header logo and removes leftover
white frame / border treatment around logo areas.
========================================================== */
.site-header{
overflow:visible!important;
}
.header-inner{
padding:12px 0 10px!important;
gap:8px!important;
}
.industrial-brand,
.brand-lockup{
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
border-radius:0!important;
padding:0!important;
overflow:visible!important;
}
.industrial-brand-logo{
display:block!important;
width:100%!important;
height:auto!important;
max-height:138px!important;
object-fit:contain!important;
margin:0 auto -4px!important;
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
}
/* Remove any lingering frame around footer / secondary logo blocks */
.home-official-logo-wrap,
.home-official-logo-card,
.footer-logo-link,
.footer-logo-wrap,
.footer-logo,
.logo-frame,
.logo-card,
.official-logo-frame,
.official-logo-wrap{
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
border-radius:0!important;
padding:0!important;
}
.home-official-logo,
.footer-official-logo,
.footer-logo img,
img[src*="findmyhose-logo"]{
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
}
.footer-logo-link{margin:0 auto 16px!important;max-width:760px!important}
.footer-official-logo{width:min(760px,92vw)!important;height:auto!important;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))!important}
.clean-footer{padding-top:28px!important;border-top:0!important}
.clean-footer-bottom{border-top:0!important;margin-top:18px!important;padding-top:10px!important}
@media(max-width:1100px){
.industrial-brand{width:min(580px,78vw)!important;max-width:580px!important}
.industrial-brand-logo{max-height:128px!important}
}
@media(max-width:650px){
.header-inner{padding:10px 0 8px!important}
.industrial-brand{width:min(92vw,420px)!important;max-width:92vw!important}
.industrial-brand-logo{max-height:none!important;margin:0 auto!important}
}
/* ==========================================================
v5.8.20 — MOVE NAV DOWN / REMOVE BORDERS / LOCK LAYOUT
- puts the top navigation/button below the logo on home
- moves that nav visually down into the white landing area
- removes the header/footer logo frames
- fixes the logo fit in the upper landing area
- removes sticky behavior so header never blocks page content
========================================================== */
/* Global safety */
.site-header{
position:relative!important;
top:auto!important;
border-bottom:0!important;
box-shadow:none!important;
}
.clean-footer,
.clean-footer-bottom{
border-top:0!important;
}
.footer-logo-link,
.footer-logo-wrap,
.footer-logo,
.footer-official-logo,
.home-official-logo-wrap,
.home-official-logo,
.logo-frame,
.logo-card,
.official-logo-frame,
.official-logo-wrap{
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
}
.footer-logo-link{padding:0!important;margin:0 auto 14px!important}
.footer-official-logo{display:block!important;width:min(760px,92vw)!important;height:auto!important}
/* Homepage lockup */
.consumer-home .site-header{
background:linear-gradient(180deg,#07111a 0%,#0b1722 100%)!important;
overflow:visible!important;
}
.consumer-home .header-inner{
min-height:auto!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:10px!important;
padding:10px 0 0!important;
}
.consumer-home .industrial-brand,
.consumer-home .brand-lockup{
display:block!important;
width:min(760px,92vw)!important;
max-width:760px!important;
margin:0 auto!important;
text-decoration:none!important;
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
padding:0!important;
}
.consumer-home .industrial-brand-logo{
display:block!important;
width:100%!important;
height:auto!important;
max-height:none!important;
object-fit:contain!important;
margin:0 auto!important;
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
filter:drop-shadow(0 10px 16px rgba(0,0,0,.28))!important;
}
/* Move links/button down into the white landing area */
.consumer-home .site-nav{
margin:8px auto -22px!important;
padding:10px 18px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:20px!important;
background:#ffffff!important;
border:1px solid #dbe5ef!important;
border-radius:14px!important;
box-shadow:0 14px 30px rgba(8,24,42,.12)!important;
position:relative!important;
z-index:5!important;
}
.consumer-home .site-nav a{
color:#233447!important;
font-size:14px!important;
font-weight:800!important;
}
.consumer-home .site-nav a:hover,
.consumer-home .site-nav a.active{color:#0a66df!important}
.consumer-home .site-nav .nav-button,
.consumer-home .hydraulic-shop-nav{
background:linear-gradient(180deg,#ff8a1a,#f46a12)!important;
color:#fff!important;
padding:10px 16px!important;
border-radius:12px!important;
box-shadow:0 10px 24px rgba(244,106,18,.24)!important;
border:0!important;
}
.consumer-home .hydraulic-shop-nav span,
.consumer-home .hydraulic-shop-nav b{display:block!important;line-height:1.05!important}
.consumer-home .hydraulic-shop-nav span{font-size:11px!important;letter-spacing:.7px!important}
.consumer-home .hydraulic-shop-nav b{font-size:14px!important}
/* White landing area starts right under the nav */
.consumer-home .tesla-home{
padding:72px 0 68px!important;
border-top:0!important;
border-bottom:0!important;
}
.consumer-home .tesla-home-inner{max-width:1120px!important}
.consumer-home .tesla-home-copy{max-width:1040px!important}
/* Remove extra framed duplicate logo areas if they appear */
.consumer-home .home-official-logo-wrap,
.consumer-home .home-official-logo-card,
.consumer-home .home-official-logo{
display:none!important;
}
/* Mobile */
@media (max-width: 900px){
.consumer-home .site-nav{
width:min(94vw,680px)!important;
flex-wrap:wrap!important;
gap:12px 16px!important;
padding:12px 14px!important;
}
}
@media (max-width: 700px){
.consumer-home .header-inner{
padding:8px 0 0!important;
gap:8px!important;
}
.consumer-home .industrial-brand,
.consumer-home .brand-lockup{
width:min(94vw,520px)!important;
}
.consumer-home .site-nav{
margin:8px auto -14px!important;
border-radius:12px!important;
}
.consumer-home .tesla-home{
padding-top:56px!important;
}
}
/* ==========================================================
v5.8.21 — CLEAN LOGO / NO HEADER NAV / INDUSTRIAL HOME
Home page goal:
- logo alone at the top with NO links/buttons under it
- four CTAs in the landing area:
1) hydraulic hose shop near me
2) hydraulic service truck near me
3) need service at another location
4) hydraulic shops click here
- darker / industrial visual tone
- no white borders around the logo
========================================================== */
:root{
--home-dark-1:#06111b;
--home-dark-2:#0b1722;
--home-steel:#eef2f6;
--home-steel-2:#d9e1ea;
--home-blue-1:#173d69;
--home-blue-2:#2b68aa;
--home-graphite-1:#36393f;
--home-graphite-2:#595c62;
--home-orange-1:#ff8e21;
--home-orange-2:#f36a13;
}
/* global no-box / no-border safety on branded logos */
.consumer-home .site-header,
.consumer-home .tesla-home,
.consumer-home .site-footer,
.consumer-home .clean-footer,
.consumer-home .clean-footer-bottom{
border:0!important;
}
.consumer-home .industrial-brand,
.consumer-home .brand-lockup,
.consumer-home .industrial-brand-logo,
.consumer-home .home-official-logo-wrap,
.consumer-home .home-official-logo,
.consumer-home .footer-logo-wrap,
.consumer-home .footer-logo-link,
.consumer-home .footer-official-logo,
.consumer-home .footer-logo,
.consumer-home .logo-frame,
.consumer-home .logo-card,
.consumer-home .official-logo-frame,
.consumer-home .official-logo-wrap{
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
}
/* header: only the logo on homepage */
.consumer-home .site-header{
position:relative!important;
top:auto!important;
z-index:10!important;
background:linear-gradient(180deg,var(--home-dark-1) 0%, #07131e 65%, #081520 100%)!important;
box-shadow:none!important;
overflow:visible!important;
}
.consumer-home .header-inner{
min-height:auto!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:0!important;
padding:14px 0 12px!important;
}
.consumer-home .site-nav,
.consumer-home .nav-toggle{
display:none!important;
}
.consumer-home .industrial-brand,
.consumer-home .brand-lockup{
display:block!important;
width:min(700px,94vw)!important;
max-width:700px!important;
margin:0 auto!important;
padding:0!important;
text-decoration:none!important;
}
.consumer-home .industrial-brand-logo{
display:block!important;
width:100%!important;
height:auto!important;
max-height:none!important;
object-fit:contain!important;
margin:0 auto!important;
filter:drop-shadow(0 16px 30px rgba(0,0,0,.35))!important;
}
/* darker industrial landing zone */
.consumer-home .tesla-home{
position:relative!important;
overflow:hidden!important;
padding:46px 0 72px!important;
background:
radial-gradient(circle at 50% -10%, rgba(44,100,171,.10), transparent 34%),
linear-gradient(180deg,#eef2f6 0%,#f4f6f8 40%,#edf1f5 100%)!important;
}
.consumer-home .tesla-home:before,
.consumer-home .tesla-home:after{
content:"";
position:absolute;
pointer-events:none;
}
.consumer-home .tesla-home:before{
inset:auto auto 0 -120px;
width:320px;height:320px;border-radius:50%;
background:radial-gradient(circle,rgba(17,61,112,.07),transparent 68%);
}
.consumer-home .tesla-home:after{
inset:0 0 auto auto;
width:380px;height:220px;
background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,0));
clip-path:polygon(45% 0,100% 0,100% 100%,0 0);
}
.consumer-home .tesla-home-inner{
max-width:1120px!important;
}
.consumer-home .tesla-home-copy{
max-width:1040px!important;
margin:0 auto!important;
text-align:center!important;
}
.consumer-home .tesla-home-copy .eyebrow{
color:#1a5db1!important;
letter-spacing:2.4px!important;
font-weight:950!important;
margin-bottom:16px!important;
}
.consumer-home .tesla-home-copy h1{
font-size:clamp(50px,7vw,98px)!important;
line-height:.93!important;
letter-spacing:-3.6px!important;
margin:0 0 20px!important;
color:#0a1521!important;
text-wrap:balance;
}
.consumer-home .tesla-home-copy h1 span{color:#2d73cf!important}
.consumer-home .hero-lead{
max-width:900px!important;
margin:0 auto 28px!important;
color:#59697a!important;
font-size:18px!important;
}
/* primary home actions */
.consumer-home .tesla-primary-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:18px!important;
margin:18px auto 16px!important;
}
.consumer-home .tesla-action-btn{
position:relative!important;
display:flex!important;
align-items:center!important;
gap:18px!important;
width:100%!important;
min-height:148px!important;
padding:22px 24px!important;
text-align:left!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.08)!important;
border-radius:18px!important;
box-shadow:0 18px 36px rgba(6,17,27,.16)!important;
overflow:hidden!important;
}
.consumer-home .tesla-action-btn:before{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,0) 52%);
}
.consumer-home .tesla-action-btn:hover{transform:translateY(-2px)!important}
.consumer-home .shop-action{
background:linear-gradient(135deg,#13365e 0%,#1d4f84 48%,#2d6dad 100%)!important;
}
.consumer-home .truck-action{
background:linear-gradient(135deg,#2f3339 0%,#44484f 52%,#5d6269 100%)!important;
}
.consumer-home .tesla-action-icon{
flex:0 0 82px!important;
width:82px!important;height:82px!important;
border-radius:16px!important;
display:grid!important;place-items:center!important;
background:linear-gradient(180deg,#fafcfe,#e8eef4)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px rgba(4,10,16,.18)!important;
}
.consumer-home .tesla-action-icon svg{width:44px!important;height:44px!important;fill:#123f72!important}
.consumer-home .truck-pro-icon svg{fill:#ef7a17!important}
.consumer-home .tesla-action-btn strong{
display:block!important;
font-size:21px!important;
line-height:1.02!important;
letter-spacing:-.5px!important;
}
.consumer-home .tesla-action-btn small{
display:block!important;
margin-top:8px!important;
font-size:13px!important;
color:rgba(255,255,255,.82)!important;
}
/* secondary CTA row */
.consumer-home .hero-secondary-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:16px!important;
margin:0 auto 16px!important;
}
.consumer-home .secondary-action-btn{
min-height:72px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex-direction:column!important;
text-decoration:none!important;
border-radius:16px!important;
padding:14px 20px!important;
font-weight:900!important;
letter-spacing:.2px!important;
border:1px solid rgba(255,255,255,.1)!important;
box-shadow:0 14px 30px rgba(7,17,27,.12)!important;
}
.consumer-home .secondary-action-btn span{
display:block!important;
font-size:12px!important;
letter-spacing:1px!important;
opacity:.95!important;
}
.consumer-home .secondary-action-btn b{
display:block!important;
margin-top:4px!important;
font-size:18px!important;
line-height:1.05!important;
}
.consumer-home .location-secondary-btn{
background:linear-gradient(135deg,#122438 0%,#1a3550 100%)!important;
color:#fff!important;
}
.consumer-home .hydraulic-shops-secondary-btn{
background:linear-gradient(135deg,var(--home-orange-1) 0%,var(--home-orange-2) 100%)!important;
color:#fff!important;
box-shadow:0 16px 34px rgba(243,106,19,.22)!important;
}
.consumer-home .hydraulic-shops-secondary-btn span{color:#fff!important}
/* hide old text link row because it is now a real button */
.consumer-home .alternate-location-wrap{display:none!important}
/* manual panel / counts */
.consumer-home .tesla-manual-location{
max-width:860px!important;
margin:12px auto 18px!important;
text-align:left!important;
border:1px solid #d3dde8!important;
box-shadow:0 20px 42px rgba(8,24,42,.09)!important;
border-radius:18px!important;
}
.consumer-home .manual-location-head span{color:#0f5eb8!important}
.consumer-home .alternate-service-choice{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:12px!important;
}
.consumer-home .alternate-service-btn{
background:linear-gradient(135deg,#edf3fa,#dfeaf5)!important;
border:1px solid #cad8e7!important;
color:#123f72!important;
}
.consumer-home .find-me-status{justify-content:center!important;text-align:center!important}
.consumer-home .tesla-trust-line{
justify-content:center!important;
margin-top:22px!important;
color:#607286!important;
font-weight:900!important;
}
.consumer-home .tesla-trust-line strong{color:#245fae!important}
/* any duplicate big logo section farther down should disappear */
.consumer-home .home-official-logo-section,
.consumer-home .home-brand-banner,
.consumer-home .consumer-home-logo-repeat{
display:none!important;
}
/* footer brand strip cleaner */
.consumer-home .site-footer{
background:linear-gradient(180deg,#08121c,#050b12)!important;
border-top:0!important;
}
.consumer-home .footer-brand,
.consumer-home .footer-logo-link{
background:transparent!important;
box-shadow:none!important;
border:0!important;
}
@media (max-width: 980px){
.consumer-home .tesla-home{padding-top:36px!important}
.consumer-home .tesla-primary-actions,
.consumer-home .hero-secondary-actions{
grid-template-columns:1fr!important;
}
}
@media (max-width: 700px){
.consumer-home .header-inner{padding-top:10px!important;padding-bottom:10px!important}
.consumer-home .industrial-brand,.consumer-home .brand-lockup{width:min(96vw,620px)!important}
.consumer-home .tesla-home-copy h1{
font-size:clamp(38px,11vw,68px)!important;
letter-spacing:-2px!important;
}
.consumer-home .hero-lead{font-size:16px!important}
.consumer-home .tesla-action-btn{min-height:132px!important;padding:18px!important;gap:14px!important}
.consumer-home .tesla-action-icon{width:70px!important;height:70px!important;flex-basis:70px!important}
.consumer-home .tesla-action-btn strong{font-size:18px!important}
.consumer-home .secondary-action-btn b{font-size:16px!important}
.consumer-home .alternate-service-choice{grid-template-columns:1fr!important}
}
/* ==========================================================
v5.8.23 — LOCKED INDUSTRIAL METAL BUTTON SYSTEM
Matches the approved machined-metal control-panel direction.
========================================================== */
.consumer-home{
--ctl-steel-1:#f1f3f4;
--ctl-steel-2:#9ea7ae;
--ctl-steel-3:#343b42;
--ctl-steel-dark:#141a20;
--ctl-blue:#087af3;
--ctl-blue-deep:#073d86;
--ctl-orange:#ff7b10;
--ctl-orange-deep:#a83b00;
}
/* darker industrial stage so the metal controls pop */
.consumer-home .tesla-home{
background:
radial-gradient(circle at 50% -12%,rgba(43,105,174,.20),transparent 36%),
linear-gradient(180deg,#dfe5eb 0%,#eef2f5 35%,#d9e0e7 100%)!important;
}
/* Shared machined frame */
.consumer-home .tesla-action-btn,
.consumer-home .secondary-action-btn{
position:relative!important;
isolation:isolate!important;
overflow:hidden!important;
border:0!important;
outline:0!important;
border-radius:0!important;
clip-path:polygon(4% 0,93% 0,100% 18%,100% 82%,93% 100%,4% 100%,0 82%,0 18%)!important;
background:
repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.025) 1px 3px),
linear-gradient(180deg,#59616a 0%,#353c44 46%,#20262c 100%)!important;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.46),
inset 0 0 0 5px rgba(9,14,20,.78),
inset 0 0 0 7px rgba(196,205,212,.48),
0 18px 34px rgba(3,12,22,.28)!important;
color:#f7f8f9!important;
transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important;
}
.consumer-home .tesla-action-btn:before,
.consumer-home .secondary-action-btn:before{
content:""!important;
position:absolute!important;
inset:8px!important;
z-index:-2!important;
clip-path:inherit!important;
background:
linear-gradient(110deg,rgba(255,255,255,.22),transparent 25% 72%,rgba(0,0,0,.34)),
repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.035) 1px 4px),
linear-gradient(180deg,#4d555e,#242b32)!important;
opacity:1!important;
}
.consumer-home .tesla-action-btn:after,
.consumer-home .secondary-action-btn:after{
content:""!important;
position:absolute!important;
left:24%!important;
right:5%!important;
bottom:6px!important;
height:4px!important;
z-index:3!important;
border-radius:999px!important;
box-shadow:0 0 12px currentColor,0 0 24px currentColor!important;
background:currentColor!important;
opacity:.9!important;
}
.consumer-home .tesla-action-btn:hover,
.consumer-home .secondary-action-btn:hover{
transform:translateY(-3px)!important;
filter:brightness(1.08)!important;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.55),
inset 0 0 0 5px rgba(6,10,14,.88),
inset 0 0 0 7px rgba(214,221,226,.62),
0 22px 40px rgba(3,12,22,.34)!important;
}
/* Primary metal buttons */
.consumer-home .tesla-action-btn{
min-height:160px!important;
padding:22px 28px 22px 22px!important;
gap:22px!important;
justify-content:flex-start!important;
}
.consumer-home .shop-action{color:var(--ctl-blue)!important}
.consumer-home .truck-action{color:var(--ctl-orange)!important}
/* Hex icon control plate */
.consumer-home .tesla-action-icon,
.consumer-home .industrial-secondary-icon{
position:relative!important;
z-index:4!important;
display:grid!important;
place-items:center!important;
flex:0 0 104px!important;
width:104px!important;
height:104px!important;
border-radius:0!important;
clip-path:polygon(25% 0,75% 0,100% 24%,100% 76%,75% 100%,25% 100%,0 76%,0 24%)!important;
background:
radial-gradient(circle at 50% 50%,rgba(255,255,255,.10) 0 2px,transparent 2px 8px),
linear-gradient(180deg,#0d2238,#081421)!important;
border:0!important;
box-shadow:
inset 0 0 0 3px rgba(212,220,226,.88),
inset 0 0 0 7px #202830,
inset 0 0 0 10px currentColor,
0 8px 18px rgba(0,0,0,.34)!important;
color:inherit!important;
}
.consumer-home .tesla-action-icon:before,
.consumer-home .industrial-secondary-icon:before{
content:""!important;
position:absolute!important;
inset:14px!important;
clip-path:inherit!important;
background:
radial-gradient(circle at 50% 50%,rgba(255,255,255,.06) 0 1px,transparent 1px 6px),
linear-gradient(180deg,rgba(7,31,58,.95),rgba(5,16,28,.95))!important;
box-shadow:inset 0 0 18px currentColor!important;
opacity:.9!important;
}
.consumer-home .tesla-action-icon svg,
.consumer-home .industrial-secondary-icon svg{
position:relative!important;
z-index:2!important;
width:52px!important;
height:52px!important;
fill:#eef2f5!important;
filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))!important;
}
/* Primary copy now reads like stamped control lettering */
.consumer-home .tesla-action-btn>span:last-child{
position:relative!important;
z-index:4!important;
color:#f5f6f7!important;
}
.consumer-home .tesla-action-btn strong{
font-size:23px!important;
line-height:1.02!important;
letter-spacing:-.6px!important;
text-shadow:0 2px 2px rgba(0,0,0,.75),0 0 12px rgba(255,255,255,.08)!important;
}
.consumer-home .tesla-action-btn small{
color:#cbd2d8!important;
font-size:13px!important;
}
/* Different-location = blue machine control */
.consumer-home .location-secondary-btn{
color:var(--ctl-blue)!important;
}
/* Hydraulic-shops = orange machine control */
.consumer-home .hydraulic-shops-secondary-btn{
color:var(--ctl-orange)!important;
}
/* Secondary metal controls use the same hex-plate language */
.consumer-home .secondary-action-btn{
min-height:112px!important;
display:flex!important;
flex-direction:row!important;
justify-content:flex-start!important;
align-items:center!important;
gap:18px!important;
padding:14px 24px 14px 18px!important;
text-align:left!important;
}
.consumer-home .industrial-secondary-icon{
flex-basis:78px!important;
width:78px!important;
height:78px!important;
}
.consumer-home .industrial-secondary-icon:before{inset:11px!important}
.consumer-home .industrial-secondary-icon svg{
width:39px!important;
height:39px!important;
}
.consumer-home .industrial-secondary-copy{
position:relative!important;
z-index:4!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
color:#f4f6f7!important;
}
.consumer-home .industrial-secondary-copy small{
color:#c9d0d6!important;
font-size:11px!important;
font-weight:900!important;
letter-spacing:1.1px!important;
}
.consumer-home .industrial-secondary-copy b{
margin-top:5px!important;
color:#f6f7f8!important;
font-size:20px!important;
line-height:1.05!important;
text-shadow:0 2px 2px rgba(0,0,0,.75)!important;
}
/* Accent edge rails */
.consumer-home .shop-action,
.consumer-home .location-secondary-btn{
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.48),
inset 0 0 0 5px rgba(6,10,14,.84),
inset 0 0 0 7px rgba(183,197,209,.55),
0 0 22px rgba(0,112,255,.16),
0 18px 34px rgba(3,12,22,.30)!important;
}
.consumer-home .truck-action,
.consumer-home .hydraulic-shops-secondary-btn{
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.48),
inset 0 0 0 5px rgba(6,10,14,.84),
inset 0 0 0 7px rgba(183,197,209,.55),
0 0 22px rgba(255,108,0,.17),
0 18px 34px rgba(3,12,22,.30)!important;
}
/* trust line gets a small industrial readout feel */
.consumer-home .tesla-trust-line{
margin-top:28px!important;
color:#5d6a77!important;
}
.consumer-home .tesla-trust-line strong{
color:#1c5faa!important;
}
@media(max-width:980px){
.consumer-home .tesla-action-btn{
min-height:150px!important;
}
.consumer-home .secondary-action-btn{
min-height:100px!important;
}
}
@media(max-width:700px){
.consumer-home .tesla-action-btn{
min-height:132px!important;
padding:16px 18px!important;
gap:14px!important;
}
.consumer-home .tesla-action-icon{
width:76px!important;
height:76px!important;
flex-basis:76px!important;
}
.consumer-home .tesla-action-icon:before{inset:11px!important}
.consumer-home .tesla-action-icon svg{width:39px!important;height:39px!important}
.consumer-home .tesla-action-btn strong{font-size:18px!important}
.consumer-home .secondary-action-btn{
min-height:92px!important;
padding:12px 16px!important;
}
.consumer-home .industrial-secondary-icon{
width:64px!important;height:64px!important;flex-basis:64px!important;
}
.consumer-home .industrial-secondary-icon svg{width:32px!important;height:32px!important}
.consumer-home .industrial-secondary-copy b{font-size:16px!important}
}
/* ==========================================================
v5.8.24 — APPROVED INDUSTRIAL LANDING / LIVE HTML BUTTONS
Final direction from approved mockup:
- full clean logo, nothing under it
- bright machined-steel button faces
- blue customer-search controls / orange service-shop controls
- 2 x 2 control-panel grid
- NO image-button replacement; these remain functional HTML buttons
========================================================== */
/* ----- TOP LOGO: FULLY VISIBLE, NO CROP, NOTHING UNDER IT ----- */
.consumer-home .site-header{
position:relative!important;
top:auto!important;
overflow:visible!important;
background:
radial-gradient(circle at 50% 22%,rgba(23,93,170,.12),transparent 36%),
linear-gradient(180deg,#06111b 0%,#07131e 100%)!important;
border:0!important;
box-shadow:none!important;
min-height:0!important;
}
.consumer-home .header-inner{
min-height:0!important;
height:auto!important;
padding:20px 0 18px!important;
margin:0 auto!important;
gap:0!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
overflow:visible!important;
}
.consumer-home .site-nav,
.consumer-home .nav-toggle{display:none!important}
.consumer-home .industrial-brand,
.consumer-home .brand-lockup{
display:block!important;
width:min(860px,92vw)!important;
max-width:860px!important;
height:auto!important;
min-height:0!important;
margin:0 auto!important;
padding:0!important;
overflow:visible!important;
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
border-radius:0!important;
}
.consumer-home .industrial-brand-logo{
position:static!important;
transform:none!important;
display:block!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
max-height:none!important;
object-fit:contain!important;
object-position:center!important;
margin:0 auto!important;
padding:0!important;
overflow:visible!important;
clip-path:none!important;
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
filter:drop-shadow(0 14px 22px rgba(0,0,0,.32))!important;
}
/* ----- LANDING STAGE ----- */
.consumer-home .tesla-home{
padding:34px 0 70px!important;
border:0!important;
background:
radial-gradient(circle at 50% -8%,rgba(38,100,169,.10),transparent 35%),
repeating-linear-gradient(0deg,rgba(20,31,42,.018) 0 1px,transparent 1px 4px),
linear-gradient(180deg,#eef2f5 0%,#e6ebf0 55%,#dde3e9 100%)!important;
}
.consumer-home .tesla-home:before{
background:radial-gradient(circle,rgba(14,77,150,.08),transparent 67%)!important;
}
.consumer-home .tesla-home-copy{max-width:1120px!important}
.consumer-home .tesla-home .eyebrow{
color:#1763ba!important;
font-size:13px!important;
letter-spacing:2.4px!important;
margin:0 0 16px!important;
}
.consumer-home .tesla-home h1{
font-size:clamp(54px,6.3vw,92px)!important;
line-height:.93!important;
letter-spacing:-4px!important;
margin:0 auto 16px!important;
color:#09131e!important;
max-width:1080px!important;
}
.consumer-home .tesla-home h1 span{color:#2672cf!important}
.consumer-home .hero-lead{
max-width:900px!important;
margin:0 auto 26px!important;
color:#4f6173!important;
font-size:18px!important;
}
/* ----- 2 X 2 INDUSTRIAL CONTROL GRID ----- */
.consumer-home .tesla-primary-actions,
.consumer-home .hero-secondary-actions{
max-width:1040px!important;
margin-left:auto!important;
margin-right:auto!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:14px!important;
}
.consumer-home .tesla-primary-actions{margin-top:10px!important;margin-bottom:14px!important}
.consumer-home .hero-secondary-actions{margin-top:0!important;margin-bottom:18px!important}
/* ----- OUTER MACHINED METAL BODY ----- */
.consumer-home .tesla-action-btn,
.consumer-home .secondary-action-btn{
--accent:#0e79ed;
position:relative!important;
isolation:isolate!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:flex-start!important;
width:100%!important;
min-height:138px!important;
padding:15px 24px 15px 16px!important;
gap:20px!important;
overflow:hidden!important;
text-align:left!important;
text-decoration:none!important;
color:#111820!important;
cursor:pointer!important;
border:0!important;
outline:0!important;
border-radius:0!important;
clip-path:polygon(5.5% 0,91.5% 0,100% 23%,100% 77%,91.5% 100%,5.5% 100%,0 77%,0 23%)!important;
background:
linear-gradient(180deg,#f5f7f8 0%,#aeb7bd 7%,#69747c 11%,#e8ecee 17%,#aeb6bc 49%,#707a81 84%,#dfe4e7 90%,#8d979e 95%,#edf0f2 100%)!important;
box-shadow:
0 16px 26px rgba(3,12,22,.27),
0 3px 0 rgba(255,255,255,.72) inset,
0 -3px 0 rgba(20,28,35,.72) inset!important;
transform:translateZ(0)!important;
transition:transform .16s ease,filter .16s ease!important;
}
.consumer-home .shop-action,
.consumer-home .location-secondary-btn{--accent:#087cf4!important}
.consumer-home .truck-action,
.consumer-home .hydraulic-shops-secondary-btn{--accent:#ff7810!important}
/* dark steel center face */
.consumer-home .tesla-action-btn:before,
.consumer-home .secondary-action-btn:before{
content:""!important;
position:absolute!important;
z-index:-1!important;
left:14px!important;
right:14px!important;
top:10px!important;
bottom:10px!important;
clip-path:polygon(4.5% 0,92.5% 0,100% 22%,100% 78%,92.5% 100%,4.5% 100%,0 78%,0 22%)!important;
background:
repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.025) 1px 3px),
linear-gradient(180deg,#596169 0%,#3d444b 9%,#242a30 50%,#393f45 87%,#171c21 100%)!important;
box-shadow:
inset 0 0 0 2px rgba(0,0,0,.72),
inset 0 0 0 4px rgba(255,255,255,.12),
inset 0 0 20px rgba(0,0,0,.34)!important;
opacity:1!important;
}
/* glowing rail */
.consumer-home .tesla-action-btn:after,
.consumer-home .secondary-action-btn:after{
content:""!important;
position:absolute!important;
z-index:5!important;
left:28%!important;
right:7%!important;
bottom:8px!important;
height:3px!important;
background:var(--accent)!important;
border-radius:999px!important;
box-shadow:0 0 8px var(--accent),0 0 17px var(--accent)!important;
opacity:1!important;
}
/* ----- HEX ICON MODULE ----- */
.consumer-home .tesla-action-icon,
.consumer-home .industrial-secondary-icon{
position:relative!important;
z-index:4!important;
flex:0 0 108px!important;
width:108px!important;
height:108px!important;
display:grid!important;
place-items:center!important;
margin:0!important;
color:var(--accent)!important;
border:0!important;
border-radius:0!important;
clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)!important;
background:
linear-gradient(145deg,#f4f6f7 0%,#828d95 18%,#1c242c 26%,#111820 50%,#333d45 76%,#9aa3aa 84%,#f0f3f5 100%)!important;
box-shadow:
0 8px 14px rgba(0,0,0,.38),
inset 0 0 0 2px rgba(255,255,255,.58),
inset 0 0 0 7px #1b232b,
inset 0 0 0 10px var(--accent)!important;
}
.consumer-home .tesla-action-icon:before,
.consumer-home .industrial-secondary-icon:before{
content:""!important;
position:absolute!important;
inset:15px!important;
clip-path:inherit!important;
z-index:0!important;
background:
radial-gradient(circle at 50% 45%,rgba(255,255,255,.07),transparent 45%),
linear-gradient(180deg,#0b2540 0%,#07131f 100%)!important;
box-shadow:inset 0 0 24px var(--accent),0 0 9px var(--accent)!important;
opacity:1!important;
}
.consumer-home .truck-action .tesla-action-icon:before,
.consumer-home .hydraulic-shops-secondary-btn .industrial-secondary-icon:before{
background:
radial-gradient(circle at 50% 45%,rgba(255,188,116,.10),transparent 45%),
linear-gradient(180deg,#4a1e04 0%,#1f0c02 100%)!important;
}
.consumer-home .tesla-action-icon svg,
.consumer-home .industrial-secondary-icon svg{
position:relative!important;
z-index:3!important;
width:53px!important;
height:53px!important;
fill:#f5f7f8!important;
filter:drop-shadow(0 3px 2px rgba(0,0,0,.65))!important;
}
/* ----- COPY ----- */
.consumer-home .tesla-action-btn>span:last-child,
.consumer-home .industrial-secondary-copy{
position:relative!important;
z-index:4!important;
flex:1!important;
min-width:0!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:center!important;
color:#f5f7f8!important;
}
.consumer-home .tesla-action-btn strong,
.consumer-home .industrial-secondary-copy b{
margin:0!important;
color:#f7f8f9!important;
font-size:24px!important;
font-weight:950!important;
line-height:1.04!important;
letter-spacing:-.4px!important;
text-shadow:0 2px 2px rgba(0,0,0,.82)!important;
}
.consumer-home .tesla-action-btn small{
margin-top:7px!important;
color:#cbd2d8!important;
font-size:12px!important;
font-weight:800!important;
}
.consumer-home .industrial-secondary-copy small{
margin:0 0 4px!important;
color:#d3d8dc!important;
font-size:12px!important;
font-weight:950!important;
letter-spacing:.7px!important;
line-height:1.1!important;
}
.consumer-home .hydraulic-shops-secondary-btn .industrial-secondary-copy small{
color:#ff8a22!important;
}
.consumer-home .hydraulic-shops-secondary-btn .industrial-secondary-copy b{
color:#ff8120!important;
text-shadow:0 2px 2px rgba(0,0,0,.86),0 0 8px rgba(255,111,10,.12)!important;
}
/* lower row matches upper row size */
.consumer-home .secondary-action-btn{min-height:138px!important}
.consumer-home .industrial-secondary-icon{
flex-basis:108px!important;
width:108px!important;
height:108px!important;
}
.consumer-home .industrial-secondary-icon:before{inset:15px!important}
.consumer-home .industrial-secondary-icon svg{width:53px!important;height:53px!important}
.consumer-home .tesla-action-btn:hover,
.consumer-home .secondary-action-btn:hover{
transform:translateY(-3px)!important;
filter:brightness(1.08) contrast(1.02)!important;
}
.consumer-home .tesla-action-btn:active,
.consumer-home .secondary-action-btn:active{
transform:translateY(0)!important;
filter:brightness(.98)!important;
}
/* ----- COUNT READOUT ----- */
.consumer-home .tesla-trust-line{
margin-top:28px!important;
padding-top:0!important;
border:0!important;
color:#495968!important;
font-size:12px!important;
letter-spacing:.5px!important;
}
.consumer-home .tesla-trust-line strong{color:#1b63b8!important;font-size:16px!important}
/* ----- MANUAL LOCATION PANEL ----- */
.consumer-home .tesla-manual-location{
max-width:900px!important;
margin:18px auto 20px!important;
border:1px solid #b9c6d2!important;
border-radius:15px!important;
background:linear-gradient(180deg,#f7f9fa,#e6ebef)!important;
box-shadow:0 15px 35px rgba(4,17,30,.12)!important;
}
/* no duplicated framed logo lower on home */
.consumer-home .home-official-logo-wrap,
.consumer-home .home-official-logo,
.consumer-home .home-brand-banner,
.consumer-home .consumer-home-logo-repeat{display:none!important}
@media(max-width:980px){
.consumer-home .industrial-brand,
.consumer-home .brand-lockup{width:min(760px,94vw)!important}
.consumer-home .tesla-primary-actions,
.consumer-home .hero-secondary-actions{grid-template-columns:1fr!important;max-width:720px!important}
}
@media(max-width:700px){
.consumer-home .header-inner{padding:12px 0 10px!important}
.consumer-home .industrial-brand,
.consumer-home .brand-lockup{width:min(96vw,620px)!important}
.consumer-home .tesla-home{padding:28px 0 46px!important}
.consumer-home .tesla-home h1{font-size:clamp(40px,12vw,64px)!important;letter-spacing:-2px!important}
.consumer-home .hero-lead{font-size:16px!important}
.consumer-home .tesla-action-btn,
.consumer-home .secondary-action-btn{
min-height:122px!important;
padding:13px 16px 13px 13px!important;
gap:13px!important;
}
.consumer-home .tesla-action-icon,
.consumer-home .industrial-secondary-icon{
width:82px!important;height:82px!important;flex-basis:82px!important;
}
.consumer-home .tesla-action-icon:before,
.consumer-home .industrial-secondary-icon:before{inset:12px!important}
.consumer-home .tesla-action-icon svg,
.consumer-home .industrial-secondary-icon svg{width:41px!important;height:41px!important}
.consumer-home .tesla-action-btn strong,
.consumer-home .industrial-secondary-copy b{font-size:18px!important}
.consumer-home .industrial-secondary-copy small{font-size:10px!important}
}
/* ==========================================================
v5.8.26 — LOCKED EXACT HOME VISUAL
Desktop uses the exact approved landing artwork with live,
invisible click targets. Current provider totals stay live.
========================================================== */
.consumer-home{
background:#07111b!important;
}
.consumer-home main{
background:#07111b!important;
}
.locked-home{
background:
linear-gradient(180deg,#07111b 0,#07111b 30%,#dfe4e8 30%,#dfe4e8 100%);
padding:0 0 34px;
min-height:100vh;
}
.locked-art-wrap{
position:relative;
width:min(100%,1672px);
margin:0 auto;
background:#07111b;
}
.locked-home-art{
display:block;
width:100%;
height:auto;
margin:0;
border:0;
outline:0;
box-shadow:none;
user-select:none;
-webkit-user-drag:none;
}
.locked-hotspot{
position:absolute;
display:block;
appearance:none;
-webkit-appearance:none;
border:0;
outline:0;
padding:0;
margin:0;
background:transparent;
cursor:pointer;
text-decoration:none;
z-index:4;
border-radius:18px;
}
.locked-hotspot:hover,
.locked-hotspot:focus-visible{
background:rgba(255,255,255,.035);
box-shadow:0 0 0 3px rgba(255,255,255,.12),0 0 28px rgba(28,120,244,.18);
}
.hotspot-shop{left:14.0%;top:59.5%;width:35.1%;height:18.7%}
.hotspot-truck{left:50.0%;top:59.5%;width:36.1%;height:18.7%}
.hotspot-other{left:14.0%;top:79.4%;width:35.1%;height:18.7%}
.hotspot-shops{left:50.0%;top:79.4%;width:36.1%;height:18.7%}
.sr-only{
position:absolute!important;
width:1px!important;
height:1px!important;
padding:0!important;
margin:-1px!important;
overflow:hidden!important;
clip:rect(0,0,0,0)!important;
white-space:nowrap!important;
border:0!important;
}
.locked-live-stats{
max-width:1000px;
margin:0 auto;
padding:17px 24px 8px;
display:flex;
align-items:center;
justify-content:center;
gap:18px;
background:#dfe4e8;
color:#1d2731;
font-size:17px;
font-weight:900;
letter-spacing:.25px;
text-align:center;
}
.locked-live-stats strong{
color:#075fc8;
font-size:21px;
}
.locked-live-stats i{
color:#075fc8;
font-style:normal;
}
.locked-location-panel{
width:min(900px,calc(100% - 32px));
margin:22px auto 0!important;
border-radius:18px!important;
border:1px solid #bfc8cf!important;
background:linear-gradient(180deg,#f6f8fa,#dce3e8)!important;
box-shadow:0 18px 36px rgba(0,0,0,.18)!important;
}
.locked-find-status{
width:min(900px,calc(100% - 32px));
margin:10px auto 0!important;
text-align:center!important;
}
.locked-mobile-actions{
display:none;
}
/* Keep the rest of the site below the home hero dark and clean. */
.consumer-home .site-footer{
margin-top:0!important;
border-top:0!important;
}
@media (max-width:760px){
.locked-home{
background:
linear-gradient(180deg,#07111b 0,#07111b 21%,#e4e8ec 21%,#e4e8ec 100%);
padding-bottom:32px;
}
/* On phones, show the logo portion of the locked art, then real large touch controls. */
.locked-art-wrap{
overflow:hidden;
height:auto;
background:#07111b;
}
.locked-home-art{
width:150%;
max-width:none;
transform:translateX(-16.7%);
}
.locked-hotspot{
display:none;
}
.locked-mobile-actions{
display:grid;
grid-template-columns:1fr;
gap:12px;
width:min(94%,520px);
margin:-2px auto 12px;
padding:18px 0 0;
}
.mobile-industrial-btn{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:82px;
padding:14px 18px;
text-decoration:none;
color:#fff!important;
border:2px solid #aeb7bf;
clip-path:polygon(5% 0,95% 0,100% 18%,100% 82%,95% 100%,5% 100%,0 82%,0 18%);
box-shadow:inset 0 0 0 4px #1a2026,0 10px 22px rgba(0,0,0,.20);
}
.mobile-industrial-btn b{
font-size:18px;
line-height:1.05;
}
.mobile-industrial-btn span{
font-size:14px;
margin-top:3px;
font-weight:900;
}
.mobile-blue{
background:linear-gradient(180deg,#355875,#173d61);
box-shadow:inset 0 0 0 4px #102031,0 0 14px rgba(0,112,255,.25),0 10px 22px rgba(0,0,0,.20);
}
.mobile-orange{
background:linear-gradient(180deg,#5c4c3e,#332c28);
box-shadow:inset 0 0 0 4px #241b15,0 0 14px rgba(255,112,0,.25),0 10px 22px rgba(0,0,0,.20);
}
.locked-live-stats{
width:94%;
padding:16px 12px 6px;
flex-direction:column;
gap:3px;
font-size:13px;
background:transparent;
}
.locked-live-stats i{display:none}
.locked-live-stats strong{font-size:17px}
}
/* ==========================================================
v5.8.27 — LOCKED VISIBLE BUTTON BOUNCE
The exact approved button art is layered over the locked
landing image, so the actual visible buttons pop/bounce.
========================================================== */
.locked-hotspot{
overflow:visible!important;
border-radius:0!important;
clip-path:polygon(4% 0,94% 0,100% 18%,100% 82%,94% 100%,4% 100%,0 82%,0 18%)!important;
transform-origin:center center!important;
transition:transform .20s ease,filter .20s ease!important;
will-change:transform,filter!important;
}
.locked-hotspot img{
display:block!important;
width:100%!important;
height:100%!important;
object-fit:fill!important;
pointer-events:none!important;
user-select:none!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
}
.hotspot-shop{
left:13.16%!important;
top:58.48%!important;
width:35.89%!important;
height:19.30%!important;
}
.hotspot-truck{
left:49.34%!important;
top:58.48%!important;
width:36.48%!important;
height:19.30%!important;
}
.hotspot-other{
left:13.16%!important;
top:78.36%!important;
width:35.89%!important;
height:19.30%!important;
}
.hotspot-shops{
left:49.34%!important;
top:78.36%!important;
width:36.48%!important;
height:19.30%!important;
}
.locked-hotspot:hover,
.locked-hotspot:focus-visible{
background:transparent!important;
box-shadow:none!important;
animation:fmhIndustrialBounce .44s cubic-bezier(.2,.9,.25,1.2) both!important;
filter:brightness(1.07) drop-shadow(0 13px 14px rgba(0,0,0,.28))!important;
z-index:8!important;
}
.hotspot-shop:hover,
.hotspot-shop:focus-visible,
.hotspot-other:hover,
.hotspot-other:focus-visible{
filter:brightness(1.08)
drop-shadow(0 0 10px rgba(0,115,255,.58))
drop-shadow(0 14px 14px rgba(0,0,0,.26))!important;
}
.hotspot-truck:hover,
.hotspot-truck:focus-visible,
.hotspot-shops:hover,
.hotspot-shops:focus-visible{
filter:brightness(1.08)
drop-shadow(0 0 10px rgba(255,113,0,.55))
drop-shadow(0 14px 14px rgba(0,0,0,.26))!important;
}
.locked-hotspot:active{
animation:none!important;
transform:scale(1.018)!important;
filter:brightness(.98)!important;
}
@keyframes fmhIndustrialBounce{
0% {transform:scale(1);}
38% {transform:scale(1.055);}
68% {transform:scale(1.025);}
84% {transform:scale(1.045);}
100% {transform:scale(1.035);}
}
/* Keep motion accessible for users who request reduced motion. */
@media (prefers-reduced-motion: reduce){
.locked-hotspot:hover,
.locked-hotspot:focus-visible{
animation:none!important;
transform:scale(1.02)!important;
}
}
/* Mobile uses the existing real touch buttons; give them a press/pop too. */
@media (max-width:760px){
.mobile-industrial-btn{
transition:transform .16s ease,filter .16s ease!important;
}
.mobile-industrial-btn:active{
transform:scale(1.035)!important;
filter:brightness(1.08)!important;
}
}
/* ==========================================================
v5.8.28 — DESKTOP FOOTER LOCKED LOGO + MOBILE CLEANUP
Desktop landing remains visually locked.
========================================================== */
/* Exact locked footer brand — replaces old badge/text footer logo. */
.locked-brand-footer{
margin-top:0!important;
padding-top:28px!important;
background:linear-gradient(180deg,#07111b,#040a10)!important;
border-top:0!important;
}
.locked-footer-logo-link{
display:block!important;
width:min(820px,92vw)!important;
margin:0 auto 18px!important;
padding:0!important;
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
}
.locked-footer-logo{
display:block!important;
width:100%!important;
height:auto!important;
margin:0!important;
padding:0!important;
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
}
.locked-brand-footer .footer-links-clean{
justify-content:center!important;
}
.locked-brand-footer .clean-footer-bottom{
border-top:0!important;
}
/* Mobile-only hero is hidden on desktop. */
.locked-mobile-hero{
display:none;
}
/* ==========================================================
MOBILE: ONE CLEAN BUTTON SET ONLY
Hide the desktop locked artwork completely on phone,
then render the exact locked logo + responsive headline +
one set of exact industrial button graphics.
========================================================== */
@media (max-width:760px){
.locked-home{
background:linear-gradient(180deg,#07111b 0%,#07111b 33%,#e3e7eb 33%,#e3e7eb 100%)!important;
padding-bottom:28px!important;
}
.locked-art-wrap{
display:none!important;
}
.locked-mobile-hero{
display:block!important;
background:#07111b!important;
padding:0 0 20px!important;
}
.locked-mobile-logo{
display:block!important;
width:100%!important;
height:auto!important;
margin:0 auto!important;
padding:0!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
}
.locked-mobile-copy{
padding:18px 16px 20px!important;
text-align:center!important;
background:linear-gradient(180deg,#e7ebef,#dfe4e8)!important;
}
.locked-mobile-copy>span{
display:block!important;
color:#0c5fb8!important;
font-size:11px!important;
line-height:1.25!important;
font-weight:950!important;
letter-spacing:1.15px!important;
margin-bottom:10px!important;
}
.locked-mobile-copy h1{
margin:0!important;
color:#0b1520!important;
font-size:clamp(32px,9.8vw,50px)!important;
line-height:.96!important;
letter-spacing:-1.4px!important;
font-weight:950!important;
}
.locked-mobile-copy h1 b{
color:#2875d5!important;
}
.locked-mobile-copy p{
margin:12px auto 0!important;
max-width:580px!important;
color:#43515f!important;
font-size:14px!important;
line-height:1.38!important;
}
.locked-mobile-actions{
display:grid!important;
grid-template-columns:1fr!important;
gap:12px!important;
width:94%!important;
max-width:600px!important;
margin:0 auto!important;
padding:10px 0 12px!important;
}
.mobile-industrial-btn{
display:block!important;
width:100%!important;
min-height:0!important;
padding:0!important;
margin:0!important;
border:0!important;
outline:0!important;
background:transparent!important;
box-shadow:none!important;
clip-path:none!important;
text-decoration:none!important;
transition:transform .16s ease,filter .16s ease!important;
}
.mobile-industrial-btn img{
display:block!important;
width:100%!important;
height:auto!important;
margin:0!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
pointer-events:none!important;
}
.mobile-industrial-btn:active{
transform:scale(1.025)!important;
filter:brightness(1.08)!important;
}
.locked-live-stats{
width:94%!important;
margin:10px auto 0!important;
padding:12px 8px!important;
background:transparent!important;
flex-direction:row!important;
flex-wrap:wrap!important;
gap:8px 12px!important;
color:#263440!important;
font-size:12px!important;
}
.locked-live-stats strong{
font-size:18px!important;
}
.locked-live-stats i{
display:inline!important;
}
.locked-brand-footer{
padding-top:20px!important;
}
.locked-footer-logo-link{
width:94%!important;
}
}
/* ==========================================================
v5.8.29 — LOCKED LANDING: LIST YOUR SHOP FREE
Keeps the approved four-button layout. Only button #4 copy
changes, with a split blue/copper treatment.
========================================================== */
.shop-free-industrial{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:4.5%!important;
overflow:hidden!important;
color:#fff!important;
background:
linear-gradient(90deg,
#0d417c 0%,#1064b7 46.5%,
#83451f 53.5%,#c76522 100%)!important;
border:2px solid #aeb7c1!important;
box-shadow:
inset 0 0 0 4px #171d22,
inset 0 0 22px rgba(255,255,255,.10),
0 9px 18px rgba(0,0,0,.24)!important;
text-shadow:0 2px 3px rgba(0,0,0,.55)!important;
}
.shop-free-industrial:before{
content:""!important;
position:absolute!important;
inset:5px!important;
clip-path:inherit!important;
border:1px solid rgba(255,255,255,.32)!important;
pointer-events:none!important;
}
.shop-free-icon{
width:19%!important;
aspect-ratio:1!important;
display:grid!important;
place-items:center!important;
border-radius:14px!important;
background:linear-gradient(145deg,#174d91,#0b2f60)!important;
border:2px solid #c5cbd1!important;
color:#fff!important;
font-size:clamp(18px,2vw,38px)!important;
box-shadow:inset 0 0 0 4px #0b1420,0 0 12px rgba(41,132,255,.65)!important;
}
.shop-free-copy{
display:flex!important;
align-items:baseline!important;
justify-content:center!important;
gap:.32em!important;
white-space:nowrap!important;
font-weight:950!important;
letter-spacing:-.6px!important;
line-height:1!important;
}
.shop-free-copy b{
font-size:clamp(16px,2.1vw,34px)!important;
color:#f1f4f6!important;
}
.shop-free-copy strong{
font-size:clamp(17px,2.2vw,36px)!important;
color:#ffb264!important;
}
.shop-free-arrow{
font-size:clamp(28px,3vw,54px)!important;
line-height:1!important;
color:#fff!important;
transform:translateY(-1px)!important;
}
.hotspot-shops:hover,.hotspot-shops:focus-visible{
filter:brightness(1.10)
drop-shadow(0 0 10px rgba(25,121,245,.50))
drop-shadow(0 0 12px rgba(255,116,36,.45))
drop-shadow(0 14px 14px rgba(0,0,0,.26))!important;
}
@media(max-width:760px){
.mobile-shop-free{
min-height:88px!important;
display:grid!important;
grid-template-columns:72px 1fr 38px!important;
align-items:center!important;
gap:10px!important;
overflow:hidden!important;
position:relative!important;
padding:8px 14px 8px 10px!important;
background:
linear-gradient(90deg,#0d4e96 0%,#1369bf 48%,#92501f 52%,#d36d27 100%)!important;
border:2px solid #aeb7c1!important;
clip-path:polygon(4% 0,94% 0,100% 18%,100% 82%,94% 100%,4% 100%,0 82%,0 18%)!important;
box-shadow:inset 0 0 0 4px #17202a,0 9px 18px rgba(0,0,0,.22)!important;
color:#fff!important;
}
.mobile-shop-icon{
width:62px!important;height:62px!important;border-radius:12px!important;
display:grid!important;place-items:center!important;
background:linear-gradient(145deg,#1b5eae,#0a3268)!important;
border:2px solid #d1d6dc!important;
box-shadow:inset 0 0 0 4px #0c1722,0 0 12px rgba(35,132,255,.6)!important;
font-size:25px!important;
}
.mobile-shop-copy{
display:flex!important;
flex-wrap:wrap!important;
align-items:baseline!important;
gap:.34em!important;
font-weight:950!important;
text-align:left!important;
line-height:.96!important;
text-shadow:0 2px 3px rgba(0,0,0,.5)!important;
}
.mobile-shop-copy b{font-size:clamp(21px,6vw,31px)!important}
.mobile-shop-copy strong{font-size:clamp(22px,6.2vw,32px)!important;color:#ffc07d!important}
.mobile-shop-arrow{font-size:46px!important;line-height:1!important}
}
/* ==========================================================
v5.8.29 — SHOP OWNER PRICING PAGE
Dark machined-metal cards matching the approved concept.
Desktop = 3 columns, phone = stacked cards.
========================================================== */
.shop-owner-page{
--fmh-blue:#1672d7;
--fmh-blue2:#0b4b91;
--fmh-orange:#f07b24;
--fmh-copper:#a84f1e;
--fmh-silver:#d9e0e6;
min-height:100vh;
background:
radial-gradient(circle at 12% 12%,rgba(22,114,215,.14),transparent 24%),
radial-gradient(circle at 88% 15%,rgba(240,123,36,.12),transparent 24%),
linear-gradient(180deg,#03070b,#07111a 40%,#020508);
color:#eef4f8;
}
.shop-owner-shell{width:min(1500px,94%);margin:0 auto}
.shop-owner-top{
padding:18px 0 10px;
display:grid;
grid-template-columns:minmax(250px,500px) 1fr;
align-items:center;
gap:30px;
}
.shop-owner-logo{display:block;width:100%;height:auto}
.shop-owner-heading{text-align:left}
.shop-owner-heading .eyebrow{
display:inline-block;color:#9ebfe7;font-size:12px;font-weight:950;
letter-spacing:1.8px;text-transform:uppercase;margin-bottom:8px
}
.shop-owner-heading h1{
margin:0;color:#f1f3f5;font-size:clamp(34px,4vw,66px);
line-height:.92;letter-spacing:-2px;font-weight:950;text-transform:uppercase
}
.shop-owner-heading h1 span{color:var(--fmh-orange)}
.shop-owner-heading p{
margin:12px 0 0;color:#b9c7d4;font-size:15px;font-weight:800
}
.shop-value-row{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
margin:10px 0 16px;padding:12px 0;border-top:1px solid #294155;border-bottom:1px solid #294155
}
.shop-value-row div{text-align:center;padding:4px 12px;border-right:1px solid #263c4f}
.shop-value-row div:last-child{border-right:0}
.shop-value-row b{display:block;font-size:13px;letter-spacing:.7px;text-transform:uppercase}
.shop-value-row span{display:block;margin-top:3px;color:#9cacba;font-size:11px}
.shop-pricing-grid{
display:grid;grid-template-columns:1fr 1.05fr 1.05fr;gap:14px;align-items:stretch;
padding:4px 0 18px
}
.shop-plan{
position:relative;overflow:hidden;border-radius:16px;
background:
linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01)),
#080d12;
border:2px solid #465565;
box-shadow:inset 0 0 0 4px #141a20,0 18px 34px rgba(0,0,0,.34);
display:flex;flex-direction:column
}
.shop-plan:before{
content:"";height:5px;display:block;background:linear-gradient(90deg,#0b4688,#1682ed,#7fc0ff)
}
.shop-plan.pro{
border-color:#94501f;
box-shadow:inset 0 0 0 4px #19130f,0 0 26px rgba(240,123,36,.19),0 18px 34px rgba(0,0,0,.36)
}
.shop-plan.pro:before{background:linear-gradient(90deg,#834014,#f17b22,#ffb05e)}
.shop-plan.featured{border-color:#245e9c}
.shop-plan.featured:before{background:linear-gradient(90deg,#0c4380,#1880e6,#73baff)}
.shop-plan-head{
padding:16px 18px 12px;text-align:center;border-bottom:1px solid #263746;
background:linear-gradient(180deg,#10171e,#090e13)
}
.plan-tab{
display:inline-flex;align-items:center;justify-content:center;
min-width:72%;padding:8px 14px;margin:-4px auto 10px;
clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);
background:linear-gradient(180deg,#175fa8,#0b3d73);
border:1px solid #6aa9e7;color:#fff;font-weight:950;letter-spacing:.6px
}
.pro .plan-tab{background:linear-gradient(180deg,#d97425,#8a3e15);border-color:#ffb06a}
.plan-number{opacity:.85;margin-right:8px}
.plan-price{
margin:3px 0 4px;font-weight:950;font-size:clamp(42px,4.2vw,68px);
line-height:.95;letter-spacing:-2px;color:#2b83e6
}
.pro .plan-price{color:#f2862e}
.plan-price small{font-size:14px;letter-spacing:.2px;margin-left:4px}
.plan-sub{margin:8px auto 0;max-width:330px;color:#b7c1ca;font-size:13px;line-height:1.35}
.popular-badge,.best-badge{
position:absolute;right:12px;top:9px;z-index:2;
padding:7px 9px;border:1px solid #e99b56;background:#131415;color:#fff;
font-size:10px;font-weight:950;line-height:1.05;text-align:center;transform:rotate(2deg)
}
.best-badge{border-color:#4b91da;color:#b8d9ff}
.plan-features{padding:16px 18px 8px;display:grid;gap:8px;flex:1}
.plan-feature{
display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;
color:#d8e0e6;font-size:12px;line-height:1.25
}
.plan-feature:before{
content:"✓";width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
background:#126ac4;color:#fff;font-size:10px;font-weight:950
}
.pro .plan-feature:before{background:#e97721;color:#111}
.plan-actions-row{
display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px 14px 2px
}
.plan-action{
min-height:62px;padding:8px 5px;border:1px solid #354453;border-radius:7px;
display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
background:linear-gradient(180deg,#10161c,#090d11);color:#fff
}
.plan-action i{font-style:normal;font-size:21px;margin-bottom:3px}
.plan-action b{font-size:9px;line-height:1.05}
.truck-addon{
margin:10px 14px 0;padding:12px;border:1px solid #7e4a22;border-radius:8px;
display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
background:linear-gradient(90deg,#17110d,#22150d)
}
.featured .truck-addon{border-color:#245f9d;background:linear-gradient(90deg,#09131f,#0a1f35)}
.truck-addon b{display:block;color:#f18a39;font-size:13px;text-transform:uppercase}
.featured .truck-addon b{color:#42a0ff}
.truck-addon span{display:block;color:#aeb9c4;font-size:10px;margin-top:3px}
.truck-addon strong{font-size:25px;color:#f28a35;white-space:nowrap}
.featured .truck-addon strong{color:#49a3ff}
.truck-addon small{font-size:9px;color:#9eabb7}
.plan-cta-wrap{padding:12px 14px 15px}
.plan-cta{
width:100%;display:block;padding:12px 14px;text-align:center;text-decoration:none!important;
color:#fff!important;font-size:15px;font-weight:950;letter-spacing:.5px;text-transform:uppercase;
border:2px solid #75889a;border-radius:7px;
background:linear-gradient(180deg,#176ac0,#0a4380);
box-shadow:inset 0 0 0 3px #0b1825,0 7px 13px rgba(0,0,0,.26)
}
.pro .plan-cta{background:linear-gradient(180deg,#ec8129,#9a4215);border-color:#e5a068}
.plan-cta:hover{filter:brightness(1.12);transform:translateY(-1px)}
.review-booster{
display:grid;grid-template-columns:270px 1fr 1fr;gap:12px;align-items:stretch;
margin:0 0 18px;padding:12px;border:1px solid #2b4358;border-radius:12px;
background:linear-gradient(180deg,#091018,#05090d)
}
.review-title{display:flex;align-items:center;gap:11px;padding:9px 12px}
.review-g{
width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
font-size:28px;font-weight:950;background:#fff;color:#1a73e8
}
.review-title b{display:block;font-size:18px;line-height:1}
.review-title span{display:block;color:#53a7ff;font-size:10px;font-weight:950;margin-top:6px}
.review-box{
padding:10px 12px;border-left:1px solid #273c4f;color:#c6d1db;font-size:11px;line-height:1.55
}
.review-box b{display:block;color:#fff;font-size:12px;text-transform:uppercase;margin-bottom:4px}
.review-box strong{color:#63acfa}
.owner-bottom-strip{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
margin:0 0 18px;border:1px solid #2a3d4f;background:#2a3d4f
}
.owner-bottom-strip div{padding:11px 12px;text-align:center;background:#080d12}
.owner-bottom-strip b{display:block;font-size:11px;color:#f0f4f7;text-transform:uppercase}
.owner-bottom-strip span{font-size:10px;color:#9eabb6}
.owner-interest{
margin:0 0 28px;padding:18px;border:1px solid #31495d;border-radius:14px;
background:#08111a
}
.owner-interest h2{margin:0 0 5px;font-size:22px}
.owner-interest p{margin:0 0 14px;color:#aab8c5;font-size:12px}
.owner-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.owner-form-grid label{display:grid;gap:5px;color:#cbd5dd;font-size:10px;font-weight:900;text-transform:uppercase}
.owner-form-grid input,.owner-form-grid select{
width:100%;padding:11px 12px;border-radius:7px;border:1px solid #3e556a;
background:#050b10;color:#fff;font:inherit
}
.owner-form-submit{
margin-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap
}
.owner-form-submit button{
padding:11px 20px;border:2px solid #db8a4d;border-radius:7px;
background:linear-gradient(180deg,#f08028,#a64818);color:#fff;font-weight:950;cursor:pointer
}
.owner-form-submit small{color:#8697a5}
.owner-success{
margin:12px 0 0;padding:10px 12px;border-radius:8px;
background:#0e412c;border:1px solid #2d805d;color:#d8ffed;font-weight:800
}
.owner-error{
margin:12px 0 0;padding:10px 12px;border-radius:8px;
background:#431414;border:1px solid #8d3939;color:#ffdada;font-weight:800
}
.hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none}
@media(max-width:980px){
.shop-owner-top{grid-template-columns:1fr;text-align:center}
.shop-owner-logo{max-width:650px;margin:0 auto}
.shop-owner-heading{text-align:center}
.shop-pricing-grid{grid-template-columns:1fr}
.shop-plan{max-width:720px;width:100%;margin:0 auto}
.review-booster{grid-template-columns:1fr}
.review-box{border-left:0;border-top:1px solid #273c4f}
}
@media(max-width:640px){
.shop-owner-shell{width:95%}
.shop-owner-top{padding-top:6px;gap:12px}
.shop-owner-heading h1{font-size:36px;letter-spacing:-1px}
.shop-value-row{grid-template-columns:1fr;gap:0}
.shop-value-row div{border-right:0;border-bottom:1px solid #263c4f;padding:8px}
.shop-value-row div:last-child{border-bottom:0}
.shop-pricing-grid{gap:12px}
.shop-plan-head{padding-top:16px}
.plan-price{font-size:56px}
.popular-badge,.best-badge{right:8px;top:8px}
.plan-actions-row{grid-template-columns:repeat(2,1fr)}
.truck-addon{grid-template-columns:1fr}
.owner-bottom-strip{grid-template-columns:1fr 1fr}
.owner-form-grid{grid-template-columns:1fr}
}
/* ==========================================================
v5.8.30 — LOCKED VISUAL POLISH + PACKAGE SIGNUP FLOW
========================================================== */
/* Honeycomb treatment around the sides and below the locked landing panel. */
body.consumer-home{
background-color:#03101b!important;
background-image:
linear-gradient(30deg,rgba(20,92,159,.22) 12%,transparent 12.5%,transparent 87%,rgba(20,92,159,.22) 87.5%,rgba(20,92,159,.22)),
linear-gradient(150deg,rgba(20,92,159,.22) 12%,transparent 12.5%,transparent 87%,rgba(20,92,159,.22) 87.5%,rgba(20,92,159,.22)),
linear-gradient(30deg,rgba(20,92,159,.13) 12%,transparent 12.5%,transparent 87%,rgba(20,92,159,.13) 87.5%,rgba(20,92,159,.13)),
linear-gradient(150deg,rgba(20,92,159,.13) 12%,transparent 12.5%,transparent 87%,rgba(20,92,159,.13) 87.5%,rgba(20,92,159,.13)),
linear-gradient(60deg,rgba(20,92,159,.10) 25%,transparent 25.5%,transparent 75%,rgba(20,92,159,.10) 75%,rgba(20,92,159,.10));
background-size:52px 91px;
background-position:0 0,0 0,26px 45px,26px 45px,0 0;
}
/* The approved fourth CTA is now a real matching industrial image, just like the other three. */
.hotspot-shops{
background:transparent!important;
border:0!important;
box-shadow:none!important;
}
.hotspot-shops img{
object-fit:fill!important;
}
@media(max-width:760px){
.mobile-industrial-btn img[src*="fmh-btn-list-shop-free"]{
width:100%!important;
height:auto!important;
object-fit:contain!important;
}
}
/* Pricing page final transition prompt */
.pricing-next-step{
margin:0 0 26px;padding:14px 18px;border:1px solid #2b4e6b;border-radius:10px;
display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;
background:#07111a;color:#aebccb;text-align:center
}
.pricing-next-step b{color:#fff;font-size:13px;letter-spacing:.6px}
.pricing-next-step span{font-size:11px}
/* Dedicated shop signup page */
.shop-signup-page{
min-height:100vh;color:#eef4f8;
background:
radial-gradient(circle at 10% 10%,rgba(20,113,216,.15),transparent 25%),
radial-gradient(circle at 90% 16%,rgba(234,113,31,.12),transparent 24%),
linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.45));
}
.shop-signup-shell{width:min(1420px,94%);margin:0 auto;padding:14px 0 34px}
.signup-logo-link{display:block;width:min(620px,92%);margin:0 auto 8px}
.signup-logo-link img{display:block;width:100%;height:auto}
.signup-breadcrumb{
margin:0 0 12px;padding:9px 12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
border-top:1px solid #26465f;border-bottom:1px solid #26465f;color:#8ea7bb;
font-size:10px;font-weight:950;letter-spacing:1px
}
.signup-breadcrumb a{color:#5caaff;text-decoration:none}
.selected-plan-card{
display:grid;grid-template-columns:1.7fr 1fr;gap:16px;align-items:center;
padding:18px 22px;margin-bottom:14px;border:2px solid #2e6eae;border-radius:15px;
background:linear-gradient(110deg,#07111a,#0a1f33);
box-shadow:inset 0 0 0 4px #0b1218,0 18px 30px rgba(0,0,0,.27)
}
.selected-plan-card.orange{
border-color:#a65b26;
background:linear-gradient(110deg,#0a1015,#23150c)
}
.selected-label{
display:block;color:#79baff;font-size:10px;font-weight:950;letter-spacing:1.4px
}
.orange .selected-label{color:#f29a55}
.selected-plan-main h1{
margin:3px 0 2px;font-size:clamp(30px,4vw,58px);line-height:.95;text-transform:uppercase
}
.selected-price{
font-size:clamp(27px,3vw,44px);font-weight:950;color:#49a2ff;letter-spacing:-1px
}
.orange .selected-price{color:#f1832e}
.selected-plan-main p{margin:8px 0 0;color:#aab8c5;font-size:12px}
.selected-confidence{
padding:14px;border-left:1px solid #2c4a62;color:#aab8c5;font-size:11px;line-height:1.5
}
.selected-confidence b{display:block;color:#fff;font-size:13px;margin-bottom:4px}
.signup-content-grid{
display:grid;grid-template-columns:1.08fr .92fr;gap:14px;align-items:start
}
.signup-benefits-panel,.signup-form-panel{
border:1px solid #32495d;border-radius:14px;background:#071019;
box-shadow:0 16px 28px rgba(0,0,0,.24);overflow:hidden
}
.signup-benefits-panel{padding:18px}
.signup-form-panel{padding:18px;position:sticky;top:10px}
.signup-section-title span{
display:block;color:#62acfa;font-size:9px;font-weight:950;letter-spacing:1.2px
}
.signup-section-title h2{margin:3px 0 14px;font-size:24px;line-height:1.05}
.signup-action-icons{
display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:0 0 14px
}
.signup-action-icons div{
min-height:74px;padding:9px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;
border:1px solid #334a5e;border-radius:7px;background:linear-gradient(#0d151d,#070c11);text-align:center
}
.signup-action-icons i{font-style:normal;font-size:24px;margin-bottom:4px;color:#f28b38}
.signup-action-icons b{font-size:9px;line-height:1.05}
.signup-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 11px}
.signup-feature{
display:grid;grid-template-columns:17px 1fr;gap:7px;color:#d0d9e0;font-size:11px;line-height:1.3
}
.signup-feature:before{
content:"✓";width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
background:#126cc7;color:#fff;font-weight:950;font-size:9px
}
.signup-review-box,.signup-truck-box{
margin-top:16px;padding:13px;border:1px solid #294d6b;border-radius:10px;
background:linear-gradient(110deg,#07111a,#0a1823)
}
.signup-review-box{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center}
.review-letter{
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#1a73e8;
font-size:28px;font-weight:950
}
.signup-review-box b,.signup-truck-box b{font-size:12px}
.signup-review-box p,.signup-truck-box p{margin:4px 0 0;color:#a9b7c3;font-size:10px;line-height:1.45}
.signup-truck-box{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.signup-truck-box span{display:block;color:#f18a38;font-size:9px;font-weight:950;letter-spacing:1px}
.signup-truck-box strong{color:#f38a34;font-size:26px;white-space:nowrap}
.signup-truck-box strong small{display:block;font-size:8px;text-align:right;color:#a9b7c3}
.signup-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.signup-fields label{
display:grid;gap:5px;color:#c7d2db;font-size:9px;font-weight:950;text-transform:uppercase
}
.signup-fields label em{font-style:normal;color:#6f8395;font-weight:700}
.signup-fields input,.signup-fields select{
width:100%;min-width:0;padding:11px 12px;border:1px solid #3b5267;border-radius:7px;
background:#03090e;color:#fff;font:inherit;font-size:16px
}
.signup-fields .span-2{grid-column:1/-1}
.signup-order-summary{
margin-top:14px;padding:12px;border:1px solid #304a60;border-radius:8px;background:#050b10
}
.signup-order-summary>div{
display:flex;justify-content:space-between;gap:12px;padding:6px 0;color:#aebbc6;font-size:11px;
border-bottom:1px solid #1f3040
}
.signup-order-summary>div:last-child{border-bottom:0}
.signup-order-summary b{color:#fff}
.signup-order-summary .signup-total{padding-top:10px;color:#fff;font-weight:950}
.signup-order-summary .signup-total strong{font-size:21px;color:#56aaff}
.signup-submit{
width:100%;min-height:48px;margin-top:12px;padding:12px 15px;border:2px solid #d98e53;border-radius:8px;
background:linear-gradient(180deg,#ee812d,#9f4619);color:#fff;font-weight:950;letter-spacing:.5px;
cursor:pointer
}
.signup-submit:hover{filter:brightness(1.08)}
.signup-payment-note{margin:8px 0 0;color:#7f91a1;font-size:9px;line-height:1.4;text-align:center}
@media(max-width:900px){
.selected-plan-card{grid-template-columns:1fr}
.selected-confidence{border-left:0;border-top:1px solid #2c4a62}
.signup-content-grid{grid-template-columns:1fr}
.signup-form-panel{position:static}
}
@media(max-width:620px){
.shop-signup-shell{width:95%}
.signup-breadcrumb{font-size:9px}
.selected-plan-card{padding:15px}
.signup-feature-grid{grid-template-columns:1fr}
.signup-action-icons{grid-template-columns:1fr 1fr}
.signup-fields{grid-template-columns:1fr}
.signup-fields .span-2{grid-column:auto}
.signup-truck-box{grid-template-columns:1fr}
.signup-truck-box strong{text-align:left}
.signup-truck-box strong small{text-align:left}
}
/* v5.8.31 — Truck quantity selector fix.
Replaces the browser's huge native dropdown with a compact +/- number control. */
.truck-qty-control{
display:grid;
grid-template-columns:48px minmax(80px,1fr) 48px;
gap:8px;
align-items:center;
width:100%;
}
.signup-fields .truck-qty-control input{
text-align:center;
font-weight:950;
font-size:18px;
appearance:textfield;
-moz-appearance:textfield;
}
.signup-fields .truck-qty-control input::-webkit-outer-spin-button,
.signup-fields .truck-qty-control input::-webkit-inner-spin-button{
-webkit-appearance:none;
margin:0;
}
.truck-qty-btn{
min-height:46px;
border:1px solid #4c6579;
border-radius:7px;
background:linear-gradient(180deg,#16334d,#0a1c2b);
color:#fff;
font-size:25px;
font-weight:950;
cursor:pointer;
}
.truck-qty-btn:hover{filter:brightness(1.12)}
.truck-qty-btn:disabled{opacity:.35;cursor:not-allowed}
.truck-qty-help{
display:block;
margin-top:5px;
color:#7f91a1;
font-size:9px;
font-weight:700;
text-transform:none;
}
/* ==========================================================
v5.8.32 — LOCKED EXACT PRICING PAGE
Uses the user's approved pricing artwork as the visual source
of truth. Click areas remain live and lead to package signup.
========================================================== */
.locked-pricing-page{
min-height:100vh;
padding:8px 0 28px;
background:
radial-gradient(circle at 12% 15%,rgba(18,100,184,.16),transparent 26%),
radial-gradient(circle at 88% 15%,rgba(230,109,31,.10),transparent 24%),
#02060a;
}
.locked-pricing-shell{
width:min(1536px,100%);
margin:0 auto;
}
.locked-pricing-art{
position:relative;
width:100%;
line-height:0;
overflow:hidden;
background:#02060a;
}
.locked-pricing-art>img{
width:100%;
height:auto;
display:block;
}
.pricing-hotspot{
position:absolute;
z-index:5;
display:block;
border-radius:8px;
outline:none;
cursor:pointer;
}
.pricing-hotspot:hover,
.pricing-hotspot:focus-visible{
background:rgba(255,255,255,.025);
box-shadow:
0 0 0 2px rgba(255,255,255,.16),
0 0 18px rgba(45,137,245,.22);
}
.pricing-free{
left:7.7%;
top:62.4%;
width:19.6%;
height:6.1%;
}
.pricing-pro{
left:30.8%;
top:66.0%;
width:25.1%;
height:5.5%;
}
.pricing-featured{
left:63.1%;
top:66.0%;
width:24.0%;
height:5.5%;
}
.featured-state-note{
position:absolute;
z-index:4;
top:24.1%;
left:62.4%;
width:26.2%;
text-align:center;
line-height:1.05;
pointer-events:none;
}
.featured-state-note strong{
display:inline-block;
padding:4px 10px;
border:1px solid rgba(83,166,255,.8);
border-radius:999px;
background:rgba(2,13,25,.88);
color:#74b7ff;
font-size:clamp(9px,1vw,15px);
font-weight:950;
letter-spacing:.8px;
box-shadow:0 0 12px rgba(44,129,226,.25);
}
.featured-state-note span{
display:block;
margin-top:4px;
color:#d4dde5;
font-size:clamp(7px,.72vw,11px);
font-weight:800;
}
.pricing-mobile-note{
display:none;
}
@media(max-width:760px){
.locked-pricing-page{
padding-top:0;
}
.locked-pricing-art{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.locked-pricing-art>img{
width:980px;
max-width:none;
}
.pricing-hotspot,
.featured-state-note{
/* Hotspots are positioned against the fixed-width mobile art canvas. */
}
.pricing-mobile-note{
display:flex;
flex-direction:column;
gap:3px;
margin:10px 12px 0;
padding:11px 13px;
border:1px solid #265b92;
border-radius:8px;
background:#071321;
color:#dce8f3;
line-height:1.25;
text-align:center;
}
.pricing-mobile-note b{
color:#58a8ff;
font-size:12px;
}
.pricing-mobile-note span{
font-size:10px;
}
}
/* ==========================================================
v5.8.33 — LOCKED LANDING HONEYCOMB RESTORE
Restores the approved dark-blue honeycomb around BOTH sides
and below the locked silver landing panel.
========================================================== */
.consumer-home main,
.consumer-home .locked-home{
background-color:#03101b!important;
background-image:
linear-gradient(30deg,rgba(24,111,194,.24) 12%,transparent 12.5%,transparent 87%,rgba(24,111,194,.24) 87.5%,rgba(24,111,194,.24)),
linear-gradient(150deg,rgba(24,111,194,.24) 12%,transparent 12.5%,transparent 87%,rgba(24,111,194,.24) 87.5%,rgba(24,111,194,.24)),
linear-gradient(30deg,rgba(24,111,194,.13) 12%,transparent 12.5%,transparent 87%,rgba(24,111,194,.13) 87.5%,rgba(24,111,194,.13)),
linear-gradient(150deg,rgba(24,111,194,.13) 12%,transparent 12.5%,transparent 87%,rgba(24,111,194,.13) 87.5%,rgba(24,111,194,.13)),
linear-gradient(60deg,rgba(24,111,194,.10) 25%,transparent 25.5%,transparent 75%,rgba(24,111,194,.10) 75%,rgba(24,111,194,.10))!important;
background-size:52px 91px!important;
background-position:0 0,0 0,26px 45px,26px 45px,0 0!important;
}
.consumer-home .locked-home{
padding-bottom:34px!important;
}
.consumer-home .locked-art-wrap{
background:transparent!important;
}
.consumer-home .locked-live-stats{
background:transparent!important;
}
/* ==========================================================
v5.8.34 — FINAL CLEAN HONEYCOMB LOCK
Matches the approved visual target:
- true dark-blue hex/honeycomb background
- visible on both sides and below the silver panel
- does NOT redraw/change the four industrial buttons
========================================================== */
html,
body.consumer-home{
background:#020a12!important;
}
body.consumer-home,
.consumer-home main,
.consumer-home .locked-home{
background-color:#020a12!important;
background-image:
linear-gradient(30deg, #0f3452 12%, transparent 12.5%, transparent 87%, #0f3452 87.5%, #0f3452),
linear-gradient(150deg, #0f3452 12%, transparent 12.5%, transparent 87%, #0f3452 87.5%, #0f3452),
linear-gradient(30deg, #0f3452 12%, transparent 12.5%, transparent 87%, #0f3452 87.5%, #0f3452),
linear-gradient(150deg, #0f3452 12%, transparent 12.5%, transparent 87%, #0f3452 87.5%, #0f3452),
linear-gradient(60deg, rgba(19,88,139,.24) 25%, transparent 25.5%, transparent 75%, rgba(19,88,139,.24) 75%, rgba(19,88,139,.24))!important;
background-size:44px 77px!important;
background-position:0 0,0 0,22px 38.5px,22px 38.5px,0 0!important;
}
/* Darken the cells so the honeycomb reads as a subtle frame, not a busy pattern. */
.consumer-home .locked-home{
position:relative!important;
padding-bottom:38px!important;
background-color:#020a12!important;
}
.consumer-home .locked-home:before{
content:""!important;
position:absolute!important;
inset:0!important;
pointer-events:none!important;
background:
radial-gradient(circle at 50% 18%, rgba(4,17,29,.08), rgba(1,7,13,.25) 72%, rgba(0,0,0,.38) 100%)!important;
z-index:0!important;
}
.consumer-home .locked-home > *{
position:relative!important;
z-index:1!important;
}
/* Keep the approved locked artwork/buttons untouched. */
.consumer-home .locked-art-wrap,
.consumer-home .locked-art-wrap img,
.consumer-home .locked-hotspot,
.consumer-home .locked-hotspot img{
filter:none!important;
}
/* Make the live provider stats readable over the honeycomb below the panel. */
.consumer-home .locked-live-stats{
background:transparent!important;
color:#e7edf3!important;
text-shadow:0 2px 4px rgba(0,0,0,.8)!important;
}
.consumer-home .locked-live-stats strong,
.consumer-home .locked-live-stats b{
color:#258cff!important;
}
@media(max-width:760px){
body.consumer-home,
.consumer-home main,
.consumer-home .locked-home{
background-size:34px 59px!important;
background-position:0 0,0 0,17px 29.5px,17px 29.5px,0 0!important;
}
.consumer-home .locked-home{
padding-bottom:24px!important;
}
}
/* ==========================================================
v5.8.35 — FEATURED MARKET PER-STATE CLARITY
========================================================== */
.locked-pricing-art .featured-state-note.featured-per-state{
top:27.2%!important;
left:78.1%!important;
width:auto!important;
text-align:right!important;
}
.locked-pricing-art .featured-state-note.featured-per-state strong{
display:inline-block!important;
padding:3px 8px!important;
border:1px solid rgba(80,167,255,.72)!important;
border-radius:999px!important;
background:rgba(2,13,25,.90)!important;
color:#7dbdff!important;
font-size:clamp(8px,.82vw,12px)!important;
font-weight:950!important;
letter-spacing:.7px!important;
box-shadow:0 0 10px rgba(44,129,226,.20)!important;
white-space:nowrap!important;
}
.locked-pricing-art .featured-state-note.featured-per-state span{
display:none!important;
}
.featured-full-state-benefit{
position:absolute;
z-index:4;
top:46.7%;
left:62.0%;
width:26.5%;
pointer-events:none;
line-height:1.08;
text-align:left;
}
.featured-full-state-benefit strong{
display:inline-block;
color:#72b8ff;
font-size:clamp(7px,.70vw,10px);
font-weight:950;
letter-spacing:.25px;
text-shadow:0 1px 2px #000;
}
.featured-full-state-benefit span{
display:block;
margin-top:2px;
color:#cdd7e0;
font-size:clamp(6px,.56vw,8px);
font-weight:800;
text-shadow:0 1px 2px #000;
}
/* ==========================================================
v5.8.36 — CLEAN FEATURED MARKET STATE CLARITY
Removes all state-related text overlays from the pricing art.
Clarification now sits in its own clean ribbon BELOW the art.
========================================================== */
.locked-pricing-art .featured-state-note,
.locked-pricing-art .featured-full-state-benefit{
display:none!important;
}
.featured-state-ribbon{
width:min(760px,92%);
margin:10px auto 14px;
padding:10px 14px;
display:flex;
align-items:center;
justify-content:center;
gap:10px 14px;
flex-wrap:wrap;
border:1px solid #2a72b8;
border-radius:8px;
background:linear-gradient(180deg,#0b1b2b,#07121d);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.025);
color:#dce8f3;
line-height:1.2;
text-align:center;
}
.featured-state-ribbon b{
color:#62adff;
font-size:13px;
font-weight:950;
letter-spacing:.35px;
}
.featured-state-ribbon span{
color:#b8c6d3;
font-size:11px;
font-weight:800;
}
@media(max-width:760px){
.featured-state-ribbon{
width:calc(100% - 24px);
margin:10px 12px 12px;
padding:10px 12px;
}
.featured-state-ribbon b{font-size:11px}
.featured-state-ribbon span{font-size:10px}
}
/* ==========================================================
v5.8.37 — PAID PLAN SOCIAL MEDIA LINKS
Shop Pro + Featured Market signup only.
========================================================== */
.social-links-section{
margin-top:4px;
padding:12px;
border:1px solid #31506a;
border-radius:9px;
background:linear-gradient(180deg,#07111a,#050b10);
}
.social-links-heading{
display:flex;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
margin-bottom:10px;
}
.social-links-heading b{
color:#fff;
font-size:12px;
letter-spacing:.3px;
text-transform:uppercase;
}
.social-links-heading span{
color:#8799a8;
font-size:9px;
text-transform:none;
}
.social-links-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
}
.social-links-grid label{
display:grid;
gap:5px;
color:#c7d2db;
font-size:9px;
font-weight:950;
text-transform:uppercase;
}
.social-links-grid input{
width:100%;
min-width:0;
padding:10px 11px;
border:1px solid #3b5267;
border-radius:7px;
background:#03090e;
color:#fff;
font:inherit;
font-size:16px;
}
.paid-social-note{
width:min(820px,92%);
margin:8px auto 12px;
padding:10px 13px;
display:flex;
justify-content:center;
gap:8px 12px;
flex-wrap:wrap;
text-align:center;
border:1px solid #2f5573;
border-radius:8px;
background:#07121c;
color:#b8c6d2;
line-height:1.25;
}
.paid-social-note b{
color:#f18a36;
font-size:11px;
letter-spacing:.4px;
}
.paid-social-note span{
font-size:10px;
}
@media(max-width:640px){
.social-links-grid{
grid-template-columns:1fr;
}
}
/* ==========================================================
v5.8.38 — GLOBAL TRUE HONEYCOMB BACKGROUND
Applies the approved dark navy / blue hex honeycomb look
across ALL FindMyHose pages, while preserving page content.
========================================================== */
:root{
--fmh-honey-bg:#020a12;
--fmh-honey-line:#0d3555;
--fmh-honey-glow:#115886;
}
/* Global site background */
html,
body{
background-color:var(--fmh-honey-bg)!important;
}
body,
main,
.shop-owner-page,
.shop-signup-page,
.locked-pricing-page{
background-color:var(--fmh-honey-bg)!important;
background-image:
linear-gradient(30deg, rgba(16,59,92,.72) 12%, transparent 12.5%, transparent 87%, rgba(16,59,92,.72) 87.5%, rgba(16,59,92,.72)),
linear-gradient(150deg, rgba(16,59,92,.72) 12%, transparent 12.5%, transparent 87%, rgba(16,59,92,.72) 87.5%, rgba(16,59,92,.72)),
linear-gradient(30deg, rgba(16,59,92,.34) 12%, transparent 12.5%, transparent 87%, rgba(16,59,92,.34) 87.5%, rgba(16,59,92,.34)),
linear-gradient(150deg, rgba(16,59,92,.34) 12%, transparent 12.5%, transparent 87%, rgba(16,59,92,.34) 87.5%, rgba(16,59,92,.34)),
linear-gradient(60deg, rgba(18,91,140,.16) 25%, transparent 25.5%, transparent 75%, rgba(18,91,140,.16) 75%, rgba(18,91,140,.16))!important;
background-size:46px 80px!important;
background-position:0 0,0 0,23px 40px,23px 40px,0 0!important;
background-attachment:scroll!important;
}
/* Keep content panels readable and preserve existing locked artwork. */
.locked-home,
.locked-art-wrap,
.locked-pricing-shell,
.shop-owner-shell,
.shop-signup-shell{
background:transparent!important;
}
/* Ensure cards/panels remain dark/industrial over honeycomb. */
.shop-plan,
.signup-benefits-panel,
.signup-form-panel,
.selected-plan-card,
.review-booster,
.owner-interest,
.pricing-next-step,
.featured-state-ribbon,
.paid-social-note{
backdrop-filter:none!important;
}
/* Footer should blend with the same approved honeycomb theme. */
.site-footer,
footer{
background-color:#020a12!important;
background-image:
linear-gradient(30deg, rgba(14,51,80,.48) 12%, transparent 12.5%, transparent 87%, rgba(14,51,80,.48) 87.5%, rgba(14,51,80,.48)),
linear-gradient(150deg, rgba(14,51,80,.48) 12%, transparent 12.5%, transparent 87%, rgba(14,51,80,.48) 87.5%, rgba(14,51,80,.48))!important;
background-size:46px 80px!important;
}
/* Remove old diamond-looking pattern artifacts from any previous overrides. */
.consumer-home main,
.consumer-home .locked-home{
background-image:
linear-gradient(30deg, rgba(16,59,92,.72) 12%, transparent 12.5%, transparent 87%, rgba(16,59,92,.72) 87.5%, rgba(16,59,92,.72)),
linear-gradient(150deg, rgba(16,59,92,.72) 12%, transparent 12.5%, transparent 87%, rgba(16,59,92,.72) 87.5%, rgba(16,59,92,.72)),
linear-gradient(30deg, rgba(16,59,92,.34) 12%, transparent 12.5%, transparent 87%, rgba(16,59,92,.34) 87.5%, rgba(16,59,92,.34)),
linear-gradient(150deg, rgba(16,59,92,.34) 12%, transparent 12.5%, transparent 87%, rgba(16,59,92,.34) 87.5%, rgba(16,59,92,.34)),
linear-gradient(60deg, rgba(18,91,140,.16) 25%, transparent 25.5%, transparent 75%, rgba(18,91,140,.16) 75%, rgba(18,91,140,.16))!important;
background-size:46px 80px!important;
background-position:0 0,0 0,23px 40px,23px 40px,0 0!important;
}
@media(max-width:760px){
body,
main,
.shop-owner-page,
.shop-signup-page,
.locked-pricing-page,
.consumer-home main,
.consumer-home .locked-home{
background-size:38px 66px!important;
background-position:0 0,0 0,19px 33px,19px 33px,0 0!important;
}
}
/* ==========================================================
v5.8.39 — TRUE SVG HEX HONEYCOMB GLOBAL FIX
Replaces all gradient-built backgrounds that rendered like
diamonds with a real SVG hex grid.
========================================================== */
html,
body,
body.consumer-home,
main,
.consumer-home main,
.consumer-home .locked-home,
.shop-owner-page,
.shop-signup-page,
.locked-pricing-page,
.site-footer,
footer {
background-color:#020a12!important;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2784%27%20height%3D%2772%27%20viewBox%3D%270%200%2084%2072%27%3E%0A%3Crect%20width%3D%2784%27%20height%3D%2772%27%20fill%3D%27%23020a12%27%2F%3E%0A%3Cg%20fill%3D%27none%27%20stroke%3D%27%230b416a%27%20stroke-width%3D%271.4%27%20opacity%3D%270.85%27%3E%0A%3Cpath%20d%3D%27M21%201%20L42%2013%20L42%2037%20L21%2049%20L0%2037%20L0%2013%20Z%27%2F%3E%0A%3Cpath%20d%3D%27M63%201%20L84%2013%20L84%2037%20L63%2049%20L42%2037%20L42%2013%20Z%27%2F%3E%0A%3Cpath%20d%3D%27M42%2037%20L63%2049%20L63%2073%20L42%2085%20L21%2073%20L21%2049%20Z%27%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%27none%27%20stroke%3D%27%231174b7%27%20stroke-width%3D%270.7%27%20opacity%3D%270.35%27%3E%0A%3Cpath%20d%3D%27M21%203%20L40%2014%20L40%2036%20L21%2047%20L2%2036%20L2%2014%20Z%27%2F%3E%0A%3Cpath%20d%3D%27M63%203%20L82%2014%20L82%2036%20L63%2047%20L44%2036%20L44%2014%20Z%27%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E")!important;
background-repeat:repeat!important;
background-size:84px 72px!important;
background-position:0 0!important;
background-attachment:scroll!important;
}
/* Make sure no older pseudo-element or gradient layer sits on top of the new hex grid. */
.consumer-home .locked-home:before {
display:none!important;
content:none!important;
}
.consumer-home .locked-home,
.consumer-home .locked-art-wrap,
.consumer-home .locked-live-stats,
.locked-pricing-shell,
.shop-owner-shell,
.shop-signup-shell {
background-color:transparent!important;
}
/* Preserve the locked artwork and readable stats. */
.consumer-home .locked-art-wrap img,
.consumer-home .locked-hotspot,
.consumer-home .locked-hotspot img {
filter:none!important;
}
.consumer-home .locked-live-stats {
color:#eef4f8!important;
text-shadow:0 2px 4px rgba(0,0,0,.9)!important;
}
@media(max-width:760px){
html,
body,
body.consumer-home,
main,
.consumer-home main,
.consumer-home .locked-home,
.shop-owner-page,
.shop-signup-page,
.locked-pricing-page,
.site-footer,
footer {
background-size:70px 60px!important;
}
}
/* ==========================================================
v5.8.40 — LOCKED CLEAN HONEYCOMB + FRAME STANDARD
Final visual lock based on the approved reference:
- true hex honeycomb
- clean breathing room around the silver landing frame
- centered content on all major FindMyHose pages
- no changes to artwork, buttons, pricing, data, or logic
========================================================== */
/* MAIN LANDING PAGE — give the locked artwork a clean honeycomb frame */
.consumer-home .locked-home{
padding:22px 0 34px!important;
}
.consumer-home .locked-art-wrap{
width:min(1480px,92%)!important;
margin:0 auto!important;
border-radius:4px!important;
overflow:visible!important;
box-shadow:
0 0 0 1px rgba(39,108,162,.20),
0 18px 34px rgba(0,0,0,.34)!important;
}
/* Keep the exact locked artwork and hotspot geometry untouched */
.consumer-home .locked-art-wrap > img{
display:block!important;
width:100%!important;
height:auto!important;
}
.consumer-home .locked-live-stats{
width:min(1220px,88%)!important;
margin:12px auto 0!important;
padding:8px 14px 10px!important;
text-align:center!important;
background:rgba(2,10,18,.60)!important;
border:1px solid rgba(34,94,143,.30)!important;
border-radius:7px!important;
box-shadow:inset 0 0 18px rgba(0,0,0,.22)!important;
}
/* PRICING / PACKAGE PAGE — same clean honeycomb frame */
.locked-pricing-shell{
width:min(1500px,94%)!important;
margin:18px auto 30px!important;
}
.locked-pricing-art{
border:1px solid rgba(32,93,142,.35)!important;
border-radius:7px!important;
overflow:hidden!important;
box-shadow:0 18px 36px rgba(0,0,0,.34)!important;
}
/* SIGNUP / OWNER PAGES — center the dark industrial panels with honeycomb around them */
.shop-signup-shell,
.shop-owner-shell{
width:min(1460px,92%)!important;
margin-left:auto!important;
margin-right:auto!important;
}
.shop-signup-page,
.shop-owner-page{
padding-left:0!important;
padding-right:0!important;
}
/* A subtle dark rail behind page content helps the honeycomb read as a frame */
.shop-signup-shell,
.shop-owner-shell{
position:relative!important;
}
.shop-signup-shell:before,
.shop-owner-shell:before{
content:""!important;
position:absolute!important;
inset:-8px -12px!important;
z-index:-1!important;
border:1px solid rgba(32,88,132,.18)!important;
border-radius:12px!important;
background:rgba(2,8,14,.20)!important;
pointer-events:none!important;
}
/* Footer keeps the same hex pattern and clean spacing */
.site-footer,
footer{
margin-top:0!important;
border-top:1px solid rgba(34,91,137,.35)!important;
}
/* Phone: preserve the clean framed look without squeezing content */
@media(max-width:760px){
.consumer-home .locked-home{
padding:10px 0 22px!important;
}
.consumer-home .locked-art-wrap{
width:96%!important;
margin:0 auto!important;
}
.consumer-home .locked-live-stats{
width:92%!important;
margin-top:8px!important;
padding:7px 8px!important;
}
.locked-pricing-shell,
.shop-signup-shell,
.shop-owner-shell{
width:96%!important;
}
.shop-signup-shell:before,
.shop-owner-shell:before{
inset:-5px -5px!important;
}
}
/* ==========================================================
v5.8.41 — EXACT APPROVED DESKTOP LANDING ART LOCK
The desktop homepage now uses the approved image itself for:
- true clean honeycomb
- clean chrome/silver outer frame
- exact four industrial buttons
CSS no longer tries to recreate those elements.
========================================================== */
@media(min-width:761px){
.consumer-home .locked-home{
padding:0 0 28px!important;
background:#020a12!important;
}
.consumer-home .locked-art-wrap{
position:relative!important;
width:min(1672px,100%)!important;
margin:0 auto!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
overflow:hidden!important;
background:#020a12!important;
line-height:0!important;
}
.consumer-home .locked-home-art{
display:block!important;
width:100%!important;
height:auto!important;
margin:0!important;
object-fit:contain!important;
}
/* Transparent click zones exactly over the four visible buttons baked into approved artwork. */
.consumer-home .locked-hotspot{
position:absolute!important;
z-index:5!important;
display:block!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:10px!important;
background:transparent!important;
box-shadow:none!important;
clip-path:none!important;
overflow:hidden!important;
cursor:pointer!important;
appearance:none!important;
}
.consumer-home .locked-hotspot img{
display:none!important;
}
.consumer-home .hotspot-shop{
left:16.6%!important;
top:55.2%!important;
width:33.0%!important;
height:18.5%!important;
}
.consumer-home .hotspot-truck{
left:51.9%!important;
top:55.2%!important;
width:33.1%!important;
height:18.5%!important;
}
.consumer-home .hotspot-other{
left:16.6%!important;
top:74.8%!important;
width:33.0%!important;
height:19.0%!important;
}
.consumer-home .hotspot-shops{
left:51.9%!important;
top:74.8%!important;
width:33.1%!important;
height:19.0%!important;
}
.consumer-home .locked-hotspot:hover,
.consumer-home .locked-hotspot:focus-visible{
background:rgba(255,255,255,.025)!important;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.13)!important;
filter:brightness(1.03)!important;
}
/* Live numbers stay current and sit on clean honeycomb below the exact artwork. */
.consumer-home .locked-live-stats{
width:min(1000px,90%)!important;
margin:4px auto 0!important;
padding:9px 14px!important;
background:rgba(2,10,18,.72)!important;
border:1px solid rgba(20,79,124,.34)!important;
border-radius:7px!important;
color:#f0f4f7!important;
line-height:1.2!important;
text-align:center!important;
}
}
/* Keep existing mobile experience intact. */
@media(max-width:760px){
.consumer-home .locked-art-wrap{
display:none!important;
}
}
/* ==========================================================
v5.8.42 — SHARP LIVE-TEXT PRICING PAGE
Replaces blurry image-scaled pricing copy with real HTML text.
IMPORTANT: no scale/skew transforms are applied to text.
========================================================== */
.live-pricing-page{
min-height:100vh;
padding:16px 14px 34px;
color:#eef4fa;
background:transparent;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.live-pricing-shell{
width:min(1450px,100%);
margin:0 auto;
}
.live-pricing-head{
display:grid;
grid-template-columns:420px minmax(0,1fr) 350px;
gap:22px;
align-items:center;
padding:18px 22px;
border:1px solid #213b50;
border-radius:12px 12px 0 0;
background:
radial-gradient(circle at 30% 0%,rgba(13,91,170,.16),transparent 36%),
linear-gradient(180deg,#03080d,#010407);
box-shadow:0 16px 42px rgba(0,0,0,.38);
}
.live-pricing-logo{
display:block;
width:100%;
max-width:410px;
height:auto;
}
.live-pricing-title-wrap{
text-align:center;
}
.live-pricing-kicker{
display:block;
margin-bottom:3px;
color:#dfe7ee;
font-size:13px;
font-weight:950;
letter-spacing:1.6px;
}
.live-pricing-title-wrap h1{
margin:0;
color:#f2f5f8;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:clamp(30px,3vw,48px);
font-weight:900;
line-height:1.02;
letter-spacing:.3px;
text-shadow:0 2px 0 #000;
}
.live-pricing-title-wrap h1 em{
display:block;
margin-top:3px;
color:#f07a22;
font-style:normal;
}
.live-pricing-title-wrap p{
margin:9px 0 0;
color:#bdc7d0;
font-size:15px;
font-weight:850;
letter-spacing:.8px;
}
.live-pricing-title-wrap p b:first-child{color:#4a9df4}
.live-pricing-title-wrap p b:last-child{color:#f08736}
.pricing-goals{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1px;
border:1px solid #1e2f3c;
background:#1e2f3c;
}
.pricing-goals>div{
min-height:116px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
padding:10px 8px;
text-align:center;
background:#03080d;
}
.pricing-goals strong{
color:#328de9;
font-size:31px;
line-height:1;
}
.pricing-goals>div:nth-child(2) strong{color:#f28a31}
.pricing-goals b{
color:#fff;
font-size:12px;
letter-spacing:.3px;
}
.pricing-goals span{
color:#b5c0ca;
font-size:10px;
line-height:1.25;
}
.live-plan-grid{
display:grid;
grid-template-columns:.82fr 1.12fr 1.16fr;
gap:12px;
padding:12px;
border-left:1px solid #213b50;
border-right:1px solid #213b50;
background:rgba(1,5,9,.94);
box-shadow:0 22px 45px rgba(0,0,0,.35);
}
.live-plan-card{
position:relative;
min-width:0;
display:flex;
flex-direction:column;
padding:15px;
border:2px solid #294f75;
border-radius:12px;
background:
linear-gradient(180deg,rgba(13,28,42,.96),rgba(2,7,11,.98) 22%),
#03080d;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.06),
inset 0 0 24px rgba(10,76,137,.16),
0 10px 25px rgba(0,0,0,.32);
}
.plan-pro{
border-color:#9c531d;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.06),
inset 0 0 28px rgba(198,86,13,.16),
0 10px 25px rgba(0,0,0,.32);
}
.plan-topbar{
min-height:46px;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin:-4px -4px 10px;
padding:7px 13px;
border:1px solid #3f7ebe;
border-radius:7px;
background:linear-gradient(180deg,#1e5c9b,#0b2f5a);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.plan-topbar.orange{
border-color:#b56b2d;
background:linear-gradient(180deg,#b45d20,#65300f);
}
.plan-number{
min-width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:50%;
color:#fff;
font-size:21px;
font-weight:950;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
}
.plan-topbar h2{
margin:0;
color:#f5f7f9;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:25px;
font-weight:900;
letter-spacing:.6px;
}
.plan-price{
margin:5px 0 0;
text-align:center;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:clamp(50px,5vw,78px);
font-weight:900;
line-height:.95;
letter-spacing:1px;
}
.plan-price>span{
font-size:.65em;
vertical-align:13%;
}
.plan-price small{
font-family:Arial,sans-serif;
font-size:15px;
font-weight:950;
letter-spacing:.2px;
}
.price-blue{color:#3e94ee}
.price-orange{color:#f07b24}
.state-price{
align-self:center;
margin:7px auto 0;
padding:5px 10px;
border:1px solid #2b70ae;
border-radius:999px;
color:#78baff;
background:#061421;
font-size:11px;
font-weight:950;
letter-spacing:.7px;
text-align:center;
}
.plan-tagline{
margin:10px 0 14px;
color:#d8e0e6;
font-size:15px;
font-weight:750;
line-height:1.32;
text-align:center;
}
.feature-icons{
display:grid;
gap:6px;
margin:0 0 13px;
}
.feature-icons.four{grid-template-columns:repeat(4,1fr)}
.feature-icons>div{
min-height:78px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
padding:8px 5px;
border:1px solid #344654;
border-radius:7px;
background:linear-gradient(180deg,#0b1116,#05090c);
text-align:center;
}
.feature-icons strong{
color:#4d9ef2;
font-size:25px;
line-height:1;
}
.plan-pro .feature-icons strong{color:#f08a37}
.feature-icons b{
color:#e9eef2;
font-size:10px;
line-height:1.15;
}
.live-feature-list{
display:grid;
gap:0;
margin:0;
padding:0;
list-style:none;
border-top:1px solid #233645;
}
.live-feature-list.two-col{
grid-template-columns:1fr 1fr;
column-gap:18px;
}
.live-feature-list li{
position:relative;
min-height:34px;
display:flex;
align-items:center;
padding:7px 5px 7px 25px;
border-bottom:1px solid rgba(83,110,132,.24);
color:#d9e1e7;
font-size:13px;
font-weight:760;
line-height:1.18;
}
.live-feature-list li:before{
content:"✓";
position:absolute;
left:3px;
top:8px;
width:16px;
height:16px;
display:grid;
place-items:center;
border-radius:50%;
background:#1a5e9e;
color:#fff;
font-size:11px;
font-weight:950;
}
.orange-checks li:before{
background:#ad5c1f;
}
.plan-spacer{flex:1;min-height:76px}
.truck-addon{
display:grid;
grid-template-columns:44px 1fr auto;
gap:10px;
align-items:center;
margin:14px 0 10px;
padding:10px;
border:1px dashed #356b9c;
border-radius:8px;
background:#06111a;
}
.orange-addon{border-color:#94531f}
.truck-addon-icon{
color:#f28a34;
font-size:27px;
text-align:center;
}
.blue-addon .truck-addon-icon{color:#4f9ff2}
.truck-addon-copy{
display:flex;
flex-direction:column;
gap:2px;
}
.truck-addon-copy b{
color:#eef3f6;
font-size:13px;
}
.orange-addon .truck-addon-copy b{color:#f0974f}
.blue-addon .truck-addon-copy b{color:#69aeef}
.truck-addon-copy span{
color:#bdc8d0;
font-size:10px;
line-height:1.2;
}
.truck-addon-price{
min-width:78px;
text-align:center;
}
.truck-addon-price strong{
display:block;
color:#f08a35;
font-size:25px;
line-height:1;
}
.blue-addon .truck-addon-price strong{color:#53a1ee}
.truck-addon-price span{
display:block;
margin-top:3px;
color:#dbe4eb;
font-size:9px;
font-weight:950;
}
.live-plan-cta{
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin-top:auto;
border:1px solid rgba(255,255,255,.20);
border-radius:7px;
color:#fff;
text-decoration:none;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:20px;
letter-spacing:.8px;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.16),
0 5px 12px rgba(0,0,0,.35);
}
.blue-cta{
background:linear-gradient(180deg,#2d79c9,#0c3768);
}
.orange-cta{
background:linear-gradient(180deg,#ce6d27,#713412);
}
.live-plan-cta:hover,
.live-plan-cta:focus-visible{
filter:brightness(1.12);
outline:2px solid rgba(255,255,255,.3);
outline-offset:2px;
}
.popular-badge,
.value-badge{
position:absolute;
z-index:2;
top:-10px;
right:12px;
padding:7px 9px;
border:1px solid #a96a32;
border-radius:6px;
background:#111;
color:#fff;
font-size:9px;
font-weight:950;
letter-spacing:.6px;
}
.value-badge{
border-color:#82672c;
color:#f4bb50;
}
.value-badge span{color:#fff}
.live-trust-strip{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
border:1px solid #263a49;
background:#263a49;
}
.live-trust-strip>div{
min-height:82px;
display:flex;
align-items:center;
gap:10px;
padding:13px 14px;
background:linear-gradient(180deg,#0b1116,#05080b);
}
.live-trust-strip strong{
color:#4d9cf0;
font-size:25px;
}
.live-trust-strip span{
color:#b8c4cd;
font-size:11px;
line-height:1.25;
}
.live-trust-strip b{
display:block;
margin-bottom:2px;
color:#eef4f8;
font-size:11px;
}
.review-booster-live{
display:grid;
grid-template-columns:300px 1fr 300px;
gap:15px;
align-items:center;
padding:18px;
border:1px solid #263b4c;
border-top:0;
background:linear-gradient(180deg,#080d11,#030608);
}
.review-g{
display:flex;
align-items:center;
gap:12px;
}
.google-g{
width:52px;
height:52px;
display:grid;
place-items:center;
border-radius:50%;
border:3px solid #df6f2b;
color:#4b9af0;
font-size:31px;
font-weight:950;
background:#090b0d;
}
.review-g>div{
display:flex;
flex-direction:column;
}
.review-g b{
color:#f0f4f7;
font-size:16px;
}
.review-g small{
color:#f08734;
font-size:10px;
font-weight:850;
}
.review-flow{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
}
.review-flow>div{
min-width:110px;
display:flex;
align-items:center;
gap:7px;
padding:8px 9px;
border:1px solid #27486a;
border-radius:7px;
background:#061321;
}
.review-flow span{
width:25px;
height:25px;
display:grid;
place-items:center;
border-radius:50%;
background:#164e86;
color:#fff;
font-size:12px;
font-weight:950;
}
.review-flow b{
color:#dce8f2;
font-size:9px;
line-height:1.15;
}
.review-flow i{
color:#3c8bd9;
font-size:24px;
font-style:normal;
}
.review-protection{
display:flex;
flex-direction:column;
gap:4px;
padding:10px 12px;
border:1px solid #265f89;
border-radius:7px;
background:#06131e;
}
.review-protection b{
color:#62aeef;
font-size:11px;
}
.review-protection span{
color:#c2ccd4;
font-size:10px;
line-height:1.3;
}
.paid-links-live{
display:flex;
justify-content:center;
gap:8px 12px;
flex-wrap:wrap;
padding:12px 16px;
border:1px solid #263b4c;
border-top:0;
border-radius:0 0 12px 12px;
background:#050a0e;
text-align:center;
}
.paid-links-live b{
color:#ef8b3d;
font-size:12px;
}
.paid-links-live span{
color:#c1ccd4;
font-size:11px;
}
/* Hide the old image-only pricing presentation if stale markup is cached anywhere. */
.live-pricing-page .locked-pricing-art,
.live-pricing-page .featured-state-ribbon,
.live-pricing-page .pricing-mobile-note,
.live-pricing-page .paid-social-note{
display:none!important;
}
@media(max-width:1180px){
.live-pricing-head{
grid-template-columns:300px 1fr;
}
.pricing-goals{
grid-column:1/-1;
}
.live-plan-grid{
grid-template-columns:1fr;
}
.plan-spacer{min-height:0}
.review-booster-live{
grid-template-columns:1fr;
}
}
@media(max-width:760px){
.live-pricing-page{
padding:8px 8px 24px;
}
.live-pricing-head{
grid-template-columns:1fr;
padding:14px;
}
.live-pricing-logo{
max-width:360px;
margin:0 auto;
}
.live-pricing-title-wrap h1{
font-size:33px;
}
.pricing-goals{
grid-template-columns:1fr 1fr 1fr;
}
.pricing-goals>div{
min-height:94px;
padding:7px 4px;
}
.pricing-goals strong{font-size:24px}
.pricing-goals b{font-size:9px}
.pricing-goals span{font-size:8px}
.live-plan-grid{
padding:8px;
}
.live-plan-card{
padding:12px;
}
.live-feature-list.two-col{
grid-template-columns:1fr;
}
.live-feature-list li{
min-height:37px;
font-size:14px;
}
.feature-icons.four{
grid-template-columns:1fr 1fr;
}
.truck-addon{
grid-template-columns:40px 1fr;
}
.truck-addon-price{
grid-column:1/-1;
display:flex;
align-items:end;
justify-content:center;
gap:5px;
}
.live-trust-strip{
grid-template-columns:1fr 1fr;
}
.review-flow{
display:grid;
grid-template-columns:1fr 1fr;
}
.review-flow i{display:none}
.review-flow>div{min-width:0}
}
@media(max-width:480px){
.pricing-goals{
grid-template-columns:1fr;
}
.live-trust-strip{
grid-template-columns:1fr;
}
.live-pricing-title-wrap h1{
font-size:29px;
}
.plan-price{
font-size:58px;
}
}
/* ==========================================================
v5.8.43 — COLUMN FONT CLARITY FIX
Keeps the industrial pricing style.
Only sharpens/enlarges the text INSIDE the three package columns.
========================================================== */
/* Main feature bullets inside all three pricing columns */
.live-plan-card .live-feature-list li{
font-family:Arial,Helvetica,sans-serif!important;
font-size:15px!important;
font-weight:700!important;
line-height:1.28!important;
letter-spacing:0!important;
color:#f2f5f7!important;
text-shadow:none!important;
-webkit-font-smoothing:antialiased!important;
text-rendering:geometricPrecision!important;
min-height:39px!important;
padding-top:8px!important;
padding-bottom:8px!important;
}
/* Free column can be slightly larger because it has fewer items */
.plan-basic .live-feature-list li{
font-size:16px!important;
font-weight:700!important;
min-height:43px!important;
}
/* Small text directly beneath prices */
.live-plan-card .plan-tagline{
font-family:Arial,Helvetica,sans-serif!important;
font-size:16px!important;
font-weight:700!important;
line-height:1.34!important;
color:#f0f3f5!important;
text-shadow:none!important;
}
/* Four feature-icon labels across Shop Pro / Featured */
.live-plan-card .feature-icons b{
font-family:Arial,Helvetica,sans-serif!important;
font-size:11.5px!important;
font-weight:800!important;
line-height:1.2!important;
color:#f5f7f8!important;
text-shadow:none!important;
}
/* Truck add-on wording */
.live-plan-card .truck-addon-copy b{
font-family:Arial,Helvetica,sans-serif!important;
font-size:14px!important;
font-weight:800!important;
line-height:1.2!important;
text-shadow:none!important;
}
.live-plan-card .truck-addon-copy span{
font-family:Arial,Helvetica,sans-serif!important;
font-size:11.5px!important;
font-weight:600!important;
line-height:1.28!important;
color:#e0e6ea!important;
text-shadow:none!important;
}
/* Per-state pill */
.live-plan-card .state-price{
font-family:Arial,Helvetica,sans-serif!important;
font-size:12px!important;
font-weight:800!important;
letter-spacing:.45px!important;
text-shadow:none!important;
}
/* Keep prices and package headers bold/industrial, but make them crisp */
.live-plan-card .plan-price,
.live-plan-card .plan-topbar h2{
-webkit-font-smoothing:antialiased!important;
text-rendering:geometricPrecision!important;
}
/* Give two-column paid feature lists a little more breathing room */
.live-plan-card .live-feature-list.two-col{
column-gap:24px!important;
}
/* Mobile: make column text even easier to read */
@media(max-width:760px){
.live-plan-card .live-feature-list li,
.plan-basic .live-feature-list li{
font-size:16px!important;
line-height:1.32!important;
min-height:43px!important;
}
.live-plan-card .plan-tagline{
font-size:16px!important;
}
.live-plan-card .feature-icons b{
font-size:12px!important;
}
.live-plan-card .truck-addon-copy span{
font-size:12px!important;
}
}
/* ==========================================================
v5.8.44 — REFERENCE-STYLE PRICING PAGE
Crisp live text + industrial metal styling.
========================================================== */
.pricing-v5844{
min-height:100vh;
padding:14px 12px 34px;
background:transparent;
color:#eef4f8;
-webkit-font-smoothing:antialiased;
text-rendering:geometricPrecision;
}
.pricing-v5844 *{box-sizing:border-box}
.pricing-v5844-shell{
width:min(1510px,100%);
margin:0 auto;
}
.pricing-v5844-header{
display:grid;
grid-template-columns:470px minmax(440px,1fr) 380px;
align-items:center;
gap:18px;
padding:12px 20px 14px;
border:1px solid rgba(49,82,109,.72);
border-bottom:0;
border-radius:12px 12px 0 0;
background:
radial-gradient(circle at 22% 18%,rgba(16,81,148,.17),transparent 27%),
linear-gradient(180deg,rgba(2,8,14,.98),rgba(1,4,7,.99));
}
.pricing-brand img{
display:block;
width:100%;
max-width:465px;
height:auto;
}
.pricing-headline{
text-align:center;
}
.pricing-headline h1{
margin:0;
color:#f4f5f6;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:clamp(33px,3.2vw,52px);
line-height:.98;
font-weight:900;
letter-spacing:.3px;
text-shadow:0 2px 0 #000,0 0 10px rgba(255,255,255,.035);
}
.pricing-headline h1 span{color:#f0781c}
.pricing-headline p{
margin:8px 0 0;
color:#e0e5e9;
font-family:Arial,Helvetica,sans-serif;
font-size:17px;
font-style:italic;
font-weight:700;
}
.pricing-v5844 .blue{color:#238ef0!important}
.pricing-v5844 .orange{color:#f47e20!important}
.pricing-benefits{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
}
.benefit{
min-height:112px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:8px 7px;
text-align:center;
border-left:1px solid #2a3640;
}
.benefit-icon{
margin-bottom:6px;
font-size:31px;
line-height:1;
font-weight:900;
}
.benefit strong{
color:#fff;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:15px;
letter-spacing:.45px;
}
.benefit span{
margin-top:4px;
color:#c8d0d6;
font:600 11px/1.3 Arial,Helvetica,sans-serif;
}
.pricing-cards{
display:grid;
grid-template-columns:.88fr 1.10fr 1.14fr;
gap:10px;
padding:10px;
border:1px solid #2b4355;
border-top:0;
background:#010406;
}
.pricing-card{
position:relative;
min-width:0;
min-height:700px;
display:flex;
flex-direction:column;
padding:14px;
border:2px solid #2e5679;
border-radius:11px;
background:
linear-gradient(180deg,rgba(10,22,32,.97),rgba(2,7,11,.99) 22%),
#03070a;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.045),
inset 0 0 30px rgba(15,91,160,.12),
0 8px 18px rgba(0,0,0,.42);
}
.pricing-card-pro{
border-color:#a45d21;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.045),
inset 0 0 32px rgba(202,94,16,.12),
0 8px 18px rgba(0,0,0,.42);
}
.card-topbar{
min-height:45px;
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin:-4px 0 6px;
padding:7px 14px;
border:1px solid rgba(255,255,255,.18);
border-radius:7px;
clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%);
box-shadow:inset 0 2px 0 rgba(255,255,255,.15);
}
.bluebar{background:linear-gradient(180deg,#246fba,#0b315e)}
.orangebar{background:linear-gradient(180deg,#d77325,#743510)}
.plan-num{
min-width:36px;
height:30px;
display:grid;
place-items:center;
color:#fff;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:23px;
}
.plan-name{
color:#f5f7f9;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:25px;
letter-spacing:.6px;
}
.price{
margin:9px 0 0;
text-align:center;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-weight:900;
line-height:.92;
letter-spacing:1px;
text-shadow:0 2px 0 #000;
}
.price-basic{font-size:78px;color:#318dec}
.price-pro{font-size:68px;color:#f37a17}
.price-featured{font-size:68px;color:#2688e7}
.price .dollar{font-size:.68em;vertical-align:13%}
.price small{
font:900 15px/1 Arial,Helvetica,sans-serif;
}
.state-pill{
width:max-content;
max-width:90%;
margin:6px auto 0;
padding:4px 12px;
border:1px solid #2f78b6;
border-radius:999px;
color:#8cc7fa;
background:#061622;
font:900 11px/1.2 Arial,Helvetica,sans-serif;
letter-spacing:.55px;
}
.card-intro{
margin:10px 0 14px;
text-align:center;
color:#eef1f3;
font:700 15px/1.32 Arial,Helvetica,sans-serif;
}
.icon-row{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:6px;
margin-bottom:10px;
}
.mini-feature{
min-height:75px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
padding:7px 4px;
border:1px solid #344b5e;
border-radius:6px;
background:linear-gradient(180deg,#0b1116,#05080a);
text-align:center;
}
.mini-feature>span{
color:#e6e9ec;
font-size:26px;
font-weight:900;
line-height:1;
}
.mini-feature b{
color:#f4f6f8;
font:900 10px/1.15 Arial,Helvetica,sans-serif;
}
.feature-list{
display:grid;
gap:0;
margin:0;
padding:0;
list-style:none;
border-top:1px solid #1f303c;
}
.feature-list.two-col{
grid-template-columns:1fr 1fr;
column-gap:18px;
}
.feature-list li{
position:relative;
min-height:34px;
display:flex;
align-items:center;
padding:7px 5px 7px 25px;
border-bottom:1px solid rgba(81,105,124,.27);
color:#f0f3f5;
font:700 14px/1.24 Arial,Helvetica,sans-serif;
text-shadow:none;
}
.feature-list li:before{
content:"✓";
position:absolute;
left:2px;
top:8px;
width:16px;
height:16px;
display:grid;
place-items:center;
border-radius:50%;
color:#fff;
background:#1e6fb2;
font-size:10px;
font-weight:900;
}
.orange-check li:before{background:#b65c16}
.pricing-card-basic .feature-list li{
min-height:42px;
font-size:16px;
}
.card-flex-spacer{flex:1}
.truck-addon{
display:grid;
grid-template-columns:48px 1fr 92px;
gap:9px;
align-items:center;
margin:12px 0 9px;
padding:8px 10px;
border:1px dashed #3475a7;
border-radius:7px;
background:#06111a;
}
.truck-orange{border-color:#a35b20}
.truck-symbol{
color:#f48a25;
font-size:30px;
text-align:center;
}
.truck-blue .truck-symbol{color:#3d9df0}
.truck-copy{
display:flex;
flex-direction:column;
gap:2px;
}
.truck-copy strong{
color:#f5f7f8;
font:900 14px/1.1 Arial,Helvetica,sans-serif;
}
.truck-orange .truck-copy strong{color:#f58b32}
.truck-blue .truck-copy strong{color:#54aaf2}
.truck-copy span{
color:#d8dfe4;
font:600 11.5px/1.25 Arial,Helvetica,sans-serif;
}
.truck-price{
text-align:center;
color:#f79535;
font:900 26px/1 Arial,Helvetica,sans-serif;
}
.truck-blue .truck-price{color:#4ca7ef}
.truck-price small,
.truck-price em{
display:block;
margin-top:2px;
color:#e6ebef;
font:900 9px/1.1 Arial,Helvetica,sans-serif;
font-style:normal;
}
.industrial-cta{
min-height:49px;
display:flex;
align-items:center;
justify-content:center;
margin-top:auto;
border:1px solid rgba(255,255,255,.22);
border-radius:6px;
color:#fff;
text-decoration:none;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:21px;
letter-spacing:.8px;
text-shadow:0 2px 0 #000;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.16),
0 4px 10px rgba(0,0,0,.38);
}
.blue-cta{background:linear-gradient(180deg,#3184d5,#0b3569)}
.orange-cta{background:linear-gradient(180deg,#d8742c,#70320f)}
.industrial-cta:hover,
.industrial-cta:focus-visible{
filter:brightness(1.1);
outline:2px solid rgba(255,255,255,.28);
outline-offset:2px;
}
.shield-badge{
position:absolute;
z-index:8;
top:-17px;
right:8px;
width:94px;
min-height:105px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:11px 7px 18px;
clip-path:polygon(8% 0,92% 0,100% 13%,100% 76%,50% 100%,0 76%,0 13%);
border:2px solid #ba7028;
background:linear-gradient(180deg,#242424,#050505);
text-align:center;
box-shadow:0 8px 14px rgba(0,0,0,.5),0 0 10px rgba(230,112,21,.22);
}
.shield-badge span{
color:#fff;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:18px;
line-height:1;
letter-spacing:.4px;
}
.shield-badge>b{
margin-top:5px;
color:#f08a22;
font-size:20px;
}
.value-shield{
width:110px;
min-height:132px;
border-color:#c38a30;
}
.value-shield>b{
margin:0 0 5px;
color:#f6aa2b;
font-size:31px;
}
.value-shield span{
color:#ffc45a;
font-size:15px;
}
.value-shield small{
margin-top:5px;
color:#ffc45a;
font:900 9px/1.1 Arial,Helvetica,sans-serif;
}
.pricing-card-pro .card-topbar{padding-right:90px}
.pricing-card-featured .card-topbar{padding-right:100px}
/* Bottom metal strips matching reference */
.industrial-trust-strip{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
margin-top:8px;
padding:7px;
border:2px solid #424b52;
border-radius:10px;
background:linear-gradient(180deg,#72777b 0,#262b2f 5px,#06090b 6px,#020405 100%);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.03),0 8px 18px rgba(0,0,0,.42);
}
.industrial-trust-strip>div{
min-height:72px;
display:flex;
align-items:center;
gap:12px;
padding:10px 17px;
border-right:1px solid #38434b;
background:linear-gradient(180deg,#0c1115,#050708);
}
.industrial-trust-strip>div:last-child{border-right:0}
.trust-icon{
min-width:40px;
text-align:center;
font-size:32px;
font-weight:900;
text-shadow:0 0 8px rgba(28,129,226,.2);
}
.industrial-trust-strip p{
margin:0;
color:#d7dde2;
font:600 12px/1.28 Arial,Helvetica,sans-serif;
}
.industrial-trust-strip p b{
display:block;
margin-bottom:3px;
color:#f4f6f7;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:15px;
letter-spacing:.35px;
}
.review-metal-strip{
display:grid;
grid-template-columns:410px 1fr;
gap:22px;
align-items:center;
margin-top:8px;
padding:11px 18px;
border:2px solid #414a50;
border-radius:10px;
background:linear-gradient(180deg,#111518,#06080a 55%,#020304);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.03),0 8px 18px rgba(0,0,0,.42);
}
.review-brand{
display:flex;
align-items:center;
gap:14px;
}
.review-gmark{
width:62px;
height:62px;
display:grid;
place-items:center;
border:5px solid #f07822;
border-radius:50%;
color:#3f9bf1;
background:#050607;
font:900 34px/1 Arial,Helvetica,sans-serif;
}
.review-brand strong{
display:block;
color:#f1f4f6;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:23px;
line-height:.95;
letter-spacing:.6px;
}
.review-brand span{
display:block;
margin-top:4px;
color:#f28a31;
font:800 11px/1.25 Arial,Helvetica,sans-serif;
}
.review-protect{
display:flex;
align-items:center;
gap:18px;
}
.review-stars{
min-width:92px;
padding:12px 8px;
border:1px solid #28679a;
border-radius:8px;
color:#06111a;
background:linear-gradient(180deg,#4fa8f0,#1468a9);
text-align:center;
font-size:22px;
letter-spacing:1px;
}
.review-protect strong{
color:#3da1ee;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:21px;
letter-spacing:.55px;
}
.review-protect p{
margin:4px 0 0;
color:#e0e5e9;
font:600 13px/1.35 Arial,Helvetica,sans-serif;
}
/* Suppress prior pricing layouts in case old classes remain in cached markup */
.pricing-v5844 .locked-pricing-art,
.pricing-v5844 .live-pricing-page,
.pricing-v5844 .live-plan-grid,
.pricing-v5844 .live-trust-strip,
.pricing-v5844 .review-booster-live,
.pricing-v5844 .paid-links-live{display:none!important}
@media(max-width:1220px){
.pricing-v5844-header{
grid-template-columns:360px 1fr;
}
.pricing-benefits{
grid-column:1/-1;
}
.pricing-cards{
grid-template-columns:1fr;
}
.pricing-card{min-height:0}
.pricing-card-pro .card-topbar,
.pricing-card-featured .card-topbar{padding-right:120px}
}
@media(max-width:760px){
.pricing-v5844{padding:8px 7px 24px}
.pricing-v5844-header{grid-template-columns:1fr;padding:12px}
.pricing-brand img{max-width:400px;margin:0 auto}
.pricing-headline h1{font-size:32px}
.pricing-benefits{grid-template-columns:repeat(3,1fr)}
.benefit{min-height:90px;padding:6px 4px}
.benefit-icon{font-size:24px}
.benefit strong{font-size:11px}
.benefit span{font-size:9px}
.pricing-cards{padding:7px}
.pricing-card{padding:12px}
.feature-list.two-col{grid-template-columns:1fr}
.feature-list li{min-height:39px;font-size:15px}
.pricing-card-basic .feature-list li{font-size:16px}
.icon-row{grid-template-columns:1fr 1fr}
.shield-badge{transform:scale(.82);transform-origin:top right}
.pricing-card-pro .card-topbar,
.pricing-card-featured .card-topbar{padding-right:95px}
.truck-addon{grid-template-columns:42px 1fr}
.truck-price{
grid-column:1/-1;
display:flex;
justify-content:center;
align-items:end;
gap:5px;
}
.truck-price small,.truck-price em{display:inline}
.industrial-trust-strip{grid-template-columns:1fr 1fr}
.review-metal-strip{grid-template-columns:1fr}
}
@media(max-width:480px){
.pricing-benefits{grid-template-columns:1fr}
.industrial-trust-strip{grid-template-columns:1fr}
.price-basic{font-size:66px}
.price-pro,.price-featured{font-size:56px}
}
/* ==========================================================
v5.8.45 — LOCKED EXACT PRICING ART
This is now the LOCKED desktop pricing visual.
Do not redesign/replace unless explicitly approved.
========================================================== */
.pricing-locked-v5845{
width:100%;
padding:0 0 28px;
background:transparent;
}
.pricing-locked-art{
position:relative;
width:min(1640px,100%);
margin:0 auto;
line-height:0;
}
.pricing-locked-art>img{
display:block;
width:100%;
height:auto;
margin:0 auto;
}
.pricing-hotspot{
position:absolute;
z-index:5;
display:block;
background:transparent;
border:0;
border-radius:8px;
cursor:pointer;
text-decoration:none;
}
/* Hotspots aligned to the three CTA buttons in the locked artwork */
.hotspot-basic{
left:8.25%;
top:66.3%;
width:20.2%;
height:7.4%;
}
.hotspot-pro{
left:33.1%;
top:67.7%;
width:25.4%;
height:5.8%;
}
.hotspot-featured{
left:64.4%;
top:67.7%;
width:26.2%;
height:5.8%;
}
.pricing-hotspot:hover,
.pricing-hotspot:focus-visible{
background:rgba(255,255,255,.025);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.16);
outline:none;
}
/* Hide mobile fallback on desktop */
.pricing-mobile-fallback{
display:none;
}
/* Phones and narrow tablets: use sharp live text and real buttons instead of
the horizontally scrolling desktop artwork. The wider breakpoint also
covers iPhone Safari when "Request Desktop Website" is enabled. */
@media(max-width:1180px){
.pricing-locked-art{
display:none;
}
.pricing-mobile-fallback{
display:grid;
gap:12px;
width:94%;
margin:12px auto 24px;
}
.pricing-mobile-card{
position:relative;
padding:16px 14px;
border:2px solid #275d90;
border-radius:10px;
background:linear-gradient(180deg,#081520,#03080d);
box-shadow:0 8px 20px rgba(0,0,0,.35);
color:#eef3f6;
}
.pricing-mobile-card.pro{
border-color:#a85a1d;
}
.pricing-mobile-card h2{
margin:0 0 7px;
color:#f4f6f7;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:27px;
letter-spacing:.5px;
}
.mobile-price{
margin-bottom:10px;
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:48px;
line-height:1;
}
.mobile-price small{
font:900 12px/1.1 Arial,Helvetica,sans-serif;
}
.pricing-mobile-card p{
margin:0 0 12px;
color:#e0e6ea;
font:700 14px/1.4 Arial,Helvetica,sans-serif;
}
.mobile-addon{
margin:0 0 12px;
padding:8px 10px;
border:1px dashed #3a80b5;
border-radius:6px;
color:#dce4ea;
font:700 13px/1.3 Arial,Helvetica,sans-serif;
background:#06121b;
}
.pricing-mobile-card.pro .mobile-addon{
border-color:#a85b22;
}
.pricing-mobile-card a{
min-height:46px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.2);
border-radius:6px;
color:#fff;
text-decoration:none;
background:linear-gradient(180deg,#2e82d4,#0d3768);
font-family:Impact,"Arial Narrow",Arial,sans-serif;
font-size:20px;
letter-spacing:.6px;
}
.pricing-mobile-card a.orange-btn{
background:linear-gradient(180deg,#d26f27,#71320f);
}
.mobile-badge{
position:absolute;
top:10px;
right:10px;
padding:5px 8px;
border:1px solid #ba6d26;
border-radius:5px;
color:#fff;
background:#111;
font:900 10px/1 Arial,Helvetica,sans-serif;
}
.mobile-badge.value{
color:#ffc45a;
}
}