/* ══════════════════════════════════════════════════
   Policy pages — shared styles
   Used by /terms/, /privacy/, /accessibility/, /returns/, /faqs/
   Figma: Updates_08-21-26_Web → FooterLink_* frames (1440 wide).
   Type comes from the global scale in styles.css; only layout lives here.
   ══════════════════════════════════════════════════ */

html, body {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  background: var(--color-bg);
}
body::-webkit-scrollbar { display: none; }

@media (max-width: 1140px) and (min-width: 769px) {
  html { font-size: 1.4035vw !important; }
}

.page {
  /* Clear the wave overlap at the bottom of the scroll */
  padding-bottom: calc(var(--wave-height-desktop) + var(--space-xl));
}

.policy-page .h1 {
  width: var(--content-width);
  margin-bottom: 1.875rem;              /* Figma: H1 bottom 138 → body 168 */
}

/* ── Body copy ─────────────────────────────────── */
.policy {
  width: var(--content-width);
  font-family: var(--font-body);
  font-size: 1rem;                      /* 16px — smaller than --type-b1 (18px) for long policy copy */
  line-height: var(--leading-b1);
  font-weight: 400;
  color: var(--color-ink);
}
.policy p { margin-bottom: 0.5rem; }
.policy .h2 {
  margin-top: 1.875rem;                 /* Figma: 30px between sections */
  margin-bottom: 0.625rem;              /* Figma: H2 bottom → body 10px */
}
.policy ul {
  list-style: disc;
  padding-left: 1.25em;
  margin-bottom: 0.5rem;
}
.policy li { margin-bottom: 0.25rem; }
.policy strong { font-weight: 700; }
.policy em { font-style: italic; }
.policy a {
  color: var(--color-blue);
  font-weight: 700;
  text-decoration: none;
}
.policy a:hover { text-decoration: underline; }

.policy .policy-updated {
  margin-top: 3.75rem;                  /* Figma: 60px above "Last Updated" */
  margin-bottom: 0;
  font-style: italic;
}

/* ── FAQ accordion (Contact Us & FAQs) ─────────── */
.faq-list {
  border-top: 1px solid var(--color-ink);
  margin-bottom: 0.5rem;
}
.faq {
  border-bottom: 1px solid var(--color-ink);
}
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8125rem 0;                 /* Figma: 53px row pitch, 27px line */
  font-family: var(--font-ui);
  font-size: var(--type-nav);
  line-height: var(--leading-nav);
  font-weight: 400;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' 400;
  color: var(--color-ink);
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 0.75rem;
  transition: transform 0.18s ease;
}
.faq[open] summary {
  font-weight: 700;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' 700;
}
.faq[open] summary svg { transform: rotate(180deg); }
.faq summary:hover { color: var(--color-blue); }
.faq-answer { padding-bottom: 0.8125rem; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ── Monster wave ──────────────────────────────── */
#monster-group {
  position: absolute;
  bottom: var(--footer-panel-height);
  left: 0;
  width: 100%;
  z-index: 5;
  transform: translateY(250px);
  will-change: transform;
}
#monster-group.popped-up {
  transform: translateY(0);
  transition: transform 1800ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 1.1s;
}
.monster-area {
  position: relative;
  width: 100%;
  height: var(--wave-height-desktop);
}
.monster-area img.wave {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}
.monster-eyes-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ── Mobile (<=768px) ──────────────────────────────
   Figma: Updates_08-21-26_Mobile → FooterLink_PrivacyPolicy (440 wide) */
@media (max-width: 768px) {
  .page {
    padding-right: var(--content-left);
    /* Figma: 60px above monster (+2px: the wave overlaps the footer by 2px) */
    padding-bottom: calc(var(--wave-height-mobile) + 3.875rem);
  }
  .policy-page .h1 {
    margin-bottom: 1.25rem;             /* Figma: H1 bottom 189 → body 209 */
  }
  .policy .h2 {
    margin-top: 1.25rem;                /* Figma: 20px between sections */
  }
  .policy .policy-updated {
    margin-top: 2.5rem;                 /* Figma: 40px above "Last Updated" */
  }
}