/* ============================================================================
   PAGE — homepage section layout. Consumes tokens.css + system.css.
   Section order mirrors the document: announce, nav, hero, events, billboard,
   pillars, voices, meet, results, unshake/upcoming, coaching, shop, podcast,
   finale, footer.
   ========================================================================== */

/* ===== announcement ===== */
.announce { background: var(--blue); color: var(--white); text-align: center; font-size: 16px; padding: 5px 16px; }
.announce b { font-weight: 600; }

/* ===== nav ===== */
.nav { background: var(--black); color: var(--white); position: sticky; top: 0; z-index: 100; }
.nav .row { display: flex; align-items: center; gap: 28px; min-height: 80px; position: relative; }
.brand { font-weight: 600; letter-spacing: 0.24em; font-size: 19px; white-space: nowrap; }
.menu { display: flex; gap: 34px; list-style: none; padding: 0; position: absolute; left: 50%; translate: -50% 0; }
.menu > li > a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; opacity: 1; transition: opacity 0.5s ease; }
.menu > li > a:hover { opacity: 0.4; }
.menu svg { opacity: 1; }

/* nav dropdowns */
.menu > li { position: relative; }
.menu > li > a > svg { transition: rotate 200ms var(--ease-tw); }
.menu > li:hover > a > svg, .menu > li:focus-within > a > svg { rotate: 180deg; }
.menu .dropdown {
  position: absolute; top: 100%; left: -10px; padding-top: 20px;
  opacity: 0; visibility: hidden; translate: 0 8px; z-index: 110;
  transition: opacity 200ms var(--ease-tw), translate 200ms var(--ease-tw), visibility 0s linear 200ms;
}
.menu > li:hover .dropdown, .menu > li:focus-within .dropdown {
  opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s;
}
/* dropdown panel is WHITE like the reference site (same fade/slide animation) */
.menu .dropdown ul {
  list-style: none; margin: 0; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  min-width: 240px; display: grid; gap: 2px;
}
.menu .dropdown a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 15px; white-space: nowrap; color: var(--black); opacity: 0.85; }
.menu .dropdown a:hover { background: var(--white-1); opacity: 1; }

.chipf { cursor: default; }

