/* sky-home.css — the home page, on top of ww-sky.css.
 *
 * The look is Amit's Claude Design file "Surreal Home" (October 2026): the same sky,
 * grain, Anton headlines and tilted pills as the Win Win page, with a giant "Win Win."
 * headline, a purple band, the six stations as floating faceplates and a pill newsletter.
 *
 * The order is ours, from a week of Microsoft Clarity on this page: nearly everyone on a
 * phone, half inside Instagram, a third gone in 30 seconds without a tap, and many
 * tapping "Plugins" again and again looking for the product. So on a phone the first
 * screen is the headline, Meet Win Win and Try, then the player. The rest is shorter
 * than it was and the extra words sit behind "More".
 *
 * Everything here is scoped to body.sky-home, so ww-sky.css and the product page are
 * unchanged. No inline styles anywhere: `style-src self` drops them silently.
 */

/* ── first screen ──────────────────────────────────────────────────────────── */
/* On a phone: tag, headline, one line, the two buttons, the player, then the price.
   .sky-buy steps aside (display: contents) so its buttons and its price line can sit
   either side of the player; on wide screens it is one block again. */
.sky-home .sky-hero {
  grid-template-areas:
    "tag"
    "title"
    "lede"
    "cta"
    "hear"
    "price"
    "phone";
}

.sky-home .sky-buy { display: contents; }
.sky-home .sky-cta { grid-area: cta; margin-top: 18px; }
.sky-home-price { grid-area: price; }

.sky-home .sky-tag {
  background: var(--sky-orange);
  color: #17160f;
  transform: rotate(3deg);
}

.sky-home .sky-hero h1 {
  font-size: clamp(84px, 13vw, 188px);
  line-height: .86;
}

/* "loudness that shows its work." Lower case like the design; the markup keeps
   sentence case for screen readers. */
.sky-home .sky-hero h1 span {
  margin-top: 10px;
  font: 700 clamp(27px, 3.6vw, 52px)/1.02 var(--grotesk);
  letter-spacing: -.035em;
  text-transform: lowercase;
  white-space: nowrap;
}

.sky-home .sky-hero h1 em {
  color: var(--sky-purple-ink);
  font: italic 400 1em/1 var(--mono);
  letter-spacing: -.06em;
}


/* The price line: the price, the trial terms, and a quiet Buy for whoever is ready. */
.sky-home-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 12px 0 0;
  color: var(--sky-ink-3);
  font: 11px/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sky-home-price strong { color: var(--sky-ink); font: 400 26px/1 var(--sky-display); letter-spacing: .01em; }

.sky-home-cart {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--sky-purple-ink);
  font: 700 12px/1 var(--mono);
  letter-spacing: .1em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-transform: uppercase;
  text-underline-offset: 5px;
  cursor: pointer;
}

.sky-home-cart:hover { color: var(--sky-ink); }
.sky-home-cart[hidden] { display: none; }

.sky-home .sky-hear { margin-top: 20px; }

/* "Hear 8 more" (ww-sky.css .sky-next) closes the card. */
.sky-home .sky-hear .sky-next { margin: 18px 0 8px; }

/* ── the band: purple on this page, orange on the Win Win page ─────────────── */
.sky-home .sky-marquee {
  background: var(--sky-purple);
  transform: rotate(2deg);
  box-shadow: 0 30px 40px -20px rgba(60, 30, 110, .5);
}

.sky-home .sky-marquee-track { color: var(--sky-cream); }
.sky-home .sky-marquee-track .hot { color: #f2a54f; }

/* ── the six stations, floating ────────────────────────────────────────────── */
.sky-stations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 18px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.sky-stations a {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--sky-ink);
  text-align: center;
  text-decoration: none;
}

.sky-stations img {
  display: block;
  order: 0;
  width: var(--w, 90%);
  height: auto;
  border-radius: 4px;
  box-shadow: 0 24px 40px -18px rgba(18, 26, 43, .5);
  transform: rotate(var(--r, 0deg));
}

/* The shadow on the ground, between the faceplate and its name. */
.sky-stations a::after {
  content: "";
  display: block;
  order: 1;
  width: 64%;
  height: 18px;
  margin-top: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(40, 40, 30, .4), transparent 70%);
}

