.forceCommunitySection .cb-section_column:only-child {
  padding: 0px !important;
}

:root {
  --mcp-navy: #141E3C;

  --mcp-red: #C8323C;
  --mcp-red-dark: #A82830;
  --mcp-red-tint: #FBE9EA;

  --mcp-blue: #26407F;
  --mcp-blue-dark: #1C3166;
  --mcp-blue-ring: rgba(38, 64, 127, .18);

  --mcp-ink: #1F2A44;
  --mcp-muted: #5B6478;
  --mcp-soft-text: #C9CFDD;
  --mcp-line: #E3E6EC;
  --mcp-line-strong: #D5D9E1;
  --mcp-soft: #F4F5F8;
  --mcp-ease: cubic-bezier(.2, .7, .2, 1);
  --mcp-shadow-card: 0 10px 30px rgba(20, 30, 60, .08);
}

html { scroll-behavior: smooth; }

/* ---------- Animations ---------- */
@keyframes mcp-fade-up  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mcp-slide-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes mcp-grow-x   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mcp-grow-y   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mcp-travel-y {
  0%   { top: 30px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% - 78px); opacity: 0; }
}
@keyframes mcp-drift { from { transform: translate(0, 0); } to { transform: translate(-40px, 30px); } }
@keyframes mcp-rise  { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes mcp-flash {
  0%   { box-shadow: 0 0 0 4px var(--mcp-red); }
  100% { box-shadow: 0 0 0 4px rgba(200, 50, 60, 0); }
}

/* ---------- Resets for HTML Editor output ---------- */
.mcp-hero, .mcp-how, .mcp-creds {
  color: var(--mcp-ink);
  box-sizing: border-box;
}
.mcp-hero *, .mcp-how *, .mcp-creds * { box-sizing: border-box; }
.mcp-hero h1, .mcp-how h2, .mcp-how h3, .mcp-creds h2, .mcp-creds h3 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.mcp-hero p, .mcp-how p, .mcp-creds p { margin: 0 !important; padding: 0 !important; }

/* ---------- Shared ---------- */
.mcp-rule {
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 14px;
  background: var(--mcp-red);
}
.mcp-how .mcp-h2, .mcp-creds .mcp-h2 {
  font-size: clamp(24px, 2.6vw, 30px) !important;
  font-weight: 700;
  color: var(--mcp-navy) !important;
}
.mcp-how .mcp-sub, .mcp-creds .mcp-sub {
  margin-top: 8px !important;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mcp-muted);
}

/* =========================================================
   1. HERO
   ========================================================= */
.mcp-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 24px;
  background: var(--mcp-navy);
  color: #fff;
}
.mcp-hero::before,
.mcp-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.mcp-hero::before {
  width: 620px; height: 620px;
  top: -300px; right: -240px;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 70px rgba(255, 255, 255, .02), 0 0 0 140px rgba(255, 255, 255, .015);
  animation: mcp-drift 18s ease-in-out infinite alternate;
}
.mcp-hero::after {
  width: 360px; height: 360px;
  bottom: -220px; left: -140px;
  border: 1px solid rgba(255, 255, 255, .06);
  animation: mcp-drift 22s ease-in-out infinite alternate-reverse;
}

.mcp-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 56px;
  max-width: 1120px;
  margin: 0 auto;
}

.mcp-hero__rule {
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--mcp-red);
  transform-origin: left;
  animation: mcp-grow-x .6s var(--mcp-ease) .1s both;
}
.mcp-hero__eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  animation: mcp-fade-up .6s var(--mcp-ease) .2s both;
}
.mcp-hero .mcp-hero__title {
  margin-top: 14px !important;
  font-size: clamp(30px, 4vw, 46px) !important;
  font-weight: 700;
  line-height: 1.15;
  color: #fff !important;
  animation: mcp-fade-up .7s var(--mcp-ease) .3s both;
}
.mcp-hero .mcp-hero__lead {
  max-width: 480px;
  margin-top: 18px !important;
  font-size: 17px;
  line-height: 1.6;
  color: var(--mcp-soft-text);
  animation: mcp-fade-up .7s var(--mcp-ease) .4s both;
}
.mcp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  animation: mcp-fade-up .7s var(--mcp-ease) .5s both;
}