.nav-right { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-right > a[aria-label="Search"] { margin-right: 8px; }
.nav-right > a[aria-label="Search"] svg { width: 21px; height: 21px; }
.nav .pill { padding: 10px 16px; font-size: var(--fs-xs); }

/* hamburger — hidden on desktop, revealed when the mega-menu collapses */
.nav-toggle { display: none; align-items: center; justify-content: center; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; margin: 0; }
.nav-toggle svg { display: block; }

@media (max-width: 1080px) {
  body { overflow-x: hidden; }  /* kill any horizontal page-scroll; rails keep their own scrollers */
  .menu { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-right > a[aria-label="Search"] { display: none; }
  /* opened mobile panel: reuse the existing menu markup as a vertical list */
  .nav.open .menu {
    display: flex; flex-direction: column; gap: 0; translate: 0 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--black); border-top: 1px solid var(--black-2);
    padding: 6px 0 14px; max-height: 78vh; overflow-y: auto;
  }
  .nav.open .menu > li { position: static; }
  .nav.open .menu > li > a { padding: 13px 2px; font-size: 16px; opacity: 1; }
  .nav.open .menu > li > a > svg { display: none; }
  /* dropdown children flatten inline (no hover needed on touch) */
  .nav.open .menu .dropdown { position: static; opacity: 1; visibility: visible; translate: 0 0; padding: 0; transition: none; }
  .nav.open .menu .dropdown ul { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 6px; min-width: 0; display: grid; gap: 0; }
  .nav.open .menu .dropdown a { color: var(--gray-on-dark); padding: 9px 2px 9px 18px; font-size: 15px; white-space: normal; }
}
@media (max-width: 480px) {
  .brand { font-size: 13px; letter-spacing: 0.14em; }
  .nav-right .login { display: none; }
  .nav .pill { padding: 7px 12px; font-size: 12px; white-space: nowrap; }
  .nav .row { gap: 10px; }
  .nav-right { gap: 10px; }
  .nav-toggle { padding: 4px; }
}

/* ===== hero: card inset in a black frame; black flows into events ===== */
/* hero card sits inside .wrap so its edges align with all section content below */
.hero-frame { padding: 0 0 20px; background: var(--black); }
.hero {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-height: calc(100vh - 100px); display: flex; align-items: flex-end;
  background: var(--black-1);
}
.hero > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* bottom-2/3 overlay, gradient-to-top */
.hero::after { content: ""; position: absolute; inset: 33% 0 0 0; background: linear-gradient(to top, #022886, rgba(2, 40, 134, 0)); }
.hero .content { position: relative; z-index: 1; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: var(--pad); color: var(--white); flex-wrap: wrap; }
.hero h1 { max-width: 896px; }
.hero .cta { margin-top: 40px; }
.next-event { width: min(384px, 100%); }
.next-event .kicker { color: var(--white); margin-bottom: 10px; }
.next-event .kicker::before { background: #4d8bff; }
.ne-card { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 9; }
.ne-card .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ne-card video.photo { background: #000; }
.ne-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 55%); }
.ne-card .logo { position: absolute; left: 25px; bottom: 26px; width: 162px; z-index: 1; }
.ne-card .watch { position: absolute; right: 20px; bottom: 20px; z-index: 2; }
.ne-card .watch a.pill { padding: 16px 32px; background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; border-color: transparent; }
.ne-card .watch a.pill:hover { background: rgba(255, 255, 255, 0.3); color: #fff; }
.ne-card .watch svg { width: 17px; height: 17px; }

/* ===== events rail: full-bleed black section ===== */
.events-sec { background: var(--black); color: var(--white); padding-top: 75px; padding-bottom: 80px; }
.events-sec .rail-head { padding-bottom: 45px; }
.events-sec .rail-head h2 { color: var(--white); }
.events-sec .rail-nav .circle-btn { background: var(--black-1); color: var(--white); }
.events-sec .rail-nav .circle-btn:hover { background: var(--black-2); }
.events-band { position: relative; overflow-x: clip; }
.events-band .rail { margin-right: calc(50% - 50vw); padding-right: clamp(16px, 2.7vw, 40px); }
.event-card { position: relative; flex: 0 0 300px; aspect-ratio: 2 / 3; border-radius: var(--r-lg); overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.event-card img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the media IS the card face (base layer); video variant plays on hover */
.event-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.event-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); }
.event-card .lockup { position: absolute; inset: auto 0 0 0; z-index: 1; display: grid; justify-items: center; gap: 0; padding: 24px 40px; text-align: center; }
.event-card .lockup img { width: auto; max-width: 160px; max-height: 138px; object-fit: contain; margin-bottom: 20px; }
/* text lockup (replaces the reference's program-logo SVGs) */
.event-card .lockup .lockup-name { font-size: 27px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--white); text-wrap: balance; margin-bottom: 16px; }
.event-card .lockup p { font-size: 16px; color: var(--white); opacity: 0.7; max-width: 220px; line-height: 1.5; }

/* ===== billboard ===== */
.billboard { position: relative; display: grid; place-items: center; text-align: center; color: var(--white); overflow: hidden; background: linear-gradient(160deg, #9aa895, #6d7c6a 55%, #4b5748); padding-block: 224px; }
@media (max-width: 768px) { .billboard { padding-block: 128px; } }
.billboard .inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 20px; width: min(768px, calc(100vw - 2 * var(--pad))); padding: 20px 0 0; }
.billboard h2 { font-size: var(--fs-xxxl); line-height: 1; max-width: 768px; text-wrap: balance; }
.billboard p { max-width: 768px; font-size: var(--fs-base); line-height: 1.5; }
.billboard > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.billboard::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.billboard.no-media::after { content: none; }

/* ===== pillars ===== */
.pillars { padding-block: 80px; }
.pillars .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .pillars .grid { grid-template-columns: 1fr; } }
.pillar-list { list-style: none; padding: 0; display: grid; }
.pillar-list a { display: flex; align-items: center; font-size: var(--fs-xxl); font-weight: 500; letter-spacing: -0.05em; line-height: 0.9; padding-block: 4px; transition: opacity 150ms var(--ease); }
.pillar-list:hover a { opacity: 0.35; }
.pillar-list a:hover, .pillar-list a:focus-visible { opacity: 1; }
.pillar-list .explore {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 11px 22px; font-size: 16px; font-weight: 500; letter-spacing: 0;
  opacity: 0; translate: -6px 0;
  transition: opacity 180ms var(--ease), translate 180ms var(--ease);
}
.pillar-list a:hover .explore, .pillar-list a:focus-visible .explore { opacity: 1; translate: 0 0; }
.pillars .photo { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1 / 1; }
.pillars .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--ease-tw); }
.pillars .photo img.on { opacity: 1; }