.sky-station-name { order: 2; margin-top: 6px; font-size: 17px; font-weight: 700; line-height: 1.2; }
.sky-station-name span { margin-right: 4px; font: 700 12px var(--mono); }
.sky-station-tag { order: 3; margin-top: 4px; color: var(--sky-ink-3); font: 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sky-stations a:hover .sky-station-name { color: var(--sky-purple-ink); }

.sky-stations .s1 { --r: -1.5deg; --w: 82%; }
.sky-stations .s2 { --r: 4deg; --w: 74%; }
.sky-stations .s3 { --r: -2deg; --w: 94%; }
.sky-stations .s4 { --r: 3deg; --w: 100%; }
.sky-stations .s5 { --r: -3deg; --w: 80%; }
.sky-stations .s6 { --r: 2.5deg; --w: 88%; }
.sky-stations .s1 .sky-station-name span { color: #a8302e; }
.sky-stations .s2 .sky-station-name span { color: #a85409; }
.sky-stations .s3 .sky-station-name span { color: #1f7a47; }
.sky-stations .s4 .sky-station-name span { color: var(--sky-purple); }
.sky-stations .s5 .sky-station-name span { color: #2f5fae; }
.sky-stations .s6 .sky-station-name span { color: #80650a; }

@media (prefers-reduced-motion: no-preference) {
  .sky-stations img { animation: sky-bob 10s ease-in-out infinite; }
  .sky-stations a::after { animation: sky-shadow 10s ease-in-out infinite; }
  .sky-stations .s2 img, .sky-stations .s2 a::after { animation-duration: 12.9s; }
  .sky-stations .s3 img, .sky-stations .s3 a::after { animation-duration: 9s; }
  .sky-stations .s4 img, .sky-stations .s4 a::after { animation-duration: 11.6s; }
  .sky-stations .s5 img, .sky-stations .s5 a::after { animation-duration: 10.3s; }
  .sky-stations .s6 img, .sky-stations .s6 a::after { animation-duration: 8.4s; }
}

.sky-link { margin: 36px 0 0; }
.sky-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--sky-purple-ink);
  font: 700 13px/1.3 var(--mono);
  letter-spacing: .08em;
}
.sky-link a::after { content: "\2192"; }

/* ── Mirror EQ and Musical bands ───────────────────────────────────────────── */
.sky-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 28px 64px;
}

.sky-split .sky-head h2 { font-size: clamp(40px, 5.4vw, 72px); }
.sky-split .sky-more { margin-top: 8px; }
.sky-aside { max-width: 52ch; margin: 0 0 8px; color: var(--sky-ink-3); font: 12px/1.7 var(--mono); }

/* The panels are full of controls, so they stay still. Only the shadow breathes. */
.sky-panel { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; }
.sky-panel .ww-dark { width: 100%; box-shadow: 0 30px 40px -18px rgba(18, 26, 43, .55); }
.sky-panel::after {
  content: "";
  display: block;
  order: 1;
  width: 60%;
  height: 26px;
  margin-top: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(40, 40, 30, .38), transparent 70%);
}
.sky-panel figcaption { order: 2; margin-top: 4px; 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-panel::after { animation: sky-shadow 14s ease-in-out infinite; }
}

/* ── the maker ─────────────────────────────────────────────────────────────── */
.sky-maker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 32px 72px;
}

.sky-maker-shot { position: relative; max-width: 560px; margin: 0; aspect-ratio: 1.15; }

.sky-maker-shot img {
  position: absolute;
  height: auto;
  box-shadow: 0 40px 50px -24px rgba(18, 26, 43, .5);
}

.sky-maker-portrait { top: 6%; left: 0; width: 84%; --r: -2.5deg; transform: rotate(var(--r)); }
.sky-maker-inset { top: 34%; right: 0; width: 28%; --r: 5deg; transform: rotate(var(--r)); }

@media (prefers-reduced-motion: no-preference) {
  .sky-maker-portrait { animation: sky-bob 13s ease-in-out infinite; }
  .sky-maker-inset { animation: sky-bob 9s ease-in-out infinite; }
}

.sky-maker .sky-head > p { max-width: 44ch; margin-bottom: 26px; }

/* ── newsletter: the design's tilted pill ──────────────────────────────────── */
.sky-news { display: flex; flex-direction: column; align-items: center; padding-bottom: 88px; text-align: center; }
.sky-news .sky-eyebrow { color: var(--sky-ink-3); }
.sky-news h2 { margin: 0 0 10px; font: 400 clamp(44px, 6vw, 80px)/.95 var(--sky-display); text-transform: uppercase; }
.sky-news-line { margin: 0 0 22px; color: var(--sky-ink-3); font-size: 17px; }

/* The class names are the old home page's: newsletter.js keeps working unchanged and
   test/touch-scroll.test.js finds the button by .hm-subscribe-btn. */
body.sky-home .hm-subscribe {
  display: flex;
  overflow: hidden;
  width: min(480px, 100%);
  min-width: 0;
  padding: 6px;
  border-radius: 999px;
  background: var(--sky-cream);
  box-shadow: 0 30px 34px -20px rgba(18, 26, 43, .5);
  transform: rotate(-1.5deg);
}

body.sky-home .hm-subscribe input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  background: none;
  color: var(--sky-ink);
  font-family: var(--grotesk);
  font-size: 16px;
}

