/* ==========================================================
   NEW SECTIONS (Oct 2026 content update)
   Built only from the original tokens: --cherry, --orange, --sky,
   --cream, Outfit / Kalam / Montserrat, --radius, --gutter, --max.
   ========================================================== */

/* Hero: secondary button + 0g sticker */
.hero .btn + .btn { margin-left: 10px; }
.btn.line { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn.line:hover { background: var(--cream); color: var(--cherry); }
.hero-can { position: relative; }
.zero {
  position: absolute; right: 0; bottom: -24px; width: clamp(104px, 14vw, 140px); height: auto;
  transform: rotate(12deg);
}
.zero .ring { animation: spin 18s linear infinite; transform-origin: 70px 70px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Trade-off */
.tradeoff .pillar h3 { font-size: 1.7rem; }
.tradeoff h2 { font-size: clamp(2rem, 5.5vw, 3.2rem); }

/* Bio */
.bio h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.2; }
.bio mark { color: var(--cherry); padding: 0 6px; border-radius: 6px; }
.bio mark.o { background: var(--orange); }
.bio mark.s { background: var(--sky); }
.more { font-weight: 700; }

/* Join heading */
.join h2 em { font-style: normal; color: var(--orange); display: block; }

/* Promo cards */
.promos { background: var(--sky); }
.promo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.promo {
  display: flex; align-items: center; gap: 20px; text-decoration: none;
  border: 2px solid var(--cherry); border-radius: var(--radius); padding: clamp(22px, 4vw, 34px);
  transition: transform .15s ease;
}
.promo:hover { transform: translateY(-2px); }
.promo.music { background: var(--cherry); color: var(--cream); }
.promo.store { background: var(--orange); color: var(--cherry); }
.promo .pt { display: block; font-family: var(--font-head); font-weight: 900; font-size: 1.9rem; line-height: 1.05; letter-spacing: 0.02em; }
.promo .ps { display: block; font-family: var(--font-sub); font-weight: 700; font-size: 1.2rem; margin-top: 4px; }
.promo svg { flex: 0 0 auto; }

/* Retailer page */
.r-hero h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); }
.specs { background: var(--sky); }
.specs h2, .why h2, .s-sec h2 { font-size: clamp(2rem, 5.5vw, 3.2rem); }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 32px; }
.spec { background: var(--cream); border: 2px solid var(--cherry); border-radius: var(--radius); padding: 22px 24px; }
.spec .k { font-family: var(--font-sub); font-weight: 700; font-size: 1.25rem; margin: 0 0 4px; }
.spec .v { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; line-height: 1.2; letter-spacing: 0.02em; margin: 0; }
.steps { margin: 12px 0 0; padding-left: 22px; font-weight: 500; }
.steps li { margin-bottom: 6px; }
.field select {
  width: 100%; padding: 14px 16px; border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem;
  border: 2px solid var(--cherry); background: var(--cream); color: var(--cherry);
}

/* Backed by */
.backed { background: var(--cherry); color: var(--cream); }
.backed .eyebrow { color: var(--sky); }
.backed h2 { font-size: clamp(2rem, 5.5vw, 3.2rem); }
.backed .spec { background: var(--cream); color: var(--cherry); }

/* Footer: Sky mö logomark pattern on Cherry (guideline hexes only) */
footer.mo-foot {
  background: #6d0101 url('assets/logomark-sky.svg') repeat left top / 25% auto;
}
.mo-foot .wrap { padding-top: clamp(48px, 8vw, 96px); padding-bottom: 8px; }
.mo-foot img.f-logo { width: min(900px, 92%); margin: 0 auto clamp(28px, 4vw, 44px); }
.mo-foot .f-line { display: inline-block; background: #6d0101; color: #fcf4f1; padding: 8px 22px; border-radius: 999px; margin: 0; }
.mo-foot .copy { display: table; margin: 12px auto 0; background: #6d0101; padding: 4px 14px; border-radius: 999px; opacity: 1; color: #fcf4f1; }

/* Story page */
.photo.has-sticker { position: relative; }
/* Video + sticker column (all screen sizes) */
#problem .story-grid { grid-template-columns: 1.6fr 1fr; align-items: center; }
.problem-left h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.photo-row { display: flex; align-items: stretch; gap: clamp(12px, 3vw, 36px); }
.photo-row .photo { flex: 0 0 67%; min-width: 0; align-self: flex-start; }
.side-stickers { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: space-around; padding: 2% 0 8%; }
.side-stickers img { height: auto; }
.side-stickers .ss-1 { width: min(100%, 240px); align-self: flex-end; transform: rotate(8deg); }
.side-stickers .ss-3 { width: min(88%, 210px); align-self: center; transform: rotate(-6deg); }
@media (max-width: 760px) {
  #problem .story-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .photo-row .photo { flex: 0 0 67%; }
  .story .photo img.vid-sticker { width: 92px; right: -10px; bottom: -16px; }
}
.story .photo img.vid-sticker { position: absolute; border-radius: 0; right: -28px; bottom: -30px; width: clamp(130px, 15vw, 175px); height: auto; transform: rotate(-10deg); filter: drop-shadow(0 4px 0 rgba(109,1,1,.18)); }
.story .photo video.boomerang { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); display: block; background: var(--sky); }
.s-hero { padding-bottom: clamp(40px, 7vw, 72px); text-align: center; }
.s-hero h1 { font-size: clamp(2.5rem, 7vw, 4.7rem); }
.s-hero .tagline { margin-top: 0; }
.num { font-family: var(--font-sub); font-weight: 700; font-size: 1.35rem; margin: 0 0 6px; }
.facts { display: grid; gap: 16px; margin-top: 32px; }
.facts div { border: 2px solid var(--cream); border-radius: var(--radius); padding: 20px 22px; }
.facts h3 { color: var(--cream); margin-bottom: 4px; }
.facts p { margin: 0; }
.board .num { color: var(--sky); }
.s-end { text-align: center; }
.s-end .join-card { margin: 0 auto; }

@media (max-width: 560px) {
  .hero .btn + .btn { margin-left: 0; margin-top: 10px; }
  .zero { right: 12px; }
  footer.mo-foot { background-size: 50% auto; }
  .story .photo img.vid-sticker { right: -8px; bottom: -18px; width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .zero .ring { animation: none; }
  .promo { transition: none; }
}