/* Pocket Jam, set in Apple's design language: the system font (SF Pro on Apple devices), system grays,
   one tint colour (the app's tangerine), translucent materials, generous space, and calm, purposeful motion.
   Light and dark appearance follow the device. */
:root {
  color-scheme: light dark;
  /* system colours, light */
  --bg: #ffffff;
  --bg-2: #f5f5f7;          /* grouped / secondary background */
  --card: #ffffff;           /* surface on top of --bg-2 */
  --fill: rgba(120, 120, 128, .12);
  --fill-2: rgba(120, 120, 128, .2);
  --label: #1d1d1f;
  --label-2: #6e6e73;        /* secondary label */
  --label-3: #86868b;        /* tertiary label */
  --sep: rgba(60, 60, 67, .18);
  --material: rgba(255, 255, 255, .72);
  --shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .08);

  --tint: #ff5a1f;           /* the app's accent, used sparingly like a system tint */
  --tint-dark: #c2410c;      /* tint for text on light backgrounds (contrast) */
  --record: #ff3b30;
  --song: #5fa3dd;
  --fresh: #ffc53d;
  --take: #ff7a45;

  /* always-dark surfaces (the app's deck) */
  --deck: #1c1c1e;
  --deck-2: #2c2c2e;
  --raised: #3a3a3c;
  --line: #48484a;

  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Roboto, system-ui, sans-serif;
  --round: ui-rounded, 'SF Pro Rounded', var(--sans);
  --ease: cubic-bezier(.25, .1, .25, 1);        /* UIKit default */
  --spring: cubic-bezier(.32, .72, 0, 1);       /* iOS sheet / spring-like settle */

  --g: clamp(20px, 5vw, 64px);
  --section: clamp(96px, 12vw, 168px);
  --head-gap: clamp(40px, 5vw, 64px);
  --max: 1080px;
  --r-xl: 32px;
  --r-lg: 22px;
  --r-md: 14px;
  --btn: 50px;
  --w: 320px; /* iPhone frame width */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-2: #1c1c1e;
    --card: #2c2c2e;
    --fill: rgba(120, 120, 128, .24);
    --fill-2: rgba(120, 120, 128, .32);
    --label: #f5f5f7;
    --label-2: #a1a1a6;
    --label-3: #8e8e93;
    --sep: rgba(84, 84, 88, .6);
    --material: rgba(22, 22, 23, .72);
    --shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .4);
    --tint: #ff6a33;
    --tint-dark: #ff8a5c;
    --record: #ff453a;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--label); font: 17px/1.47 var(--sans); letter-spacing: -.022em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; letter-spacing: inherit; }

/* Type: two-tone headlines, as on apple.com. ".serif" marks the quieter second half. */
.serif { color: var(--label-2); font-weight: inherit; font-style: normal; }
.mono { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.tiny { font-size: 14px; line-height: 1.43; letter-spacing: -.016em; color: var(--label-2); }
.center { text-align: center; }
.kicker { color: var(--tint-dark); font-size: 17px; font-weight: 600; letter-spacing: -.022em; margin-bottom: 12px; }
.sec-head { max-width: var(--max); margin: 0 auto var(--head-gap); }
.sec-head .tiny { margin-top: 16px; }
h1, h2, h3 { text-wrap: balance; }
h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.07; letter-spacing: -.028em; font-weight: 700; }
.grain { display: none; }