/* ===== voices billboard (auto-rotating, clickable) ===== */
.celeb { position: relative; min-height: min(60.5vw, 920px); overflow: hidden; color: var(--white); display: grid; }
.celeb .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--ease-tw); }
.celeb .bg.on { opacity: 1; }
/* stronger than the reference's 18% scrim: our light medical-render backgrounds
   need it for white quote/caption legibility */
.celeb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 70%); }
.celeb-row .person { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.celeb .content { position: relative; z-index: 1; width: 100%; display: grid; align-content: end; gap: 76px; padding: clamp(24px, 2.7vw, 40px); padding-bottom: 80px; }
.celeb blockquote { justify-self: end; width: min(828px, 92%); text-align: left; text-indent: -0.3em; font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.05em; line-height: 1; transition: opacity 350ms var(--ease); }
.celeb-row { width: min(828px, 100%); justify-self: end; display: grid; grid-template-columns: repeat(4, 192px); gap: 20px; }
@media (max-width: 900px) { .celeb-row { grid-template-columns: repeat(2, 1fr); justify-self: start; width: 100%; } }
.celeb-row .person { text-align: center; display: grid; justify-items: center; align-content: start; gap: 0; font-size: var(--fs-sm); line-height: 1.5; opacity: 0.55; background: none; border: 0; font-family: inherit; color: inherit; cursor: pointer; transition: opacity 250ms var(--ease); padding: 0; }
.celeb-row .person:hover { opacity: 0.85; }
.celeb-row .person.on { opacity: 1; }
.celeb-row img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; }
.celeb-row .name { margin-bottom: 0; font-weight: 700; font-size: 16px; }
.celeb-row .person span:last-child { color: var(--white); opacity: 0.7; }

/* ===== meet (hunger) ===== */
.hunger { padding-block: 80px; }
.hunger > .wrap > h2 { font-size: var(--fs-xxl); max-width: 896px; margin-bottom: 40px; text-wrap: balance; }
.hunger .row1 { position: relative; min-height: 528px; }
/* z-index 1: the photo must paint ABOVE the fillet square (only the rounded-corner
   notch reveals it) — otherwise the square's sharp outer corner shows over the photo */
