/* ==========================================================================
   Playlist Push — main stylesheet
   ========================================================================== */

/* ---- Fonts (self-hosted, woff2) ----
   Geist is a variable font: this single file carries every weight the site uses
   (300-700), so the five separate Euclid files became one request. */
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Only the review author names use this, and only in Latin/Cyrillic, so the
   file is subset to those ranges. */
@font-face {
  font-family: 'Caveat';
  src: url('../assets/fonts/Caveat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --navy: #0f2240;
  --navy-2: #102240;
  --red: #e85154;
  --salmon: #e37577;
  --teal: #00f2ea;
  --blue-hl: #4256e8;
  --gray-bg: #f2f3f6;
  --gray-line: #d8dfe9;
  --muted: #a7b1c1;
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* --red is tuned for white backgrounds; this is the same accent lifted so it
     stays legible on the navy surfaces (mega panel, dark sections). */
  --red-on-dark: #ff7a6e;
  --container: 1140px;
  --shadow-card: 0 20px 50px -20px rgba(15, 34, 64, .25);
  /* normalized card radii: small for images/tiles, medium for card surfaces */
  --r-sm: 12px;
  --r-md: 20px;
  /* Height of the promo banner (weekend-discount.js) while one is showing, 0
     otherwise. The banner is fixed at the top of the viewport, so everything
     else pinned to the top has to be pushed down by exactly this much — the
     header and the mobile menu panel are position: fixed and would otherwise
     sit *behind* it no matter how much padding the body carries. */
  --promo-banner-h: 0px;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
/* No scroll-behavior or overflow overrides on the root — the document keeps the
   browser's own native scrolling, with html as the single scroll container. */
body {
  margin: 0;
  padding-top: var(--promo-banner-h);
  transition: padding-top .5s ease;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  color: #000;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
.container.center {
  text-align: center;
}

/* Slanted section trick (same technique as the original site).
   overflow-x: clip trims the oversized rotated decoration at the section edges
   so it never adds horizontal page scroll, while overflow-y stays visible so the
   diagonal can still bleed into the neighbouring sections. `clip` (not `hidden`)
   is important: it does not create a scroll container. */
.slant {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  z-index: 1;
}
.slant::before {
  content: "";
  position: absolute;
  width: 200%;
  height: calc(100% + 140px);
  top: -70px;
  left: -50%;
  z-index: -1;
  background-color: inherit;
  transform: rotate(175deg);
}
.slant > .container { position: relative; z-index: 1; }

/* ---- Buttons & links ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 200px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(.99); }
.btn .arrow { width: 18px; height: 18px; flex: none; }
.btn-red { background: var(--red); box-shadow: 0 10px 24px -10px rgba(232, 81, 84, .6); }
.btn-red:hover { background: #ef5d60; }
.btn-black { background: #000; }
.btn-ghost { background: rgba(0, 0, 0, .16); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(0, 0, 0, .28); }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
}
.link-more .arrow { width: 18px; height: 18px; transition: transform .25s ease; }
.link-more:hover .arrow { transform: translateX(4px); }
.link-more.down .arrow { transform: rotate(90deg); }
.link-more.down:hover .arrow { transform: rotate(90deg) translateX(4px); }
.link-more.on-dark { color: #fff; }

.arrow { display: inline-flex; }
.arrow svg { width: 100%; height: 100%; }

/* ---- Section headings ---- */
.eyebrow {
  color: var(--salmon);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  margin-bottom: 12px;
}
.section-title {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.12;
  margin: 10px 0;
  letter-spacing: -.01em;
}
.section-title.small { font-size: 33px; line-height: 1.2; }

/* ==========================================================================
   Header / navigation (new menu)
   ========================================================================== */
.site-header {
  position: fixed;
  top: var(--promo-banner-h);
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, top .5s ease;
  color: #fff;
}
.site-header.scrolled {
  background: rgba(15, 34, 64, .88);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, .35);
}
.nav-row {
  position: relative; /* anchors the full-width mega panel */
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: 76px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 30px; width: auto; }
/* dark wordmark only while a light hero sits behind the un-scrolled header */
.brand .logo-on-light { display: none; }
.page-light .site-header:not(.scrolled) .logo-on-light { display: block; }
.page-light .site-header:not(.scrolled) .logo-on-dark { display: none; }

/* Stretched to the full 76px row so the mega group can be stretched too — see
   .nav-mega-group. The links inside stay vertically centred. */
.nav-links { display: flex; align-items: center; align-self: stretch; gap: 6px; margin-left: 12px; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 100px;
  font-size: 15.5px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.nav-link:hover { background: rgba(255, 255, 255, .12); }
.nav-link .caret { width: 14px; height: 14px; }

/* Unified mega dropdown — one dark two-pane panel shared by the
   Music Promotion / For Creators / Pricing triggers. The rail on the left is
   the index; the trigger you hover (or the rail tab you pick) swaps the pane
   on the right. `data-active` on .nav-mega-group is the single source of
   truth, set server-side so the panel still works without JS. */
/* Full row height, not just the height of the pills. The panel hangs off the
   bottom of the 76px row, so a group sized to its triggers leaves a ~17px band
   under them that is neither the group nor the panel: crossing it on the way
   down dropped :hover and the panel flickered shut. Stretching closes it, and
   .mega-panel's 8px padding-top bridges the rest. */
.nav-mega-group { display: flex; align-items: center; align-self: stretch; }
.mega-panel {
  position: absolute;
  top: 100%;
  left: 24px;
  right: 24px;
  padding-top: 8px;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-mega-group:hover .mega-panel,
.nav-mega-group:focus-within .mega-panel,
.nav-mega-group.open .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Only the trigger whose pane is showing stays lit while open. The caret is
   static — it never flips. */
.nav-mega-group:is(:hover, :focus-within, .open)[data-active="promotion"] .trigger[data-mega="promotion"],
.nav-mega-group:is(:hover, :focus-within, .open)[data-active="creators"] .trigger[data-mega="creators"],
.nav-mega-group:is(:hover, :focus-within, .open)[data-active="pricing"] .trigger[data-mega="pricing"] {
  background: rgba(255, 255, 255, .12);
}

.mp-inner {
  display: grid;
  grid-template-columns: 288px 1fr;
  background: #0b1830;
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 70px -14px rgba(11, 24, 48, .45);
  overflow: hidden;
}

/* Left rail */
.mp-rail {
  display: flex;
  flex-direction: column;
  padding: 24px 18px;
  background: rgba(255, 255, 255, .03);
  border-right: 1px solid rgba(255, 255, 255, .08);
}
.mp-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7c8fb0;
  padding: 0 12px 12px;
}
.mp-tabs { display: flex; flex-direction: column; gap: 4px; }
.mp-tab {
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  background: transparent;
  transition: background-color .18s ease;
}
.mp-tab:hover { background: rgba(255, 255, 255, .06); }
.mp-tab[aria-selected="true"] { background: rgba(255, 255, 255, .1); }
.mp-tab-title { display: block; font-size: 15.5px; font-weight: 600; color: #fff; }
.mp-tab-sub { display: block; font-size: 12.5px; color: #8fa3c4; margin-top: 2px; }
.mp-help {
  margin-top: auto;
  padding: 12px 14px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--red-on-dark);
  text-decoration: none;
  transition: color .18s ease;
}
.mp-help:hover { color: #fff; }
.mp-help .arrow { width: 15px; height: 15px; transition: transform .2s ease; }
.mp-help:hover .arrow { transform: translateX(3px); }

/* Right pane */
.mp-body { padding: 24px; }
.mp-pane { display: none; }
.nav-mega-group[data-active="promotion"] .mp-pane[data-pane="promotion"],
.nav-mega-group[data-active="creators"] .mp-pane[data-pane="creators"],
.nav-mega-group[data-active="pricing"] .mp-pane[data-pane="pricing"] { display: block; }

.mp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-card {
  display: flex;
  flex-direction: column;
  min-height: 196px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: background-color .18s ease, border-color .18s ease;
}
.mp-card:hover { background: #12213c; border-color: rgba(255, 255, 255, .2); }
.mp-card-head { display: flex; align-items: center; gap: 12px; }
.mp-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8fa3c4;
}
.mp-logo {
  margin-left: auto;
  flex: none;
  width: 26px;
  height: 26px;
  opacity: .85;
  transition: opacity .18s ease;
}
.mp-logo svg { display: block; width: 100%; height: 100%; }
.mp-logo.logo-spotify { color: #fff; }
.mp-logo.logo-tiktok { color: #fff; }
.mp-card:hover .mp-logo { opacity: 1; }
.mp-card-title {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  margin-top: 14px;
}
.mp-card-desc { font-size: 13.5px; line-height: 1.5; color: #9aaac5; margin-top: 7px; }
.mp-card-foot {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mp-card-foot.is-baseline { align-items: baseline; gap: 8px; }
.mp-chip {
  padding: 6px 11px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .09);
  color: #edf1f8;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mp-price { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.mp-price-note { font-size: 13px; color: #a9d9c3; }
.mp-go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--red-on-dark);
  white-space: nowrap;
}
.mp-go .arrow { width: 15px; height: 15px; transition: transform .2s ease; }
.mp-card:hover .mp-go .arrow { transform: translateX(3px); }
/* Pricing pane leads with the calculator, tinted in the Spotify green */
.mp-card.is-highlight { background: rgba(31, 211, 122, .1); border-color: rgba(31, 211, 122, .35); }
.mp-card.is-highlight:hover { background: rgba(31, 211, 122, .16); border-color: rgba(31, 211, 122, .5); }
.mp-card.is-highlight .mp-kicker { color: #5fe3a2; }
.mp-card.is-highlight .mp-card-desc { color: #a9d9c3; }

.mp-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 13.5px;
  color: #9aaac5;
}
.mp-foot-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 100px;
  background: var(--red);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease;
}
.mp-foot-cta:hover { background: #ff6a5f; }
.mp-foot-cta .arrow { width: 16px; height: 16px; transition: transform .2s ease; }
.mp-foot-cta:hover .arrow { transform: translateX(3px); }


.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-cta .btn { padding: 11px 20px; font-size: 15px; }

/* Mobile toggle */
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; z-index: 102; }
.nav-toggle span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, top .3s ease;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Mobile menu panel. The panel covers the viewport but sits *under* the header,
   so the logo and the close button stay visible and usable over it. */
.mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  /* Starts below the promo banner so the panel does not slide under it. */
  inset: var(--promo-banner-h) 0 0;
  z-index: 101;
  background: var(--navy);
  color: #fff;
  padding: 84px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.nav-open .mobile-menu { opacity: 1; visibility: visible; }
/* Only the link list scrolls, so "Get Started" and "Sign in" are reachable
   without scrolling even on a 4-inch screen. */
.mobile-menu .m-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Fades the cut-off edge so a clipped card reads as "scroll for more" rather
     than as a rendering fault. The matching padding lets the last row clear the
     fade once you reach the bottom. */
  padding-bottom: 24px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
}
/* The mega panel's cards, one-up and tightened for a phone. */
.mobile-menu .m-cards { display: grid; gap: 10px; }
.mobile-menu .m-card {
  min-height: 0;
  padding: 16px 18px;
  border-radius: 14px;
}
.mobile-menu .m-card .mp-card-title { font-size: 19px; margin-top: 10px; }
.mobile-menu .m-card .mp-card-desc { font-size: 13px; margin-top: 5px; }
.mobile-menu .m-card:active { background: #12213c; border-color: rgba(255, 255, 255, .2); }

/* Secondary destinations stay as rows — a card each would be noise. */
.mobile-menu .m-cards + .m-row { margin-top: 18px; }
.mobile-menu a.m-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  font-size: 16.5px;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mobile-menu a.m-row .arrow { width: 17px; height: 17px; color: #8fa3c4; }
.mobile-menu .m-ctas { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; }
.mobile-menu .m-ctas .btn { width: 100%; }
.mobile-menu .btn-ghost { background: rgba(255, 255, 255, .12); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background-image: linear-gradient(#455fb7, #71c3db);
  color: #fff;
  overflow: hidden;
  padding-top: 76px;
}
/* CSS-only "constellation" background (replaces particles.js) */
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.constellation {
  position: absolute;
  width: 480px;
  height: auto;
  animation: drift var(--dur, 46s) ease-in-out infinite alternate;
}
.constellation.c1 { top: 6%; left: -40px; --dur: 46s; }
.constellation.c2 { top: 30%; right: -60px; --dur: 58s; animation-delay: -20s; }
@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(14px, -18px) rotate(1.2deg); }
  100% { transform: translate(-10px, 12px) rotate(-1deg); }
}
.p-dot {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  opacity: .25;
  animation: dot-float var(--dur, 10s) ease-in-out infinite alternate;
}
@keyframes dot-float {
  0%   { transform: translate(0, 0); opacity: .15; }
  50%  { opacity: .35; }
  100% { transform: translate(10px, -22px); opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
  .constellation, .p-dot { animation: none; }
}

.hero-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.1fr minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  position: relative;
  min-height: 810px;
}
.hero-copy { position: relative; z-index: 2; padding: 60px 0; }
.hero h1 {
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0;
}
.hero h1 .accent { color: var(--teal); }
.hero .sub {
  margin: 20px 0 28px;
  max-width: 560px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}
.hero .ctas { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* Hero trust strip. Defaults to the light heroes (promotion pages); .on-dark is
   the navy homepage hero — same direction as .link-more.on-dark. */
.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 50px;
  text-decoration: none;
  color: #3c4a61;
  font-size: 14.5px;
}
.hero-trust:hover .trust-text { color: var(--navy); }
.trust-avatars { display: flex; }
.trust-avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  margin-right: -10px;
}
.trust-avatars img:last-child { margin-right: 0; }
.trust-stars { width: 92px; }
.trust-text strong { font-weight: 600; color: var(--navy); }

.hero-trust.on-dark { color: rgba(255, 255, 255, .9); }
.hero-trust.on-dark:hover .trust-text,
.hero-trust.on-dark .trust-text strong { color: #fff; }
.hero-trust.on-dark .trust-avatars img { border-color: rgba(255, 255, 255, .75); }

/* Hero visual: phones image + rotating playlist screen */
.hero-visual {
  position: relative;
  z-index: 1;
  width: 830px;
  max-width: none;
  justify-self: start;
  align-self: end;
  margin-bottom: -6px;
}
.hero-visual > img { 
  width: 100%;
  position: relative;
  z-index: 3;
}
.rotating-screen {
  position: absolute;
  top: 6.6%;
  left: 31.9%;
  width: 33.7%;
  height: 85.9%;
  border: 10px solid #f1f1f1;
  border-radius: 41px;
  overflow: hidden;
  background: #000;
  z-index: 2;
}
.phone-notch {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  transform: translate(-50%, -32%);
  width: 60%;
  text-align: center;
  background: #f1f1f1;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.phone-notch img { margin: 0 auto; width: 46px; padding: 4px 0; }

.playlist-slides { position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; }
.playlist-slides img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* border-radius: 15px; */
  transform: translateX(100%);
  opacity: 0;
  animation: slider-images 28s infinite;
}
@keyframes slider-images {
  0%   { transform: translateX(100%); opacity: 1; z-index: 10; }
  3%   { transform: translateX(0);    opacity: 1; z-index: 10; }
  14%  { transform: scale(1);         opacity: 1; z-index: 10; }
  18%  { transform: scale(.9);        opacity: 0; z-index: 1; }
  100% { transform: scale(1);         opacity: 0; z-index: -1; }
}
.playlist-slides img:nth-child(1) { animation-delay: 0s; }
.playlist-slides img:nth-child(2) { animation-delay: 4s; }
.playlist-slides img:nth-child(3) { animation-delay: 8s; }
.playlist-slides img:nth-child(4) { animation-delay: 12s; }
.playlist-slides img:nth-child(5) { animation-delay: 16s; }
.playlist-slides img:nth-child(6) { animation-delay: 20s; }
.playlist-slides img:nth-child(7) { animation-delay: 24s; }

/* ==========================================================================
   Featured in (press)
   ========================================================================== */
.press {
  background: var(--navy-2);
  color: #fff;
  padding: 50px 0 50px;
}
.press .press-label {
  color: var(--muted);
  text-align: center;
  font-weight: 500;
  font-size: 20px;
}
.press-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items: center;
  justify-items: center;
  margin-top: 40px;
}
.press-grid img {
  max-height: 40px;
  max-width: 85%;
  width: auto;
  opacity: .72;
  transition: opacity .25s ease, transform .25s ease;
}
.press-grid img:hover { opacity: 1; transform: translateY(-2px); }
.press-grid .invert { filter: invert(1); }

/* ==========================================================================
   Split feature sections
   ========================================================================== */
.feature {
  padding: 75px 0 75px;
}
.feature .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 53px;
  align-items: center;
}
.feature .copy .sub {
  margin: 20px 0 28px;
  font-size: 19px;
  line-height: 1.6;
  max-width: 520px;
  color: #3c4a61;
}
.actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* 3D playlist covers grid */
.covers-3d {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 440px;
  /* transform: perspective(2000px) scaleY(.9) perspective(1000px) translate(8%) skew(10deg, -5deg) rotateX(7deg) rotateY(7deg); */
  /* transform-style: preserve-3d; */
}
.covers-3d img {
  width: 100%;
  box-shadow: -21px 21px 20px rgba(0, 0, 0, .3);
  transition: transform .3s ease;
}
.covers-3d img:hover { transform: translateY(-6px) scale(1.03); }

/* ==========================================================================
   Curator card
   ========================================================================== */
.curator-stack {
  position: relative;
  max-width: 508px;
  margin: 0 auto;
}
.curator-stack .ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: var(--r-md);
  /* start hidden behind the card; fan out once the section scrolls into view */
  opacity: 0;
  transform: rotate(0deg) translate(0, 0) scale(.97);
  transition: transform 1s cubic-bezier(.22, .8, .3, 1), opacity 1s ease;
}
.in-view .curator-stack .ghost.g1 { opacity: .5; transform: rotate(-7deg) translate(-16px, 10px); transition-delay: .25s; }
.in-view .curator-stack .ghost.g2 { opacity: .25; transform: rotate(-14deg) translate(-30px, 24px); transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .curator-stack .ghost { transition: none; }
  .curator-stack .ghost.g1 { opacity: .5; transform: rotate(-7deg) translate(-16px, 10px); }
  .curator-stack .ghost.g2 { opacity: .25; transform: rotate(-14deg) translate(-30px, 24px); }
}
.curator-card { position: relative; width: 100%; filter: drop-shadow(0 30px 40px rgba(15, 34, 64, .18)); }
.curator-card > img { width: 100%; }

.curator-top {
  position: absolute;
  top: 8.5%;
  left: 5.5%;
  display: flex;
  align-items: flex-start;
}
.curator-top .avatar {
  width: 130px;
  height: 130px;
  border-radius: 100px;
  object-fit: cover;
  margin-right: 15px;
}
.curator-id .row { display: flex; align-items: center; gap: 8px; }
.curator-id .row img { width: 30px; height: 30px; }
.curator-id .tag { font-size: 13px; font-weight: 500; letter-spacing: .12em; color: #3c4a61; }
.curator-id .name { margin: 10px 0 5px 5px; font-size: 24px; font-weight: 500; }
.curator-id .stars-lottie { width: 120px; height: 28px; margin-left: 2px; }
.curator-id .tooltip { margin-top: 5px; margin-left: -13px; width: 180px; }

.curator-checks {
  position: absolute;
  top: 39.5%;
  left: 6.3%;
  width: 87%;
}
.curator-checks .check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gray-line);
  font-size: 18px;
}
.curator-checks .check-row:last-child { border-bottom: 0; }
.check-lottie { width: 38px; height: 38px; flex: none; }

/* ==========================================================================
   Stats rows
   ========================================================================== */
.stats-band {
  /* fades to transparent at both ends so it never covers the slanted section edges */
  background: linear-gradient(180deg, rgba(246, 248, 251, 0) 0%, #f6f8fb 42%, #f6f8fb 58%, rgba(246, 248, 251, 0) 100%);
}
.stats-band .stats-row { padding: 72px 0; }
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 80%;
  margin: 0 auto;
  padding: 40px 0 99px;
}
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stat .num { font-size: 55px; font-weight: 700; line-height: 1; color: var(--navy); }
.stat .label { text-transform: uppercase; margin-top: 10px; font-size: 15px; letter-spacing: .06em; color: #5b6778; }
.stats-row.on-dark { color: #fff; padding: 60px 0 20px; }
.stats-row.on-dark .stat .num { color: #fff; }
.stats-row.on-dark .stat .label { color: var(--muted); }

/* ==========================================================================
   TikTok section
   ========================================================================== */
.tiktok {
  background: var(--navy);
  color: #fff;
  padding: 90px 0 90px;
}
.tiktok .split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.tiktok-videos {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 30px 10px;
}
/* The clip wrapper carries the width and the pop, so the mock TikTok chrome
   scales with the video instead of floating off it. */
.tiktok-clip {
  position: relative;
  width: 33.33%;
  border-radius: var(--r-md);
  transition: all .3s ease-in-out;
  container-type: inline-size;
  /* Clips the video to the padding box, so its corners follow the *inner*
     curve of the white border when playing (20px - 5px) instead of keeping
     the outer 20px and leaving a gap in each corner. */
  overflow: hidden;
}
.tiktok-videos video {
  display: block;
  width: 100%;
}
.tiktok-clip.playing {
  transform: scale(1.3);
  border: 5px solid #f1f1f1;
  z-index: 5;
}

/* ---- Mock TikTok chrome ----
   Every size below is in em off .tt-ui's own font-size, and that font-size is
   in cqw — a share of the clip's width. One knob scales the whole rail, and it
   stays right at 160px in the desktop strip, at ~300px on tablet and through
   the 1.3x pop, with no breakpoint of its own. */
.tt-ui {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  font-size: 9cqw;
  color: #fff;
  /* Only the clip that is playing wears the chrome — three idle rails at once
     read as clutter, and it is the enlarged one that has room for it. Fades on
     the same .3s as the pop so the two land together. */
  opacity: 0;
  transition: opacity .3s ease-in-out;
}
.tiktok-clip.playing .tt-ui { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tt-ui { transition: none; }
}
/* Bright clips would swallow white icons; this keeps the bottom third readable
   without reading as a deliberate gradient. */
.tt-ui::before {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .34));
}
.tt-rail {
  position: absolute;
  right: .32em;
  bottom: .42em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .36em;
}
.tt-avatar {
  position: relative;
  width: 1.6em;
  height: 1.6em;
  margin-bottom: .12em;
  border: .09em solid #fff;
  border-radius: 50%;
  background-color: var(--navy);
  background-size: cover;
  /* the clips are 9:16 portraits, so the face sits high in the frame */
  background-position: 50% 22%;
}
.tt-follow {
  position: absolute;
  left: 50%;
  bottom: -.26em;
  display: grid;
  place-items: center;
  width: .52em;
  height: .52em;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fe2c55;
}
.tt-follow svg { width: .34em; height: .34em; color: #fff; }
.tt-act { display: block; text-align: center; }
.tt-act svg {
  display: block;
  width: 1.32em;
  height: 1.32em;
  margin: 0 auto;
  filter: drop-shadow(0 .04em .06em rgba(0, 0, 0, .35));
}
.tt-count {
  display: block;
  margin-top: .06em;
  font-size: .44em;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 .08em .16em rgba(0, 0, 0, .4);
}
.tt-disc {
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  margin-top: .18em;
  border-radius: 50%;
  background: #16171f;
}
.tt-disc svg { width: .86em; height: .86em; }
/* Only the clip that is actually playing spins its disc. */
.tiktok-clip.playing .tt-disc { animation: tt-spin 7s linear infinite; }
@keyframes tt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tiktok-clip.playing .tt-disc { animation: none; }
}
.tiktok .copy .sub {
  margin: 20px 0 28px;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}

/* ==========================================================================
   Why Playlist Push
   ========================================================================== */
.why {
  background: #f1f3f6;
  padding: 90px 0 90px;
  margin-top: 80px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 64px;
  z-index: 2;
  position: relative;
}
.why-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 26px;
  background: #fff;
  border: 1px solid #e8ecf2;
  border-radius: var(--r-md);
  padding: 38px 40px;
  box-shadow: 0 18px 40px -30px rgba(15, 34, 64, .25);
  transition: transform .3s ease, box-shadow .3s ease;
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -30px rgba(15, 34, 64, .32);
}
.why-card img {
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 56px;
  width: auto;
  margin: 0;
  padding: 0;
}
/* title + copy share one continuous accent rule */
.why-card .card-title {
  grid-column: 2;
  grid-row: 1;
  border-left: 2px solid #d3d6dc;
  padding: 0 0 12px 20px;
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.why-card p {
  grid-column: 2;
  grid-row: 2;
  border-left: 2px solid #d3d6dc;
  padding: 0 0 0 20px;
  margin: 0;
  line-height: 1.68;
  font-size: 17px;
  color: #3c4a61;
}
.why-card .highlight { color: var(--blue-hl); font-weight: 600; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews {
  position: relative;
  padding: 180px 0 100px;
  text-align: center;
  background: radial-gradient(58% 50% at 50% 68%, rgba(66, 86, 232, .07), rgba(66, 86, 232, 0) 72%);
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 52px 0 100px;
  text-align: left;
}
.review-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  margin: 0;
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  border: 1px solid #e7ecf5;
  border-radius: 24px;
  padding: 34px 32px 30px;
  box-shadow: 0 24px 50px -32px rgba(15, 34, 64, .28);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* centre card sits slightly higher to break the flat row */
.review-card:nth-child(2) { margin-top: -22px; }
.review-card:hover {
  transform: translateY(-8px);
  border-color: #dbe3f1;
  box-shadow: 0 42px 70px -34px rgba(15, 34, 64, .34);
}
/* gradient hairline along the top edge, lit up on hover */
.review-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--salmon) 55%, var(--blue-hl));
  opacity: .35;
  transition: opacity .35s ease;
}
.review-card:hover::after { opacity: 1; }
/* oversized quote glyph, tucked into the top-right corner */
.review-card::before {
  content: "\201D";
  position: absolute;
  top: 30px;
  right: 22px;
  font-family: Georgia, serif;
  font-size: 130px;
  line-height: 1;
  color: rgba(232, 81, 84, .1);
  pointer-events: none;
}
.review-card .stars { width: 112px; margin: 0 0 22px; }
.review-card blockquote {
  position: relative;
  flex: 1;
  margin: 0 0 26px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--navy);
}
.review-by {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid #edf1f7;
}
.review-by .avatar { position: relative; flex: none; }
.review-card .photo {
  display: block;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 18px -8px rgba(15, 34, 64, .5);
}
/* Spotify mark as a badge on the avatar, so it stays put when a name wraps */
.review-by .spotify-lottie {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 25px;
  height: 25px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px -2px rgba(15, 34, 64, .45);
  transition: transform .25s ease;
}
.review-card .author {
  text-decoration: none;
  color: #000;
  min-width: 0;
}
.review-card .author:hover .name { color: var(--blue-hl); }
.review-by:hover .spotify-lottie { transform: scale(1.08); }
.review-card .author .name {
  display: block;
  font-family: 'Caveat', cursive;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.12;
  transition: color .25s ease;
}

/* ==========================================================================
   Team
   ========================================================================== */
.team {
  background: var(--gray-bg);
  text-align: center;
  padding: 30px 0px;
}
.team h2 { font-size: 34px; font-weight: 600; margin: 10px 0; }
.team p { line-height: 26px; }
.team-avatars {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding-right: 13px;
}
.team-avatars .avatar {
  width: 90px;
  height: 90px;
  border-radius: 100px;
  border: 5px solid #fff;
  background-size: cover;
  background-position: 50% 20%;
  margin-right: -13px;
  opacity: 0;
  transform: translateY(18px) scale(.8);
  transition: transform .5s cubic-bezier(.22, .8, .3, 1), opacity .5s ease;
}
.team-avatars.in-view .avatar { opacity: 1; transform: none; }
.team-avatars.in-view .avatar:hover { transform: translateY(-8px); }
.team-avatars .avatar:nth-child(1) { transition-delay: .05s; }
.team-avatars .avatar:nth-child(2) { transition-delay: .12s; }
.team-avatars .avatar:nth-child(3) { transition-delay: .19s; }
.team-avatars .avatar:nth-child(4) { transition-delay: .26s; }
.team-avatars .avatar:nth-child(5) { transition-delay: .33s; }
.team-avatars .avatar:nth-child(6) { transition-delay: .4s; }
.team-avatars .avatar:nth-child(7) { transition-delay: .47s; }
.team-caption {
  margin-top: 22px;
  font-size: 14.5px;
  color: #5b6778;
}
@media (prefers-reduced-motion: reduce) {
  .team-avatars .avatar { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding: 100px 0 180px; }
.faq-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 40px;
  align-items: start;
  margin-top: 45px;
}
.faq h2 {
  font-size: 43px;
  font-weight: 700;
  line-height: 48px;
  padding-right: 58px;
  position: sticky;
  top: 110px;
}
.accordion { max-width: 640px; }
.accordion-item { border-bottom: 1px solid rgba(20, 20, 20, .1); }
.accordion-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 18px 0;
  text-align: left;
  cursor: pointer;
}
.accordion-head .acc-arrow {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 3px;
  transition: transform .3s ease;
}
.accordion-head:hover .acc-arrow { transform: translateX(3px); }
.accordion-item.open .acc-arrow,
.accordion-item.open .accordion-head:hover .acc-arrow { transform: rotate(90deg); }
.accordion-head h3 {
  flex: 1;
  font-size: 20px;
  font-weight: 500;
  line-height: 27px;
  transition: color .2s ease;
}
.accordion-head:hover h3 { color: var(--red); }
.accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.accordion-body p {
  margin: 0 0 24px;
  padding-left: 34px;
  font-size: 16px;
  font-weight: 300;
  line-height: 25px;
  max-width: 600px;
  color: #3c4a61;
}
.accordion-body a {
  color: var(--red);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.accordion-body a:hover { color: #c9464a; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--navy);
  color: #fff;
  padding: 40px 0 40px;
}
.footer-cta {
  text-align: center;
  margin-bottom: 100px;
  padding: 30px 0 10px;
  position: relative;
  z-index: 0;
}
.footer-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 720px;
  height: 420px;
  max-width: 100vw;
  transform: translate(-50%, -55%);
  background:
    radial-gradient(closest-side, rgba(232, 81, 84, .22), transparent 72%),
    radial-gradient(closest-side at 32% 70%, rgba(66, 86, 232, .18), transparent 70%);
  pointer-events: none;
}
.footer-cta h2 { font-size: 52px; font-weight: 700; line-height: 1.08; margin: 10px 0; letter-spacing: -.01em; }
.footer-cta p { color: var(--muted); font-size: 19px; margin: 16px 0 30px; }
.footer-cta .btn { font-size: 17px; padding: 17px 34px; }

