/* ============================================================
   Mix variation — editorial ink/paper system (style.css)
   recoloured with the academy-clone purple/khaki palette,
   plus its uppercase gradient hero, portrait stats and glow CTA.
   ============================================================ */

:root{
  --signal:   #a157ff;   /* academy purple replaces burnt orange */
  --signal-2: #ffe76f;   /* academy khaki replaces amber */
  --signal-deep: #7d2ae8;
  --signal-soft: rgba(161,87,255,.14);
  --ink-signal: #6a1fd1; /* purple dark enough for text on paper */
}

/* style.css hardcodes orange rgba()s — repoint the visible ones */
.btn-primary{ color:#fff; box-shadow: 0 12px 24px -14px rgba(0,0,0,.7); }
.btn-primary:hover{ box-shadow: 0 16px 30px -14px rgba(0,0,0,.8); }
.cursor-ring{ border-color: rgba(161,87,255,.55); }
.cursor-ring.is-active{ background: rgba(161,87,255,.08); }
.tag{ border-color: rgba(161,87,255,.35); }
.on-paper .tag, .on-paper .faq-no, .ticket-no, .ticket-stub b, .pass-copy .tag{ color: var(--ink-signal); }
.eyebrow{ border-color: rgba(255,231,111,.3); background: rgba(255,231,111,.08); }
.eyebrow .dot-live{ animation-name: mxPulse; }
@keyframes mxPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,231,111,.6);} 70%{ box-shadow:0 0 0 9px rgba(255,231,111,0);} 100%{ box-shadow:0 0 0 0 rgba(255,231,111,0);} }
.on-paper em{ color: var(--ink-signal); }
.amber-underline{ background: linear-gradient(transparent 66%, rgba(255,231,111,.35) 0); }
.outcome-card:hover{ border-color: rgba(161,87,255,.5); }
.stamp{ border-color: rgba(255,231,111,.55); }
.apply-section{ background-image: radial-gradient(560px 360px at 12% 10%, rgba(161,87,255,.18), transparent 60%); }
.pin-tape{ background: rgba(255,231,111,.4); }

/* ============ HERO ============ */
.mx-hero{
  background:
    radial-gradient(680px 420px at 82% -6%, rgba(161,87,255,.2), transparent 65%),
    radial-gradient(520px 420px at -6% 90%, rgba(22,120,106,.18), transparent 60%),
    var(--ink);
  padding-bottom: 60px;
}
.mx-kicker{ font-family: var(--ff-mono); font-size:1rem; text-transform:uppercase; letter-spacing:.08em; color: var(--signal-2); margin-bottom:.6em; }
.mx-title{
  font-family: 'Inter Tight', sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.01em;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height:.98; margin-bottom:.35em; color: var(--text-hi);
}
.mx-title span{ display:inline-block; padding-bottom:.08em; }

.mx-portrait{ position:relative; width:100%; max-width:500px; }
.mx-portrait img{
  position:relative; z-index:1; width:100%; height:auto; aspect-ratio:4/5;
  object-fit:cover; object-position:50% 14%; border-radius:24px;
  /* a framed photo, not a cut-out: fade its lower edge into the page */
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}
/* dark scrim down the right edge so the stats read over the light jacket */
.mx-portrait::after{
  content:''; position:absolute; inset:0; z-index:1; border-radius:24px; pointer-events:none;
  background: linear-gradient(to left, rgba(12,12,10,.82) 0%, rgba(12,12,10,.35) 34%, transparent 55%);
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}
.mx-blob{ position:absolute; width:16rem; height:16rem; left:25%; top:30%; border-radius:50%; background: var(--signal); opacity:.7; filter: blur(120px); }
.mx-pstats{ position:absolute; z-index:2; top:0; bottom:0; right:18px; display:flex; flex-direction:column; justify-content:space-around; align-items:flex-end; text-align:right; }
.mx-pstats div{ display:flex; flex-direction:column; text-shadow: 0 2px 4px rgba(2,1,7,.85), 0 0 18px rgba(2,1,7,.75); }
.mx-pstats b{ font-family:'Inter Tight', sans-serif; font-weight:600; font-size: clamp(2rem, 3.6vw, 3rem); line-height:1.1; color: var(--signal-2); }
.mx-pstats span{ font-family: var(--ff-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color: var(--text-hi); }

/* ============ GLOW CTA (academy s01-btn, simplified) ============ */
.glow-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width: 300px; height:62px; padding:0 28px; border-radius:12px; overflow:hidden; isolation:isolate;
  box-shadow: 0 8px 18px -6px rgba(2,1,7,.9);
}
.glow-btn::after{ /* the dark face, inset so the moving colour glows around its edge */
  content:''; position:absolute; inset:2px; z-index:2; border-radius:10px;
  background: var(--ink); border:1px dotted var(--signal-deep); transition: background .5s ease;
}
.glow-btn:hover::after{ background: rgba(125,42,232,.28); }
.glow-c{ position:absolute; z-index:1; width:128px; height:63px; top:-30%; left:-5%; border-radius:50%; filter: blur(16px);
  background-image: linear-gradient(112deg, rgba(255,15,51,.84), rgba(255,102,0,.86)); animation: glowDrift 3.2s ease-in-out infinite alternate; }
