:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #fff; font-family: Arial, Helvetica, sans-serif; }
body { display: flex; justify-content: center; }
.page-shell { position: relative; width: min(100%, var(--page-width)); line-height: 0; background: white; overflow: hidden; }
.page-art { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.hotspot { position: absolute; display: block; z-index: 5; border: 0; padding: 0; background: transparent; cursor: pointer; text-indent: -9999px; overflow: hidden; }
.hotspot:focus-visible { outline: 3px solid #0b7a31; outline-offset: -3px; background: rgba(11,122,49,.08); }
/* shared desktop screenshot navigation */
.nav-home { left: 39.1%; top: 1.6%; width: 8.1%; height: 4.3%; }
.nav-how-use { left: 48.2%; top: 1.6%; width: 11.3%; height: 4.3%; }
.nav-how-works { left: 59.5%; top: 1.6%; width: 13.8%; height: 4.3%; }
.nav-faq { left: 74.1%; top: 1.6%; width: 8.2%; height: 4.3%; }
.nav-buy { left: 82.2%; top: 1.3%; width: 15.5%; height: 4.8%; }
.logo-home { left: 1.5%; top: .3%; width: 34%; height: 5.7%; }
/* How-to-use screenshot is 1122x1402 and has slightly different header spacing */
.how-use-page .nav-home { left: 40%; top: 1.1%; width: 7%; height: 4.7%; }
.how-use-page .nav-how-use { left: 49%; top: 1.1%; width: 10%; height: 4.7%; }
.how-use-page .nav-how-works { left: 60%; top: 1.1%; width: 12%; height: 4.7%; }
.how-use-page .nav-faq { left: 72.5%; top: 1.1%; width: 7%; height: 4.7%; }
.how-use-page .nav-buy { left: 79.7%; top: .8%; width: 16%; height: 5.3%; }
.how-use-page .logo-home { left: 1.8%; top: .1%; width: 33%; height: 6%; }
/* retailer link hotspots */
.buy-amazon { left: 5.2%; top: 43.8%; width: 28.7%; height: 17.4%; }
.buy-lowes { left: 35.7%; top: 43.8%; width: 28.7%; height: 17.4%; }
.buy-walmart { left: 66.3%; top: 43.8%; width: 28.7%; height: 17.4%; }
/* home CTA and retailer cards */
.home-shop { left: 4.5%; top: 23.5%; width: 15%; height: 3.2%; }
.home-amazon { left: 50.5%; top: 83.5%; width: 13%; height: 6%; }
.home-lowes { left: 66.2%; top: 83.5%; width: 12%; height: 6%; }
.home-walmart { left: 80.3%; top: 83.5%; width: 15%; height: 6%; }
/* generic retailer strips on inner pages */
.strip-amazon { left: 6%; top: 89%; width: 27%; height: 6%; }
.strip-lowes { left: 36.5%; top: 89%; width: 27%; height: 6%; }
.strip-walmart { left: 67%; top: 89%; width: 27%; height: 6%; }
/* FAQ rows */
.faq-row { left: 3%; width: 94%; height: 3.25%; }
.faq-1 { top: 29.55%; } .faq-2 { top: 32.78%; } .faq-3 { top: 36.02%; }
.faq-4 { top: 39.27%; } .faq-5 { top: 42.51%; } .faq-6 { top: 45.76%; }
.faq-7 { top: 49.0%; } .faq-8 { top: 52.25%; } .faq-9 { top: 55.49%; }
.faq-10 { top: 58.74%; } .faq-11 { top: 61.98%; } .faq-12 { top: 65.23%; }
.faq-13 { top: 68.47%; } .faq-14 { top: 71.72%; }
/* modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.55); line-height: 1.45; }
.modal-backdrop.open { display: flex; }
.modal { width: min(680px, 96vw); max-height: 85vh; overflow: auto; background: white; border-radius: 14px; padding: 26px; box-shadow: 0 18px 60px rgba(0,0,0,.28); color: #161616; }
.modal h2 { margin: 0 38px 12px 0; color: #0b5b2d; font-size: clamp(22px, 4vw, 32px); }
.modal p { margin: 0; font-size: 17px; }
.modal-close { float: right; border: 0; background: #0b5b2d; color: white; border-radius: 999px; width: 34px; height: 34px; font-size: 23px; cursor: pointer; line-height: 30px; }
@media (max-width: 700px) {
  body { display: block; }
  .page-shell { width: 100%; }
  .modal { padding: 20px; }
  .modal p { font-size: 15px; }
}