/* ==========================================================================
   cnm.css — the "cinema poster" trainer skin, extracted verbatim from the
   inline <style> block shared byte-for-byte across vocal-teacher-karma.html,
   vocal-teacher-lumber.html, vocal-teacher-malina.html,
   vocal-teacher-pierce.html and vocal-teacher-starweaver.html.

   Depends on tokens already defined in style.css (--bg-panel-rgb,
   --bg-void-rgb, --text-dim, --teal-mid, --teal-accent, --teal-accent-soft,
   --status-green, --radius-md, --radius-lg, --ease, --elev-3) plus the
   .tp-* stage system, .kicker and .page-title from style.css, and the
   Orbitron + Rajdhani Google Fonts. Requires body.cnm-page + a .cnm-root
   wrapper on the page.

   Extracted 2026-08-20 — the five vocal pages keep their own inline copy
   for now; this file is the shared source going forward. Not yet linked
   from those five pages (see /parallel-agent-no-collison plan, Phase 1).
   ========================================================================== */

/* ---------- palette: violet -> magenta, vocal platinum as the lane accent ---------- */
.cnm-root {
  --cnm-violet-deep: #2a0a52;
  --cnm-violet: #5b1a9e;
  --cnm-magenta: #b81a7d;
  --cnm-magenta-hot: #e0218a;
  --cnm-magenta-rgb: 224, 33, 138;
  --cnm-violet-rgb: 91, 26, 158;
  --cnm-gold: #ffc94a;
  /* vocal lane = the platinum style.css already gives .tp-vocal (#f4f7fb) —
     it reads as a stage spotlight where the DJ's red read as club heat */
  --cnm-lane: #f4f7fb;
  --cnm-lane-rgb: 244, 247, 251;
}

/* The site's signature aurora is teal. On this page it fights the violet wash,
   so we re-tint it — `background` only, inheriting the base rule's blur,
   screen blend and drift animation untouched. Scoped to body.cnm-page. */
body.cnm-page::before {
  background:
    radial-gradient(38% 32% at 18% 20%, rgba(91, 26, 158, .40), transparent 70%),
    radial-gradient(30% 26% at 82% 12%, rgba(224, 33, 138, .26), transparent 70%);
}
body.cnm-page::after {
  background:
    radial-gradient(34% 30% at 75% 82%, rgba(224, 33, 138, .22), transparent 70%),
    radial-gradient(28% 24% at 15% 78%, rgba(91, 26, 158, .32), transparent 70%);
}

/* ---------- film grain / scanlines + vignette ----------
   Fixed overlay, pointer-events none so it can never eat a click on the
   booking button. Stays below .quick-signup-tier z-indexes. */
.cnm-root::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .55;
  background-image:
    radial-gradient(ellipse 78% 70% at 50% 44%, transparent 52%, rgba(0, 0, 0, .55) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .20) 0 1px, transparent 1px 3px);
}

/* ==========================================================================
   THE HERO — riffing on .tp-*, not replacing it. Markup (built by JS below)
   stays exactly what teacher-stage.js expects.
   ========================================================================== */

/* taller, cinema-proportioned still */
.cnm-root .tp-shell { --tp-stage-h: clamp(520px, 68vh, 780px); }
@media (max-width: 620px) {
  .cnm-root .tp-shell { --tp-stage-h: clamp(380px, 54vh, 480px); }
}

/* the poster fan has to sit ON the still, so content rides higher than the
   stock .62 */
.cnm-root .tp-shell-body { padding-top: calc(var(--tp-stage-h) * .24); }

/* layer 1 — texture re-tinted violet. Still the loading AND no-photo state. */
.cnm-root .tp-stage-texture {
  background-image:
    linear-gradient(155deg, rgba(var(--cnm-violet-rgb), .34), rgba(var(--cnm-magenta-rgb), .20)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 10px, transparent 10px 20px),
    linear-gradient(rgba(var(--cnm-magenta-rgb), .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cnm-magenta-rgb), .07) 1px, transparent 1px);
}

/* layer 2 — the still becomes the blurred backdrop plate. FILTER ONLY:
   .tp-race animates this element's transform. */
.cnm-root .tp-stage-photo {
  filter: blur(15px) saturate(1.45) brightness(.72) contrast(1.05);
}

/* layer 3 — scrim carries the violet -> magenta wash; the lane radial up top
   is the vocal platinum, a spotlight instead of the DJ's red heat. The final
   stop stays solid var(--bg-void): that seam is why the still has no bottom
   edge. */
.cnm-root .tp-shell.tp-bleed .tp-stage-scrim {
  background:
    radial-gradient(ellipse 62% 78% at 50% 14%, rgba(var(--cnm-lane-rgb), .18), transparent 62%),
    linear-gradient(180deg,
      rgba(42, 10, 82, .50) 0%,
      rgba(91, 26, 158, .52) 30%,
      rgba(184, 26, 125, .44) 54%,
      rgba(var(--bg-void-rgb), .88) 82%,
      var(--bg-void) 100%);
}

