/* ww-sky.css — the Win Win Saturation product page.
 *
 * The look is Amit's Claude Design file "Surreal Win Win grainy" (project "Website
 * color palette redesign directions", October 2026). What every page shares (the sky,
 * the grain, the header and footer, the pill buttons, tags) is in sky.css; this file is
 * only what the product page has on its own.
 *
 * The order is ours, from what Microsoft Clarity showed over a week of mostly phone
 * visitors: the listening controls were the most tapped thing on the old page, Buy and
 * Try were hardly found, and almost nobody read past halfway. So the first screen is the
 * headline, then the player with Try and Buy inside it, and the long text sits behind
 * "More". Home reuses this file for the same player.
 *
 * Loaded AFTER site.css, sky.css and ww-mock.css (the plugin pictures).
 */

body.ww-sky {
  /* ww-mock.css sizes the rack picture from this. */
  --ww-big: min(1400px, calc(100vw - 40px));

  /* Stops in pixels: this page is long, and the cream belongs a few screens down. */
  background:
    url("/assets/brand/film-grain.svg") 0 0 / 220px 220px repeat,
    linear-gradient(180deg, #4f8fdc 0, #6fa6e6 520px, #7fb1e8 760px, #b5d2f1 1300px, #dbe8f4 2100px,
      #efe8dc 3000px, #dfe9f3 4200px, #c3d9f1 5400px, #8fb8e8 100%);
  background-color: #dbe8f4;
}

/* ── buttons ───────────────────────────────────────────────────────────────── */
/* The pill itself is in sky.css. The trial is purple until there is something to buy;
   then buy.js swaps #ww-try from .solid to .ghost, and any trial button beside a visible
   Add to cart steps back to cream too. */
.sky-cta:has(.buy:not([hidden])) .ww-btn.solid {
  background: var(--sky-cream);
  color: var(--sky-ink);
  box-shadow: 0 26px 28px -16px rgba(18, 26, 43, .5);
  transform: rotate(1.5deg);
}
.ww-btn.is-in-cart { background: var(--sky-ink); color: var(--sky-cream); }

/* ── first screen ──────────────────────────────────────────────────────────── */
/* .sky-hero-copy is display: contents so its children can sit around the player:
   on a phone the order is headline, player, film, then the buttons. */
.sky-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "tag"
    "title"
    "lede"
    "hear"
    "film"
    "phone";
  gap: 0;
  width: var(--sky-wide);
  margin: 0 auto;
  padding: 8px 0 0;
}

.sky-hero-copy { display: contents; }
.sky-tag { grid-area: tag; }
.sky-hero h1 { grid-area: title; }
.sky-lede { grid-area: lede; }
.sky-hear { grid-area: hear; }
.sky-film { grid-area: film; }
.sky-hero > .pd-slot { grid-area: phone; }

.sky-hero h1 {
  margin: 0;
  color: #fff;
  font: 400 clamp(44px, 6.4vw, 96px)/.9 var(--sky-display);
  letter-spacing: .005em;
  text-transform: uppercase;
  text-shadow: 0 30px 40px rgba(18, 26, 43, .18);
}

.sky-hero h1 span { display: block; color: var(--sky-ink); text-shadow: none; }

.sky-lede {
  margin: 12px 0 18px;
  color: var(--sky-ink-2);
  font-size: 17px;
  line-height: 1.45;
}

/* ── the player ─────────────────────────────────────────────────────────────── */
.sky-hear {
  position: relative;
  padding: 18px 18px 14px;
  border-radius: 28px;
  background: var(--sky-cream);
  box-shadow: 0 40px 50px -28px rgba(18, 26, 43, .55), 0 2px 0 rgba(255, 255, 255, .7) inset;
}

.sky-hear-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.sky-hear h2 {
  margin: 0;
  font: 400 34px/1 var(--sky-display);
  text-transform: uppercase;
}

.sky-tabs { display: flex; gap: 6px; }

.sky-tab {
  min-height: 40px;
  padding: 0 16px;
  border: 2px solid var(--sky-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--sky-ink);
  font: 700 14px/1 var(--grotesk);
  cursor: pointer;
}