.mcp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--mcp-ease), box-shadow .2s;
}
.mcp-btn--primary {
  background: var(--mcp-red);
  border: 1px solid var(--mcp-red);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(200, 50, 60, .28);
}
.mcp-btn--primary:hover {
  background: var(--mcp-red-dark);
  border-color: var(--mcp-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(200, 50, 60, .34);
}
.mcp-btn__arrow { transition: transform .2s var(--mcp-ease); }
.mcp-btn:hover .mcp-btn__arrow { transform: translateX(3px); }
.mcp-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff !important;
}
.mcp-btn--ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: #fff;
  transform: translateY(-2px);
}
.mcp-btn:focus-visible,
.mcp-path__item:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .7);
  outline-offset: 3px;
}

/* ---------- Vertical pathway ---------- */
.mcp-path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
}
.mcp-path::before {
  content: "";
  position: absolute;
  top: 40px; bottom: 40px; left: 44px;
  width: 2px;
  background: rgba(255, 255, 255, .16);
  transform-origin: top;
  animation: mcp-grow-y 1.2s var(--mcp-ease) .6s both;
}
.mcp-path::after {
  content: "";
  position: absolute;
  left: 44px; top: 30px;
  width: 2px;
  height: 48px;
  background: linear-gradient(180deg, transparent, var(--mcp-red), transparent);
  animation: mcp-travel-y 4.5s linear 2.4s infinite both;
}
.mcp-path__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 10px;
  border-radius: 10px;
  color: #fff !important;
  text-decoration: none !important;
  transition: background-color .2s;
  animation: mcp-slide-in .5s var(--mcp-ease) both;
}
.mcp-path__item:nth-child(1) { animation-delay: .70s; }
.mcp-path__item:nth-child(2) { animation-delay: .80s; }
.mcp-path__item:nth-child(3) { animation-delay: .90s; }
.mcp-path__item:nth-child(4) { animation-delay: 1.00s; }
.mcp-path__item:nth-child(5) { animation-delay: 1.10s; }
.mcp-path__item:nth-child(6) { animation-delay: 1.20s; }
.mcp-path__item:nth-child(7) { animation-delay: 1.30s; }

.mcp-path__dot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mcp-navy);
  border: 2px solid rgba(255, 255, 255, .5);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--mcp-ease);
}
.mcp-path__name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #D9DDE7;
  transition: color .2s, transform .25s var(--mcp-ease);
}
a.mcp-path__item:hover,
a.mcp-path__item:focus-visible { background: rgba(255, 255, 255, .07); }
a.mcp-path__item:hover .mcp-path__dot,
a.mcp-path__item:focus-visible .mcp-path__dot {
  background: #fff;
  border-color: #fff;
  color: var(--mcp-navy);
  transform: scale(1.08);
}
a.mcp-path__item:hover .mcp-path__name,
a.mcp-path__item:focus-visible .mcp-path__name {
  color: #fff;
  transform: translateX(4px);
}

/* =========================================================
   2. HOW REGISTRATION WORKS (card beside the flow)
   ========================================================= */
.mcp-how {
  position: relative;
  margin: 40px 12px 40px 0;
  padding: 32px 28px 24px;
  background: #fff;
  border: 1px solid var(--mcp-line);
  border-top: 4px solid var(--mcp-red);
  border-radius: 12px;
  box-shadow: var(--mcp-shadow-card);
  scroll-margin-top: 100px;
}

/* Vertical divider between this card and the flow (desktop only).
   Adjust "right" if it isn't centred in the gap between columns. */
.mcp-how::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: -13px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--mcp-line-strong) 15%,
    var(--mcp-line-strong) 85%,
    transparent
  );
  pointer-events: none;
}

.mcp-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
}

/* Connector line (number centre = 12px row padding + 20px half-circle) */
.mcp-steps::before {
  content: "";
  position: absolute;
  top: 36px; bottom: 36px; left: 31px;
  width: 2px;
  background: var(--mcp-line);
}

.mcp-step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 12px;
  border-radius: 10px;
  transition: background-color .2s;
}
.mcp-step:hover { background: var(--mcp-soft); }

.mcp-step__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--mcp-line-strong);
  font-size: 15px;
  font-weight: 700;
  color: var(--mcp-navy);
  transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--mcp-ease);
}
.mcp-step:hover .mcp-step__num {
  border-color: var(--mcp-red);
  color: var(--mcp-red);
  transform: scale(1.06);
}

