/* ---- Maven Membership brand tokens (per the approved UI guidelines) ---- */
:root {
  --mm-navy: #16325c;          /* headers, footer, primary chrome */
  --mm-navy-deep: #0f2547;
  --mm-orange: #e8590c;        /* accent rule / highlights */
  --mm-ic-green: #1e7e34;      /* Inner Circle */
  --mm-ic-green-soft: #e6f4ea;
  --mm-elite-purple: #5f3dc4;  /* Maven Elite */
  --mm-elite-purple-soft: #efeafb;
  /* Six-feature card colors */
  --mm-think-blue: #1565c0;
  --mm-build-teal: #00838f;
  --mm-organize-green: #2e7d32;
  --mm-learn-gold: #c8930a;
  --mm-grow-orange: #ef6c00;
  --mm-execute-purple: #5e35b1;
}

.mm-navbar { background: var(--mm-navy); border-bottom: 3px solid var(--mm-orange); }
.mm-brand-accent { color: #ffd166; }
.mm-footer { background: var(--mm-navy-deep); }

.mm-badge-ic { background: var(--mm-ic-green); }
.mm-badge-elite { background: var(--mm-elite-purple); }

.mm-btn-ic { background: var(--mm-ic-green); color: #fff; }
.mm-btn-ic:hover { background: #166529; color: #fff; }
.mm-btn-elite { background: var(--mm-elite-purple); color: #fff; }
.mm-btn-elite:hover { background: #4c31a0; color: #fff; }

.mm-auth-card { max-width: 480px; }
.mm-auth-card .card-header {
  background: var(--mm-navy); color: #fff;
  border-bottom: 3px solid var(--mm-orange);
}

/* ---- Public membership page (Step 3) ---- */
.mm-hero {
  background: linear-gradient(180deg, var(--mm-navy) 0%, var(--mm-navy-deep) 100%);
  border-bottom: 4px solid var(--mm-orange);
}
.mm-hero-sub { letter-spacing: .14em; color: #ffd166; font-size: .95rem; }

.mm-section-title {
  font-weight: 800; color: var(--mm-navy); letter-spacing: .02em; margin-bottom: .25rem;
}

.mm-who { border-left: 6px solid var(--mm-orange) !important; }
.mm-who-label { color: var(--mm-orange); line-height: 1.15; font-size: 1.35rem; min-width: 92px; }
.mm-who-tagline { color: var(--mm-orange); }

.mm-feature { border-radius: .75rem; overflow: hidden; }
.mm-feature-head { letter-spacing: .04em; }
.mm-feature .btn-link { text-decoration: none; }

.mm-tier { border-radius: .9rem; overflow: hidden; border-width: 2px; }
.mm-tier-ic { border-color: var(--mm-ic-green) !important; }
.mm-tier-ic .mm-tier-head { background: var(--mm-ic-green); }
.mm-tier-elite { border-color: var(--mm-elite-purple) !important; }
.mm-tier-elite .mm-tier-head { background: var(--mm-elite-purple); }
.mm-tier-mode { letter-spacing: .1em; }
.mm-kicker {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #6c757d; margin-bottom: .15rem;
}
.mm-tier .btn-link { text-decoration: none; }

.mm-choose { background: var(--mm-navy); letter-spacing: .06em; }

/* ---- Member portal (Step 5) ---- */
.mm-portal-nav .list-group-item { border-left: 4px solid transparent; }
.mm-portal-nav .list-group-item.active {
  background: var(--mm-navy); border-color: var(--mm-orange); color: #fff;
}
.mm-portal-nav .list-group-item:not(.active) .mm-nav-icon { color: var(--mm-area, var(--mm-navy)); }
.mm-portal-nav .mm-nav-elite:not(.active) { color: var(--mm-elite-purple); font-weight: 600; }

.mm-start-hero { border-top: 4px solid var(--mm-orange); }

.mm-area-card { border-top: 4px solid var(--mm-area); transition: transform .08s ease-in-out; }
.mm-area-card:hover { transform: translateY(-2px); }
.mm-area-icon {
  width: 2.2rem; height: 2.2rem; border-radius: .5rem; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; background: var(--mm-area);
}

.mm-resource-card { border-left: 4px solid var(--mm-area, #dee2e6); }
.mm-locked { border-left: 4px solid var(--mm-elite-purple); background: var(--mm-elite-purple-soft); }
.mm-area-banner { box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }


/* ---- Global loading overlay ---- */
.mm-loader {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 37, 71, .55);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(1px);
}

/* ---- Start Here: the Membership Experience layout ---- */
.mm-exp-title { font-weight: 800; color: var(--mm-navy); letter-spacing: .01em; }
.mm-exp-tagline { color: #5b6470; font-style: italic; max-width: 620px; margin: 0 auto; }
.mm-exp-choose { font-weight: 800; color: var(--mm-navy); letter-spacing: .03em; text-transform: uppercase; }
.mm-exp-key { color: var(--mm-learn-gold); }

.mm-room-card { border-radius: .75rem; overflow: hidden; transition: transform .08s ease-in-out, box-shadow .08s ease-in-out; }
.mm-room-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(22, 50, 92, .15) !important; }
.mm-room-ribbon {
  background: var(--mm-area); color: #fff; text-align: center;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .45rem .5rem;
}
.mm-room-icon {
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mm-area); color: #fff; font-size: 1.35rem;
  margin-top: .35rem;
}
.mm-room-name { font-weight: 700; font-size: 1.02rem; }

.mm-tier-star {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .7);
  font-size: 1.15rem;
}

/* ---- Public page: feature columns + Maven Ecosystem (infographic layout) ---- */
.mm-feature-label { color: var(--mm-navy); letter-spacing: .03em; }
.mm-feature-note { color: var(--mm-navy); }
.mm-feature-list { border-top: 1px solid #edf0f3; }
.mm-feature-list i { font-size: .45rem; vertical-align: .18rem; margin-right: .4rem; }

.mm-eco-card { border-radius: .75rem; overflow: hidden; border: 1px solid var(--mm-area); transition: transform .08s ease-in-out; }
.mm-eco-card:hover { transform: translateY(-2px); }
.mm-eco-head { background: var(--mm-area); font-size: .82rem; letter-spacing: .05em; }
.mm-eco-role { color: var(--mm-navy); }
.mm-eco-accent { color: var(--mm-orange); }

/* ---- Public page: the Experience roadmap section ---- */
.mm-exp-card { border-radius: .85rem; overflow: hidden; border: 1px solid var(--mm-area) !important; }
.mm-exp-num {
  width: 1.7rem; height: 1.7rem; border-radius: 50%; flex: 0 0 auto;
  background: #fff; color: var(--mm-area);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem;
}
.mm-exp-icon { font-size: 2.3rem; line-height: 1; color: var(--mm-area); }
.mm-exp-label { color: var(--mm-area); letter-spacing: .03em; }
.mm-exp-rule { border-top: 2px solid var(--mm-area); opacity: .6; margin-left: 0; width: 100%; }

.mm-journey { color: var(--mm-navy); }
.mm-journey-road {
  border-top: 4px dashed var(--mm-navy); opacity: .85; height: 0;
  border-radius: 2px; margin-top: -1.2rem;
}
.mm-sum-pill { border-radius: .6rem; letter-spacing: .02em; }
.mm-sum-icon {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.8); background: rgba(255,255,255,.15);
  display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
}

/* ---- Portal & admin shell: fixed left sidebar + width-capped content ----
   The sidebar keeps a fixed width and stays pinned left. The content column
   grows only up to its cap; on larger resolutions the extra space simply
   accumulates on the right instead of stretching the page. */
.mm-shell { display: flex; align-items: flex-start; gap: 1.5rem; }
.mm-shell-side { flex: 0 0 290px; width: 290px; max-width: 290px; }
.mm-shell-side-sm { flex-basis: 250px; width: 250px; max-width: 250px; }
.mm-shell-main { flex: 1 1 auto; min-width: 0; }

@media (max-width: 991.98px) {
  .mm-shell { flex-direction: column; }
  .mm-shell-side, .mm-shell-side-sm { flex: 1 1 auto; width: 100%; max-width: 100%; }
  .mm-shell-main { max-width: 100%; width: 100%; }
}

/* ---- Portal & admin content centering ----
   The sidebar (accordion) stays pinned to the LEFT edge of the screen.
   Only the center portion is capped at a fixed width and centered in the
   remaining space, so on large resolutions equal space opens on BOTH
   sides of the content. Adjust one value to change the cap. */
.mm-content { max-width: 1150px; margin-left: auto; margin-right: auto; }

/* ---- Toolkit section tiles ---- */
.mm-tk-tile {
  border-radius: .85rem; overflow: hidden;
  border: 1px solid var(--mm-area);
  transition: transform .08s ease-in-out, box-shadow .08s ease-in-out;
}
.mm-tk-tile:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(22, 50, 92, .15) !important; }
.mm-tk-head { background: var(--mm-area); }
.mm-tk-prefix {
  background: #fff; color: var(--mm-area);
  font-weight: 800; letter-spacing: .02em;
  border-radius: .5rem; padding: .3rem .6rem; font-size: .95rem;
}
.mm-tk-icon {
  width: 2.7rem; height: 2.7rem; border-radius: .6rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mm-area); color: #fff; font-size: 1.25rem;
}
.mm-tk-foot { border-top: 1px solid #edf0f3; }
.mm-tk-count {
  background: var(--mm-area); color: #fff;
  font-size: .85rem; min-width: 2rem;
}

/* ---- The Maven 75 shelf browser (Learn) ---- */
.mm75-shelf h3 { letter-spacing: .03em; }
.mm75-num {
  background: var(--mm-learn-gold); color: #fff;
  font-weight: 700; font-size: .8rem;
  border-radius: .45rem; padding: .25rem .45rem; min-width: 2.4rem; text-align: center;
  flex: 0 0 auto;
}

/* ---- TB-018 Local Authority Method master map (Grow) ---- */
.mm-lam-ribbon { background: var(--mm-navy); clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); }
.mm-lam-code { background: var(--mm-orange); border-radius: .5rem; }
.mm-lam-note {
  background: #fdf6d8; border: 1px solid #efe3ae; border-radius: .35rem;
  transform: rotate(-1.5deg); color: var(--mm-navy);
}
.mm-lam-rule { border: 2px solid var(--mm-orange); border-radius: .75rem; background: #fff; }
.mm-lam-band { background: var(--mm-navy); letter-spacing: .04em; }

.mm-lam-phase {
  border-right: 1px dashed #dfe4ea; padding: .25rem .75rem .5rem; text-align: center;
  display: flex; flex-direction: column;
}
.row > .col:last-child .mm-lam-phase { border-right: 0; }
.mm-lam-phase-num {
  width: 2rem; height: 2rem; border-radius: 50%; margin: 0 auto;
  background: var(--mm-area); color: #fff; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.mm-lam-phase-icon {
  width: 3rem; height: 3rem; border-radius: 50%; margin: .5rem auto;
  background: var(--mm-area); color: #fff; font-size: 1.35rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.mm-lam-p { font-size: .8rem; color: var(--mm-navy); }
.mm-lam-ul { list-style: none; padding: 0; margin: 0 0 .5rem; text-align: left; font-size: .76rem; color: #33465a; }
.mm-lam-ul li { margin-bottom: .2rem; padding-left: .8rem; position: relative; }
.mm-lam-ul li::before { content: "•"; color: var(--mm-area); position: absolute; left: 0; font-weight: 700; }
.mm-lam-goal {
  margin-top: auto; background: color-mix(in srgb, var(--mm-area) 8%, #fff);
  border-radius: .45rem; padding: .45rem .5rem; font-size: .74rem; color: var(--mm-navy);
}
.mm-lam-goal .fw-bold { color: var(--mm-area); }

.mm-lam-outcome { border: 1px solid #f3ddc2; background: #fffaf3; }
.mm-lam-outcome-brand { background: var(--mm-navy); }
.mm-lam-outbox {
  border: 1.5px solid var(--mm-area); border-radius: .5rem; background: #fff;
  padding: .5rem .65rem; height: 100%; text-align: center;
}

.mm-lam-tips .list-group-item { font-size: .8rem; color: var(--mm-navy); display: flex; gap: .5rem; align-items: start; }
.mm-lam-tips i { color: var(--mm-navy); }
.mm-lam-killers .list-group-item {
  font-size: .78rem; color: #4a2020; padding-top: .35rem; padding-bottom: .35rem;
}
.mm-lam-killers .list-group-item::before {
  content: "\2716"; color: #c0392b; font-size: .7rem; margin-right: .45rem;
}

.mm-lam-res {
  display: flex; flex-direction: column; background: #fff;
  border: 1.5px solid var(--mm-area); border-radius: .7rem; overflow: hidden;
  color: inherit; transition: transform .08s ease-in-out, box-shadow .08s ease-in-out;
}
a.mm-lam-res:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(22, 50, 92, .15); }
.mm-lam-res-head { background: var(--mm-area); line-height: 1.2; }
.mm-lam-res-num {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--mm-area); color: #fff; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

.mm-lam-rhythm { border: 1.5px solid var(--mm-build-teal); background: #f4fbfa; }
.mm-lam-step {
  border: 1.5px solid var(--mm-area); border-radius: .5rem; background: #fff;
  padding: .35rem .8rem; font-weight: 700; font-size: .8rem; text-transform: uppercase;
  color: var(--mm-area); text-align: center; line-height: 1.1;
}
.mm-lam-step small { display: block; font-weight: 600; color: #6c757d; }
.mm-lam-related { border: 1.5px solid var(--mm-orange); background: #fffaf3; }
.mm-lam-simple { border: 2px solid var(--mm-navy); background: #fff; }

/* ---- LAM-R01 Right Rooms scorecard tool ---- */
:root { --mm-danger-red: #c0392b; }
.mm-r01-factor {
  background: #fff; border: 1.5px solid #dfe4ea; border-left: 5px solid var(--mm-area);
  border-radius: .7rem; padding: .9rem 1rem;
}
.mm-r01-factor .mm-lam-phase-num { margin: 0; }
.mm-r01-error { border-color: var(--mm-danger-red); }
.mm-r01-scale { display: flex; justify-content: center; gap: 1.4rem; position: relative; }
.mm-r01-scale::before {
  content: ""; position: absolute; top: 50%; left: 12%; right: 12%;
  border-top: 1.5px solid color-mix(in srgb, var(--mm-area) 45%, #fff); z-index: 0;
}
.mm-r01-dot { position: relative; z-index: 1; cursor: pointer; margin: 0; }
.mm-r01-dot input { position: absolute; opacity: 0; pointer-events: none; }
.mm-r01-dot span {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--mm-area); color: var(--mm-area);
  font-weight: 700; font-size: .85rem;
  transition: background .1s ease, color .1s ease, transform .1s ease;
}
.mm-r01-dot:hover span { transform: scale(1.1); }
.mm-r01-dot input:checked + span { background: var(--mm-area); color: #fff; }
.mm-r01-dot input:focus-visible + span { outline: 3px solid rgba(22, 50, 92, .3); outline-offset: 2px; }

.mm-r01-band { border: 1.5px solid var(--mm-area); border-radius: .6rem; overflow: hidden; background: #fff; opacity: .75; transition: opacity .15s ease, box-shadow .15s ease; }
.mm-r01-band-head { background: var(--mm-area); font-size: .85rem; }
.mm-r01-band-active { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mm-area) 35%, #fff); }
#r01Bands:not(:has(.mm-r01-band-active)) .mm-r01-band { opacity: 1; }
.mm-r01-band:has(+ *) {}
.mm-r01-chip { background: var(--mm-area); }
.mm-r01-flags { list-style: none; padding-left: 0; color: #4a2020; }
.mm-r01-flags li::before { content: "\2716"; color: var(--mm-danger-red); font-size: .7rem; margin-right: .45rem; }

/* ---- LAM-R02 One-to-One Planner tool ---- */
.mm-r02-flow {
  background: #fff; border: 1.5px solid var(--mm-area); border-radius: .6rem;
  padding: .6rem .8rem;
}
.mm-r02-panel {
  background: #fff; border: 1.5px solid var(--mm-area); border-radius: .7rem;
  overflow: hidden; display: flex; flex-direction: column;
}
.mm-r02-panel > div:last-child { background: color-mix(in srgb, var(--mm-area) 4%, #fff); flex: 1 1 auto; }
.mm-r02-panel-head { background: var(--mm-area); letter-spacing: .03em; }
.mm-r02-line input.form-control {
  border: 0; border-bottom: 1.5px solid color-mix(in srgb, var(--mm-area) 45%, #fff);
  border-radius: 0; background: transparent; padding-left: .1rem;
}
.mm-r02-line input.form-control:focus {
  box-shadow: none; border-bottom-color: var(--mm-area); background: #fff;
}
.mm-r02-panel textarea.form-control {
  border: 0; background: transparent; resize: vertical;
  background-image: repeating-linear-gradient(#0000 0 1.85em, color-mix(in srgb, var(--mm-area) 30%, #fff) 1.85em calc(1.85em + 1.5px));
  line-height: 1.9em;
}
.mm-r02-panel textarea.form-control:focus { box-shadow: none; }

/* ---- LAM-R03 Weekly Introduction builder ---- */
.mm-r03-chip {
  background: var(--mm-area); color: #fff;
  font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  border-radius: .5rem; padding: .35rem .8rem; min-width: 6.2rem; text-align: center;
  flex: 0 0 auto;
}

/* ---- LAM-R04 Nurture calendar ---- */
.mm-r04-table thead th { border: 0; }
.mm-r04-table thead tr { --bs-table-bg: transparent; }
.mm-r04-table thead th:first-child { border-top-left-radius: .45rem; }
.mm-r04-table thead th:last-child { border-top-right-radius: .45rem; }
.mm-r04-table td { vertical-align: middle; }
.mm-r04-done td { background: #f2faf4; }
.mm-r04-done input.form-control { text-decoration: line-through; color: #6c757d; }

/* ---- LAM-R05 Activity tracker ---- */
.mm-r05-grid thead th { border: 0; }
.mm-r05-grid thead tr { --bs-table-bg: transparent; }
.mm-r05-grid thead th:first-child { border-top-left-radius: .45rem; }
.mm-r05-grid thead th:last-child { border-top-right-radius: .45rem; }
.mm-r05-grid td { min-width: 5.2rem; }
.mm-r05-grid input { -moz-appearance: textfield; }
.mm-r05-grid input::-webkit-outer-spin-button,
.mm-r05-grid input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mm-r05-total td, .mm-r05-total th { background: #eef4fb; }
.mm-r05-stat {
  border: 1.5px solid var(--mm-area); border-radius: .6rem; background: #fff;
  padding: .55rem .5rem;
}
a.mm-r03-chip:hover { filter: brightness(1.08); color: #fff; }

/* ---- LAM-START 30-day guide ---- */
.mm-ls-banner {
  border: 2px solid var(--mm-orange); border-radius: .7rem; background: #fffaf3;
  transition: box-shadow .1s ease;
}
.mm-ls-banner:hover { box-shadow: 0 .35rem .8rem rgba(232, 89, 12, .18); }
.mm-ls-bignum {
  width: 3rem; height: 3rem; border-radius: 50%; margin: .5rem auto;
  border: 3px solid var(--mm-area); color: var(--mm-area);
  font-weight: 800; font-size: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.mm-ls-pointer { background: #fdf6ec; border: 1px solid #f0e2c8; border-radius: .45rem; }
.mm-ls-use { background: #f2f6fb; border: 1px solid #dbe5f1; border-radius: .45rem; }
.mm-ls-win { border: 1.5px solid var(--mm-area); border-radius: .45rem; background: #fff; }