/* Product pages (/products/app, /products/desktop). Linked only there, via layout({ extraCss }).
   Black, like Apple's product pages. Yellow is the live lyric; brand blue is the button. Everything is scoped to .pp. */
.pp-page main { background: #000; }
.pp {
  --pp-y: #F2C94C; --pp-blue: #185A8C; --pp-blue-h: #1F6BA4;
  --pp-t: #F5F5F7; --pp-t2: #A1A1A6; --pp-t3: #6E6E73;
  --pp-s1: #161617; --pp-s2: #1D1D1F; --pp-s3: #2C2C2E;
  --pp-w: 1080px;
  color: var(--pp-t); background: #000; overflow-x: clip;
  font-family: var(--font); letter-spacing: -0.012em;
}
.pp * { box-sizing: border-box; }
.pp h1, .pp h2, .pp h3, .pp p { margin: 0; }
.pp h2 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.06; font-weight: 700; letter-spacing: -0.032em; text-wrap: balance; }
.pp h3 { font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -0.016em; }
.pp p { font-size: clamp(18px, 1.4vw, 19px); line-height: 1.5; color: var(--pp-t2); text-wrap: pretty; }
.pp-copy p + p, .pp-copy h2 + p { margin-top: 18px; }
.pp .pp-lede { font-size: clamp(19px, 2vw, 24px); line-height: 1.45; color: var(--pp-t2); max-width: 40ch; margin: 22px auto 0; }
.pp .pp-quiet { color: var(--pp-t3); }

/* ---- sections ---- */
.pp-sec { width: min(var(--pp-w), calc(100% - 2 * var(--gut))); margin: 0 auto; padding: 150px 0 0; }
.pp-center { text-align: center; }
.pp .pp-h-left { margin-bottom: 56px; }
.pp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.pp-split.pp-rev .pp-copy { order: 2; }
.pp-split h2 { font-size: clamp(34px, 4.2vw, 52px); }
.pp-vis { background: var(--pp-s1); border-radius: 32px; min-height: 460px; display: grid; place-items: center; padding: 48px 32px; overflow: hidden; }

