/* =========================================================
   Product pages (products/<id>.html) — classes prefixed .pp-
   Shell (nav, footer, buttons, chips, glass) comes from base.css.
   ========================================================= */
body.pp { background: var(--bg); }
.pp .nav { background: linear-gradient(180deg, rgba(3, 5, 13, .7), rgba(3, 5, 13, 0)); }
.pp .nav.scrolled, .pp .nav.open { background: rgba(4, 7, 18, .66); }

/* ---------- hero ---------- */
.pp-hero {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; align-items: center;
  min-height: min(900px, 100svh);
  padding: calc(var(--nav-h) + clamp(24px, 4vw, 56px)) 0 clamp(48px, 6vw, 88px);
}
.pp-hero-bg { position: absolute; inset: -80px; z-index: -2; }
.pp-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(46px) saturate(1.4); opacity: .6; transform: scale(1.08); }
.pp-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 78% 50%, rgba(138, 92, 255, .16), transparent 70%),
    linear-gradient(90deg, rgba(3, 5, 13, .95) 0%, rgba(3, 5, 13, .82) 42%, rgba(3, 5, 13, .5) 100%),
    linear-gradient(180deg, rgba(3, 5, 13, .55) 0%, transparent 26%, transparent 72%, var(--bg) 100%);
}
.pp-hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 76px); align-items: center; }
.pp-hero-copy { min-width: 0; }
.pp-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 22px; padding: 6px 12px 6px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  font-size: 13px; color: var(--ink-2); text-decoration: none; transition: color .2s, border-color .2s;
}
.pp-back .ico { width: 15px; height: 15px; }
.pp-back:hover { color: #fff; border-color: rgba(41, 231, 255, .55); }
.pp-kicker a { text-decoration: none; }
.pp-kicker a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pp-hero h1 {
  font-size: clamp(36px, 4.9vw, 70px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800;
  margin: 14px 0 18px; text-wrap: balance;
}
.pp-tagline { max-width: 600px; }
.pp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 18px; }
.pp-price-label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pp-price-val { font-size: clamp(32px, 3.2vw, 44px); line-height: 1; font-weight: 800; letter-spacing: -.035em; color: #fff; text-shadow: 0 0 28px rgba(138, 92, 255, .55); }
.pp-price-val.is-ask { font-size: 26px; }
.pp-price-note { flex-basis: 100%; color: var(--ink-2); font-size: 14px; }
.pp-cta { margin-top: 28px; }

.pp-hero-frame {
  --hmax: min(64vh, 620px);
  position: relative; margin: 0; justify-self: center;
  width: min(100%, calc(var(--hmax) * var(--r)));
  aspect-ratio: var(--r);
  border-radius: var(--radius-lg); padding: 8px;
  background: linear-gradient(160deg, rgba(41, 231, 255, .35), rgba(138, 92, 255, .2) 45%, rgba(255, 63, 208, .32));
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9), 0 0 80px -20px rgba(138, 92, 255, .55);
}
.pp-hero-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-lg) - 7px); background: #02040c; }

/* ---------- sections ---------- */
.pp-sec { position: relative; padding-block: clamp(56px, 7vw, 104px); scroll-margin-top: var(--nav-h); }
.pp-sec + .pp-sec { border-top: 1px solid rgba(130, 200, 255, .06); }
.pp-sec .sec-head h2, .pp-h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; margin: 14px 0 12px; }
.pp-sec .sec-head .sec-sub { max-width: 680px; }

/* what you get */
.pp-what-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.pp-desc { margin-top: 6px; max-width: 700px; color: var(--ink-2); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; }
.pp-bullets { margin-top: 24px; gap: 12px; }
.pp-bullets li { color: var(--ink); font-size: 16.5px; font-weight: 550; }
.pp-aud { margin-top: 30px; }
.pp-aud-label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.pp-aud-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pp-aud-list li { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); font-size: 13.5px; color: var(--ink-2); }

