/* Both custom-learning-paths.hbs and custom-learning-path-topic.hbs load this
   file and split their post title into two lines via a "<span class="title">"
   (e.g. "Marketing") followed by a coral italic span (e.g. "Learning Path").
   Force the first line onto its own row and add breathing room below it,
   since the tight h1 line-height otherwise crowds the two lines together. */
.banner-content h1 .title {
  display: block;
  margin-bottom: 16px;
}

/* Both learning-path banners use a large 96px/86px h1; the shared 16px margin
   (style.css .banner-content h1) reads as barely a line break and crowds the
   title into the excerpt. This file loads only on the two learning-path
   templates (each with a single hero banner) and after style.css, so widen the
   title-to-excerpt gap for both pages here. */
.banner-content h1 {
  margin-bottom: 32px;
}

/* The activity (week) page's own banner has nothing below its h1 any more -
   no excerpt, no full-title span (custom-learning-path-activity.hbs) - so the
   title-to-excerpt gap above just reads as dead space under the title here.
   Higher specificity than the shared rule above (three classes vs two) wins
   without needing !important. */
.learning-path-activity-banner .banner-content h1 {
  margin-bottom: 0;
  /* Desktop hero title, matching the certification microsite's own hero h1
     (assets/certification-microsite/css/learning-page.css) rather than the
     site-wide 96px/86px h1 - explicit design ask for this page. */
  font-size: 64px;
  line-height: 54px;
  letter-spacing: -0.04em;
}

/* "Week N" pill on the activity (week) page's own banner - filled in by
   populateWeekPosition() (learning-path-pathway.js) with this week's own
   1-based position among its parent Topic's weeks. Starts .hidden in the
   template so no placeholder flashes before that resolves. Same pill shape
   as .session-item .tag further down this file, just re-themed in white for
   this dark banner instead of that light-background component. */
.learning-path-activity-banner .week-tag {
  display: inline-block;
  /* .post-title (the pill's parent) is a column flex container with the
     default align-items: stretch, which otherwise stretches every child -
     including this one, regardless of its own "display: inline-block" - to
     the title block's full cross-axis width, turning the pill into a full-
     width bar. .learning-path-breadcrumb above opts out of the exact same
     stretch for the exact same reason (see its own comment). */
  align-self: flex-start;
  margin-top: 16px;
  padding: 8px 12px;
  border-radius: 40px;
  border: 1px solid var(--white);
  color: var(--white);
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
}

/* The shared .instructor-profile rule (style.css) sets width/height with no
   object-fit, so it defaults to "fill" and stretches/squashes the photo to
   that exact box. Scoped here rather than fixed in style.css since that
   file is shared by many other pages using .marketer-card. */
.marketers-list .marketer-card .instructor-profile {
  object-fit: cover;
}

/* Learning path topic page */

/* .bg-coral-gradient (style.css) renders Eclipse-3.svg at its intrinsic
   1055x435px size. The banner's content (breadcrumb + one/two-line title +
   a hero description that can run long) is often taller than that, so the
   glow was only covering the bottom of the section and leaving the rest
   plain black - confirmed against a real long "hero_short_description".
   Scale it to the section instead of its own pixel size, so it keeps
   covering the section at whatever height the content pushes it to.
   Scoped to plain .banner-container rather than .learning-path-banner (the
   pathway/activity banners' own extra class) since the collection banner
   never carries that second class but needs the exact same fix - this file
   only loads on the six learning-path/academy templates, so nothing else
   picks this up. */
.banner-container.bg-coral-gradient {
  background-size: cover;
}

/* The title block has no max-width, so by default it eats up almost all of
   the flex row and squeezes/wraps the subscribe button down to a sliver. */
.learning-path-banner .banner-content {
  align-items: flex-end;
}

.learning-path-banner .subscribe-cta {
  flex-shrink: 0;
  margin-left: 32px;
}

.learning-path-banner .subscribe-cta .btn {
  white-space: nowrap;
}

/* The shared .post-title h1 { order: -1 } rule (workshops.css) assumes h1 is
   the first thing in the title block. Here .learning-path-breadcrumb comes
   first in the markup and needs to stay above the title, so give it a lower
   order - same slot the old single .back-link arrow used to sit in. */
.learning-path-banner .learning-path-breadcrumb {
  order: -2;
}

/* Collection [> Pathway] > Current trail replacing that old back arrow -
   populated by populateSessionsBreadcrumb() (learning-path-sessions.js, the
   pathway page's own Collection segment) / populatePathwayBreadcrumb()
   (learning-path-pathway.js, the activity page's Collection AND Pathway
   segments). The Pathway segment only exists on the activity page and starts
   .hidden (global.css) until that resolves - see its template comment.

   Reuses the site's own .post-breadcrumb component (post.hbs's article
   byline breadcrumb - plain "a > a > a" trail, .active picking out the
   current one in coral) rather than a one-off design, just re-themed here
   for this dark hero banner instead of article's white background - none of
   style.css/faq.css/learning-paths.css/workshops-dashboard.css (the only
   stylesheets these two templates load) already define .post-breadcrumb, so
   there's nothing to override, only fill in. .learning-path-breadcrumb
   stays as this file's own hook for the layout concerns .post-breadcrumb
   itself doesn't have an opinion on (sitting above the h1, this being a
   dark background). */
.learning-path-breadcrumb.post-breadcrumb {
  /* Same typography new-design.css's own .post-breadcrumb sets for the
     article byline version. */
  font-family: Poppins, sans-serif !important;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0em;
  display: block;
  margin-bottom: 24px;
  /* The literal " > " separators in the template are bare text, not
     wrapped in their own element, so they only ever get a color from here -
     unset, they inherited style.css's default (near-black) body text color,
     invisible against this banner's own near-black background. Dimmer than
     the links themselves (rgba .7 below) so the trail still reads as
     link > link > link rather than every part looking equally clickable. */
  color: rgba(255, 255, 255, 0.4);
  /* .post-title (below) is a column flex container with the default
     align-items: stretch, which otherwise stretches this row's own outer box
     to the full width of the title block on its cross axis - opt it out of
     that so it hugs its own content instead of spanning full width. */
  align-self: flex-start;
}

.learning-path-breadcrumb.post-breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.learning-path-breadcrumb.post-breadcrumb a:hover,
.learning-path-breadcrumb.post-breadcrumb a:focus-visible {
  color: var(--white);
  text-decoration: underline;
}

.learning-path-breadcrumb.post-breadcrumb .active {
  color: var(--coral);
}

.session-item .session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.session-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Below-video week navigation: Back on the left, Next (or Complete on the
   last week) on the right. The first activity has no Back button at all
   (nothing to go back to - see learning-path-pathway.js, it's simply not
   rendered rather than shown disabled), so this aligns to the end instead
   of space-between and lets .btn-prev-week pull itself to the start when it
   IS present - either way Next/Complete stays put on the right. */
.session-item .week-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.session-item .week-nav .btn-prev-week {
  margin-right: auto;
}

.btn-week-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border: none;
  background: none;
  color: var(--black);
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
}

.btn-week-nav img {
  width: 16px;
  height: 16px;
}

/* Weeks show one at a time via plain show/hide (not a carousel library) -
   the Back/Next buttons and sidebar links move between them, and a week only
   unlocks once you've moved past the one before it. */
.session-item {
  display: none;
  /* Moving between items scrolls the new one to the top of the scrollport
     (scrollItemIntoView in learning-path-pathway.js) - leave enough air
     above it to clear #custom-float-navigation's own 80px .float-header
     (position: fixed at every width - it can cover the top of the
     scrolled-to item once open), plus a little breathing room past that,
     rather than butting the tag right against the edge. */
  scroll-margin-top: 104px;
}

.session-item.is-active {
  display: block;
}

/* .workshop-content is a flex child of .container.recap (workshops.css) with
   no defined width of its own - it shrinks to fit its content. The old
   vertical list never triggered this because block content doesn't demand a
   percentage width, but .weeks-swiper's width: 100% does, creating a
   circular sizing dependency that made both it and its slides balloon to a
   huge clamped value. Give it an explicit flex basis to break the cycle. */
.topic-content .workshop-content {
  flex: 1;
  min-width: 0;
}

.toc-link.is-locked,
.side-links .arrow-link.is-locked {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.toc-link.is-complete::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  background-image: url("/assets/img/check-coral.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* screen.css paints .is-active-link::before with --brandColor, which lands
     on this checkmark box and renders as a solid square behind it once an
     item is both complete and active. Keep the check on its own. */
  background-color: transparent;
  vertical-align: middle;
}

.complete-btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--black);
  background: none;
  color: var(--black);
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* Icon defaults to the "Complete pathway" variant (this is the pathway's
   last week - see learningPathWeekPositionPromise in
   learning-path-pathway.js): a checkmark, sat before .complete-btn-label in
   the markup so it renders on the left with no extra positioning needed.
   background-image + background-size: contain instead of content: url() -
   content: url() doesn't reliably resize via width/height (it just clips or
   repositions the intrinsic-size image inside the box in some browsers),
   whereas a sized background image scales properly. */
