:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #07090e; }
body { margin: 0; min-width: 320px; background: #07090e; }
.landing { position: relative; width: min(100%, 1440px); margin: 0 auto; line-height: 0; overflow: hidden; }
.landing__art { display: block; width: 100%; height: auto; user-select: none; }
.hotspots, .actions, .faq-controls { position: absolute; inset: 0; }
.hotspot { position: absolute; display: block; outline-offset: 3px; border-radius: 999px; }
.hotspot span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Coordenadas proporcionais à arte original de 835 × 1884 px. */
.hotspot--home { left: 36.2%; top: 1.0%; width: 4.4%; height: 2.1%; }
.hotspot--method { left: 41.7%; top: 1.0%; width: 8.4%; height: 2.1%; }
.hotspot--who { left: 51.4%; top: 1.0%; width: 7.0%; height: 2.1%; }
.hotspot--proof { left: 60.0%; top: 1.0%; width: 6.7%; height: 2.1%; }
.hotspot--header-cta { left: 73.6%; top: .52%; width: 18.0%; height: 2.1%; }
.hotspot--hero-cta { left: 8.2%; top: 18.0%; width: 35.2%; height: 2.35%; }
.hotspot--offer-cta { left: 43.2%; top: 83.05%; width: 25.0%; height: 2.1%; }
.hotspot--footer-cta { left: 40.3%; top: 95.8%; width: 34.5%; height: 2.1%; }
.landmark { position: absolute; left: 0; width: 100%; pointer-events: none; }
.landmark--inicio { top: 0; height: .1%; }
.landmark--who { top: 22%; height: .1%; }
.landmark--method { top: 30%; height: .1%; }
.landmark--proof { top: 69%; height: .1%; }
.landmark--offer { top: 80%; height: .1%; }
.faq-controls { top: 86.8%; height: 6.1%; bottom: auto; pointer-events: none; }
.faq-controls button { position: absolute; pointer-events: auto; opacity: 0; cursor: pointer; border: 0; background: transparent; }
.faq-controls button:focus-visible { opacity: .16; outline: 2px solid #ffc84c; }
.faq-controls button:nth-child(1), .faq-controls button:nth-child(2), .faq-controls button:nth-child(3) { left: 28%; width: 32%; height: 31%; }
.faq-controls button:nth-child(4), .faq-controls button:nth-child(5), .faq-controls button:nth-child(6) { left: 63%; width: 32%; height: 31%; }
.faq-controls button:nth-child(1), .faq-controls button:nth-child(4) { top: 0; }
.faq-controls button:nth-child(2), .faq-controls button:nth-child(5) { top: 34%; }
.faq-controls button:nth-child(3), .faq-controls button:nth-child(6) { top: 68%; }
@media (max-width: 540px) {
  .landing { width: 100%; }
  .hotspot:focus-visible { outline: 2px solid #ffc84c; }
}