/* ============================================================
   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
   Same filmstrip language as the curriculum: header arrows, a progress
   rail and a scroll-snap track, so the two sections read as siblings.
   ============================================================ */
.vt-track{
  display:flex; align-items:center; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:20px; scrollbar-width:none;
}
.vt-track::-webkit-scrollbar{ display:none; }

.vt-card{
  flex:0 0 auto; scroll-snap-align:start; position:relative;
  width: min(272px, 64vw); aspect-ratio:9/16;
  padding:0; border:1px solid var(--line-on-ink); border-radius:16px;
  background:#000; overflow:hidden; cursor:pointer; color:inherit;
  transition: border-color .25s ease, transform .25s ease;
}
.vt-card--wide{ width: min(480px, 84vw); aspect-ratio:16/9; }
.vt-card:hover{ border-color: rgba(161,87,255,.5); transform: translateY(-3px); }
.vt-card.is-playing{ border-color: var(--signal); cursor:default; transform:none; }

.vt-card img{ width:100%; height:100%; object-fit:cover; opacity:.78; transition: opacity .25s ease; }
.vt-card:hover img{ opacity:1; }
.vt-card iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* play affordance */
.vt-card::after{
  content:''; position:absolute; left:50%; top:50%; width:58px; height:58px; transform:translate(-50%,-50%);
  border-radius:50%; background: rgba(12,12,10,.55); border:1px solid rgba(246,242,232,.55);
  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:24px;
  transition: background-color .25s ease, transform .25s ease;
}
.vt-card:hover::after{ background-color: rgba(125,42,232,.85); transform:translate(-50%,-50%) scale(1.06); }
.vt-card.is-playing::after{ display:none; }

@media (max-width: 640px){
  .vt-card{ width: min(240px, 68vw); }
  .vt-card--wide{ width: min(320px, 86vw); }
}

/* Start date, next to the price where the decision happens */
.pass-start{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  margin: 2px 0 22px; padding:7px 14px 7px 12px; border-radius:999px;
  background: rgba(255,231,111,.1); border:1px solid rgba(255,231,111,.32);
  color: var(--signal-2); font-size:.82rem; font-weight:600; letter-spacing:.01em;
}
.pass-start .dot-live{ width:7px; height:7px; border-radius:50%; background: var(--signal-2); flex:none; }