/*
 * .brtr — Section 4: Mentor Matching
 * Mentor cards with status indicators, assignment dropdowns,
 * chat icons, and "add your own advisor" invite row.
 * CSS file: section-mentors.css | HTML: <section class="s4"> in index.html
 * Shared frame chrome (sidebar, border, top bar) lives in shared-frame.css.
 */


/* ================================================================
   SECTION 5: AMA / ASYNC CHAT
   Scroll-highlight text section for the async AMA feature.
   ================================================================ */
.s5 {
  position: relative;
  z-index: 1;
  padding: 80px 0 120px;
}

.s5-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.s5-scroll-text {
  font-family: var(--heading);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.04em;
  max-width: 1000px;
  padding-left: 32px;
}

.s5-scroll-text .s5-line {
  color: var(--text-4);
  transition: color 0.4s ease;
}

.s5-scroll-text .s5-line.lit {
  color: var(--text-1);
}

.s5-scroll-text .s5-line.lit-gold {
  color: var(--copper);
}


/* ================================================================
   SECTION 6: SCROLL-HIGHLIGHT TEXT
   Standalone scroll-reveal sentence section (no prototype frame).
   ================================================================ */
.s6 {
  position: relative;
  z-index: 1;
  padding: 80px 0 120px;
}

.s6-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.s6-scroll-text {
  font-family: var(--heading);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.04em;
  max-width: 1000px;
  padding-left: 32px;
}

.s6-scroll-text .s6-line {
  color: var(--text-4);
  transition: color 0.4s ease;
}

.s6-scroll-text .s6-line.lit {
  color: var(--text-1);
}

.s6-scroll-text .s6-line.lit-gold {
  color: var(--copper);
}


/* ================================================================
   SECTION 7 — Scroll-highlight: Visibility & Reports
   ================================================================ */
.s7 {
  position: relative;
  z-index: 1;
  padding: 80px 0 120px;
}

.s7-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.s7-scroll-text {
  font-family: var(--heading);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.04em;
  max-width: 1000px;
  padding-left: 32px;
}

.s7-scroll-text .s7-line {
  color: var(--text-4);
  transition: color 0.4s ease;
}

.s7-scroll-text .s7-line.lit {
  color: var(--text-1);
}

.s7-scroll-text .s7-line.lit-gold {
  color: var(--copper);
}


/* ================================================================
   SECTION 8 — Scroll-highlight: Bite-sized Content
   ================================================================ */
.s8 {
  position: relative;
  z-index: 1;
  padding: 80px 0 120px;
}

.s8-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.s8-scroll-text {
  font-family: var(--heading);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.04em;
  max-width: 1000px;
  padding-left: 32px;
}

.s8-scroll-text .s8-line {
  color: var(--text-4);
  transition: color 0.4s ease;
}

.s8-scroll-text .s8-line.lit {
  color: var(--text-1);
}

.s8-scroll-text .s8-line.lit-gold {
  color: var(--copper);
}


/* ================================================================
   CONTENT FEED — EXPLORE GRID (S8)
   IG Explore-style thumbnail grid: stories row + tile cards.
   Fits within the 520px proto-inner frame.
   ================================================================ */

/* --- Content area override --- */
.m8-content {
  padding: 0 !important;
}

/* --- Stories row --- */
.m8-stories {
  display: flex;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  overflow-x: auto;
  scrollbar-width: none;
}

.m8-stories::-webkit-scrollbar { display: none; }

.m8-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.m8-story__ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
}

.m8-story__ring:hover {
  transform: scale(1.08);
}

.m8-story__ring--amber {
  background: linear-gradient(135deg, var(--gold) 0%, var(--copper) 100%);
}

.m8-story__ring--copper {
  background: linear-gradient(135deg, var(--copper) 0%, #c47830 100%);
}

.m8-story__ring--silver {
  background: linear-gradient(135deg, var(--silver) 0%, #9a9aa0 100%);
}

.m8-story__av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-2);
}

.m8-story__name {
  font-size: 9px;
  color: var(--text-3);
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Explore grid — thumbnail tiles --- */
.m8-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  padding: 2px;
}

/* --- Tile --- */
.m8-tile {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  animation: protoFade 0.35s ease calc(var(--i,0) * 0.06s) both;
}

/* Background fill */
.m8-tile__bg {
  width: 100%;
  padding-bottom: 100%; /* 1:1 square */
}