.mcp-step__body { padding-top: 1px; min-width: 0; }
.mcp-how .mcp-step__title {
  font-size: 16px !important;
  font-weight: 600;
  color: var(--mcp-navy) !important;
}
.mcp-how .mcp-step__text {
  margin-top: 4px !important;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mcp-muted);
}

/* "You're here": highlights the step matching what the flow shows.
   Step 1 = registration screen 1 (your inFirstName field)
         OR registration screen 2 (the only screen with dropdowns).
   Step 3 = file upload component. */
body:has(.forceCommunityFlowCommunity input[name="inFirstName"]) .mcp-step--1,
body:has(.forceCommunityFlowCommunity select.slds-select) .mcp-step--1,
body:has(.forceCommunityFlowCommunity .slds-file-selector) .mcp-step--3 {
  background: var(--mcp-red-tint);
}
body:has(.forceCommunityFlowCommunity input[name="inFirstName"]) .mcp-step--1 .mcp-step__num,
body:has(.forceCommunityFlowCommunity select.slds-select) .mcp-step--1 .mcp-step__num,
body:has(.forceCommunityFlowCommunity .slds-file-selector) .mcp-step--3 .mcp-step__num {
  background: var(--mcp-red);
  border-color: var(--mcp-red);
  color: #fff;
}
body:has(.forceCommunityFlowCommunity input[name="inFirstName"]) .mcp-step--1 .mcp-step__body::after,
body:has(.forceCommunityFlowCommunity select.slds-select) .mcp-step--1 .mcp-step__body::after,
body:has(.forceCommunityFlowCommunity .slds-file-selector) .mcp-step--3 .mcp-step__body::after {
  content: "You're here";
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--mcp-red);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
}

/* =========================================================
   3. MICROCREDENTIALS (navy section)
   ========================================================= */
.mcp-creds {
  position: relative;
  overflow: hidden;
  padding: 80px 24px 88px;
  background-color: var(--mcp-navy);
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  scroll-margin-top: 80px;
}
.mcp-creds__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}
.mcp-creds__head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}
.mcp-creds__head .mcp-rule { margin: 0 auto 14px; }
.mcp-creds .mcp-creds__head .mcp-h2 { color: #fff !important; }
.mcp-creds .mcp-creds__head .mcp-sub { color: var(--mcp-soft-text); }

/* 4 + 3 layout, last row centred */
.mcp-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.mcp-card {
  position: relative;
  overflow: hidden;
  flex: 0 1 calc((100% - 60px) / 4);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 28px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  scroll-margin-top: 120px;
  transition: transform .3s var(--mcp-ease), box-shadow .3s;
}

/* Red top bar that sweeps in */
.mcp-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  width: 100%;
  height: 4px;
  background: var(--mcp-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--mcp-ease);
}

/* Soft corner shape */
.mcp-card::after {
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  z-index: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--mcp-soft);
  transition: transform .5s var(--mcp-ease), background-color .3s;
}
.mcp-card > * { position: relative; z-index: 1; }

.mcp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .28);
}
.mcp-card:hover::before { transform: scaleX(1); }
.mcp-card:hover::after  { transform: scale(1.3); background: var(--mcp-red-tint); }

.mcp-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: var(--mcp-navy);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  transition: background-color .25s, transform .3s var(--mcp-ease);
}
.mcp-card:hover .mcp-card__num {
  background: var(--mcp-red);
  transform: rotate(-6deg);
}

.mcp-creds .mcp-card__title {
  font-size: 17px !important;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mcp-navy) !important;
}
.mcp-creds .mcp-card__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mcp-muted);
}

.mcp-card:target { animation: mcp-flash 1.8s ease-out; }

