/* EastWest Studio Collections — product page styles
   Aligned to the EW ComposerCloud+ 2025 redesign aesthetic
   (near-black page, truer red, condensed-uppercase headings, glossy cards). */

/* Tachyon is a COMMERCIAL font (Fonthead Design). The copy at css/fonts/tachyon.woff2 is a
   personal-use-only demo copy, NOT licensed for this production site — swap in a properly
   licensed file (Adobe Fonts or a Fontspring web license) before shipping, or remove the
   @font-face block below to fall back to the condensed stack (no visual regression). */
/* Tachyon display face — self-hosted; local() first for Adobe-Fonts machines */
@font-face {
  font-family: "Tachyon";
  src: local("Tachyon"), local("Tachyon Regular"),
       url("/css/fonts/tachyon.woff2") format("woff2"),
       url("/css/fonts/tachyon.woff")  format("woff");
  font-display: swap;
}

/* v2.1 — Homepage-parity design system: gold + pure-black, Tachyon/Inter/DM Sans.
   Per-tier accent identities are kept (see the body-class overrides lower down):
   Overview/house = gold, Producer = blue, Hollywood = gold, Complete = red. */
:root {
  --color-gold:         #D4AF37;
  --color-gold-light:   #F0C040;
  --color-gold-dark:    #9A7D1A;
  --bg:        #000000;
  --bg-2:      #0D0D0D;
  --bg-3:      #111111;
  --panel:     #0D0D0D;
  --panel-2:   #111111;
  --ink:       #FFFFFF;
  --ink-soft:  #CCCCCC;
  --ink-mute:  #999999;
  --line:      #2A2A2A;
  --accent:    #D4AF37;   /* gold (house/base accent) */
  --accent-hi: #F0C040;
  --gold:      #D4AF37;
  --ok:        #D4AF37;
  --radius:        4px;
  --radius-sharp:  2px;
  --maxw:      1200px;
  --display: "Tachyon", "Trade Gothic Next LT Pro Condensed", "Trade Gothic Next LT Pro", "Archivo Narrow", "Oswald", "Helvetica Neue", Arial, sans-serif;
  --font: "Inter", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
}

.product-page, .product-page * { box-sizing: border-box; }

.product-page {
  margin: 0; font-family: var(--font);
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; line-height: 1.55;
}
.product-page img { max-width: 100%; display: block; }
.product-page a { color: inherit; text-decoration: none; }
.product-page .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* condensed-uppercase display headings — v3.0 type scale (Tachyon / Inter / DM Sans) */
.product-page h1, .product-page h2, .product-page .display { font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; }
.product-page h3, .product-page h4, .product-page h5, .product-page h6 { font-family: var(--font); font-weight: 700; }

.product-page h1 { font-size: clamp(48px, 6vw, 64px);   font-weight: 500; letter-spacing: -0.02em; line-height: 1.0;  margin: 0 0 20px; }
.product-page h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 400; letter-spacing:  0.02em; line-height: 1.2;  margin: 0 0 14px; }
.product-page h3 { font-size: clamp(18px, 2vw, 22px);   letter-spacing: 0.01em; line-height: 1.3; margin: 0 0 10px; }
.product-page h4 { font-size: 15px;                      letter-spacing: 0.02em; line-height: 1.3; margin: 0 0 8px;  }

