:root { color-scheme: light; --cream: #fff9f3; --navy: #052b63; --orange: #ff5208; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--cream); }
body { display: flex; justify-content: center; font-family: Arial, sans-serif; }
.page { position: relative; width: min(100vw, 1024px); aspect-ratio: 2 / 3; background: var(--cream); overflow: hidden; }
.art { display: block; width: 100%; height: 100%; object-fit: fill; }
.hotspot { position: absolute; display: block; border: 0; background: transparent; cursor: pointer; color: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hotspot:focus-visible { outline: 4px solid var(--orange); outline-offset: -4px; border-radius: 18px; }
.home-feeding { left: 7%; top: 54.2%; width: 41.5%; height: 17.6%; }
.home-usage { left: 51.3%; top: 54.2%; width: 41.5%; height: 17.6%; }
.home-faqs { left: 7%; top: 73%; width: 41.5%; height: 15.6%; }
.home-support { left: 51.3%; top: 73%; width: 41.5%; height: 15.6%; }
.back { left: 1.5%; top: 1%; width: 10%; height: 8%; }
.feeding-usage { left: 4%; top: 79.3%; width: 45%; height: 9%; }
.feeding-faqs { left: 51%; top: 79.3%; width: 45%; height: 9%; }
.feeding-support { left: 4%; top: 88.4%; width: 92%; height: 9%; }
.usage-feeding { left: 3.5%; top: 80.5%; width: 45%; height: 8.4%; }
.usage-faqs { left: 51%; top: 80.5%; width: 45%; height: 8.4%; }
.usage-support { left: 3.5%; top: 89.2%; width: 92.5%; height: 8.2%; }
.faqs-feeding { left: 4.5%; top: 80.2%; width: 44.5%; height: 8.4%; }
.faqs-usage { left: 50%; top: 80.2%; width: 45%; height: 8.4%; }
.faqs-support { left: 4.5%; top: 89%; width: 90.5%; height: 8.4%; }
.faq-trigger { left: 5.8%; width: 88.5%; height: 8.7%; z-index: 2; }
.faq-1 { top: 21.7%; }
.faq-2 { top: 31%; }
.faq-3 { top: 40.4%; }
.faq-4 { top: 49.4%; }
.faq-answer { position: absolute; z-index: 10; left: 6%; top: 23%; width: 88%; min-height: 30%; padding: 6.5% 7% 7%; border: 1px solid #f2d8c3; border-radius: 4%; background: rgb(255 250 246 / 97%); box-shadow: 0 14px 45px rgb(5 43 99 / 20%); color: var(--navy); }
.faq-answer[hidden] { display: none; }
.faq-answer h2 { margin: 0 9% 5% 0; font-size: clamp(18px, 4.2vw, 40px); line-height: 1.15; }
.faq-answer p { margin: 0; font-size: clamp(16px, 3.7vw, 34px); line-height: 1.42; }
.faq-close { position: absolute; right: 4%; top: 4%; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffd1a8; color: var(--navy); font-size: 30px; line-height: 1; cursor: pointer; }
.support-email { left: 35%; top: 51.2%; width: 51%; height: 6.5%; }
.support-usage { left: 4.5%; top: 86.3%; width: 44.5%; height: 7.3%; }
.support-faqs { left: 50.5%; top: 86.3%; width: 44.5%; height: 7.3%; }
.support-home { left: 4.5%; top: 93.6%; width: 90.5%; height: 5.8%; }
@media (min-width: 1025px) { body { padding: 24px 0; } .page { box-shadow: 0 14px 50px rgb(5 43 99 / 14%); } }
@media (prefers-reduced-motion: no-preference) { .hotspot:active { background: rgb(255 82 8 / 8%); } }