@supports (animation-timeline: view()) {
  .mcp-card:not(:target) {
    animation: mcp-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

/* =========================================================
   4. SCREEN FLOW
   ========================================================= */
.forceCommunityFlowCommunity.slds-card {
  margin: 40px 0 40px 12px !important;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--mcp-line) !important;
  border-top: 4px solid var(--mcp-red) !important;
  border-radius: 12px !important;
  box-shadow: var(--mcp-shadow-card) !important;
  color: var(--mcp-ink);
}
.forceCommunityFlowCommunity .flowruntimeBody { padding: 0 !important; }
.forceCommunityFlowCommunity flowruntime-progress-indicator:empty { display: none; }

.forceCommunityFlowCommunity lightning-formatted-rich-text:not(.slds-form-element__label) b,
.forceCommunityFlowCommunity lightning-formatted-rich-text:not(.slds-form-element__label) strong {
  font-weight: 700;
  color: var(--mcp-navy);
}

.forceCommunityFlowCommunity .flowruntime-input-label .slds-form-element__label,
.forceCommunityFlowCommunity label.slds-form-element__label {
  display: inline-block;
  margin: 0 0 6px;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--mcp-navy);
  letter-spacing: .2px;
}
.forceCommunityFlowCommunity abbr.slds-required {
  margin: 0 3px 0 0;
  color: var(--mcp-red);
  text-decoration: none;
  cursor: default;
}
.forceCommunityFlowCommunity .field-element .container { margin-bottom: 16px !important; }

/* Inputs */
.forceCommunityFlowCommunity .slds-input,
.forceCommunityFlowCommunity .slds-select,
.forceCommunityFlowCommunity .slds-combobox__input,
.forceCommunityFlowCommunity .slds-textarea {
  min-height: 44px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--mcp-ink);
  background: #fff;
  border: 1px solid var(--mcp-line-strong);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.forceCommunityFlowCommunity .slds-textarea { min-height: 96px; padding: 10px 12px; }
.forceCommunityFlowCommunity .slds-input-has-icon_left .slds-input  { padding-left: 2.25rem; }
.forceCommunityFlowCommunity .slds-input-has-icon_right .slds-input { padding-right: 2.5rem; }
.forceCommunityFlowCommunity .slds-input::placeholder,
.forceCommunityFlowCommunity .slds-textarea::placeholder { color: #9AA1B0; }
.forceCommunityFlowCommunity .slds-input:hover,
.forceCommunityFlowCommunity .slds-select:hover,
.forceCommunityFlowCommunity .slds-textarea:hover,
.forceCommunityFlowCommunity .slds-combobox__input:hover { border-color: #9AA1B0; }
.forceCommunityFlowCommunity .slds-input:focus,
.forceCommunityFlowCommunity .slds-select:focus,
.forceCommunityFlowCommunity .slds-textarea:focus,
.forceCommunityFlowCommunity .slds-combobox__input:focus {
  outline: none;
  border-color: var(--mcp-blue);
  box-shadow: 0 0 0 3px var(--mcp-blue-ring);
}
.forceCommunityFlowCommunity lightning-datepicker .slds-button__icon { fill: var(--mcp-muted); }

/* Errors */
.forceCommunityFlowCommunity .slds-has-error .slds-input,
.forceCommunityFlowCommunity .slds-has-error .slds-select,
.forceCommunityFlowCommunity .slds-has-error .slds-textarea,
.forceCommunityFlowCommunity .slds-has-error .slds-combobox__input {
  background: #FFFBFB;
  border-color: var(--mcp-red);
  box-shadow: 0 0 0 1px var(--mcp-red);
}
.forceCommunityFlowCommunity .slds-has-error .slds-input__icon { fill: var(--mcp-red); }
.forceCommunityFlowCommunity .slds-has-error .slds-form-element__help,
.forceCommunityFlowCommunity [data-error-message] {
  margin-top: 4px;
  font-size: 12px;
  color: var(--mcp-red);
}

/* File upload (step 3) */
.forceCommunityFlowCommunity .slds-file-selector__dropzone {
  padding: 16px;
  border: 2px dashed var(--mcp-line-strong);
  border-radius: 10px;
  background: var(--mcp-soft);
  transition: border-color .2s, background-color .2s;
}
.forceCommunityFlowCommunity .slds-file-selector__dropzone:hover,
.forceCommunityFlowCommunity .slds-file-selector__dropzone.slds-has-drag-over {
  border-color: var(--mcp-blue);
  background: #EEF2FA;
}

/* ---------- Footer / buttons ---------- */
.forceCommunityFlowCommunity .navigationBar.slds-card__footer {
  margin: 12px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--mcp-line);
  background: transparent;
}
.forceCommunityFlowCommunity .navigationBar .navigation-bar__right-align {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.forceCommunityFlowCommunity .navigationBar lightning-button { flex: none; }

/* Back sits on the left, forward actions on the right */
.forceCommunityFlowCommunity .navigationBar .flow-button__BACK { margin-right: auto; }

.forceCommunityFlowCommunity .navigationBar .slds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  height: 46px;
  margin: 0;
  padding: 0 26px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s var(--mcp-ease);
}

/* Next / Begin / Register / Complete Registration */
.forceCommunityFlowCommunity .navigationBar .slds-button_brand {
  background: var(--mcp-blue) !important;
  border: 1px solid var(--mcp-blue) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(38, 64, 127, .22);
}
.forceCommunityFlowCommunity .navigationBar .slds-button_brand:hover {
  background: var(--mcp-blue-dark) !important;
  border-color: var(--mcp-blue-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(38, 64, 127, .30);
}
.forceCommunityFlowCommunity .navigationBar .slds-button_brand:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(38, 64, 127, .2);
}

/* Arrow on forward buttons */
.forceCommunityFlowCommunity .navigationBar .flow-button__NEXT .slds-button::after,
.forceCommunityFlowCommunity .navigationBar .flow-button__FINISH .slds-button::after {
  content: "→";
  display: inline-block;
  transition: transform .2s var(--mcp-ease);
}
.forceCommunityFlowCommunity .navigationBar .flow-button__NEXT .slds-button:hover::after,
.forceCommunityFlowCommunity .navigationBar .flow-button__FINISH .slds-button:hover::after {
  transform: translateX(4px);
}

/* Back / Pause */
.forceCommunityFlowCommunity .navigationBar .slds-button_neutral {
  background: #fff !important;
  border: 1px solid var(--mcp-line-strong) !important;
  color: var(--mcp-navy) !important;
  box-shadow: none;
}
.forceCommunityFlowCommunity .navigationBar .slds-button_neutral:hover {
  background: var(--mcp-soft) !important;
  border-color: #9AA1B0 !important;
}
.forceCommunityFlowCommunity .navigationBar .flow-button__BACK .slds-button::before {
  content: "←";
  display: inline-block;
  transition: transform .2s var(--mcp-ease);
}
.forceCommunityFlowCommunity .navigationBar .flow-button__BACK .slds-button:hover::before {
  transform: translateX(-4px);
}

.forceCommunityFlowCommunity .navigationBar .slds-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--mcp-blue-ring);
}

