/* BrainON Publish V41.6 — title/marker polish.
   Page-specific only. Existing roadmap copy, links, SEO and surrounding sections stay. */
.publish-roadmap-page {
  overflow: hidden;
  padding-bottom: 55px;
}

.publish-roadmap-shell {
  position: relative;
}

.publish-roadmap-hero {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}

.publish-roadmap-hero .inner-page-title {
  margin-bottom: 28px;
}

/* Notes-style two-line title: the subtitle remains part of the H1, so the
   decorative red divider sits beneath the complete title block. */
.publish-roadmap-heading-sub {
  display: block;
  margin: 5px 0 0;
  padding: 0;
  color: #222;
  font-family: PlayfairIta;
  font-size: 29px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

.publish-roadmap-lead {
  max-width: 920px;
  margin: 0 auto 32px;
  padding: 0;
  color: #222;
  font-family: AvenirReg, Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.72;
  text-align: left;
}

.publish-roadmap-main {
  position: relative;
  display: flow-root;
  isolation: isolate;
  margin-top: 8px;
  color: #f5f7fa;
  background: #222;
}

/* Extend only this section's background to the page edges. The content keeps
   the same site container and widths; this layer has no layout or scroll box. */
.publish-roadmap-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #222;
  pointer-events: none;
}

.publish-roadmap-title,
.publish-roadmap-after h2 {
  color: #121212;
  font-family: PlayfairSmBold;
  font-size: 3.2em;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.35;
  margin: 44px 0 36px;
  padding-bottom: 20px;
  text-align: center;
  background: url("/img/small_rect_red.png") no-repeat center bottom;
}

/* Lower headings retain their existing dark text on grey. */
.publish-roadmap-main .publish-roadmap-title {
  color: #f5f7fa;
}

.publish-roadmap-title .itlc,
.publish-roadmap-after h2 .itlc {
  font-family: PlayfairIta;
}

.publish-roadmap-layout {
  display: grid;
  grid-template-columns: minmax(300px, 40%) minmax(0, 60%);
  gap: 30px;
  align-items: start;
  position: relative;
}

.publish-roadmap-visual {
  position: relative;
  align-self: start;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  pointer-events: none;
}

/* Keep the original artwork and the one existing entrance animation.
   Desktop sizing below is separate from the animated inner element. */
.inner-publish .publish-roadmap-man {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  height: auto;
  margin: 0;
}

.inner-publish .publish-roadmap-man img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  opacity: 1;
}

.publish-roadmap-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.publish-roadmap-steps {
  margin: 0;
  padding: 0 0 34px 12px !important;
}

.publish-roadmap-steps li {
  padding: 15px 0 8px 42px;
  color: #f5f7fa;
  font-family: AvenirReg, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.62;
}

.publish-roadmap-steps li::before {
  top: 20px;
}

.publish-roadmap-steps li::after {
  top: 42px;
  bottom: -24px;
}

.publish-roadmap-steps strong {
  font-family: AvenirMed, AvenirReg, Arial, Helvetica, sans-serif;
  font-weight: 700;
}

/* Contextual links stay the same size and typeface as the roadmap copy.
   Colour alone identifies them as links, matching the original BrainON list. */
.publish-roadmap-steps a {
  color: #cb3340;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}

.publish-roadmap-steps a:hover,
.publish-roadmap-steps a:focus-visible {
  color: #ff707d;
}

/* The original pale-red halo was designed for a light background. On #222,
   keep the marker red and use a soft white halo for hover/keyboard focus. */
.publish-roadmap-steps li:hover::before,
.publish-roadmap-steps li:focus-within::before {
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, .18),
    0 0 16px 9px rgba(255, 255, 255, .18);
}

.publish-roadmap-after {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.publish-roadmap-after p {
  margin: 0 auto;
  padding: 0 0 16px;
  color: #111;
  font-family: AvenirReg, Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  text-align: left;
}

.publish-roadmap-first-book {
  padding-top: 4px;
}

.publish-roadmap-ready {
  padding-bottom: 8px;
}

.publish-roadmap-ready > p {
  max-width: 760px;
  text-align: center;
}

.publish-roadmap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 6px 0 8px;
}

/* Native BrainON CTA appearance + the Avenir optical baseline correction
   already proven on the homepage. */
.publish-roadmap-actions a.btn-default.btn4,
.publish-roadmap-actions a.btn-default.btn5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 50px;
  min-height: 50px;
  margin: 10px 0;
  padding: 0 25px;
  line-height: 1.2;
  white-space: nowrap;
}

.publish-roadmap-actions .bn-btn-label {
  display: inline-block;
  font-weight: 400;
  transform: translateY(2px);
}