.m8-tile--tall .m8-tile__bg {
  padding-bottom: 130%; /* taller for reels */
}

.m8-tile__bg--amber {
  background: linear-gradient(135deg, rgba(184,146,46,0.15) 0%, rgba(160,104,48,0.08) 100%);
}

.m8-tile__bg--copper {
  background: linear-gradient(135deg, rgba(160,104,48,0.14) 0%, rgba(184,146,46,0.07) 100%);
}

.m8-tile__bg--silver {
  background: linear-gradient(135deg, rgba(122,122,128,0.12) 0%, rgba(0,0,0,0.04) 100%);
}

/* Play button */
.m8-tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
}

/* Type badge */
.m8-tile__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  padding: 2px 7px;
}

/* Hover overlay with title + stats */
.m8-tile__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}

.m8-tile:hover .m8-tile__overlay {
  opacity: 1;
}

.m8-tile__title {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.3;
}

.m8-tile__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}


/* ================================================================
   SECTION 9: FUTURE ROADMAP
   Static heading + 2-column card grid. No dashboard frame.
   ================================================================ */
.s9 {
  position: relative;
  z-index: 1;
  padding: 80px 0 120px;
}

.s9-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.s9-heading {
  font-family: var(--heading);
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--text-1);
  padding-left: 32px;
  margin-bottom: 8px;
}

.s9-sub {
  font-size: 14px;
  color: var(--text-3);
  padding-left: 32px;
  margin-bottom: 48px;
}

/* Grid */
.s9-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 32px;
}

/* Card */
.s9-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--bg-white);
  opacity: 0;
  animation: teamLoad 0.5s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 0.1s + 0.15s) forwards;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.s9-card:hover {
  border-color: rgba(184,146,46,0.15);
  box-shadow: 0 2px 12px rgba(184,146,46,0.06);
}

/* Large muted number */
.s9-card__num {
  font-family: var(--heading);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-4);
  opacity: 0.2;
  flex-shrink: 0;
  padding-top: 2px;
}

/* Card body */
.s9-card__body {
  flex: 1;
  min-width: 0;
}

/* Phase badge */
.s9-card__badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: 8px;
}

.s9-card__badge--dev {
  color: var(--copper);
  background: rgba(160,104,48,0.08);
}

.s9-card__badge--soon {
  color: var(--gold-text);
  background: rgba(184,146,46,0.08);
}

.s9-card__badge--ongoing {
  color: #1e7e34;
  background: rgba(52,168,83,0.08);
}

.s9-card__badge--explore {
  color: var(--silver);
  background: rgba(122,122,128,0.08);
}

/* Title */
.s9-card__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 6px;
  line-height: 1.3;
}

/* Description */
.s9-card__desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.55;
  margin: 0;
}


/* ================================================================
   MANAGER INSIGHTS DASHBOARD (S7)
   Stats row, per-member cards with topics + mentor notes.
   ================================================================ */

/* --- Stats row --- */
.m7-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.m7-stat {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border-t);
  background: var(--bg-white);
}

.m7-stat__num {
  font-family: var(--heading);
  font-size: 26px;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.m7-stat__num--amber  { color: var(--gold-text); }
.m7-stat__num--green  { color: var(--silver-text); }
.m7-stat__num--purple { color: var(--copper-text); }

.m7-stat__label {
  font-size: 10px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Team member cards --- */
.m7-members {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m7-member {
  padding: 16px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--bg-white);
  animation: protoFade 0.4s ease calc(var(--i, 0) * 0.12s) both;
}

.m7-member__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.m7-member__info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.m7-member__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}

.m7-member__role {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}

.m7-member__metrics {
  display: flex;
  gap: 8px;
}

.m7-metric {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: rgba(0,0,0,0.03);
  border-radius: 100px;
  padding: 3px 10px;
}

/* --- Topic chips --- */
.m7-member__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.m7-topic {
  font-size: 10px;
  font-weight: 600;
  border-radius: 100px;
  padding: 4px 10px;
}

.m7-topic--improving {
  color: var(--silver-text);
  background: var(--silver-bg);
  border: 1px solid rgba(122,122,128,0.12);
}

.m7-topic--confident {
  color: var(--gold-text);
  background: rgba(184,146,46,0.08);
  border: 1px solid rgba(184,146,46,0.12);
}

.m7-topic--focus {
  color: var(--copper-text);
  background: rgba(160,104,48,0.08);
  border: 1px solid rgba(160,104,48,0.12);
}

/* --- Mentor note --- */
.m7-member__note {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.02);
  border-left: 2px solid rgba(184,146,46,0.2);
}

