/* ============================================================================
   Catalyzt brand layer. Loads last, after sections.css.

   The shipped files are left as they came. Everything specific to this page
   lives here: the cool grounds, the navy replacing the template's teal-black
   literals, the gold small marks, and the two things the template has no
   component for (the "is this for you" section and the fourth bonus graphic).
   ============================================================================ */
:root{
  --navy:#0A2A6B;
  --bright:#0457F5;                 /* the logo gradient's top end: buttons on navy */
  --gold:#C9A227;                   /* small marks only, never body text */
  /* One canvas rather than two alternating grounds: the dark blocks are inset
     panels now, and the gutter beside them has to match what sits above and
     below. Light sections separate by their centred heads and white cards. */
  --ground-a:#F4F5F7;
  --ground-b:#F4F5F7;
  --soft:0 1px 2px rgb(10 42 107 / .04), 0 14px 34px -16px rgb(10 42 107 / .22);
  --hair:rgb(10 42 107 / .07);
  /* Manrope from the approved six: the closest to the reference's tight, heavy grotesk */
  --font:"Manrope",system-ui,-apple-system,sans-serif;
  --h-track:-0.035em; --h-weight:600; --h-size:56px;
  --pr-mute:#586279; --pr-faint:#667089;
  /* brand.js writes these too. Set here as well so the first paint already has
     them, or the buttons fade in from nothing on their colour transition. */
  --cta:#0145C8; --cta-ink:#FFFFFF; --cta-hover:#0137A0;
  --ground-dark:#0A2A6B; --card-dark:#12367F; --card-dark-line:#2A4A8F;
}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ---- hero ---- */
.hero{max-width:1120px}
.sub{max-width:680px}
h1 .u{
  background:linear-gradient(var(--gold),var(--gold)) 0 100% / 100% .09em no-repeat;
  padding-bottom:.03em;
}
/* the longest line is 36 characters, so the tablet step has to follow the width
   or the three lines become four */
@media (max-width:1100px) and (min-width:761px){ h1{font-size:clamp(34px,4.6vw,46px)} }
/* the audience line is long, so on a short phone it gives back two lines of
   height and the button clears the fold */
@media (max-width:400px){
  .hero{padding-top:24px}
  .tag-split{font-size:10.5px;letter-spacing:.07em}
  .tag-split .k{padding:6px 8px}
  .tag-split .v{padding:6px 9px}
}