.sky-tab[aria-selected="true"] { background: var(--sky-ink); color: var(--sky-cream); }
.sky-tab:focus-visible { outline: 3px solid var(--sky-orange); outline-offset: 2px; }

.sky-ab { margin-top: 12px; }
.sky-ab[hidden] { display: none; }
.sky-ab-what { margin: 0 0 12px; color: var(--sky-ink-3); font-size: 15px; }

.sky-ab .ww-ab-controls {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

/* ab-player.js writes Play, Loading or Stop into this button. */
.sky-ab .ww-ab-play {
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sky-orange);
  color: var(--sky-ink);
  font: 700 13px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 18px 22px -12px rgba(160, 80, 10, .7);
  cursor: pointer;
}

.sky-ab .ww-ab-play[aria-pressed="true"] { background: var(--sky-ink); color: var(--sky-cream); }

.sky-ab .ww-ab-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 76px;
  padding: 4px;
  border: 2px solid var(--sky-ink);
  border-radius: 999px;
}

.sky-ab .ww-ab-sides button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sky-ink);
  font: 400 clamp(22px, 6vw, 30px)/1 var(--sky-display);
  text-transform: uppercase;
  cursor: pointer;
}

.sky-ab .ww-ab-sides [data-ab-side="dry"][aria-pressed="true"] { background: var(--sky-ink); color: var(--sky-cream); }
.sky-ab .ww-ab-sides [data-ab-side="wet"][aria-pressed="true"] { background: var(--sky-purple); color: #fff; }

.ww-ab-track {
  position: relative;
  height: 6px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(18, 26, 43, .12);
}

.ww-ab-track::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ab-progress, 0%);
  background: var(--sky-orange);
}

.ww-ab-status { margin: 8px 0 0; color: var(--sky-ink-3); font: 12px/1.4 var(--mono); }
.ww-ab[data-ab-state="unavailable"] { opacity: .55; }
.ww-ab button:disabled { cursor: not-allowed; box-shadow: none; }

/* No numbers in the player: ab-player.js still draws its levels panel, and here it stays
   out of sight. Amit, from his phone: too many numbers and too much text. */
.sky-ab .ab-levels,
.sky-ab-mini .ab-levels { display: none; }

/* The status line is for screen readers, unless the audio failed to load. */
.sky-ab .ww-ab-status,
.sky-ab-mini .ww-ab-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sky-ab[data-ab-state="unavailable"] .ww-ab-status,
.sky-ab-mini[data-ab-state="unavailable"] .ww-ab-status { position: static; width: auto; height: auto; clip: auto; white-space: normal; }

/* "More": a quiet text button, never a pill, so it does not compete with Buy. */
.sky-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--sky-purple-ink);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.sky-more > summary::-webkit-details-marker { display: none; }
.sky-more > summary::after { content: "+"; font: 400 22px/1 var(--grotesk); }
.sky-more[open] > summary::after { content: "\2212"; }
/* "Hear 7 more clips" is a real button, full width, with what is inside it. */
.sky-more-clips { margin-top: 14px; }

.sky-more-clips > summary {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 100%;
  min-height: 58px;
  padding: 10px 48px;
  border: 2px solid var(--sky-ink);
  border-radius: 999px;
  color: var(--sky-ink);
  font-size: 16px;
  text-align: center;
}

.sky-more-clips > summary:hover { background: #fff; }

.sky-more-clips > summary::after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sky-ink);
  color: var(--sky-cream);
  transform: translateY(-50%);
}

.sky-more-shut-label,
.sky-more-clips[open] .sky-more-open-label { display: none; }
.sky-more-clips[open] .sky-more-shut-label { display: inline; }
.sky-more-clips[open] > summary { margin-bottom: 12px; }

/* "Hear 7 more": the player's next step, like the Next button of a wizard. A dark pill
   inside a rainbow ring that runs round it (still for anyone who asked for less motion).
   The home page's link and the product page's closed "More" share it. Cream on ink
   keeps the words readable whatever colour the ring is passing. */