.complete-btn-icon {
  order: 0;
  display: inline-flex;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("/assets/img/check.svg");
  /* check.svg is 23x17 - keep that aspect ratio at this smaller size. */
  width: 15px;
  height: 11px;
}

.complete-btn.is-complete {
  border-color: var(--coral);
  color: var(--coral);
}

.complete-btn.is-complete .complete-btn-icon {
  background-image: url("/assets/img/check-coral.svg");
  /* check-coral.svg is a 16x16 square, its natural size. */
  width: 16px;
  height: 16px;
}

/* "Start next week" variant (this week isn't the pathway's last): the same
   right-pointing arrow .btn-next-week uses, moved after the label via flex
   order instead of reordering the markup itself. */
.complete-btn.icon-right .complete-btn-icon {
  order: 1;
  background-image: url("/assets/img/arrow_forward.svg");
  width: 16px;
  height: 16px;
}

.complete-btn.icon-right.is-complete .complete-btn-icon {
  background-image: url("/assets/img/arrow_forward_coral.svg");
}

/* Coral hover, matching the outline "Start"/"Start your course" buttons
   elsewhere on these pages (.btn-primary-outline:hover, style.css) - this
   button already transitions border-color/color (base rule above) but never
   had a :hover rule to actually trigger it. Mirrors the .is-complete state's
   own colours/icons rather than inventing a new treatment. */
.complete-btn:hover {
  border-color: var(--coral);
  color: var(--coral);
}

.complete-btn:hover .complete-btn-icon {
  background-image: url("/assets/img/check-coral.svg");
}

.complete-btn.icon-right:hover .complete-btn-icon {
  background-image: url("/assets/img/arrow_forward_coral.svg");
}

/* Learning paths intro (mirrors .marketing-labs from workshops.css) */
.learning-paths .learning-paths-container {
  max-width: 1192px;
  margin: auto;
  padding: 80px 0;
}

.learning-paths h2 {
  letter-spacing: -3px;
  margin-top: 0;
  margin-bottom: 24px;
}

.learning-paths .learning-paths-container .content p {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}

/* Learning path topic page: tighten the gap and add a divider between the
   "About the learning path" intro and the weeks/Contents section below. */
.topic-about.learning-paths .learning-paths-container {
  padding-bottom: 40px;
  border-bottom: 1px solid #d4d4d4;
}

.topic-content.container.recap {
  padding-top: 40px !important;
}

.learning-paths .learning-paths-container .content {
  display: flex;
  justify-content: space-between;
  gap: 93px;
}

/* Ghost's editor strips custom classes from content lists, so style
   plain <ul> output the same as .ticked-list (check-bullet-point.svg). */
.learning-paths .learning-paths-container .content ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.learning-paths .learning-paths-container .content ul li {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.learning-paths .learning-paths-container .content ul li::before {
  content: url(/assets/img/check-bullet-point.svg);
  margin-right: 12px;
  height: 24px;
  flex-shrink: 0;
}

.learning-paths .learning-paths-container .content div:first-of-type {
  width: 513px;
}

.learning-paths .learning-paths-container .content div:last-of-type {
  width: 586px;
}

.learning-path-card {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border-radius: 12px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.learning-path-card .completed-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 40px;
  background: var(--white);
  color: var(--black);
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.learning-path-card .completed-badge::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("/assets/img/check-coral.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.learning-path-card .card-image {
  position: relative;
  height: 174px;
  background: var(--coral-gradient);
}

.learning-path-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.learning-path-card .card-image .card-image-heading {
  position: absolute;
  left: 24px;
  bottom: 20px;
  right: 24px;
  top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  font-family: Poppins, sans-serif;
}

.learning-path-card .card-image .card-image-heading .line-1 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  display: block;
}

.learning-path-card .card-image .card-image-heading .line-2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  display: block;
}

.learning-path-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 32px;
}

.learning-path-card .card-body h5 {
  margin: 0 0 8px;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

.learning-path-card .card-body p {
  margin: 0 0 24px;
  /* Was --dark-grey (#aeaeae), which is off-palette and only ~2:1 against the
     card background. Palette black at 70% keeps the copy secondary to the
     card title while clearing WCAG AA. */
  color: rgba(9, 16, 15, 0.7);
}

.learning-path-card .card-body .btn-group {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.learning-path-card .card-body .btn-group .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Week cards on the learning path session page (learning-path-topic.js -
   buildLearningPathWeekCardHtml) pull from a Weekly Topic's free-form
   "Description" field rather than a Topic's short curated "About" blurb, so
   - unlike the Topic cards below, which are left to vary in height - clamp
   it to keep a long week's card from towering over its neighbours. Scoped to
   this page's own grid id so the collection page's Topic cards are untouched. */
#learningPathTopicData .learning-path-card .card-body p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Topic cards grid (rows from the topics view, see
   assets/js/learning-paths.js fetchLearningPathTopics) */
.learning-path-topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

/* Topic cards show the full "About" copy (no line-clamp), so they
   legitimately vary in height. Grid's default row-stretch (align-items:
   stretch, the base rule's default) takes care of matching every card in a
   row to its tallest neighbour - and only that row, so a long topic doesn't
   stretch the rows below it. The card is already a flex column with
   .card-body flex: 1 and .btn-group margin-top: auto, so the extra height
   lands between the copy and the button and the "Start your course"
   buttons line up across the row. */
#learningPathTopicsWrapper {
  align-items: stretch;
}

/* The week cards on the session page (custom-learning-path-pathway.hbs,
   which reuses the grid above) are the same case: their copy is one trimmed
   excerpt of a fixed length (LEARNING_PATH_SESSION_CARD_EXCERPT_LENGTH in
   assets/js/learning-path-sessions.js), so heights differ by a line or two
   at most - close enough that ragged card bottoms read as misalignment
   rather than variation. */
#learningPathSessionsWrapper {
  align-items: stretch;
}

.learning-paths-loader {
  margin-top: 40px;
  text-align: center;
  font-family: Poppins, sans-serif;
}

/* Learning paths page (banner, marketers section, ratings, about-membership,
   instructor modal) - self-contained, doesn't depend on workshops.css (that
   file is shared with the workshops recap page; this page has its own copy
   of the rules it needs so the two stay fully decoupled). */
.banner-content h1 .title:after {
  display: none;
}

/* The shared .marketers-section rule (style.css) paints the eclipse-left.svg
   decal behind its black background - a deliberate accent on pages like
   about-us/careers where that section is always shown. On the learning-path
   and academy collection pages it's optional (stays hidden until
   populateExperts() finds Experts data - see learning-path-sections.js) and
   was never meant to carry that decorative glow here. Scoped to the ID
   (shared by both custom-learning-path-collection.hbs and
   custom-academy-collection.hbs) rather than .marketers-section itself so
   every other page's use of that class keeps its decal untouched. */
#learningPathMarketersSection {
  background-image: none;
}

/* .partners-ratings (style.css) has no top padding and no max-width column,
   unlike every other section on this page (#about-membership, .learning-paths,
   .marketers-section all use a 1192px column via an inner max-width/margin:
   auto wrapper) - without this its content sat flush against the top of its
   black band and didn't line up with the columns directly above/below it. */
.partners-ratings {
  padding-top: 80px;
}

.partners-ratings > p,
.partners-ratings > .logos {
  max-width: 1192px;
  margin-left: auto;
  margin-right: auto;
}

/* populatePartnersRatings() (learning-path-sections.js) renders each "ratings"
   entry as the same logo + .rating-stars row + score the homepage writes by
   hand in sales.hbs, so style.css's shared .partners-ratings rules already
   size and space all of it - there are deliberately no widths or heights for
   it here.
   The one thing that does need saying: .logo-image is a column flex box, so a
   direct child with "width: auto" stretches to the width of the row of stars
   below it. On the homepage that silently distorts all three logos (a G2 mark
   that's square at 150x150 renders 247x40 there, six times too wide) - it
   only looks right on a phone, where a "margin: auto" happens to cancel the
   stretch. These logos come from the CMS at whatever aspect an editor
   uploads, so they hold their shape instead. */
.partners-ratings .logo-image .rating-logo {
  align-self: center;
}

/* !important on max-width/padding here (and on every responsive variant of
   this rule below) because dashboard.css's global ".container" reset
   (max-width: 100% !important; padding: unset !important) is loaded for
   every logged-in member and otherwise wins over this more specific
   selector - !important is the only thing that beats another !important
   regardless of specificity. */
#about-membership .container {
  max-width: 1192px !important;
  margin: auto;
  padding: 80px 0 !important;
}

#about-membership h5 {
  margin-top: 0;
  margin-bottom: 0;
}

#about-membership h2 {
  margin-bottom: 0;
}

table.about-membership-table tr td:first-of-type {
  padding-left: 0 !important;
  padding-right: 24px;
}

table.about-membership-table tr td:nth-child(2) {
  padding-right: 40px;
}

table.about-membership-table {
  width: 991px;
}

table.about-membership-table small {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}

table.about-membership-table tr {
  position: relative;
  border-bottom: 1px solid #d4d4d4;
}

table.about-membership-table tr:after {
  content: " ";
  width: 100%;
  border-bottom: 1px solid #d4d4d4;
  position: absolute;
  bottom: 0;
  left: 0;
}