/* Both ancestors used to trap native sticky. Override them ONLY on Publish.
   clip clips the entrance horizontally without making a scroll container.
   The visible fallback also permits sticky on browsers without overflow:clip. */
@media (min-width: 992px) {
  #main.unified-site.bn-publish-roadmap {
    display: flow-root;
    overflow: visible;
  }

  .inner-publish.publish-roadmap-page {
    overflow: visible;
  }

  @supports (overflow: clip) {
    #main.unified-site.bn-publish-roadmap,
    .inner-publish.publish-roadmap-page {
      overflow: clip;
    }
  }

  .publish-roadmap-visual {
    /* JS refines height on load/resize from the actual free space at the left.
       Scrolling remains entirely native CSS: no scroll handler or animation. */
    --bn-publish-person-height: min(70vh, 640px);
    --bn-publish-person-overlap: clamp(170px, 12vw, 195px);
    position: sticky;
    top: calc(100vh - var(--bn-publish-person-height));
    top: calc(100dvh - var(--bn-publish-person-height));
    height: var(--bn-publish-person-height);
  }

  .inner-publish .publish-roadmap-man {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
  }

  .inner-publish .publish-roadmap-man img {
    flex: none;
    width: auto;
    max-width: none;
    height: 100%;
    margin: 0;
    opacity: .85;
    transform: translateX(var(--bn-publish-person-overlap));
  }
}

@media (max-width: 991px) {
  #main.unified-site.bn-publish-roadmap {
    display: flow-root;
    overflow: visible;
  }

  .inner-publish.publish-roadmap-page {
    overflow: visible;
  }

  @supports (overflow: clip) {
    #main.unified-site.bn-publish-roadmap,
    .inner-publish.publish-roadmap-page {
      overflow: clip;
    }
  }

  /* Overlay the ghosted person and copy in the same grid track. This keeps the
     illustration out of document flow without the negative margin that let
     V41.4's sticky box run past the dark roadmap boundary. */
  .publish-roadmap-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }

  .publish-roadmap-visual,
  .publish-roadmap-copy {
    grid-area: 1 / 1;
  }

  .publish-roadmap-visual {
    --bn-publish-person-height: min(46vh, 430px);
    position: sticky;
    z-index: 0;
    top: calc(100vh - var(--bn-publish-person-height));
    top: calc(100dvh - var(--bn-publish-person-height));
    left: auto;
    width: 100vw;
    height: var(--bn-publish-person-height);
    min-height: 0;
    margin-left: calc(50% - 50vw);
    opacity: .12;
    pointer-events: none;
  }

  .inner-publish .publish-roadmap-man {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--bn-publish-person-height);
  }

  .inner-publish .publish-roadmap-man img {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center bottom;
  }

  .publish-roadmap-copy {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
  }

  .publish-roadmap-steps {
    padding-left: 0 !important;
  }
}

@media (max-width: 767px) {
  .publish-roadmap-page {
    padding-bottom: 36px;
  }

  .publish-roadmap-hero .inner-page-title,
  .publish-roadmap-title,
  .publish-roadmap-after h2 {
    font-size: 32px;
    line-height: 1.3;
  }

  .publish-roadmap-hero .inner-page-title {
    margin: 34px 0 18px;
  }

  .publish-roadmap-heading-sub {
    margin-top: 4px;
    font-size: 22px;
  }

  .publish-roadmap-lead {
    margin-bottom: 24px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 1.65;
  }

  .publish-roadmap-title,
  .publish-roadmap-after h2 {
    margin: 34px 0 26px;
  }

  .publish-roadmap-visual {
    --bn-publish-person-height: min(46vh, 430px);
    top: calc(100vh - var(--bn-publish-person-height));
    top: calc(100dvh - var(--bn-publish-person-height));
    opacity: .08;
  }

  .publish-roadmap-steps li {
    padding: 13px 4px 8px 38px;
    font-size: 15.5px;
    line-height: 1.6;
  }

  .publish-roadmap-steps li::before {
    left: 0;
    top: 18px;
  }

  .publish-roadmap-steps li::after {
    left: 9px;
    top: 40px;
  }

  .publish-roadmap-after {
    padding: 0 10px;
  }

  .publish-roadmap-after p {
    font-size: 16px;
    line-height: 1.65;
  }

  .publish-roadmap-actions {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 300px;
    margin: 8px auto 0;
  }

  .publish-roadmap-actions a.btn-default.btn4,
  .publish-roadmap-actions a.btn-default.btn5 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-right: 18px;
    padding-left: 18px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inner-publish .publish-roadmap-man {
    animation: none !important;
    transform: none !important;
  }
}