/* ---- buttons ---- */
.pp-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 36px; }
.pp-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border-radius: 999px; background: var(--pp-blue); color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; transition: background-color .15s; }
.pp-btn:hover { background: var(--pp-blue-h); color: #fff; }
.pp-btn:focus-visible, .pp-link:focus-visible, .pp summary:focus-visible { outline: 2px solid var(--pp-y); outline-offset: 3px; }
.pp-btn.is-off { background: var(--pp-s3); color: var(--pp-t2); cursor: default; }
.pp-soon { font-size: 17px; color: var(--pp-t2); }
.pp-link { color: #7DB8E6; font-size: 19px; text-decoration: none; }
.pp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-sec > p:has(.pp-link) { margin-top: 32px; }

/* ---- hero ---- */
.pp-hero { width: min(var(--pp-w), calc(100% - 2 * var(--gut))); margin: 0 auto; padding: 96px 0 0; text-align: center; }
.pp-name { font-size: clamp(52px, 9vw, 104px); line-height: 1; font-weight: 700; letter-spacing: -0.045em; text-wrap: balance; }
.pp .pp-promise { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.25; font-weight: 600; color: var(--pp-t); letter-spacing: -0.02em; max-width: 30ch; margin: 22px auto 0; }
.pp .pp-fine { font-size: 15px; color: var(--pp-t3); margin-top: 20px; }
.pp-hero .pp-iphone-hero, .pp-hero .pp-room { margin-top: 80px; }

/* ---- the iPhone (CSS frame around the real screenshot) ---- */
.pp-iphone { width: min(340px, 74vw); aspect-ratio: 390 / 844; margin-left: auto; margin-right: auto; border-radius: 58px; padding: 11px; background: #1C1C1E; box-shadow: inset 0 0 0 1.5px #3A3A3C, 0 0 0 1px #000, 0 60px 120px -40px rgba(242,201,76,.22); position: relative; }
.pp-iphone::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 31%; height: 28px; border-radius: 20px; background: #000; z-index: 2; }
.pp-iphone-screen { width: 100%; height: 100%; border-radius: 47px; overflow: hidden; background: #000; }
.pp-iphone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- home screen ---- */
.pp-home { background: #0E2235; }
.pp-home-grid { display: grid; grid-template-columns: repeat(4, 72px); gap: 30px 26px; }
.pp-home-grid > span { width: 72px; height: 72px; border-radius: 17px; background: rgba(255,255,255,.08); }
.pp-home-grid > .pp-home-app { background: none; position: relative; }
.pp-home-app img { display: block; width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 12px 30px -8px rgba(0,0,0,.6); }
.pp-home-app b { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; }

/* ---- With BVs / No BVs ---- */
.pp-versions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px; text-align: left; }
.pp-ver { background: var(--pp-s1); border-radius: 28px; padding: 40px; }
.pp-ver b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.025em; color: var(--pp-t); }
.pp-ver span { display: block; margin-top: 12px; font-size: 18px; line-height: 1.5; color: var(--pp-t2); }
.pp-ver:first-child b { color: var(--pp-y); }

/* ---- big lyrics ---- */
.pp-stage { margin-top: 64px; border-radius: 36px; background: #0A0A0B; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 64px); text-align: center; }
.pp-stage p { font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-size: clamp(30px, 5.6vw, 72px); text-wrap: balance; }
.pp-stage .pp-st-sec { font-size: clamp(14px, 1.4vw, 18px); font-weight: 600; letter-spacing: 0; color: var(--pp-t3); margin-bottom: 22px; }
.pp-stage .pp-st-now { color: var(--pp-y); }
.pp-stage .pp-st-next { color: rgba(255,255,255,.62); margin-top: 18px; }
.pp-stage .pp-st-far { color: rgba(255,255,255,.24); margin-top: 18px; }
.pp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 64px; }
.pp-facts p { font-size: 17px; margin-top: 10px; }

/* ---- cards inside visuals ---- */
.pp-card { width: min(420px, 100%); background: var(--pp-s2); border-radius: 26px; padding: 26px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.pp-card b { color: var(--pp-t); font-weight: 600; }
.pp-saved-top { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--pp-t); padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pp-plane { width: 34px; height: 34px; border-radius: 9px; background: #F09A37; color: #fff; display: grid; place-items: center; }
.pp-plane svg { width: 22px; height: 22px; }
.pp-tog { margin-left: auto; width: 50px; height: 30px; border-radius: 999px; background: #30D158; position: relative; }
.pp-tog::after { content: ""; position: absolute; right: 2px; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.pp-saved-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.pp-saved-row img, .pp-saved-tile { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.pp-saved-tile { display: grid; place-items: center; background: var(--pp-blue); color: #fff; }
.pp-saved-tile .i { width: 26px; height: 26px; }
.pp-saved-row div { flex: 1; min-width: 0; }
.pp-saved-row b, .pp-list li b { display: block; font-size: 17px; }
.pp-saved-row span, .pp-list li span { display: block; font-size: 15px; color: var(--pp-t2); margin-top: 2px; }
.pp-ok { width: 24px; height: 24px; color: #30D158; flex: none; }

.pp-lock { background: linear-gradient(180deg, #1B3A57, #0E2235); padding: 34px 22px 22px; text-align: center; }
.pp-lock-time { font-size: 76px !important; line-height: 1 !important; font-weight: 600; color: #fff !important; letter-spacing: -0.03em; }
.pp-lock-np { margin-top: 64px; background: rgba(255,255,255,.12); border-radius: 22px; padding: 18px; text-align: left; }
.pp-lock-meta { display: flex; align-items: center; gap: 14px; }
.pp-lock-art { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; background: #2C2C2E; }
.pp-lock-meta b { display: block; font-size: 17px; color: #fff; }
.pp-lock-meta span { display: block; font-size: 15px; color: rgba(255,255,255,.65); }
.pp-lock-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin: 18px 0 14px; overflow: hidden; }
.pp-lock-bar i { display: block; width: 38%; height: 100%; background: #fff; }
.pp-lock-btns { display: flex; justify-content: center; gap: 44px; color: #fff; }
.pp-lock-btns .i { width: 34px; height: 34px; }
.pp-player { background: var(--pp-s2); padding: 22px; }

.pp-list-h { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; }
.pp-list-h b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.pp-share { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--pp-blue); color: #fff; font-size: 15px; font-weight: 600; }
.pp-share .i { width: 18px; height: 18px; }
.pp-list ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.pp-list li { counter-increment: s; position: relative; padding: 14px 0 14px 40px; border-top: 1px solid rgba(255,255,255,.08); }
.pp-list li::before { content: counter(s); position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-size: 17px; font-weight: 600; color: var(--pp-t3); font-variant-numeric: tabular-nums; }
.pp-list li.on { background: rgba(242,201,76,.1); margin: 0 -14px; padding-left: 54px; padding-right: 14px; border-radius: 14px; border-top-color: transparent; }
.pp-list li.on::before { left: 18px; color: var(--pp-y); }
.pp-list li.on b { color: var(--pp-y); }
.pp-list li.on + li { border-top-color: transparent; }

/* ---- Selections ---- */
.pp-sels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.pp-sels span { aspect-ratio: 1; border-radius: 24px; background: var(--c); display: flex; align-items: flex-end; padding: 26px; text-align: left; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; color: #fff; }

/* ---- Listen (coming) ---- */
.pp-listen { padding-bottom: 20px; }
.pp .pp-tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(242,201,76,.14); color: var(--pp-y); font-size: 15px; font-weight: 600; margin-bottom: 22px; }
.pp-listen h2 { font-size: clamp(56px, 9vw, 104px); letter-spacing: -0.045em; }
.pp-listen .pp-quiet { margin-top: 18px; font-size: 17px; }

/* ---- Sunday steps ---- */
.pp-steps { list-style: none; margin: 0; padding: 0; counter-reset: st; border-top: 1px solid rgba(255,255,255,.14); }
.pp-steps li { counter-increment: st; display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 40px; align-items: baseline; padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.pp-steps li::before { content: counter(st); font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--pp-y); font-variant-numeric: tabular-nums; }
.pp-steps h3 { font-size: 26px; line-height: 1.2; letter-spacing: -0.022em; }
.pp-steps p { font-size: 19px; }

/* ---- what you need ---- */
.pp-needs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pp-need { background: var(--pp-s1); border-radius: 24px; padding: 34px; }
.pp-need p { font-size: 17px; margin-top: 10px; }
.pp .pp-note { font-size: 16px; color: var(--pp-t3); margin-top: 24px; }

/* ---- FAQ ---- */
.pp-faq-list { max-width: 860px; border-top: 1px solid rgba(255,255,255,.14); }
.pp-faq details { border-bottom: 1px solid rgba(255,255,255,.14); }
.pp-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; font-size: 21px; font-weight: 600; letter-spacing: -0.016em; color: var(--pp-t); }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-plus { position: relative; width: 18px; height: 18px; flex: none; }
.pp-plus::before, .pp-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--pp-t2); transition: transform .2s; }
.pp-plus::after { transform: rotate(90deg); }
.pp-faq details[open] .pp-plus::after { transform: rotate(0); }
.pp-faq details p { padding: 0 48px 28px 0; font-size: 18px; max-width: 70ch; }
.pp-faq details a { color: #7DB8E6; }

/* ---- closing ---- */
.pp-end { text-align: center; padding-bottom: 150px; }
.pp-end h2 { font-size: clamp(40px, 6.4vw, 76px); }
.pp .pp-cross { margin-top: 56px; font-size: 17px; color: var(--pp-t3); }
.pp .pp-cross .pp-link { font-size: 17px; margin-left: 4px; }

/* ================= Desktop: TV, MacBook, console ================= */
.pp-room { position: relative; width: 100%; aspect-ratio: 16 / 9.6; }
.pp-tv { width: 100%; border-radius: 12px; padding: 1.2%; background: #0C0C0D; box-shadow: inset 0 0 0 1px #2A2A2C, 0 50px 100px -40px rgba(242,201,76,.16); }
.pp-tv-screen { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: 4px; container-type: inline-size; display: grid; place-items: center; }
.pp-tv-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.pp-tv-words { text-align: center; padding: 0 9cqw; }
.pp-tv-words p { font-size: 4.8cqw; line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; color: rgba(255,255,255,.3); }
.pp-tv-words p + p { margin-top: 2cqw; }
.pp-tv-words .y { color: var(--pp-y); }
.pp-room-tv { position: absolute; left: 2%; top: 0; width: 70%; }
.pp-room-mac { position: absolute; right: 1%; bottom: 0; width: 42%; filter: drop-shadow(0 40px 50px rgba(0,0,0,.9)); }

.pp-mac-lid { border-radius: 14px 14px 4px 4px; padding: 2.4% 2.4% 3%; background: #0E0E10; box-shadow: inset 0 0 0 1.5px #38383A; }
.pp-mac-screen { position: relative; aspect-ratio: 16 / 10; background: #111113; overflow: hidden; border-radius: 3px; container-type: inline-size; }
.pp-mac-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.pp-mac-base { height: 0; padding-bottom: 3.4%; margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #4A4A4D, #2A2A2C 60%, #1A1A1C); position: relative; }
.pp-mac-base::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 15%; height: 40%; border-radius: 0 0 8px 8px; background: #2A2A2C; }

.pp-con { position: absolute; inset: 0; display: grid; grid-template-columns: 30% 1fr; font-family: var(--font); }
.pp-con-side { background: #1A1A1C; padding: 4cqw 2.6cqw; display: flex; flex-direction: column; gap: 1.4cqw; }
.pp-con-side b { font-size: 2.5cqw; color: #fff; margin-bottom: 1.4cqw; }
.pp-con-side i { font-style: normal; font-size: 2.2cqw; color: #A1A1A6; padding: 1.2cqw 1.6cqw; border-radius: 1.2cqw; }
.pp-con-side i.on { background: rgba(242,201,76,.16); color: #F2C94C; }
.pp-con-main { padding: 4cqw 3.4cqw; display: grid; grid-template-rows: 1fr 1fr auto; gap: 2.6cqw; }
.pp-con-pane { border-radius: 1.8cqw; background: #000; box-shadow: inset 0 0 0 1px #2C2C2E; display: grid; place-items: center; text-align: center; position: relative; padding: 2cqw; }
.pp-con-pane.live { box-shadow: inset 0 0 0 0.35cqw #E5484D; }
.pp-con-pane span { position: absolute; left: 2cqw; top: 1.6cqw; font-size: 1.9cqw; font-weight: 600; color: #8E8E93; }
.pp-con-pane.live span { color: #E5484D; }
.pp-con-pane p { font-size: 3.2cqw; line-height: 1.15; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.pp-con-pane.live p { color: var(--pp-y); }
.pp-con-bar { display: flex; gap: 1.6cqw; }
.pp-con-bar em { font-style: normal; flex: 1; text-align: center; font-size: 2cqw; font-weight: 600; padding: 1.5cqw 0; border-radius: 99px; background: #2C2C2E; color: #fff; }
.pp-con-bar em:first-child { background: #185A8C; }

.pp-two { display: grid; grid-template-columns: 1.06fr 1fr; gap: 56px; align-items: end; margin-top: 72px; text-align: left; }
.pp-two figure { margin: 0; }
.pp-two figcaption { margin-top: 30px; font-size: 17px; line-height: 1.5; color: var(--pp-t2); }
.pp-two figcaption b { display: block; font-size: 21px; color: var(--pp-t); font-weight: 600; margin-bottom: 4px; }
.pp-two .pp-mac { padding: 0 6%; }

.pp-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; margin-top: 64px; }
.pp-flow-box { background: var(--pp-s1); border-radius: 26px; padding: 30px 28px 26px; text-align: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.pp-flow-box.live { box-shadow: inset 0 0 0 2px #E5484D; }
.pp-flow-k { display: block; font-size: 15px; font-weight: 600; color: var(--pp-t2); }
.pp-flow-box.live .pp-flow-k { color: #FF6369; }
.pp-flow-box p { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; color: var(--pp-t); margin: 22px 0; }
.pp-flow-box.live p { color: var(--pp-y); }
.pp-flow-box small { font-size: 15px; color: var(--pp-t3); }
.pp-flow-go { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pp-flow-go small { font-size: 15px; color: var(--pp-t2); font-weight: 600; }

.pp-key { display: inline-grid; place-items: center; min-width: 64px; height: 64px; padding: 0 14px; border-radius: 14px; background: #2C2C2E; box-shadow: inset 0 -4px 0 rgba(0,0,0,.45), inset 0 0 0 1px #3A3A3C; color: #fff; font-size: 24px; font-weight: 600; }
.pp-key.wide { min-width: 96px; font-size: 19px; }
.pp-key-pair { display: inline-flex; gap: 10px; }
.pp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; text-align: left; }
.pp-keys > div { background: var(--pp-s1); border-radius: 26px; padding: 36px 32px; }
.pp-keys h3 { margin-top: 30px; }
.pp-keys p { font-size: 17px; margin-top: 10px; }

/* ================= smaller screens ================= */
@media (max-width: 1000px) {
  .pp-facts { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}
@media (max-width: 760px) {
  .pp-sec { padding-top: 96px; }
  .pp-hero { padding-top: 56px; }
  .pp-hero .pp-iphone-hero, .pp-hero .pp-room { margin-top: 52px; }
  .pp-split { grid-template-columns: 1fr; gap: 36px; }
  .pp-split.pp-rev .pp-copy { order: 0; }
  .pp-vis { min-height: 0; padding: 36px 18px; border-radius: 26px; }
  .pp-h-left { margin-bottom: 36px; }
  .pp-versions, .pp-needs, .pp-keys, .pp-sels, .pp-two { grid-template-columns: 1fr; }
  .pp-steps li { grid-template-columns: 48px minmax(0, 1fr); padding: 26px 0; }
  .pp-steps li::before { font-size: 32px; grid-row: span 2; }
  .pp-steps h3 { font-size: 21px; }
  .pp-steps p { font-size: 17px; margin-top: 8px; }
  .pp-versions, .pp-sels, .pp-keys, .pp-two, .pp-flow { margin-top: 44px; }
  .pp-ver, .pp-need { padding: 28px; }
  .pp-sels span { aspect-ratio: 2.4; }
  .pp-stage { margin-top: 44px; border-radius: 26px; }
  .pp-facts { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
  .pp-home-grid { grid-template-columns: repeat(4, 58px); gap: 26px 18px; }
  .pp-home-grid > span, .pp-home-app img { width: 58px; height: 58px; border-radius: 14px; }
  .pp-home-app b { top: 64px; font-size: 12px; }
  .pp-lock-time { font-size: 60px !important; }
  .pp-lock-np { margin-top: 44px; }
  .pp-flow { grid-template-columns: 1fr; gap: 18px; }
  .pp-two { gap: 48px; }
  .pp-room { aspect-ratio: auto; display: flex; flex-direction: column; }
  .pp-room-tv { position: static; width: 100%; }
  .pp-room-mac { position: static; width: 80%; margin: -6% 0 0 auto; }
  .pp-faq summary { font-size: 19px; padding: 22px 0; }
  .pp-faq details p { padding-right: 0; font-size: 17px; }
  .pp-end { padding-bottom: 104px; }
}