table.about-membership-table tr:not(:first-of-type) p {
  margin-top: 24px;
}

/* Live Session Benefit CTA Text can be any length - keep the button on one
   line so its .btn padding (style.css) and height never grow with it. */
#about-membership .btn-group a {
  white-space: nowrap;
}

#about-membership .col-content {
  position: relative;
}

#about-membership .col-content:after {
  content: url("/assets/img/curly-arrow-left-2.svg");
  position: absolute;
  top: 5%;
  right: -80px;
}

.about-membership-section > .container > .col-group > .col > p {
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 32px;
}

.about-membership-table p {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}

/* Instructor modal - see toggleModal()/selectLearningPathCardData() in
   assets/js/learning-paths.js. ".workshops-modal" is added by JS for the
   "learning path" variant of the modal (as opposed to the plain marketer
   bio variant). */
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: flex-start;
  /* Above default.hbs's own sticky ".mobile-nav" header, which
     dashboard-responsive.css gives a z-index of 999999 for a signed-in
     member's mobile view - a plain 9999 here sat well under that, so on
     mobile the sticky header painted over the top of this modal (title,
     close button) instead of the modal covering the page like it does
     everywhere else. Matches the z-index partials/sliding-banner-static.hbs
     already uses to clear the exact same header. */
  z-index: 1000000;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  padding-bottom: 80px;
  /* Without this, the padding on this rule is added on top of "width: 100%"
     / "height: 100%", so the fixed overlay is wider and taller than the
     viewport it is supposed to cover. At mobile widths (where the block at
     the bottom of this file adds side padding too) that pushed the card
     itself past the right edge of the screen - an even gutter was written on
     both sides but only the left one was ever visible, and the page picked
     up a horizontal scrollbar it has nothing to scroll to. */
  box-sizing: border-box;
  /* This div is fixed, but it's still a DOM descendant of
     .dashboard-container-wrapper (default.hbs wraps {{{block "content"}}} in
     it) - that wrapper is the element with real overflow-y: auto on mobile
     (dashboard-responsive.css forces plain "overflow: hidden" on body at
     that width, so body was never the scroller toggleModal() needed to lock
     in the first place - see the JS). Without this, once a touch-scroll
     inside the modal hits its own top/bottom it "chains" up the DOM to that
     ancestor and scrolls the dashboard visibly behind the fixed overlay.
     Contain it here so the modal's own scroll never leaks out, regardless of
     which element toggleModal() does or doesn't manage to lock. */
  overscroll-behavior: contain;
}

/* dashboard.css (default.hbs loads it for a signed-in member, before this
   file) has:
     .modal:not(#brochureEmbedModal):not(#authorModal):not(#sessionModal)
       { z-index: 9999 }
   A :not() takes the specificity of its argument, so those three ids beat
   the plain ".modal" above and its 1000000 never actually applied - the
   modal really rendered at 9999 (measured). At mobile widths
   dashboard-responsive.css puts the sticky ".mobile-nav" on z-index 999999,
   so the site header painted straight over the top of the modal: the
   "Your instructor," line and the close button both disappeared behind it,
   with no way to dismiss the modal. Restated with our own id in front of the
   same :not() chain so it clearly out-specifies that rule rather than
   weakening a rule the rest of the dashboard depends on. */
#modal.modal:not(#brochureEmbedModal):not(#authorModal):not(#sessionModal) {
  z-index: 1000000;
}

/* That z-index only actually decides anything because toggleModal()
   (learning-path-sections.js) re-homes this modal onto <body> before showing
   it. Declared in the template it sits inside <main id="site-main">, which
   screen.css makes a stacking context ("position: relative; z-index: 999") -
   and from in there no z-index, however large, can lift it above the
   dashboard's sticky header outside that <main>. See the fuller note on the
   move itself in toggleModal(). */

/* default.hbs loads Bootstrap 2's modal stylesheet from a CDN for every
   signed-in member (bootstrap-modal 2.2.6), and inside its own
   "@media (max-width: 979px)" it has:
     .modal { top: 1%; right: 1%; left: 1%; bottom: auto;
              width: auto !important; height: auto !important;
              margin: 0 !important; padding: 0 !important }
   That sheet is written for Bootstrap's own markup, where .modal IS the
   panel; here .modal is the full-screen backdrop and .modal-content is the
   panel, so those declarations do real damage below 979px:
     - width/height: auto collapse the fixed overlay onto the size of the
       card, so the "rgba(0, 0, 0, 0.8)" above only ever painted behind the
       card itself - the page around it was never dimmed at all, and the
       modal read as a bare panel dropped into the page rather than an
       overlay above it.
     - padding: 0 drops the gutter the block at the bottom of this file sets,
       leaving the card flush against the edges of the screen.
     - top/right/left: 1% leave the panel offset rather than centred.
   Nothing declared normally can win against !important no matter how
   specific, so this has to answer in kind. Kept to an id-qualified selector
   and to just the properties that sheet overreaches on, so it stays clearly
   narrower than the rule it is undoing. */
#modal.modal {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  right: auto !important;
}

.workshop-info {
  display: none;
}

.workshop-info p {
  display: block;
}

.workshops-modal .workshop-info {
  display: block;
  grid-column: 1 / -1;
  border-bottom: 1px solid #aeaeae;
  padding-bottom: 24px;
}

/* No instructor section below it (toggled in toggleModal() when the card has
   no host), so there's nothing left for this divider to separate. */
.workshops-modal .workshop-info.no-host {
  border-bottom: none;
  padding-bottom: 0;
}

.workshop-info .learning-path-learn-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workshop-info .learning-path-learn-list li {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.workshop-info .learning-path-learn-list li::before {
  content: url(/assets/img/check-bullet-point.svg);
  margin-right: 12px;
  height: 24px;
  flex-shrink: 0;
}

.workshop-info #recapButton {
  margin-top: 24px;
}

/* Learning path FAQ section (#learningPathFaqs) - faq.css covers colors and
   the accordion button/content behaviour, this fills in the two-column
   layout (title + arrow beside the accordion list) used by other pages'
   .faq-section, e.g. assets/css/membership.css. */
#learningPathFaqs.faq-section {
  padding: 80px 0;
}

#learningPathFaqs .faq-content {
  max-width: 1192px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

#learningPathFaqs .faq-content .accordion {
  width: 100%;
  max-width: 889px;
}

/* faq.css's h2:after arrow uses a large fixed "bottom: -280px" offset, sized
   for FAQ columns tall enough to push the section's own bottom padding well
   past it. This section's accordion is short (2-3 items), so that fixed
   offset lands past our padding-bottom into whatever section follows -
   flow the arrow below the heading instead so it scales with content. */
#learningPathFaqs .faq-content h2:after {
  position: static;
  display: block;
  margin-top: 24px;
}

@media (max-width: 1024px) {
  #learningPathFaqs.faq-section {
    padding: 80px 56px;
  }
}

@media (max-width: 820px) {
  #learningPathFaqs.faq-section {
    padding: 56px 32px;
  }
  #learningPathFaqs .faq-content {
    flex-direction: column;
    gap: 40px;
  }
}

.workshops-modal h3:after {
  content: "";
  position: absolute;
  margin-left: -0.5em;
  width: 0.5em;
  background-color: white;
}

.workshops-modal .instructor-name {
  display: none;
}

.workshops-modal .workshop-info .btn {
  display: inline-block;
}

.workshops-modal .author-left-panel {
  grid-column: 1 / 2;
}

.workshops-modal .author-right-panel {
  grid-column: 2 / 3;
}

.workshops-modal .modal-content {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  column-gap: 24px;
  row-gap: 40px;
  top: 10%;
  /* Matches the cap on .modal-content, re-budgeted for this variant's
     smaller 10% top offset. */
  max-height: calc(90vh - 40px);
}

.workshops-modal .author-left-panel h3 {
  font-family: IvyJournal !important;
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.04em;
  color: var(--coral);
  display: none;
}

.modal .instructor-title-container {
  display: none;
}

.workshops-modal .instructor-title-container {
  display: block;
  grid-column: 1 / -1;
  margin-bottom: -40px;
}

.workshops-modal .instructor-title-container h3 {
  font-family: IvyJournal !important;
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.04em;
  color: var(--coral);
}

.modal p {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}

.modal.modal-show {
  animation: fadeIn 0.1s ease-in-out forwards;
}

.modal.modal-hide {
  animation: fadeOut 0.1s ease-in-out 0.1s forwards;
}

.modal-content {
  position: relative;
  top: 15%;
  display: flex;
  gap: 102px;
  background-color: #fff;
  /* Without this, "width: 100%" resolves against the full-viewport backdrop
     and the 124px side padding is added on top of the 1192px max-width, so
     the panel renders edge to edge with no gap either side.
     custom-learning-path-collection.hbs already patches this for logged-out
     visitors ("box-sizing: border-box" in its inline block); members get no
     such override, so it belongs here instead. */
  box-sizing: border-box;
  padding: 80px 124px;
  border-radius: 12px;
  width: 100%;
  max-width: 1192px;
  /* The instructor block (heading + profile image + bio, shown only for cards
     that have a host - see toggleModal() in assets/js/learning-paths.js) adds
     ~460px, which pushes the panel past the bottom of a laptop viewport.
     Anything beyond the cap scrolls inside the panel rather than off-screen -
     for logged-out visitors the backdrop is "overflow: hidden", so overflow
     there is clipped with no way to scroll to it at all. "top" is a
     relative-position nudge (the box still starts at the top of the
     backdrop), so it has to come out of the budget here: 15vh for the offset,
     40px to keep the panel clear of the bottom edge. */
  max-height: calc(85vh - 40px);
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  margin-bottom: 80px;
}