/* text-scale utilities */
.product-page .lead { font-size: 18px; line-height: 1.65; margin: 0 0 26px; }
.product-page .small { font-size: 13px; }
.product-page .micro { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- mockup banner ---------- */
.product-page .mock-flag {
  background: repeating-linear-gradient(45deg, #241a0c, #241a0c 12px, #1d1509 12px, #1d1509 24px);
  color: var(--gold); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: 6px 12px; border-bottom: 1px solid var(--line);
}

/* ===================== NAVIGATION (CC two-tier) ===================== */
/* real soundsonline.com top: black promo bar + white global nav (ported from EW Homepage v3.2 "sol-bar") */
.product-page .sol-bar { background: #000; color: #fff; font-family: var(--font); }
.product-page .sol-bar .wrap { display: flex; align-items: center; justify-content: center; padding: 11px 24px; position: relative; }
.product-page .sol-promo { font-size: 14px; letter-spacing: .01em; }
.product-page .sol-cta { display: inline-block; margin-left: 14px; background: #fff; color: #000; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; padding: 7px 16px; border-radius: 999px; }
.product-page .sol-lang { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 13px; border: 1px solid #555; border-radius: 4px; padding: 4px 10px; color: #fff; }
@media (max-width: 880px){ .product-page .sol-lang { display: none; } .product-page .sol-promo { font-size: 12px; } }
.product-page .sol-head { background: #fff; color: #111; border-bottom: 1px solid #e6e6e6; }
.product-page .sol-head .wrap { display: flex; align-items: center; gap: 22px; height: 72px; }
.product-page .sol-logo { display: flex; align-items: center; gap: 11px; }
.product-page .sol-logo img { height: 46px; width: auto; }
.product-page .sol-wordmark { display: inline-flex; flex-direction: column; line-height: .9; font-family: "Inter", system-ui, sans-serif; font-weight: 800; }
.product-page .sol-wordmark b { color: #E0301E; font-size: 17px; letter-spacing: .11em; margin-right: -.11em; }
.product-page .sol-wordmark i { color: #111; font-size: 20px; font-style: normal; letter-spacing: .22em; margin-right: -.22em; }
.product-page .sol-links { display: flex; gap: 18px; margin-left: 6px; }
.product-page .sol-links a { color: #111; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.product-page .sol-links a:hover { color: #E0301E; }
.product-page .sol-links .has-menu::after { content: "\25BE"; font-size: 9px; opacity: .55; margin-left: 4px; }
.product-page .sol-tools { margin-left: auto; display: flex; align-items: center; gap: 16px; color: #111; }
.product-page .sol-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid #111; border-radius: 999px; padding: 7px 16px; width: 190px; }
.product-page .sol-search svg { width: 16px; height: 16px; flex: none; color: #666; }
.product-page .sol-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; width: 100%; color: #111; }
.product-page .sol-ic { color: #111; display: inline-flex; }
.product-page .sol-ic svg { width: 24px; height: 24px; }
@media (max-width: 1024px){ .product-page .sol-links, .product-page .sol-search { display: none; } }
/* v3.3: rotating SOL announcement bar (mirrors soundsonline.com's cycling promo) */
.product-page .sol-promo { transition: opacity .35s ease; max-width: 78vw; text-align: center; }
.product-page .sol-promo.is-fading { opacity: 0; }
.product-page .sol-promo b { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-left: 6px; }
/* v3.3: Products mega-menu (real SOL instrument categories) */
.product-page .sol-menu { position: relative; display: inline-flex; }
.product-page .sol-mega { position: absolute; left: 0; top: 100%; background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; box-shadow: 0 18px 44px -14px rgba(0,0,0,.3); padding: 14px; display: none; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 3px 16px; z-index: 60; }
.product-page .sol-menu:hover .sol-mega { display: grid; }
.product-page .sol-mega a { color: #333; font-weight: 600; text-transform: none; font-size: 13px; letter-spacing: 0; padding: 7px 9px; border-radius: 5px; white-space: nowrap; }
.product-page .sol-mega a:hover { background: #f5f5f5; color: #E0301E; }
@media (max-width: 1024px){ .product-page .sol-mega { display: none !important; } }

/* red section sub-tab bar (sticky) */
.product-page .subnav { position: sticky; top: 0; z-index: 50; background: rgba(10,10,14,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.product-page .subnav .wrap { display: flex; align-items: center; gap: 4px; height: 54px; }
.product-page .subnav .brand { font-family: var(--display); text-transform: uppercase; font-weight: 500; letter-spacing: .05em; color: var(--ink); margin-right: 22px; font-size: 14px; display:flex; align-items:center; gap:8px; }
.product-page .subnav .brand .plus { color: var(--accent); font-size: 14px; }
.product-page .subnav .tabs { display: flex; gap: 2px; height: 100%; }
.product-page .subnav .tabs a {
  display: flex; align-items: center; padding: 0 18px; height: 100%;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 3px solid transparent;
}
.product-page .subnav .tabs a:hover { color: var(--ink); }
.product-page .subnav .tabs a.active { color: #fff; border-bottom-color: var(--accent); }
.product-page .subnav .cta { margin-left: auto; }
@media (max-width: 720px){ .product-page .subnav .tabs a { padding: 0 11px; font-size: 11px; } .product-page .subnav .brand { display: none; } }

/* ---------- buttons ---------- */
.product-page .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .2s, border-color .2s; white-space: nowrap;
}
.product-page .btn:hover { transform: translateY(-1px); filter: brightness(1.12); }
.product-page .btn:active { transform: scale(0.97); filter: brightness(1.0); }
.product-page .btn-primary { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
.product-page .btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.product-page .btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.product-page .btn-ghost:hover { border-color: var(--accent-hi); color: var(--accent-hi); }
.product-page .btn-dark { background: rgb(7,7,10); color: #fff; border-color: transparent; }
.product-page .btn-dark:hover { background: rgb(20,20,24); border-color: transparent; }
.product-page .hero-play { width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.08); border: 2px solid #fff; display: grid; place-items: center; color: #fff; flex: none; }
.product-page .hero-play svg { width: 15px; height: 15px; margin-left: 2px; }
.product-page .hero-cta a.playing .hero-play svg { margin-left: 0; }
.product-page .btn-sm { padding: 9px 16px; font-size: 12px; }

/* ---------- split hero (package pages) ---------- */
.product-page .hero {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(212,175,55,.20), transparent 60%),
    radial-gradient(700px 500px at 8% 10%, rgba(212,175,55,.07), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.product-page .hero .wrap { padding: 80px 24px 72px; }
.product-page .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
@media (max-width: 900px){ .product-page .hero-grid { grid-template-columns: 1fr; gap: 28px; } }
.product-page .eyebrow { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 16px; }
.product-page .hero h1 { font-size: clamp(36px, 5.4vw, 62px); line-height: 1.0; margin: 0 0 18px; }
.product-page .hero p.lead { font-size: 18px; color: var(--ink-soft); max-width: 32em; margin: 0 0 28px; text-transform: none; }
.product-page .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.product-page .hero-art { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; background: var(--panel); box-shadow: 0 30px 80px -30px rgba(0,0,0,.85); }
.product-page .hero-art img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- full-bleed photographic hero (landing) ---------- */
.product-page .hero-full { position: relative; min-height: 78vh; display: flex; align-items: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.product-page .hero-full .bg { position: absolute; inset: 0; z-index: 0; }
.product-page .hero-full .bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(1.05); }
.product-page .hero-full .bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,8,.55) 0%, rgba(6,6,8,.35) 45%, rgba(6,6,8,.9) 100%),
              radial-gradient(900px 500px at 80% 0%, rgba(212,175,55,.28), transparent 60%); }
.product-page .hero-full .wrap { position: relative; z-index: 1; padding: 96px 24px; }
.product-page .hero-full .inner { max-width: 40rem; }
.product-page .hero-full h1 { font-size: clamp(40px, 6.4vw, 80px); line-height: .98; margin: 0 0 20px; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.product-page .hero-full p.lead { font-size: 20px; color: #e7e7ee; max-width: 30em; margin: 0 0 30px; text-transform: none; }

/* ---------- v1.6: Studio Collections split-tone hero (dual-tone brand plate) ---------- */
.product-page .hero-sc { position: relative; border-bottom: 1px solid var(--line); background: #08080b; overflow: hidden; }
.product-page .hero-sc::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(1000px 420px at 50% 100%, rgba(212,175,55,.12), transparent 62%); }
.product-page .hero-sc .sc-plate { position: relative; width: 100%; height: clamp(210px, 31vw, 396px); overflow: hidden; z-index: 1; }
.product-page .hero-sc .sc-plate .d, .product-page .hero-sc .sc-plate .l { position: absolute; inset: 0; background-size: cover; background-position: center; }
.product-page .hero-sc .sc-plate .d { background-image: url(/images/studio-collections/sc-heroplate_dark.jpg);  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.product-page .hero-sc .sc-plate .l { background-image: url(/images/studio-collections/sc-heroplate_light.jpg); clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
.product-page .hero-sc .sc-plate .seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-.5px); z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.22) 45%, transparent); }
.product-page .hero-sc .sc-plate::after { content:""; position:absolute; left:0; right:0; bottom:0; height:34%; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, transparent, #08080b); }
.product-page .hero-sc .inner { position: relative; z-index: 1; text-align: center; max-width: 46rem; margin: 0 auto; padding: 30px 24px 56px; }
.product-page .hero-sc .eyebrow { margin-bottom: 14px; }
.product-page .hero-sc h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: .98; letter-spacing: .04em; margin: 0 0 20px; }
.product-page .hero-sc p.lead { font-size: 18px; color: var(--ink-soft); max-width: 36em; margin: 0 auto 26px; text-transform: none; }
.product-page .hero-sc .hero-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 720px){ .product-page .hero-sc .inner { padding-top: 22px; } }

/* ---------- v1.6: box-pitch hero (full-bleed collection graphic + copy below) ---------- */
.product-page .hero-box { position: relative; border-bottom: 1px solid var(--line); background: #07070a; padding: 0; }
.product-page .hero-box .art { position: relative; width: 100%; height: clamp(338px, 45vw, 558px); }
.product-page .hero-box .art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* v1.9: flat black-on-white master art — clean band edge into the dark copy area (no dark fade). */
/* v3.8 (Blake): shorter hero (NI-Komplete cadence) so Three Collections is nearly in view on landing. */
.product-page .hero-box .inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 52rem; margin: 0 auto; padding: 42px 24px 40px; }
.product-page .hero-box h1 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: .06em; margin: 0 0 20px; text-align: center; }
.product-page .hero-box h1 span { display: block; white-space: nowrap; }
.product-page .hero-box p.lead { font-size: 18px; color: var(--ink-soft); max-width: 50em; margin: 0 auto 26px; text-transform: none; }
.product-page .hero-box .hero-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
/* v2.0 (Julio): inset the hero on desktop so the art band isn't full-bleed on large screens;
   mobile stays full-width. Constrains width + eases the art height above ~900px. */
@media (min-width: 900px){
  .product-page .hero-box .art { height: clamp(358px, 41vw, 538px); }
  .product-page .tier-hollywood .hero-box h1 { white-space: nowrap; }
}
/* v3.8 (Blake): hero audio-demo (NI "Listen to a selection…" play button; stubbed — no audio wired yet) */
.product-page .hero-demo { display: inline-flex; align-items: center; gap: 14px; justify-content: center; }
.product-page .demo-play { width: 54px; height: 54px; border-radius: 999px; border: 0; background: var(--accent); display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--accent) 70%, transparent); transition: transform .15s; }
.product-page .demo-play:hover { transform: scale(1.07); }
.product-page .demo-tri svg { width: 18px; height: 18px; margin-left: 3px; color: #fff; }
.product-page .demo-play.playing .demo-tri svg { margin-left: 0; }

/* Mini-player << / >> track-nav buttons — studio-collections only. These override
   audio-slider.css's shared #audio-player rules (higher specificity via .product-page, since
   that file is also loaded by the ComposerCloud page templates and must stay untouched there).
   Widening the play/prev/next gap shifts the progress bar, time, and volume controls over to
   avoid overlapping the wider control cluster — see the "extra width" math: prev(24) + gap(12) +
   play(46) + gap(12) + next(24) = 118, so progress/time move to 118 + the original 16px trailing
   gap = 134, and volume shifts by the same 118-46=72px delta (264 + 72 = 336). */
.product-page #audio-player .jp-controls { display: flex; align-items: center; gap: 12px; }
.product-page #audio-player .jp-previous,
.product-page #audio-player .jp-next {
	width: 24px; height: 24px;
	margin: 0;
	background: url('/images/audio-player_prev@2x.png') no-repeat center / 20px auto;
}
.product-page #audio-player .jp-next { transform: rotate(180deg); }
.product-page #audio-player .jp-audio .jp-type-single .jp-progress { left: 134px; }
.product-page #audio-player .jp-audio .jp-type-single .jp-time-holder { left: 134px; }
.product-page #audio-player .jp-volume-controls { left: 336px; }
.product-page .demo-txt { text-align: left; display: flex; flex-direction: column; gap: 1px; }
.product-page .demo-lead { font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: 15px; color: var(--ink); }
.product-page .demo-sub { font-size: 13px; color: var(--ink-mute); }

/* ---------- v1.6: collaborators ("Behind the Sound") + endorsement pull-quote ---------- */
.product-page .collabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px){ .product-page .collabs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .product-page .collabs { grid-template-columns: 1fr; } }
.product-page .collab { background: none; border: 0; display: flex; flex-direction: column; transition: transform .2s ease; }
.product-page .collab:hover { transform: translateY(-3px); }
.product-page .collab .ph { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius); background: var(--bg-3); }
.product-page .collab .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.28) contrast(1.03); transition: filter .25s; }
.product-page .collab:hover .ph img { filter: grayscale(0) contrast(1.03); }
.product-page .collab .b { padding: 15px 2px 0; display: flex; flex-direction: column; gap: 6px; }
.product-page .collab .tie { align-self: flex-start; font-family: "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; font-weight: 800; color: var(--accent); }
.product-page .collab h4 { margin: 0; font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: 19px; white-space: nowrap; }
.product-page .collab .role { font-size: 12px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.product-page .collab p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-soft); }

.product-page .pullquote { position: relative; max-width: 52rem; margin: 44px auto 0; text-align: center; padding-top: 30px; }
.product-page .pullquote::before { content:"\201C"; position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-family:Georgia,serif; font-weight:700; font-size:84px; line-height:1; color: var(--accent); text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 55%, transparent); }
.product-page .pullquote blockquote { margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.22; color: var(--ink); }
.product-page .pullquote .cite { margin-top: 14px; color: var(--ink-soft); font-size: 14px; }
.product-page .pullquote .cite b { color: var(--accent); }

/* grouped endorsement rows (composer roundtable / producers) — center any count */
.product-page .roundtable { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.product-page .roundtable .quote { flex: 1 1 300px; max-width: 360px; }
@media (max-width: 900px){ .product-page .roundtable .quote { flex-basis: 100%; max-width: none; } }
/* real headshot photo inside the avatar circle */
.product-page .quote .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 999px; display: block; }
.product-page .quote .avatar:has(img) { background: none; }

/* v1.6: Why-EastWest cinematic image cards */
.product-page .whygrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px){ .product-page .whygrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .product-page .whygrid { grid-template-columns: 1fr; } }
.product-page .whycard { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 44px -30px rgba(0,0,0,.9); transition: transform .18s ease, border-color .25s; }
.product-page .whycard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.product-page .whycard .ph { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-3); }
.product-page .whycard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-page .whycard:hover .ph img { transform: scale(1.05); }
.product-page .whycard .ph::after { content:""; position:absolute; left:0; right:0; top:0; height:48%; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent); pointer-events:none; }
.product-page .whycard .b { padding: 15px 18px 20px; }
.product-page .whycard h3 { margin: 0 0 7px; font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 18px; letter-spacing: .03em; }
.product-page .whycard p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

/* v1.6: big featured quotes (closing section — distinct editorial format) */
.product-page .bigquotes { display: flex; flex-direction: column; gap: 30px; max-width: 60rem; margin: 36px auto 0; }
.product-page .bigq { display: grid; grid-template-columns: 190px 1fr; gap: 34px; align-items: center; }
.product-page .bigq.rev { direction: rtl; } .product-page .bigq.rev > * { direction: ltr; } .product-page .bigq.rev .qbody { text-align: right; }
@media (max-width: 680px){ .product-page .bigq, .product-page .bigq.rev { grid-template-columns: 1fr; text-align: center; direction: ltr; gap: 18px; } }
.product-page .bigq .portrait { border-radius: 14px; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px rgba(0,0,0,.9); }
.product-page .bigq .portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.18) contrast(1.03); }
.product-page .bigq blockquote { margin: 0 0 14px; max-width: 40ch; font-family: "Montserrat", var(--font); font-weight: 300; text-transform: none; letter-spacing: .005em; font-size: clamp(13px, 1.3vw, 17px); line-height: 1.5; color: var(--ink); }
.product-page .bigq.rev blockquote { margin-left: auto; }
.product-page .bigq .cite b { color: var(--accent); font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .22em; font-size: 15px; }
.product-page .bigq .cite span { display: block; color: var(--ink-mute); font-size: 13px; margin-top: 3px; }

/* ---------- section scaffolding ---------- */
.product-page section { padding: 100px 0; }
.product-page section.tight { padding: 64px 0; }
.desktop-break { display: block; }
.product-page .section-head { max-width: 44em; margin: 0 0 40px; }
.product-page .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.product-page .section-head h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 22px; letter-spacing: .06em; line-height: 1.1; }
.product-page .section-head p { font-size: 17px; color: var(--ink-soft); margin: 0; text-transform: none; }
/* v2.0 (Julio): platinum headline glow removed — the headlines read bold enough on their own. */
.product-page .kicker { font-family: "DM Sans", sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); line-height: 1.4; display: block; margin-bottom: 16px; }
.product-page .scene-bands .kicker { font-size: 14px; }
.product-page .alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- tier cards (landing) ---------- */
.product-page .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px){ .product-page .tiers { grid-template-columns: 1fr; } }
.product-page .tiers[data-tiers-exclude] { grid-template-columns: repeat(2, minmax(280px, 360px)); justify-content: center; max-width: 760px; margin: 0 auto; }
.product-page .tiers[data-tiers-exclude]:has(.tier:only-child) { grid-template-columns: minmax(280px, 360px); max-width: 360px; }
@media (max-width: 900px){ .product-page .tiers[data-tiers-exclude] { grid-template-columns: 1fr; max-width: 400px; } }
.product-page .tier { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, transform .15s; }
.product-page .tier:hover { border-color: var(--accent); transform: translateY(-3px); }
.product-page .tier.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 60px -30px rgba(212,175,55,.5); }
.product-page .tier .ribbon { background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 7px; }
.product-page .tier-art { aspect-ratio: 16/9; background: var(--bg-3); overflow: hidden; }
.product-page .tier-art img { width:100%; height:100%; object-fit: cover; }
.product-page .tier-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product-page .tier-body h3 { margin: 0; font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 24px; letter-spacing: .03em; }
.product-page .tier-sub { color: var(--ink-soft); font-size: 15px; margin: 0; min-height: 3em; }
.product-page .price-row { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.product-page .price { font-size: 36px; font-weight: 500; font-family: var(--display); }
.product-page .msrp { color: var(--ink-mute); text-decoration: line-through; font-size: 16px; }
.product-page .save-badge { display: inline-block; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); font-size: 16px; font-weight: 800; letter-spacing: .01em; padding: 7px 16px; border-radius: 999px; width: fit-content; }
.product-page .tier .count { font-size: 13px; color: var(--ink-mute); letter-spacing: .04em; text-transform: uppercase; }
.product-page .tier-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; }
.product-page .tier-actions .btn { flex: 1; }

