/* ============================================================================
FleetStack UI — faithful rebuild of https://fleetstack-cart.lovable.app/
Self-contained design system (no Bootstrap/Tailwind dependency).
Product cards are HORIZONTAL (image left, details right) per requirement.
All cart.js / proceedToCheckout hook classes are kept in the markup.
============================================================================ */
:root {
--navy:#0f2440; --navy-2:#0b1d33; --ink:#102540;
--blue:#2563eb; --blue-deep:#1d4ed8; --blue-tint:#eaf2fb; --blue-tint-2:#f3f8fd;
--amber:#f59e0b; --amber-tint:#fdecc8; --amber-ink:#7a4f05;
--green:#16a34a; --green-tint:#e7f6ee;
--muted:#64748b; --muted-2:#7b889b; --line:#e6ecf4;
--shadow:0 1px 2px rgba(15,36,64,.04), 0 10px 30px rgba(15,36,64,.07);
--shadow-sm:0 1px 2px rgba(15,36,64,.05), 0 4px 14px rgba(15,36,64,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
color:var(--ink); background:#fff; line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
.fs-wrap{max-width:1240px; margin:0 auto; padding:0 24px}
/* ---------- header ---------- */
.fs-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line);
/* promote to its own compositor layer so a scrolled image's translateZ layer
can never paint over the sticky header on mobile */
transform:translateZ(0); will-change:transform}
.fs-header-in{display:flex; align-items:center; gap:28px; height:64px}
.fs-logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:20px; color:var(--navy)}
.fs-logo .dot{display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff}
.fs-nav{display:flex; gap:26px; margin-left:6px}
.fs-nav a{color:#33415c; font-weight:500; font-size:15px}
.fs-nav a:hover{color:var(--blue)}
.fs-header-cta{margin-left:auto; display:flex; align-items:center; gap:16px}
.fs-phone{display:flex; align-items:center; gap:7px; color:var(--navy); font-weight:600; font-size:15px}
@media (max-width:860px){.fs-nav{display:none} .fs-header-in{gap:14px}}
/* ---------- hero ---------- */
.fs-hero{background:linear-gradient(180deg,#f7faff 0%,#fff 70%); border-bottom:1px solid var(--line);
text-align:center; padding:46px 0 36px}
.fs-eyebrow{display:inline-flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center;
font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--blue);
background:var(--blue-tint); border:1px solid #d8e6f7; padding:7px 14px; border-radius:999px}
.fs-h1{font-size:52px; line-height:1.05; font-weight:800; letter-spacing:-.02em; color:var(--navy); margin:22px 0 0}
.fs-h1 .b{color:var(--blue); display:block}
.fs-sub{max-width:680px; margin:16px auto 0; color:var(--muted); font-size:17px}
.fs-trust{display:flex; gap:22px; flex-wrap:wrap; justify-content:center; align-items:center;
margin-top:22px; color:#42526b; font-size:14px; font-weight:500}
.fs-trust .it{display:inline-flex; align-items:center; gap:7px}
.fs-trust .star{color:var(--amber)}
.fs-awards{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:24px}
.fs-award{display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
border-radius:12px; padding:10px 16px; box-shadow:var(--shadow-sm); font-size:13px}
.fs-award .t{font-weight:700; color:var(--navy); line-height:1.1}
.fs-award .s{color:var(--muted); font-size:12px}
.fs-award .ic{color:var(--amber)}
@media (max-width:640px){.fs-h1{font-size:34px} .fs-sub{font-size:15px}}
/* ---------- filter tabs ---------- */
/* full-width sticky bar; inner row stays centered in the wrap, so no 100vw / no horizontal scroll */
.fs-tabs-bar{position:sticky; top:64px; z-index:40; background:#fff; border-bottom:1px solid var(--line);
transition:box-shadow .2s;
/* solid bg + own compositor layer so the product image (which uses translateZ on
mobile) can never bleed over this sticky filter bar while scrolling */
background-color:#fff; transform:translateZ(0); will-change:transform}
.fs-tabs-bar.fs-stuck{box-shadow:0 6px 18px rgba(15,36,64,.08)}
/* Mobile: keep the products tabs bar STICKY, but make sure the open hamburger
menu sits ABOVE it. The header has z-index:101, the tabs bar z-index:40, so the
menu already wins the stacking — we just give the open menu a solid background
(and explicit stacking) so the pinned buttons are fully hidden behind it. */
@media (max-width:991.98px){
.fs-tabs-bar{z-index:40}
#navbarNav{position:relative; z-index:110; background:#fff}
/* The shared navbar's Bootstrap dropdown sub-menus render absolutely-positioned and
overlap when expanded on mobile; stack them inline instead (scoped to this page). */
#navbarNav .navbar-nav{width:100%; align-items:stretch !important; gap:0 !important; list-style:none; padding-left:0; margin-bottom:0}
#navbarNav .nav-item{width:100%; text-align:center; list-style:none}
#navbarNav .dropdown-menu{position:static !important; display:block; float:none; width:100%;
border:none; box-shadow:none; margin:0; padding:0 0 6px; background:transparent; list-style:none}
#navbarNav .dropdown-menu li{list-style:none}
#navbarNav .dropdown-menu .dropdown-item{padding:8px 0}
}
.fs-tabs-row{display:flex; align-items:center; gap:14px; padding:14px 24px}
.fs-tabs{display:flex; gap:10px; flex-wrap:wrap; overflow-x:auto; min-width:0}
.fs-tab{border:1px solid transparent; background:var(--blue-tint); color:var(--navy); font-weight:600;
font-size:14px; padding:9px 18px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:.15s}
.fs-tab:hover{background:#dfeafb}
.fs-tab.active{background:var(--navy); color:#fff}
.fs-count{margin-left:auto; color:var(--muted); font-size:14px; white-space:nowrap}
@media (max-width:640px){.fs-count{display:none}}
/* ---------- main layout ---------- */
.fs-main{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:30px; padding:28px 0 60px; align-items:stretch}
/* aside stretches to the full height of the product column so the summary card
can stay sticky the whole way down until the products end */
.fs-main > aside{align-self:stretch}
@media (max-width:1024px){.fs-main{grid-template-columns:1fr} .fs-main > aside{align-self:start}}
/* section divider label */
.fs-divider{display:flex; align-items:center; gap:16px; margin:14px 0 18px}
.fs-divider .lab{display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:#fff;
font-size:12px; font-weight:700; letter-spacing:.06em; padding:7px 14px; border-radius:999px}
.fs-divider .ln{flex:1; height:1px; background:var(--line)}
/* ---------- horizontal product card ---------- */
.fs-card{display:flex; gap:24px; background:#fff; border:1px solid var(--line); border-radius:20px;
padding:20px; box-shadow:var(--shadow); margin-bottom:22px; transition:border-color .18s, box-shadow .18s}
.fs-card:hover{border-color:rgba(37,99,235,.4); box-shadow:0 4px 12px rgba(15,36,64,.07),0 18px 44px rgba(15,36,64,.10)}
/* LEFT column = product identity (image + name) */
.fs-card-media{flex:0 0 290px; max-width:290px; display:flex; flex-direction:column}
.fs-media-img{position:relative; background:var(--blue-tint-2); border:1px solid var(--line);
border-radius:16px; min-height:210px; display:grid; place-items:center; padding:18px}
/* .fs-media-img.navy{background:linear-gradient(160deg,#11294a 0%,#0b1d33 100%); border-color:#11294a} */
.fs-media-img img{width:100%; height:auto; max-height:190px; object-fit:contain}
.fs-award-pill{position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px;
background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#5a3c05; font-size:12px; font-weight:700;
padding:5px 11px; border-radius:999px; box-shadow:0 2px 6px rgba(245,158,11,.35)}
.fs-media-cap{text-align:center; padding:14px 4px 2px}
.fs-media-cap h3{font-size:20px; font-weight:800; color:var(--navy); margin:10px 0 6px; letter-spacing:-.01em}
.fs-subhead{margin:0 0 8px; font-size:13.5px; font-weight:600; line-height:1.4; color:var(--blue)}
.fs-media-cap .fs-subhead{padding:0 4px}
.fs-media-cap .fs-rating{justify-content:flex-start;margin-top: 15px;}
.fs-media-cap .fs-free{margin-top:10px}
.fs-card-body{flex:1; min-width:0; display:flex; flex-direction:column}
.fs-cats{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-start}
.fs-cat{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--blue);
background:var(--blue-tint); border:1px solid #d8e6f7; padding:5px 11px; border-radius:999px; text-transform:uppercase}
.fs-free{display:inline-flex; align-items:center; gap:7px; background:var(--green-tint); color:var(--green);
font-weight:700; font-size:13px; padding:7px 12px; border-radius:10px; margin-top:10px}
.fs-card h3{font-size:23px; font-weight:800; color:var(--navy); margin:0 0 6px; letter-spacing:-.01em}
.fs-rating{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted)}
.fs-rating .stars{color:var(--amber); letter-spacing:1px}
.fs-rating b{color:var(--navy)}
.fs-desc{color:var(--muted); font-size:14.5px; margin:10px 0 0; max-width:620px}
.fs-desc-more{display:block; margin-top:8px}
.fs-readmore{display:inline-block; margin-top:6px; color:var(--blue); font-weight:600;
font-size:13.5px; cursor:pointer; text-decoration:none}
.fs-readmore:hover{text-decoration:underline}
.fs-specs{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.fs-chip{display:inline-flex; align-items:center; gap:6px; background:var(--blue-tint); color:#3a4a63;
font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:9px}
.fs-chip .ic{color:var(--blue); display:inline-flex; align-items:center}
.fs-chip .ic svg{width:14px; height:14px; display:block}
/* price box (non-eld) */
.fs-pricebox{display:flex; gap:14px; background:var(--blue-tint-2); border:1px solid var(--line);
border-radius:14px; padding:14px 16px; margin-top:16px; max-width:520px}
.fs-pricebox .col{flex:1}
.fs-pricebox .col + .col{border-left:1px solid var(--line); padding-left:16px}
.fs-pl{font-size:12.5px; color:var(--muted); font-weight:600}
.fs-pv{font-size:24px; font-weight:800; color:var(--navy); line-height:1.1; margin-top:2px}
.fs-pu{font-size:12px; color:var(--muted-2); font-weight:600; margin-left:2px}
.fs-incl{font-size:13px; color:var(--green); font-weight:700; margin-top:6px}
/* eld plan selector (reuses .plan-card hooks) */
.fs-plans-head{display:flex; justify-content:space-between; align-items:center; background:var(--blue-tint-2);
border:1px solid var(--line); border-bottom:none; border-radius:14px 14px 0 0; padding:12px 16px; margin-top:16px}
.fs-plans-head .h{font-weight:700; color:var(--navy)}
.fs-plans-head .f{font-weight:800; color:var(--green); font-size:15px; text-align:right; line-height:1.1}
.fs-plans-head .f small{display:block; font-size:11px; color:var(--muted); font-weight:600}
.fs-plans{display:flex; flex-direction:column; gap:10px; background:var(--blue-tint-2); border:1px solid var(--line);
border-top:none; border-radius:0 0 14px 14px; padding:14px 16px; max-width:520px}
.plan-card{display:flex; align-items:center; flex-wrap:wrap; gap:12px; background:#fff; border:1.5px solid var(--line);
border-radius:12px; padding:12px 14px; cursor:pointer; transition:.15s; position:relative}
.plan-card:hover{border-color:#bcd2f3}
.plan-card-active{border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.16); background:#fff}
.plan-card-radio{flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:2px solid #c4d3e6; display:inline-block}
.plan-card-check{flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center;
background:var(--blue)}
.plan-card-check svg{width:13px; height:13px}
.plan-card-check svg path{fill:#fff}
.plan-name{font-weight:700; color:var(--navy)}
.plan-pop{display:inline-flex; align-items:center; gap:4px; background:var(--amber-tint); color:var(--amber-ink);
font-size:10.5px; font-weight:800; letter-spacing:.04em; padding:3px 8px; border-radius:999px; margin-left:8px}
.plan-card-price{margin-left:auto; font-weight:800; color:var(--navy); font-size:16px; white-space:nowrap}
.plan-card-price small{color:var(--muted); font-weight:600; font-size:12px}
.plan-card ul{display:none} /* feature lists hidden until the plan is selected */
/* reveal the selected plan's feature bullets, full-width below the plan row */
.plan-card-active ul.plan-feats{display:block; flex-basis:100%; width:100%; order:2;
margin:4px 0 0; padding:10px 0 0 0; list-style:none; border-top:1px dashed var(--line)}
.plan-card-active ul.plan-feats li{position:relative; padding-left:24px; margin:6px 0; font-size:13.5px;
font-weight:600; color:var(--navy); line-height:1.35}
.plan-card-active ul.plan-feats li::before{content:""; position:absolute; left:0; top:2px; width:16px; height:16px;
border-radius:50%; background:var(--green);
-webkit-mask:url("data:image/svg+xml;utf8,") center/14px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/14px no-repeat}
/* quantity + line total */
.fs-qtyrow{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:18px}
.fs-qty-label{font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
.quantity-box{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:#fff}
.qty-btn{width:42px; height:42px; border:none; background:#fff; color:var(--blue); font-size:20px; font-weight:600; cursor:pointer; transition:.12s}
.qty-btn:hover{background:var(--blue-tint)}
.qty-value,.qty-value-maa,.qty-value-vt,.qty-value-dashcam-eld,.qty-value-dashcam{
min-width:46px; text-align:center; font-size:16px; font-weight:800; color:var(--navy)}
.fs-line-total{display:flex; align-items:baseline; gap:6px; margin-left:auto}
.price-main,.price-main-maa,.price-main-vt,.price-main-dashcam,.price-main-dashcam-eld{
font-size:22px; font-weight:800; color:var(--blue)}
.price-main::before,.price-main-maa::before,.price-main-vt::before,
.price-main-dashcam::before,.price-main-dashcam-eld::before{content:"$"}
.price-detail,.price-details-maa,.price-details-vt,.price-details-dashcam,.price-details-dashcam-eld{
font-size:12px; color:var(--muted-2); font-weight:600}
@media (max-width:620px){
.fs-card{flex-direction:column; gap:16px}
.fs-card-media{flex-basis:auto; max-width:none; width:100%}
/* Fix: in the stacked (column) layout the position:relative image container
painted over the action buttons during scroll on mobile. Promote the image
to its own compositor layer so it repaints cleanly, and lift the card body
(quantity + Add to Cart buttons) into a stacking context above it. */
.fs-media-img{transform:translateZ(0)}
.fs-card-body{position:relative; z-index:1}
}
/* card action buttons (Add to Cart + View Full Details) */
.fs-actions{margin-top:auto; padding-top:18px}
.fs-addcart{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; border:none; cursor:pointer;
background:linear-gradient(135deg,#16386e 0%,#2563eb 100%); color:#fff; font-weight:800; font-size:15.5px;
padding:14px 18px; border-radius:13px; box-shadow:0 6px 16px rgba(37,99,235,.26); transition:.15s}
.fs-addcart:hover{filter:brightness(1.07)}
.fs-addcart.added{background:linear-gradient(135deg,#0f7a3d 0%,#16a34a 100%); box-shadow:0 6px 16px rgba(22,163,74,.28)}
.fs-details{display:block; width:100%; text-align:center; margin-top:12px; background:none; border:none;
color:var(--blue); font-weight:700; font-size:14px; cursor:pointer}
.fs-details:hover{text-decoration:underline}
/* order-summary line thumbnails */
.cart-table > div{align-items:center}
.fs-line-img{width:36px; height:36px; flex:0 0 36px; border-radius:8px; object-fit:contain;
background:var(--blue-tint-2); border:1px solid var(--line); padding:3px}
.fs-line-name{flex:1; min-width:0}
.fs-line-price{white-space:nowrap}
/* product details modal */
.fs-pmodal{position:fixed; inset:0; background:rgba(15,36,64,.55); display:flex; align-items:center;
justify-content:center; z-index:1200; padding:20px}
.fs-pmodal.hidden{display:none}
.fs-pmodal-card{background:#fff; border-radius:18px; max-width:760px; width:100%; max-height:90vh; overflow:auto;
position:relative; box-shadow:var(--shadow); padding:26px}
.fs-pmodal-close{position:absolute; top:12px; right:16px; border:none; background:none; font-size:28px; color:var(--muted); cursor:pointer; line-height:1}
.fs-pmodal-grid{display:grid; grid-template-columns:260px 1fr; gap:24px}
@media (max-width:640px){.fs-pmodal-grid{grid-template-columns:1fr}}
.fs-pmodal-media{background:var(--blue-tint-2); border:1px solid var(--line); border-radius:14px;
display:grid; place-items:center; padding:18px; min-height:200px}
.fs-pmodal-media img{max-width:100%; max-height:210px; object-fit:contain}
.fs-pmodal-body h3{font-size:24px; font-weight:800; color:var(--navy); margin:10px 0 8px}
.fs-pmodal-body > p{color:var(--muted); font-size:14.5px; line-height:1.6}
.fs-pmodal-body .fs-pricewrap{margin:14px 0}
.fs-pmodal-body .fs-addcart{margin-top:8px}
/* ---------- order summary sidebar ---------- */
.fs-summary{position:sticky; top:140px; background:#fff; border:1px solid var(--line); border-radius:20px;
box-shadow:var(--shadow); padding:22px}
.fs-sum-head{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--navy); font-size:17px;
padding-bottom:14px; border-bottom:1px solid var(--line)}
.fs-sum-head .ic{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--blue-tint); color:var(--blue)}
.fs-empty{text-align:center; padding:26px 8px}
.fs-empty .ic{display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--blue-tint-2);
color:#9fb2cc; margin:0 auto 12px}
.fs-empty .t{color:var(--navy); font-weight:600}
.fs-empty .s{color:var(--muted); font-size:13px; margin-top:4px}
.cart-table{padding:16px 0 4px}
.cart-table > div{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 10px; font-size:13.5px;
color:var(--ink); padding:8px 0; border-bottom:1px solid #f1f5fa}
.cart-table > div:last-child{border-bottom:none}
.cart-table > div > span:first-child{color:var(--navy); font-weight:600}
.cart-table > div .text-muted{color:var(--muted-2); font-weight:500}
.cart-table > div .fs-line-price,
.cart-table > div > span:last-child{font-weight:700; color:var(--navy); white-space:nowrap}
/* per-line quantity / remove controls in the order summary */
.fs-line-ctl{flex:0 0 100%; display:flex; justify-content:flex-end; align-items:center; gap:7px; margin-top:2px}
.fs-line-ctl .fs-qtybtn{width:24px; height:24px; border:1px solid var(--line); background:#fff; border-radius:7px;
color:var(--navy); font-weight:700; font-size:15px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.12s}
.fs-line-ctl .fs-qtybtn:hover{background:var(--blue-tint); border-color:#cfe0f5}
.fs-line-ctl .fs-line-rm{border:none; background:none; color:var(--muted); font-size:12px; cursor:pointer;
padding:2px 4px; margin-left:4px}
.fs-line-ctl .fs-line-rm:hover{color:#dc2626; text-decoration:underline}
.fs-totline{display:flex; justify-content:space-between; font-size:14px; color:var(--muted); padding:6px 0}
.fs-totline b{color:var(--navy)}
.fs-totline.green b{color:var(--green)}
.fs-sum-rule{height:1px; background:var(--line); margin:12px 0}
.fs-due{display:flex; justify-content:space-between; align-items:baseline; margin:6px 0 16px}
.fs-due .l{font-size:12px; font-weight:800; letter-spacing:.07em; color:var(--navy); text-transform:uppercase}
.fs-due .v{font-size:30px; font-weight:800; color:var(--navy)}
.checkout-btn,.fs-checkout{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
border:none; cursor:pointer; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff;
font-weight:700; font-size:16px; padding:15px 18px; border-radius:13px; box-shadow:0 6px 16px rgba(37,99,235,.30); transition:.15s}
.checkout-btn:hover,.fs-checkout:hover{background:linear-gradient(135deg,var(--blue-deep),#1740b8);color: #fff;}
.fs-checklist{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px}
.fs-checklist li{display:flex; align-items:center; gap:9px; font-size:13.5px; color:#3a4a63}
.fs-checklist .ck{color:var(--green)}
/* ---------- lower sections ---------- */
.fs-section{padding:54px 0; border-top:1px solid var(--line)}
.fs-sec-title{font-size:32px; font-weight:800; color:var(--navy); letter-spacing:-.01em; text-align:center}
.fs-sec-sub{text-align:center; color:var(--muted); margin-top:8px; font-size:16px}
/* comparison-table section sits on a light-blue band (matches reference) */
.fs-compare-section{background:linear-gradient(180deg,#eef5fc 0%,#e5eff9 100%); border-top:none}
/* FAQ — two-column accordion */
.fs-faq{max-width:980px; margin:30px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
@media (max-width:760px){.fs-faq{grid-template-columns:1fr}}
.fs-faq details{border:1px solid var(--line); border-radius:14px; padding:0 18px; background:#f8fafc; box-shadow:var(--shadow-sm)}
.fs-faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
gap:12px; padding:16px 0; font-weight:700; color:var(--navy); font-size:14.5px}
.fs-faq summary::-webkit-details-marker{display:none}
.fs-faq summary .pl{color:var(--blue); font-size:22px; line-height:1; transition:.2s}
.fs-faq details[open] summary .pl{transform:rotate(45deg)}
.fs-faq p{margin:0 0 16px; color:var(--muted); font-size:14px; line-height:1.6}
/* ---------- dark (navy) band: bundle + stats + reviews + final CTA ---------- */
.fs-dark{background:linear-gradient(135deg,#0f2a44 0%,#163759 100%); color:#dbe6f4; padding:58px 0}
.fs-dark-title{font-size:34px; font-weight:800; color:#fff; letter-spacing:-.01em; line-height:1.12; margin:0}
.fs-dark-sub{color:#9fb2cc; font-size:16px; margin-top:12px; line-height:1.55}
.fs-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
@media (max-width:760px){.fs-stats{grid-template-columns:repeat(2,1fr); gap:20px}}
.fs-stat .n{font-size:30px; font-weight:800; color:#fff}
.fs-stat .l{font-size:13px; color:#94a7c2; margin-top:4px}
/* ---------- BUNDLE & SAVE section (amber gradient band, navy content) ---------- */
.fs-amber{background:linear-gradient(135deg,#fde68a 0%,#f59e0b 100%); padding:58px 0}
.fs-amber .fs-dark-title{color:#0f2a44}
.fs-amber .fs-dark-sub{color:#5b4708}
.fs-bundle-eyebrow{display:inline-block; font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:12px;
color:#fff; background:rgba(15,42,68,.92); padding:7px 14px; border-radius:999px; margin:0 0 18px}
.fs-bundle-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:center}
@media (max-width:880px){.fs-bundle-grid{grid-template-columns:1fr; gap:28px}}
.fs-bundle-list{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:13px}
.fs-bundle-list li{display:flex; align-items:flex-start; gap:11px; font-size:15.5px; color:#26323f; line-height:1.5; font-weight:500}
.fs-bundle-list .ck{flex:0 0 auto; color:#0f2a44; font-weight:800; font-size:18px; line-height:1.3}
.fs-bundle-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px}
.fs-btn-navy{display:inline-flex; align-items:center; gap:8px; background:#0f2a44; color:#fff;
font-weight:700; font-size:15px; padding:14px 24px; border-radius:12px; box-shadow:0 8px 18px rgba(15,42,68,.3)}
.fs-btn-navy:hover{background:#0a1e33}
.fs-cta-note{color:#9fb2cc; font-size:13px}
.fs-cta-note a{color:#cdd8e6; font-weight:600}
.fs-amber .fs-cta-note{color:#5b4708}
.fs-amber .fs-cta-note a{color:#0f2a44; font-weight:700}
.fs-bundle-imgs{display:flex; gap:18px; justify-content:center; align-items:stretch; flex-wrap:wrap; margin:0}
.fs-bundle-imgs figure{margin:0; text-align:center; background:#fff; border-radius:16px; padding:18px 16px; box-shadow:0 14px 30px rgba(0,0,0,.18)}
.fs-bundle-imgs img{height:78px; width:auto; object-fit:contain}
.fs-bundle-imgs figcaption{margin-top:8px; font-size:12px; font-weight:700; color:var(--navy)}
/* ---------- comparison table ---------- */
.fs-compare-wrap{margin-top:26px; overflow-x:auto; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm)}
.fs-compare{border-collapse:collapse; width:100%; min-width:920px; font-size:13.5px; background:#fff}
.fs-compare th,.fs-compare td{padding:12px 12px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap}
.fs-compare thead th{position:sticky; top:0; background:var(--navy); color:#fff; font-weight:700; font-size:12.5px;
letter-spacing:.01em; z-index:2}
.fs-compare thead th:first-child{text-align:left; background:var(--navy-2)}
.fs-compare tbody th{text-align:left; font-weight:700; color:var(--navy); background:var(--blue-tint-2);
position:sticky; left:0; z-index:1; white-space:nowrap}
.fs-compare tbody tr:nth-child(even) td{background:#fbfdff}
.fs-compare tbody tr:hover td{background:var(--blue-tint)}
.fs-compare .yes{color:var(--green); font-weight:800}
.fs-compare .no{color:#c2ccd9}
.fs-compare .val{color:var(--navy); font-weight:600}
.fs-compare .prem{color:var(--amber-ink); background:var(--amber-tint); border-radius:999px; padding:2px 9px; font-weight:700; font-size:11.5px}
.fs-compare .free{color:var(--green); font-weight:800}
/* ---------- testimonials (inside .fs-dark) ---------- */
.fs-reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px}
@media (max-width:880px){.fs-reviews{grid-template-columns:1fr}}
.fs-review{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:22px;
display:flex; flex-direction:column; gap:12px}
.fs-review .stars{color:var(--amber); font-size:15px; letter-spacing:1px}
.fs-review .quote{color:#e3ecf7; font-size:15px; line-height:1.55; flex:1}
.fs-review .who{display:flex; align-items:center; gap:11px}
.fs-review .av{flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
font-weight:800; color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-deep))}
.fs-review .nm{font-weight:700; color:#fff; font-size:14.5px}
.fs-review .ro{color:#94a7c2; font-size:12.5px}
.fs-review .badge{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:11px; font-weight:700;
letter-spacing:.04em; color:var(--amber); background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3); border-radius:999px; padding:5px 11px}
/* ---------- final CTA (inside .fs-dark) ---------- */
.fs-cta-title .g1{color:var(--blue)} .fs-cta-title .g2{color:var(--amber)}
.fs-cta-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px}
.fs-cta-btns .fs-checkout{width:auto}
.fs-btn-outline{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); color:#fff;
border:1px solid rgba(255,255,255,.22); font-weight:700; font-size:15px; padding:14px 22px; border-radius:12px}
.fs-btn-outline:hover{background:rgba(255,255,255,.12);color: #fff;}
.fs-cta-contact{margin-top:22px; color:#cdd8e6; font-size:14px}
.fs-cta-hours{color:#7e92ad; font-size:13px; margin-top:4px}
/* ---------- footer (navy, 4 columns) ---------- */
.fs-footer{background:#0b1d33; color:#aebdd1; padding:46px 0 28px}
.fs-foot-top{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.1)}
.fs-footer .fs-logo{color:#fff}
.fs-foot-ratings{display:flex; gap:18px; flex-wrap:wrap; color:#cdd8e6; font-size:13.5px}
.fs-foot-ratings .st{color:var(--amber)}
.fs-foot-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:28px 0}
@media (max-width:760px){.fs-foot-cols{grid-template-columns:repeat(2,1fr)}}
.fs-foot-col h4{margin:0 0 12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#7e92ad}
.fs-foot-col a{display:block; color:#aebdd1; font-size:14px; padding:5px 0} .fs-foot-col a:hover{color:#fff}
.fs-foot-copy{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.1);
padding-top:20px; color:#7e92ad; font-size:13px; line-height:1.6}
/* ---------- thank-you modal (kept) ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(15,36,64,.55); display:flex; align-items:center;
justify-content:center; z-index:1000; padding:20px}
.modal-overlay.hidden{display:none}
.modal-custom{background:#fff; border-radius:18px; max-width:440px; width:100%; padding:28px; position:relative; box-shadow:var(--shadow)}
.modal-custom .close-button{position:absolute; top:14px; right:16px; border:none; background:none; font-size:26px; color:var(--muted); cursor:pointer}
.modal-title-custom{font-size:22px; font-weight:800; color:var(--navy); margin:0 0 10px}
.modal-text-custom{color:var(--muted); margin:0 0 20px}
.back-home-button{background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; border:none;
padding:12px 20px; border-radius:11px; font-weight:700; cursor:pointer}
/* ---------- mobile floating cart + slide-in drawer ---------- */
/* Floating cart button (bottom-left) — hidden on desktop, shown on mobile */
.fs-cart-fab{display:none; position:fixed; right:18px; bottom:18px; z-index:1100;
width:75px; height:75px; border-radius:50%; border:none; cursor:pointer;
align-items:center; justify-content:center; color:#fff;
background:linear-gradient(135deg,var(--blue),var(--blue-deep));
box-shadow:0 10px 24px rgba(37,99,235,.40)}
.fs-cart-fab:active{transform:scale(.94)}
.fs-fab-count{position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 5px;
border-radius:11px; background:var(--amber,#F2A618); color:#1f2937; font-size:12px; font-weight:800;
display:none; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.2)}
/* backdrop + drawer close button (only active on mobile) */
.fs-cart-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1099;
opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease}
.fs-drawer-close{display:none}
@media (max-width:1024px){
.fs-cart-fab{display:flex}
/* turn the order-summary card into a left slide-in drawer */
.fs-main > aside{align-self:start}
.fs-summary{position:fixed; top:0; right:0; bottom:0; margin:0; z-index:1101;
width:90%; max-width:380px; height:100%; height:100dvh; overflow-y:auto;
border-radius:18px 0 0 18px; box-shadow:0 0 40px rgba(0,0,0,.28);
transform:translateX(105%); transition:transform .28s ease}
body.fs-cart-open .fs-summary{transform:translateX(0)}
body.fs-cart-open .fs-cart-backdrop{opacity:1; visibility:visible}
body.fs-cart-open{overflow:hidden}
.fs-drawer-close{display:grid; place-items:center; position:absolute; top:14px; left:14px;
width:34px; height:34px; border:none; background:#f1f5fa; color:var(--navy);
border-radius:50%; font-size:22px; line-height:1; cursor:pointer; z-index:2}
}