.modal-content .profile-picture {
  margin-bottom: 24px;
  display: block;
  width: 323px;
  /* Fixed instead of auto: reserves the photo's box before it has anything
     to size itself off of, so the shimmer below has something to shimmer and
     the panel doesn't jump once the real photo loads. object-fit keeps a
     photo of any aspect ratio filling that box instead of stretching. */
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  margin-top: 6px;
}

.modal-content .company-logo {
  height: 48px;
  /* Same reasoning as .profile-picture's height above, but for width - a
     logo has no set src to size off of until toggleModal() sets one.
     object-fit: contain (not cover) since a logo shouldn't get cropped. */
  width: 160px;
  object-fit: contain;
}

/* toggleModal() (learning-path-sections.js) adds "is-loading" while a host's
   photo/logo is fetching, keyed to this image's own load/error event rather
   than a timer - so a fast connection barely shows it and a slow one keeps
   shimmering for exactly as long as it actually takes. Replaces the old
   static default-image src (a random marketer photo / the Microsoft logo)
   this theme used to show for every host regardless of who they were. */
.modal-content .profile-picture.is-loading,
.modal-content .company-logo.is-loading {
  background: linear-gradient(90deg, #e6e6e6 25%, #f2f2f2 37%, #e6e6e6 63%);
  background-size: 400% 100%;
  animation: modal-image-shimmer 1.4s ease infinite;
}

@keyframes modal-image-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.modal-content h3,
.modal-content h5 {
  margin-top: 0;
}

.modal.modal-show .modal-content {
  animation: fadeInDown 0.3s ease-in-out forwards;
}

.modal.modal-hide .modal-content {
  animation: fadeOutUp 0.2s ease-in-out forwards;
}

.modal-close {
  position: absolute;
  top: 29px;
  right: 27px;
  cursor: pointer;
}

.modal-close:before {
  content: url("/assets/img/close.svg");
}

/* Learning path modal */
#learningPathModal .modal-content {
  flex-direction: column;
  max-width: 720px;
  gap: 24px;
}

#learningPathModal .learning-path-modal-image {
  width: 100%;
  border-radius: 12px;
}

#learningPathModal .learning-path-modal-tag {
  margin-bottom: 8px;
}

@media (min-width: 601px) and (max-width: 1200px) {
  .learning-paths .learning-paths-container {
    padding: 80px 56px;
  }
  .learning-paths .learning-paths-container .content {
    gap: 36px;
  }
  .learning-path-topics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .banner-content {
    padding: 80px 56px;
    flex-direction: column;
    align-items: center;
  }
  .banner-content h1 .title {
    font-size: 56px;
    font-weight: 400;
    line-height: 58px;
    letter-spacing: -0.04em;
  }
  .banner-content h1 .text-italic {
    font-size: 56px;
    line-height: 52px;
  }
  .post-title p {
    width: unset;
  }
  /* Centred rather than spread, matching how the homepage lays these same
     tiles out across this range (homepage.css, "@media (min-width: 501px) and
     (max-width: 1200px)" - a homepage stylesheet these templates don't load,
     so it has to be restated here). Replaces a "gap: unset" (ie 0) that used
     to leave the tiles touching once they were narrow enough to fill the row.
     24px rather than the 48px the homepage uses there, because this section
     also spends 56px a side on padding the homepage doesn't, to line its
     column up with the sections above and below. At 48px those two together
     pull each tile just under the width of its own row of five stars around
     900px, and the stars wrap onto a second line while the homepage's stay on
     one - matching how it ends up looking matters more here than matching the
     number. Below ~850px both pages wrap them alike whatever this is set to. */
  .partners-ratings .logos {
    gap: 24px;
    justify-content: center;
  }
  .partners-ratings {
    padding-top: 80px;
    padding-left: 56px;
    padding-right: 56px;
    padding-bottom: 56px;
  }
  .bg-coral-gradient {
    background-size: cover;
  }
  #about-membership .container {
    padding: 80px 56px !important;
  }
  table.about-membership-table {
    width: 100%;
  }
  #about-membership .col-content:after {
    display: none;
  }
  .marketers-list {
    grid-template-columns: 49% 49%;
  }
  .marketers-section {
    padding: 80px 56px;
  }
  /* 114px of horizontal padding on a 95%-wide panel barely left room for the
     fixed 323px-wide .profile-picture (base rule, unchanged below 1200px) at
     the narrow end of this range - at 601px wide that's 571px minus 228px of
     padding, leaving under 350px for a photo already 323px wide. Brought down
     to something proportional to the rest of this file's spacing scale. */
  .modal-content {
    gap: 40px;
    top: 5%;
    flex-direction: column;
    align-items: flex-start;
  }
  /* Width and padding have to be restated at two-class specificity to get
     past dashboard.css's ".modal .modal-content { width: 100%; padding:
     40px }" - see the fuller note on the matching rule in the max-width:
     600px block below. Without it the card ran the full width of the
     backdrop with no gutter either side, and kept an even 40px of padding
     rather than the 56/40 asked for here. */
  .modal .modal-content {
    width: 95%;
    padding: 56px 40px;
  }
  .workshops-modal .author-left-panel {
    grid-column: 1 / -1;
  }
  .workshops-modal .author-right-panel {
    grid-column: 1 / -1;
  }
  .marketers-list .marketer-card .instructor-profile {
    height: unset;
  }
  /* Below 1200px the instructor section stacks into a single column (above)
     instead of sitting beside the photo, which regularly pushes the modal
     past .modal-content's own max-height cap - .modal-content is the element
     that scrolls (it carries the overflow: auto, not .modal), so scrolling
     down to read it carries this "position: absolute" close button off with
     it, leaving no way back to it short of scrolling back up. Pinning it to
     the viewport instead keeps it reachable at any scroll position. The
     white circle is necessary, not decorative: fixed here it now sits over
     the dark .modal backdrop rather than always over the white card, and the
     icon's near-black fill (assets/img/close.svg) is otherwise invisible
     against that backdrop. */
  .modal-close {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 1;
  }

  /* Activity hero - the generic ".banner-content" padding above (80px 56px)
     and the site-wide h1 (96px/86px, style.css) are both too large for this
     page's own hero at tablet - restyle the title to the h2 scale (56/58/
     -4%, style.css's own h2) and tighten padding to an even 56px per side. */
  .learning-path-activity-banner .banner-content {
    padding: 56px;
  }

  .learning-path-activity-banner .banner-content h1 {
    font-size: 56px;
    line-height: 58px;
    letter-spacing: -0.04em;
  }

  /* Pathway hero - same padding tightening as the activity banner above, plus
     the plain (non ".title"-span) h1 here has no tablet override at all
     elsewhere in this file, so it was still rendering at the site-wide
     96px/86px and wrapping onto two lines with far too much line-height
     between them. Scoped off the activity banner (":not") so this doesn't
     also touch that page's own h1 rule just above. */
  .learning-path-banner:not(.learning-path-activity-banner) .banner-content {
    padding: 56px;
  }

  .learning-path-banner:not(.learning-path-activity-banner) .banner-content h1 {
    font-size: 56px;
    line-height: 58px;
    letter-spacing: -0.04em;
  }

  /* .post-title itself shrink-wraps to its widest child here (".banner-content"
     switches to "align-items: center" at this width, base rule above) even
     though ".post-title p" already drops its own 80% cap (existing rule further
     up this block) - the paragraph can only ever fill ITS OWN parent's box, and
     that parent was never actually full width. Give the whole title block that
     width instead of just the one child. */
  .learning-path-banner:not(.learning-path-activity-banner) .post-title {
    width: 100%;
  }

  /* About this week/path - matches the pattern above: tighten the generic
     80px/56px ".learning-paths-container" padding (base rule) to an even
     56px for these two pages' own intro section. Collection's identical
     markup is untouched since neither ".topic-about" nor ".pathway-about" is
     present there. */
  .topic-about.learning-paths .learning-paths-container,
  .pathway-about.learning-paths .learning-paths-container {
    padding: 56px;
  }
}

/* About this week/path (activity + pathway pages only - ".topic-about"/
   ".pathway-about" keep the collection page's identical ".learning-paths"
   markup out of all of this). Tablet and mobile want the exact same
   treatment here, so this is one combined range rather than duplicating it
   across the 601-1200px block above and the max-width: 600px block below -
   same reasoning as the .left-sidebar dropdown further down this file. */