.footer-wrapper {
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  gap: 60px;
  padding-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer-brand img { height: 34px; width: auto; }
.footer-social { display: flex; gap: 16px; margin-top: 24px; }
.footer-social a { opacity: .8; transition: opacity .2s ease; }
.footer-social a:hover { opacity: 1; }
.footer-social img { width: 22px; height: 22px; object-fit: contain; }
.footer-disclaimer {
  margin-top: 34px;
  font-size: 12px;
  font-weight: 300;
  line-height: 18px;
  color: var(--muted);
  max-width: 380px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.footer-col .col-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  padding: 7px 0;
  font-size: 15px;
  color: #dfe5ee;
  text-decoration: none;
  transition: color .2s ease;
}
.footer-col a:hover { color: #fff; }

/* Latest blog posts (src/data/blog-posts.json) */
.footer-posts {
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 30px;
  margin-top: 4px;
}
.footer-posts-grid a {
  font-size: 14.5px;
  line-height: 1.5;
  color: #dfe5ee;
  text-decoration: none;
  transition: color .2s ease;
}
.footer-posts-grid a:hover { color: #fff; }

.footer-bottom {
  margin-top: 60px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: #fff; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .playlist-slides img { animation-duration: 56s; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .hero-visual { width: 700px; }
  .nav-row { gap: 14px; }
  .nav-links { gap: 0; margin-left: 0; }
  .nav-link { padding: 10px 10px; font-size: 14.5px; }
  .nav-cta .btn { padding: 10px 16px; font-size: 14px; }
}

@media (max-width: 991px) {
  .hero h1 { font-size: 64px; line-height: 67px; }
  .section-title { font-size: 42px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-bottom: 0; }
  .hero-copy { padding: 90px 0 30px; }
  .hero-visual { width: 100%; max-width: 520px; justify-self: center; }
  .press-grid { grid-template-columns: repeat(3, 1fr); gap: 35px 45px; }
  .feature .split, .tiktok .split, .faq-grid { grid-template-columns: 1fr; }
  .feature .split .visual-first { order: -1; }
  .covers-3d { margin-bottom: 40px; }
  .why-grid { gap: 22px; }
  .why-card { padding: 30px 28px; column-gap: 20px; }
  .why-card img { height: 48px; }
  .why-card .card-title { font-size: 20px; }
  .why-card p { font-size: 16px; }
  .reviews-grid { grid-template-columns: 1fr; gap: 22px; max-width: 620px; margin: 44px auto 90px; }
  .review-card:nth-child(2) { margin-top: 0; }
  .footer-wrapper { grid-template-columns: 1fr; gap: 40px; }
  .faq h2 { position: static; padding-right: 0; }

  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .mobile-menu { display: flex; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .hero h1 { font-size: 50px; line-height: 50px; }
  .section-title { font-size: 34px; }
  .feature .copy .sub, .tiktok .copy .sub, .hero .sub { font-size: 17px; }
  .stats-row { max-width: 100%; }
  .stat .num { font-size: 42px; }
  .stat .label { font-size: 13px; }
  .curator-top .avatar { width: 88px; height: 88px; }
  .curator-id .name { font-size: 20px; margin-top: 4px; }
  .curator-id .tooltip { width: 120px; }
  .curator-checks .check-row { margin-top: 6px; padding-bottom: 9px; font-size: 15px; }
  .check-lottie { width: 26px; height: 26px; }
  .feature { padding: 70px 0; }
  .faq h2 { font-size: 32px; line-height: 36px; }
  .accordion-head h3 { font-size: 17px; line-height: 24px; }
  .footer-cols { grid-template-columns: 1fr; gap: 36px; }
  .footer-posts-grid { grid-template-columns: 1fr; }
  .footer-cta h2 { font-size: 30px; }
  .why-grid { grid-template-columns: 1fr; margin-top: 42px; }
}

@media (max-width: 479px) {
  .hero h1 { font-size: 44px; line-height: 46px; }
  .section-title { font-size: 30px; }
  .hero-trust { flex-wrap: wrap; }
  .press-grid { grid-template-columns: repeat(2, 1fr); }
  /* keep three stat columns from overflowing on small phones */
  .stats-row { column-gap: 6px; }
  .stat .num { font-size: 30px; }
  .stat .label { font-size: 11px; letter-spacing: .04em; }
  .why-card { padding: 26px 22px; column-gap: 16px; }
  .why-card img { height: 42px; }
  .tiktok-clip.playing { transform: scale(1.15); }
  .review-card { padding: 28px 24px 24px; }
  .review-card blockquote { font-size: 18px; }
  .review-card::before { font-size: 104px; right: 14px; }
}

/* ==========================================================================
   Inner pages (light hero pages)
   ========================================================================== */

/* Header over a light hero: dark text until scrolled (scrolled state stays navy glass) */
.page-light .site-header:not(.scrolled) { color: var(--navy); }
.page-light .site-header:not(.scrolled) .nav-link:hover { background: rgba(15, 34, 64, .07); }
.page-light .site-header:not(.scrolled) .nav-mega-group:is(:hover, :focus-within, .open)[data-active="promotion"] .trigger[data-mega="promotion"],
.page-light .site-header:not(.scrolled) .nav-mega-group:is(:hover, :focus-within, .open)[data-active="creators"] .trigger[data-mega="creators"],
.page-light .site-header:not(.scrolled) .nav-mega-group:is(:hover, :focus-within, .open)[data-active="pricing"] .trigger[data-mega="pricing"] {
  background: rgba(15, 34, 64, .07);
}
.page-light .site-header:not(.scrolled) .btn-ghost { background: rgba(15, 34, 64, .08); color: var(--navy); }
.page-light .site-header:not(.scrolled) .nav-toggle span { background: var(--navy); }
.page-light .site-header.scrolled { color: #fff; }

/* With the mobile menu open there is a navy panel behind the header, so the
   light-hero treatment has to give way even though the page has not scrolled —
   otherwise the logo and the close button are navy on navy, i.e. invisible.
   The panel is a child of .site-header, so the row has to be lifted over it
   (already position: relative); raising the header itself would do nothing. */
.nav-open .nav-row { z-index: 102; }
/* .site-header.scrolled carries a backdrop-filter, which makes the header a
   containing block for its position:fixed descendants — so the menu panel would
   be clipped to the 76px header instead of covering the viewport. The panel
   behind supplies the navy surface, so the glass is redundant while it is open. */
.nav-open .site-header.scrolled {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: none;
}
.page-light.nav-open .site-header:not(.scrolled) { color: #fff; }
.page-light.nav-open .site-header:not(.scrolled) .logo-on-light { display: none; }
.page-light.nav-open .site-header:not(.scrolled) .logo-on-dark { display: block; }
.page-light.nav-open .site-header:not(.scrolled) .nav-toggle span { background: #fff; }

/* ---- Light hero ---- */
.page-hero {
  background: linear-gradient(180deg, #e9eef7 0%, #f6f9fd 60%, #fff 100%);
  color: var(--navy);
  padding-top: 150px;
  overflow: clip;
}
.page-hero .split {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.page-hero h1 { font-size: 62px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
.page-hero h1 .g { color: #00c4be; }
.page-hero .sub {
  margin: 22px 0 30px;
  font-size: 19px;
  line-height: 1.6;
  color: #3c4a61;
  max-width: 520px;
}
.page-hero .ctas { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.page-hero .hero-img img { width: 100%; }
.page-hero .stats-row { padding: 60px 0 60px; }

/* ---- Navy pitch section (covers + checklist) ---- */
.pitch {
  background: var(--navy);
  color: #fff;
  padding: 130px 0 100px;
  margin-top: 90px;
}
.pitch .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 53px;
  align-items: center;
}
.checklist { margin: 28px 0 32px; }
.checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  list-style: none;
  font-size: 18px;
}
.checklist { padding: 0; }
.checklist svg { width: 24px; height: 24px; flex: none; color: #1ed760; }

/* ==========================================================================
   How it works — scroll-driven flow with live UI mockups
   ========================================================================== */
.how-steps { position: relative; padding: 180px 0 180px; overflow: hidden; }
.how-steps > .container { position: relative; z-index: 1; }
.how-steps .steps-header { text-align: center; margin-bottom: 76px; }
/* Soft colour glow, kept mid-section so it never bleeds over the slanted edges.
   Uses radial-gradients rather than filter: blur() — same look, no per-frame
   blur repaint while scrolling. */
.how-steps::before,
.how-steps::after {
  content: "";
  position: absolute;
  width: 760px;
  height: 760px;
  pointer-events: none;
  z-index: 0;
}
.how-steps::before {
  top: 14%;
  left: -340px;
  background: radial-gradient(circle, rgba(232, 81, 84, .1), rgba(232, 81, 84, 0) 66%);
}
.how-steps::after {
  top: 46%;
  right: -360px;
  background: radial-gradient(circle, rgba(66, 86, 232, .1), rgba(66, 86, 232, 0) 66%);
}

.flow {
  --progress: 0%;
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
.flow-rail {
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  border-radius: 3px;
  background: #e4e9f2;
  overflow: hidden;
}
.flow-rail-fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--progress);
  background: linear-gradient(180deg, var(--red), #7f8ff0 52%, #1ed760);
  transition: height .25s linear;
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 108px 1fr;
  align-items: center;
}
.flow-step + .flow-step { margin-top: 56px; }
.flow-text { grid-column: 1; grid-row: 1; text-align: right; padding-right: 10px; }
.flow-visual { grid-column: 3; grid-row: 1; padding-left: 10px; }
.flow-step.alt .flow-text { grid-column: 3; text-align: left; padding: 0 0 0 10px; }
.flow-step.alt .flow-visual { grid-column: 1; padding: 0 10px 0 0; }
.flow-text h3 { font-size: 25px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 9px; }
.flow-text p { font-size: 16.5px; line-height: 1.6; color: #3c4a61; }

.flow-marker {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  z-index: 2;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e4e9f2;
  color: #97a1b2;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .45s ease, border-color .45s ease, background-color .45s ease,
              box-shadow .45s ease, transform .45s cubic-bezier(.22, .8, .3, 1);
}
/* Each marker picks up the colour the rail has reached at that point */
.flow-step:nth-of-type(1) { --accent: #e85154; --accent-2: #f2795c; --glow: rgba(232, 81, 84, .14); --drop: rgba(232, 81, 84, .75); }
.flow-step:nth-of-type(2) { --accent: #b06ec4; --accent-2: #c47fd0; --glow: rgba(176, 110, 196, .14); --drop: rgba(176, 110, 196, .75); }
.flow-step:nth-of-type(3) { --accent: #7f8ff0; --accent-2: #96a3f5; --glow: rgba(127, 143, 240, .14); --drop: rgba(127, 143, 240, .75); }
.flow-step:nth-of-type(4) { --accent: #4bb9a4; --accent-2: #5fcbae; --glow: rgba(75, 185, 164, .14); --drop: rgba(75, 185, 164, .75); }
.flow-step:nth-of-type(5) { --accent: #1ed760; --accent-2: #4ae07f; --glow: rgba(30, 215, 96, .16); --drop: rgba(30, 215, 96, .7); }

/* TikTok variant: rail and markers run cyan -> pink */
.flow-tiktok .flow-rail-fill { background: linear-gradient(180deg, #00c4be, #7f8ff0 52%, #ff0050); }
.flow-tiktok .flow-step:nth-of-type(1) { --accent: #00c4be; --accent-2: #35d6d1; --glow: rgba(0, 196, 190, .15); --drop: rgba(0, 196, 190, .75); }
.flow-tiktok .flow-step:nth-of-type(2) { --accent: #3aa8d4; --accent-2: #63bde0; --glow: rgba(58, 168, 212, .15); --drop: rgba(58, 168, 212, .75); }
.flow-tiktok .flow-step:nth-of-type(3) { --accent: #6b8cdf; --accent-2: #8ea6e8; --glow: rgba(107, 140, 223, .15); --drop: rgba(107, 140, 223, .75); }
.flow-tiktok .flow-step:nth-of-type(4) { --accent: #a86fc0; --accent-2: #bd8fd0; --glow: rgba(168, 111, 192, .15); --drop: rgba(168, 111, 192, .75); }
.flow-tiktok .flow-step:nth-of-type(5) { --accent: #d65a8a; --accent-2: #e07ea5; --glow: rgba(214, 90, 138, .15); --drop: rgba(214, 90, 138, .75); }
.flow-tiktok .flow-step:nth-of-type(6) { --accent: #ff0050; --accent-2: #ff4d7f; --glow: rgba(255, 0, 80, .14); --drop: rgba(255, 0, 80, .7); }

.flow-step.active .flow-marker {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  transform: scale(1.07);
  box-shadow: 0 0 0 7px var(--glow), 0 16px 32px -14px var(--drop);
}

/* ---- Mockup card shell ---- */
.mock {
  background: #fff;
  border: 1px solid #e8ecf2;
  border-radius: var(--r-md);
  padding: 20px;
  box-shadow: 0 26px 54px -32px rgba(15, 34, 64, .4);
  opacity: 0;
  transform: translateY(20px) scale(.97);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .8, .3, 1);
}
.flow-step.active .mock { opacity: 1; transform: none; }

/* 1 — submit */
.mock-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid #e4e9f2;
  border-radius: var(--r-sm);
  background: #fbfcfe;
}
.mock-field img { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.mock-url {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #5b6778;
  white-space: nowrap;
  overflow: hidden;
}
.mock-caret {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--red);
  margin-left: 2px;
  vertical-align: -2px;
  animation: caret-blink 1.1s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.mock-or { text-align: center; font-size: 12px; color: #97a1b2; margin: 11px 0; }
.mock-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px;
  border: 1px dashed #cfd7e3;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: #5b6778;
}
.mock-upload svg { width: 17px; height: 17px; }

/* 2 — targeting */
.mock-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mock-pills .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 100px;
  border: 1px solid #e4e9f2;
  background: #fbfcfe;
  font-size: 13px;
  color: #5b6778;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .8, .3, 1);
}
.flow-step.active .mock-pills .pill { opacity: 1; transform: none; }
.mock-pills .pill:nth-child(1) { transition-delay: .10s; }
.mock-pills .pill:nth-child(2) { transition-delay: .16s; }
.mock-pills .pill:nth-child(3) { transition-delay: .22s; }
.mock-pills .pill:nth-child(4) { transition-delay: .28s; }
.mock-pills .pill:nth-child(5) { transition-delay: .34s; }
.mock-pills .pill:nth-child(6) { transition-delay: .40s; }
.mock-pills .pill.on {
  background: rgba(30, 215, 96, .12);
  border-color: rgba(30, 215, 96, .34);
  color: #0d7a3f;
  font-weight: 500;
}
.mock-pills .pill svg { width: 13px; height: 13px; }
.mock-label {
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9aa4b4;
}
.mock-label.moods {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid #eef1f6;
}
.mock-pills.moods .pill:nth-child(1) { transition-delay: .46s; }
.mock-pills.moods .pill:nth-child(2) { transition-delay: .52s; }
.mock-pills.moods .pill:nth-child(3) { transition-delay: .58s; }
.mock-pills.moods .pill:nth-child(4) { transition-delay: .64s; }

/* Footnote line under a mock — still used by the TikTok flows */
.mock-ai {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid #eef1f6;
  font-size: 12.5px;
  color: #5b6778;
}
.mock-ai svg { width: 16px; height: 16px; color: #7f8ff0; flex: none; }

/* 3 — delivery to playlists */
.send-covers { display: flex; align-items: center; }
.send-covers span {
  width: 52px;
  height: 52px;
  border-radius: 7px;
  border: 3px solid #fff;
  background-size: cover;
  background-position: 50% 50%;
  margin-right: -10px;
  box-shadow: 0 5px 16px rgba(15, 34, 64, .18);
}
.send-covers .more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  margin-right: 0;
}
.send-track {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: #e9edf4;
  margin: 24px 0 14px;
  overflow: hidden;
}
.send-track::after {
  content: "";
  position: absolute;
  top: 0;
  left: -45%;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: send-sweep 1.9s linear infinite;
}
@keyframes send-sweep { to { left: 100%; } }
.send-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #5b6778; }
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1ed760;
  flex: none;
  animation: live-pulse 1.9s infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(30, 215, 96, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(30, 215, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 215, 96, 0); }
}

/* 4 — curator response */
.resp-head { display: flex; align-items: center; gap: 12px; }
.resp-head img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.resp-name { font-size: 15px; font-weight: 600; }
.resp-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #97a1b2;
}
.resp-lines { margin: 16px 0; }
.resp-lines span {
  display: block;
  height: 9px;
  border-radius: 100px;
  background: #eef1f6;
  margin-bottom: 9px;
}
.resp-lines span:nth-child(2) { width: 72%; }
.resp-lines span:nth-child(3) { width: 45%; margin-bottom: 0; }
.resp-added { display: flex; align-items: center; gap: 12px; }
/* playlist cover sits in the top-right corner of the card */
.resp-head .resp-cover { margin-left: auto; }
.resp-cover {
  width: 70px;
  height: 70px;
  border-radius: 4px;
  flex: none;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: 0 5px 14px rgba(15, 34, 64, .2);
}
.resp-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 100px;
  background: rgba(30, 215, 96, .12);
  color: #0d7a3f;
  font-size: 12.5px;
  font-weight: 600;
}
.resp-badge svg { width: 14px; height: 14px; }

/* 5 — reporting */
.rep-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: #5b6778;
  margin-bottom: 16px;
}
.rep-live { display: inline-flex; align-items: center; gap: 6px; color: #0d7a3f; font-weight: 600; }
.rep-bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.rep-bars span {
  flex: 1;
  height: 0;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #8f9df4, #4256e8);
  transition: height .85s cubic-bezier(.22, .8, .3, 1);
}
.flow-step.active .rep-bars span { height: var(--h); }
.rep-bars span:nth-child(1) { transition-delay: .12s; }
.rep-bars span:nth-child(2) { transition-delay: .19s; }
.rep-bars span:nth-child(3) { transition-delay: .26s; }
.rep-bars span:nth-child(4) { transition-delay: .33s; }
.rep-bars span:nth-child(5) { transition-delay: .40s; }
.rep-bars span:nth-child(6) { transition-delay: .47s; }
.rep-bars span:last-child { background: linear-gradient(180deg, #38d477, #12b45a); }
.rep-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid #eef1f6;
}
.rep-stats strong { display: block; font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.rep-stats small { font-size: 12px; color: #5b6778; }

@media (prefers-reduced-motion: reduce) {
  .mock, .flow-step.active .mock,
  .mock-pills .pill, .flow-step.active .mock-pills .pill { opacity: 1; transform: none; transition: none; }
  .mock-caret, .send-track::after, .live-dot { animation: none; }
  .rep-bars span { height: var(--h); transition: none; }
}

/* ==========================================================================
   Curator program page
   ========================================================================== */
.hero-curator {
  background-image: radial-gradient(circle at 0% 50%, #bb9bcf, #fff 25%, #f1eaf4 88%, #bfa4ce 103%);
  color: var(--navy);
  text-align: center;
  padding: 176px 0 118px;
}
.hero-curator .eyebrow { color: #2b3247; font-size: 15px; letter-spacing: .13em; }
.hero-curator h1 {
  max-width: 690px;
  margin: 0 auto;
  font-size: 70px;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.015em;
  color: #0b0d12;
}
.hero-curator h1 .g { color: #1db954; }
.hero-curator h1 .b { color: #4a8fff; }
.hero-curator .sub { margin: 26px 0 32px; font-size: 19px; color: #3c4a61; }

/* TikTok creator program reuses this centred hero, in the TikTok palette —
   same .c / .p span names the TikTok promotion page already uses. */
.hero-curator.tiktok {
  background-image: radial-gradient(circle at 100% 50%, #9fe4e1, #fff 25%, #eef9f9 88%, #a9e7e4 103%);
}
.hero-curator h1 .c { color: #00c4be; }
.hero-curator h1 .p { color: #ff0050; }

/* ---- Creator payout: navy editorial list (curator + TikTok creator pages) ----
   Sticky-feeling pitch on the left, hairline-separated benefit rows on the
   right — no boxes, so the numbers and rules carry the rhythm. */
.payout {
  background: var(--navy);
  color: #fff;
  padding: 116px 0 180px;
}
.payout-split {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: start;
}
.payout .eyebrow.rule {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--red-on-dark);
  margin-bottom: 22px;
}
.payout .eyebrow.rule::before {
  content: "";
  width: 26px;
  height: 2px;
  flex: none;
  background: var(--red-on-dark);
}
.payout h2 { font-size: 44px; margin: 0 0 18px; letter-spacing: -.02em; }
.payout-intro > p {
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
}
.payout-stat {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 32px;
  padding: 24px 28px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
}
.payout-stat strong {
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.payout-stat span {
  max-width: 90px;
  padding-bottom: 5px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--muted);
}
.payout-list { margin: 0; padding: 0; list-style: none; }
.payout-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 24px;
  padding: 30px 20px 30px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.payout-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
/* These are benefits, not ordered steps — a plain marker, no counting. */
.payout-dot {
  width: 9px;
  height: 9px;
  margin-top: 11px;
  border-radius: 50%;
  background: var(--red-on-dark);
}
.payout-list h3 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.payout-list p {
  margin: 0;
  max-width: 520px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
}
.payout-list .highlight { color: #fff; font-weight: 600; }
/* The slanted section that follows normally rises out of a white section, so a
   sliver of page background is fine. Against navy that sliver reads as a seam —
   butt the two together and let the slant cut straight into the dark. */
.payout + .curators-light { margin-top: 0; }

/* ---- How it works: 3 steps on a shared rail ---- */

.how-3 { padding: 180px 0 180px; }
.how-3 .steps-header { text-align: center; margin-bottom: 62px; }
.steps-3 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 30px;
  z-index: 2;
}

/* rail linking the three numbers, sitting behind them */
.steps-3::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 16.6%;
  right: 16.6%;
  height: 2px;
  background: linear-gradient(90deg, #bb9bcf, #4a8fff 52%, #1db954);
  opacity: .45;
}
.step3 { display: grid; grid-template-rows: auto 1fr; row-gap: 26px; }
.step3-num {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 7px var(--glow), 0 16px 30px -14px var(--drop);
}
.step3:nth-child(1) { --accent: #a97fc4; --accent-2: #c3a1d6; --glow: rgba(169, 127, 196, .15); --drop: rgba(169, 127, 196, .8); }
.step3:nth-child(2) { --accent: #4a8fff; --accent-2: #74a8ff; --glow: rgba(74, 143, 255, .15); --drop: rgba(74, 143, 255, .8); }
.step3:nth-child(3) { --accent: #1db954; --accent-2: #45d478; --glow: rgba(29, 185, 84, .16); --drop: rgba(29, 185, 84, .75); }

.step3-card {
  background: #fff;
  border: 1px solid #e8ecf2;
  border-radius: var(--r-md);
  padding: 18px 18px 26px;
  box-shadow: 0 22px 48px -32px rgba(15, 34, 64, .38);
  transition: transform .3s ease, box-shadow .3s ease;
}
.step3-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -32px rgba(15, 34, 64, .45);
}
.step3-shot {
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(140deg, #f4f0f8, #eef3fb);
  aspect-ratio: 4 / 3;
  margin-bottom: 22px;
}
.step3-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.step3-card h3 { font-size: 21px; font-weight: 600; margin: 0 6px 8px; letter-spacing: -.01em; }
.step3-card p { font-size: 16px; line-height: 1.6; color: #3c4a61; margin: 0 6px; }

@media (max-width: 991px) {
  .payout-split { grid-template-columns: 1fr; gap: 52px; }
  .payout h2 { font-size: 38px; }
  .payout-list p { max-width: none; }
}
@media (max-width: 860px) {
  .hero-curator { padding: 128px 0 84px; }
  .hero-curator h1 { font-size: 46px; }
  .payout { padding: 80px 0 76px; }
  .how-3 { padding: 80px 0 70px; }
  .steps-3 { grid-template-columns: 1fr; row-gap: 40px; }
  .steps-3::before { display: none; }
  .step3 { row-gap: 18px; }
  .step3-shot { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .hero-curator h1 { font-size: 40px; line-height: 1.15; }
  .hero-curator .sub { font-size: 17px; }
  .payout h2 { font-size: 32px; }
  .payout-stat strong { font-size: 44px; }
  .payout-list li { grid-template-columns: 18px 1fr; gap: 16px; padding: 24px 0; }
  .payout-dot { margin-top: 9px; }
  .payout-list h3 { font-size: 22px; }
  .payout-list p { font-size: 16px; }
}

/* ==========================================================================
   TikTok promotion page
   ========================================================================== */
.hero-tiktok {
  background-image: radial-gradient(circle at 0 100%, rgba(87, 206, 221, .4), #fdffff 27%, #f0fbfc 88%, #93dfe9);
  color: var(--navy);
  padding-top: 150px;
}
.hero-tiktok .split {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;  
}
.hero-tiktok h1 {
  max-width: 510px;
  font-size: 62px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.015em;
}
.hero-tiktok h1 .p { color: #ff0050; }
.hero-tiktok .sub { margin: 22px 0 30px; font-size: 19px; line-height: 1.6; color: #3c4a61; max-width: 520px; }
.hero-tiktok .ctas { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-tiktok .hero-img img { width: 100%; }
.hero-tiktok .stats-row { padding: 30px 0 120px; }

/* Creator avatars scattered in a loose circle, each drifting independently.
   Positions come from --x/--y (centre point) and --s (diameter), all in %. */
.creator-cluster {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.jiggle {
  position: absolute;
  width: var(--s);
  aspect-ratio: 1;
  left: calc(var(--x) - var(--s) / 2);
  top: calc(var(--y) - var(--s) / 2);
  transform: translateX(-3%);
  animation: jiggle-lr 2.5s ease-in-out infinite alternate;
}
.jiggle.lead { z-index: 2; }
.jiggle-inner {
  width: 100%;
  height: 100%;
  transform: translateY(-3%);
  animation: jiggle-ud 4s ease-in-out infinite alternate;
  animation-delay: inherit;
}
.jiggle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* white rim + soft lavender halo, as on the original site */
  border: 5px solid #fff;
  box-shadow: 0 0 0 11px #e5e9f7, 0 16px 30px -16px rgba(15, 34, 64, .45);
}
@keyframes jiggle-lr { 75% { transform: translateX(3%); } }
@keyframes jiggle-ud { 30% { transform: translateY(3%); } }
.jiggle:nth-child(1) { animation-delay: -.9s; }
.jiggle:nth-child(2) { animation-delay: -2.2s; }
.jiggle:nth-child(3) { animation-delay: -1.5s; }
.jiggle:nth-child(4) { animation-delay: -3.8s; }
.jiggle:nth-child(5) { animation-delay: -2.1s; }
.jiggle:nth-child(6) { animation-delay: -4.4s; }
.jiggle:nth-child(7) { animation-delay: -1.1s; }
@media (prefers-reduced-motion: reduce) {
  .jiggle, .jiggle-inner { animation: none; }
}

/* Single pricing card */
.pricing-single { padding: 180px 0 40px; text-align: center; }
.price-card {
  max-width: 460px;
  margin: 40px auto 0;
  background: var(--gray-bg);
  border-radius: var(--r-md);
  padding: 34px 32px 32px;
  text-align: left;
}
.price-card h3 { font-size: 24px; font-weight: 600; margin-bottom: 24px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 30px; }
.price-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 16px;
  color: #3c4a61;
}
.price-card li svg { width: 19px; height: 19px; flex: none; color: #ff0050; }
.price-card .from { font-size: 16px; color: #5b6778; }
.price-card .amount {
  font-size: 54px;
  font-weight: 600;
  line-height: 1.1;
  margin: 2px 0 26px;
  letter-spacing: -.02em;
}

/* Extra step mockup pieces (TikTok flow) */
.send-covers.round span { border-radius: 50%; }
.mock-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock-videos span {
  position: relative;
  aspect-ratio: 9 / 14;
  border-radius: 10px;
  background-size: cover;
  background-position: 50% 30%;
  box-shadow: 0 6px 16px rgba(15, 34, 64, .18);
}
.mock-videos span::after {
  content: "";
  position: absolute;
  inset: auto 6px 6px auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%230f2240'/%3E%3C/svg%3E") center/9px no-repeat;
}
.mock-review { display: flex; align-items: center; gap: 14px; }
.mock-review .thumb {
  width: 54px;
  height: 74px;
  border-radius: 9px;
  background-size: cover;
  background-position: 50% 30%;
  flex: none;
}
.mock-review .stars-row { display: flex; gap: 3px; margin-bottom: 9px; }
.mock-review .stars-row svg { width: 16px; height: 16px; color: #ffc531; }
.mock-actions { display: flex; gap: 8px; }
.mock-actions .approve,
.mock-actions .skip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}
.mock-actions .approve { background: rgba(30, 215, 96, .13); color: #0d7a3f; }
.mock-actions .skip { background: var(--gray-bg); color: #6b7688; }
.mock-actions svg { width: 13px; height: 13px; }

@media (max-width: 991px) {
  .hero-tiktok .split { grid-template-columns: 1fr; }
  .hero-tiktok h1 { font-size: 46px; }
  .hero-tiktok { padding-top: 120px; }
  .creator-cluster { max-width: 420px; margin-top: 40px; }
  .jiggle img { border-width: 4px; box-shadow: 0 0 0 8px #e5e9f7, 0 14px 26px -16px rgba(15, 34, 64, .45); }
}
@media (max-width: 767px) {
  .hero-tiktok h1 { font-size: 38px; }
  .hero-tiktok .sub { font-size: 17px; }
  .price-card { padding: 26px 22px; }
  .price-card .amount { font-size: 42px; }
}

/* ---- Light curator section ---- */
.curators-light {
  padding-bottom: 100px;
  background: var(--gray-bg);
}
.curators-light .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 53px;
  align-items: center;
}
.curators-light .sub { margin: 20px 0 28px; font-size: 19px; line-height: 1.6; color: #3c4a61; max-width: 500px; }

/* ---- Pricing calculator ---- */
.pricing-calc { padding: 180px 0 60px; text-align: center; }
/* standalone /pricing page — calculator is the first section under the fixed header */
.pricing-calc.pricing-page h1 { margin-bottom: 4px; }
.calc-panel {
  max-width: 860px;
  margin: 26px auto 0;
  background: var(--gray-bg);
  border-radius: var(--r-md);
  padding: 46px 50px 38px;
}
.calc-panel h2 { font-size: 38px; font-weight: 600; color: #160042; letter-spacing: -.03em; margin-bottom: 30px; }
.calc-label { font-size: 18px; font-weight: 500; color: #18264e; margin-bottom: 18px; }
.calc-slider-wrap { max-width: 560px; margin: 0 auto; }
.calc-minmax {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #6b7094;
  margin-top: 10px;
}
input[type="range"].price-slider {
  --fill: 8%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--red) var(--fill), #dce1ea var(--fill));
  outline: none;
  cursor: pointer;
}
input[type="range"].price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--red);
  box-shadow: 0 4px 12px rgba(15, 34, 64, .25);
  cursor: grab;
}
input[type="range"].price-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--red);
  box-shadow: 0 4px 12px rgba(15, 34, 64, .25);
  cursor: grab;
}
.calc-results {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin: 34px 0 8px;
  min-height: 74px;
}
.calc-cell { display: flex; align-items: baseline; gap: 10px; }
.calc-cell .big { font-size: 58px; font-weight: 700; color: #160042; letter-spacing: -.03em; line-height: 1; }
.calc-cell .unit { font-size: 24px; color: #6b7094; }
.calc-divider { height: 1px; background: #dce1ea; margin: 26px 0; }
.calc-note { font-size: 13px; color: #777; line-height: 1.55; max-width: 720px; margin: 14px auto 0; }

@media (max-width: 991px) {
  .page-hero .split, .pitch .split, .curators-light .split { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 46px; }
  .page-hero { padding-top: 120px; }
  .pitch .visual-first { order: -1; }
}
/* Flow collapses to a single left-rail column */
@media (max-width: 860px) {
  .how-steps .steps-header { margin-bottom: 50px; }
  .flow-rail { left: 27px; transform: none; top: 20px; }
  .flow-step { grid-template-columns: 56px 1fr; column-gap: 20px; align-items: start; }
  .flow-text,
  .flow-step.alt .flow-text { grid-column: 2; grid-row: 1; text-align: left; padding: 0; }
  .flow-visual,
  .flow-step.alt .flow-visual { grid-column: 2; grid-row: 2; padding: 0; margin-top: 18px; }
  .flow-marker { grid-column: 1; grid-row: 1; width: 56px; height: 56px; font-size: 13.5px; }
  .flow-step + .flow-step { margin-top: 42px; }
  .flow-text h3 { font-size: 21px; }
}

@media (max-width: 767px) {
  .page-hero h1 { font-size: 38px; }
  .calc-panel { padding: 32px 22px 28px; }
  .calc-panel h2 { font-size: 28px; }
  .calc-cell .big { font-size: 42px; }
  .calc-results { gap: 22px; }
  .flow-rail { left: 23px; }
  .flow-step { grid-template-columns: 48px 1fr; column-gap: 16px; }
  .flow-marker { width: 48px; height: 48px; font-size: 12.5px; }
  .flow-text h3 { font-size: 19px; }
  .flow-text p { font-size: 15.5px; }
  .mock { padding: 16px; }
  .rep-bars { height: 74px; }
}

/* ==========================================================================
   Promotion hero visuals — cropped phone image + HTML campaign dashboard.
   Shared verbatim by the Spotify (PromoDashboard) and TikTok (TiktokDashboard)
   heroes; only the chart colours and .tile-badge.info differ, and those live
   with the markup.
   ========================================================================== */
.promo-visual {
  position: relative;
  /* width must be explicit: container-type collapses an auto-width box to 0 */
  width: 100%;
  container-type: inline-size;
  margin-bottom: 60px;
}
.promo-card {
  /* everything inside sizes from this, so the card scales as one unit */
  font-size: clamp(6px, 1.57cqw, 15px);
  transform: translate(27%, -40px);
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 1.6em;
  padding: 1.7em;
  box-shadow: 0 2.4em 5em -2.4em rgba(15, 34, 64, .4);
  margin-bottom: 50px;
}
.promo-phone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 29%;
  height: auto;
  z-index: 2;
  transform: scale(1.2);
  filter: drop-shadow(0 1.4em 2.4em rgba(15, 34, 64, .22));
}

.promo-title { font-size: 2.05em; font-weight: 700; letter-spacing: -.015em; margin-bottom: 1.05em; }
.promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; }
.promo-tile {
  border: 1px solid #eaeef4;
  border-radius: 1.05em;
  padding: 1.05em 1.15em 1.15em;
}
.tile-label { font-size: 1.05em; color: #5b6778; }
.tile-row { display: flex; align-items: center; gap: .55em; flex-wrap: wrap; }
.tile-num {
  display: block;
  font-size: 2.7em;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.025em;
  color: var(--navy);
}
.tile-badge {
  display: inline-flex;
  align-items: center;
  gap: .18em;
  background: #d6f5e2;
  color: #0d7a3f;
  font-size: 1em;
  font-weight: 600;
  padding: .3em .62em;
  border-radius: .55em;
  white-space: nowrap;
}
.tile-badge svg { width: 1.05em; height: 1.05em; }
.tile-badge.info { background: #d9f1fb; color: #0e7fa6; }
.tile-sub { font-size: .95em; color: #96a0b1; margin-top: .3em; line-height: 1.35; }

.chart { width: 100%; aspect-ratio: 300 / 110; height: auto; display: block; margin-top: .5em; }
.chart.tall { margin-top: .75em; }

/* ---- entrance ---- */
.promo-tile {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .8, .3, 1);
}
.promo-visual.in-view .promo-tile { opacity: 1; transform: none; }
.promo-tile:nth-child(1) { transition-delay: .06s; }
.promo-tile:nth-child(2) { transition-delay: .14s; }
.promo-tile:nth-child(3) { transition-delay: .22s; }
.promo-tile:nth-child(4) { transition-delay: .28s; }
.promo-tile:nth-child(5) { transition-delay: .34s; }
.promo-tile:nth-child(6) { transition-delay: .4s; }

.chart-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.5s cubic-bezier(.4, 0, .2, 1) .3s;
}
.promo-visual.in-view .chart-line { stroke-dashoffset: 0; }
.chart-line.delay { transition-delay: .5s; }
.chart-area { opacity: 0; transition: opacity .9s ease .85s; }
.promo-visual.in-view .chart-area { opacity: 1; }
.chart-dot {
  opacity: 0;
  transform: scale(.3);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.promo-visual.in-view .chart-dot {
  opacity: 1;
  transform: none;
  transition-delay: calc(.6s + var(--i) * .11s);
}
.chart-marker { opacity: 0; transition: opacity .5s ease 1.15s; }
.promo-visual.in-view .chart-marker { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .promo-tile, .chart-area, .chart-dot, .chart-marker { opacity: 1; transform: none; transition: none; }
  .chart-line { stroke-dashoffset: 0; transition: none; }
}

@media (max-width: 991px) {
  .promo-visual { max-width: 620px; }
  .rotating-screen {
    border-radius: 25px;
  }
}

@media (max-width: 767px) {
  /* give the dashboard more of the width so its labels stay legible */
  .promo-card { font-size: clamp(7px, 2.25cqw, 15px); padding: 1.4em; }
  .promo-phone { width: 45%; transform: scale(0.9); }
  .promo-title { margin-bottom: .85em; }
  .promo-grid { gap: .7em; }
  .promo-tile { padding: .9em; }
  .rotating-screen {
    border-radius: 16px;
  }
}

.slant + .faq {
  padding-top: 180px;
}
.slant-padding-bottom {
  padding-bottom: 180px;
}

/* ==========================================================================
   404
   Same top clearance as .blog-main — the header is fixed, so the heading needs
   to start below it rather than under it.
   ========================================================================== */
.notfound { padding: 160px 0 120px; }
.notfound .section-title { max-width: 16ch; margin-inline: auto; }
.notfound-sub {
  max-width: 52ch;
  margin: 18px auto 32px;
  color: #4a5768;
}
.notfound-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--gray-line);
}
.notfound-links a {
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: #4a5768;
}
.notfound-links a:hover { color: var(--red); }

@media (max-width: 767px) {
  .notfound { padding: 128px 0 88px; }
  .notfound .section-title { font-size: 36px; }
}