/* ── navigation bar: translucent material with a hairline ── */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 52px; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--g); color: var(--label); background: var(--material); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: .5px solid var(--sep); }
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -.022em; }
.mark sup { display: none; }
.mark::before { content: ''; width: 26px; height: 26px; border-radius: 7px; background: radial-gradient(circle, #fff 0 9%, var(--tint) 10% 30%, #1c1c1e 31%) ; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .15); }
.join-link { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--tint); color: #fff; font-size: 14px; font-weight: 600; transition: filter .2s var(--ease); }
.join-link:hover { filter: brightness(1.08); }

/* ── buttons: filled, tinted, and gray, all capsules ── */
.drop, .cta, .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--btn); padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer; font-size: 17px; font-weight: 600; letter-spacing: -.022em; transition: transform .2s var(--ease), filter .2s var(--ease), background .2s var(--ease); }
.drop, .cta { background: var(--tint); color: #fff; }
.ghost { background: var(--fill); color: var(--tint-dark); }
.drop:hover, .cta:hover { filter: brightness(1.08); }
.ghost:hover { background: var(--fill-2); }
.drop:active, .cta:active, .ghost:active, .stepper button:active { transform: scale(.97); filter: brightness(.92); }
.cta span { transition: transform .2s var(--ease); }
.cta:hover span { transform: translate(2px, -2px); }

/* ── 1. hero ── */
.stage { position: relative; isolation: isolate; min-height: 100svh; padding: 120px var(--g) 72px; max-width: calc(var(--max) + 2 * var(--g)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.semi, .jam-hero { display: none; }
.hero-copy .kicker { margin-bottom: 0; }
.big { font-weight: 700; font-size: clamp(40px, 5.2vw, 72px); line-height: 1.05; letter-spacing: -.03em; max-width: 12ch; }
.big .serif { display: inline-block; transition: transform .5s var(--spring); }
.big em { font-style: normal; color: var(--tint); }
.semi { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--tint-dark); vertical-align: super; margin-left: 8px; font-variant-numeric: tabular-nums; }
.stage-sub { max-width: 30em; color: var(--label-2); font-size: clamp(19px, 1.5vw, 21px); line-height: 1.4; letter-spacing: -.02em; }
.needle-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.drop .dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
.drop.on .dot { animation: pulse 1.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
.perks { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.perks li { display: flex; align-items: center; gap: 10px; color: var(--label-2); font-size: 15px; letter-spacing: -.012em; }
.perks li::before { content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* the record player, rendered like a product shot */
.turntable { position: relative; width: min(100%, 500px); aspect-ratio: 1; justify-self: center; }
.platter { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #2c2c2e 60%, #111 61%, #1f1f21 64%, #111 100%); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .55), 0 0 0 10px var(--bg-2), 0 0 0 10.5px var(--sep); }
.vinyl { position: absolute; inset: 4%; border-radius: 50%; background:
  conic-gradient(from 20deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.10) 30deg, rgba(255,255,255,0) 60deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,.08) 210deg, rgba(255,255,255,0) 240deg),
  repeating-radial-gradient(circle, #111 0 2px, #1a1a1c 2px 4px);
  animation: spin 1.8s linear infinite; animation-play-state: paused; }
.vinyl.on { animation-play-state: running; }
.label { position: absolute; inset: 33%; border-radius: 50%; background: var(--tint); display: grid; place-items: center; align-content: center; gap: 2px; color: #fff; text-align: center; }
.lbl-top { font-weight: 700; font-size: clamp(10px, 1vw, 13px); letter-spacing: .02em; }
.lbl-mid { color: #fff; font-weight: 600; font-size: clamp(16px, 2.2vw, 28px); line-height: 1.1; }
.lbl-bot { display: none; }
.spindle { position: absolute; width: 4%; height: 4%; border-radius: 50%; background: #e5e5ea; left: 48%; top: 48%; }
@keyframes spin { to { transform: rotate(360deg); } }
.arm { position: absolute; right: 2%; top: 2%; width: 50%; height: 60%; transform-origin: 88% 8%; transform: rotate(-4deg); transition: transform 1.1s var(--spring); pointer-events: none; }
.arm.down { transform: rotate(15deg); }
.pivot { position: absolute; right: 6%; top: 2%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #d1d1d6 30%, #636366 32%, #3a3a3c 70%); }
.rod { position: absolute; right: 12%; top: 8%; width: 2.2%; height: 86%; background: linear-gradient(90deg, #8e8e93, #e5e5ea, #8e8e93); border-radius: 4px; transform: rotate(18deg); transform-origin: top; }
.head { position: absolute; right: 38%; bottom: 2%; width: 12%; height: 9%; background: #e5e5ea; border-radius: 3px; transform: rotate(18deg); box-shadow: inset 0 -6px 0 var(--tint); }

/* ── 2. transpose: a grouped panel with a stepper ── */
.toy { background: var(--bg-2); padding: var(--section) var(--g); position: relative; z-index: 4; }
.keys-wrap { max-width: var(--max); margin: 0 auto; }
.keyboard { position: relative; display: flex; height: clamp(140px, 22vw, 250px); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: #1c1c1e; padding: 0 4px 8px; }
.keyboard .w { flex: 1; margin: 0 2px; background: #fff; border-radius: 0 0 10px 10px; position: relative; transition: background .25s var(--ease), transform .25s var(--ease); }
.keyboard .b { position: absolute; top: 0; width: calc(100% / 15 * .62); height: 60%; background: #1c1c1e; border-radius: 0 0 8px 8px; z-index: 2; transition: background .25s var(--ease); }
.keyboard .hit { background: var(--tint) !important; }
.keyboard .w.hit { transform: translateY(2px); }
.keyboard .w .nm { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 500; color: #8e8e93; }
.keyboard .w.hit .nm { color: #fff; }
/* like a UIStepper: one pill, two halves, a hairline between */
.stepper { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 40px 0 16px; }
.stepper button { width: 64px; height: 44px; border: 0; cursor: pointer; background: var(--card); color: var(--label); font-size: 26px; font-weight: 400; line-height: 1; box-shadow: var(--shadow); transition: transform .15s var(--ease), background .2s var(--ease); }
.stepper #down { border-radius: 12px 0 0 12px; order: 1; }
.stepper #up { border-radius: 0 12px 12px 0; order: 2; margin-left: -20px; border-left: .5px solid var(--sep); }
.stepper output { order: 0; min-width: 3.4ch; text-align: right; font-size: 34px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stepper button:hover { background: var(--bg); }
.toy .tiny { max-width: 34em; margin: 0 auto; }

/* ── how it works ── */
.how { padding: var(--section) var(--g); background: var(--bg); }
.how-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; }
.steps-col .step { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; opacity: .3; transition: opacity .5s var(--ease); }
.steps-col .step.on { opacity: 1; }
.step-n { font-size: 15px; font-weight: 600; color: var(--tint-dark); font-variant-numeric: tabular-nums; }
.step h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.026em; font-weight: 700; }
.step p { color: var(--label-2); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.42; letter-spacing: -.02em; max-width: 26em; }
.step .device { display: none; }
.stick { position: sticky; top: 60px; height: calc(100vh - 80px); display: grid; place-items: center; }
.stick .device { --w: min(314px, calc((100vh - 120px) / 2.14)); position: relative; }
.layer { position: absolute; inset: 0; opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .5s var(--ease), transform .7s var(--spring); }
.layer.on { opacity: 1; transform: none; }
.stack { position: relative; }
.stack .layer:first-child { position: relative; }

/* iPhone frame */
.iphone { position: relative; width: var(--w); /* height follows the screenshot, so the whole screen always fits */ border-radius: calc(var(--w) * .17); padding: calc(var(--w) * .034); background: linear-gradient(145deg, #48484a, #1c1c1e 35%, #2c2c2e 70%, #545456); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 0 0 calc(var(--w) * .012) #0b0b0c, 0 40px 80px -30px rgba(0, 0, 0, .35), 0 20px 40px -20px rgba(0, 0, 0, .2); flex: none; }
.iphone::before, .iphone::after { content: ''; position: absolute; width: calc(var(--w) * .012); border-radius: 2px; background: linear-gradient(90deg, #2a2a2e, #5a5a60); }
.iphone::before { left: calc(var(--w) * -.01); top: 22%; height: 7%; box-shadow: 0 calc(var(--w) * .2) 0 #3a3a3e, 0 calc(var(--w) * .34) 0 #3a3a3e; }
.iphone::after { right: calc(var(--w) * -.01); top: 30%; height: 12%; }
.screen { position: relative; border-radius: calc(var(--w) * .136); overflow: hidden; background: var(--fill, #fff); display: flex; flex-direction: column; }
.sb { position: relative; flex: none; height: calc(var(--w) * .135); display: flex; justify-content: space-between; align-items: center; padding: calc(var(--w) * .02) calc(var(--w) * .09) 0 calc(var(--w) * .11); background: var(--bar, #fff); color: var(--sbc, #111); font: 600 calc(var(--w) * .048) / 1 var(--sans); letter-spacing: 0; }
.sb svg { height: calc(var(--w) * .036); width: auto; fill: currentColor; }
.sb .ic { display: flex; gap: calc(var(--w) * .014); align-items: center; }
.island { position: absolute; z-index: 3; top: calc(var(--w) * .03); left: 50%; transform: translateX(-50%); width: 33%; height: calc(var(--w) * .092); border-radius: 999px; background: #000; }
.shot { position: relative; flex: none; overflow: hidden; aspect-ratio: 579 / 1200; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.home { position: absolute; z-index: 3; bottom: calc(var(--w) * .022); left: 50%; transform: translateX(-50%); width: 36%; height: calc(var(--w) * .014); border-radius: 999px; background: rgba(0, 0, 0, .8); }
.glare { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .12), transparent 30%); }

/* callouts over the screenshot: small material chips */
.device { position: relative; width: max-content; }
.pins { position: absolute; z-index: 5; left: calc(var(--w) * .034); right: calc(var(--w) * .034); top: calc(var(--w) * .169); aspect-ratio: 966 / 2000; pointer-events: none; }
.pin { position: absolute; height: 0; opacity: 0; transition: opacity .4s var(--ease), transform .5s var(--spring); }
.pin .dot { position: absolute; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 4px rgba(255, 90, 31, .25); }
.pin .ln { position: absolute; top: 0; height: 1px; background: var(--tint); }
.pin .lbl { position: absolute; top: 0; transform: translateY(-50%); white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: rgba(28, 28, 30, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -.008em; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .4); }
.pin.r .dot { left: -6px; } .pin.r .ln { left: 0; right: -40px; } .pin.r .lbl { left: calc(100% + 40px); }
.pin.l .dot { right: -6px; } .pin.l .ln { left: -40px; right: 0; } .pin.l .lbl { right: calc(100% + 40px); }
.layer.on .pin, .step.on .pin { opacity: 1; }
.layer.on .pin:nth-child(2), .step.on .pin:nth-child(2) { transition-delay: .1s; }
.layer.on .pin:nth-child(3), .step.on .pin:nth-child(3) { transition-delay: .2s; }
.layer.on .pin:nth-child(4), .step.on .pin:nth-child(4) { transition-delay: .3s; }

/* ── 4. session: always dark, like the app's deck ── */
.session { height: 320vh; position: relative; background: #000; color: #f5f5f7; }
.session .serif { color: #86868b; }
.session .kicker { color: #ff8a5c; }
.session-pin { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; gap: 32px; padding: 80px var(--g); max-width: calc(var(--max) + 2 * var(--g)); margin: 0 auto; }
.session h2 { transition: opacity .3s var(--ease); }
.session-copy h2 { line-height: 1.07; }
.session-copy .tiny { margin-top: 12px; color: #86868b; }
.deck { position: relative; background: var(--deck); border-radius: var(--r-xl); padding: 16px; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), inset 0 0 0 .5px rgba(255, 255, 255, .1); overflow: hidden; }
.ruler { height: 26px; border-radius: 8px; background: var(--deck-2) repeating-linear-gradient(90deg, transparent 0 calc(8.333% - 1px), var(--line) calc(8.333% - 1px) 8.333%); position: relative; }
.lcd { position: absolute; right: 8px; top: 5px; color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lane { position: relative; height: 64px; margin-top: 8px; border-radius: 10px; background: #141414; }
.lane.song { height: 84px; background: var(--song); overflow: hidden; }
.lane.song svg { position: absolute; left: 2px; right: 2px; top: 22px; bottom: 4px; width: calc(100% - 4px); height: calc(100% - 26px); }
.tag { position: absolute; left: 0; right: 0; top: 0; height: 20px; padding: 0 8px; font-size: 12px; font-weight: 600; letter-spacing: -.004em; color: rgba(255, 255, 255, .95); background: rgba(0, 0, 0, .14); line-height: 20px; white-space: nowrap; overflow: hidden; z-index: 1; }
.region { position: absolute; top: 0; bottom: 0; border-radius: 10px; overflow: hidden; width: 0; }
.region .tw { position: absolute; left: 2px; top: 22px; width: calc(100% - 4px); height: calc(100% - 26px); }
.r1 { left: 6%; background: var(--take); }
.r2 { left: 30%; background: var(--take); }
.r3 { left: 52%; background: var(--fresh); }
.r3 .tag { color: #5a3b00; }
.playhead { position: absolute; top: 12px; bottom: 12px; width: 2px; background: #fff; left: 18px; z-index: 5; }
.playhead::before { content: ''; position: absolute; top: -2px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
/* sound presets as a segmented-style row of chips */
.rooms { display: flex; flex-wrap: wrap; gap: 8px; }
.rooms span { padding: 9px 16px; border-radius: 999px; background: rgba(120, 120, 128, .24); color: #d1d1d6; font-size: 15px; font-weight: 500; transition: background .35s var(--ease), color .35s var(--ease); }
.rooms span.on { background: #f5f5f7; color: #1d1d1f; }

/* ── 5. statement ── */
.manifesto { padding: var(--section) var(--g); background: var(--bg); text-align: center; overflow: hidden; }
.manifesto p { font-weight: 700; font-size: clamp(40px, 7vw, 96px); line-height: 1.04; letter-spacing: -.035em; }
.manifesto .m2 { color: var(--label-2); }
.manifesto .m5 { font-weight: 600; font-size: clamp(21px, 2.4vw, 32px); letter-spacing: -.02em; color: var(--tint); margin-top: 32px; line-height: 1.2; }
.manifesto p:not(.m5) { transition: transform .1s linear; }

/* ── share: the Instagram story the app makes (mirrors StoryCard in ShareVideo.kt) ── */
.share { padding: var(--section) var(--g) 0; }
.share-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.share-copy { display: grid; gap: 20px; justify-items: start; }
.share-copy .kicker { margin-bottom: 0; }
.share-sub { color: var(--label-2); font-size: clamp(19px, 1.5vw, 21px); line-height: 1.4; letter-spacing: -.02em; max-width: 26em; }
.share-steps { list-style: none; display: grid; gap: 12px; margin: 4px 0 8px; }
.share-steps li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; }
.share-steps b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--tint-dark); font-size: 14px; }
.story-wrap { justify-self: center; width: min(100%, 340px); }
.story { --bg: #0B0B0C; --ga: #FF5A1F; --gb: #3B3B44; --card: #18181B; --ink: #FFFFFF; --acc: #FF5A1F;
  container-type: inline-size; position: relative; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: var(--bg); color: var(--ink);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .55), 0 0 0 .5px var(--sep); transition: background .6s var(--ease); }
.story * { transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease); }
.st-glow { position: absolute; inset: 0; background: radial-gradient(95cqw 95cqw at 90% 8%, color-mix(in srgb, var(--ga) 78%, transparent), transparent 70%), radial-gradient(90cqw 90cqw at 5% 95%, color-mix(in srgb, var(--gb) 66%, transparent), transparent 70%); transition: opacity .6s; }
.st-top { position: absolute; z-index: 3; left: 4cqw; right: 4cqw; top: 3.5cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; }
.st-seg { height: .8cqw; min-height: 2px; border-radius: 9px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.st-seg i { display: block; height: 100%; width: 100%; background: #fff; }
.st-seg #stSeg { width: 0; }
.st-who { grid-column: 1 / -1; display: flex; align-items: center; gap: 2.4cqw; margin-top: 2.4cqw; font-size: 3.6cqw; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.st-who span:last-child { opacity: .7; }
.st-av { width: 8cqw; height: 8cqw; border-radius: 50%; background: linear-gradient(135deg, #ffc53d, #ff5a1f); box-shadow: 0 0 0 .6cqw rgba(255, 255, 255, .9); }
.st-card { position: absolute; left: 8%; right: 8%; top: 15%; bottom: 17%; border-radius: 7cqw; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 11%, transparent); display: flex; flex-direction: column; align-items: center; padding-top: 6cqw; }
.st-hook { font-size: 2.6cqw; font-weight: 700; letter-spacing: .28em; color: color-mix(in srgb, var(--ink) 59%, transparent); }
.st-disc { position: relative; width: 52cqw; height: 52cqw; margin-top: 10cqw; }
.st-ring { position: absolute; inset: -6%; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--acc) 59%, transparent); animation: st-breathe 1.3s ease-in-out infinite; }
.st-ring.sr2 { inset: -13%; border-width: 2px; opacity: .65; animation-delay: .12s; }
.st-ring.sr3 { inset: -20%; border-width: 1px; opacity: .4; animation-delay: .24s; }
@keyframes st-breathe { 50% { transform: scale(1.06); } }
.st-rec { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 205deg, rgba(255,255,255,.08) 0 40deg, transparent 40deg 180deg, rgba(255,255,255,.08) 180deg 220deg, transparent 220deg), repeating-radial-gradient(circle, #101012 0 1.2cqw, #1a1a1d 1.2cqw 1.32cqw); animation: spin 1.8s linear infinite; }
.st-lbl { position: absolute; inset: 33%; border-radius: 50%; background: radial-gradient(circle, #101012 0 10%, var(--acc) 10.5% 64%, var(--bg) 64.5% 73%, var(--acc) 73.5%); }
.st-lbl::after { content: ''; position: absolute; left: 47%; top: 8%; width: 6%; height: 26%; border-radius: 9px; background: rgba(0, 0, 0, .45); }
.st-title { margin-top: 8cqw; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 8cqw; letter-spacing: -.01em; }
.st-bars { display: flex; align-items: center; justify-content: center; gap: .9cqw; height: 10cqw; margin-top: 1cqw; }
.st-bars i { width: 1.1cqw; border-radius: 9px; background: var(--ink); height: 1.2cqw; transition: height .12s linear; }
.st-prog { position: absolute; left: 8cqw; right: 8cqw; bottom: 6cqw; }
.st-line { display: block; height: .6cqw; min-height: 2px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
.st-line i { display: block; height: 100%; width: 0; border-radius: 9px; background: var(--ink); }
.st-t { display: flex; justify-content: space-between; margin-top: 2.4cqw; font-size: 2.8cqw; color: color-mix(in srgb, var(--ink) 67%, transparent); }
.st-t em { font-style: normal; font-variant-numeric: tabular-nums; }
.st-wm { position: absolute; right: 7cqw; bottom: 10.5%; display: flex; align-items: center; gap: 2.4cqw; text-align: right; font-size: 2.6cqw; color: color-mix(in srgb, var(--ink) 63%, transparent); }
.st-wm b { display: block; font-size: 3.6cqw; color: var(--ink); }
.st-ic { width: 6cqw; height: 6cqw; border-radius: 50%; background: radial-gradient(circle, var(--acc) 0 40%, #111 41%); }
.st-reply { position: absolute; left: 4cqw; right: 4cqw; bottom: 3.5cqw; display: flex; align-items: center; gap: 3cqw; }
.st-reply span { flex: 1; height: 10cqw; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .6); display: flex; align-items: center; padding: 0 4cqw; font-size: 3.4cqw; color: #fff; }
.st-reply svg { width: 7cqw; height: 7cqw; fill: none; stroke: #fff; stroke-width: 1.8; }
@media (max-width: 900px) {
  .share-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ── 7. get it: one clean card ── */
.join { padding: var(--section) var(--g) 0; }
.pass { max-width: 760px; margin: 0 auto; position: relative; border-radius: var(--r-xl); background: var(--bg-2); }
.stub { display: none; }
.pass-body { padding: clamp(28px, 6vw, 64px); }
.pass-body h2 { font-size: clamp(30px, 3.4vw, 44px); }
.price { margin-top: 16px; max-width: 34em; font-size: 19px; line-height: 1.42; letter-spacing: -.02em; color: var(--label-2); }
.price b { color: var(--label); font-weight: 600; }
/* numbered steps as an inset grouped list */
.steps { list-style: none; counter-reset: s; margin: 32px 0 28px; border-radius: var(--r-md); background: var(--card); overflow: hidden; font-size: 17px; font-weight: 400; letter-spacing: -.022em; }
.steps li { counter-increment: s; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 12px 16px; color: var(--label-2); }
.steps li + li { border-top: .5px solid var(--sep); }
.steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: #fff; font-size: 14px; font-weight: 600; }
.steps b { color: var(--label); font-weight: 600; }
.mail { margin-top: 32px; display: grid; gap: 14px; justify-items: start; }
.mail .row { width: 100%; }
.row { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.mail input[type=email], .mail select { height: 48px; border-radius: 12px; border: 0; background: var(--card); padding: 0 16px; font: 17px var(--sans); letter-spacing: -.022em; color: var(--label); -webkit-appearance: none; appearance: none; }
.mail select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 36px; }
.mail input::placeholder { color: var(--label-3); }
.mail input:focus, .mail select:focus { outline: none; box-shadow: 0 0 0 4px rgba(255, 90, 31, .3); }
/* yes / maybe / no as a segmented control */
fieldset { border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
legend { width: 100%; margin-bottom: 10px; }
fieldset .seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fill); }
fieldset label { position: relative; }
fieldset label input { position: absolute; opacity: 0; pointer-events: none; }
fieldset label span { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; height: 32px; padding: 0 14px; border-radius: 7px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s var(--ease), box-shadow .2s var(--ease); }
fieldset label input:checked + span { background: var(--card); font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
fieldset label input:focus-visible + span { outline: 3px solid rgba(255, 90, 31, .5); }
fieldset button { margin-left: auto; height: 44px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--tint); color: #fff; font-size: 17px; font-weight: 600; cursor: pointer; transition: filter .2s var(--ease), transform .2s var(--ease); }
fieldset button:hover { filter: brightness(1.08); }
fieldset button:active { transform: scale(.97); }
.hp { position: absolute; left: -9999px; }

/* ── 8. questions: tiles ── */
.notes { padding: var(--section) var(--g); max-width: calc(var(--max) + 2 * var(--g)); margin: 0 auto; }
.notes > .kicker { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.07; letter-spacing: -.028em; font-weight: 700; color: var(--label); margin-bottom: var(--head-gap); }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.notes-grid > div { background: var(--bg-2); border-radius: var(--r-lg); padding: 28px; }
.notes .ic { width: 28px; height: 28px; margin-bottom: 16px; fill: none; stroke: var(--tint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notes h3 { font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 10px; color: var(--label); }
.notes p { color: var(--label-2); font-size: 17px; line-height: 1.47; }

/* ── footer, apple.com style: fine print over a hairline ── */
.foot { max-width: calc(var(--max) + 2 * var(--g)); margin: 0 auto; padding: 48px var(--g) 32px; }
.foot-hi { display: flex; align-items: center; gap: 16px; padding-bottom: 32px; }
.foot-say { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.02em; color: var(--label); }
.giant { display: none; }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 16px; border-top: .5px solid var(--sep); color: var(--label-3); font-size: 12px; font-weight: 400; letter-spacing: -.01em; }
.foot-row a { color: var(--label-2); }
.foot-row a:hover { color: var(--label); text-decoration: underline; }

/* ── motion: content rises in gently ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform 1s var(--spring); }
.reveal.in { opacity: 1; transform: none; }

/* ── Jam, the mascot (kept small and calm) ── */
.jam { position: relative; width: 140px; }
.jam svg { display: block; width: 100%; height: auto; overflow: visible; }
.jam .bod { transform-box: fill-box; transform-origin: 50% 100%; animation: jam-bob 3s ease-in-out infinite; }
.jam .eyes { transform-box: fill-box; transform-origin: center; animation: jam-blink 4.5s infinite; }
.jam .arm { transform-box: fill-box; transform-origin: 50% 10%; }
.jam:hover .ar { animation: jam-wave .5s ease-in-out 3; }
.jam.dance .bod { animation: jam-dance .77s ease-in-out infinite; }
.jam.dance .al { animation: jam-wave .77s ease-in-out infinite; }
.jam.dance .ar { animation: jam-wave .77s ease-in-out infinite reverse; }
/* expressions */
.jam .look { transform: translateX(var(--lx, 0)); transition: transform .35s var(--ease); }
.jam .xeyes, .jam .m-open, .jam .m-o { opacity: 0; }
.jam .eyes, .jam .m-smile { transition: opacity .15s; }
.jam[data-mood=happy] .eyes, .jam.dance .eyes, .jam:hover .eyes { opacity: 0; }
.jam[data-mood=happy] .xeyes, .jam.dance .xeyes, .jam:hover .xeyes { opacity: 1; }
.jam[data-mood=happy] .m-smile, .jam.dance .m-smile, .jam:hover .m-smile { opacity: 0; }
.jam[data-mood=happy] .m-open, .jam.dance .m-open, .jam:hover .m-open { opacity: 1; }
.jam[data-mood=wow] .m-smile { opacity: 0; }
.jam[data-mood=wow] .m-o { opacity: 1; }
.jam[data-mood=wow] .eyes { transform: scale(1.12); }
.jam[data-mood=sleepy] .eyes { transform: scaleY(.35); animation: none; }
@keyframes jam-bob { 50% { transform: translateY(-4px); } }
@keyframes jam-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes jam-wave { 50% { transform: rotate(-30deg); } }
@keyframes jam-dance { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-6px); } }
.jam .notes { position: absolute; left: 50%; top: 0; pointer-events: none; padding: 0; }
.jam .notes i { position: absolute; font-style: normal; font-size: 20px; color: var(--tint); opacity: 0; }
.jam.dance .notes i { animation: jam-note 2.3s ease-out infinite; }
.jam.dance .notes i:nth-child(2) { animation-delay: .77s; color: var(--song); }
.jam.dance .notes i:nth-child(3) { animation-delay: 1.54s; color: #c98a00; }
@keyframes jam-note { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--nx, 40px), -90px); } }
.jam .notes i:nth-child(2) { --nx: -50px; } .jam .notes i:nth-child(3) { --nx: 10px; }
/* speech bubble as an iMessage-like bubble */
.bubble { position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translateX(-30%); white-space: nowrap; padding: 8px 14px; border-radius: 18px 18px 18px 6px; background: var(--bg-2); color: var(--label); font-size: 15px; font-weight: 500; letter-spacing: -.012em; box-shadow: var(--shadow); }
.bubble.pop { animation: jam-pop .4s var(--spring); }
@keyframes jam-pop { from { transform: translateX(-30%) scale(.85); opacity: 0; } }
.jam-hero { position: absolute; z-index: 4; left: -6%; bottom: -4%; width: 28%; min-width: 104px; }
.jam-toy { margin: 32px auto 0; width: 110px; }
.jam-toy svg { transform: scale(var(--sx, 1), var(--sy, 1)); transform-origin: 50% 100%; transition: transform .45s var(--spring); }
.jam-pass { position: absolute; z-index: 2; right: clamp(16px, 5vw, 64px); top: -96px; width: 100px; }
.jam-pass .bubble { left: auto; right: 80%; transform: none; border-radius: 18px 18px 6px 18px; }
.jam-pass .bubble.pop { animation: none; }
.join { padding-top: calc(var(--section) + 60px); }
.jam-foot { width: 72px; }

/* ── legal pages ── */
.legal { max-width: 692px; margin: 0 auto; padding: 112px var(--g) 80px; }
.legal .back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--tint-dark); font-size: 17px; }
.legal .back:hover { text-decoration: underline; }
.legal h1 { margin-top: 20px; font-size: clamp(40px, 5vw, 56px); line-height: 1.07; letter-spacing: -.03em; font-weight: 700; }
.legal .updated { margin-top: 12px; }
.legal .lead { margin-top: 28px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--bg-2); font-size: 19px; line-height: 1.42; letter-spacing: -.02em; }
.legal h2 { margin-top: 48px; font-size: 24px; line-height: 1.17; letter-spacing: -.02em; font-weight: 600; }
.legal p, .legal li { margin-top: 12px; font-size: 17px; line-height: 1.53; color: var(--label-2); }
.legal ul { padding-left: 24px; }
.legal a:not(.back) { color: var(--tint-dark); }
.legal a:not(.back):hover { text-decoration: underline; }
.legal .other { margin-top: 56px; padding-top: 20px; border-top: .5px solid var(--sep); display: flex; gap: 24px; flex-wrap: wrap; }
.legal p.updated { font-size: 14px; color: var(--label-3); }
.thanks { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--g); }
.thanks h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; }
.thanks .cta { margin-top: 32px; }

/* 44pt hit areas and visible keyboard focus */
.join-link, .foot-row a { min-height: 30px; }
:focus-visible { outline: 3px solid rgba(255, 90, 31, .55); outline-offset: 3px; border-radius: 8px; }

/* ── responsive ── */
@media (max-width: 1240px) {
  .pin .ln { display: none; }
  .pin .lbl { padding: 7px 11px; font-size: 12px; }
  .pin { left: var(--x) !important; right: auto !important; width: 0; }
  .pin .dot { left: -6px !important; right: auto !important; }
  .pin.cr .lbl { left: 14px; right: auto; } .pin.cl .lbl { right: 14px; left: auto; }
}
@media (max-width: 1000px) { .notes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; gap: 40px; padding-top: 96px; min-height: 0; }
  .turntable { width: min(100%, 360px); }
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .stick { display: none; }
  .steps-col .step { min-height: 0; opacity: 1; padding: 0 0 var(--section); align-items: center; text-align: center; }
  .steps-col .step:last-child { padding-bottom: 0; }
  .step .device { display: block; margin-top: 16px; --w: min(300px, 76vw); }
  .step p { margin: 0 auto; }
  .step .pin { opacity: 1; }
  .row { grid-template-columns: 1fr; }
  .lane.song { height: 64px; } .lane { height: 48px; }
  .jam-hero { left: -2%; bottom: -8%; }
  .jam-pass { top: -88px; width: 88px; }
}
@media (max-width: 600px) {
  .notes-grid { grid-template-columns: 1fr; }
  .keyboard .w .nm { display: none; }
  fieldset button { width: 100%; margin: 8px 0 0; height: var(--btn); }
  fieldset .seg { width: 100%; } fieldset label { flex: 1; } fieldset label span { width: 100%; min-width: 0; }
  .bubble { font-size: 14px; padding: 7px 12px; }
  .jam-hero .bubble { transform: translateX(-10%); }
  .drop, .cta, .ghost { width: 100%; }
  .needle-cta { width: 100%; }
}
@media (max-width: 700px) { .tag .xt { display: none; } }
@media (max-height: 820px) and (min-width: 901px) {
  .session-pin { gap: 20px; padding-top: 72px; padding-bottom: 32px; }
  .session h2 { font-size: clamp(28px, 3vw, 44px); }
  .lane.song { height: 60px; } .lane { height: 44px; }
}
.peek { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}