/* =========================================================
   5. RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .mcp-card { flex-basis: calc((100% - 40px) / 3); }
}

@media (max-width: 900px) {
  .mcp-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mcp-path { display: none; }
}

@media (max-width: 860px) {
  .mcp-card { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 767px) {
  .mcp-hero { padding: 56px 20px 52px; }
  .mcp-hero .mcp-hero__lead { font-size: 16px; }
  .mcp-how { margin: 24px 0 12px; padding: 24px 18px 16px; }
  .mcp-how::after { display: none; } /* columns stack, so no divider */
  .mcp-creds { padding: 56px 20px 64px; }
  .forceCommunityFlowCommunity.slds-card { margin: 12px 0 32px !important; padding: 20px 16px; }
}

@media (max-width: 560px) {
  .mcp-card { flex-basis: 100%; }
  .mcp-hero__actions { flex-direction: column; }
  .mcp-btn { width: 100%; justify-content: center; }

  /* Full-width, easy-to-tap flow buttons on phones */
  .forceCommunityFlowCommunity .navigationBar lightning-button { flex: 1; }
  .forceCommunityFlowCommunity .navigationBar .slds-button { width: 100%; min-width: 0; padding: 0 16px; }
}

/* =========================================================
   6. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mcp-hero::before, .mcp-hero::after,
  .mcp-hero *, .mcp-hero *::before, .mcp-hero *::after,
  .mcp-how *, .mcp-creds *, .mcp-creds *::before, .mcp-creds *::after,
  .forceCommunityFlowCommunity .navigationBar .slds-button,
  .forceCommunityFlowCommunity .navigationBar .slds-button::before,
  .forceCommunityFlowCommunity .navigationBar .slds-button::after {
    animation: none !important;
    transition: none !important;
  }
}