/* Sub-pages (/creators, /advertisers, /sound-me-by-the-numbers): the homepage's lower sections, without the story. */
html.subpage-root, body.subpage { background: #fff; }
body.subpage { color: var(--ink); }
body.subpage #after { z-index: auto; }
body.subpage #after > .sec:first-child { border-radius: 0; box-shadow: none; }
body.subpage #hdr { pointer-events: none; }
body.subpage .hdr-nav, body.subpage .hdr-right, body.subpage .menu-btn, body.subpage .hdr-cta { pointer-events: auto; }
body.subpage .menu-btn { opacity: .85 !important; }
body.subpage .hdr-nav { transform: translateX(calc(29 * var(--hu, 1px))); }
body.subpage .hdr-nav > a:not(.lead) { opacity: .92 !important; visibility: visible !important; }
body.subpage.is-compact .hdr-nav > a:not(.lead) { display: none; }
body.subpage .hdr-cta { display: none; }
html.is-portrait body.subpage .hdr-cta { display: flex; }
html.is-portrait body.subpage .hdr-nav { transform: none; }

.page-hero { padding-top: clamp(120px, 14vw, 190px); }
.page-hero .big { font-size: clamp(38px, 4.9vw, 76px); }
.eyebrow-l { font-size: 14px; font-weight: 600; letter-spacing: .01em; opacity: .7; margin-bottom: 18px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-art { position: relative; display: flex; justify-content: center; }
.hero-art .ph-hero { width: min(100%, 340px); height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .3)); transform: rotate(-4deg); }
.hero-art-web img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.page-hero .btn.store-btn { background: #fff; color: var(--ink); }
.page-hero .btn.store-btn > span:first-child svg { fill: var(--ink); }
.page-hero.navy .btn.store-btn, .page-hero.purple .btn.store-btn { background: #fff; color: var(--ink); }

.steps-5 { grid-template-columns: repeat(5, 1fr); }
.st.ink { background: var(--ink); color: #fff; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; }
.why { border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; color: var(--ink); }
.why:nth-child(1) { background: var(--orange); color: #fff; } .why:nth-child(2) { background: var(--pink); } .why:nth-child(3) { background: var(--yellow); } .why:nth-child(4) { background: var(--purple); color: #fff; }
.why b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.why span { font-size: 15px; line-height: 1.45; opacity: .8; }
.press-dark { margin-top: clamp(56px, 7vw, 96px); }
.press-dark .press-logos img { filter: brightness(0) invert(1); opacity: .85; mix-blend-mode: normal; }
.glance { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 16px; }
.glance th, .glance td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid #e7e7ec; vertical-align: top; line-height: 1.4; }
.glance th { width: 30%; font-weight: 600; color: #6b6b76; }
.cta-band { text-align: center; }
.cta-band .ctas { justify-content: center; }
.cta-band .subtle a { text-decoration: underline; text-underline-offset: 3px; }
.qa-a p { font-size: 16.5px; line-height: 1.55; font-weight: 500; opacity: .8; padding: 0 56px 18px 0; }
.qa-a p:last-child { padding-bottom: 24px; }

@media (max-width: 1060px) {
  .hero-grid, .why-grid { grid-template-columns: 1fr; }
  .steps-5 { grid-template-columns: 1fr 1fr; }
  .hero-art { order: -1; }
  .hero-art .ph-hero { width: min(70%, 300px); }
}
/* creators page: three phones side by side instead of a pile */
.earn-art.spread .ph { width: 31%; top: 10%; }
.earn-art.spread .ph-1 { left: 0; top: 18%; } .earn-art.spread .ph-2 { left: 34.5%; width: 31%; top: 4%; } .earn-art.spread .ph-3 { right: 0; top: 18%; }
@media (max-width: 640px) {
  .steps-5 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 4px 16px 18px; margin: 0 -16px; -webkit-overflow-scrolling: touch; }
  .steps-5 > li { flex: 0 0 78vw; scroll-snap-align: start; }
  .glance th { width: 40%; }
  .qa-a p { padding-right: 0; }
}

/* ---------- scroll story hero (sub-pages) ---------- */
.sh { position: relative; height: 320vh; }
.sh-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--navy); color: var(--white); }
.sh.light .sh-stage { background: var(--light); color: var(--ink); }
/* the homepage's own mascot (js/mascot1.js): 1em = 1 video px, like #stage */
.sh-m1 { font-size: var(--u); background: var(--sh, var(--purple)); z-index: 1; }
.sh-copy { position: absolute; left: 0; right: 0; top: 18vh; text-align: center; padding: 0 clamp(16px, 4vw, 56px); z-index: 2; will-change: transform, opacity; }
.sh-copy .eyebrow-l { margin-bottom: 14px; }
.sh-copy h1 { font-size: clamp(38px, 5.6vw, 88px); font-weight: 600; letter-spacing: -.052em; line-height: .96; max-width: 14em; margin: 0 auto; }
.sh-copy .lede { margin: 20px auto 0; max-width: 34em; }
.sh-shot { position: absolute; left: 50%; top: 10vh; width: min(92vw, 1180px); transform: translate(-50%, 40%) scale(.55); transform-origin: 50% 20%; opacity: 0; z-index: 3; will-change: transform, opacity; }
.sh-shot img { display: block; width: 100%; height: auto; border-radius: clamp(16px, 2vw, 26px); box-shadow: 0 40px 100px rgba(0, 0, 0, .35); }
.sh-shot.phone { width: min(38vw, 330px); top: 8vh; transform-origin: 50% 0; }
.sh-shot.phone img { border-radius: 12.8% / 6%; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); } /* phone-shaped shadow; drop-shadow filters show a tinted box in Safari */
.sh-cta { position: absolute; left: 0; right: 0; bottom: 6vh; display: flex; justify-content: center; gap: 12px; z-index: 4; opacity: 0; pointer-events: none; }
.sh-cta .btn.store-btn { background: #fff; color: var(--ink); }
.sh-cta .btn.store-btn > span:first-child svg { fill: var(--ink); }
.sh-filled .sh-stage { color: #fff; }
/* /advertisers: "Activate 3M+ creators" flies in over the orange, then swells through the screen and dissolves into white */
.sh-zoom { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 0 16px; text-align: center; pointer-events: none; }
.sh-zoom p { color: #fff; }
.sh-zoom .zf { font-style: normal; }
.sh-zoom .z1 { display: block; font-size: clamp(28px, 4.2vw, 64px); font-weight: 600; letter-spacing: -.045em; line-height: 1; opacity: 0; will-change: transform, opacity; }
.sh-zoom .z2 { position: relative; display: block; margin-top: .12em; font-size: clamp(46px, 8vw, 132px); font-weight: 600; letter-spacing: -.055em; line-height: .92; color: var(--navy); opacity: 0; transform-origin: 50% 55%; will-change: transform, opacity, color; }
.sh-white { position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
.sh-zoomv .sh-cta { z-index: 6; }
.sh-zoomv .sh-cta .btn.solid { background: var(--ink); color: #fff; } /* orange on the orange screen disappears */
/* /creators: the phone fades away and the download buttons take the middle of the screen */
.sh-app .sh-shot.phone { width: min(46vw, 430px); top: 6vh; } /* bigger phone (Alex 09-28) */
@media (max-width: 640px) { .sh-app .sh-shot.phone { width: min(80vw, 360px); } }
.sh-app .sh-cta { top: 50%; bottom: auto; flex-direction: column; align-items: center; gap: clamp(20px, 2.4vw, 32px); text-align: center; padding: 0 16px; }
.sh-cta-h { font-size: clamp(44px, 7vw, 110px); font-weight: 600; letter-spacing: -.055em; line-height: .92; color: #fff; }
.sh-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.sh-app .sh-cta .btn.store-btn { height: 68px; padding: 0 28px 0 22px; }
.sh-app .sh-cta .btn.store-btn > span:last-child { font-size: 20px; }
.sh-app .sh-cta .btn.store-btn > span:first-child svg { width: 28px; height: 28px; }
@media (max-width: 640px) { .sh { height: 260vh; } .sh-shot.phone { width: min(70vw, 300px); } }
@media (prefers-reduced-motion: reduce) { .sh { height: auto; } .sh-stage { position: relative; height: auto; padding: 140px 0 80px; } .sh-m1, .sh-white { display: none; } .sh-zoom { position: static; } .sh-zoom .z1, .sh-zoom .z2 { opacity: 1; } .sh-copy { position: static; } .sh-shot, .sh-cta { position: static; opacity: 1; transform: none; margin: 30px auto 0; } }

html.is-compact body.subpage .hdr-nav { pointer-events: none; }   /* compact: don't cover the ☰ */