/* ---------- value props ---------- */
.product-page .props { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 820px){ .product-page .props { grid-template-columns: 1fr; } }
.product-page .prop { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.product-page .prop .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(212,175,55,.14); color: var(--accent); font-size: 22px; margin-bottom: 16px; }
.product-page .prop h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 20px; letter-spacing: .03em; }
.product-page .prop p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* ---------- headline highlights ---------- */
.product-page .highlights { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
@media (max-width: 980px){ .product-page .highlights { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .product-page .highlights { grid-template-columns: 1fr; } }
.product-page .hl { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.product-page .hl .img { aspect-ratio: 4/3; background: var(--bg-3); overflow:hidden; position: relative; }
.product-page .hl .img img { width:100%; height:100%; object-fit: cover; }
.product-page .hl .b { padding: 16px 18px 20px; }
.product-page .hl h4 { margin: 0 0 6px; font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 17px; letter-spacing: .03em; }
.product-page .hl p { margin: 0; font-size: 14px; color: var(--ink-soft); }

/* ---------- category exploration grid ---------- */
.product-page .cats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 980px){ .product-page .cats { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .product-page .cats { grid-template-columns: 1fr; } }
.product-page .cat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding: 0; transition: border-color .2s, transform .15s; }
.product-page .cat:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-3px); }
.product-page .cat-art { aspect-ratio: 3/2; overflow: hidden; background: var(--bg-3); }
.product-page .cat-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-page .cat:hover .cat-art img { transform: scale(1.05); }
.product-page .cat-b { padding: 15px 18px 19px; }
.product-page .cat .n { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .07em; font-weight: 500; font-family: var(--display); }
.product-page .cat h4 { margin: 5px 0 6px; font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 17px; letter-spacing: .03em; }
.product-page .cat p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