.pp-glance { padding: 26px 26px 24px; position: sticky; top: calc(var(--nav-h) + 24px); }
.pp-facts { margin: 14px 0 0; display: grid; }
.pp-facts > div { padding: 13px 0; border-top: 1px solid var(--line); }
.pp-facts > div:first-child { border-top: 0; padding-top: 4px; }
.pp-facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.pp-facts dd { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.45; }
.pp-facts > div:first-child dd { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.pp-facts dd small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.pp-facts dd a { color: var(--cyan); text-decoration: none; }
.pp-facts dd a:hover { text-decoration: underline; }
.pp-glance-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pp-glance-cta .btn { flex: 1 1 auto; }

/* watch: films (click-to-load Vimeo) + local clips */
.pp-films { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 22px; margin-top: 30px; }
.pp-film { margin: 0; min-width: 0; }
.pp-film .pp-vid-frame { aspect-ratio: 16 / 9; }
@media (min-width: 901px) {
  .pp-films[data-count="1"] .pp-film { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 34px; align-items: center; }
  .pp-films[data-count="1"] figcaption { flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; }
  .pp-films[data-count="1"] .pp-vid-title { font-size: clamp(20px, 1.8vw, 26px); font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
  .pp-films[data-count="1"] .pp-film-blurb { font-size: 15.5px; }
}
.pp-vids { --vid-h: 250px; --vid-max: 520px; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 30px; }
.pp-films + .pp-vids { margin-top: 26px; }
.pp-vid { margin: 0; min-width: 0; flex: var(--r) 1 calc(var(--r) * var(--vid-h)); max-width: calc(var(--r) * var(--vid-max)); }
.pp-vid .pp-vid-frame { aspect-ratio: var(--r); }
.pp-vid-frame {
  position: relative; overflow: hidden; border-radius: var(--radius); background: #02040c;
  border: 1px solid var(--line-2); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9), 0 0 40px -16px rgba(41, 231, 255, .35);
}
.pp-vid-frame video, .pp-vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.pp-vid figcaption, .pp-film figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 10px; }
.pp-vid-title { font-weight: 650; font-size: 14.5px; }
.pp-vid-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.pp-film-blurb { flex-basis: 100%; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.pp-film-link { display: inline-flex; align-items: center; gap: 6px; color: var(--cyan); font-size: 14px; font-weight: 600; text-decoration: none; }
.pp-film-link .ico { width: 14px; height: 14px; }
.pp-film-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.pp-embed { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: radial-gradient(80% 80% at 50% 40%, rgba(138, 92, 255, .35), #02040c); }
.pp-embed img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; filter: brightness(.82); }
.pp-embed:hover img, .pp-embed:focus-visible img { transform: scale(1.03); filter: brightness(.95); }
/* play cue sits bottom-left (like the homepage .films-cue) so it never covers the title art in the middle of a poster */
.pp-embed::before { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(3, 5, 13, .72)); }
.pp-play {
  position: absolute; z-index: 2; left: 20px; bottom: 20px; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; color: #050713; background: var(--grad);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .1), 0 0 34px rgba(138, 92, 255, .8); transition: transform .3s var(--ease);
}
.pp-play .ico { width: 26px; height: 26px; margin-left: 4px; }
.pp-embed:hover .pp-play, .pp-embed:focus-visible .pp-play { transform: scale(1.08); }
.pp-embed-note { position: absolute; z-index: 2; left: 98px; bottom: 41px; padding: 5px 10px; border-radius: 999px; background: rgba(3, 5, 13, .7); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }

/* live examples */
.pp-lives { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; margin-top: 30px; }
.pp-live {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: linear-gradient(170deg, rgba(14, 21, 52, .75), rgba(6, 9, 24, .8));
  transition: transform .35s var(--ease), border-color .3s, box-shadow .3s;
}
.pp-live:hover, .pp-live:focus-visible { transform: translateY(-4px); border-color: rgba(41, 231, 255, .6); box-shadow: 0 0 40px -12px rgba(41, 231, 255, .55); }
.pp-live-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(90% 90% at 30% 20%, rgba(41, 231, 255, .22), transparent 60%), radial-gradient(80% 80% at 80% 90%, rgba(255, 63, 208, .2), transparent 60%), #050818; display: grid; place-items: center; }
.pp-live-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease); }
.pp-live:hover .pp-live-shot img { transform: scale(1.04); }
.pp-live-host { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--ink); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(3, 5, 13, .6); max-width: 90%; overflow-wrap: anywhere; text-align: center; }
.pp-live-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.pp-live-body b { font-size: 16px; font-weight: 700; }
.pp-live-body > span { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.pp-live-body .pp-live-url { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--cyan); overflow-wrap: anywhere; }
.pp-live-url .ico { width: 13px; height: 13px; }