body.sky-home .hm-subscribe input:focus-visible { outline: 2px solid var(--sky-purple); outline-offset: -2px; }

body.sky-home .hm-subscribe-btn {
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--sky-orange);
  color: #17160f;
  font-family: var(--grotesk);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

body.sky-home .hm-subscribe-btn:hover:not(:disabled) { background: #f2a54f; }
body.sky-home .hm-subscribe-btn:disabled { cursor: default; opacity: .6; }

body.sky-home .hm-news-note {
  margin: 16px 0 0;
  color: var(--sky-ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.sky-home .hm-news-note.is-error {
  color: #a8302e;
  font-family: var(--grotesk);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

/* The buy bar's name goes to the Win Win page. */
body.sky-home .ww-buybar-name { text-decoration: none; }
body.sky-home .ww-buybar-name:hover { color: var(--sky-purple-ink); }

/* ── wide screens ──────────────────────────────────────────────────────────── */
@media (min-width: 980px) {
  .sky-home .sky-hero {
    grid-template-areas:
      "tag   hear"
      "title hear"
      "lede  hear"
      "buy   hear"
      "phone hear";
    grid-template-rows: auto auto auto auto 1fr;
  }

  .sky-home .sky-hero h1 span { margin-left: clamp(0px, 3vw, 48px); font-size: clamp(28px, 3vw, 44px); }
  .sky-home .sky-buy { display: flex; gap: 6px; margin: 30px 0 0 clamp(0px, 3vw, 48px); }
  .sky-home .sky-cta { margin-top: 0; }
  .sky-home-price { margin-top: 10px; }
  /* The 10% box (phone-download.js) lines up with the buttons and the price above it. */
  .sky-home .sky-hero > .pd-slot { margin-left: clamp(0px, 3vw, 48px); }
  .sky-home .sky-hear { margin-top: 12px; }

  .sky-stations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 56px; margin-top: 56px; }
  /* The design's uneven heights, so the rack reads as floating rather than a grid. */
  .sky-stations .s2 { margin-top: 80px; }
  .sky-stations .s3 { margin-top: 10px; }
  .sky-stations .s4 { margin-top: -20px; }
  .sky-stations .s5 { margin-top: 60px; }
  .sky-station-name { font-size: 20px; }
  .sky-station-tag { font-size: 10.5px; }

  .sky-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .sky-split.is-flipped { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .sky-split.is-flipped .sky-panel { order: -1; }
  .sky-maker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* The film gallery above already ends in its own footnote and padding. */
  .sky-maker { padding-top: 40px; }
}

@media (max-width: 640px) {
  .sky-home .sky-tag { margin-bottom: 8px; }
  .sky-home .sky-hero h1 { margin-bottom: 0; font-size: 76px; }
  /* One line, small enough for Safari's wider glyphs at 320px. */
  .sky-home .sky-hero h1 span { margin-top: 6px; font-size: clamp(16px, 5.2vw, 27px); }
  .sky-home .sky-cta { margin-top: 16px; }
  /* Meet Win Win and Try side by side: both on the first screen, one tap each. */
  .sky-home .sky-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sky-home .sky-cta .ww-btn { min-height: 52px; padding: 0 12px; font-size: 15px; }
  .sky-home .sky-hear { margin-top: 18px; }
  .sky-split .sky-head h2 { font-size: 40px; }
  /* Two faceplates a row, names level along the bottom of each row. */
  .sky-stations a { height: 100%; justify-content: flex-end; }
  .sky-maker { padding-top: 24px; }
  .sky-maker-shot { width: 100%; }
  .sky-news { padding-bottom: 72px; }
}