.m7-note__text {
  font-size: 11px;
  color: var(--text-2);
  font-style: italic;
  line-height: 1.5;
}

.m7-note__author {
  font-size: 10px;
  color: var(--text-4);
  font-style: normal;
  margin-left: 4px;
}

/* --- Toggle / Chevron --- */
.m7-member__toggle {
  cursor: pointer;
}

.m7-member__chevron {
  font-size: 12px;
  color: var(--text-4);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
  margin-left: 6px;
  flex-shrink: 0;
}

.m7-member--open .m7-member__chevron {
  transform: rotate(180deg);
}

.m7-member--open {
  border-color: rgba(184,146,46,0.15);
  box-shadow: 0 2px 12px rgba(184,146,46,0.06);
}

/* --- Expandable detail --- */
.m7-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.22,1,0.36,1);
}

.m7-member--open .m7-detail {
  max-height: 1200px;
}

.m7-detail__topic {
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,0.04);
}

.m7-detail__topic:first-child {
  margin-top: 12px;
}

.m7-detail__topic-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.m7-detail__meta {
  font-size: 10px;
  color: var(--text-4);
}

.m7-detail__row {
  margin-bottom: 8px;
}

.m7-detail__label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-4);
  margin-bottom: 3px;
}

.m7-detail__text {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
}

.m7-detail__steps {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
  padding-left: 16px;
}

.m7-detail__steps li {
  margin-bottom: 2px;
}

.m7-detail__recording {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--gold-text);
  background: rgba(184,146,46,0.06);
  border: 1px solid rgba(184,146,46,0.1);
  border-radius: 100px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.2s;
}

.m7-detail__recording:hover {
  background: rgba(184,146,46,0.1);
}

.m7-detail__rec-icon {
  width: 12px;
  height: 12px;
  color: var(--gold-text);
}


/* ================================================================
   AMA DASHBOARD CONTENT (S5)
   Voice-native Q&A threads, waveform bubbles, input bar.
   ================================================================ */
.m5-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0 !important;
}

/* Live badge in proto-bar */
.m5-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #1e7e34;
  font-weight: 600;
}

.m5-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-online);
  animation: onlinePulse 2s ease-in-out infinite;
}

/* Q&A thread container */
.m5-thread {
  padding: 14px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.m5-thread:last-of-type {
  border-bottom: none;
}

/* Question header */
.m5-q__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.m5-q__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}

.m5-q__time {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-4);
}

/* ── Voice note bubble — compact, sized to content ── */
.m5-voice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(160,104,48,0.04);
  border: 1px solid rgba(160,104,48,0.06);
  border-radius: 20px;
  margin-left: 34px;
  color: var(--copper);
}

/* Mentor answer voice notes use gold */
.m5-a .m5-voice {
  color: var(--gold-text);
  background: rgba(184,146,46,0.04);
  border-color: rgba(184,146,46,0.06);
  margin-left: 0;
}

/* Play button — circle filled with currentColor */
.m5-voice__play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: currentColor;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s, filter 0.15s;
}

.m5-voice__play:hover {
  transform: scale(1.08);
  filter: brightness(1.1);
}

/* Waveform SVG — fixed width, matches viewBox */
.m5-voice__wave {
  width: 120px;
  height: 28px;
  flex-shrink: 1;
}

/* Duration */
.m5-voice__dur {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  flex-shrink: 0;
}

/* Playback speed toggle */
.m5-voice__speed {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

/* ── Transcript below voice note ── */
.m5-transcript {
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-4);
  margin-top: 4px;
  margin-left: 34px;
  font-style: italic;
  max-width: 320px;
}

.m5-a .m5-transcript {
  margin-left: 0;
}

.m5-transcript__tag {
  font-size: 9px;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-4);
  background: rgba(0,0,0,0.04);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 4px;
}

/* ── Voice playback state ── */
.m5-voice--playing .m5-voice__play {
  animation: voicePulse 1.5s ease-in-out infinite;
}

.m5-voice--playing .m5-voice__wave rect {
  transition: fill-opacity 0.15s ease;
}

.m5-transcript--typing::after {
  content: '|';
  color: var(--copper);
  animation: blink 0.6s step-end infinite;
  margin-left: 1px;
}