/* gallery (justified rows from each image's aspect ratio) */
.pp-gal { --gal-h: 230px; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pp-gal::after { content: ""; flex: 999 1 0; }
.pp-gal-item {
  position: relative; padding: 0; border: 0; cursor: zoom-in; overflow: hidden; border-radius: 14px; background: #02040c;
  flex: var(--r) 1 calc(var(--r) * var(--gal-h)); max-width: calc(var(--r) * var(--gal-h) * 1.9);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pp-gal-item img { width: 100%; aspect-ratio: var(--r); object-fit: cover; transition: transform .6s var(--ease), filter .4s; }
.pp-gal-item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(130, 200, 255, .14); transition: box-shadow .3s; pointer-events: none; }
.pp-gal-item:hover img, .pp-gal-item:focus-visible img { transform: scale(1.04); filter: brightness(1.08); }
.pp-gal-item:hover::after, .pp-gal-item:focus-visible::after { box-shadow: inset 0 0 0 2px var(--cyan), 0 0 30px rgba(41, 231, 255, .35); }

/* 1-2 images: shown under "What you get" instead of a near-empty full-width gallery */
.pp-what-figs { --gal-h: 180px; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; max-width: 700px; }
.pp-what-figs .pp-gal-item { max-width: calc(var(--r) * var(--gal-h) * 1.6); }
.pp-what-figs[data-count="1"] { --gal-h: 280px; }
.pp-what-figs[data-count="1"] .pp-gal-item { flex: 0 1 calc(var(--r) * var(--gal-h)); }

/* pricing tiers */
.pp-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; margin-top: 32px; align-items: stretch; }
.pp-tier { position: relative; display: flex; border-radius: var(--radius-lg); padding: 1px; background: var(--line-2); }
.pp-tier.is-featured {
  background: linear-gradient(160deg, var(--cyan), var(--violet) 50%, var(--magenta));
  box-shadow: 0 0 60px -18px rgba(138, 92, 255, .9);
}
.pp-tier-in {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column;
  padding: 24px 22px 22px; border-radius: calc(var(--radius-lg) - 1px);
  background: linear-gradient(172deg, rgba(14, 21, 52, .97), rgba(5, 8, 22, .98));
}
.pp-tier-flag {
  position: absolute; top: -1px; right: 20px; padding: 5px 11px; border-radius: 0 0 10px 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #050713; background: var(--grad);
}
.pp-tier-level { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
.pp-tier-name { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; font-weight: 750; }
.pp-tier-price { margin: 14px 0 0; padding: 14px 0; border-block: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.pp-tier-price b { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.pp-tier-price span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.pp-tier-inc { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; flex: 1; align-content: start; }
.pp-tier-inc li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pp-tier-inc li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 8px var(--cyan); }
.pp-tier-cta { margin-top: 22px; width: 100%; }
.pp-fine { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; color: var(--ink-2); font-size: 14.5px; }
.pp-fine::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .5em; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }

/* related */
.pp-rels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.pp-rel {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: linear-gradient(170deg, rgba(14, 21, 52, .75), rgba(6, 9, 24, .8));
  transition: transform .35s var(--ease), border-color .3s, box-shadow .3s;
}
.pp-rel:hover, .pp-rel:focus-visible { transform: translateY(-4px); border-color: rgba(41, 231, 255, .6); box-shadow: 0 0 40px -12px rgba(41, 231, 255, .55); }
.pp-rel-img { aspect-ratio: 16 / 10; overflow: hidden; background: #02040c; }
.pp-rel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pp-rel:hover .pp-rel-img img { transform: scale(1.05); }
.pp-rel-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.pp-rel-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.pp-rel-name { font-size: 18px; font-weight: 750; letter-spacing: -.015em; }
.pp-rel-tag { flex: 1; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.pp-rel-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.pp-rel-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--cyan); transition: background .3s, color .3s; }
.pp-rel:hover .pp-rel-go { background: var(--grad); color: #050713; border-color: transparent; }

/* booking band */
.pp-bandsec { padding-top: clamp(28px, 4vw, 56px); }
.pp-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px;
  padding: clamp(28px, 4.2vw, 60px); overflow: hidden;
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(41, 231, 255, .16), transparent 60%),
    radial-gradient(60% 90% at 100% 100%, rgba(255, 63, 208, .16), transparent 60%),
    linear-gradient(160deg, rgba(20, 30, 70, .75), rgba(8, 12, 30, .85));
  box-shadow: 0 0 120px -50px rgba(138, 92, 255, .9);
}
.pp-band-copy { flex: 1 1 460px; min-width: 0; }
.pp-band h2 { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.05; letter-spacing: -.04em; font-weight: 800; margin: 14px 0 12px; text-wrap: balance; }
.pp-band-text { color: var(--ink-2); max-width: 560px; }
.pp-band-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pp-band-link { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.pp-band-link .ico { color: var(--cyan); }
.pp-band-link:hover { color: #fff; }


/* mobile sticky book bar */
.pp-sticky { display: none; }
.footer a[aria-current="page"] { color: var(--cyan); }
/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pp-rels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-rels > :nth-child(3) { display: none; }
}
@media (max-width: 900px) {
  .pp-hero { min-height: 0; }
  .pp-hero-in { grid-template-columns: 1fr; }
  .pp-hero-frame { --hmax: 56vh; justify-self: start; }
  .pp-what-grid { grid-template-columns: 1fr; }
  .pp-glance { position: static; }
}
@media (max-width: 760px) {
  .pp-hero-bg img { opacity: .5; }
  .pp-hero-scrim {
    background: linear-gradient(180deg, rgba(3, 5, 13, .75) 0%, rgba(3, 5, 13, .86) 50%, var(--bg) 100%);
  }
  .pp-back { margin-bottom: 18px; }
  .pp-hero h1 { font-size: clamp(32px, 9.4vw, 44px); }
  .pp-cta .btn { flex: 1 1 auto; }
  .pp-hero-frame { --hmax: 60vh; justify-self: center; padding: 6px; }
  .pp-gal { --gal-h: 130px; gap: 8px; }
  .pp-what-figs { --gal-h: 94px; gap: 8px; }
  .pp-what-figs[data-count="1"] { --gal-h: 220px; }
  .pp-play { left: 14px; bottom: 14px; width: 52px; height: 52px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 0 28px rgba(138, 92, 255, .8); }
  .pp-play .ico { width: 22px; height: 22px; }
  .pp-embed-note { left: 80px; bottom: 28px; }
  .pp-vids { --vid-h: 200px; }
  .pp-vid { flex-basis: 100%; max-width: 100%; }
  .pp-vid.is-tall { flex-basis: auto; width: min(100%, 300px); }
  .pp-rels { grid-template-columns: 1fr; }
  .pp-rels > :nth-child(3) { display: flex; }
  .pp-band-cta { width: 100%; }
  .pp-band-cta .btn { width: 100%; }
  .pp-sticky {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 70;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 8px 8px 18px; border-radius: 999px;
    background: rgba(6, 9, 24, .9); border: 1px solid var(--line-2);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .9), 0 0 30px -10px rgba(138, 92, 255, .8);
    transform: translateY(calc(100% + 30px)); visibility: hidden;
    transition: transform .4s var(--ease), visibility .4s;
  }
  .pp-sticky.is-on { transform: none; visibility: visible; }
  .pp-sticky-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .pp-sticky-info b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-sticky-info span { font-size: 12px; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-gal-item img, .pp-embed img, .pp-live, .pp-rel, .pp-rel-img img, .pp-live-shot img, .pp-sticky { transition: none; }
}