/* ---------- marquee type ---------- */
.cnm-root .tp-shell-body > .kicker,
.cnm-root .tp-shell-body .kicker {
  color: rgba(255, 255, 255, .72);
  letter-spacing: .32em;
  margin: 0 0 .4rem;
}
.cnm-root .tp-shell-body .page-title {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing: .12em;
  margin-bottom: 1.6rem;
  text-shadow: 0 0 26px rgba(var(--cnm-magenta-rgb), .55), 0 2px 10px rgba(0, 0, 0, .7);
}

/* ==========================================================================
   THE POSTER FAN — Figma's overlapping "hand of cards".
   Centre = this trainer (upright, crisp). Flanks = the SAME trainer's own
   poster deep in the stack — one title fanned, never other people's faces
   (the honesty lesson the DJ page already paid for). aria-hidden decoration.
   Backgrounds are set inline by the JS build since the photo comes from
   profilesApi, not this file.
   ========================================================================== */
.cnm-root .cnm-fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  max-width: 100%;
  margin: 0 auto 2.2rem;
}

/* OUTER — owns the entrance. waov-rise animates transform here. */
.cnm-root .cnm-poster {
  position: relative;
  flex: 0 0 auto;
  animation: waov-rise .7s cubic-bezier(.2, .8, .2, 1) backwards;
}
.cnm-root .cnm-poster.is-lead { z-index: 2; animation-delay: .46s; }
.cnm-root .cnm-poster.is-left { z-index: 1; animation-delay: .58s; margin-right: -46px; }
.cnm-root .cnm-poster.is-right { z-index: 1; animation-delay: .66s; margin-left: -46px; }

/* INNER — owns the fan angle, a different element from the animated one. */
.cnm-root .cnm-poster-inner {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 776 / 1024;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: rgba(var(--bg-panel-rgb), .9);
  background-size: cover;
  background-position: center 12%;
  background-repeat: no-repeat;
  transition: transform .6s var(--ease), filter .6s var(--ease);
}

.cnm-root .cnm-poster.is-lead { width: clamp(212px, 29vw, 278px); }
.cnm-root .cnm-poster.is-lead .cnm-poster-inner {
  border: 1px solid rgba(var(--cnm-magenta-rgb), .5);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .7),
    0 0 46px rgba(var(--cnm-magenta-rgb), .32),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}

.cnm-root .cnm-poster.is-flank { width: clamp(172px, 23vw, 224px); }
.cnm-root .cnm-poster.is-flank .cnm-poster-inner {
  filter: saturate(.35) brightness(.5) contrast(1.05);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .66);
}
.cnm-root .cnm-poster.is-left .cnm-poster-inner {
  transform: rotate(-11deg) translateY(16px);
}
.cnm-root .cnm-poster.is-right .cnm-poster-inner {
  transform: rotate(11deg) translateY(16px);
}
.cnm-root .cnm-fan:hover .cnm-poster.is-left .cnm-poster-inner {
  transform: rotate(-16deg) translate(-16px, 8px);
  filter: saturate(.5) brightness(.62) contrast(1.05);
}
.cnm-root .cnm-fan:hover .cnm-poster.is-right .cnm-poster-inner {
  transform: rotate(16deg) translate(16px, 8px);
  filter: saturate(.5) brightness(.62) contrast(1.05);
}

/* a rotated flank's bounding box is wider than the card — below this width
   drop the decoration; the headliner is the content. */
@media (max-width: 820px) {
  .cnm-root .cnm-poster.is-flank { display: none; }
  .cnm-root .cnm-poster.is-lead { width: clamp(200px, 56vw, 260px); }
}

@media (prefers-reduced-motion: reduce) {
  .cnm-root .cnm-poster { animation: none; }
}

/* ---------- the "Now Showing" pill floating over the fan ----------
   Teal stays — it is the site's signature and reads hardest against magenta. */
.cnm-root .cnm-now {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--teal-mid), var(--teal-accent));
  color: #04222b;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .6), 0 0 26px var(--teal-accent-soft);
  animation: cnm-fade .5s ease-out 1.05s backwards;
}
.cnm-root .cnm-now i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #04222b;
  animation: cnm-blink 1.8s steps(1, end) infinite;
}
@keyframes cnm-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
@keyframes cnm-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cnm-root .cnm-now,
  .cnm-root .cnm-now i { animation: none; }
}

/* ==========================================================================
   THE INFO SHEET — Figma's rounded panel under the still. Keeps .tp-panel so
   it inherits the existing .74s entrance stagger.
   ========================================================================== */
