:root{
  --ink:#272727; --body:#4A4B4C; --muted:#7A7B7C;
  --cream:#FFFFFB; --soft:#F4F3EC; --line:#E4E3DA;
  --chart:#EEFEAA; --black:#000;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream); color:var(--body);
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Poppins,"Helvetica Neue",Arial,sans-serif;color:var(--ink)}
a{color:inherit}
img{max-width:100%;display:block;height:auto}
.w{max-width:1240px;margin:0 auto;padding:0 32px}
.narrow{max-width:820px;margin-left:auto;margin-right:auto}
section{padding:72px 0}
section[id]{scroll-margin-top:104px}
.center{text-align:center}
.tight{padding-top:0}

/* bands */
.soft{background:var(--soft)}
.white{background:#fff}
.dark{background:var(--black);color:#C9C9C2}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark p{color:#C9C9C2}
.chartband{background:var(--chart);color:var(--ink)}
.chartband h2,.chartband p{color:var(--ink)}

/* header */
header.site{position:sticky;top:0;z-index:60;background:rgba(22,22,15,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease}
header.site.scrolled{border-bottom-color:rgba(255,255,255,.10)}
header.site .bar{
  max-width:1240px;margin:0 auto;padding:22px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
header.site .brand{
  font-family:Poppins,sans-serif;font-weight:500;font-size:22px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap;
}
header.site nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
header.site nav>a{
  font-family:Montserrat,sans-serif;font-size:15px;color:#C9C9C2;font-weight:500;
  text-decoration:none;letter-spacing:-.01em;transition:color .16s ease;
}
header.site .drop>button{
  font-family:Montserrat,sans-serif;font-size:15px;color:#C9C9C2;font-weight:500;
  letter-spacing:-.01em;background:none;border:0;cursor:pointer;padding:0;
  transition:color .16s ease;
}
header.site nav>a:hover,header.site .drop>button:hover{color:#fff}
header.site nav>a.on,header.site .drop>button.on{color:var(--chart)}

/* the two dropdowns */
.drop{position:relative}
.drop>button:after{content:"\25BE";font-size:11px;margin-left:7px;vertical-align:2px}
.drop .menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  min-width:310px;padding:8px;
  display:none;box-shadow:0 12px 34px rgba(0,0,0,.10);
}
/* The menu hangs 18px below the button, and the mouse has to cross that gap
   to reach it. Without this the gap counts as leaving the menu and it shuts
   before you get there. This bridges it with an invisible strip that belongs
   to the menu, so the hover never breaks. */
.drop .menu:before{
  content:"";position:absolute;left:0;right:0;top:-20px;height:20px;
}
.drop:hover .menu,.drop:focus-within .menu,.drop .menu:hover{display:block}
.drop .menu a{
  display:block;padding:11px 16px;border-radius:10px;font-size:15px;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:background-color .16s ease;
}
.drop .menu a:hover{background:var(--soft)}
/* one item in the menu leaves the site for the school, which is a
   different brand on a different domain. The mark says so before the
   click rather than after it. */
.drop .menu a.out:after{content:"\2197";margin-left:8px;font-size:12px;color:var(--muted)}
.drop .menu .rule{height:1px;background:var(--line);margin:7px 12px}
.drop .menu .mhead{display:block;padding:12px 16px 4px;font-family:Poppins,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
header.site nav>a.navcta{
  background:var(--chart);color:var(--ink);border-radius:100px;
  padding:13px 24px;font-weight:500;font-size:15px;text-decoration:none;white-space:nowrap;
}
header.site nav>a.navcta:hover{background:#fff;color:var(--ink)}
/* mobile menu. A checkbox, so it works with no JavaScript at all. */
.navtoggle{position:absolute;opacity:0;width:0;height:0}
.burger{display:none;width:34px;height:26px;cursor:pointer;position:relative;flex:0 0 auto}
.burger span,.burger:before,.burger:after{
  content:"";position:absolute;left:0;right:0;height:2px;background:#fff;transition:.2s;
}
.burger:before{top:4px}.burger span{top:12px}.burger:after{top:20px}
.navtoggle:checked ~ .burger:before{top:12px;transform:rotate(45deg)}
.navtoggle:checked ~ .burger span{opacity:0}
.navtoggle:checked ~ .burger:after{top:12px;transform:rotate(-45deg)}
.navtoggle:focus-visible ~ .burger{outline:2px solid var(--chart);outline-offset:4px}

@media(max-width:1080px){
  header.site .bar{flex-wrap:wrap;padding:18px 24px}
  header.site .brand{font-size:17px;letter-spacing:.13em}
  .burger{display:block}
  header.site nav{
    display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:0;border-top:1px solid #24241F;margin-top:18px;padding-top:8px;
  }
  .navtoggle:checked ~ nav{display:flex}
  header.site nav>a{padding:15px 2px;border-bottom:1px solid #1A1A16;font-size:17px}
  header.site nav>a.navcta{
    margin:18px 0 8px;text-align:center;border-bottom:0;padding:16px 24px;font-size:16px;
  }
  .drop{width:100%}
  /* two dropdowns now, so their buttons stay on as group headings. Hidden,
     the mobile menu became one flat list of eleven links with nothing to
     say where Train with Andy ended and About Andy began. */
  .drop>button{
    display:block;width:100%;text-align:left;padding:26px 2px 10px;
    font-family:Poppins,sans-serif;font-size:11.5px;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;color:var(--chart);
    background:none;border:0;cursor:default;
  }
  .drop>button:after{content:none}
  header.site nav>.drop:first-child>button{padding-top:8px}
  .drop .menu{
    display:block;position:static;transform:none;background:transparent;border:0;
    box-shadow:none;padding:0;min-width:0;
  }
  .drop .menu a{
    color:#fff;padding:15px 2px;border-bottom:1px solid #1A1A16;font-size:17px;white-space:normal;
  }
  .drop .menu a:hover{background:transparent;color:var(--chart)}
  .drop .menu .rule{display:none}
  .drop .menu .mhead{padding:20px 2px 6px;color:#8B8B84;font-size:10.5px}
}

/* type */
h1{font-size:clamp(38px,5.4vw,75px);line-height:1.2;font-weight:700;
  letter-spacing:-.04em;text-transform:uppercase}
h2{font-size:clamp(28px,3.6vw,48px);line-height:1.18;font-weight:700;
  letter-spacing:-.04em;text-transform:uppercase}
h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
h4{font-size:18px;font-weight:600}
.eyebrow{display:block;font-family:Poppins,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.5em;text-transform:uppercase;color:var(--ink)}
.dark .eyebrow,.hero .eyebrow{color:var(--chart)}
.lead{font-size:19px;max-width:62ch;text-wrap:pretty}
/* The promise. Sits between the heading and the supporting copy, and is
   the line the section is actually selling: the life, not the mechanism.
   Bigger than the lead on purpose, so it is read before the detail. */
.promise{font-family:Poppins,sans-serif;font-weight:600;
  font-size:clamp(21px,2.5vw,31px);line-height:1.25;letter-spacing:-.02em;
  color:var(--ink);max-width:36ch;margin-top:22px;text-wrap:balance}
.center .promise{margin-left:auto;margin-right:auto}
.dark .promise{color:#fff}
.center .lead{margin-left:auto;margin-right:auto}
.narrow .lead{max-width:none}
p + p{margin-top:16px}
h2 + p,h3 + p{margin-top:18px}

/* hero */
section.hero{background:var(--black);color:#C9C9C2;padding:0}
section.hero .grid{
  max-width:1240px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  min-height:min(84vh,760px);
}
section.hero .copy{padding:96px 0}
section.hero h1{color:#fff;margin-top:26px;max-width:16ch}
section.hero .lead{color:#C9C9C2;margin-top:24px;max-width:46ch;font-size:18px}
section.hero .shot{align-self:stretch;position:relative;min-height:420px}
section.hero .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.factline{margin-top:30px;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  color:#8B8B84;font-family:Poppins,sans-serif;font-weight:500}
@media(max-width:980px){
  section.hero .grid{grid-template-columns:1fr;gap:0;min-height:0}
  section.hero .copy{padding:72px 0 40px}
  section.hero .shot{min-height:340px;margin:0 -32px}
}

/* buttons */
.btn{display:inline-block;font-family:Montserrat,sans-serif;font-weight:500;font-size:16px;
  padding:18px 32px;border-radius:100px;text-decoration:none;
  border:1.5px solid var(--ink);color:var(--ink);background:transparent;line-height:1}
.btn-primary{background:var(--chart);border-color:var(--chart);color:var(--ink)}
.btn-big{font-size:17px;padding:20px 38px}
.dark .btn,.hero .btn{border-color:#fff;color:#fff}
.dark .btn-primary,.hero .btn-primary{background:var(--chart);border-color:var(--chart);color:var(--ink)}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.center .btnrow{justify-content:center}
.undernote{font-size:14.5px;color:var(--muted);margin-top:16px}
.altdoor{font-size:15.5px;color:var(--body);margin-top:24px}
.altdoor a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.dark .altdoor,.hero .altdoor{color:#A9A9A2}
.dark .altdoor a,.hero .altdoor a{color:#fff}
.dark .undernote{color:#8B8B84}
.buildnote{font-size:13.5px;font-style:italic;color:#A2A299;margin-top:18px}

/* images */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.flip .pic{order:2}
.split .pic img{width:100%;height:100%;max-height:560px;object-fit:cover}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}.split.flip .pic{order:0}}
.stills{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.stills img{width:100%;height:230px;object-fit:cover}
@media(max-width:800px){.stills{grid-template-columns:1fr 1fr}.stills img{height:180px}}
/* press images: portrait-friendly crop anchored near the top, so heads stay in */
.pressimgs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.pressimgs img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;display:block;border-radius:2px}
@media(max-width:760px){.pressimgs{grid-template-columns:repeat(2,1fr);gap:10px}}
.shots6{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.shots6 img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:2px}
@media(max-width:760px){.shots6{grid-template-columns:repeat(2,1fr);gap:10px}}
/* THE LIMITLESS EQUATION. Andy wanted the mechanism said simply and shown
   rather than explained, so it gets two components and no paragraphs.

   .equation is the statement itself. The operators carry the chartreuse
   because they are the only part a reader has to do any work on, and the
   terms stay white so the line still reads as a sentence rather than as
   decoration.

   .cascade is the one that earns its place. The three things Andy delivers
   are not three features, they are ONE system running at three speeds, each
   feeding the one below it. Set side by side, the horizon on the left and
   what holds it on the right, that stops being a list and becomes a
   mechanism. The spine line down the left is what says "these connect". */
.equation{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,34px);
  flex-wrap:wrap;margin:40px auto 0;max-width:940px;text-align:center}
.equation b{font-family:Poppins,sans-serif;font-weight:700;color:#fff;
  font-size:clamp(21px,3.1vw,38px);letter-spacing:-.035em;line-height:1.05}
.equation i{font-family:Poppins,sans-serif;font-style:normal;font-weight:700;
  color:var(--chart);font-size:clamp(24px,3.6vw,44px);line-height:1}
@media(max-width:620px){
  .equation{flex-direction:column;gap:10px}
  .equation i{font-size:26px}
}

/* The cascade defaults to a LIGHT section and names the dark context
   separately, the same discipline as .hero IS NOT .dark. Written the other way
   round first, it rendered white text on a white band and the middle column
   simply was not there. Chartreuse does not read as text on cream either, so
   on light the accent is ink and the colour returns only on dark. */
.cascade{margin:44px auto 0;max-width:860px;position:relative}
.cascade:before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--ink),rgba(39,39,39,.12))}
.cascade .rung{display:grid;grid-template-columns:150px 1fr 1fr;gap:clamp(14px,3vw,34px);
  align-items:baseline;padding:22px 0 22px 40px;position:relative}
.cascade .rung+.rung{border-top:1px solid var(--line)}
.cascade .rung:before{content:"";position:absolute;left:5px;top:30px;width:14px;height:14px;
  border-radius:50%;background:var(--ink)}
.cascade .when{font-family:Poppins,sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.cascade .what{font-family:Poppins,sans-serif;font-weight:600;font-size:clamp(17px,1.9vw,21px);
  color:var(--ink);letter-spacing:-.02em}
.cascade .how{font-size:16px;color:var(--muted);line-height:1.5}
.dark .cascade:before,.hero .cascade:before{
  background:linear-gradient(180deg,var(--chart),rgba(238,254,170,.15))}
.dark .cascade .rung+.rung,.hero .cascade .rung+.rung{border-top-color:rgba(255,255,255,.10)}
.dark .cascade .rung:before,.hero .cascade .rung:before{background:var(--chart)}
.dark .cascade .when,.hero .cascade .when{color:var(--chart)}
.dark .cascade .what,.hero .cascade .what{color:#fff}
.dark .cascade .how,.hero .cascade .how{color:#A9A9A2}
@media(max-width:820px){
  .cascade .rung{grid-template-columns:1fr;gap:6px;padding:20px 0 20px 38px}
  .cascade .rung:before{top:24px}
}
.fullshot{padding:0}
.fullshot img{width:100%;height:clamp(280px,42vw,520px);object-fit:cover}

/* the two front doors on the home page */
.twodoors{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:34px auto 0;text-align:left}
.tdoor{display:flex;flex-direction:column;gap:10px;background:#fff;border:1.5px solid var(--line);padding:30px 28px;color:var(--body);text-decoration:none;transition:border-color .15s,transform .15s}
.tdoor:hover{border-color:var(--ink);transform:translateY(-2px)}
.tdoor .tag{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tdoor b{font-family:Poppins,sans-serif;font-size:22px;line-height:1.25;color:var(--ink);letter-spacing:-.02em}
.tdoor .cap{font-size:15.5px;line-height:1.55}
.tdoor .go{margin-top:auto;padding-top:8px;font-weight:700;color:var(--ink)}
.tdoor:first-child{border-color:var(--ink);background:var(--chart)}
.hero .doorq,.dark .doorq{color:#fff}
.hero .twodoors{margin-left:0}
.hubgrid{grid-template-columns:repeat(3,1fr);max-width:1100px;margin:34px auto 0}
.hubgrid.two{grid-template-columns:1fr 1fr;max-width:860px}
.hubgrid .tdoor:first-child{border-color:var(--line);background:#fff}
@media (max-width:900px){.hubgrid{grid-template-columns:1fr}}
@media (max-width:700px){.twodoors{grid-template-columns:1fr}}
/* the Challenge doors */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;text-align:left}
.door{
  background:#fff;border:1.5px solid var(--line);padding:30px 26px;cursor:pointer;
  font-family:inherit;font-size:inherit;color:inherit;text-align:left;width:100%;
}
.dark .door{background:#121210;border-color:#33332E;color:#C9C9C2}
.door:hover{border-color:var(--ink)}
.dark .door:hover{border-color:var(--chart)}
.door[aria-expanded="true"]{border-color:var(--ink);background:var(--chart)}
.dark .door[aria-expanded="true"]{background:var(--chart);border-color:var(--chart);color:var(--ink)}
.door .num{font-family:Poppins,sans-serif;font-size:26px;font-weight:700;
  letter-spacing:-.03em;color:var(--ink);display:block}
.dark .door .num{color:#fff}
.dark .door[aria-expanded="true"] .num{color:var(--ink)}
.door .cap{display:block;margin-top:10px;font-size:15.5px}
.doorforms{margin-top:22px}
.doorform{border:1.5px solid var(--ink);padding:34px 30px;background:#fff;color:var(--body)}
.dark .doorform h3{color:var(--ink)}
.dark .doorform p{color:var(--body)}
.doorform h3{margin-bottom:12px}
.embedslot{
  border:1.5px dashed #C9C8BE;padding:26px;margin-top:20px;text-align:center;
  font-size:14.5px;color:var(--muted);font-style:italic;background:var(--soft);
}
/* A slot holding a real form is no longer a slot. The dashed placeholder box
   only belongs around the ones still waiting on Andy. */
.embedslot[data-cta]{
  border:0!important;background:none!important;padding:0!important;
  font-style:normal;color:inherit;font-size:inherit;margin-top:26px}
@media(max-width:800px){.doors{grid-template-columns:1fr}}

/* the three ways in */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;
  align-items:stretch;text-align:left}
/* the alcohol-free band carries two routes, not three. Capped so a pair
   of cards does not stretch into two billboards on a wide screen. */
.ways.two{grid-template-columns:repeat(2,1fr);max-width:900px;margin-left:auto;margin-right:auto}
.way{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.way.pick{background:var(--ink);border-color:var(--ink);color:#D5D5CE}
.way.pick .nm,.way.pick .who b,.way.pick .price{color:#fff}
.way.pick .price span{color:#A9A9A2}
.way .strip{padding:16px 28px;font-family:Poppins,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--line);color:var(--muted)}
.way.pick .strip{background:var(--chart);color:var(--ink);border-bottom-color:var(--chart)}
.way .in{padding:30px 28px 32px;display:flex;flex-direction:column;flex:1}
.way .nm{font-family:Poppins,sans-serif;font-size:26px;font-weight:700;line-height:1.15;
  letter-spacing:-.03em;text-transform:uppercase;color:var(--ink)}
.way .one{font-size:16px;margin-top:12px}
.note{border-left:3px solid var(--chart);padding:2px 0 2px 16px;margin-top:22px;font-size:15px}
.who{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:15px}
.way.pick .who{border-top-color:#454540}
.who b{display:block;font-family:Poppins,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.way ul{list-style:none;margin-top:20px;font-size:15px}
.way ul li{position:relative;padding:6px 0 6px 22px}
.way ul li:before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;
  border-radius:50%;background:var(--chart)}
.way .foot{margin-top:auto;padding-top:28px}
.price{font-family:Poppins,sans-serif;font-size:30px;font-weight:700;
  letter-spacing:-.03em;color:var(--ink)}
.price span{font-size:14px;font-weight:400;color:var(--body);letter-spacing:0}
.go{display:block;text-align:center;margin-top:16px;padding:16px 18px;border-radius:100px;
  font-size:15px;font-weight:500;text-decoration:none;border:1.5px solid var(--ink);color:var(--ink)}
.way.pick .go{background:var(--chart);border-color:var(--chart);color:var(--ink)}
/* the quiet second link under a card's primary button. Only the self-drive card has
   one, because its button now goes straight to the checkout and a reader who
   wants to look before buying still needs a way through. A text link rather
   than a second button, so the hierarchy stays obvious. */
.also{display:block;text-align:center;margin-top:14px;font-size:14.5px;
  color:var(--body);text-decoration:underline;text-underline-offset:3px}
/* only one card carries a second link, and because the card feet are bottom
   anchored that would push its price and button up out of line with the other
   two. Reserving the same height on the cards without one keeps the three
   prices on a single line, which is the whole point of a comparison. */
.way:not(:has(.also)) .in{padding-bottom:65px}
.also:hover{color:var(--ink)}
.way.pick .also{color:#A9A9A2}

/* the other two ways in, at the foot of each product page */
.alts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
.alt{display:block;padding:24px 26px;border:1px solid #2A2A25;text-decoration:none}
.alt:hover{border-color:var(--chart)}
.alt b{display:block;font-family:Poppins,sans-serif;font-size:19px;font-weight:600;
  letter-spacing:-.02em;color:#fff}
.alt span{display:block;margin-top:8px;font-size:15px;color:#A9A9A2}
.alt em{display:block;margin-top:14px;font-style:normal;font-family:Poppins,sans-serif;
  font-size:17px;font-weight:600;color:var(--chart)}
@media(max-width:700px){.alts{grid-template-columns:1fr}}

@media(max-width:900px){.ways,.ways.two{grid-template-columns:1fr}
  /* stacked, so there is no price line to hold and the reserved space
     would just be a hole at the bottom of two of the three cards */
  .way:not(:has(.also)) .in{padding-bottom:32px}}

/* numbered walkthrough */
.steps{counter-reset:s;margin-top:44px;max-width:900px}
.steps .step{counter-increment:s;position:relative;padding:26px 0 26px 74px;
  border-top:1px solid var(--line)}
.dark .steps .step{border-top-color:#2A2A25}
.steps .step:before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:26px;
  font-family:Poppins,sans-serif;font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--muted);
}
.dark .steps .step:before{color:var(--chart)}
.steps .step h3{margin-bottom:10px}
@media(max-width:700px){.steps .step{padding-left:0;padding-top:44px}
  .steps .step:before{top:20px}}

/* pull quotes and testimonials */
.pull{font-family:Poppins,sans-serif;font-size:clamp(22px,2.6vw,32px);font-weight:600;
  line-height:1.3;letter-spacing:-.02em;color:var(--ink);max-width:24ch}
.dark .pull,.hero .pull{color:#fff}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;text-align:left}
.quote{border-top:2px solid var(--chart);padding-top:22px}
.quote p{font-size:17px;color:inherit}
.quote cite{display:block;margin-top:14px;font-style:normal;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:Poppins,sans-serif}
.dark .quote cite{color:#8B8B84}
@media(max-width:800px){.quotes{grid-template-columns:1fr}}
.center .quotes{text-align:center}
.center .quote{padding-left:8px;padding-right:8px}

/* bio blocks with sub-headings */
.bio{max-width:820px;margin:0 auto}
.bio h3{margin-top:44px;font-family:Poppins,sans-serif;font-size:clamp(20px,2.4vw,27px);
  font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.dark .bio h3{color:#fff}
.bio h3:first-child{margin-top:0}
.bio p{margin-top:16px}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;text-align:left}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px;text-align:left}
.card{background:#fff;border:1px solid var(--line);padding:32px}
.card h3{margin-bottom:10px}
.card p{font-size:16px}
.soft .card{background:var(--cream)}
.dark .card{background:#121210;border-color:#2A2A25}
@media(max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}

/* lists */
ul.dots{list-style:none;max-width:820px;margin:30px auto 0;text-align:left}
ul.dots li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--line);font-size:16.5px}
.dark ul.dots li{border-bottom-color:#2A2A25}
ul.dots li:before{content:"";position:absolute;left:2px;top:22px;width:8px;height:8px;
  border-radius:50%;background:var(--chart)}
ul.arrows{list-style:none;margin-top:24px;max-width:760px}
ul.arrows li{position:relative;padding:9px 0 9px 30px;font-size:16.5px}
ul.arrows li:before{content:"\2192";position:absolute;left:0;top:9px;color:var(--chart);font-weight:700}

/* dark band */
.band{background:var(--black);color:#C9C9C2;padding:64px 56px;text-align:left}
.band h2{color:#fff;margin-top:20px}
.band p{color:#C9C9C2;margin-top:18px;font-size:18px;max-width:62ch}
@media(max-width:700px){.band{padding:44px 26px}}

/* faq */
details.q{border-bottom:1px solid var(--line);max-width:900px;margin:0 auto}
.dark details.q{border-bottom-color:#2A2A25}
details.q summary{cursor:pointer;padding:24px 0;font-family:Poppins,sans-serif;font-weight:600;
  font-size:17.5px;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
.dark details.q summary{color:#fff}
details.q summary::-webkit-details-marker{display:none}
details.q summary:after{content:"+";color:var(--muted);font-size:24px;line-height:1}
details.q[open] summary:after{content:"\2013"}
details.q .a{padding:0 0 24px;font-size:16.5px}
details.q .a ul{list-style:none;margin-top:12px}
details.q .a li{position:relative;padding:6px 0 6px 22px}
details.q .a li:before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;
  border-radius:50%;background:var(--chart)}

/* the faces row. Square tiles, uniform crop, name under each. These are
   Andy's own photographs of himself with the people, which is why they can
   be used: they make a factual claim rather than borrowing anyone's mark. */
.faces{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px}
.faces figure{margin:0}
.faces .sq{aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:var(--soft)}
.faces img{width:100%;height:100%;object-fit:cover;display:block}
.faces figcaption{margin-top:14px}
.faces b{display:block;font-family:Poppins,sans-serif;font-size:15px;font-weight:600;
  color:var(--ink);letter-spacing:-.01em}
.faces span{display:block;margin-top:3px;font-size:14px;color:var(--muted)}
.dark .faces b{color:#fff}
.dark .faces span{color:#8B8B84}
@media(max-width:1080px){.faces{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .faces{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
  .faces b{font-size:14px}
  .faces span{font-size:13px}
  /* An odd number of tiles would leave the last one stranded in column one.
     Centre it instead, so five reads as deliberate rather than unfinished. */
  .faces figure:last-child:nth-child(odd){
    grid-column:1 / -1;justify-self:center;width:calc(50% - 8px)}
}

/* Podcast platform marks. Andy: he prefers the version with the logos.
   Nominative use: they identify the platform each link goes to. Single
   colour, one size, so they read as a set rather than three brands. */
.platforms{display:flex;align-items:center;gap:34px;margin-top:34px;flex-wrap:wrap}
.platforms a{display:block;color:var(--chart);transition:opacity .18s}
.platforms a:hover{opacity:.75}
.platforms svg{display:block;height:44px;width:auto;fill:currentColor}
.subline{margin-top:26px;font-size:15.5px;color:#A9A9A2}
.subline a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.subline a:hover{color:var(--chart)}
@media(max-width:600px){
  .platforms{gap:24px;margin-top:26px}
  .platforms svg{height:36px}
  .subline{font-size:14.5px}
}


/* the who it is for / who it is not for boundary. Sits on the black band
   under the Method principle, left aligned inside a centred section so the
   two paragraphs read as prose rather than as a poster. */
.whofor{text-align:left;margin-top:46px;max-width:60ch;margin-left:auto;margin-right:auto}
.whofor .notfor{font-size:16.5px;font-style:italic;color:var(--muted)}
.whofor h3{font-size:19px;margin-bottom:10px}
.whofor h3+p{margin-top:0}
.whofor h3:nth-of-type(2){margin-top:30px}
.dark .undernote a,.hero .undernote a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.dark .undernote a:hover,.hero .undernote a:hover{color:var(--chart)}

/* the As seen in strip. One slow continuous scroll on the black band.
   The track holds the logo list twice, so translating it exactly -50%
   lands the second copy where the first started and the loop is seamless.
   Spacing is a right margin on each image rather than flex gap, because
   gap would leave one extra gap in the middle and the loop would jump. */
.proofband{padding:38px 0 42px;overflow:hidden;border-bottom:0}
.marquee{margin-top:24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;align-items:center;width:max-content;
  animation:mq 52s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee img{height:calc(27px * var(--s,1));width:auto;display:block;flex:none;
  margin-right:58px;opacity:.82}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:640px){
  .proofband{padding:30px 0 34px}
  .marquee .track{animation-duration:38s}
  .marquee img{height:calc(21px * var(--s,1));margin-right:40px}
}
/* no motion: drop the second copy and let the row wrap */
@media(prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee .track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .marquee img{margin:0 22px 18px}
  .marquee .dup{display:none}
}

.logos{display:flex;gap:38px;flex-wrap:wrap;justify-content:center;align-items:center;
  margin-top:32px;font-family:Poppins,sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* video slot */
.videoslot{
  border:1.5px dashed #4A4A44;background:#111;color:#8B8B84;padding:0;margin-top:36px;
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:15px;font-style:italic;
}
.soft .videoslot,.white .videoslot{border-color:#C9C8BE;background:var(--soft);color:var(--muted)}


/* announcement strip */
.announce{background:var(--chart);color:var(--ink);padding:0}
.announce .in{
  max-width:1240px;margin:0 auto;padding:16px 32px;display:flex;gap:10px 22px;
  align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;
  font-size:15.5px;
}
.announce b{font-family:Poppins,sans-serif;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:12px}
.announce a{font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px}

/* trailer, click to load so nothing reaches YouTube until asked */
.trailer{position:relative;aspect-ratio:16/9;background:#141412;cursor:pointer;
  border:0;padding:0;width:100%;display:block;overflow:hidden}
.trailer img{width:100%;height:100%;object-fit:cover;opacity:.68;transition:opacity .2s}
.trailer:hover img{opacity:.82}
.trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.trailer .play{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;pointer-events:none;
}
.trailer .play i{
  width:82px;height:82px;border-radius:50%;background:var(--chart);
  display:flex;align-items:center;justify-content:center;font-style:normal;
}
.trailer .play i:after{content:"";border-left:22px solid var(--ink);
  border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.trailer .play span{font-family:Poppins,sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;color:#fff}

/* ticket cards */
.tickets{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;text-align:left}
.ticket{border:1.5px solid #33332E;background:#121210;padding:34px 30px;display:flex;flex-direction:column}
.ticket .zone{font-family:Poppins,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--chart)}
.ticket h3{margin-top:14px;font-size:27px;letter-spacing:-.03em;color:#fff}
.ticket .when{margin-top:10px;font-size:16px;color:#C9C9C2}
.ticket .go{margin-top:auto;padding-top:28px}
.ticket .go a{display:block;text-align:center;padding:17px 18px;border-radius:100px;
  background:var(--chart);color:var(--ink);text-decoration:none;font-weight:500;font-size:16px}
@media(max-width:800px){.tickets{grid-template-columns:1fr}}


/* press page */
.metarow{display:flex;flex-wrap:wrap;gap:14px 44px;margin-top:34px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:24px}
.metarow .mm{font-size:14.5px;color:#C9C9C2}
.metarow .mm b{display:block;font-family:Poppins,sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--chart);margin-bottom:6px}
.metarow .mm a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(238,254,170,.5)}
.biobox{background:#fff;border:1px solid var(--line);padding:28px 30px;margin-top:20px}
.soft .biobox{background:var(--cream)}
.biobox .lab{font-family:Poppins,sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.biobox .copy{
  font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;background:var(--chart);color:var(--ink);border:0;
  border-radius:100px;padding:8px 16px;cursor:pointer;
}
.biobox .copy.done{background:var(--ink);color:#fff}
.biobox .txt{margin-top:16px;font-size:16.5px}
.biobox .txt p + p{margin-top:14px}
.numlist{counter-reset:n;margin-top:36px}
.numlist .it{counter-increment:n;position:relative;padding:20px 0 20px 62px;border-top:1px solid var(--line)}
.dark .numlist .it{border-top-color:#2A2A25}
.numlist .it:before{content:counter(n);position:absolute;left:0;top:20px;
  font-family:Poppins,sans-serif;font-size:14px;font-weight:700;color:var(--muted)}
.dark .numlist .it:before{color:var(--chart)}
.numlist .it b{font-family:Poppins,sans-serif;font-size:17px;color:var(--ink);display:block;margin-bottom:6px}
.dark .numlist .it b{color:#fff}


/* Kajabi form embeds. The default Kajabi theme ships every form with a blue
   Subscribe button and a "JOIN THE NEWSLETTER" heading over "Subscribe to get
   our latest content by email" - neither the brand nor what the page has just
   said. The surrounding section already carries the heading, so the form's own
   is hidden and the controls are restyled. !important is required because the
   Kajabi CDN stylesheet loads after this one and wins on specificity. */
.embedslot .kajabi-form__title,.capform .kajabi-form__title,
.embedslot .kajabi-form__subtitle,.capform .kajabi-form__subtitle{display:none!important}
.embedslot .kajabi-form__btn,.capform .kajabi-form__btn{
  background:var(--chart)!important;color:var(--ink)!important;
  border:0!important;border-radius:100px!important;box-shadow:none!important;
  font-family:Montserrat,sans-serif!important;font-size:16px!important;
  font-weight:500!important;letter-spacing:0!important;text-transform:none!important;
  padding:14px 30px!important;cursor:pointer}
.embedslot .kajabi-form__btn:hover,.capform .kajabi-form__btn:hover{filter:brightness(1.08)}
/* On the chartreuse band a chartreuse button would disappear. */
.chartband .embedslot .kajabi-form__btn{background:var(--ink)!important;color:var(--cream)!important}
.capform input.text-field,.capform input.email-field,
.capform .kajabi-form__form-item input,.capform .kajabi-form__form-item textarea,
.embedslot input.text-field,
.embedslot input.email-field,
.embedslot .kajabi-form__form-item input,
.embedslot .kajabi-form__form-item textarea,
.embedslot .kajabi-form__form-item select{
  font-family:Montserrat,sans-serif!important;font-size:16px!important;
  border:1px solid var(--line)!important;border-radius:8px!important;
  padding:13px 14px!important;background:#fff!important;color:var(--ink)!important}
/* Kajabi gives its select a fixed height, which cut the placeholder text in half. */
.embedslot .kajabi-form__form-item select,.capform .kajabi-form__form-item select{
  height:auto!important;min-height:52px!important;line-height:1.4!important;padding-top:12px!important;padding-bottom:12px!important}
.embedslot .kajabi-form__form-item input:focus,
.embedslot .kajabi-form__form-item textarea:focus{
  outline:2px solid var(--ink)!important;outline-offset:1px}


/* cookie banner. Accept and decline are the same size, the same colour
   weight and the same distance from the thumb. That is the law now, and it
   is also the only version of this that matches how Andy talks. */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--black);color:#C9C9C2;border-top:1px solid #33332E;
  box-shadow:0 -10px 40px rgba(0,0,0,.35);
}
.consent[hidden]{display:none}
.consent .in{
  max-width:1180px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:24px;
}
.consent p{font-size:14px;line-height:1.5;margin:0}
.consent a{color:var(--chart);text-decoration:underline;text-underline-offset:2px}
.consent .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-left:auto;flex-shrink:0}
.consent button{
  padding:10px 20px;border-radius:100px;cursor:pointer;white-space:nowrap;
  font-family:Montserrat,sans-serif;font-size:14px;font-weight:500;
  border:1.5px solid var(--chart);
}
/* Accept and Reject are deliberately IDENTICAL: same size, same fill, same
   weight, same one click. UK PECR as amended by the Data (Use and Access)
   Act 2025 requires refusing to be as easy and as prominent as accepting,
   and the ICO's April 2026 guidance treats a de-emphasised Reject as a
   breach. Do not restyle one of these without the other. */
.consent .yes,.consent .no{background:var(--chart);color:var(--ink)}
.consent button:hover{filter:brightness(1.08)}
.consent button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cookielink{background:none;border:0;padding:0;color:inherit;font:inherit;
  cursor:pointer;text-align:left}
.cookielink:hover{color:var(--chart)}
/* On a phone the strip stacks, but it stays a strip. The old card filled
   the bottom half of a 390px screen and hid the hero button entirely. */
@media(max-width:760px){
  .consent .in{flex-direction:column;align-items:stretch;gap:12px;padding:14px 18px}
  .consent p{font-size:13.5px;line-height:1.45}
  .consent .row{margin-left:0}
  .consent button{padding:11px 12px;font-size:14px}
}


/* legal pages. Long documents, so the type gets a little more air. */
.legal h2{font-size:clamp(22px,2.6vw,30px);margin-top:52px}
.legal h2:first-child{margin-top:0}
.legal h3,.legal h4{margin-top:34px;font-size:19px}
.legal p{margin-top:16px;font-size:16.5px}
.legal ul,.legal ol{margin:16px 0 16px 22px;font-size:16.5px}
.legal li{padding:5px 0}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--chart);text-decoration-thickness:2px}
.legal details.q{margin-top:0}
.legal details.q + details.q{margin-top:0}


/* Phone tap targets. Anything you are meant to press wants about 44px of
   height, which is roughly a fingertip. Links inside a sentence are the
   accepted exception, because padding them out would wreck the paragraph. */
@media(max-width:1080px){
  footer.site nav{gap:0}
  footer.site nav a{padding:11px 0}
  .announce .in{padding:12px 24px}
  .announce a{display:inline-block;padding:9px 0}
  header.site .brand{padding:8px 0}
  .biobox .copy{padding:14px 22px}
  /* the legal strip along the bottom, where the links sit in one line */
  footer.site .legal{line-height:2.4}
  footer.site .legal a,footer.site .legal .cookielink{
    display:inline-block;padding:11px 0;
  }
}

/* footer */
footer.site{background:var(--black);color:#9C9C95;padding:72px 0 52px;font-size:15px}
footer.site a{color:#9C9C95;text-decoration:none}
footer.site a:hover{color:var(--chart)}
footer.site .cols{display:flex;gap:48px;flex-wrap:wrap;justify-content:space-between}
footer.site .brandmark{font-family:Poppins,sans-serif;font-weight:500;font-size:19px;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:14px}
footer.site nav{display:flex;flex-direction:column;gap:11px}
footer.site .legal{margin-top:48px;padding-top:26px;border-top:1px solid #24241F;
  font-size:13.5px;color:#6E6E68}


/* Readability pass, 30 Oct 2026 (Steph's review).
   1. Bullets: chartreuse dots vanish on white and cream, so bullets are ink on
      light backgrounds and stay chartreuse only on black.
   2. The picked card is a soft yellow card with ink text, not a dark card with
      grey text, so its bullets and copy can actually be read.
   3. Small print on black is near-white, never mid grey.
   4. .steps are not numbered unless they really are steps: add .numbered for
      Step 1, Step 2, Step 3. Everything else gets a short chartreuse bar. */
ul.dots li:before,.way ul li:before,details.q .a li:before{background:var(--ink)}
.dark ul.dots li:before,.dark details.q .a li:before{background:var(--chart)}
.way.pick{background:#F8FED9;border-color:#D9EC86;color:var(--body)}
.way.pick .nm,.way.pick .who b,.way.pick .price{color:var(--ink)}
.way.pick .price span,.way.pick .also{color:var(--body)}
.way.pick .who{border-top-color:#DCE9A6}
.way.pick ul li:before{background:var(--ink)}
.way.pick .note{border-left-color:var(--ink)}
.way.pick .go{background:var(--ink);border-color:var(--ink);color:#fff}
.way.pick .go:hover{background:#000}
.dark .undernote,.hero .undernote{color:#E4E4DC}
.dark .altdoor,.hero .altdoor,.dark .cascade .how,.hero .cascade .how,.dark .quote cite,.dark .faces span{color:#D5D5CE}
.dark p{color:#E4E4DC}
.steps .step:before{content:"";top:36px;width:22px;height:3px;background:var(--chart);border-radius:2px}
.soft .steps .step:before,.steps .step:before{background:var(--ink)}
.dark .steps .step:before{background:var(--chart)}
.steps.numbered .step:before{content:"Step " counter(s);width:auto;height:auto;background:none;top:28px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.dark .steps.numbered .step:before{color:var(--chart);background:none}
@media(max-width:700px){.steps .step:before{top:24px}.steps.numbered .step:before{top:20px}}
.dark .tdoor,.dark .hubgrid .tdoor:first-child{background:#121210;border-color:#33332E;color:#D5D5CE}
.dark .tdoor b,.dark .tdoor .go{color:#fff}
.dark .tdoor .tag{color:var(--chart)}
.dark .tdoor:hover{border-color:var(--chart)}
.chartband .tdoor,.chartband .hubgrid .tdoor:first-child{background:#fff;border-color:var(--ink)}
.chartband .eyebrow{color:var(--ink)}
.freedoors .lead{max-width:60ch;margin:16px auto 0}


/* ---- The Advantage Score. All scoped under #sc so nothing here can
   collide with the rest of the site's stylesheet. ---- */
#sc{max-width:680px;margin:0 auto;padding:0 4px}
#sc .scr{display:none}
#sc .scr.on{display:block}
#sc .qnum{font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:#7E7E74}
#sc .qarea{font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--chart);margin-top:22px}
#sc .qtext{font-family:Poppins,sans-serif;font-size:clamp(22px,5vw,30px);
  line-height:1.24;font-weight:600;letter-spacing:-.02em;color:#fff;
  margin:10px 0 32px}
#sc .prog{height:3px;background:#31312A;margin-bottom:34px}
#sc .prog span{display:block;height:3px;background:var(--chart);width:0;transition:width .25s}
#sc .scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px}
#sc .scale button{min-height:64px;background:transparent;color:#E9E9E0;
  border:1px solid #31312A;border-radius:6px;cursor:pointer;
  font:500 14px/1.25 Montserrat,sans-serif;padding:8px 6px}
#sc .scale button:hover{border-color:var(--chart);color:var(--chart)}
#sc .scale button:focus-visible{outline:2px solid var(--chart);outline-offset:2px}
#sc .bk{margin-top:26px;background:none;border:0;padding:8px 0;cursor:pointer;
  font:400 14px Montserrat,sans-serif;color:#7E7E74}
#sc .bk:hover{color:#E9E9E0}
#sc .done{font-size:19px;line-height:1.55;color:#E9E9E0;margin-bottom:34px}
#sc .done b{color:#fff;font-weight:600}
#sc .gaphero{border-top:1px solid #31312A;padding-top:32px}
#sc .pct{font-family:Poppins,sans-serif;font-weight:700;
  font-size:clamp(80px,22vw,140px);line-height:.82;letter-spacing:-.055em;
  color:var(--chart);font-variant-numeric:tabular-nums}
#sc .pct i{font-style:normal;font-size:.42em}
#sc .pctlab{font-family:Poppins,sans-serif;font-size:14px;letter-spacing:.2em;
  text-transform:uppercase;color:#E9E9E0;margin-top:16px}
#sc .pctsub{font-size:15px;color:#A6A69B;margin-top:8px}
#sc .pctsub b{color:#E9E9E0;font-weight:600}
#sc .gradwrap{position:relative;padding-top:36px;margin-top:36px}
#sc .grad{height:16px;border-radius:100px;background:linear-gradient(90deg,
  #8E2F2A 0%,#B0512B 20%,#CE8A2C 40%,#C9C24A 60%,#A8D96A 80%,#EEFEAA 100%)}
#sc .mark{position:absolute;top:0;left:0;transform:translateX(-50%);
  transition:left 1s cubic-bezier(.2,.7,.3,1)}
#sc .mark b{display:block;font-family:Poppins,sans-serif;font-weight:700;
  font-size:15px;color:#fff;white-space:nowrap;text-align:center;margin-bottom:6px;
  font-variant-numeric:tabular-nums}
#sc .mark s{display:block;width:3px;height:30px;background:#fff;margin:0 auto;
  border-radius:3px;box-shadow:0 0 0 1.5px rgba(22,22,15,.6)}
#sc .zones{display:flex;margin-top:13px;font-family:Poppins,sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#7E7E74}
#sc .zones span{text-align:center}
#sc .zones span.hit{color:var(--chart)}
#sc .bandh{font-family:Poppins,sans-serif;font-size:clamp(24px,5.6vw,33px);
  line-height:1.16;font-weight:700;letter-spacing:-.03em;color:#fff;margin:44px 0 16px}
#sc .bandc{font-size:18px;line-height:1.6;color:#A6A69B}
#sc .bd{margin-top:40px}
#sc .bd h4{font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:#7E7E74;font-weight:600;margin-bottom:12px}
#sc .bd div.r{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-top:1px solid #31312A;font-size:15px;color:#E9E9E0}
#sc .bd div.r span:last-child{color:var(--chart);white-space:nowrap;font-weight:600}
#sc .bd div.r small{display:block;color:#7E7E74;font-size:13px;margin-top:3px}
#sc .cap{margin-top:48px;background:#1E1E16;border:1px solid var(--chart);padding:32px 28px}
#sc .cap .ey{font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--chart);font-weight:600}
#sc .cap h3{font-family:Poppins,sans-serif;font-size:clamp(24px,5vw,30px);line-height:1.15;
  font-weight:700;letter-spacing:-.02em;color:#fff;margin:12px 0 14px}
#sc .cap p{color:#A6A69B;font-size:16px;line-height:1.6}
#sc .cap ul{list-style:none;margin:20px 0 0;padding:0}
#sc .cap li{position:relative;padding:9px 0 9px 28px;color:#E9E9E0;font-size:16px;
  line-height:1.45;border-top:1px solid #31312A}
#sc .cap li:before{content:"";position:absolute;left:4px;top:17px;width:9px;height:9px;
  border-radius:50%;background:var(--chart)}
#sc .gets{margin-top:48px;border-color:#4A4A3F;background:#16160F}
#sc .gets + .cap{margin-top:18px}
#sc .gets ol{margin:18px 0 0;padding-left:22px;color:#E9E9E0}
#sc .gets li{padding:7px 0 7px 4px;font-size:17px;line-height:1.5;border:0}
#sc .gets li:before{display:none}
#sc .gets b{color:var(--chart)}
#sc .cap .fine{font-size:13px;color:#7E7E74;margin-top:14px}
#sc .capform{margin-top:22px}
#sc .capform[hidden]{display:none}
#sc .capform .kajabi-form__form-item:has(input[placeholder="Advantage Score"]),
#sc .capform .kajabi-form__form-item:has(input[placeholder="Lowest area"]),
#sc .capform .kajabi-form__form-item:has(input[placeholder="Score answers"]),
#sc .capform .kajabi-form__form-item:has(input[placeholder="Breakdown link"]){display:none!important}
#sc .ab{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 34px}
#sc .ab div{border-top:2px solid var(--chart);padding-top:12px;font-size:14px;line-height:1.45;color:#A6A69B}
#sc .ab b{display:block;font-family:Poppins,sans-serif;color:#fff;font-size:15px;margin-bottom:4px}
@media(max-width:560px){
  #sc .scale{grid-template-columns:1fr;gap:6px}
  #sc .scale button{min-height:52px;font-size:15px;text-align:left;padding:0 16px}
  #sc .ab{grid-template-columns:1fr}
  #sc .cap{padding:26px 20px}
}

/* the episode player */
#pp{margin-top:36px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
#pp .now{display:flex;gap:22px;padding:22px;align-items:center;background:var(--ink);color:#fff}
#pp .art{width:104px;height:104px;flex:0 0 104px;border-radius:8px;object-fit:cover;background:#333}
#pp .meta{min-width:0;flex:1}
#pp .eyeb{font-family:Poppins,sans-serif;font-size:11px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--chart)}
#pp .ttl{display:block;margin-top:7px;font-family:Poppins,sans-serif;font-weight:600;
  font-size:18px;line-height:1.25;letter-spacing:-.01em;color:#fff}
#pp audio{width:100%;margin-top:14px;height:38px}
#pp ol{list-style:none;margin:0;padding:0;max-height:400px;overflow-y:auto}
#pp li+li{border-top:1px solid var(--line)}
#pp li button{display:flex;gap:16px;align-items:center;width:100%;text-align:left;
  background:none;border:0;padding:15px 22px;cursor:pointer;font:inherit;color:var(--ink)}
#pp li button:hover{background:var(--soft)}
#pp li button[aria-current="true"]{background:var(--chart)}
#pp .ico{flex:0 0 30px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center}
#pp .ico:after{content:"";border-left:9px solid var(--ink);border-top:6px solid transparent;
  border-bottom:6px solid transparent;margin-left:3px}
#pp .txt{min-width:0;flex:1}
#pp .t{display:block;font-weight:600;font-size:15.5px;line-height:1.3;letter-spacing:-.01em}
#pp .d{display:block;margin-top:3px;font-size:13.5px;color:var(--muted)}
#pp .n{flex:0 0 auto;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:640px){
  #pp .now{gap:16px;padding:18px}
  #pp .art{width:74px;height:74px;flex:0 0 74px}
  #pp .ttl{font-size:16px}
  #pp li button{padding:13px 16px;gap:12px}
  #pp .t{font-size:14.5px}
  #pp .n{display:none}
}