@media (max-width: 1200px) {
  /* Push the paragraph below the heading instead of the desktop/tablet
     side-by-side columns (base ".content" rule) - "just like mobile", which
     already did this for every page sharing this markup; tablet did not
     until now. The fixed 513px/586px column widths (base rule) also have no
     override below 1200px other than the existing max-width: 600px one, so
     without this a tablet-width viewport was forcing a ~1100px-wide row into
     a much narrower column and overflowing. */
  .topic-about .content,
  .pathway-about .content {
    flex-direction: column;
    gap: 24px;
  }

  .topic-about .content div:first-of-type,
  .topic-about .content div:last-of-type,
  .pathway-about .content div:first-of-type,
  .pathway-about .content div:last-of-type {
    width: 100%;
  }

  /* The heading's own 24px margin-bottom (".learning-paths h2", base rule)
     is meant for the desktop column layout, where it's the only spacing in
     play - stacked here, it would stack on TOP of ".content"'s own 24px gap
     above and double the requested spacing. Zeroed just in this stacked
     context rather than at the shared rule, which the collection page's
     own (untouched) tablet layout still relies on. */
  .topic-about h2,
  .pathway-about h2 {
    margin-bottom: 0;
  }

  /* Downsize the heading to the h3 scale (42px/40px/-4%, style.css's own h3) -
     this section's copy is meant to read a step below the hero title, not at
     the desktop-only ".learning-paths h2" treatment's near-hero size. */
  .topic-about h2,
  .pathway-about h2 {
    font-size: 42px;
    line-height: 40px;
    letter-spacing: -0.04em;
  }

  /* Trim the section's own bottom padding (40px, base ".topic-about"/
     ".pathway-about" rule) down to the requested 24px gap before the next
     section, independent of the top/sides padding the 601-1200px block above
     sets to 56px (or mobile's own pre-existing 56px/32px, max-width: 600px
     block below) - same-specificity selector, later in the file, so only
     this one side is touched. */
  .topic-about.learning-paths .learning-paths-container,
  .pathway-about.learning-paths .learning-paths-container {
    padding-bottom: 24px;
  }

  /* Pathway/academy-pathway only: tighten the gap to the week-card grid below
     (40px, base ".learning-path-topics-grid" rule, shared with the
     collection page's own topic grid) to the requested 24px. */
  .pathway-about .learning-path-topics-grid {
    margin-top: 24px;
  }

  /* Activity topic-content (left-sidebar Contents dropdown + accordion) -
     tablet and mobile want identical spacing here too. */
  #tocToggle {
    margin-top: 24px;
  }

  .session-header-left {
    margin-top: 24px;
    margin-bottom: 24px;
  }
}

/* The tail end of the range the homepage spaces these tiles 48px apart over
   ("@media (min-width: 501px) and (max-width: 1200px)" in homepage.css, a
   stylesheet these templates don't load - the 601-1200px block above restates
   the rest of it). Deliberately stops at 501px rather than running to 0:
   below that, style.css turns .logos into a column 56px apart on both pages,
   and a gap set here would override that, this file loading after it. */
@media (min-width: 501px) and (max-width: 600px) {
  .partners-ratings .logos {
    gap: 48px;
  }
}

/* This file only defines the "#about-membership .container" and
   ".learning-paths-container" 80px 56px padding override (above) up to
   max-width: 1200px, so without this they'd render with zero side padding
   between 1201-1500px while every other section on the page still gets
   32px from custom-learning-paths.hbs's own fallback rule. */
@media (min-width: 1201px) and (max-width: 1500px) {
  #about-membership .container {
    padding: 80px 56px !important;
  }
  .learning-paths .learning-paths-container {
    padding: 80px 56px;
  }
}

@media (max-width: 600px) {
  .learning-paths .learning-paths-container {
    padding: 56px 32px;
  }
  .learning-paths .learning-paths-container .content {
    flex-direction: column;
    gap: 24px;
  }
  .learning-paths .learning-paths-container .content div:first-of-type,
  .learning-paths .learning-paths-container .content div:last-of-type {
    width: 100%;
  }
  .learning-path-card .card-body .btn-group {
    flex-direction: column;
  }
  .learning-path-topics-grid {
    grid-template-columns: 1fr;
  }
  /* Was "200% 100%" - a fixed stretch that only happened to cover a short
     banner. A long hero description (see the base .banner-container.bg-
     coral-gradient rule above) grows the section taller than that fixed
     ratio covers, leaving plain black past the glow's edge on mobile the
     same way the un-scaled intrinsic image size used to on desktop. "cover"
     re-covers the section at whatever height it actually renders. */
  .banner-container.bg-coral-gradient {
    background-size: cover;
  }
  .post-title p {
    width: unset;
  }
  .banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Pathway hero only (see the matching 601-1200px rule above for the full
     reasoning) - the plain h1 here has no mobile override elsewhere either,
     so below 600px it was still the site-wide 96px/86px, and ".post-title"
     still shrink-wraps to that oversized title's own width instead of
     filling the padded banner. */
  .learning-path-banner:not(.learning-path-activity-banner) .banner-content h1 {
    font-size: 56px;
    line-height: 58px;
    letter-spacing: -0.04em;
  }
  .learning-path-banner:not(.learning-path-activity-banner) .post-title {
    width: 100%;
  }
  .marketers-section {
    padding: 56px 32px;
  }
  .marketers-section .title-with-cta h2 {
    margin-bottom: 24px;
  }
  .marketers-section .title-with-cta {
    flex-direction: column;
  }
  .marketers-section .btn {
    align-self: flex-start;
  }
  .marketers-list {
    grid-template-columns: repeat(1, 1fr);
  }
  .marketers-section .marketers-content h2 {
    font-family: Poppins, sans-serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -0.04em;
  }
  .partners-ratings {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  /* Both of the .partners-ratings .logos declarations that used to be here
     are gone rather than updated. The "gap: 24px" moved to its own 501-600px
     block below, so that below 501px style.css can stack these tiles into a
     column 56px apart the way it does on the homepage - a gap set in here
     would have overridden that, this file being the later stylesheet. And
     ".partners-ratings .logos img { width: 88px }" never applied to anything:
     style.css's ".partners-ratings .logos div img" outranks it, and every
     image in this section sits inside a .logo-image div. (The homepage has a
     dead 182px rule of its own in the same spot, which is why its logos
     measure 122px wide on a phone rather than 182px.) */
  #about-membership .container {
    padding: 56px 32px !important;
  }
  .about-membership-section .col-group {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }
  .about-membership-section h2 {
    font-family: Poppins, sans-serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -0.02em;
    display: inline-block;
  }
  section:not(.page-banner) h2 span {
    line-height: 40px !important;
    margin-bottom: -10px;
  }
  table.about-membership-table {
    width: 100%;
  }
  table.about-membership-table tbody {
    display: flex;
    flex-direction: column;
  }
  table.about-membership-table tr {
    display: grid;
    grid-template-columns: 10% 90%;
    margin-bottom: 24px;
    align-items: center;
    row-gap: 16px;
  }
  table.about-membership-table h5 {
    margin-bottom: 0;
  }
  #about-membership .col-content:after {
    display: none;
  }
  table.about-membership-table tr td:last-of-type {
    grid-column: span 2;
  }
  table tr td:not(:first-of-type) {
    padding-right: 0 !important;
  }
  /* Matches the "Learn from top" marketer-card modal's reference behavior
     (custom-live-series-collection-labs.hbs's <dialog>: "h-full ... p-8" on
     its own mobile breakpoint) - a near-full-height sheet with a small even
     gutter to the screen edge, instead of a smaller card floating at the
     base rule's "top: 15%" with dead space above/below it on a screen this
     size. Only targets bare .modal-content (the marketer-card/plain-bio
     variant - toggleModal() removes "workshops-modal" for that click path),
     not .workshops-modal .modal-content (a different, grid-based variant
     used elsewhere with its own "top"/max-height, higher-specificity and
     therefore untouched by this). Giving .modal-content the height (rather
     than leaving it to size off its own content, capped by max-height) is
     also what makes it the only thing that scrolls: .modal's "overflow:
     auto" (base rule) only has something to do when .modal-content doesn't
     already fill it. */
  /* A floating card on a visible overlay, like the reference - NOT a
     full-bleed sheet. The scrolling belongs to this overlay rather than the
     card: the card then sizes to its own content (no height/max-height), so
     it keeps its rounded corners and an even gutter of dimmed page around
     it, and a card taller than the screen scrolls as a whole instead of
     scrolling its own insides while pinned edge to edge. The base rule's
     "top: 15%" is a relative-position nudge that would push the card down
     past its own gutter here, so it's zeroed and the spacing comes from
     this padding instead. */
  /* dashboard-responsive.css (default.hbs loads it for a signed-in member)
     has, inside its own max-width: 600px block:
       .modal:not(#brochureEmbedModal):not(#authorModal) { top: 40% !important }
     A :not() takes the specificity of its argument, so those two id
     arguments make that selector two ids + a class, and it carries
     !important on top - every "top" this file set on .modal lost to it and
     the fixed overlay started 40% down the viewport (measured: 1299px of
     3248px). That is what left the page visible and undimmed above the
     modal, with the card and its close button pushed down out of reach. The
     rule is aimed at the dashboard's own centred modals, so rather than
     weaken it globally, this mirrors it with our own id in front to clearly
     out-specify it - learning-paths.css only loads on the six learning-path
     and academy templates, so no other page's modals are affected. */
  #modal.modal:not(#brochureEmbedModal):not(#authorModal) {
    top: 0 !important;
  }
  /* 32px of gutter on all four sides, matching the reference's "p-8" on the
     element that centres its panel. !important only to answer the Bootstrap
     CDN sheet's own "padding: 0 !important" - see the note on #modal.modal
     further up this file. */
  .modal {
    align-items: flex-start;
  }
  #modal.modal {
    padding: 32px !important;
  }
  .modal-content {
    top: 0;
    flex-direction: column;
    max-width: 100%;
    height: auto;
    max-height: none;
    /* The overlay above is the scroller now, so this must not clip or
       scroll its own overflow (base rule sets "overflow: auto"). */
    overflow: visible;
    margin-bottom: 0;
    /* The reference stacks its two columns with "gap-5" at this width. */
    gap: 20px;
  }
  /* dashboard.css has ".modal .modal-content { width: 100%; padding: 40px }"
     - two classes against the single-class ".modal-content" above, so it won
     regardless of which file loads last, and the padding written in this
     block never reached the card (measured: an even 40px on all four sides,
     not the 48/32/32 asked for here). Width has to come along for the same
     reason: dashboard.css resolves it against the overlay, which was 32px
     wider than the viewport before the box-sizing fix on the base rule.
     Restated at matching specificity so both actually apply.
     Top padding clears the close button sitting inside the card below (20px
     offset + its own 24px box), so the first heading doesn't start
     underneath it - the reference pairs its own "pt-12" with a "top-5"
     button the same way. */
  .modal .modal-content {
    width: 100%;
    padding: 48px 32px 32px;
  }
  /* Square and anchored to the top of the photo, like the reference's
     "aspect-square object-cover object-top" - the base rule's fixed 220px
     height is a landscape crop of a portrait headshot, which on a phone
     (where the photo is now full card width rather than 323px) cut the top
     of the subject's head off. */
  .modal-content .profile-picture {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-position: top;
  }
  /* The base rule reserves a fixed 160px box so the loading shimmer has
     something to fill before the logo's src is set; "contain" then centres
     a narrower logo inside it, leaving it floating away from the left edge
     while everything above and below it is flush left. */
  .modal-content .company-logo {
    display: block;
    object-position: left;
  }
  /* "!text-[24px] !font-[400]" on the reference's own job title - the one
     line of the instructor block that is set apart from the bio underneath
     it, rather than sharing the base ".modal p" 16px/300 body size with it. */
  .modal-content .instructor-job_title {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
  }
  /* toggleModal() adds "workshops-modal" for a learning-path card's modal
     (the marketer-bio variant keeps bare .modal-content), and
     ".workshops-modal .modal-content" is two classes against the one above -
     so it won on specificity and the sheet layout above never reached the
     variant this page opens most. It stayed the base rule's two-column grid
     pinned at "top: 10%" under a 90vh cap (measured at 375px wide: a 0px
     track beside a 1428px one, offset 325px from the top). Restated here at
     matching specificity. Kept as a grid rather than switched to flex so the
     grid-based rules written for this variant still work as intended - the
     panels' own "grid-column: 1 / -1" below, the base rule's 40px row-gap,
     and .instructor-title-container's -40px margin that deliberately cancels
     that gap - only collapsed to a single column so they stack. */
  .workshops-modal .modal-content {
    grid-template-columns: 1fr;
    top: 0;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .workshops-modal .author-left-panel {
    grid-column: 1 / -1;
  }
  .workshops-modal .author-right-panel {
    grid-column: 1 / -1;
  }
  /* Sits inside the card at its top-right, exactly like the reference's own
     X - not pinned to the viewport. The 601-1200px block above pins its copy
     because there the card scrolls its own insides, which would carry an
     absolute button off-screen with no way back; here the whole card scrolls
     within the overlay instead, so scrolling up always brings this back into
     reach and it can stay with the card it closes. Sized and placed to match
     the reference's own X ("w-6 h-6 absolute top-5 right-5"): no circle or
     border behind it, which were only there to lift a button floating over
     the dark backdrop - close.svg's fill is near-black and reads on the
     card's own background directly.
     The box is 44px rather than the icon's own 24px so the tap target stays
     at the usual minimum on a touch screen; the extra 10px a side is
     transparent, and the offset is pulled in by the same 10px so the icon
     inside it still lands on the reference's 20px inset. */
  .modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    z-index: 1;
  }
  br {
    display: none;
  }
  .marketers-list .marketer-card .instructor-logo {
    height: 40px !important;
  }
  #learningPathFaqs .faq-content h2:after {
    display: none;
  }
}