.meet-card { position: relative; z-index: 1; border-radius: var(--r-lg); overflow: hidden; background: #101216; width: 66.667%; height: 528px; }
.meet-card .photo { position: absolute; left: -1%; bottom: -2px; width: 92%; }
.meet-card .photo img { width: 100%; height: auto; }
/* full-bleed photo variant (regular photograph instead of a cutout) */
.meet-card .photo-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* dark base gradient so the photo card fuses into the media tile at the shared
   corner, like the reference's blue-card→tile junction */
.meet-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 8, 12, 0.72), rgba(6, 8, 12, 0) 44%); }
.hunger .side-txt { position: absolute; top: 80px; left: calc(66.667% + 80px); width: 309px; display: grid; gap: 12px; }
.hunger .side-txt p { font-size: var(--fs-base); line-height: 1.5; }
.hunger .side-txt .pill { justify-self: start; }
.video-tile { position: absolute; left: 66.667%; top: 528px; width: 33.333%; height: 262px; z-index: 1; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(120% 130% at 20% 0%, #14181f 0%, #05070d 55%); }
.video-tile video, .video-tile img.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* connecting gradient: dark bloom from the corner shared with the meet card,
   mirroring the reference's radial that let the two media read as one piece */
.video-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(140% 150% at 16% 0%, rgba(6, 8, 12, 0.94) 0%, rgba(6, 8, 12, 0.55) 46%, rgba(6, 8, 12, 0.18) 76%, rgba(6, 8, 12, 0.06) 100%); pointer-events: none; }
.video-tile .watch { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.video-tile .pill { background: rgba(255, 255, 255, 0.1); color: var(--white); }
.video-tile .pill:hover { background: rgba(255, 255, 255, 0.25); }
/* concave fillet fusing the photo card's bottom-right into the media tile —
   dark square matching the two corner gradients (the reference used the card's blue) */
.hunger .row1 .fillet-sq { left: calc(66.667% - 40px); top: 488px; background: #090b10; }
.hunger .row1 .fillet-c1 { left: 66.667%; top: 448px; background: var(--white); border-radius: 50%; }
.hunger .row1 .fillet-c2 { left: calc(66.667% - 80px); top: 528px; background: var(--white); border-radius: 50%; }
@media (max-width: 900px) {
  .hunger .row1 { min-height: 0; }
  .meet-card { width: 100%; }
  .hunger .side-txt { position: static; width: auto; margin-top: 24px; }
  .video-tile { position: static; width: 100%; margin-top: 16px; height: 300px; }
}
/* padding-bottom clears the absolutely-positioned media tile */
.featured-in { margin-top: 37px; padding-top: 40px; padding-bottom: 75px; color: var(--black); max-width: 938px; }
.featured-in > span { display: block; font-size: var(--fs-md); font-weight: 400; letter-spacing: -0.05em; opacity: 0.6; margin-bottom: 20px; }
.featured-in .logos { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 8px; max-width: 898px; }
@media (max-width: 900px) { .featured-in { max-width: none; } .featured-in .logos { grid-template-columns: repeat(2, 1fr); } }
.featured-in img { height: 60px; width: 100%; object-fit: contain; }
/* platform row variant: name + count stacks instead of logo images */
.featured-in .platforms { display: flex; gap: 48px; flex-wrap: wrap; }
.featured-in .platforms .pf b { display: block; font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.featured-in .platforms .pf span { font-family: var(--mono); font-size: 14px; text-transform: uppercase; opacity: 0.6; }

/* ===== results ===== */
.results { padding-block: 80px; overflow-x: clip; }
.results .top { display: grid; grid-template-columns: 1fr 469px; gap: 48px; margin-bottom: 0; }
@media (max-width: 900px) { .results .top { grid-template-columns: 1fr; } }
.results .top h2 { font-size: var(--fs-xxl); line-height: 0.9; max-width: 672px; }
.results .top-left { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.results .t-rail { margin-top: 32px; }
.results .top > div:last-child { max-width: 469px; padding-top: 20px; }
.results .top p { color: var(--black); font-size: var(--fs-base); line-height: 1.5; }
.results .rail-nav { margin: 24px 0 52px; }
.t-rail { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; margin-right: calc(50% - 50vw); padding-right: clamp(16px, 2.7vw, 40px); user-select: none; -webkit-user-select: none; }
.t-rail::-webkit-scrollbar { display: none; }
.t-card { flex: 0 0 380px; }
@media (max-width: 640px) { .t-card { flex-basis: 300px; } }
.t-card .still { position: relative; aspect-ratio: 2 / 3; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px; }
.t-card .still::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0) 50%); }
.t-card .still .logo { position: absolute; bottom: 20px; left: 24px; width: 140px; z-index: 1; filter: brightness(0) invert(1); }
.t-card .still video, .t-card .still img.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.t-card .q { font-weight: 500; font-size: var(--fs-base); letter-spacing: normal; line-height: 1.25; }
.t-card .who { color: var(--black); opacity: 0.6; font-size: var(--fs-sm); line-height: 1.5; margin-top: 8px; }
.t-card .who b { font-weight: 400; }
.still-1 { background: linear-gradient(150deg, #4a4a4e, #232326 65%, #101012); }
.still-2 { background: linear-gradient(150deg, #274a2c, #12240f 70%, #0a1208); }
.still-3 { background: linear-gradient(150deg, #5a5a60, #2b2b30 60%, #101014); }
.still-4 { background: linear-gradient(150deg, #16324e, #0c1b2b 65%, #070d15); }
.still-5 { background: linear-gradient(150deg, #4e3a2a, #2b1f14 65%, #120c07); }
.still-6 { background: linear-gradient(150deg, #3a3a52, #1d1d30 65%, #0c0c15); }
.still-7 { background: linear-gradient(150deg, #52303f, #2b1720 65%, #140a0e); }

/* ===== unshakeable + upcoming ===== */
.unshake { text-align: center; padding-block: clamp(64px, 6.66vw, 99px) clamp(48px, 5.4vw, 80px); display: grid; justify-items: center; gap: 20px; }
.unshake h2 { font-size: var(--fs-xxxl); line-height: 1; }
.unshake p { max-width: 850px; font-size: var(--fs-base); line-height: 1.5; text-wrap: balance; }
.upcoming { padding-block: 0 72px; }
.upcoming .rail-head { padding-top: 0; padding-bottom: 44px; }
.upcoming .rail-head h2 { color: var(--black); font-size: 30px; }
/* 15px right inset = the next slide's peek gap */
.banner { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: min(53vw, 784px); display: flex; align-items: flex-end; justify-content: flex-end; color: var(--white); margin-right: 15px; }
.banner > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(345deg, rgba(74,26,134,0.72), rgba(160,80,200,0.15) 60%); }
.banner .content { position: relative; z-index: 1; width: min(928px, 100%); padding: clamp(24px, 2.7vw, 40px); display: grid; gap: 20px; justify-items: end; text-align: right; }
.banner h3 { font-size: var(--fs-xxxl); max-width: 768px; font-weight: 500; letter-spacing: -0.05em; line-height: 0.9; text-wrap: balance; }
.banner .sub { max-width: 470px; font-size: var(--fs-base); line-height: 1.5; }
.banner .row { display: flex; align-items: center; justify-content: flex-end; gap: 40px; flex-wrap: wrap; margin-top: 20px; }
.banner .meta b { display: block; font-size: var(--fs-base); font-weight: 500; }
.banner .meta span { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: -0.025em; text-transform: uppercase; opacity: 0.8; }

/* ===== coaching: full-bleed black band ===== */
.coaching { background: #000; padding-block: 80px; }
.coach-shell { display: grid; grid-template-columns: 469px 1fr; column-gap: 0; }
.coach-logo { position: relative; background: #ff9700; border-radius: var(--r-lg); aspect-ratio: 16 / 9; overflow: hidden; }
.coach-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coach-logo img.contain { object-fit: contain; padding: 48px; }
.coach-head { display: grid; align-items: center; padding-left: 40px; color: var(--white); }
/* heading paints above the (black-on-black) fillet circles so long lines never crop */
.coach-head h2 { font-size: var(--fs-xxl); line-height: 0.9; position: relative; z-index: 1; }
.coach-stats { padding: 40px 40px 0 40px; display: grid; gap: 20px; align-content: start; color: var(--white); }
.coach-stats .stats { margin-block: 20px 0; }
.coach-stats p { color: #f0f0f0; font-size: var(--fs-base); line-height: 1.5; max-width: 389px; }
.coach-stats .pill { justify-self: stretch; }
.coach-video-zone { position: relative; }
.coach-video-zone .fillet-sq { left: -40px; top: -40px; background: #ff9700; }
.coach-video-zone .fillet-c1 { left: 0; top: -80px; background: #000; border-radius: 50%; }
.coach-video-zone .fillet-c2 { left: -80px; top: 0; background: #000; border-radius: 50%; }
.coach-video { position: relative; overflow: hidden; background: linear-gradient(140deg, #7a5b32, #3c2e1c 55%, #17110b); display: grid; min-height: 528px; height: 100%; border-radius: var(--r-lg); }
.coach-video video, .coach-video img.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* connecting gradient: warm bloom from the corner shared with the orange logo card
   (echoes the reference's #7a5b32→#17110b media backdrop) */
.coach-video::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(140deg, rgba(255, 151, 0, 0.62) 0%, rgba(203, 118, 15, 0.34) 26%, rgba(90, 62, 25, 0.18) 48%, rgba(23, 17, 11, 0) 70%); pointer-events: none; }
.coach-video .pill { place-self: center; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; z-index: 2; }
.coach-video .pill:hover { background: rgba(0, 0, 0, 0.65); color: #fff; }
.coach-video .pill svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .coach-shell { grid-template-columns: 1fr; } .coach-video-zone .fillet, .hunger .fillet { display: none; } }

/* ============================================================================
   MOBILE POLISH — make every section + image fit cleanly on a phone.
   ========================================================================== */
@media (max-width: 900px) {
  /* Connecting gradients fuse adjacent cards at a shared DESKTOP corner; on stacked
     mobile tiles they just darken the image into a near-empty box — drop them. */
  .video-tile::before, .coach-video::before { display: none; }
  /* Coach video is 528px tall to match the desktop text column; on mobile that reads
     as a giant empty box — size it like a normal media tile. */
  .coach-video { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  /* Credentials: the mobile rule targeted .logos, but the markup is .platforms
     (48px-gap flex-wrap → sprawling gaps). Make it a tidy 2-column grid. */
  .featured-in .platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
  .coach-head { padding-left: 0; }
  .coach-stats { padding-inline: 0; }
}
@media (max-width: 640px) {
  /* Pillars: names are display-size (~40px) — far too large stacked on a phone. */
  .pillar-list a { font-size: var(--fs-lg); padding-block: 6px; }
  /* Results: tighten the single-column heading → intro gap. */
  .results .top { gap: 20px; }
  .results .top > div:last-child { padding-top: 0; }
  .results .rail-nav { margin: 16px 0 4px; }
  /* Trim the 80px desktop section rhythm so phone sections don't feel empty. */
  .pillars, .hunger, .results, .coaching { padding-block: 52px; }
  .featured-in { margin-top: 20px; padding-top: 28px; padding-bottom: 36px; }
}

/* ===== shop ===== */
.shop { padding-block: 80px; overflow-x: clip; }
.shop .head { text-align: center; display: grid; justify-items: center; gap: 20px; margin-bottom: 0; }
.shop .head h2 { font-size: var(--fs-xxxl); line-height: 1; max-width: 768px; }
.shop .head p { max-width: 768px; font-size: var(--fs-base); line-height: 1.5; }
.shop .head .kicker { margin-bottom: 15px; }
.shop .filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 80px; margin-bottom: 40px; }
.shop .filters .arrow-link { margin-left: auto; }
.prod-grid { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-right: calc(50% - 50vw); padding-right: 7px; user-select: none; -webkit-user-select: none; }
.prod-grid::-webkit-scrollbar { display: none; }
.prod { background: var(--off); border-radius: var(--r-lg); padding: 32px; display: grid; gap: 18px; align-content: space-between; min-height: 630px; flex: 0 0 350px; }
.prod .ph { display: grid; place-items: center; padding: 12px; }
.prod .ph img { max-height: 465px; width: auto; mix-blend-mode: multiply; }
.prod .foot { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.prod .nm { font-weight: 500; font-size: var(--fs-base); }
.prod .pr { font-size: var(--fs-sm); margin-top: 2px; }
.prod .pr .sale { color: var(--red); font-weight: 600; }
.prod .pr .was { color: var(--gray); text-decoration: line-through; margin-left: 6px; }
.prod .go { width: 40px; height: 40px; border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-items: center; flex: none; }
.shop .progress { height: 2px; background: #f2f2f2; margin-top: 40px; position: relative; overflow: hidden; }
/* progress fill: scaleX driven by the rail's scroll position (JS) */
.shop .progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #c2c2c2; transform: scaleX(0.0995); transform-origin: left; }

/* ===== podcast ===== */
.podcast { padding-block: 80px; }
.podcast .rail-head { padding-top: 0; padding-bottom: 40px; }
.podcast .rail-head h2 { color: var(--black); font-size: var(--fs-lg); }
.pod-panel { background: var(--white-1); border-radius: var(--r-lg); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding: 40px; }
@media (max-width: 950px) { .pod-panel { grid-template-columns: 1fr; } }
.pod-feature { display: grid; justify-items: center; text-align: center; gap: 32px; align-content: start; max-width: 448px; margin-inline: auto; width: 100%; padding: 16px; }
.pod-feature .art { width: 256px; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.pod-feature .art img { width: 100%; height: 100%; object-fit: cover; }
.pod-feature .cat { font-family: var(--mono); font-size: 14px; letter-spacing: normal; text-transform: uppercase; color: var(--black); font-weight: 400; margin-bottom: -24px; }
.pod-feature h3 { font-size: var(--fs-xl); letter-spacing: -0.05em; line-height: 1; max-width: 416px; font-weight: 500; }
.scrub { width: 100%; max-width: 416px; display: grid; gap: 8px; }
.scrub .bar { height: 6px; margin-block: 9px; background: rgba(0, 0, 0, 0.1); border-radius: 9999px; position: relative; }
.scrub .t { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 14px; color: var(--black); }
.transport { display: flex; align-items: center; justify-content: center; gap: 28px; color: #c4c4c4; }
.transport > svg:first-child, .transport > svg:last-child { width: 24px; height: 24px; }
.transport > svg:nth-child(2), .transport > svg:nth-child(4) { width: 40px; height: 40px; }
.transport .play { width: 72px; height: 72px; border-radius: 50%; background: var(--white); color: #c0c0c0; display: grid; place-items: center; transition: transform 0.2s ease; }
.transport .play:hover { transform: scale(1.05); }
.transport .play svg { width: 30px; height: 30px; }
.transport > svg { transition: transform 0.2s ease; }
.transport > svg:hover { transform: scale(1.05); }
.ep-list { display: grid; align-content: center; }
.ep { display: grid; grid-template-columns: 80px 1fr auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid #e3e3e3; }
.ep:last-child { border-bottom: 0; }
.ep img { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; }
.ep .cat { font-family: var(--mono); font-size: 14px; letter-spacing: normal; text-transform: uppercase; color: var(--gray); font-weight: 500; }
.ep h4 { font-size: var(--fs-base); font-weight: 400; letter-spacing: -0.05em; line-height: 1; margin-top: 4px; }
.ep .listen { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; letter-spacing: 0.025em; line-height: 1; background: var(--white-1); border-radius: 9999px; padding: 16px; transition: background-color 0.5s ease; }
.ep .listen:hover { background: var(--white-2); }
.ep .listen svg { width: 14px; height: 14px; }

/* ===== finale ===== */
.finale { position: relative; display: grid; place-items: center; padding-block: 224px; text-align: center; color: var(--white); overflow: hidden; background: var(--black); }
.finale > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finale::after { content: ""; position: absolute; inset: 0; background: radial-gradient(135% 92% at 50% 46%, rgba(0,0,0,0.5), rgba(0,0,0,0.22) 55%, rgba(0,0,0,0.05) 80%), linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%); }
.finale .inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; padding: 0 var(--pad); }
.finale h2 { max-width: 768px; font-size: var(--fs-xxl); line-height: 1; text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,0.62); }
.finale p { font-size: var(--fs-base); line-height: 1.5; text-shadow: 0 1px 14px rgba(0,0,0,0.62); }

/* ===== footer ===== */
.footer { background: var(--black); color: var(--white); }
.footer .cols { display: grid; grid-template-columns: 285px 285px 285px 1fr; gap: 0; padding-block: 80px; border-top: 1px solid #232325; }
@media (max-width: 1100px) { .footer .cols { grid-template-columns: 1fr 1fr; gap: 40px; } }
.footer ul { list-style: none; padding: 0; display: grid; gap: 16px; align-content: start; }
.footer ul a { font-weight: 500; font-size: 16px; line-height: 24px; transition: opacity 0.5s ease; }
.footer ul a:hover { opacity: 0.5; }
.f-info { display: grid; gap: 40px; align-content: start; justify-self: end; }
.f-info .hd { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: var(--fs-sm); line-height: 1.5; }
.f-info p { color: rgba(255, 255, 255, 0.4); font-size: var(--fs-sm); line-height: 1.5; max-width: 270px; margin-top: 8px; }
.legal { display: flex; align-items: start; gap: 28px; flex-wrap: wrap; margin-top: 0; border-top: 1px solid #232325; padding-block: 2px 36px; color: rgba(255, 255, 255, 0.4); font-size: var(--fs-sm); }
.legal .lang { display: inline-flex; align-items: center; gap: 6px; color: var(--white); font-weight: 500; font-size: 16px; min-width: 256px; }
.legal .legal-mid { display: grid; gap: 8px; }
.legal .legal-mid .lrow { display: flex; gap: 28px; flex-wrap: wrap; }
.legal .socials { margin-left: auto; margin-right: 30px; display: flex; gap: 12px; align-items: center; align-self: center; color: var(--white); }
.legal .socials svg { display: block; width: 24px; height: 24px; }
.legal .lang svg { width: 16px; height: 16px; }