/* ── Mentor answer — right-aligned, confined ── */
.m5-a {
  margin-top: 10px;
  margin-left: auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(184,146,46,0.04);
  border: 1px solid rgba(184,146,46,0.08);
  max-width: 440px;
}

/* Voice-only answer — shrink-to-fit, right-aligned */
.m5-a--voice {
  background: none;
  border: none;
  padding: 0;
  width: fit-content;
}

.m5-a__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.m5-a__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-text);
}

.m5-a__time {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-4);
}

.m5-a__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  padding-left: 36px;
}

/* ── Chat stagger animation — messages appear one by one ── */
.m5-q,
.m5-a,
.m5-input {
  animation: m5MsgIn 0.35s ease-out both;
}

.m5-thread:nth-child(1) .m5-q { animation-delay: 0.15s; }
.m5-thread:nth-child(1) .m5-a { animation-delay: 0.5s; }
.m5-thread:nth-child(2) .m5-q { animation-delay: 0.85s; }
.m5-thread:nth-child(3) .m5-q { animation-delay: 1.2s; }
.m5-thread:nth-child(3) .m5-a { animation-delay: 1.55s; }
.m5-input { animation-delay: 1.9s; }

/* ── Voice-first input bar ── */
.m5-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: var(--bg-white);
}

/* Primary mic button — gradient CTA */
.m5-input__mic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--cta-border);
  background: var(--cta-gradient);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(160,104,40,0.25);
  transition: all 0.2s;
}

.m5-input__mic:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(160,104,40,0.35);
  filter: brightness(1.1);
}

/* Keyboard shortcut badge */
.m5-input__kbd {
  font-family: var(--font);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-4);
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  padding: 2px 5px;
  line-height: 1;
  flex-shrink: 0;
}

/* De-emphasized text input */
.m5-input__field {
  flex: 1;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-2);
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.2s;
}

.m5-input__field:focus {
  border-color: rgba(160,104,48,0.3);
}

.m5-input__field::placeholder {
  color: var(--text-4);
}

/* Minimal send button */
.m5-input__send {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--bg-white);
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.m5-input__send:hover {
  color: var(--copper);
  border-color: rgba(160,104,48,0.25);
  background: rgba(160,104,48,0.04);
}


/* ================================================================
   SECTION 4: MENTOR MATCHING
   ================================================================ */
.s4 {
  position: relative;
  z-index: 1;
  padding: 80px 0 120px;
}

.s4-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}


/* ================================================================
   SCROLL-HIGHLIGHT TEXT
   Sentences light up black or gold as user scrolls.
   JS: scroll-highlight.js with config in config.js
   ================================================================ */
.s4-scroll-text {
  font-family: var(--heading);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.04em;
  max-width: 1000px;
  padding-left: 32px;
}

.s4-scroll-text .s4-line {
  color: var(--text-4);
  transition: color 0.4s ease;
}

.s4-scroll-text .s4-line.lit {
  color: var(--text-1);
}

.s4-scroll-text .s4-line.lit-gold {
  color: var(--copper);
}


/* ================================================================
   TEAM SECTION GROUPS
   Groups of mentor cards under a team heading.
   ================================================================ */
.m4-section {
  margin-bottom: 28px;
}

.m4-section--stagger {
  opacity: 0;
  animation: teamLoad 0.5s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 0.15s + 0.2s) forwards;
}

.m4-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.m4-section__team {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}

.m4-section__format {
  font-size: 10px;
  font-weight: 500;
  color: var(--gold-text);
  background: rgba(184,146,46,0.08);
  border-radius: 100px;
  padding: 3px 10px;
}


/* ================================================================
   MENTOR CARDS
   Two-column grid. Each card: avatar + info + status + assignment.
   ================================================================ */
.m4-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.m4-card {
  padding: 18px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--bg-white);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.m4-card:hover {
  border-color: rgba(184,146,46,0.15);
  box-shadow: 0 2px 12px rgba(184,146,46,0.06);
}

.m4-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.m4-card__info {
  flex: 1;
  min-width: 0;
}

.m4-card__name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}

.m4-card__role {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ================================================================
   AVATAR STATUS INDICATORS
   Coloured dots overlaid on mentor avatars.
   ================================================================ */
.m4-av-wrap {
  position: relative;
  flex-shrink: 0;
}

.m4-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-white);
  background: var(--text-4);
}