/* .sky-hear in front: body.ww-sky a { color: inherit } would otherwise win. */
.sky-hear .sky-next,
.sky-more-clips:not([open]) > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 0 24px;
  border: 5px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(var(--sky-ink), var(--sky-ink)) padding-box,
    linear-gradient(90deg, #e5831f, #f5c542, #3fbf7f, #4f8fdc, #6f4bab, #e0568f, #e5831f) 0 50% / 200% 100% border-box;
  color: var(--sky-cream);
  font: 700 18px/1.1 var(--grotesk);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 18px 26px -14px rgba(111, 75, 171, .8), 0 0 22px -6px rgba(229, 131, 31, .55);
  cursor: pointer;
}

.sky-more-clips:not([open]) > summary::after { display: none; }
.sky-hear .sky-next:hover,
.sky-more-clips:not([open]) > summary:hover { color: #fff; transform: translateY(-2px); }
.sky-next:focus-visible,
.sky-more-clips > summary:focus-visible { outline: 3px solid var(--sky-orange); outline-offset: 3px; }
.sky-next-arrow { display: inline-block; font-size: 22px; }

@media (prefers-reduced-motion: no-preference) {
  .sky-hear .sky-next,
  .sky-more-clips:not([open]) > summary { animation: sky-rainbow 2.4s linear infinite; }
  .sky-next-arrow { animation: sky-nudge 1.2s ease-in-out infinite; }
}

@keyframes sky-rainbow { to { background-position: 0 0, 200% 50%; } }
@keyframes sky-nudge { 50% { transform: translateX(4px); } }

.sky-clip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 6px;
}

.sky-ab-mini {
  padding: 12px 14px;
  border: 1px solid rgba(18, 26, 43, .14);
  border-radius: 16px;
  background: #fff;
}

.sky-ab-mini .ww-ab-wave { display: flex; align-items: end; gap: 2px; height: 22px; margin-bottom: 8px; }
.sky-ab-mini .ww-ab-wave span { flex: 1; border-radius: 1px; background: var(--wave, var(--sky-purple)); }
.sky-ab-mini .ww-ab-kind { margin: 0; color: var(--sky-ink-3); font: 700 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.sky-ab-mini .ww-ab-title { margin: 2px 0 10px; font-weight: 700; }
.sky-ab-mini .ww-ab-controls { display: flex; align-items: center; gap: 8px; }

.sky-ab-mini .ww-ab-play {
  min-width: 72px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--sky-orange);
  color: var(--sky-ink);
  font: 700 12px/1 var(--mono);
  text-transform: uppercase;
  cursor: pointer;
}

.sky-ab-mini .ww-ab-play[aria-pressed="true"] { background: var(--sky-ink); color: var(--sky-cream); }
.sky-ab-mini .ww-ab-sides { display: flex; padding: 3px; border: 2px solid var(--sky-ink); border-radius: 999px; }

.sky-ab-mini .ww-ab-sides button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sky-ink);
  font: 700 13px/1 var(--grotesk);
  cursor: pointer;
}

.sky-ab-mini .ww-ab-sides [aria-pressed="true"] { background: var(--sky-ink); color: var(--sky-cream); }
.sky-ab-mini .ww-ab-sides [data-ab-side="wet"][aria-pressed="true"] { background: var(--sky-purple); color: #fff; }

/* ── the film ───────────────────────────────────────────────────────────────── */
.sky-film {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 0;
}

.sky-film-open {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--sky-ink);
  box-shadow: 0 18px 20px -12px rgba(18, 26, 43, .6);
  cursor: pointer;
}

.sky-film-open img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sky-film-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(251, 248, 241, .92);
  transform: translate(-50%, -50%);
}

.sky-film-play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 54%;
  border-width: 7px 0 7px 11px;
  border-style: solid;
  border-color: transparent transparent transparent var(--sky-ink);
  transform: translate(-50%, -50%);
}