/* Learning path topic page - self-contained, doesn't depend on workshops.css
   (that file is shared with the workshops recap page; this page has its own
   copy of the rules it needs so the two stay fully decoupled). */

#site-main {
  margin: 0;
  max-width: unset;
}

.post-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  transition: opacity 0.25s ease;
}

/* Starts hidden - the markup's own {{title}}/{{excerpt}} are just Ghost's
   raw post fields (often literally this page's slug, not real copy - see
   the template's own comment on {{title}}), a placeholder every one of
   these pages immediately overwrites with the real heading/description
   from the Alliance CMS API (populatePathwayBanner in
   learning-path-pathway.js, populateSessionsBanner in
   learning-path-sessions.js, populateLearningPathBanner in
   learning-paths.js). Opacity rather than display/visibility: the title
   swap happens synchronously right before the loading class is removed, so
   there's no layout jump to mask, just a fade-in once the real copy is
   already in place. Each of those three functions removes this class on
   success AND on failure (a fetch error/timeout still has to reveal
   something rather than leave the hero blank forever). */
.post-title.is-loading {
  opacity: 0;
}

.post-title h1 {
  order: -1;
}

.post-title p {
  width: 80%;
}

/* !important on max-width/padding (and on the 601-1200px variant below) for
   the same reason as #about-membership .container above: dashboard.css's
   global ".container" reset (max-width: 100% !important; padding: unset
   !important) is loaded for every logged-in member and otherwise wins over
   this more specific selector. The <=600px variant already had !important
   here from the original workshops.css rule - this just extends the same
   fix to the base/tablet rules that were missing it. */
.container.recap {
  padding: 80px 0 !important;
  max-width: 1192px !important;
  margin: auto;
  display: flex;
  gap: 100px;
}

.container.recap.center {
  justify-content: center;
}

/* justify-content: center above doesn't actually center anything on its own:
   its one flex child in this variant, .workshop-content, is flex: 1 (set
   below for the member layout, where it needs to fill the row beside
   .left-sidebar) - with no sidebar to share the row with, flex: 1 still
   grows it to the full 1192px row width, leaving no free space along
   .container.recap's own main axis to center within. .workshop-content is
   itself a column flex container (below), so its OWN cross axis is
   horizontal - centering there is what actually centers the fixed-width
   .post-upgrade-cta card (style.css) inside whatever width .workshop-content
   ends up being, regardless of that width. */
.container.recap.center .workshop-content {
  align-items: center;
}

/* Was ".left-siderbar" (typo) in workshops.css, so this never actually
   applied there - the sidebar never had a real width. Fixed here. */
.left-sidebar {
  width: 202.5px;
}

/* screen.css (sitewide, loaded ahead of this file by default.hbs) has a bare
   ".toc { display: none }" turned back on by exactly one media query,
   "@media (min-width: 1270px) { .toc { display: block } }" - written for the
   old tocbot-rendered article TOC, which only ever existed on a wide screen.
   This page builds its own .toc-link list into that same element (see
   fetchLearningPathPathway in learning-path-pathway.js), so it has to render
   wherever .left-sidebar does, and the <=1200px block at the bottom of this
   file turned that sidebar into a collapsible Contents dropdown rather than
   hiding it outright. Without this the dropdown opened onto nothing at all -
   the links were in the DOM the whole time, just display: none - and the
   1201-1269px band showed an empty desktop sidebar for the same reason.
   >=1270px is unaffected: it was already display: block there. */
.toc {
  display: block;
  left: 0;
  top: 0;
}

.toc:before {
  content: "";
}

.toc-container {
  margin: 0;
}