.m4-status--online  { background: var(--status-online); }
.m4-status--busy    { background: var(--status-busy); }
.m4-status--offline { background: var(--status-offline); }

/* Status text labels (e.g. "Online", "With Karan") */
.m4-status-label {
  font-size: 10px;
  font-weight: 500;
  flex-shrink: 0;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 10px;
  line-height: 1;
  margin-top: 2px;
}

.m4-status-label--online {
  color: #1e7e34;
  background: rgba(52,168,83,0.1);
}

.m4-status-label--busy {
  color: #9a6e00;
  background: rgba(232,165,32,0.1);
}

.m4-status-label--offline {
  color: var(--text-4);
  background: rgba(0,0,0,0.03);
}


/* ================================================================
   ASSIGNMENT SYSTEM
   "Assigned to" section with avatar row + dropdown for adding members.
   Dropdown uses portal pattern (moved to body) to escape overflow:hidden.
   ================================================================ */
.m4-card__assign {
  position: relative;
  margin-bottom: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.04);
}

.m4-card__assign-label {
  display: none;
}

.m4-card__assign-row {
  display: flex;
  align-items: center;
}

.m4-assign-avatars {
  display: flex;
  align-items: center;
  gap: -4px;
}

.m4-assign-avatars .proto-av {
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}

.m4-assign-avatars .proto-av:hover {
  transform: scale(1.1);
  opacity: 0.6;
  box-shadow: 0 0 0 2px rgba(160,104,48,0.2);
}

/* "+" add button — hidden by default, revealed on card hover */
.m4-assign-add {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px dashed rgba(0,0,0,0.15);
  background: none;
  color: var(--text-4);
  font-size: 14px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 2px;
  transition: all 0.2s;
  opacity: 0;
  pointer-events: none;
}

.m4-card:hover .m4-assign-add {
  opacity: 1;
  pointer-events: auto;
}

.m4-assign-add:hover {
  border-color: rgba(160,104,48,0.3);
  color: var(--copper);
  background: rgba(160,104,48,0.04);
}

/* Pulsing hint on "+" button — always visible, dismissed on first click */
.m4-assign-add--hint {
  opacity: 1;
  pointer-events: auto;
  border-color: rgba(160,104,48,0.3);
  color: var(--copper);
  background: rgba(160,104,48,0.06);
  animation: addHint 2s ease-in-out infinite;
}

/* Dropdown (portaled to body via JS) */
.m4-assign-dropdown {
  display: none;
  position: fixed;
  z-index: 9999;
  min-width: 160px;
  padding: 6px;
  background: var(--bg-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.m4-assign-dropdown--open {
  display: block;
  animation: protoFade 0.2s cubic-bezier(0.22,1,0.36,1);
}

.m4-assign-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s;
}

.m4-assign-option:hover {
  background: rgba(0,0,0,0.03);
}

.m4-assign-check {
  margin-left: auto;
  font-size: 12px;
  color: var(--gold-text);
  opacity: 0;
}

.m4-assign-option--on .m4-assign-check {
  opacity: 1;
}

.m4-assign-option--on {
  color: var(--text-1);
}


/* ================================================================
   ICON ACTION BUTTONS
   Inline with the assign row — avatars left, icons right.
   📅 Schedule / Join  |  💬 AMA
   Compact, always visible, tooltip on hover.
   ================================================================ */
.m4-card__icons {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.m4-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--bg-white);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}

.m4-icon-btn:hover {
  border-color: rgba(160,104,48,0.3);
  background: rgba(160,104,48,0.08);
  color: var(--copper);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(160,104,48,0.1);
}

/* Booked state — replaces schedule icon after booking */
.m4-icon-btn--booked {
  width: auto;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--gold-text);
  background: rgba(184,146,46,0.08);
  border-color: rgba(184,146,46,0.15);
  cursor: default;
}

.m4-icon-btn--booked:hover {
  transform: none;
  box-shadow: none;
}


/* ================================================================
   "ADD YOUR OWN ADVISOR" — Invite row
   Dashed-border card with email input + send button.
   ================================================================ */
.m4-add {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px dashed rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.5);
  transition: border-color 0.25s, background 0.25s;
}

.m4-add:hover {
  border-color: rgba(160,104,48,0.2);
  background: rgba(255,255,255,0.8);
}

.m4-add__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  color: var(--text-4);
  background: rgba(0,0,0,0.03);
  flex-shrink: 0;
}