.sky-film figcaption { color: var(--sky-ink-2); font-size: 15px; line-height: 1.35; }
.sky-film figcaption b { display: block; color: var(--sky-purple-ink); font: 700 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.sky-film figcaption span { color: var(--sky-ink-3); font: 12px var(--mono); }

/* Once tapped, the film takes the full width at its own portrait shape. */
.sky-film.is-playing { flex-direction: column; align-items: stretch; }
.sky-film.is-playing video {
  display: block;
  width: auto;
  max-width: 100%;
  height: min(78vh, 640px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 18px;
  background: #000;
}
.sky-film.is-playing figcaption { text-align: center; }

/* ── Try and Buy, inside the player ───────────────────────────────────────── */
/* Straight, not tilted: two buttons side by side in a card. The trial is the short one;
   Add to cart carries the price that cart.js writes in. */
/* Outside the player (Home's hero): buttons, then the price line under them. */
.sky-buy { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.sky-hear .sky-buy { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(18, 26, 43, .12); }
.sky-hear .sky-buy .sky-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sky-hear .sky-buy .sky-cta:has(.buy:not([hidden])) { grid-template-columns: auto minmax(0, 1fr); }
.sky-hear .sky-buy .ww-btn,
.sky-hear .sky-buy .ww-btn.ghost,
.sky-hear .sky-buy .sky-cta:has(.buy:not([hidden])) .ww-btn.solid,
body.ww-sky .sky-hear .sky-buy .ww-btn:hover { min-height: 54px; padding: 0 20px; font-size: 15px; transform: none; }
.sky-hear .sky-buy .ww-btn.ghost,
.sky-hear .sky-buy .sky-cta:has(.buy:not([hidden])) .ww-btn.solid { background: transparent; box-shadow: inset 0 0 0 2px var(--sky-ink); }
.sky-hear .sky-buy .ww-btn.ghost:hover { background: #fff; }
.sky-hear .sky-buy .sky-trust,
.sky-hear .sky-buy .sky-note { justify-content: center; text-align: center; }

.sky-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.sky-trust,
.sky-note {
  margin: 0;
  padding: 0;
  color: var(--sky-ink-3);
  font: 11px/1.6 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  list-style: none;
}

.sky-trust { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sky-trust li::before { content: "\2713\00a0"; color: var(--sky-purple-ink); }
.sky-trust[hidden],
.sky-note[hidden] { display: none; }

.sky-hero > .pd-slot { margin-top: 18px; }

/* ── the plugin pictures ───────────────────────────────────────────────────── */
/* The frame itself never moves: it is full of buttons. Only its shadow breathes. */
.sky-plugin {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1400px, calc(100% - 40px));
  margin: 56px auto 0;
}

.sky-plugin-frame { width: 100%; filter: drop-shadow(0 34px 34px rgba(18, 26, 43, .35)); }
.sky-plugin .ww-frame { box-shadow: none; }

.sky-shadow {
  display: block;
  width: 64%;
  height: 34px;
  margin-top: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(40, 40, 30, .42), transparent 70%);
}

.sky-plugin figcaption {
  margin-top: 6px;
  color: var(--sky-ink-3);
  font: 11.5px/1.6 var(--mono);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .sky-shadow { animation: sky-shadow 12s ease-in-out infinite; }
}

/* ── the band ──────────────────────────────────────────────────────────────── */
/* The strip clips the tilted band at the window edge. body's overflow-x: clip is not
   enough: WebKit still counts the overhang in the page's scroll width. */
.sky-band { margin-top: 44px; padding: 30px 0; overflow: hidden; }

.sky-marquee {
  margin: 0 -40px;
  padding: 18px 0;
  overflow: hidden;
  background: var(--sky-orange);
  transform: rotate(-2deg);
  box-shadow: 0 30px 40px -20px rgba(160, 80, 10, .5);
}

.sky-marquee-track {
  display: flex;
  gap: 40px;
  width: max-content;
  color: #17160f;
  font: 400 26px/1 var(--sky-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sky-marquee-track .hot { color: var(--sky-cream); }
.sky-marquee-track .cool { color: #3d2470; }

@media (prefers-reduced-motion: no-preference) {
  .sky-marquee-track { animation: sky-marquee 46s linear infinite; }
}

@keyframes sky-marquee { to { transform: translateX(-50%); } }

/* ── sections ──────────────────────────────────────────────────────────────── */
.sky-sec {
  width: var(--sky-wide);
  margin: 0 auto;
  padding: 96px 0 0;
}

.sky-head { max-width: 680px; }

.sky-head h2,
.sky-close h2 {
  margin: 0 0 12px;
  font: 400 clamp(40px, 6.4vw, 84px)/.92 var(--sky-display);
  text-transform: uppercase;
}

.sky-head > p { margin: 0; color: var(--sky-ink-3); font-size: 17px; line-height: 1.5; }

/* Revealed by ww-bench.js once JavaScript is running; no script, no hiding. */
.ww-pre { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.ww-pre.is-in { opacity: 1; transform: none; }

/* The six modules: names, not buttons. */
.sky-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 22px 28px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  color: var(--sky-ink-3);
  font-size: 15px;
  line-height: 1.4;
}

.sky-modules span { display: block; font: 700 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.sky-modules b { display: block; margin: 2px 0 4px; color: var(--sky-ink); font: 400 28px/1 var(--sky-display); text-transform: uppercase; }
.sky-modules .m1 span { color: #a8302e; }
.sky-modules .m2 span { color: #a85409; }
.sky-modules .m3 span { color: #1f7a47; }
.sky-modules .m4 span { color: var(--sky-purple); }
.sky-modules .m5 span { color: #2f5fae; }
.sky-modules .m6 span { color: #80650a; }
.sky-sec .sky-plugin { width: 100%; margin-top: 40px; }

/* Hardware: four floating photos. */
.sky-gear {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  margin-top: 40px;
}

.sky-gear-item figure { margin: 0 0 18px; }
.sky-gear-item img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: contain;
  filter: drop-shadow(0 26px 20px rgba(18, 26, 43, .32));
}

.g1 { --r: -4deg; }
.g2 { --r: 3deg; }
.g3 { --r: -2deg; }
.g4 { --r: 6deg; }

@media (prefers-reduced-motion: no-preference) {
  .sky-gear-item figure { animation: sky-bob 11s ease-in-out infinite; }
  .g2 figure { animation-duration: 13s; }
  .g3 figure { animation-duration: 9.5s; }
  .g4 figure { animation-duration: 10.5s; }
}

.sky-gear-num { margin: 0; font: 700 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.g1 .sky-gear-num { color: #1f7a47; }
.g2 .sky-gear-num { color: var(--sky-orange-ink); }
.g3 .sky-gear-num { color: #b8371c; }
.g4 .sky-gear-num { color: #2f5fae; }
.sky-gear-item h3 { margin: 4px 0 6px; font: 400 32px/1 var(--sky-display); text-transform: uppercase; }
.sky-gear-list { margin: 0; color: var(--sky-ink-3); font: 11.5px/1.7 var(--mono); }

/* Learn: words left, the interactive screen right. */
.sky-duo {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 40px 64px;
}

.sky-duo .sky-more { margin-top: 10px; }
.sky-steps { display: grid; gap: 10px; margin: 0 0 6px; padding-left: 22px; color: var(--sky-ink-3); line-height: 1.5; }
.sky-steps b { color: var(--sky-ink); }
.sky-learn-fig { margin: 0; }
.sky-learn-fig[hidden] { display: none; }
.sky-learn-scroll { filter: drop-shadow(0 30px 30px rgba(18, 26, 43, .38)); }
.sky-learn-fig .ww-frame { box-shadow: none; }
.sky-learn-fig figcaption { margin-top: 14px; color: var(--sky-ink-3); font: 11.5px/1.6 var(--mono); letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.sky-swipe { display: none; }

/* More inside: one line each, the rest on request. */
.sky-features { display: grid; margin-top: 28px; border-top: 1px solid rgba(18, 26, 43, .18); }
.sky-feature { border-bottom: 1px solid rgba(18, 26, 43, .18); }

.sky-feature > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name sign" "line sign";
  align-items: center;
  gap: 2px 16px;
  padding: 18px 0;
  color: var(--sky-ink-3);
  font-size: 16px;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.sky-feature > summary::-webkit-details-marker { display: none; }
.sky-feature > summary b { grid-area: name; color: var(--sky-ink); font: 400 30px/1 var(--sky-display); text-transform: uppercase; }
.sky-feature > summary::after {
  content: "+";
  grid-area: sign;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--sky-ink);
  border-radius: 50%;
  color: var(--sky-ink);
  font: 400 22px/1 var(--grotesk);
}

.sky-feature[open] > summary::after { content: "\2212"; background: var(--sky-ink); color: var(--sky-cream); }
.sky-feature-body { display: grid; gap: 20px; padding: 0 0 28px; }
.sky-feature-body > p { max-width: 62ch; margin: 0; color: var(--sky-ink-2); font-size: 16px; line-height: 1.6; }
.sky-feature-body .ww-dark { width: 100%; max-width: 720px; }
.sky-match p { display: flex; align-items: baseline; gap: 14px; }
.sky-match span { min-width: 2.4em; font: 400 54px/.9 var(--sky-display); }
.sky-match .peak { color: var(--sky-orange); }
.sky-match .rms { color: var(--sky-purple); }

/* The film gallery keeps video-gallery.css; only its headline joins the page. */
body.ww-sky .neap-videos { position: relative; }
body.ww-sky .neap-videos h2 { font: 400 clamp(40px, 6.4vw, 84px)/.92 var(--sky-display); text-transform: uppercase; }
body.ww-sky .neap-videos-eyebrow { color: var(--sky-purple-ink); }
/* Smaller posters, and no paragraph under each (the film dialog still shows it). */
body.ww-sky .neap-video-rail { grid-auto-columns: min(210px, 56vw); gap: 16px; }
body.ww-sky .neap-video-card h3 { font-size: 17px; }
body.ww-sky .neap-video-youtube { color: var(--sky-purple-ink); }
body.ww-sky .neap-videos-footnote { border-top-color: rgba(18, 26, 43, .18); color: var(--sky-ink-3); }
body.ww-sky .neap-videos-footnote a { color: var(--sky-purple-ink); }

/* Before you buy. Formats are plain text: chips that look like buttons invite taps. */
.sky-formats { margin: 22px 0 0; color: var(--sky-ink-2); font-weight: 700; line-height: 1.8; }
.sky-formats span { margin-right: 6px; color: var(--sky-ink-3); font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sky-formats span + span,
.sky-formats span:not(:first-child) { margin-left: 18px; }
.sky-faq { display: grid; max-width: 860px; margin-top: 18px; border-top: 1px solid rgba(18, 26, 43, .18); }
.sky-faq details { border-bottom: 1px solid rgba(18, 26, 43, .18); }
.sky-faq summary { padding: 18px 40px 18px 0; position: relative; font-size: 18px; font-weight: 700; list-style: none; cursor: pointer; }
.sky-faq summary::-webkit-details-marker { display: none; }
.sky-faq summary::after { content: "+"; position: absolute; top: 14px; right: 6px; font: 400 26px/1 var(--grotesk); }
.sky-faq details[open] summary::after { content: "\2212"; }
.sky-faq details > p { margin: 0 0 18px; color: var(--sky-ink-2); line-height: 1.6; }
.sky-specs { width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 15px; }
.sky-specs th { width: 150px; padding: 10px 16px 10px 0; color: var(--sky-ink-3); font: 11.5px/1.5 var(--mono); letter-spacing: .08em; text-align: left; text-transform: uppercase; vertical-align: top; }
.sky-specs td { padding: 10px 0; color: var(--sky-ink-2); line-height: 1.5; }
.sky-specs tr + tr th,
.sky-specs tr + tr td { border-top: 1px solid rgba(18, 26, 43, .12); }

/* Last call. */
.sky-close { display: flex; flex-direction: column; align-items: center; padding-bottom: 96px; text-align: center; }
.sky-close h2 { color: #fff; font-size: clamp(52px, 9vw, 128px); line-height: .88; text-shadow: 0 30px 40px rgba(18, 26, 43, .25); }
.sky-close-kicker { margin: 0 0 14px; color: var(--sky-ink-3); font: 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.sky-close .sky-cta { justify-content: center; margin-top: 10px; }

/* ── the buy bar ───────────────────────────────────────────────────────────── */
.ww-buybar {
  position: fixed;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 12px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 10px 10px 20px;
  border-radius: 999px;
  background: var(--sky-cream);
  box-shadow: 0 24px 40px -12px rgba(18, 26, 43, .45);
  transform: translateY(160%);
  transition: transform .25s ease;
}

/* ww-sky.js shows it whenever no other Try or Buy button is on screen, which on a phone is
   from the first second: the hero's buttons start below the player. */
.ww-buybar.is-shown { transform: none; }
.ww-buybar-name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ww-buybar-name span { color: var(--sky-ink-3); font: 13px var(--mono); }

.sky-buybar-try,
.ww-buybar-cart {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font: 700 15px/1 var(--grotesk);
  text-decoration: none;
  cursor: pointer;
}

body.ww-sky .sky-buybar-try { background: var(--sky-purple); color: #fff; }
.ww-buybar-cart { background: var(--sky-purple); color: #fff; }
.ww-buybar-cart[hidden] { display: none; }
/* With something to buy, the cart is the purple one and the trial steps back. */
.ww-buybar:has(.ww-buybar-cart:not([hidden])) .sky-buybar-try { background: transparent; color: var(--sky-ink); box-shadow: inset 0 0 0 2px var(--sky-ink); }
.ww-buybar-cart.is-in-cart { background: var(--sky-ink); }

/* ── wide screens ──────────────────────────────────────────────────────────── */
@media (min-width: 980px) {
  .sky-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(400px, .8fr);
    grid-template-areas:
      "tag   hear"
      "title hear"
      "lede  hear"
      "film  hear"
      ".     hear";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 56px;
    padding-top: 40px;
  }

  .sky-lede { font-size: 19px; }
  .sky-hear { align-self: start; padding: 26px 26px 18px; transform: rotate(.6deg); }
  .sky-film { margin-top: 28px; }
  .sky-clip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sky-plugin { margin-top: 88px; }
  .sky-band { margin-top: 66px; }
  .sky-sec { padding-top: 128px; }
  .sky-close { padding-bottom: 128px; }
}

@media (max-width: 979px) {
  .sky-duo { grid-template-columns: minmax(0, 1fr); }
  .sky-gear { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .sky-lede { display: none; }
  .sky-tag { margin-bottom: 10px; }
  .sky-hero h1 { margin-bottom: 16px; }
  .sky-hear { padding: 14px 14px 6px; border-radius: 24px; }
  .sky-hear h2 { font-size: 26px; }
  .sky-ab { margin-top: 10px; }
  .sky-ab-what { margin-bottom: 10px; font-size: 14px; }
  .sky-hear .sky-buy .sky-trust { gap: 2px 10px; font-size: 10px; letter-spacing: .02em; }
  .ww-buybar { padding-left: 16px; }
  .sky-gear { gap: 32px 18px; }
  .sky-gear-item img { height: 150px; }
  .sky-gear-item h3 { font-size: 26px; }
  .sky-sec { padding-top: 72px; }
  .sky-plugin { margin-top: 40px; }
  .sky-band { margin-top: 26px; }
  .sky-feature > summary b { font-size: 26px; }
  .sky-specs th,
  .sky-specs td { display: block; width: auto; }
  .sky-specs th { padding-bottom: 0; }
  .sky-specs tr + tr td { border-top: 0; }
  .sky-close h2 { font-size: 52px; }
  .sky-close .sky-cta { flex-direction: column; align-items: stretch; }
  .sky-close .sky-cta .ww-btn { width: 100%; }
  .ww-buybar-name span { display: none; }
}

/* On a phone the Learn screen keeps its own width and scrolls sideways inside its
   frame, rather than shrinking to labels nobody can read. */
@media (max-width: 620px) {
  .sky-learn-scroll { overflow-x: auto; filter: none; }
  .sky-learn-fig .ww-frame-learn { width: 849px; }
  .sky-swipe { display: inline; }
}

@media (max-width: 440px) {
  .ww-buybar-name { display: none; }
  .ww-buybar { padding-left: 10px; }
  .sky-buybar-try,
  .ww-buybar-cart { flex: 1 1 0; justify-content: center; }
}

@media (max-width: 380px) {
  .sky-ab .ww-ab-controls { grid-template-columns: 64px minmax(0, 1fr); }
  .sky-ab .ww-ab-play { width: 64px; height: 64px; }
  .sky-ab .ww-ab-sides { min-height: 64px; }
  .sky-tab { padding: 0 12px; }
}