.cnm-root .cnm-sheet {
  position: relative;
  max-width: 660px;
  margin: 0 auto 2.6rem;
  padding: 2.4rem 1.9rem 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--cnm-magenta-rgb), .26);
  background:
    linear-gradient(168deg,
      rgba(var(--cnm-violet-rgb), .34) 0%,
      rgba(var(--cnm-magenta-rgb), .14) 46%,
      rgba(var(--bg-panel-rgb), .94) 100%),
    rgba(var(--bg-panel-rgb), .9);
  box-shadow: var(--elev-3), 0 0 70px rgba(var(--cnm-magenta-rgb), .18);
  backdrop-filter: blur(16px);
}

/* the certificate badge, straddling the sheet's top-left corner */
.cnm-root .cnm-cert {
  position: absolute;
  top: -13px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .26rem .74rem;
  border-radius: 7px;
  background: var(--cnm-magenta-hot);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .16em;
  box-shadow: 0 6px 20px rgba(var(--cnm-magenta-rgb), .5);
}

.cnm-root .cnm-sheet #teacherName {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.05;
  text-align: left;
  margin: 0 0 .45rem;
  color: #fff;
  text-shadow: 0 2px 24px rgba(var(--cnm-magenta-rgb), .4);
}

/* thin meta line */
.cnm-root .cnm-metaline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .08em;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}
.cnm-root .cnm-metaline span:not(:last-child)::after {
  content: "\00b7";
  margin-left: .55rem;
  color: rgba(var(--cnm-magenta-rgb), .8);
}

/* ---------- the star block ----------
   Gold star + big line + tiny caption. The caption is the trainer's REAL
   specialty from profiles.js — a field this page actually has, never an
   invented rating. */
.cnm-root .cnm-star {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(255, 255, 255, .07);
  border-left: 3px solid var(--cnm-gold);
  margin-bottom: 1.4rem;
}
.cnm-root .cnm-star-glyph {
  font-size: 2.2rem;
  line-height: 1;
  color: var(--cnm-gold);
  text-shadow: 0 0 22px rgba(255, 201, 74, .6);
}
.cnm-root .cnm-star-val {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  letter-spacing: .03em;
  color: #fff;
  line-height: 1.2;
}
.cnm-root .cnm-star-cap {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: .18rem;
}

/* ---------- the italic pull-quote, repurposed as the lane tagline ---------- */
.cnm-root .cnm-quote {
  position: relative;
  margin: 0 0 1.7rem;
  padding-left: 1.1rem;
  border-left: 2px solid rgba(var(--cnm-magenta-rgb), .55);
  font-family: 'Rajdhani', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(238, 241, 245, .82);
}

/* ---------- SYNOPSIS ---------- */
.cnm-root .cnm-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 .7rem;
}
.cnm-root .cnm-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--cnm-magenta-rgb), .5), transparent);
}
.cnm-root .cnm-synopsis {
  margin: 0 0 1.8rem;
  font-size: .98rem;
  line-height: 1.7;
  color: rgba(238, 241, 245, .78);
}

/* ---------- the 3-column metadata strip ----------
   The real fields THIS table owns: rate / availability / sample. Values are
   placeholder-length prose today, so align-items:start and let them wrap. */