.m4-add__text {
  flex: 1;
  min-width: 0;
}

.m4-add__title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

.m4-add__sub {
  display: block;
  font-size: 11px;
  color: var(--text-4);
  margin-top: 1px;
}

.m4-add__input {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.m4-add__field {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-2);
  background: var(--bg-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 7px 12px;
  width: 180px;
  outline: none;
  transition: border-color 0.2s;
}

.m4-add__field:focus {
  border-color: rgba(160,104,48,0.3);
}

.m4-add__field::placeholder {
  color: var(--text-4);
}

/* Invite send button — uses CTA gradient */
.m4-add__btn {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--cta-gradient);
  border: 1px solid var(--cta-border);
  border-radius: 6px;
  padding: 7px 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(160,104,40,0.2);
  text-shadow: var(--cta-text-shadow);
  transition: box-shadow 0.2s, transform 0.15s, filter 0.2s;
}

.m4-add__btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(160,104,40,0.3);
}

.m4-add__btn--sent {
  background: rgba(184,146,46,0.1);
  color: var(--gold-text);
  box-shadow: none;
  text-shadow: none;
  cursor: default;
  border-color: rgba(184,146,46,0.2);
}

.m4-add__btn--sent:hover {
  transform: none;
  filter: none;
}


/* ================================================================
   REASSURANCE LINE
   Small trust-building text below the prototype.
   ================================================================ */
.m4-reassure {
  font-size: 12px;
  color: var(--text-4);
  margin-top: 20px;
}

.m4-reassure__link {
  color: var(--copper);
  font-weight: 500;
  transition: opacity 0.2s;
}

.m4-reassure__link:hover {
  opacity: 0.7;
}


/* ================================================================
   SCHEDULER POPOVER (portal-based)
   Compact Calendly-style day + time picker triggered by
   "Schedule 1:1" buttons. Built via JS, portaled to body.
   ================================================================ */

/* Invisible scrim behind the panel — click-to-dismiss */
.m4-sched-scrim {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: transparent;
}

/* Panel container */
.m4-sched {
  position: fixed;
  z-index: 10000;
  width: 280px;
  background: var(--bg-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  display: none;
}

.m4-sched--open {
  display: block;
  animation: schedIn 0.25s cubic-bezier(0.22,1,0.36,1);
}

.m4-sched--closing {
  animation: schedOut 0.2s ease forwards;
}

/* Header */
.m4-sched__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.m4-sched__mentor {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m4-sched__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}

.m4-sched__close {
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--text-4);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.m4-sched__close:hover {
  color: var(--text-2);
  background: rgba(0,0,0,0.04);
}

/* Day chip strip */
.m4-sched__days {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.m4-sched__days::-webkit-scrollbar { display: none; }

.m4-sched__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--bg-white);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  font-family: var(--font);
}

.m4-sched__day:hover {
  border-color: rgba(160,104,48,0.2);
}

.m4-sched__day--on {
  background: var(--highlight-bg);
  border-color: var(--highlight-border);
  box-shadow: var(--highlight-shadow);
}

.m4-sched__day-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
}

.m4-sched__day--on .m4-sched__day-label {
  color: var(--gold-text);
}

.m4-sched__day-date {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-4);
}

.m4-sched__day--on .m4-sched__day-date {
  color: var(--gold-text);
}

/* Time slot grid */
.m4-sched__slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 16px 12px;
  max-height: 176px;
  overflow-y: auto;
  scrollbar-width: none;
}

.m4-sched__slots::-webkit-scrollbar { display: none; }

.m4-sched__slot {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--bg-white);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 6px;
  padding: 7px 0;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}

.m4-sched__slot:hover {
  border-color: rgba(160,104,48,0.2);
  color: var(--text-1);
}

.m4-sched__slot--on {
  background: var(--highlight-bg);
  border-color: var(--highlight-border);
  color: var(--gold-text);
  font-weight: 600;
  box-shadow: var(--highlight-shadow);
}

/* Footer — confirm button */
.m4-sched__footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(0,0,0,0.04);
}

.m4-sched__confirm {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--cta-gradient);
  border: 1px solid var(--cta-border);
  border-radius: 8px;
  padding: 9px 0;
  width: 100%;
  cursor: pointer;
  box-shadow: var(--cta-shadow);
  text-shadow: var(--cta-text-shadow);
  transition: box-shadow 0.2s, transform 0.15s, filter 0.2s, opacity 0.2s;
}