/* collaborators: 3-up centered variant */
.product-page .collabs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 64rem; margin: 0 auto; }
@media (max-width: 720px){ .product-page .collabs.three { grid-template-columns: 1fr; } }
/* portrait inside a feature block (e.g. Shawn Murphy) */
.product-page .feature .img.portrait-img { aspect-ratio: 4/5; max-width: 360px; justify-self: center; }

/* ---------- testimonials (CC light headshot cards) ---------- */
.product-page .quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 900px){ .product-page .quotes { grid-template-columns: 1fr; } }
/* editorial quote tiles — de-carded, pure text floating on the background (NI-style) */
.product-page .quote { position: relative; padding: 4px 22px 4px 0; color: var(--ink); transition: transform .2s ease; }
.product-page .quote > * { position: relative; z-index: 1; }
.product-page .quote:hover { transform: translateY(-3px); }
.product-page .quote .head { display: flex; align-items: center; gap: 13px; margin: 0 0 14px; }
.product-page .quote .avatar { width: 64px; height: 64px; border-radius: 999px; flex: none; overflow: hidden; position: relative; display: grid; place-items: center;
  background: var(--panel-2); color: #fff; font-family: var(--display); font-weight: 500; font-size: 18px; }
.product-page .quote .name { font-family: var(--display); text-transform: uppercase; font-weight: 500; font-size: 16px; letter-spacing: .03em; color: var(--ink); }
.product-page .quote blockquote { margin: 0; font-size: 16px; line-height: 1.62; color: var(--ink-soft); }
.product-page .quote .role { font-size: 12.5px; font-style: italic; color: var(--ink-mute); margin-top: 12px; }

/* v1.6 · World-Class Studios feature */
.product-page .studios { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: center; margin-top: 30px; }
@media (max-width: 860px){ .product-page .studios { grid-template-columns: 1fr; gap: 22px; } }
.product-page .studios .ph { border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -34px rgba(0,0,0,.9); }
.product-page .studios .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-page .studios .body p { margin: 0 0 14px; font-size: 15.5px; color: var(--ink-soft); }
.product-page .studios .body p b { color: var(--ink); }
.product-page .studios .body .muted { color: var(--ink-mute); font-size: 14px; }
.product-page .studios .covers { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.product-page .studios .covers img { width: 56px; height: 56px; border-radius: 5px; object-fit: cover; border: 1px solid var(--line); transition: transform .15s; }
.product-page .studios .covers img:hover { transform: translateY(-3px) scale(1.05); }
.product-page .cite-link { font-size: 12.5px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; }
.product-page .cite-link a { color: var(--accent); text-decoration: none; }
.product-page .cite-link a:hover { text-decoration: underline; }

/* v1.6 · video cards (thumbnail + play → YouTube) */
.product-page .videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 30px auto 0; max-width: 60rem; }
@media (max-width: 720px){ .product-page .videos { grid-template-columns: 1fr; } }
.product-page .videocard { display: block; text-decoration: none; color: inherit; transition: transform .18s ease; }
.product-page .videocard:hover { transform: translateY(-4px); }
.product-page .videocard .thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); background: var(--bg-3); }
.product-page .videocard .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-page .videocard:hover .thumb img { transform: scale(1.04); }
.product-page .videocard .play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 999px; background: rgba(10,10,12,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1.5px solid rgba(255,255,255,.85); box-shadow: 0 8px 30px -6px rgba(0,0,0,.6); display: grid; place-items: center; transition: transform .2s, background .2s, border-color .2s; }
.product-page .videocard .play::after { content: ""; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.product-page .videocard:hover .play { transform: scale(1.08); background: var(--accent); border-color: var(--accent); }
.product-page .videocard .vmeta { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 5px; }
.product-page .vmeta .tie { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 500; color: var(--accent); }
.product-page .vmeta h4 { margin: 0; font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: 18px; }
.product-page .vmeta .dur { font-size: 12.5px; color: var(--ink-mute); }

/* v1.6 · every-genre strip + chips */
.product-page .genrestrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
@media (max-width: 820px){ .product-page .genrestrip { grid-template-columns: repeat(2, 1fr); } }
.product-page .gtile { position: relative; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.product-page .gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-page .gtile:hover img { transform: scale(1.06); }
.product-page .gtile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 14px 12px; font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; font-weight: 500; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)); }
.product-page .genrechips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 22px; }
.product-page .gchip { font-size: 13px; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); background: var(--panel); transition: border-color .2s, color .2s; }
.product-page .gchip:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--ink); }

/* v1.6 · clickable video image inside a feature block (play → YouTube) */
.product-page .feature .img.play-img { position: relative; display: block; cursor: pointer; }
.product-page .feature .img.play-img .play { position: absolute; inset: 0; margin: auto; width: 70px; height: 70px; border-radius: 999px; background: rgba(10,10,12,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1.5px solid rgba(255,255,255,.85); box-shadow: 0 8px 30px -6px rgba(0,0,0,.6); display: grid; place-items: center; transition: transform .2s, background .2s, border-color .2s; }
.product-page .feature .img.play-img .play::after { content: ""; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; margin-left: 5px; }
.product-page .feature .img.play-img:hover .play { transform: scale(1.08); background: var(--accent); border-color: var(--accent); }
.product-page .watch-link { display: inline-block; margin-top: 16px; color: var(--accent); font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 14px; text-decoration: none; }
.product-page .watch-link:hover { text-decoration: underline; }

/* v1.6 · user-focused closing block ("the artist you are now / becoming") */
.product-page .youblock { position: relative; overflow: hidden; }
.product-page .youblock .you-bg { position: absolute; inset: 0; z-index: 0; }
.product-page .youblock .you-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 80% center; }
.product-page .youblock .you-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,11,.97) 0%, rgba(8,8,11,.88) 38%, rgba(8,8,11,.5) 74%, rgba(8,8,11,.32) 100%); }
.product-page .youblock .wrap { position: relative; z-index: 1; }
.product-page .youblock .you-inner { max-width: 41rem; }
.product-page .youblock h2 { font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; margin: 8px 0 16px; }
.product-page .youblock:not(.rev) h2 { font-size: clamp(24px, 2.8vw, 34px); }
.product-page .youblock p { color: var(--ink-soft); font-size: 16px; max-width: 36rem; }
.product-page .youblock .genrechips { justify-content: flex-start; margin-top: 20px; }
/* no-photo "Made for you" intro: boxed lead paragraph, centered */
.product-page .youblock.lead-box { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* ownership points merged into the you-block */
.product-page .you-own { display: flex; flex-direction: column; gap: 13px; margin: 22px 0 4px; max-width: 36rem; }
.product-page .you-own .oi { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); line-height: 1.46; }
.product-page .you-own .k { color: var(--accent); font-size: 13px; line-height: 1.55; flex: none; }
.product-page .you-own b { font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: 14px; font-weight: 500; color: var(--ink); }
.product-page .you-own.center { margin: 36px auto 4px; align-items: center; text-align: left; }

/* "Grow Without Limits" — horizontal 3-up (producer / composer / songwriter) */
.product-page .growcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 38px 0 4px; }
@media (max-width: 820px){ .product-page .growcols { grid-template-columns: 1fr; } }
.product-page .growcols + .hero-cta { justify-content: center; margin-top: 65px; }
.product-page .growcol { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.product-page .growcol .ph { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-3); }
.product-page .growcol .ph img { width: 100%; height: 100%; object-fit: cover; }
.product-page .growcol .b { padding: 14px 16px 16px; }
.product-page .growcol .tie { font-family: "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; font-weight: 500; color: var(--accent); }
.product-page .growcol p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); text-wrap: balance; }
/* reversed you-block: subject on the left, copy panel on the right */
.product-page .youblock.rev .you-bg img { object-position: 20% center; }
.product-page .youblock.rev .you-bg::after { background: linear-gradient(90deg, rgba(8,8,11,.34) 0%, rgba(8,8,11,.6) 36%, rgba(8,8,11,.93) 62%, rgba(8,8,11,.98) 100%); }
.product-page .youblock.rev .you-inner { margin-left: auto; }
/* use-case / genre columns inside a you-block */
.product-page .usecols { display: flex; flex-wrap: wrap; gap: 22px 44px; margin-top: 22px; }
.product-page .ucol .ul { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 500; color: var(--ink-mute); margin-bottom: 9px; }
.product-page .ucol .genrechips { justify-content: flex-start; margin-top: 0; max-width: 26rem; }

