/* Variant B — "The pouch is the page": coral band, cream body, the snout face, scalloped seals. */

:root { --ink-deep: #0A2F25; --bg: var(--cream); --field: #DC5F53; --field-ink: #2B100C; }

.announce { background: var(--coral-deep); color: #fff; }
.announce-dot { background: #fff; }
.site-header.on-coral { background: var(--field); border-bottom: 0; backdrop-filter: none; }
.on-coral .wordmark { color: #FFF7EE; }
.on-coral .header-nav a, .on-coral .cart-btn { color: var(--field-ink); }
.on-coral .cart-count { background: var(--green); }

/* ---------- hero: the top of the pouch ---------- */
.pb-hero { position: relative; background: var(--cream); padding-bottom: 8px; }
.pb-band {
  background: var(--field); color: #FFF7EE; text-align: center;
  padding: 18px var(--gutter) 120px;
  clip-path: ellipse(140% 100% at 50% 0%);
}
.pb-title { font: 700 clamp(3.4rem, 2rem + 8vw, 7rem)/0.92 var(--display); letter-spacing: -0.02em; color: #FFF7EE; }
.pb-face { width: min(70vw, 340px); margin: -92px auto 0; position: relative; z-index: 2; }
.pb-face .snout { width: 100%; }
.pb-seal { position: absolute; z-index: 3; right: max(8px, calc(50% - 290px)); top: auto; bottom: 64px; width: 104px; height: 104px; color: var(--coral-deep); transform: rotate(10deg); animation: seal-in 0.8s var(--ease) 0.3s both; }
.pb-seal .seal-text { font-size: 0.85rem; }
@keyframes seal-in { from { transform: rotate(-30deg) scale(0.4); opacity: 0; } to { transform: rotate(10deg); opacity: 1; } }
@media (min-width: 900px) {
  .pb-band { padding: 34px var(--gutter) 150px; }
  .pb-face { margin-top: -120px; }
  .pb-seal { width: 140px; height: 140px; bottom: 30px; }
  .pb-seal .seal-text { font-size: 1.05rem; }
}

/* ---------- buy area ---------- */
.pdp { padding-top: 24px; }
.g-track, .g-slide { background: #fff; }
.pdp-title { font-weight: 700; color: var(--green); }
.pack-icons { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.25; }
.pack-icons li { display: grid; justify-items: center; gap: 8px; padding: 0 6px; }
.pack-icons li + li { border-left: 1.5px solid var(--line); }
.pack-icons .icon { width: 44px; height: 44px; padding: 9px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--green); }
.plan-body, .qty-body { border-radius: 999px; }
.plan-body { border-radius: 22px; }
.qty-body { border-radius: 18px; }
.btn-atc { --b-bg: var(--coral-deep); }

/* ---------- coral field with waves ---------- */
.wave { height: 40px; background: var(--field); }
.wave-down { -webkit-mask: radial-gradient(28px 22px at 50% 0, #0000 98%, #000) 0 0 / 56px 100% repeat-x; mask: radial-gradient(28px 22px at 50% 0, #0000 98%, #000) 0 0 / 56px 100% repeat-x; }
.wave-up { -webkit-mask: radial-gradient(28px 22px at 50% 100%, #0000 98%, #000) 0 0 / 56px 100% repeat-x; mask: radial-gradient(28px 22px at 50% 100%, #0000 98%, #000) 0 0 / 56px 100% repeat-x; }
.pb-coral { background: var(--field); color: var(--field-ink); padding-block: 40px; }
.pb-problem { text-align: center; }
.pb-problem .h2 { color: #FFF7EE; max-width: 16ch; margin-inline: auto; font-weight: 700; }
.pb-problem p { max-width: 56ch; margin: 18px auto 0; font-size: 1.0625rem; }
.pb-anchor { display: inline-block; margin: 26px auto 18px; padding: 18px 22px; border-radius: 22px; background: var(--cream); color: var(--ink-deep); font-size: 1.0625rem; line-height: 1.6; }
.pb-anchor strong { white-space: nowrap; }
.pb-coral .footnote { color: var(--field-ink); margin-inline: auto; }

/* ---------- how ---------- */
.how { padding-block: 64px; }
.how .h2 { text-align: center; }
.pb-steps { list-style: none; padding: 0; margin: 32px 0; display: grid; gap: 26px; text-align: center; }
.pb-steps li { display: grid; justify-items: center; gap: 8px; }
.pb-step-seal { width: 72px; height: 72px; color: var(--coral-deep); }
.pb-step-seal .seal-text { font-size: 1.1rem; }
.pb-steps h3 { font-size: 1.6rem; }
.pb-steps p { margin: 0; color: var(--muted); max-width: 30ch; }
.pb-how-photo { margin: 0 auto; max-width: 420px; border-radius: 200px 200px var(--r-lg) var(--r-lg); overflow: hidden; }
@media (min-width: 900px) { .pb-steps { grid-template-columns: repeat(3, 1fr); } }

.compare-sec .h2, .faq .h2 { color: var(--green); }
.compare .is-us { background: #fff; }
.compare thead .is-us { background: var(--field); color: #FFF7EE; }

/* ---------- close ---------- */
.pb-close { background: var(--field); padding-block: 36px 0; text-align: center; overflow: hidden; }
.pb-close-title { font: 700 clamp(2.4rem, 1.6rem + 4vw, 4.6rem)/0.95 var(--display); color: #FFF7EE; max-width: 14ch; margin: 0 auto 26px; }
.btn-cream { --b-bg: #FFF7EE; --b-fg: var(--green); }
.pb-face-small { width: 220px; margin: 34px auto 0; padding-bottom: 28px; }
.site-footer.on-coral { background: var(--green); }

/* QA 03/10: keep the how-it-works photo in proportion on phones */
@media (max-width: 899px) {
  .pb-how-photo { max-width: 300px; }
  .how { padding-bottom: 40px; }
}