.m4-sched__confirm:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: var(--cta-shadow-hover);
}

.m4-sched__confirm--disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Confirmed state */
.m4-sched__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px;
}

.m4-sched__done-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--highlight-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--gold-text);
  margin-bottom: 12px;
  animation: doneCheck 0.5s cubic-bezier(0.22,1,0.36,1);
}

.m4-sched__done-title {
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.m4-sched__done-detail {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-text);
  margin-bottom: 4px;
}

.m4-sched__done-sub {
  font-size: 10px;
  color: var(--text-4);
}


/* ================================================================
   GROUP SESSION POPOVER (Growth mentor cards)
   Reuses .m4-sched panel shell, header, confirm, done states.
   Adds topic chips + session list specific to group sessions.
   ================================================================ */

/* Section subheadings inside panel */
.m4-sess__sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 16px 6px;
}

/* Topic chip container */
.m4-sess__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}

/* Individual topic chip */
.m4-sess__topic {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--bg-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 100px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.m4-sess__topic:hover {
  border-color: rgba(160,104,48,0.2);
  color: var(--text-2);
}

.m4-sess__topic--on {
  background: var(--highlight-bg);
  border-color: var(--highlight-border);
  color: var(--gold-text);
  font-weight: 600;
}


/* ================================================================
   SECTION 6: LEARNING PATH PROTOTYPE
   Topic selection cards, weekly timeline, KPI alignment,
   and manager approval flow.
   ================================================================ */

/* --- Step heading --- */
.m6-step__head {
  margin-bottom: 20px;
}

.m6-step__title {
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.m6-step__sub {
  font-size: 12px;
  color: var(--text-3);
}

/* --- Step 1: Recommended Topics Ribbon --- */
.m6-recs {
  margin-bottom: 20px;
}

.m6-recs__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-4);
  margin-bottom: 8px;
}

.m6-recs__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.m6-rec {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--bg-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 100px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.m6-rec:hover {
  border-color: rgba(160,104,48,0.25);
  color: var(--text-2);
}

.m6-rec--used {
  opacity: 0.35;
  pointer-events: none;
  text-decoration: line-through;
}

/* --- Step 1: Week Rows --- */
.m6-weeks {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}

.m6-week-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.m6-week-row:last-child {
  border-bottom: none;
}

.m6-week-row__label {
  font-family: var(--heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-4);
  width: 52px;
  flex-shrink: 0;
}

.m6-week-row__slot {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* "Pick a topic" placeholder button */
.m6-week-row__pick {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-4);
  background: none;
  border: 1px dashed rgba(0,0,0,0.12);
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.m6-week-row__pick:hover {
  border-color: rgba(160,104,48,0.3);
  color: var(--copper);
  background: rgba(160,104,48,0.03);
}

/* Assigned topic chip */
.m6-week-row__chosen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-text);
  background: var(--highlight-bg);
  border: 1px solid var(--highlight-border);
  border-radius: 100px;
  padding: 5px 10px 5px 12px;
  animation: protoFade 0.2s cubic-bezier(0.22,1,0.36,1);
}

.m6-week-row__remove {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.06);
  color: var(--text-3);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}

.m6-week-row__remove:hover {
  background: rgba(0,0,0,0.12);
  color: var(--text-1);
}

/* "Recommended" badge */
.m6-week-row__badge {
  font-size: 9px;
  font-weight: 600;
  color: var(--gold-text);
  background: rgba(184,146,46,0.1);
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.02em;
}

/* Activity format chips (shown when topic assigned) */
.m6-week-row__formats {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.m6-week-row__fmt {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-4);
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 100px;
  padding: 2px 8px;
}

.m6-week-row__fmt--mentor {
  color: var(--gold-text);
  background: rgba(184,146,46,0.06);
  border-color: rgba(184,146,46,0.1);
}

/* --- Topic Dropdown (portal-based) --- */
.m6-dropdown {
  display: none;
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  padding: 6px;
  background: var(--bg-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.m6-dropdown--open {
  display: block;
  animation: protoFade 0.2s cubic-bezier(0.22,1,0.36,1);
}

.m6-dropdown__option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.m6-dropdown__option:hover {
  background: rgba(0,0,0,0.03);
}

.m6-dropdown__option--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.m6-dropdown__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}

.m6-dropdown__desc {
  font-size: 10px;
  color: var(--text-4);
}

.m6-dropdown__sep {
  height: 1px;
  background: rgba(0,0,0,0.06);
  margin: 4px 0;
}

.m6-dropdown__custom {
  display: flex;
  gap: 6px;
  padding: 6px;
}

.m6-dropdown__input {
  flex: 1;
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-2);
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.2s;
}