.workshop-content {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.sticky-container {
  top: 0;
  position: sticky;
}

.session-item .tag {
  padding: 8px 12px;
  border-radius: 40px;
  border: 1px solid var(--black);
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  display: inline-block;
}

.session-item h2 {
  font-family: Poppins, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.05em;
}

.session-item p {
  margin-bottom: 41px;
}

.session-item .video-container {
  margin-bottom: 32px;
}

/* "Embedded link" that isn't Wistia - either an image (shown inline) or any
   other URL (shown as a type-labelled card) - see renderWeekMedia() in
   learning-path-pathway.js. */
.session-item .video-container img {
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  display: block;
}

/* Mini card for a PDF/MS Office/Google Doc/other "Embedded link" - full
   width, short height, same rounded-square icon treatment (and coral hover)
   as .bibliography-container a below, just with a border around the whole
   row instead of just the icon so it reads as its own card. */
.session-item .video-container .week-media-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #d4d4d4;
  border-radius: 12px;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.session-item .video-container .week-media-link-card:hover {
  border-color: var(--coral);
  color: var(--coral);
  text-decoration: none;
}

.session-item .video-container .week-media-link-card-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

.session-item .video-container .week-media-link-card:hover .week-media-link-card-icon {
  border-color: var(--coral);
}

.session-item .bibliography-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.session-item .bibliography-container h5 {
  margin-bottom: 0;
}

.session-item .bibliography-container a {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  color: var(--black);
  text-decoration: none;
}

/* Rounded-square icon box. Its border is grey by default and coral on hover;
   the SVG inside is drawn with currentColor, so it tracks the link's text
   colour (black -> coral on hover) for free. */
.session-item .bibliography-container .resource-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

.session-item .bibliography-container a:hover .resource-icon {
  border-color: var(--coral);
}

/* v1's inline SVG icons (RESOURCE_ICONS in learning-path-pathway.js) carry
   their own width/height="20" attributes, shared with the non-Resources
   .week-media-link-card-icon use of the same map - override just here so
   Resources icons alone size up to 28x28 in their unchanged 40x40 box. A
   plain CSS rule beats an SVG's own presentational width/height attribute. */
.session-item .bibliography-container .resource-icon svg {
  width: 28px;
  height: 28px;
}

/* v2's resource icon is an uploaded image/SVG (an <img>), not the inline SVGs
   above - same 28x28 size, just via width/height instead of the svg rule. It
   won't pick up currentColor on hover the way an inline SVG does, but the box
   border around it still does (rule above). */
.session-item .bibliography-container .resource-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.session-item .bibliography-container a:hover {
  text-decoration: none;
  color: var(--coral);
}

/* Wistia's embed script sets its own inline padding-top (the old
   percentage padding-bottom/top hack for responsive video, e.g.
   "padding-top: 56.25%") on this exact class. Since we size it with
   aspect-ratio instead, that inline padding just adds extra height on top
   of the aspect-ratio box - the large empty gap below the video. Override
   it back to 0 (needs !important since only !important in a stylesheet
   beats a plain inline style). */
.wistia_responsive_padding {
  aspect-ratio: 16 / 9;
  padding: 0 !important;
}

.wistia_responsive_padding .w-chrome {
  border-radius: 12px !important;
}

/* An "Embedded link" that's a Youtube video (v2's "embedding_type" of
   "Youtube", or a sniffed youtube.com/youtu.be URL on v1) - see
   isYoutubeLink()/createYoutubeDom() in learning-path-pathway.js. Same 16:9
   treatment as the Wistia wrapper above, sized with aspect-ratio instead of
   the old padding-bottom-percentage hack since there's no third-party script
   here setting its own inline padding to fight. */
.youtube-responsive-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
}

.youtube-responsive-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* An "Embedded link" that's a Typeform survey/exam - see isTypeformLink() and
   createTypeformDom() in learning-path-pathway.js. Unlike the 16:9 video box
   above, a form's natural height varies with its question count, so this
   gets a tall height instead of an aspect ratio. Sized off the viewport (with
   a floor for short viewports) so the form reads as a big, near-full-height
   card rather than a small box on the page. Positioned so its child (below)
   can be pinned to fill it. */
.session-item .typeform-embed {
  position: relative;
  height: 85vh;
  min-height: 800px;
  border-radius: 12px;
  overflow: hidden;
}

/* window.tf.createWidget() only inserts the "tf-v1-widget" wrapper div and
   its iframe at their own default size (Typeform's SDK doesn't stretch them
   to fill an arbitrary container) - pin both to fill .typeform-embed above.
   !important guards against Typeform's own stylesheet, which loads after
   ours and could otherwise win a tie on specificity. */
.session-item .typeform-embed > div {
  position: absolute;
  inset: 0;
}

.session-item .typeform-embed iframe {
  width: 100% !important;
  height: 100% !important;
}

@media (min-width: 601px) and (max-width: 1200px) {
  .session-item .typeform-embed {
    height: 80vh;
    min-height: 700px;
  }
}

@media (max-width: 600px) {
  .session-item .typeform-embed {
    height: 75vh;
    min-height: 600px;
  }
}

/* Safety net: no element in a week's slide should ever be able to balloon
   past a sane bound, regardless of what upstream layout/measurement causes
   it (this is what was rendering as a many-thousand-pixel-tall black box). */
.session-item,
.session-item .video-container,
.wistia_responsive_padding,
.youtube-responsive-wrapper,
.session-item .typeform-embed {
  max-width: 100%;
}

a.toc-link {
  display: block;
  padding-left: 12px;
  border-left: 2px solid #d4d4d4;
  /* Pull the link left by its border + padding (2px + 12px) so the link text
     lines up with the "Contents" label above, leaving the vertical rail to
     sit in the left margin. (Sidebar is desktop-only.) */
  margin-left: -9px;
  margin-bottom: 12px;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 20px;
  /* Palette black at 60% rather than an off-palette grey. Kept below full
     strength so the active item (solid --black + weight 500) still reads as
     the distinct one. */
  color: rgba(9, 16, 15, 0.6);
}

a.toc-link:hover {
  color: var(--black) !important;
}

a.is-active-link {
  border-left-color: var(--coral);
  color: var(--black) !important;
  font-weight: 500;
}

/* Shared by every template that loads this stylesheet (the learning-path/
   academy collection, pathway, and activity pages) - collection pages just
   never render the markup, so this only ever paints on pathway/activity, as
   a back-to-parent link plus this page's own title (see #floatBackLink in
   the templates). A previous commit added an unscoped
   "#custom-float-navigation { display: none }" below (since removed) meant
   for one specific page's dropdown that really did have nowhere to jump to -
   but the ID selector caught every page sharing this file, silently killing
   the activity page's own "Jump to" list (since replaced by the simpler
   back/title bar here). Don't reintroduce an unconditional hide here; scope
   it to a real ancestor/page class instead if a future page genuinely needs
   it suppressed. */
/* position: fixed at every width, not sticky - sticky was tried for desktop
   (confining it to #site-main via the box its own containing block gives it
   for free) but proved unreliable in practice, so this goes back to the
   simple, always-works positioning instead. "Should only display inside
   #site-main" (no covering whatever site chrome - a signed-in member's own
   dashboard nav/sidebar - sits outside it) is handled in JS instead: both
   learning-path-pathway.js and learning-path-sections.js measure #site-main's
   own getBoundingClientRect() and set this element's left/width inline
   styles to match it, re-measured on resize - see syncFloatNavToSiteMain()
   in either file. left/width aren't set here in CSS since JS owns them. */
.custom-float-navigation {
  position: fixed;
  top: 0;
  z-index: 99999999999;
  width: 100%;
}

/* Back link + page title - replaced the old "Jump to" dropdown (that one's
   #openDropdown/.float-dropdown/.side-links markup no longer exists in the
   pathway/activity templates). The activity page's own per-activity
   contents list is the same .toc-container markup at every width now - a
   plain always-open sidebar on desktop, a collapsible dropdown below 1200px
   (see the .left-sidebar rules further down).

   box-sizing: border-box is explicit here rather than relied on from the
   sitewide reset (assets/css/global.css's own universal selector) - that
   reset only ever reaches the page through assets/built/global.css
   (default.hbs loads the built copy, not the source file), and
   assets/built is gitignored, regenerated by gulp build from every file
   under assets/css. This file (learning-paths.css) is loaded straight from
   source (see the template's own link tag, not a built one), so if a
   deploy ever serves stale/missing assets/built/global.css, height: 80px +
   padding: 24px would render as a 128px content-box box instead of 80px.
   Declaring it here keeps this bar's height correct regardless of whether
   that global reset made it into the build. */
.custom-float-navigation .float-header {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--black);
  height: 80px;
  padding: 24px;
  box-sizing: border-box;
}

.float-header .float-back-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.float-header .float-page-title {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* {{img_url @site.icon size="xs"}} (the template) serves whatever the Ghost
   instance actually has configured for its resized icon breakpoints - on an
   install without one set up, that falls back to the full, uncropped upload
   (confirmed: it rendered at native size, easily 10x this, overlapping the
   content below the bar). The .float-header .float-page-icon class rule
   should be enough on its own, but this bar is meant to hold its size no
   matter what the icon file turns out to be - an id selector plus
   width/height HTML attributes (belt-and-suspenders: the attributes reserve
   the right box before CSS even parses, the id wins any specificity fight a
   plain class could lose) makes that true regardless of the icon's real
   dimensions or of anything else on the page that happens to also target
   img/.float-page-icon. */
#floatPageIcon.float-page-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: cover;
}

