/* ============================================================
   Amazon Masters — Lead Key theme layer (beleadkey.com design language)
   Loads LAST, after style.css (+ short.css on "/"). It re-tokens the base
   stylesheet and restyles components; page structure stays as it is.
   White paper, orange (#FF6A00) for action + the one accent word, and the
   brand's own purple (sampled from the post thumbnails, #291B6A family) as the
   second colour: purple-tinted headings, eyebrows, tiles and deep "night"
   panels with an orange glow. Inter + Inter Tight, gradient hairline cards.
   ============================================================ */

:root {
  --paper:  #FFFFFF;
  --haze:   #F7F7F8;
  --haze-2: #F1F1F4;
  --line:   #E6E7EC;
  --ink:    #0B0C10;
  --ink-2:  #2B2F39;
  --ink-60: #676C7A;
  --ink-40: #9A9EAB;

  --orange:   #FF6A00;
  --orange-d: #E35C00;
  --orange-s: #FF8A3D;
  --orange-t: #FFF1E6;
  --amber:    #FF8A3D;   /* the old amber/violet accents collapse into the one orange + ink */
  --amber-t:  #FFF1E6;
  --violet:   #4B37C8;
  --violet-t: #EEEBFF;
  --p-900: #150D3D;
  --p-800: #291B6A;
  --p-700: #3A2A96;
  --p-600: #4B37C8;
  --p-500: #6A5AE0;
  --p-100: #EEEBFF;
  --p-50:  #F7F5FF;
  --tile-p: linear-gradient(180deg, #7B6BF0, #5B47D6 55%, #4330B8);
  --head-grad: linear-gradient(180deg, #120E2E 0%, #4A4189 100%);
  --night: radial-gradient(900px 420px at 85% 0%, rgba(255, 106, 0, .30), transparent 62%),
           radial-gradient(700px 420px at 0% 100%, rgba(106, 90, 224, .45), transparent 65%),
           linear-gradient(180deg, #291B6A 0%, #150D3D 100%);
  --green:    #16A34A;

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 22px;

  --shadow-s: 0 1px 2px rgba(11, 12, 16, .05), 0 4px 14px rgba(11, 12, 16, .05);
  --shadow-m: 0 2px 4px rgba(11, 12, 16, .04), 0 18px 44px rgba(11, 12, 16, .10);
  --shadow-l: 0 10px 30px rgba(11, 12, 16, .12), 0 40px 90px rgba(11, 12, 16, .16);
  --shadow-o: 0 10px 28px rgba(255, 106, 0, .32);

  --hair:   linear-gradient(180deg, #ECECF0 0%, #DCDEE5 100%);
  --hair-o: linear-gradient(180deg, rgba(255, 106, 0, .45) 0%, #E6E7EC 100%);
  --tile-o: linear-gradient(180deg, #FF8A3D, #FF6A00 55%, #E35C00);

  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Inter', system-ui, sans-serif;
}

body { font-size: 16.5px; color: var(--ink); text-rendering: optimizeLegibility; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

/* ---------- type ---------- */
h1, h2, h3, h4 { text-transform: none; letter-spacing: -.035em; text-wrap: balance; }
.h1 { line-height: 1.02; letter-spacing: -.045em; }
.h2 { line-height: 1.04; letter-spacing: -.04em; }
/* ink → graphite gradient on the big headings (the uproas / Lead Key finish) */
.h1, .h2 {
  background-image: var(--head-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.h1 .tint, .h2 .tint { color: var(--orange); -webkit-text-fill-color: var(--orange); }
.lede { color: var(--ink-60); }

/* eyebrow: orange caps, no glyph */
.eyebrow {
  gap: 0; font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  letter-spacing: .18em; color: var(--p-600);
}
.eyebrow::before { display: none; }

/* ---------- buttons ---------- */
.btn { font-family: var(--font-body); font-weight: 600; letter-spacing: -.005em; }
.btn--primary { background: var(--orange); box-shadow: var(--shadow-o); }
.btn--primary:hover { background: var(--orange-d); box-shadow: 0 14px 34px rgba(255, 106, 0, .4); }
.btn--ghost {
  border: 1px solid transparent; color: var(--ink);
  background: linear-gradient(#fff, #fff) padding-box, var(--hair) border-box;
  box-shadow: inset 0 1px 0 #fff, var(--shadow-s);
}
.btn--ghost:hover { background: linear-gradient(#fff, #fff) padding-box, var(--hair-o) border-box; }
.btn--ink { background: var(--ink); box-shadow: 0 10px 24px rgba(11, 12, 16, .18); }
.btn--ink:hover { background: #24262D; }

/* ---------- announcement: light, warm strip ---------- */
.topbar { background: radial-gradient(500px 60px at 50% 0%, rgba(255, 106, 0, .28), transparent 70%), linear-gradient(90deg, #1E1352, #33228A 50%, #1E1352); color: #fff; border-bottom: 0; }
.topbar__tag {
  font-family: var(--font-body); font-weight: 800; font-size: 10.5px; letter-spacing: .1em;
  border-radius: 999px; padding: 4px 10px; color: #fff;
  background: linear-gradient(135deg, #FE7115 0%, #F15006 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 12px rgba(241, 80, 6, .28);
}
.topbar__txt { color: rgba(255, 255, 255, .88); font-weight: 500; }
.topbar__cta { color: #FFB27A; border-bottom-color: rgba(255, 178, 122, .4); }
.topbar__x { color: rgba(255, 255, 255, .5); }
.topbar__x:hover { color: #fff; }

/* ---------- nav: floating glass pill ---------- */
.nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; padding-top: 12px; }
.nav.is-stuck { border-bottom: 0; }
.nav__in {
  max-width: calc(var(--shell) - 8px); padding: 9px 9px 9px 24px; border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .66)) padding-box,
              linear-gradient(180deg, rgba(236, 236, 240, .95), rgba(220, 222, 229, .95)) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 30px rgba(11, 12, 16, .06);
  transition: box-shadow .25s;
}
.nav.is-stuck .nav__in { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 40px rgba(11, 12, 16, .1); }
.nav__links a { font-weight: 500; font-size: 15px; color: var(--ink-2); }
.nav__links a:hover { color: var(--orange); }

/* ---------- hero: faint grid + orange glow ---------- */
.hero { padding-top: clamp(40px, 5vw, 72px); background: radial-gradient(900px 520px at 72% 8%, rgba(255, 106, 0, .13), transparent 70%), radial-gradient(700px 480px at 8% 92%, rgba(106, 90, 224, .12), transparent 70%); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(900px 520px at 50% 0%, #000, transparent 80%);
  mask-image: radial-gradient(900px 520px at 50% 0%, #000, transparent 80%);
  opacity: .7;
}
/* no z-index here: a stacking context would isolate the collage's multiply blend from the grid */
.hero > .shell { position: relative; }
.hero__note { font-family: var(--font-body); font-size: 13.5px; color: var(--ink-60); }
.hero__copy { position: relative; z-index: 3; }
.hero .h1 { font-size: clamp(30px, 3.7vw, 50px); }
/* Mark on a transparent background, standing on the hero's own grid + glow. The image runs
   down behind the stats bar, which covers the flat cut at his waist. */
.hero__grid { align-items: end; }
.hero__stage { min-height: 0; display: block; align-self: end; }
.hero__free { display: block; width: min(108%, 600px); max-width: none; height: auto; margin: 0 0 -112px auto; pointer-events: none; }
.hero__ticker { position: relative; z-index: 2; }
@media (max-width: 1280px) { .hero__free { width: 100%; } }

/* stats strip */
.hero__ticker {
  gap: 0; background: none; border: 1px solid transparent; border-radius: var(--r-l);
  background: linear-gradient(#fff, #fff) padding-box, var(--hair) border-box;
  box-shadow: inset 0 1px 0 #fff, var(--shadow-m);
}
.tick { background: transparent; padding: 24px 22px; }
.tick + .tick { box-shadow: inset 1px 0 0 var(--line); }
.tick__n {
  background-image: var(--head-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.tick__l { color: var(--ink-60); }


/* ---------- cards: gradient hairline + inset highlight ---------- */
.card, .pillar, .access__cell, .vcard, .wall__item, .proof, .prog__row, .eco__cell, .course, .post,
.inside__cell, .kitcard, .opt, .faq {
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--hair) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: box-shadow .3s ease, transform .3s ease, background .2s;
}
.card:hover, .pillar:hover, .access__cell:hover, .vcard:hover, .wall__item:hover, .eco__cell:hover, .post:hover, .inside__cell:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 20px 60px rgba(255, 106, 0, .10);
}
.wall__item:hover, .eco__cell:hover { border-color: transparent; }
.card--haze { background: linear-gradient(var(--haze), var(--haze)) padding-box, var(--hair) border-box; }

/* orange icon tiles (Lead Key step-card glyphs) */
.card__k, .card__k--violet, .card__k--amber {
  width: 44px; height: 44px; border-radius: 12px; color: #fff; background: var(--tile-o);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px rgba(255, 106, 0, .35);
}

/* chips → small premium tags */
.chip { font-family: var(--font-body); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; border-radius: 999px; padding: 5px 10px; background: var(--haze-2); color: var(--ink-2); }
.chip--orange, .chip--violet, .chip--amber {
  color: #fff; background: linear-gradient(135deg, #FE7115 0%, #F15006 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 12px rgba(241, 80, 6, .22);
}

/* ---------- "/" programme pillars: generated image on top, text below ---------- */
.pillars { gap: 20px; margin-top: 44px; }
.pillar { padding: 0 0 30px; text-align: left; overflow: hidden; }
.pillar__ico { display: none; }
.pillar__img { aspect-ratio: 3 / 2; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; margin-bottom: 24px; }
.pillar__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pillar:hover .pillar__img img { transform: scale(1.035); }
.pillar h3, .pillar p { padding-inline: 26px; }
.pillar__step {
  display: inline-block; margin: 0 26px 12px; padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--p-600);
  border: 1px solid transparent; background: linear-gradient(var(--p-50), var(--p-50)) padding-box, linear-gradient(180deg, rgba(106, 90, 224, .5), #E3DEFA) border-box;
}
@media (max-width: 860px) { .pillars { gap: 20px; } }

/* ---------- reviews / community ---------- */
.vcard__play { background: linear-gradient(180deg, rgba(11, 12, 16, .02), rgba(11, 12, 16, .3)); }
.vcard__play:hover { background: linear-gradient(180deg, rgba(11, 12, 16, .06), rgba(11, 12, 16, .42)); }
.vcard__play i { background: var(--orange); box-shadow: 0 0 0 8px rgba(255, 255, 255, .28), var(--shadow-o); }
.vcard__play i::after { border-left-color: #fff; }
.vcard__dur { background: rgba(11, 12, 16, .72); }
.vcard__dur { font-family: var(--font-body); font-weight: 600; }
.wall__meta::after { font-family: var(--font-body); font-weight: 700; color: var(--orange); }
.wall__meta b { font-family: var(--font-display); }

/* ---------- case studies ---------- */
.proof__tag { font-family: var(--font-body); font-weight: 700; letter-spacing: .14em; color: var(--ink-40); }
.proof__tag b { color: var(--orange-d); }
.kpi__n { background-image: var(--head-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.kpi__n.up { background: none; color: var(--green); -webkit-text-fill-color: var(--green); }
.kpi__l { font-family: var(--font-body); font-weight: 600; letter-spacing: .12em; color: var(--ink-40); }
.shot { border-color: var(--line); box-shadow: var(--shadow-m); }

/* /full "by the numbers": graphite like every other figure (one accent per screen) */
.stat__n, .stat__n.o {
  background-image: var(--head-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- curriculum + included box ---------- */
.prog__row { padding: 12px 16px; }
.prog__n { font-family: var(--font-body); font-weight: 700; letter-spacing: .12em; color: var(--ink-40); }
.prog__n b { color: var(--orange); }
.buybox {
  border: 1px solid transparent; border-radius: var(--r-l);
  background: linear-gradient(180deg, #FFF8F2, #FFF3EA) padding-box, linear-gradient(180deg, rgba(255, 106, 0, .45), #F0D9C9) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 18px 44px rgba(255, 106, 0, .08);
}
.buybox li i, .bonus li i { background: var(--tile-o); box-shadow: 0 3px 8px rgba(255, 106, 0, .3); }
.worth { font-family: var(--font-body); font-weight: 700; }

/* ---------- ecosystem ---------- */
.access__big, .inside__big {
  background-image: var(--head-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.access__shot, .inside__shot { border-color: var(--line); box-shadow: var(--shadow-l); }
.eco__n { font-family: var(--font-body); font-weight: 700; }

/* ---------- FAQ: heading left, accordion card right ---------- */
#faq .shell { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
#faq .band-head { margin-bottom: 0; position: sticky; top: 110px; }
.faq { max-width: none; border-radius: var(--r-l); overflow: hidden; box-shadow: inset 0 1px 0 #fff, var(--shadow-m); }
.faq__item { border-top: 1px solid var(--line); padding-inline: 24px; }
.faq__item:first-child { border-top: 0; }
.faq__item:last-child { border-bottom: 0; }
.faq__q { font-family: var(--font-body); font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; padding-block: 22px; }
.faq__q i::before, .faq__q i::after { background: var(--ink-60); }
.faq__q[aria-expanded="true"] { color: var(--ink); }
.faq__q[aria-expanded="true"] i::before, .faq__q[aria-expanded="true"] i::after { background: var(--orange); }
.faq__a p { font-size: 15.5px; }
@media (max-width: 860px) {
  #faq .shell { grid-template-columns: 1fr; }
  #faq .band-head { position: static; }
}

/* ---------- closing CTA: white card on the grid (Lead Key closer) ---------- */
.closer-wrap { position: relative; padding-block: clamp(30px, 4vw, 56px) clamp(64px, 8vw, 110px); }
.closer-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(700px 360px at 50% 40%, #000, transparent 75%);
  mask-image: radial-gradient(700px 360px at 50% 40%, #000, transparent 75%);
}
.closer {
  max-width: 900px; margin-inline: auto; color: var(--ink);
  border: 1px solid transparent;
  background: radial-gradient(600px 260px at 50% 0%, rgba(255, 106, 0, .08), transparent 70%) padding-box,
              linear-gradient(#fff, #fff) padding-box, var(--hair) border-box;
  box-shadow: inset 0 1px 0 #fff, var(--shadow-l);
}
.closer h2 { color: transparent; }
.closer p { color: var(--ink-60); }
.closer__bars { display: none; }
.closer__who { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13.5px; color: var(--ink-60); }
.closer__who img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 18%;
  background: linear-gradient(180deg, #FFE3CC, #FFF1E6); border: 3px solid #fff; box-shadow: 0 8px 22px rgba(255, 106, 0, .22);
}
.closer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.closer__actions .btn { margin-top: 0; }

/* ---------- footer: light ---------- */
.foot { background: var(--haze); color: var(--ink-60); border-top: 1px solid var(--line); }
.foot h4 { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .16em; color: var(--ink); }
.foot a { color: var(--ink-60); }
.foot a:hover { color: var(--orange); }
.foot__bar { border-top-color: var(--line); color: var(--ink-40); }

/* ---------- /full extras ---------- */
.tabs { background: var(--haze-2); }
.tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 1px 0 #fff, var(--shadow-s); }
.course__art--orange, .course__art--violet, .course__art--amber {
  background: radial-gradient(420px 260px at 80% 0%, rgba(255, 106, 0, .55), transparent 65%),
              radial-gradient(300px 220px at 0% 100%, rgba(255, 106, 0, .25), transparent 65%),
              linear-gradient(180deg, #1A1208 0%, #0F1014 60%);
}
.course__art span { font-family: var(--font-body); font-weight: 700; border-radius: 999px; }
.price s, .price small { color: var(--ink-40); }
/* dark flagship panel = Lead Key "sunset" */
.flag {
  background: radial-gradient(900px 420px at 80% 0%, rgba(255, 106, 0, .55), transparent 65%),
              radial-gradient(600px 400px at 10% 100%, rgba(255, 106, 0, .25), transparent 65%),
              linear-gradient(180deg, #1A1208 0%, #0F1014 60%);
}
.flag h2 {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #99A0AE 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.flag__copy .eyebrow { color: var(--orange-s); }
.flag__meta span { font-family: var(--font-body); font-weight: 600; border-radius: 999px; border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); }
.flag__badge span { font-family: var(--font-body); font-weight: 600; }
.post__body span { font-family: var(--font-body); font-weight: 700; }
.checkline i { background: var(--tile-o); }
.checkline i::after { border-color: #fff; }

/* ---------- popups ---------- */
.modal__scrim { background: rgba(11, 12, 16, .5); }
.modal__box { border-radius: var(--r-l); box-shadow: var(--shadow-l); }
.flow__step { font-family: var(--font-body); font-weight: 700; letter-spacing: .16em; color: var(--orange); }
.flow h3 { letter-spacing: -.035em; }
.flow__rail span::after { background: var(--orange); }
.field input {
  border: 1px solid transparent; border-radius: 12px;
  background: linear-gradient(#fff, #fff) padding-box, var(--hair) border-box;
}
.field input:focus { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #FE7115, #F15006) border-box; box-shadow: 0 0 0 4px rgba(255, 106, 0, .14); outline: none; }
.opt.is-on { background: linear-gradient(#FFF7F1, #FFF7F1) padding-box, linear-gradient(135deg, #FE7115, #F15006) border-box; box-shadow: 0 10px 28px rgba(255, 106, 0, .16); }
.opt__dot { border-color: var(--line); }
.opt.is-on .opt__dot { border-color: var(--orange); background: var(--orange); }
.kitcard:hover { background: linear-gradient(#fff, #fff) padding-box, var(--hair-o) border-box; }
.kitcard__ico, .kitcard__ico--amber, .kitcard__ico--violet, .kitlist i { color: #fff; background: var(--tile-o); box-shadow: 0 4px 12px rgba(255, 106, 0, .28); }
.kitlist li:nth-child(2) i, .kitlist li:nth-child(3) i { color: #fff; }
.kit { background: var(--haze); }
.orline span { font-family: var(--font-body); font-weight: 700; }
.msgbtn { border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--hair) border-box; box-shadow: var(--shadow-s); }
.done__ring { border-color: var(--orange); }

/* ---------- phones ---------- */
@media (max-width: 1080px) {
  .hero__free { width: min(100%, 560px); margin: 8px auto -96px; }
}
@media (max-width: 860px) {
  .nav { padding-top: 8px; padding-inline: 8px; }
  .nav__in { border-radius: 22px; padding: 8px 8px 8px 18px; }
  .tick + .tick { box-shadow: none; }
  .tick:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--line); }
  .tick:nth-child(2n) { box-shadow: inset 1px 0 0 var(--line); }
  .tick:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
}
@media (max-width: 620px) {
  .hero__copy { padding-bottom: 10px; }
  .hero__stage { margin-top: -28px; }
  .hero__free { width: 100%; margin: 0 0 -72px; }
}


/* ============================================================
   Purple + Mark pass
   ============================================================ */

/* ---------- platforms & tools: real logos, static grid ---------- */
.stack { padding-block: clamp(44px, 5vw, 64px); border-block: 1px solid var(--line); background: linear-gradient(180deg, #fff, var(--p-50)); }
.stack__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 26px; }
.stack__head .eyebrow { margin-bottom: 0; }
.stack__title { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.03em; color: var(--ink); }
.stack__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stack__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 118px; padding: 22px 16px 16px; border-radius: var(--r-l); text-align: center;
  border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--hair) border-box;
  box-shadow: inset 0 1px 0 #fff, var(--shadow-s);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.stack__item:hover { transform: translateY(-3px); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, rgba(106, 90, 224, .45), #E6E7EC) border-box; box-shadow: inset 0 1px 0 #fff, 0 18px 44px rgba(75, 55, 200, .12); }
.stack__logo { height: var(--h, 26px); width: auto; max-width: 78%; object-fit: contain; transition: transform .25s var(--ease); }
.stack__item:hover .stack__logo { transform: scale(1.04); }
.stack__item span { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink-40); }
@media (max-width: 860px) { .stack__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .stack__item { min-height: 100px; } }

/* ---------- Mark beside a section heading ---------- */
.headmark { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; margin-bottom: clamp(30px, 4vw, 48px); }
.headmark .band-head { margin-bottom: 0; padding-bottom: 8px; }
.headmark { align-items: center; gap: clamp(28px, 4vw, 56px); }
/* Mark images on a transparent background, sitting on the section colour; the bottom of
   each fades into that colour (no frame, no hard cut) */
.free { display: block; height: auto; pointer-events: none; }
.free--fade { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 99%); mask-image: linear-gradient(180deg, #000 78%, transparent 99%); }
.headmark { align-items: end; }
.headmark__free { width: min(540px, 42vw); margin-bottom: -18px; }
.headmark__free--sq { width: min(380px, 31vw); }
@media (max-width: 860px) {
  .headmark { grid-template-columns: 1fr; gap: 6px; }
  .headmark__free { justify-self: center; width: 100%; max-width: 540px; margin-bottom: -10px; }
  .headmark__free--sq { max-width: 400px; }
}

/* ---------- illustration cards: Mark's scenes, framed like the Lead Key banners ---------- */
.art {
  margin: 0; overflow: hidden; border-radius: var(--r-l);
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, rgba(106, 90, 224, .35), #E6E7EC) border-box;
  box-shadow: 0 2px 4px rgba(21, 13, 61, .05), 0 30px 70px rgba(21, 13, 61, .16);
}
.art img { display: block; width: 100%; height: auto; transition: transform .8s var(--ease); }
.art:hover img { transform: scale(1.025); }
.band--night .art { background: linear-gradient(#1A1147, #1A1147) padding-box, linear-gradient(180deg, rgba(255, 164, 92, .7), rgba(255, 255, 255, .15)) border-box; box-shadow: 0 34px 80px rgba(8, 4, 30, .5); }

/* ---------- deep purple "night" band (community) ---------- */
.band--night { position: relative; overflow: hidden; background: var(--night); color: #fff; }
.band--night::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(900px 500px at 30% 0%, #000, transparent 80%); mask-image: radial-gradient(900px 500px at 30% 0%, #000, transparent 80%);
}
.band--night > .shell { position: relative; }
.band--night .h2 { background-image: linear-gradient(180deg, #FFFFFF 0%, #B9B2F0 100%); }
.band--night .eyebrow { color: #FFA45C; }
.band--night .lede { color: rgba(255, 255, 255, .74); }
.band--night .wall__item { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .2)) border-box; box-shadow: 0 18px 50px rgba(8, 4, 30, .35); }
.band--night .wall__item:hover { box-shadow: 0 24px 60px rgba(8, 4, 30, .5), 0 0 0 1px rgba(255, 164, 92, .6); }
.band--night .btn--ghost { color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); box-shadow: none; }

/* ---------- purple accents on tiles + case tags ---------- */
.access__cell:nth-child(2) .card__k, .access__cell:nth-child(4) .card__k { background: var(--tile-p); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px rgba(91, 71, 214, .35); }
.proof__tag b { color: var(--p-600); }
.chip--violet { background: linear-gradient(135deg, #7B6BF0 0%, #4B37C8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 12px rgba(75, 55, 200, .25); }
.prog__n b { background-image: linear-gradient(180deg, #FF8A3D, #6A5AE0); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.access__wide { background: radial-gradient(520px 260px at 100% 100%, rgba(106, 90, 224, .10), transparent 70%) padding-box, linear-gradient(#fff, #fff) padding-box, var(--hair) border-box; }

/* ---------- "Included" box: deep purple with Mark as the mentor ---------- */
.buybox {
  color: #fff; overflow: hidden;
  background: var(--night) padding-box, linear-gradient(180deg, rgba(255, 164, 92, .65), rgba(106, 90, 224, .4)) border-box;
  box-shadow: 0 30px 70px rgba(21, 13, 61, .28);
}
/* the mentor scene is the card's header image, caption over a fade */
.buybox__mentor { position: relative; margin: -26px -26px 22px; overflow: hidden; }
.buybox__mentor img { display: block; width: 100%; height: auto; }
.buybox__mentor::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(21, 13, 61, .92)); }
.buybox__mentor figcaption { position: absolute; left: 22px; bottom: 16px; z-index: 1; font-size: 13px; color: rgba(255, 255, 255, .78); line-height: 1.35; }
.buybox__mentor b { display: block; font-family: var(--font-display); font-size: 22px; letter-spacing: -.03em; color: #fff; }
.buybox__note { color: rgba(255, 255, 255, .72); }
.buybox__note b, .buybox li b { color: #fff; }
.buybox li { color: rgba(255, 255, 255, .86); }
.buybox__fine { color: rgba(255, 255, 255, .55); }
.buybox .worth { background: rgba(22, 163, 74, .18); color: #6EE7A0; }

/* ---------- FAQ: Mark under the heading ---------- */
.faq__free { width: min(400px, 100%); margin-top: 18px; }
#faq .band-head .lede { margin-top: 14px; font-size: 16px; }
@media (max-width: 860px) { .faq__free { max-width: 380px; margin-inline: auto; } }

/* ---------- closer: deep purple card ---------- */
.closer--night {
  color: #fff;
  background: var(--night) padding-box, linear-gradient(180deg, rgba(255, 164, 92, .6), rgba(106, 90, 224, .35)) border-box;
  box-shadow: 0 40px 90px rgba(21, 13, 61, .35);
}
.closer--night .h2 { background-image: linear-gradient(180deg, #FFFFFF 0%, #B9B2F0 100%); }
.closer--night p, .closer--night .closer__who { color: rgba(255, 255, 255, .74); }
.closer--night .closer__who img { border-color: rgba(255, 255, 255, .9); box-shadow: 0 0 0 6px rgba(255, 106, 0, .18), 0 10px 26px rgba(0, 0, 0, .35); }
.closer--night .btn--ghost { color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); box-shadow: none; }
.closer--night .btn--ghost:hover { background: rgba(255, 255, 255, .16); }

/* ---------- /full: flagship + course art in the purple night ---------- */
/* ghost buttons on dark panels: glass, not white (white text on a white pill vanished) */
.flag .btn--ghost, .band--night .btn--ghost, .closer--night .btn--ghost, .buybox .btn--ghost {
  color: #fff !important; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25) !important; box-shadow: none;
}
.flag .btn--ghost:hover, .band--night .btn--ghost:hover { background: rgba(255, 255, 255, .16); }
.flag, .course__art--orange, .course__art--violet, .course__art--amber { background: var(--night); }
.flag__copy .eyebrow { color: #FFA45C; }

/* /full: transparent Mark images stand on the bottom edge of the dark course boxes and flagship panel */
.course__art img.course__free { width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: center bottom; }
.flag__art { align-self: end; }
.flag__art .flag__free { display: block; width: 124%; max-width: none; height: auto; margin-right: -12%; }
.flag__art .flag__badge { left: auto; right: 4%; bottom: 26px; }
@media (max-width: 860px) { .flag__art .flag__free { width: 108%; margin-right: -4%; } .flag__art .flag__badge { right: 10px; bottom: 16px; } }

/* ---------- closing card, split: pitch + checklist on the left, Mark's live calendar on the right ---------- */
.closer--split {
  max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 56px); align-items: center; text-align: left;
  padding: clamp(28px, 4vw, 52px);
}
.closer--split .closer__who { flex-direction: row; align-items: center; gap: 14px; margin-bottom: 22px; font-size: 13px; color: rgba(255, 255, 255, .66); }
.closer--split .closer__who img { width: 56px; height: 56px; }
.closer--split .closer__who b { display: block; font-family: var(--font-display); font-size: 17px; letter-spacing: -.02em; color: #fff; }
.closer--split .h2 { font-size: clamp(32px, 3.6vw, 48px); }
.closer--split .closer__lede { margin: 16px 0 0; max-width: 44ch; font-size: 17px; }
.closer__list { display: grid; gap: 13px; margin-top: 26px; }
.closer__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.closer__list b { color: #fff; font-weight: 600; }
.closer__list i {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; display: grid; place-items: center;
  background: var(--tile-o); box-shadow: 0 4px 12px rgba(255, 106, 0, .35);
}
.closer__list i::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.closer--split .closer__actions { justify-content: flex-start; margin-top: 30px; }
.closer__fine { margin: 14px 0 0 !important; max-width: none !important; text-align: left; font-size: 12.5px; color: rgba(255, 255, 255, .5) !important; }
.closer__side {
  border-radius: 20px; padding: 10px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 30px 70px rgba(8, 4, 30, .45);
}
.closer__calhead {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px;
  padding: 10px 12px 12px; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em;
}
.closer__calhead small { grid-column: 2; font-family: var(--font-body); font-weight: 500; font-size: 12.5px; letter-spacing: 0; color: var(--ink-60); }
.closer__live { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
.closer__cal.cal { margin: 0; border: 0; border-radius: 14px; min-height: 520px; background: var(--haze); }
.closer__cal.cal.is-live { height: 640px; background: #fff; }
.closer__cal .cal__fallback { display: grid; place-content: center; min-height: 520px; }
/* desktop: the calendar is right there, so the left button would only open a second one */
@media (min-width: 981px) { .closer--split .closer__book { display: none; } }
@media (max-width: 980px) {
  .closer--split { grid-template-columns: 1fr; }
  .closer__side { display: none; }
}
@media (max-width: 620px) {
  .closer--split .closer__fine { text-align: center; }
  .closer--split .closer__actions { flex-direction: column; align-items: stretch; }
  .closer--split .closer__actions .btn { width: 100%; }
}