.m6-dropdown__input:focus {
  border-color: rgba(160,104,48,0.3);
}

.m6-dropdown__input::placeholder {
  color: var(--text-4);
}

.m6-dropdown__add {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--cta-gradient);
  border: 1px solid var(--cta-border);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 0.15s, transform 0.15s;
}

.m6-dropdown__add:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Selection counter */
.m6-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-4);
  margin-right: auto;
}

.m6-count--active {
  color: var(--gold-text);
}

/* Disabled CTA state */
.proto-next--disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* --- Step 2: Manager Approval --- */
/* Submitted state for CTA button */
.proto-next--done {
  background: rgba(184,146,46,0.08);
  color: var(--gold-text);
  border: 1px solid rgba(184,146,46,0.18);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}


/* ================================================================
   SECTION 10: FOOTER CTA BANNER
   Full-width dark banner with animated glow orbs, large CTA, big logo.
   ================================================================ */
.s10 {
  position: relative;
  z-index: 1;
  padding: 120px 0 80px;
  background: linear-gradient(
    135deg,
    #1e1008 0%,
    #3a2010 18%,
    #6a3c1c 35%,
    #96642a 50%,
    #6a3c1c 65%,
    #3a2010 82%,
    #1e1008 100%
  );
  background-size: 200% 200%;
  animation: s2bGlow 10s ease infinite;
  overflow: hidden;
  text-align: center;
}

/* Animated floating glow orbs */
.s10-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,208,96,0.18) 0%, rgba(192,128,80,0.08) 40%, transparent 70%);
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  animation: s10Float 8s ease-in-out infinite;
  pointer-events: none;
  filter: blur(60px);
}

.s10-glow--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(240,208,96,0.12) 0%, rgba(192,128,80,0.06) 40%, transparent 70%);
  top: auto;
  bottom: -100px;
  left: 30%;
  animation: s10Float 10s ease-in-out 3s infinite reverse;
}

.s10-wrap {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.s10-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(240,208,96,0.6);
  margin-bottom: 24px;
}

.s10-heading {
  font-family: var(--heading);
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 20px;
}

.s10-sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.45);
  margin-bottom: 44px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA button — large, glowing, animated */
.s10-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: #0e0904;
  background: linear-gradient(135deg, #f0d080 0%, #e8c060 30%, #f5e0a0 55%, #d4a840 80%, #f0d080 100%);
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
  border: none;
  border-radius: 12px;
  padding: 18px 40px;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 0 30px rgba(240,208,96,0.3),
    0 0 60px rgba(184,146,46,0.15),
    0 4px 20px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.3s;
  letter-spacing: -0.01em;
}

.s10-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 40px rgba(240,208,96,0.45),
    0 0 80px rgba(184,146,46,0.2),
    0 8px 30px rgba(0,0,0,0.5);
}

.s10-btn__arrow {
  font-size: 18px;
  transition: transform 0.2s;
}

.s10-btn:hover .s10-btn__arrow {
  transform: translateX(4px);
}

.s10-reassure {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  margin-top: 20px;
  letter-spacing: 0.02em;
}

/* Repeating .brtr marquee strip */
.s10-marquee {
  position: relative;
  z-index: 1;
  margin-top: 80px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.s10-marquee__track {
  display: flex;
  width: max-content;
  animation: s10Marquee 20s linear infinite;
}

.s10-marquee__item {
  font-family: var(--heading);
  font-size: 7rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  padding: 0 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  user-select: none;
  flex-shrink: 0;
}


/* ================================================================
   SITE FOOTER
   Copyright, links, brand mark.
   ================================================================ */
.site-footer {
  background: #1a0e06;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 40px 0;
}

.footer-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo {
  font-family: var(--heading);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #f0d080 0%, #d4a840 50%, #f0d080 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-tagline {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  font-style: italic;
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-link {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link:hover {
  color: rgba(255,255,255,0.7);
}

.footer-legal {
  font-size: 11px;
  color: rgba(255,255,255,0.2);
}