/* ============ PACKAGE PAGES ============ */
.product-page .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(12,12,16,.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .3s ease; }
.product-page .buybar.show { transform: translateY(0); }
.product-page .buybar .wrap { display: flex; align-items: center; gap: 18px; height: 68px; }
.product-page .buybar .bb-name { font-family: var(--display); text-transform: uppercase; font-weight: 500; letter-spacing: .03em; }
.product-page .buybar .bb-price { font-size: 22px; font-weight: 500; font-family: var(--display); }
.product-page .buybar .bb-msrp { color: var(--ink-mute); text-decoration: line-through; font-size: 14px; margin-left: 6px; }

/* Stack the demo mini-player above the sticky buy bar instead of overlapping it. #audio-player
   isn't a descendant of .buybar (it's a separate fixed-position element from
   studio_collection_2026_1.php's shared wrapper template), so this is driven by JS —
   studio-collections.js's initBuyBar() toggles .above-buybar on #audio-player in the same
   onScroll() tick that toggles .buybar's own .show class (a :has(.buybar.show) version of this
   rule was tried first, but proved unreliable: #audio-player already carries an inline
   style="display:block" from jQuery's slideDown(), and the :has() rule intermittently failed
   to re-apply against that — sometimes not at all, sometimes only after an unrelated mutation
   elsewhere on the page, which looked like a stray "jump" whenever a track changed). 68px
   matches .buybar .wrap's height above; the transition (matching .buybar's own transform
   transition above) is what makes #audio-player slide in step with the buy bar instead of
   snapping to its new position the instant .show toggles. */
.product-page #audio-player { transition: bottom .3s ease; }
.product-page #audio-player.above-buybar { bottom: 68px; }

.product-page .pkg-price { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.product-page .pkg-price .big { display:flex; align-items: baseline; gap: 12px; }
.product-page .pkg-price .big .price { font-size: 34px; font-weight: 400; }
.product-page .pkg-price .terms { font-size: 13px; color: var(--ink-mute); margin: 10px 0 18px; text-transform: none; }
.product-page .pkg-price .btn { width: 100%; }
.product-page .affirm-msg { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--ink-mute); text-align: center; }
.product-page .affirm-msg b { color: var(--ink-soft); font-weight: 700; }
.product-page .affirm-msg img { height: 18px; width: auto; display: block; }
.product-page .affirm-msg .affirm-text { position: relative; top: 4px; }

/* cinematic headliner bands */
.product-page .bands { display: flex; flex-direction: column; gap: 24px; margin-bottom: 44px; }
.product-page .bands.bands-2col { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .product-page .bands.bands-2col { grid-template-columns: 1fr; } }
/* image-left / text-right layout for 2-col featured bands */
.product-page .bands-2col .band { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); align-items: stretch; }
.product-page .bands-2col .band .bg { position: relative; inset: auto; overflow: hidden; min-width: 0; }
.product-page .bands-2col .band .bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.product-page .bands-2col .band .bg::after { display: none; }
.product-page .bands-2col .band .c { max-width: none; background: var(--panel); display: flex; flex-direction: column; justify-content: center; padding: 30px 28px; }
.product-page .bands-2col .band .c h3 { font-size: 18px; font-weight: 500; overflow-wrap: break-word; }
.product-page .band { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); min-height: 280px; display: flex; align-items: flex-end; }
.product-page .band .bg { position: absolute; inset: 0; background: #0a0a0f; }
/* v2.0 (Julio): contain (not cover) on a dark backing so the entire cover/banner is visible. */
.product-page .band .bg img { width: 100%; height: 100%; object-fit: contain; filter: brightness(.78) saturate(1.05); }
.product-page .band .bg::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(6,6,8,.92) 0%, rgba(6,6,8,.55) 45%, rgba(6,6,8,.15) 100%); }
.product-page .band .c { position: relative; z-index: 1; padding: 34px 40px; max-width: 30rem; }
.product-page .band .c h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: clamp(24px,3vw,34px); letter-spacing: .03em; }
.product-page .band .c p { margin: 0 0 12px; color: #e2e2ea; font-size: 16px; line-height: 1.5; }
.product-page .band .c .incl { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.product-page .band .c .incl .tag { color: var(--ok); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.product-page .band .c .incl .was { color: var(--ink-mute); text-decoration: line-through; }
/* v1.9: Sounds for Every Scene — half-width banners, 2 per row, shorter (still banner-like) */
.product-page .scene-bands { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
@media (max-width:760px){ .product-page .scene-bands { grid-template-columns:1fr; } }
/* v2.1 (Julio): caption moved above the image instead of overlaid on top of it. */
.product-page .scene-bands .band { display: flex; flex-direction: column; align-items: stretch; min-height: 0; border: none; border-radius: 0; overflow: visible; padding: 20px 0; }
.product-page .scene-bands .band .bg { position: relative; inset: auto; aspect-ratio: 3200/1880; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; order: 2; }
/* v2.0 (Julio): scene bands use real EastWest product banners cropped to title-free art —
   cover-fill (not the contain used by the featured-product bands above). */
.product-page .scene-bands .band .bg img { object-fit: cover; filter: brightness(1.05) saturate(1.05); }
.product-page .scene-bands .band .bg::after { display: none; }
.product-page .scene-bands .band .c { position: static; z-index: auto; max-width: none; padding: 0 2px 18px; order: 1; }
.product-page .scene-bands .band .c h3 { font-size: clamp(14px,1.5vw,20px); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* product grid (what's included) */
.product-page .grid-controls { display:flex; align-items:center; gap:14px; flex-wrap: wrap; margin-bottom: 22px; }
.product-page .grid-controls .count-pill { background: var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:13px; color: var(--ink-soft); }
.product-page .filterbar { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.product-page .filterbar label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; }
.product-page .filterbar select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.product-page .catgroup { margin-bottom: 56px; }
.product-page .catgroup > h3 { font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 15px; letter-spacing: .12em; color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 10px; margin: 0 0 20px; }
.product-page .pgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 980px){ .product-page .pgrid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .product-page .pgrid { grid-template-columns: 1fr; } }
.product-page .pcard { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .15s, box-shadow .2s; }
.product-page .pcard:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.9); }
.product-page .pcard .thumb { aspect-ratio: 1/1; background: var(--bg-3); overflow: hidden; position: relative; }
.product-page .pcard .thumb img { width:100%; height:100%; object-fit: cover; }
.product-page .pcard .thumb::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%); z-index: 1; pointer-events:none; }
.product-page .pcard .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.product-page .pcard .pc-foot .incl { margin-top: 0; }
.product-page .pcard .play { flex: none; width: 34px; height: 34px; border-radius: 999px; background: rgba(6,6,8,.7); border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s, transform .15s; }
.product-page .pcard:hover .play { background: var(--accent); transform: scale(1.06); }
.product-page .pcard .play svg { width: 13px; height: 13px; margin-left: 2px; }
.product-page .pcard.playing .play svg { margin-left: 0; }
.product-page .pcard.playing .play, .product-page .pcard.paused .play { background: var(--accent); }
.product-page .pcard.no-demo .play { opacity: .35; cursor: default; }
.product-page .pcard.no-demo .play:hover { background: rgba(6,6,8,.7); transform: none; }
.product-page .pcard .thumb.placeholder { display: grid; place-items: center; text-align: center; padding: 14px; background: linear-gradient(140deg, var(--panel-2), var(--bg-3)); }
.product-page .pcard .thumb.placeholder span { font-family: var(--display); text-transform: uppercase; font-weight: 500; font-size: 15px; color: var(--ink); letter-spacing: .03em; }
.product-page .pcard .pc-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-page .pcard h5 { margin: 0; font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 15px; line-height: 1.2; letter-spacing: .02em; }
.product-page .pcard p { margin: 0; font-size: 13px; color: var(--ink-soft); flex: 1; }
.product-page .pcard .incl { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 4px; }
.product-page .pcard .incl .tag { color: var(--ok); font-weight: 700; }
.product-page .pcard .incl .was { color: var(--ink-mute); text-decoration: line-through; }

/* feature blocks */
.product-page .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.product-page .feature.rev { direction: rtl; }
.product-page .feature.rev > * { direction: ltr; }
@media (max-width: 820px){ .product-page .feature { grid-template-columns: 1fr; gap: 22px; } }
.product-page .feature .img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; background: var(--bg-3); }
.product-page .feature .img img { width:100%; height:100%; object-fit: cover; }
.product-page .feature h3 { font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 28px; margin: 0 0 12px; letter-spacing: .03em; }
.product-page .feature p { color: var(--ink-soft); font-size: 16px; margin: 0; }