.float-header .float-page-title-text {
  color: var(--white);
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tablet/mobile floating bar (#custom-float-navigation-mobile) ──
   A second, separate element in the templates rather than a media query on
   the desktop bar above, because the two want genuinely different boxes, not
   different sizes of the same one:
     - The desktop bar is pinned to #site-main's own left/width and to
       .dashboard-container-wrapper's top by syncFloatNavToSiteMain(), so it
       reads as confined to the main content column. This one is full-width
       and offset by a completely different measurement (see below), so
       sharing an element meant those two JS syncs fighting over the same
       inline left/width/top on every resize across the breakpoint.
     - Only one of the two is ever displayed, so the hidden one is out of the
       accessibility tree - no duplicate "Back" link or page title is exposed
       at any width.
   Keeping them separate is what "don't affect desktop" actually buys: every
   rule here is inside the max-width block below and scoped to this class, so
   nothing in it can reach .custom-float-navigation.

   The bug this fixes: below 1025px the dashboard hides .dashboard-header and
   shows .mobile-nav instead (the white strip with the site logo and the
   hamburger) as a sticky top: 0 bar - z-index 9996 at tablet, 999999 at
   mobile (dashboard-responsive.css). The old bar had no rules at these
   widths at all, so it kept its desktop "position: fixed; top: 0" plus a
   z-index of 99999999999 and painted straight over that strip once it slid
   in, leaving a signed-in member with no logo and no way to open the menu.
   This one sits *below* .mobile-nav instead: syncMobileFloatNav() (both
   learning-path-pathway.js and learning-path-sections.js) measures that
   strip's live bottom edge and writes it here as "top", so a HubSpot banner
   or a taller/shorter nav moves this with it rather than needing a hardcoded
   height here. */
.custom-float-navigation-mobile {
  display: none;
}

/* 1024px, not the 1200px the .left-sidebar dropdown further down uses: this
   breakpoint isn't a design choice, it's where the dashboard itself swaps
   .dashboard-header out for .mobile-nav ("@media (min-width: 600px) and
   (max-width: 1024px)" in dashboard-responsive.css). Above it the desktop
   bar's own assumptions hold; at or below it they don't. */
@media (max-width: 1024px) {
  .custom-float-navigation {
    display: none;
  }

  .custom-float-navigation-mobile {
    display: block;
    position: fixed;
    /* Overwritten inline by syncMobileFloatNav() with .mobile-nav's own
       bottom edge. 0 is the fallback for a page with no .mobile-nav at all
       (not reachable today - these templates redirect an outsider to /signup
       - but it keeps the bar usable rather than mispositioned if that ever
       changes). */
    top: 0;
    left: 0;
    width: 100%;
    /* Deliberately below .mobile-nav (9996 here, 999999 at <=600px) and
       below .sidenav.opened (9998), so neither the site header nor the
       opened mobile menu is ever covered - and above #site-main's own
       "position: relative; z-index: 999" (screen.css), so page content still
       scrolls underneath this. The desktop bar's 99999999999 is exactly what
       made this overlap a bug; don't copy it here. */
    z-index: 9995;
  }

  /* Shorter and tighter than the desktop .float-header's 80px/24px - that
     height eats a real share of a phone viewport when it's stacked under
     .mobile-nav's own ~76px rather than replacing it. */
  .custom-float-navigation-mobile .float-header-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--black);
    height: 56px;
    padding: 12px 16px;
    /* Same reason as the desktop .float-header's own box-sizing - see the
       note there about assets/built/global.css possibly not reaching the
       page. Without it this renders 80px tall instead of 56px. */
    box-sizing: border-box;
  }

  .custom-float-navigation-mobile .float-back-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* Touch target: the 16px chevron on its own is well under the 44px
       minimum, and negative margins keep the visual gap above unchanged
       while growing the tappable box. */
    padding: 14px;
    margin: -14px -14px -14px -8px;
  }

  .custom-float-navigation-mobile .float-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  /* Same belt-and-suspenders as #floatPageIcon on desktop - an id selector
     plus the template's width/height attributes, so an un-resized Ghost site
     icon can't render at its native size and blow this bar's height out. */
  #floatPageIconMobile.float-page-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: cover;
  }

  .custom-float-navigation-mobile .float-page-title-text {
    color: var(--white);
    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The 104px above clears the 80px desktop bar; this one is 56px and sits
     flush with the top of .dashboard-container-wrapper (the scrollport these
     items scroll inside), so a scrolled-to week needs less clearance here -
     but it still needs some, or it lands underneath this bar. */
  .session-item {
    scroll-margin-top: 80px;
  }
}

.side-links h5 {
  color: var(--white);
  border-bottom: 1px solid var(--black);
  padding-bottom: 16px;
  margin-bottom: 24px;
  margin-top: 0;
}

.side-links .arrow-link {
  color: var(--white);
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  text-decoration: none;
  display: block;
}

.side-links .arrow-link:after {
  content: url(/assets/img/arrow-right-coral.svg);
  float: right;
  filter: invert(78%) sepia(9%) saturate(17%) hue-rotate(358deg) brightness(88%) contrast(91%);
  margin-right: 8px;
}

.side-links .arrow-link:hover:after {
  filter: none;
  margin-right: 0;
}

.side-links .arrow-link:not(:last-of-type) {
  margin-bottom: 16px;
  justify-content: space-between;
}

.post-content .post-upgrade-cta {
  width: 600px;
}

@media (min-width: 601px) and (max-width: 1200px) {
  .container.recap {
    padding: 80px 56px !important;
  }
}

@media (max-width: 600px) {
  .container.recap {
    padding: 56px 32px !important;
  }
  .post-content .post-upgrade-cta {
    width: 100%;
  }
}

/* Activity page's per-activity Contents list (.left-sidebar - the pathway
   page's own week cards have no equivalent sidebar, so nothing else on this
   stylesheet uses these classes). Used to just be display: none below
   1200px, with no mobile equivalent at all - it's the same .toc/.toc-link
   markup at every width now, just collapsed into a dropdown instead of
   hidden outright once .left-sidebar-overview stops being static text
   (media query further down). */
.left-sidebar-overview {
  /* Reset default <button> chrome now that this is a real button (it used
     to be a plain <span>) rather than change its desktop look. */
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  cursor: default;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--black);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid #aeaeae;
}

/* Desktop never needs this chevron - the list below is always open there. */
.toc-toggle-icon {
  display: none;
  flex-shrink: 0;
  color: var(--black);
  transition: transform 0.2s ease;
}

/* <=1200px is exactly the range .left-sidebar used to be display: none across
   (both the 601-1200px and <=600px blocks above) - turn it into a collapsible
   dropdown for that same range instead, wired open/closed by the "is-open"
   class learning-path-pathway.js toggles on #tocToggle click. */
@media (max-width: 1200px) {
  /* .container.recap is display: flex with a 100px gap unconditionally -
     fine when .left-sidebar was display: none (.workshop-content was the
     only flex item), but with the sidebar visible again as a dropdown, a
     100px-wide row would squeeze .workshop-content instead of stacking the
     two. gap: 0 since .left-sidebar's own margin-bottom above already
     spaces it from the content below. */
  .container.recap {
    flex-direction: column;
    gap: 0;
  }

  .left-sidebar {
    display: block;
    width: 100%;
    margin-bottom: 32px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
  }

  /* Was position: sticky (tracks scroll on the desktop column layout) - as a
     block-level dropdown above the content instead, there's nothing for it
     to stick to. */
  .sticky-container {
    position: static;
    top: auto;
  }

  .left-sidebar-overview {
    cursor: pointer;
    padding: 16px;
    margin-bottom: 0;
    border-bottom: none;
  }

  .toc-toggle-icon {
    display: inline-flex;
  }

  .left-sidebar.is-open .toc-toggle-icon {
    transform: rotate(180deg);
  }

  .toc-container {
    display: none;
    margin: 0 16px 16px;
    padding-top: 16px;
    border-top: 1px solid #d4d4d4;
    /* screen.css makes this "position: sticky; top: 0" for its own
       parked-beside-the-article layout. Nothing to stick to as a dropdown
       panel that scrolls with the content above it, and leaving it sticky
       lets the open list hang over the activity below as the page scrolls. */
    position: static;
  }

  .left-sidebar.is-open .toc-container {
    display: block;
  }

  /* The same screen.css rule that hid .toc outright (see the note on the .toc
     rule further up) also shapes it as a floating panel parked to the LEFT of
     a wide article: position: absolute, left: -260px, its own min/max-width,
     white background and padding. Absolute takes it out of flow, so
     .toc-container would collapse to zero height and the dropdown would still
     open onto nothing even now that display is sorted out. Put the list back
     in normal flow and drop the panel chrome - the dropdown's own border and
     padding above are the container here. */
  .toc {
    position: static;
    min-width: 0;
    max-width: none;
    padding: 0;
    background: transparent;
  }

  /* Desktop pulls each link left by its own border + padding so the link text
     lines up with the "Contents" label and the rail sits out in the sidebar's
     left margin (see a.toc-link's own comment - it predates this dropdown and
     says as much). In here the label is inset by the trigger's 16px padding
     instead, so that negative margin would drag the rail out past the
     dropdown's left edge. Sit the rail flush with the container instead, which
     reads as a normal indented sub-list under the trigger. */
  a.toc-link {
    margin-left: 0;
  }

  /* Downsize each activity's own heading (".session-item h2", base rule
     above - 32px/40px, the h4 scale) to the h5 scale (24px/32px/-4%,
     style.css's own h5) at this width. Kept down here rather than with the
     rest of this page's tablet/mobile spacing tweaks (601-1200px block and
     its combined max-width: 1200px block, further up this file): both of
     those sit BEFORE the base ".session-item h2" rule in source order, and
     at equal specificity ("h2" scoped by one class either way) the later
     declaration wins regardless of which media query actually matches -
     placing the override here, after the base rule, is what makes it
     actually apply. */
  .session-item h2 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.04em;
  }
}