.glow-c2{ left:29%; background-image: linear-gradient(251deg, rgba(0,119,255,.8), rgba(173,21,255,.88)); animation-duration:4.1s; animation-direction: alternate-reverse; }
.glow-c3{ left:8%; background-image: linear-gradient(251deg, rgba(115,0,255,.84), rgba(232,21,255,.85)); animation-duration:5s; }
@keyframes glowDrift{ to{ transform: translateX(170%); } }
.glow-label{ position:relative; z-index:3; color:#fffdfa; font-family:'Inter Tight', sans-serif; font-weight:500; font-size:1.05rem; text-transform:uppercase; letter-spacing:3px; }
.glow-btn-block{ width:100%; min-width:0; padding:0 12px; }
.glow-btn-block .glow-label{ font-size:.95rem; letter-spacing:1.5px; white-space:nowrap; }
.check-list b{ color: var(--signal-2); font-weight:600; }

/* ============ SKILLS — 5 ledger cards (2 wide + 3) ============ */
.mx-skills .outcome-card, .mx-skills .outcome-card:nth-child(4){ grid-column: span 2; }
.mx-skills .outcome-card:nth-child(-n+2){ grid-column: span 3; }

/* ============ GUEST EXPERTS ============ */
.mx-guest{ padding-top:18px; }
.mx-guest img{ width:100%; aspect-ratio: 1/1; object-fit:cover; border-radius:8px; margin-bottom:16px; filter: sepia(.08) contrast(1.03); }

/* ============ INCLUDED — RECEIPT ============ */
.mx-included-img{ margin-top: 28px; }
.mx-receipt{
  background: var(--paper); color: var(--ink-hi); padding: 30px 30px 26px; border-radius:4px;
  font-family: var(--ff-mono); box-shadow: var(--shadow-lg); transform: rotate(1.2deg);
  /* zig-zag torn bottom edge */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
  padding-bottom: 36px;
}
.mx-receipt-head, .mx-receipt-total{ display:flex; justify-content:space-between; gap:12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.mx-receipt-head{ padding-bottom:16px; border-bottom:1.5px dashed var(--line-on-paper); color: var(--ink-dim); }
.mx-receipt ol{ list-style:none; margin:0; padding:12px 0; counter-reset: r; }
.mx-receipt li{ counter-increment: r; display:flex; align-items:baseline; gap:10px; padding:10px 0; font-size:.88rem; }
.mx-receipt li::before{ content: counter(r, decimal-leading-zero); color: var(--ink-signal); font-weight:700; }
.mx-receipt li span{ flex:1; display:flex; align-items:baseline; gap:8px; }
.mx-receipt li span::after{ content:''; flex:1; border-bottom:1px dotted var(--ink-faint); }
.mx-receipt li i{ font-style:normal; color: var(--ink-dim); }
.mx-receipt-total{ padding-top:16px; border-top:1.5px dashed var(--line-on-paper); align-items:baseline; }
.mx-receipt-total b{ font-family: var(--ff-display); font-size:1.15rem; text-transform:none; letter-spacing:0; color: var(--ink-signal); }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .hero-visual{ order:0; }
  .mx-portrait{ margin: 0 auto; }
  .mx-skills .outcome-card, .mx-skills .outcome-card:nth-child(-n+2), .mx-skills .outcome-card:nth-child(4){ grid-column: span 1; }
  .mx-receipt{ transform:none; }
}
@media (max-width: 640px){
  .glow-btn{ min-width:0; width:100%; }
  .mx-pstats span{ font-size:.7rem; }
}
@media (prefers-reduced-motion: reduce){
  .glow-c, .marquee-track, .polaroid, .dot-live{ animation:none; }
}

/* ============ PRICE: struck-through original beside the current price ============ */
.pass-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; }
.pass-was{ font-size:.5em; font-weight:500; color: var(--text-faint); text-decoration-thickness:2px; text-decoration-color: rgba(246,242,232,.55); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ============================================================
   POLISH PASS
   ============================================================ */

/* Primary buttons: deep brand purple so white labels clear 4.5:1 (was 3.95:1) */
.btn-primary{ background: var(--signal-deep); }
.btn-primary:hover{ background: #6a1fd1; }
.btn:active, .glow-btn:active{ transform: scale(.97); }

/* Purple text on the white curriculum cards needs the darker brand purple */
.week-card:not(.tl-claude) .tl-week,
.week-card:not(.tl-claude) .tl-outcome strong{ color: var(--ink-signal); }
.pass-was{ color: var(--text-dim); }

/* Browser surfaces carry the palette too */
::selection{ background: var(--signal-deep); color:#fff; }
:focus-visible{ outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
.on-paper :focus-visible{ outline-color: var(--ink-signal); }
html{ scrollbar-color: #2a2833 var(--ink); scroll-padding-top: 88px; }

.skip-link{
  position:fixed; left:16px; top:-64px; z-index:1001; padding:10px 16px; border-radius:10px;
  background: var(--text-hi); color: var(--ink); font-weight:600; transition: top .2s ease;
}
.skip-link:focus{ top:16px; }

/* Tickets lost their numbered label; keep the name clear of the photo */
.mx-guest h3{ font-family: var(--ff-display); font-size:1.2rem; margin: 4px 0 8px; }

/* Section heads without the label pill need less top clearance */
.section-head h2, .two-col h2, .buildlog-head h2{ margin-top:0; }

/* Mobile menu: a real panel instead of injected inline styles */
@media (max-width: 980px){
  .nav-links.open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0; z-index:600;
    background: var(--ink); border-bottom:1px solid var(--line-on-ink); padding: 6px 24px 18px;
  }
  .nav-links.open a{ padding:14px 0; font-size:.9rem; border-bottom:1px solid var(--line-on-ink); color: var(--text-hi); }
  .nav-toggle{ min-width:44px; min-height:44px; align-items:center; justify-content:center; }
  .nav-toggle span{ transition: transform .25s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* The sticky bar must not cover the footer's last lines on phones */
@media (max-width: 640px){ .footer{ padding-bottom: 150px; } }

/* Respect reduced motion: no perpetual drift, float, pulse, marquee or fade-ins */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .glow-c, .marquee-track, .dot-live, .eyebrow .dot-live{ animation:none; }
  .sticky-cta{ transition:none; }
}

/* ============================================================
   VIDEO TESTIMONIALS
   One player centred in a framed rail, arrows either side.
   ============================================================ */
.vt{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: clamp(8px, 3vw, 40px);
  padding: clamp(16px, 3vw, 34px);
  border:1px solid var(--line-on-ink); border-radius: 28px;
  background: var(--ink-soft);
}
.vt-stage{ position:relative; width: min(340px, 58vw); margin-inline:auto; }
.vt-stage.is-wide{ width: min(660px, 76vw); }
.vt-frame{
  position:relative; aspect-ratio: 9/16; border-radius:18px; overflow:hidden;
  background:#000; border:1px solid var(--line-on-ink);
}
.is-wide .vt-frame{ aspect-ratio:16/9; }
.vt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* Poster shown until the player loads, so nothing streams before you arrive */
.vt-poster{
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer;
  background:#000; display:block;
}
.vt-poster img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.vt-poster::after{
  content:''; position:absolute; left:50%; top:50%; width:64px; height:64px; transform:translate(-50%,-50%);
  border-radius:50%; background: rgba(12,12,10,.62); border:1px solid rgba(246,242,232,.5);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f6f2e8'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:56% center; background-size:26px;
}
.vt-poster:hover::after{ background-color: rgba(12,12,10,.8); }

.vt-arrow{
  justify-self:center; width:clamp(44px,7vw,72px); height:44px; padding:0;
  background:none; border:0; color: var(--text-dim); cursor:pointer;
  transition: color .2s ease, transform .2s ease;
}
.vt-arrow:hover{ color: var(--text-hi); }
.vt-prev:hover{ transform: translateX(-3px); }
.vt-next:hover{ transform: translateX(3px); }
.vt-arrow svg{ width:100%; height:24px; }

.vt-caption{
  display:flex; align-items:baseline; justify-content:center; gap:12px;
  margin: 20px 0 0; color: var(--text-dim); font-size:.95rem;
}
.vt-caption b{ color: var(--text-hi); font-family: var(--ff-display); font-size:1.05rem; font-weight:600; }

@media (max-width: 640px){
  .vt{ grid-template-columns: 1fr 1fr; gap:10px; padding:14px 14px 4px; border-radius:22px; }
  .vt-stage{ grid-column:1 / -1; grid-row:1; width: min(280px, 72vw); }
  .vt-stage.is-wide{ width: 100%; }
  .vt-prev{ grid-column:1; grid-row:2; justify-self:start; }
  .vt-next{ grid-column:2; grid-row:2; justify-self:end; }
  .vt-arrow{ height:48px; }
}