/* compare strip */
.product-page .compare { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 820px){ .product-page .compare { grid-template-columns: 1fr; } }
.product-page .compare .c { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.product-page .compare .c.current { border-color: var(--accent); }
.product-page .compare .c h4 { margin: 0; font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 19px; letter-spacing: .03em; }
.product-page .compare .c .p { font-size: 26px; font-weight: 500; font-family: var(--display); }
.product-page .compare .c .m { color: var(--ink-mute); font-size: 13px; }
.product-page .compare .c .you-are { font-size: 12px; color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

/* awards band */
.product-page .awards { text-align: center; }
.product-page .awards .shot { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-top: 8px; }
.product-page .awards .shot img { width: 100%; max-height: 460px; object-fit: cover; }

/* FAQ accordion */
.product-page .faq { max-width: 820px; margin: 0 auto; }
.product-page .faq-item { border-bottom: 1px solid var(--line); }
.product-page .faq-q { width: 100%; text-align: left; background: none; border: 0; color: var(--ink); cursor: pointer; font-size: 18px; font-weight: 600; padding: 22px 40px 22px 0; position: relative; font-family: inherit; text-transform: none; }
.product-page .faq-q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--accent); transition: transform .2s; }
.product-page .faq-item.open .faq-q::after { content: "\2212"; }
.product-page .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; color: var(--ink-soft); }
.product-page .faq-item.open .faq-a { max-height: 400px; }
.product-page .faq-a p { margin: 0 0 20px; font-size: 16px; }

/* NKS / hardware block */
.product-page .nks { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.product-page .nks .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 820px){ .product-page .nks .wrap { grid-template-columns: 1fr; } }

/* big CTA band */
.product-page .cta-band { text-align: center; background: radial-gradient(800px 300px at 50% 0%, rgba(212,175,55,.22), transparent 60%); }
.product-page .cta-band h2 { font-size: clamp(26px,3.4vw,40px); margin: 0 0 22px; }

/* ---------- footer (fuller, multi-column) ---------- */
.product-page .foot { border-top: 1px solid var(--line); background: var(--bg-2); padding: 52px 0 36px; color: var(--ink-mute); font-size: 14px; }
.product-page .foot .cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 30px; }
@media (max-width: 880px){ .product-page .foot .cols { grid-template-columns: 1fr 1fr; gap: 26px; } }
.product-page .foot .brandcol .logo { display:flex; align-items:center; gap:8px; font-family: var(--display); text-transform: uppercase; font-weight: 500; color: var(--ink); font-size: 13px; margin-bottom: 12px; white-space: nowrap; }
.product-page .foot .brandcol .logo img { height: 22px; }
.product-page .foot h5 { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-size: 13px; margin: 0 0 12px; }
.product-page .foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.product-page .foot a:hover { color: var(--ink); }
.product-page .foot .social { display: flex; gap: 12px; margin-top: 14px; }
.product-page .foot .social a { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-soft); }
.product-page .foot .social a:hover { border-color: var(--accent); color: var(--ink); }
.product-page .foot .legal { margin-top: 34px; padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }

/* ---------- v1.1: group headers, ecosystem cards, Designed-For chips ---------- */
.product-page .catgroup .grouphead { border-bottom: 1px solid var(--line); padding: 26px 0 16px; margin-bottom: 28px; }
.product-page .catgroup .grouphead h3 { font-family: var(--display); text-transform: uppercase; font-size: 20px; font-weight: 500; letter-spacing: .08em; color: var(--ink); margin: 0; }
.product-page .catgroup .grouphead .gtag { color: var(--accent); font-size: 15px; letter-spacing: .1em; margin-left: 8px; }
.product-page .catgroup .grouphead .gcount { color: var(--ink-mute); font-weight: 600; font-size: 15px; }
.product-page .catgroup .grouphead .gblurb { margin: 12px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; text-transform: none; font-family: var(--font); letter-spacing: 0; }
.product-page .gtoggle { display: block; margin: 18px auto 0; }

.product-page .tier-feat { font-size: 13px; color: var(--ink-mute); margin: 0; text-transform: none; line-height: 1.5; }
.product-page .tier-feat b { color: var(--ink-soft); }
.product-page .price-row .startingat { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); align-self: center; }

.product-page .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.product-page .chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--ink-soft); }
.product-page .chip:hover { border-color: var(--accent); color: var(--ink); }

/* ---------- v1.2: Opus UI showcase ---------- */
.product-page .ui-hero { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-bottom: 18px; box-shadow: 0 30px 80px -40px rgba(0,0,0,.85); background: var(--bg-3); }
.product-page .ui-hero img { width: 100%; display: block; }
.product-page .ui-herocap { color: var(--ink-mute); font-size: 14px; margin: -6px 0 28px; }

/* engine-hero — banner with blurred backdrop + crisp foreground + accent lighting ("the engine that powers everything") */
.product-page .ui-hero.engine-hero { position: relative; aspect-ratio: 2 / 1; display: grid; place-items: center; padding: 0; background: #05050a; }
.product-page .engine-hero img { width: auto; }
.product-page .engine-hero .bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(14px) brightness(.82) saturate(1.2); z-index: 0; transform-origin: 55% 50%; animation: engineDrift 42s ease-in-out infinite alternate; }
@keyframes engineDrift { from { transform: scale(1.06) rotate(-2deg); } to { transform: scale(1.16) rotate(3deg); } }
@media (prefers-reduced-motion: reduce){ .product-page .engine-hero .bg { animation: none; transform: scale(1.08); } }
.product-page .engine-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 40%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(120% 100% at 50% 120%, rgba(0,0,0,.66), transparent 55%),
    radial-gradient(120% 100% at 50% -15%, rgba(0,0,0,.5), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 24%); }
.product-page .engine-hero .fg { position: relative; z-index: 2; max-height: 88%; max-width: 70%; height: auto; display: block; border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 34px 80px -26px rgba(0,0,0,.9), 0 0 130px -22px rgba(212,175,55,.42); }
@media (max-width: 720px){ .product-page .ui-hero.engine-hero { aspect-ratio: 4 / 3; } .product-page .engine-hero .fg { max-width: 90%; max-height: 86%; } }

/* engine grid — 4×4 of per-instrument interface tiles (each its own cinematic UI) */
/* v3.8 (Blake): 4×4 grid → simpler contained horizontal array (4 diverse tiles), no magnify, less gold */
.product-page .engine-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 0; }
@media (max-width: 900px){ .product-page .engine-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .product-page .engine-grid { grid-template-columns: repeat(2, 1fr); } }
.product-page .engine-grid .t { overflow: hidden; border: 0; background: transparent; }
.product-page .engine-grid .t img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-page .ui-duo { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
@media (max-width: 820px){ .product-page .ui-duo { grid-template-columns: 1fr; } }
.product-page .ui-duo .shot { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-3); }
.product-page .ui-duo .shot img { width: 100%; display: block; }
.product-page .ui-duo .shot .cap { padding: 12px 15px; font-size: 13px; color: var(--ink-soft); }
.product-page .ui-duo .shot .cap b { display: block; color: var(--ink); font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: 13px; margin-bottom: 2px; }