.cnm-root .cnm-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 1.2rem;
  padding: 1.3rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  margin-bottom: 1.6rem;
}
.cnm-root .cnm-strip-label {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .35rem;
}
.cnm-root .cnm-strip-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.45;
  color: #fff;
}
.cnm-root .cnm-strip-val a { color: var(--teal-accent); }
@media (max-width: 560px) {
  .cnm-root .cnm-strip { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------- the ticket ----------
   lesson = screening, so the CTA is a torn ticket. The notches are cut with a
   mask; the glow lives on the wrapper because a mask clips box-shadow. */
.cnm-root .cnm-ticket-wrap {
  position: relative;
  filter: drop-shadow(0 12px 30px rgba(var(--cnm-magenta-rgb), .42));
}
.cnm-root #bookTrainerBtn {
  width: 100%;
  padding: 1.05rem 1.2rem;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(100deg, var(--cnm-magenta), var(--cnm-magenta-hot) 58%, var(--cnm-violet));
  background-size: 190% 100%;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: background-position .6s var(--ease), letter-spacing .4s var(--ease);
  -webkit-mask:
    radial-gradient(circle 9px at 0 50%, transparent 98%, #000 100%),
    radial-gradient(circle 9px at 100% 50%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 9px at 0 50%, transparent 98%, #000 100%),
    radial-gradient(circle 9px at 100% 50%, transparent 98%, #000 100%);
  mask-composite: intersect;
}
.cnm-root #bookTrainerBtn:hover {
  background-position: 100% 0;
  letter-spacing: .19em;
}

/* the confirm reads as the torn-off stub */
.cnm-root #bookConfirm {
  margin-top: .85rem;
  padding: .6rem .9rem;
  border-radius: 8px;
  border: 1px dashed rgba(62, 207, 106, .5);
  background: rgba(62, 207, 106, .08);
  color: var(--status-green);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .05em;
  text-align: center;
}

/* ---------- caption under the fan ---------- */
.cnm-root .cnm-lineup {
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 2.2rem;
  animation: cnm-fade .5s ease-out 1.15s backwards;
}
@media (prefers-reduced-motion: reduce) {
  .cnm-root .cnm-lineup { animation: none; }
}

/* not-found fallback inherits the sheet look so even the error is on-theme */
.cnm-root .cnm-notfound { text-align: center; padding: 3rem 1.5rem; }

/* ---------- payment card — re-homed from vocal-lessons.html, .cnm-root scoped ---------- */
.cnm-root .cnm-pay-wrap { margin: 0 0 1.6rem; position: relative; }
.cnm-root .cnm-pay { border: 1px solid rgba(var(--cnm-magenta-rgb), .3); border-radius: 14px; background: rgba(0,0,0,.28); overflow: hidden; }
.cnm-root .cnm-pay-top { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.9rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.08); }
.cnm-root .cnm-pay-head { font-family:'Orbitron',sans-serif; font-size:.78rem; letter-spacing:.1em; color:#fff; text-transform:uppercase; margin:0; }
.cnm-root .cnm-pay-cart { font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--text-dim); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:.26rem .6rem; white-space:nowrap; }
.cnm-root .cnm-pay-tabs { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; padding:.85rem 1.1rem 0; }
.cnm-root .cnm-pay-tab { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.8rem; color:var(--text-dim); background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:.5rem .45rem; cursor:pointer; transition:.15s; line-height:1.2; }
.cnm-root .cnm-pay-tab .cnm-pay-tsub { display:block; font-weight:600; font-size:.6rem; opacity:.7; letter-spacing:.03em; }
.cnm-root .cnm-pay-tab.active { color:#04121a; background:var(--cnm-gold); border-color:var(--cnm-gold); box-shadow:0 4px 16px rgba(255,201,74,.3); }
.cnm-root .cnm-pay-pane { padding:.9rem 1.1rem 1.1rem; display:grid; gap:.8rem; }
.cnm-root .cnm-pay-pane.hidden { display:none; }
.cnm-root .cnm-pay-plans { display:grid; gap:.5rem; }
.cnm-root .cnm-pay-plan { display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem; border-radius:11px; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.25); cursor:pointer; transition:.15s; }
.cnm-root .cnm-pay-plan:hover { border-color:rgba(var(--cnm-magenta-rgb),.5); }
.cnm-root .cnm-pay-plan:has(input:checked) { border-color:var(--cnm-magenta-hot); background:rgba(var(--cnm-magenta-rgb),.14); box-shadow:inset 0 0 0 1px var(--cnm-magenta-hot); }
.cnm-root .cnm-pay-plan input { accent-color: var(--cnm-magenta-hot); }
.cnm-root .cnm-pay-n { flex:1; font-size:.84rem; color:#eef1f5; font-weight:600; }
.cnm-root .cnm-pay-n small { display:block; color:var(--text-dim); font-size:.66rem; font-weight:500; margin-top:.1rem; }
.cnm-root .cnm-pay-p { font-weight:800; color:var(--cnm-gold); font-size:.96rem; white-space:nowrap; }
.cnm-root .cnm-pay-summary { display:flex; align-items:center; justify-content:space-between; border-top:1px dashed rgba(255,255,255,.14); padding-top:.75rem; font-size:.76rem; color:var(--text-dim); }
.cnm-root .cnm-pay-summary b { color:#fff; font-size:1rem; }
.cnm-root .cnm-pay-slot { min-height:48px; border-radius:11px; padding:.6rem; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); }
.cnm-root .cnm-pay-loading { color:var(--text-dim); font-size:.72rem; text-align:center; padding:.8rem; }
.cnm-root .cnm-pay-note { color:var(--text-dim); font-size:.72rem; text-align:center; padding:.8rem; border:1px dashed rgba(var(--cnm-magenta-rgb),.5); border-radius:10px; line-height:1.5; }
.cnm-root .cnm-pay-note b { color:var(--cnm-gold); }
.cnm-root .cnm-pay-ok { color:var(--status-green); font-weight:700; text-align:center; padding:.7rem; }
.cnm-root .cnm-pay-trust { display:flex; align-items:center; justify-content:center; gap:.45rem; flex-wrap:wrap; padding:.8rem 1.1rem 1rem; border-top:1px solid rgba(255,255,255,.08); color:var(--text-dim); font-size:.64rem; }
.cnm-root .cnm-pay-chip { border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:.22rem .55rem; font-weight:700; color:#c7d3de; font-size:.6rem; letter-spacing:.05em; }