/* ---- navy replaces the template's literal teal-black ---- */
.section-price,
:root[data-mode="dark"] .section-price.section-invert{background:var(--ground-dark)}
.section-price h2,.section-price .stack-note strong{color:#fff}
.section-price .srow h3,.section-price .srow .amt b,.pr-total h3,
.section-price .payrow .big{color:var(--navy)}
.section-price .srow{border-top-color:rgb(10 42 107 / .10)}
.pr-dash{border-top-color:rgb(10 42 107 / .26)}
.section-price .payrow{background:#F2F5FB}
.section-price .pr-cta,
:root[data-mode="dark"] .section-price.section-invert .pr-cta{
  background:var(--cta);color:var(--cta-ink);border-color:transparent;
}
.section-price .pr-cta:hover{background:var(--cta-hover)}

.section-faq .eyebrow{color:var(--mute)}
.section-faq .fq-cta{background:var(--cta);color:var(--cta-ink)}
.section-faq .fq-cta:hover{background:var(--cta-hover)}
.fq-item{border-color:rgb(10 42 107 / .10)}
.fq-item.is-open{border-color:rgb(10 42 107 / .24)}
.fq-btn,.fq-a strong{color:var(--navy)}
.fq-btn:focus-visible{outline-color:var(--cta)}
.fq-a p{color:#465066}
.fq-ic{border-color:rgb(10 42 107 / .22)}
.fq-ic::before,.fq-ic::after{background:var(--navy)}
.fq-item.is-open .fq-ic{background:var(--navy);border-color:var(--navy)}
.fq-item.is-open .fq-ic::before{background:#fff}

/* the stub notches paint with --bg, which has to match the navy ground here */
:root[data-mode="light"] .section-invert{--bg:var(--ground-dark)}
/* the logo blue sits too close to navy, so on navy the button takes the bright end */
:root[data-mode="light"] .section-invert .section-cta{
  background:var(--bright);border-color:rgb(255 255 255 / .28);
}
:root[data-mode="light"] .section-invert .section-cta:hover{background:#2A70FF}
/* the price button sits on the white card, not on navy, so it keeps the logo blue */
:root[data-mode="light"] .section-price .pr-cta{background:var(--cta);border-color:transparent}
:root[data-mode="light"] .section-price .pr-cta:hover{background:var(--cta-hover)}

/* ---- gold, small ---- */
.done .tick{background:var(--gold)}
.done .tick svg{stroke:var(--navy)}
.pull{border-left-color:var(--gold)}
.hl{background:rgb(201 162 39 / .30)}
.chip-get{background:var(--gold);color:var(--navy)}

/* ---- profile: where the projects were, in place of a logo row ---- */
.rail-where{margin:0;font-size:14px;line-height:1.55;color:var(--mute)}

/* ---- curriculum ---- */
.section-curriculum .summary .done{margin:0 0 20px}
.tl-row.tl-break .tl-card{padding:11px 22px;background:transparent;border-style:dashed}
.tl-row.tl-break h3{margin:0;font-size:15px;color:var(--mute)}
.cta-row{margin:32px 0 0;text-align:center}
@media (max-width:760px){ .cta-row{margin-top:26px;text-align:left} }

.section-fit .section-inner{max-width:1080px;text-align:left}

/* ---- why now: no second video, so the dates take the right-hand column ---- */
.section-now h2{max-width:20ch}
.now-grid{align-items:stretch}
.now-dates .evid:last-child{margin-bottom:0}
.now-dates .evid p{margin-bottom:0}

/* ---- footer ---- */
.site-footer .legal a{font-size:inherit;text-decoration:underline;text-underline-offset:3px}

/* ======================================================================
   THE REFERENCE LAYER
   ----------------------------------------------------------------------
   From the CoreShift shot: a floating pill nav, cards drifting either side
   of a centred hero, white cards with soft shadows on one grey canvas,
   centred section heads under a small icon tile, and dark blocks as rounded
   panels inset from the page edge. The brand colours stay.
   ====================================================================== */

/* ---- the nav floats as a pill ---- */
.nav,
.nav.stuck{
  top:12px;margin:12px auto 0;width:calc(100% - 32px);max-width:680px;
  padding:8px 8px 8px 20px;border:1px solid var(--hair);border-radius:16px;
  background:rgb(255 255 255 / .9);backdrop-filter:blur(14px);box-shadow:var(--soft);
}
:root[data-mode="dark"] .nav,
:root[data-mode="dark"] .nav.stuck{background:rgb(var(--surface-rgb) / .9);border-color:var(--line)}
.brand{font-weight:700;letter-spacing:-.03em}
.nav-cta{border-radius:10px;padding:10px 16px}
.cta,.section-cta{border-radius:12px}
@media (max-width:760px){
  .nav,.nav.stuck{width:calc(100% - 20px);margin-top:10px;top:10px;padding:6px 6px 6px 14px;border-radius:14px}
}

/* ---- hero: cards drifting either side ----
   The template's card-mosaic background, filled with the six modelling steps
   from Part 3 rather than faces: there are no real attendee photos yet. Each
   card floats on its own period (19-28s cycles) with a negative start, so the
   six never line up. Wide screens only; below that the headline needs the room
   and the spotlight grid carries the motion instead. */
.hero-wrap{position:relative;overflow:hidden}
.hero-cards{display:none}
@media (min-width:1360px){
  .hero-cards{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
}
.hc{
  position:absolute;left:calc(50% + var(--x));top:var(--y);width:150px;
  padding:14px 14px 13px;border-radius:18px;background:#fff;
  border:1px solid var(--hair);box-shadow:0 20px 44px -20px rgb(10 42 107 / .32);
  transform:rotate(var(--r));
  animation:hc-float var(--d) ease-in-out var(--del) infinite alternate;
}
:root[data-mode="dark"] .hc{background:var(--raised);border-color:var(--line)}
.hc-in .ic{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;margin:0 0 12px;
  background:rgb(1 69 200 / .08);
}
.hc-in .ic svg{width:18px;height:18px;fill:none;stroke:var(--cta);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hc-in b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.hc-in span{display:block;margin-top:2px;font-size:11.5px;color:var(--mute)}
@keyframes hc-float{
  from{transform:translateY(0) rotate(var(--r))}
  to{transform:translateY(-14px) rotate(calc(var(--r) * -0.4))}
}

/* ---- section heads: a tile, then a centred heading ---- */
.sec-head{text-align:center;max-width:760px;margin:0 auto 40px}
.sec-ic{
  display:inline-grid;place-items:center;width:48px;height:48px;margin:0 0 18px;
  border-radius:14px;background:#fff;border:1px solid var(--hair);box-shadow:var(--soft);
}
.sec-ic svg{width:22px;height:22px;fill:none;stroke:var(--cta);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sec-head h2,
.section-bonuses .sec-head h2,
.section-curriculum .sec-head h2,
.section-now .sec-head h2{max-width:22ch;margin:0 auto 14px}
.sec-head .lede,
.section-curriculum .sec-head .lede{margin:0 auto;max-width:58ch}
.sec-head + .tl-pills{justify-content:center}
.section-curriculum .tl-pills{justify-content:center}
@media (max-width:760px){
  .sec-head{text-align:left;margin-bottom:28px}
  .sec-head h2,.section-bonuses .sec-head h2,.section-curriculum .sec-head h2,
  .section-now .sec-head h2{margin-left:0;max-width:none}
  .sec-head .lede,.section-curriculum .sec-head .lede{margin-left:0}
  .section-curriculum .tl-pills{justify-content:flex-start}
}

/* ---- white cards, soft shadow, hairline ---- */
.tl-card,.fit-card,.rail,.summary,.evid,.cur-dl,.chip,.tl-pills li{
  background:#fff;border-color:var(--hair);box-shadow:var(--soft);
}
:root[data-mode="dark"] .tl-card,:root[data-mode="dark"] .fit-card,:root[data-mode="dark"] .rail,
:root[data-mode="dark"] .summary,:root[data-mode="dark"] .evid,:root[data-mode="dark"] .cur-dl,
:root[data-mode="dark"] .chip,:root[data-mode="dark"] .tl-pills li{background:var(--raised);border-color:var(--line)}
.tl-card{border-radius:18px}
.rail,.summary,.fit-card{border-radius:22px}
.evid{border-radius:18px}
.cur-dl{border-radius:16px}
.chip{border-radius:10px}
.tl-row.tl-break .tl-card{background:transparent;box-shadow:none}
.fq-item{box-shadow:var(--soft)}
.fq-item.is-open{box-shadow:0 2px 4px rgb(10 42 107 / .05), 0 22px 44px -18px rgb(10 42 107 / .3)}

/* ---- dark blocks as inset rounded panels ---- */
:root[data-mode="light"] .section-invert{margin:0 16px;border-radius:32px}
:root[data-mode="light"] .site-footer.section-invert{margin:0 16px 16px}
@media (max-width:760px){
  :root[data-mode="light"] .section-invert{margin:0 8px;border-radius:24px}
  :root[data-mode="light"] .site-footer.section-invert{margin:0 8px 8px}
}

/* ---- the audience mark, in the same card language ---- */
.tag-split{border-radius:9px;box-shadow:var(--soft)}

@media (prefers-reduced-motion:reduce){ .hc-in{animation:none} }

/* ======================================================================
   MOTION LAYER (motion.js drives it; this is the static half)
   ====================================================================== */
/* the float lives on an inner card, so GSAP owns the outer one's transform */
.hc{width:150px;padding:0;border:0;background:none;box-shadow:none;border-radius:0;
    transform:none;animation:none;will-change:transform}
.hc-in{
  padding:14px 14px 13px;border-radius:18px;background:#fff;
  border:1px solid var(--hair);box-shadow:0 20px 44px -20px rgb(10 42 107 / .32);
  transform:rotate(var(--r));
  animation:hc-float var(--d) ease-in-out var(--del) infinite alternate;
}
:root[data-mode="dark"] .hc-in{background:var(--raised);border-color:var(--line)}
:root[data-mode="dark"] .hc{background:none}

/* below 1360 the cards run as a rail under the hero instead of beside it */
.hc-rail{position:relative;z-index:3;overflow:hidden;margin:-54px 0 0;padding:14px 0 54px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hc-track{display:flex;gap:14px;width:max-content;animation:hc-rail 46s linear infinite}
.hc-track .hc-in{width:150px;flex:none;animation:none;transform:none}
.hc-track .hc-in:nth-child(odd){transform:rotate(-2deg)}
.hc-track .hc-in:nth-child(even){transform:rotate(2deg) translateY(8px)}
@keyframes hc-rail{ to{transform:translateX(-50%)} }
@media (min-width:1360px){ .hc-rail{display:none} }
@media (max-width:760px){ .hc-rail{margin-top:-46px;padding-bottom:40px} .hc-track .hc-in{width:132px;padding:12px} }

/* the gold underline draws itself once, on load; the words are there from the start */
h1 .u{animation:u-draw 1.1s .5s cubic-bezier(.22,.8,.3,1) both}
@keyframes u-draw{ from{background-size:0% .09em} to{background-size:100% .09em} }

/* word masks for the heading rise */
.section h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.section h2 .wi{display:inline-block;will-change:transform}


/* buttons: a light sweep on hover, and cards lift without touching GSAP's transform */
.cta,.section-cta,.nav-cta{position:relative;overflow:hidden;isolation:isolate}
.cta::after,.section-cta::after,.nav-cta::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgb(255 255 255 / .28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.22,.8,.3,1);
}
.cta:hover::after,.section-cta:hover::after,.nav-cta:hover::after{transform:translateX(120%)}
.evid{transition:translate .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease}
/* the timeline cards keep their own entrance transition alongside the lift */
.tl-card{transition:opacity .5s ease, transform .5s ease, translate .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease}
.evid:hover,.tl-card:hover{translate:0 -6px}
.evid:hover,.tl-card:hover{box-shadow:0 2px 4px rgb(10 42 107 / .05), 0 26px 50px -20px rgb(10 42 107 / .32)}

/* ======================================================================
   ENGAGEMENT LAYER (engage.js + motion.js), after Zero to Shipped and
   Ship Your Expertise
   ====================================================================== */

/* ---- reading progress ---- */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:50;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--cta),var(--bright) 70%,var(--gold))}

/* ---- the bottom bar ---- */
.dock{
  position:fixed;left:50%;bottom:16px;z-index:30;display:flex;align-items:center;gap:18px;
  padding:8px 8px 8px 20px;border-radius:16px;background:var(--navy);color:#fff;
  box-shadow:0 22px 50px -18px rgb(10 42 107 / .6);
  transform:translate(-50%,140%);opacity:0;transition:transform .55s cubic-bezier(.22,.8,.3,1), opacity .3s ease;
}
.dock.on{transform:translate(-50%,0);opacity:1}
.dock-t b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em}
.dock-t span{display:block;font-size:12px;color:rgb(255 255 255 / .7)}
.dock .section-cta{min-height:46px;padding:0 20px;font-size:14.5px;background:var(--bright);border-color:rgb(255 255 255 / .2)}
.dock .section-cta:hover{background:#2A70FF}
@media (max-width:760px){
  .dock{left:10px;right:10px;bottom:10px;transform:translateY(140%);gap:12px;padding:7px 7px 7px 14px}
  .dock.on{transform:none}
  .dock-t b{font-size:13.5px}
  .dock .section-cta{display:inline-flex;width:auto;margin-left:auto;min-height:44px;padding:0 14px;font-size:13.5px}
  .dock .section-cta .full{display:none}
}
@media (min-width:761px){ .dock .section-cta .short{display:none} }

/* ---- hero: the one word in a box ---- */
h1 .hw{
  display:inline-block;padding:0 .14em;margin:0 -.02em;border-radius:.2em;color:var(--cta);
  background:rgb(1 69 200 / .09);box-shadow:inset 0 0 0 1.5px rgb(1 69 200 / .28);
  rotate:-2deg;animation:hw-pop .9s .35s cubic-bezier(.18,1.4,.4,1) both;
}
@keyframes hw-pop{ from{scale:.82;rotate:-8deg} to{scale:1;rotate:-2deg} }

/* ---- words that darken as you read ---- */
.sw{transition:none}

/* ---- the guarantee badge ---- */
.section-promise .section-inner{position:relative}
.vowring{position:absolute;right:-250px;top:-10px;width:190px;height:190px}
.vowring svg{width:100%;height:100%;overflow:visible}
.vowring .ring-t{animation:ring-spin 34s linear infinite;transform-origin:50% 50%}
.vowring text{font-size:11.6px;font-weight:800;letter-spacing:.2em;fill:var(--cta)}
.vowring .mid{position:absolute;inset:34px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-content:center;text-align:center;box-shadow:0 20px 40px -16px rgb(10 42 107 / .55)}
.vowring .mid b{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1}
.vowring .mid span{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:5px}
@keyframes ring-spin{ to{transform:rotate(360deg)} }
@media (max-width:1240px){ .vowring{position:relative;right:auto;top:auto;width:150px;height:150px;margin:0 0 22px} .vowring .mid{inset:27px} .vowring .mid b{font-size:24px} }
@media (prefers-reduced-motion:reduce){ .vowring .ring-t{animation:none} }

@media (prefers-reduced-motion:reduce){
  h1 .u{animation:none}
  .hc-track{animation:none}
  .evid:hover,.tl-card:hover{translate:none}
}