/* Powered-by-Opus / NKS badge lockup (placeholder for official brand art) */
.product-page .brand-lockup { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.product-page .brand-badge { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 16px 22px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); width: 100%; }
.product-page .brand-badge .mark { width: 76px; height: 46px; border-radius: 11px; display: grid; place-items: center; font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: .02em; flex: none; }
.product-page .brand-badge .mark.opus { background: red; color: #fff; }
.product-page .brand-badge .mark.nks { background: #fff; color: #0c0c10; }
.product-page .brand-badge .bt { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; font-size: 16px; }
.product-page .brand-badge .bs { display: block; font-family: var(--font); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.product-page .ui-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px){ .product-page .ui-grid { grid-template-columns: repeat(2,1fr); } }
.product-page .ui-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.product-page .ui-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background: var(--bg-3); }
.product-page .ui-card .cap { padding: 12px 14px; font-size: 13px; color: var(--ink-soft); }
.product-page .ui-card .cap b { display: block; color: var(--ink); font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: 15px; margin-bottom: 2px; }

/* ---------- v1.5: cinematic interface-scroll bands (CC+ INTERFACE SCROLLS art) ---------- */
.product-page .iface { margin: 0 0 44px; }
.product-page .iface .frame { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-3); box-shadow: 0 26px 64px -38px rgba(0,0,0,.92); }
.product-page .iface .scroller { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.product-page .iface .scroller::-webkit-scrollbar { height: 8px; }
.product-page .iface .scroller::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.product-page .iface .scroller img { display: block; height: 246px; width: auto; max-width: none; }
@media (max-width: 720px){ .product-page .iface .scroller img { height: 184px; } }
.product-page .iface .frame::before, .product-page .iface .frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none; z-index: 2; }
.product-page .iface .frame::before { left: 0; background: linear-gradient(90deg, var(--bg-3), transparent); }
.product-page .iface .frame::after { right: 0; background: linear-gradient(270deg, var(--bg-3), transparent); }
.product-page .iface .cap { color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin: 16px 0 6px; text-transform: none; }

/* v1.5: lift the UI tiles so cinematic + plain shots read as one set */
.product-page .ui-card { box-shadow: 0 16px 40px -30px rgba(0,0,0,.9); }
.product-page .ui-card img { background: #07070a; }
.product-page .ui-hero { background: #07070a; }

/* ---------- v1.5 draft: tier identity system — self-contained branded banners ---------- */
/* per-tier accent (+ shaded-box art for the overview cards) */
/* per-tier identity — the accent (+ button text contrast) follows the tier color */
.product-page .tier-producer { --acc:#74a4ff; --acc2:#3f6dd6; --accent:var(--acc); --accent-hi:var(--acc); --on-accent:#0a0a0c; --box:url(/images/studio-collections/sc-box_producer.jpg); }   /* blue */
.product-page .tier-hollywood { --acc:#D4AF37; --acc2:#9A7D1A; --accent:var(--acc); --accent-hi:var(--acc); --on-accent:#15140e; --box:url(/images/studio-collections/sc-box_hollywood.jpg); }  /* gold (brand) */
.product-page .tier-complete { --acc:#ec4332; --acc2:#a51d12; --accent:var(--acc); --accent-hi:var(--acc); --on-accent:#fff;    --box:url(/images/studio-collections/sc-box_complete.jpg); }   /* red */
/* overview = brand gold "house" accent (HP parity; Producer stays blue, Complete stays red) */
.product-page .house { --accent:#D4AF37; --accent-hi:#F0C040; --on-accent:#15140e; }

/* shared bits ported from the tier-banner mockup */
.product-page .eyebrow2 { display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }
.product-page .orb { width:16px; height:16px; border-radius:999px; flex:none;
  background: radial-gradient(circle at 33% 30%, #fff 0%, var(--acc) 38%, var(--acc2) 75%, #05050a 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 55%, transparent); }
.product-page .meter { display:flex; gap:5px; }
.product-page .meter i { width:22px; height:5px; border-radius:3px; background:#2a2a36; }
.product-page .meter i.on { background:var(--acc); box-shadow:0 0 9px color-mix(in srgb, var(--acc) 60%, transparent); }
.product-page .tierlabel { font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-weight:500; font-size:13px; color:var(--acc); }
.product-page .go { width:46px; height:46px; border-radius:999px; display:grid; place-items:center; background:var(--acc); color:#08080b; font-size:20px; font-weight:800; flex:none; box-shadow:0 10px 28px -8px color-mix(in srgb, var(--acc) 70%, transparent); transition: transform .15s; }
.product-page .go:hover { transform: scale(1.07); }

/* overview "Choose your Collection": premium shaded-box hybrid cards (no backdrop) */
.product-page #collections { padding-top: 108px; padding-bottom: 64px; }
.product-page #spaces { padding-bottom: 100px; }
.product-page #opus { padding-top: 28px; }
.product-page #collections .tiers { gap: 26px; }
.product-page #collections .section-head { margin-bottom: 60px; }
/* two-line section heading (centers with .section-head.center) */
.product-page .section-head h2.stagger span { display: block; white-space: nowrap; }
.product-page .section-head:has(.stagger) { max-width: 58em; }

/* v1.9: modern open cards — no panel/border/left-accent; the Matte art + accent button carry the color */
.product-page .tier { position: relative; display: flex; flex-direction: column; background: none; border: 0; border-radius: 0;
  box-shadow: none; overflow: visible; transition: transform .2s ease; }
.product-page .tier:hover { transform: translateY(-5px); }
.product-page .tier:hover .tier-boxart { box-shadow: 0 26px 64px -30px color-mix(in srgb,var(--acc) 50%, rgba(0,0,0,.85)); }
.product-page .tier.featured { border: 0; box-shadow: none; }
.product-page .tier.featured .tier-boxart { box-shadow: 0 0 0 1px color-mix(in srgb,var(--acc) 42%, transparent), 0 24px 58px -30px color-mix(in srgb,var(--acc) 40%, transparent); }
.product-page .tier .tier-boxart { position: relative; aspect-ratio: 1620/760; background: var(--box) center/cover; border-radius: 14px; overflow: hidden; transition: box-shadow .25s ease; }
.product-page .tier .ribbon { position:absolute; top:14px; right:14px; left:auto; z-index:5; width:auto;
  background: var(--acc); color:#08080b; border-radius:999px; padding:5px 13px; font-size:10.5px; letter-spacing:.12em;
  box-shadow: 0 8px 22px -6px color-mix(in srgb,var(--acc) 70%, transparent); }
.product-page .tier .tier-body { position: relative; z-index:2; padding: 16px 4px 2px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product-page .tier .tier-meta { display:flex; align-items:center; gap:12px; }
.product-page .tier .tier-tag { font-family: var(--font); text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--ink-soft); margin: 2px 0 4px; }
.product-page .tier .tier-priceline { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:auto; }
.product-page .tier .tier-count { font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.product-page .tier .price-from { font-size:12px; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.product-page .tier .price-from b { font-family:var(--display); font-weight: 500; color:#fff; font-size:32px; letter-spacing:.01em; margin-left:6px; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.product-page .tier .tier-actions { display:flex; gap:10px; margin-top:0; }
.product-page .tier .tier-actions .btn { flex:1; }

/* v1.9: package pages mirror the overview — full-bleed marquee art band + centered copy below */
.product-page .tier-hero { position: relative; border-bottom: 1px solid var(--line); background:#0a0a0e; overflow: hidden; }
.product-page .tier-hero .plate { position: relative; width:100%; height: clamp(280px, 40vw, 520px); overflow: hidden; }
.product-page .tier-hero .plate img { width:100%; height:100%; object-fit: cover; object-position: center; display:block; }
.product-page .tier-hero .info { position: relative; z-index:2; text-align:center; max-width:46rem; margin:0 auto;
  padding: 30px 24px 48px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.product-page .tier-hero .info h1 { font-size: clamp(34px,5vw,60px); line-height:.98; letter-spacing:.04em; margin:4px 0 2px; }
.product-page .tier-hero .info .row { display:flex; justify-content:center; align-items:center; gap:14px; }
.product-page .tier-hero .info .hero-cta { display:flex; justify-content:center; margin-top:8px; }

/* relocated price box at top of What's-Inside */
.product-page .included-head { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; margin-bottom:42px; }
@media (max-width:900px){ .product-page .included-head { grid-template-columns:1fr; gap:24px; } }
.product-page .included-head .section-head { margin-bottom:0; }

/* utility */
.product-page .center { text-align: center; }
.product-page .mt-32 { margin-top: 32px; }
.product-page .hidden { display: none !important; }


/* ===== v3.0 — scroll-reveal ===== */
.product-page .reveal { opacity: 0; transform: translateY(20px); transition: opacity 400ms ease, transform 400ms ease; }
.product-page .reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .product-page .reveal { opacity: 1; transform: none; transition: none; } }

/* ===== v3.8 (Blake) — CC+ endorser carousel (ported from the ComposerCloud+ page / homepage spitfire.css) ===== */
.product-page .composer-carousel { display: flex; align-items: center; gap: 12px; }
.product-page .cc-viewport { overflow-x: auto; flex: 1 1 auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.product-page .cc-viewport::-webkit-scrollbar { display: none; }
.product-page .cc-track { display: flex; gap: 22px; }
.product-page .cc-card { flex: 0 0 auto; width: var(--cardw, 256px); margin: 0; min-width: 0; scroll-snap-align: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.product-page .cc-card .cc-ph { aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-3); }
.product-page .cc-card .cc-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.product-page .cc-card blockquote { margin: 0; padding: 18px 20px 25px; font-style: italic; color: var(--ink-soft); font-size: 14px; line-height: 1.55; flex: 0 1 auto; }
.product-page .cc-card figcaption { padding: 2px 20px 20px; }
.product-page .cc-card figcaption b { display: block; font-family: var(--font); font-weight: 700; color: var(--ink); font-size: 15px; }
.product-page .cc-card figcaption span { display: block; color: var(--accent); font-family: "DM Sans", sans-serif; font-size: 11px; letter-spacing: .05em; text-transform: none; margin-top: 3px; }
.product-page .cc-arrow { flex: none; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; transition: border-color .2s, color .2s; }
.product-page .cc-arrow:hover { border-color: var(--accent); color: var(--accent); }
.product-page .cc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.product-page .cc-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; background: var(--line); cursor: pointer; padding: 0; }
.product-page .cc-dots button.active { background: var(--accent); }

/* v3.8 (Blake round-2): engine row — NI "sound behind your favorite producer" style (4 labeled interface tiles, static, no scroll) */
.product-page .engine-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 820px){ .product-page .engine-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .product-page .engine-row { grid-template-columns: 1fr; } }
.product-page .et { display: flex; flex-direction: column; }
.product-page .et-ui { aspect-ratio: 5/4; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-3); display: grid; place-items: center; padding: 8px; }
.product-page .et-ui img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.product-page .engine-row .et:first-child .et-ui img { transform: scale(0.9); }
.product-page .engine-row .et:nth-child(2) .et-ui img { transform: scale(0.9); }
.product-page .engine-row .et:nth-child(3) .et-ui img { transform: scale(0.9); }
.product-page .engine-row .et:nth-child(4) .et-ui img { transform: scale(0.9); }
.product-page .et-cap { padding: 13px 2px 0; }
.product-page .et-cap b { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: 15px; color: var(--ink); }
.product-page .et-cap span { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 4px; line-height: 1.42; }

/* ===== v4.0 (Julio) — phone-only fixes (≤480px, ≤420px). Additive only: every rule here is inside
   a max-width query narrower than any existing breakpoint, so nothing above these widths changes. ===== */
@media (max-width: 480px) {
  /* buttons (esp. the hero "…Audio Demos" CTAs and "Buy Complete Collection") are nowrap by default
     and can't shrink below their text width — long labels overflow a 320-390px viewport. Letting them
     wrap to 2 lines is strictly safer; short buttons (Buy Now, Explore, Buy) already fit on one line. */
  .product-page .btn { white-space: normal; text-align: center; }
  .product-page .hero-cta .btn { font-size: 12.5px; padding: 12px 18px; }

  /* sticky buy bar: name + price + msrp + CTA don't fit a fixed-height nowrap row on narrow phones */
  .product-page .buybar .wrap { gap: 10px; }
  .product-page .buybar .bb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 13px; }
  .product-page .buybar .bb-price { font-size: 17px; }
  .product-page .buybar .bb-msrp { display: none; }
  .product-page .buybar .btn-sm { padding: 12px 16px; }

  /* footer: 5 blocks stay cramped 2-up all the way down to 320px; give phones a full single-column stack */
  .product-page .foot .cols { grid-template-columns: 1fr; }

  /* composer carousel: the two 42px arrow buttons eat too much width, leaving cards too narrow to read;
     native touch swipe + scroll-snap already works without them */
  .product-page .cc-arrow { display: none; }
}
/* ===== v4.1 — mobile section-gap collapse (≤720px). The 100px (up to 108px in places) vertical
   section padding/margins are desktop breathing room; on phones they read as oversized empty gaps
   between sections. Roughly halves the largest offenders — additive only, only touches `padding`/
   `margin`, never layout (display/flex/grid) properties already set on these selectors above. ===== */
@media (max-width: 720px) {
  .product-page section { padding: 45px 0; }
  .product-page section.tight { padding: 40px 0; }
  /* two stacked <section>s each carry their own top+bottom padding, so the seam between them
     doubles up (45px + 45px = 90px) even though a lone section against a non-section neighbor
     (hero, footer) reads correctly at 45px. Drop the second section's top padding at the seam —
     !important because more-specific rules like section.tight/#id otherwise win on class/ID count
     and would silently restore the doubled gap.
     EXCEPT when the section directly above is bordered (.hero-box/.hero/.hero-full/.hero-sc/
     .tier-hero, or .alt — all carry a visible border-bottom): those seams aren't a padding-doubling
     problem (hero sections often carry zero of their own section-level padding to begin with), and
     zeroing the next section's top padding there leaves its heading sitting flush against the line.
     Skip those pairs entirely so the next section keeps its own natural padding-top. */
  .product-page section:not(.hero, .hero-box, .hero-full, .hero-sc, .tier-hero, .alt) + section { padding-top: 0 !important; }
  /* .alt sections carry their own border-top (a real visual divider) regardless of what precedes
     them — zeroing their padding-top leaves the heading sitting flush against that border. Give
     them back a little breathing room under the line. */
  .product-page section + section.alt { padding-top: 28px !important; }
  .product-page .hero .wrap { padding: 48px 20px 40px; }
  .product-page .hero-full .wrap { padding: 56px 20px; }
  .product-page .hero-box .inner { padding: 32px 20px 28px; }
  .product-page .hero-sc .inner { padding: 22px 20px 36px; }
  .product-page .tier-hero .info { padding: 22px 20px 32px; }
  .product-page #collections { padding-top: 56px; padding-bottom: 40px; }
  .product-page #spaces { padding-bottom: 56px; }
  .product-page .section-head { margin-bottom: 28px; }
  .product-page #collections .section-head { margin-bottom: 32px; }
  .product-page .catgroup { margin-bottom: 32px; }
  .product-page .bands { margin-bottom: 28px; }
  .product-page .included-head { margin-bottom: 28px; }
  /* "Grow Without Limits" (Producer/Composer/Songwriter cards → Find Your Collection button):
     the button's 65px margin-top was a fixed desktop value, way out of step with the ~28-32px
     rhythm the rest of this section (and page) uses on phones. Match it on both sides of the
     card grid so the gaps above and below read as even. */
  .product-page .growcols { margin-top: 28px; }
  .product-page .growcols + .hero-cta { margin-top: 28px; }
  .product-page .foot { padding: 36px 0 28px; }
  /* engine-row tiles rely on the grid's own 22px gap for spacing, which reads fine across
     multiple columns but feels cramped once the grid drops to a single column on phones (each
     tile stacks directly under the last). Give them extra room between stacked tiles; skip the
     last one so the grid doesn't gain unwanted trailing space below it. */
  .product-page .engine-row .et:not(:last-child) { margin-bottom: 20px; }
  /* staggered two-line headings ("Three Collections. / One Creative Ecosystem.") are nowrap by
     design (desktop keeps each line on one row) — on phones a single line can be wider than the
     viewport, and since the heading is centered the overflow bleeds out on both sides, forcing the
     whole page to scroll horizontally. Was gated to ≤420px only, which is narrower than several
     real phones still hit the overflow on; widen it to the same ≤720px mobile range as everything
     else in this block. */
  .product-page .section-head h2.stagger span { white-space: normal; }
	.desktop-break { display: inline; }
}