/*
 * FCMM editorial theme for every surface below the navy/gold Hero.
 * The Hero deliberately remains isolated in its original deep-navy / gold system.
 */
:root {
  --fcmm-red: #ec1c24;
  --fcmm-red-deep: #b70912;
  --fcmm-ink: #101010;
  --fcmm-paper: #fbfaf8;
  --fcmm-line: #e7e2dd;
  --fcmm-gold: #c8a45b;
}

.desktop-live > :not(.fcmm-hero),
.page-app,
.mobile-home > :not(.mobile-nav):not(.mobile-hero) {
  color: var(--fcmm-ink);
  background: var(--fcmm-paper);
}

.desktop-live > :not(.fcmm-hero) .eyebrow,
.page-app .eyebrow,
.mobile-home > :not(.mobile-nav):not(.mobile-hero) .eyebrow {
  color: var(--fcmm-red) !important;
  letter-spacing: .28em;
  font-weight: 800;
}

.desktop-live > :not(.fcmm-hero) .gold-text,
.page-app .gold-text,
.mobile-home > :not(.mobile-nav):not(.mobile-hero) .gold-text {
  color: var(--fcmm-red) !important;
}

/* Why FCMM: a clean paper-led opening after the Hero. */
.replica-intro {
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 9vw, 130px) max(5vw, 48px) !important;
  gap: clamp(32px, 7vw, 110px) !important;
  background:
    radial-gradient(circle at 0 100%, rgba(236, 28, 36, .07), transparent 32%),
    linear-gradient(135deg, #fff 0%, #fbfaf8 72%, #f5f1eb 100%) !important;
  border-bottom: 1px solid var(--fcmm-line);
}

.replica-intro::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 12%;
  bottom: 12%;
  left: 49%;
  width: 1px;
  background: linear-gradient(transparent, var(--fcmm-red), transparent);
  opacity: .34;
}

.replica-intro h2,
.replica-products h2,
.replica-benefits h2,
.mobile-intro h2,
.mobile-products h2 {
  color: var(--fcmm-ink) !important;
  font-weight: 650;
  letter-spacing: -.055em;
}

.replica-intro h2 em,
.replica-products h2 em,
.replica-benefits h2 em,
.mobile-intro h2 em,
.mobile-products h2 em {
  color: var(--fcmm-red) !important;
  font-style: normal;
}

.replica-intro .values {
  gap: 0 !important;
  align-items: stretch;
}

.replica-intro .values article {
  position: relative;
  padding: 18px 24px 18px 78px !important;
  border-left: 1px solid var(--fcmm-line);
  background: transparent !important;
}

.replica-intro .values article:first-child { border-left: 0; }
.replica-intro .values article > span {
  position: absolute;
  left: 24px;
  top: 18px;
  color: var(--fcmm-red) !important;
  font-size: 2rem;
  font-weight: 800;
}
.replica-intro .values h3 { color: var(--fcmm-ink) !important; }
.replica-intro .values p { color: #56524d !important; }

/* Broker / borrower dual card treatment. */
.replica-paths {
  padding: clamp(42px, 6vw, 82px) max(4vw, 32px) !important;
  gap: 24px !important;
  background: #fff !important;
}

.replica-paths > a {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  border-radius: 8px !important;
  border: 1px solid var(--fcmm-line);
  box-shadow: none !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.replica-paths > a:hover { transform: translateY(-5px); box-shadow: 0 18px 30px rgba(16, 16, 16, .14) !important; }
.replica-paths > a:first-child {
  background:
    repeating-radial-gradient(ellipse at 103% 25%, transparent 0 10px, rgba(236, 28, 36, .62) 11px 12px, transparent 13px 22px),
    linear-gradient(135deg, #080808, #181818) !important;
  color: #fff !important;
  border-color: #171717;
}
.replica-paths > a:first-child::after {
  content: '';
  position: absolute;
  right: -13%; bottom: -45%; width: 70%; height: 145%;
  border: 1px solid rgba(236, 28, 36, .65);
  border-radius: 50%;
  box-shadow: -20px 0 0 -19px rgba(236, 28, 36, .5), -40px 0 0 -39px rgba(236, 28, 36, .36);
  pointer-events: none;
}
.replica-paths > a:nth-child(2) {
  background:
    repeating-radial-gradient(ellipse at 102% 100%, transparent 0 13px, rgba(236, 28, 36, .55) 14px 15px, transparent 16px 26px),
    #fff !important;
  color: var(--fcmm-ink) !important;
}
.replica-paths > a span,
.replica-paths > a i { color: var(--fcmm-red) !important; }
.replica-paths > a b { color: inherit !important; }
.replica-paths > a p { color: inherit !important; opacity: .78; }
.replica-paths > a i {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  color: #fff !important;
  background: var(--fcmm-red);
  font-style: normal;
  font-weight: 750;
}
.replica-paths > a:nth-child(2) i { color: #fff !important; }

/* Products become sharp white cards with red information markers. */
.replica-products {
  padding: clamp(64px, 8vw, 112px) max(4vw, 32px) !important;
  background: #fff !important;
}
.replica-section-title {
  border-bottom: 1px solid var(--fcmm-line);
  padding-bottom: 28px;
  margin-bottom: 20px !important;
}
.replica-section-title a,
.text-link,
.download,
.arrow {
  color: var(--fcmm-red) !important;
  font-weight: 800;
  text-decoration-color: currentColor;
  text-underline-offset: 6px;
}
.replica-product-grid {
  gap: 0 !important;
  border: 1px solid var(--fcmm-line);
  border-radius: 4px;
  overflow: hidden;
}
.replica-product-grid > a {
  min-height: 208px;
  padding: 26px 20px !important;
  color: var(--fcmm-ink) !important;
  background: #fff !important;
  border-right: 1px solid var(--fcmm-line);
  border-bottom: 1px solid var(--fcmm-line);
}
.replica-product-grid > a:hover { background: #fff4f4 !important; }
.replica-product-grid > a:first-letter,
.replica-product-grid > a > :first-child { color: var(--fcmm-red) !important; }
.replica-product-grid > a b { color: var(--fcmm-ink) !important; }
.replica-product-grid > a small { color: #5f5a55 !important; }
.replica-product-grid > a i { color: var(--fcmm-red) !important; font-style: normal; }

/* Process is intentionally near-black with red numbered waypoints. */
.replica-process {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 108px) max(4vw, 32px) !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 92% 100%, rgba(236, 28, 36, .36), transparent 27%),
    linear-gradient(135deg, #101010, #050505) !important;
}
.replica-process::after,
.replica-ready::after {
  content: '';
  position: absolute;
  right: -6vw;
  bottom: -10vw;
  width: 42vw;
  height: 30vw;
  border: 1px solid rgba(236, 28, 36, .8);
  border-radius: 50%;
  transform: rotate(-19deg);
  box-shadow: 0 0 0 13px rgba(236, 28, 36, .08), 0 0 0 28px rgba(236, 28, 36, .04);
  pointer-events: none;
}
.replica-process h2,
.replica-process p,
.replica-process strong,
.replica-process span { color: #fff !important; }
.replica-process ol { border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); }
.replica-process ol li { border-left-color: rgba(255,255,255,.2) !important; }
.replica-process ol li b {
  color: #fff !important;
  background: var(--fcmm-red) !important;
  border-color: var(--fcmm-red) !important;
}

.replica-benefits {
  padding: clamp(58px, 7vw, 100px) max(4vw, 32px) !important;
  background: #fff !important;
}
.replica-benefits > div:last-child {
  gap: 0 !important;
  border-top: 1px solid var(--fcmm-line);
}
.replica-benefits article {
  min-height: 156px;
  padding: 28px 22px !important;
  border-left: 1px solid var(--fcmm-line);
  background: transparent !important;
}
.replica-benefits article:first-child { border-left: 0; }
.replica-benefits article:first-letter,
.replica-benefits article > :first-child { color: var(--fcmm-red) !important; }
.replica-benefits article b { color: var(--fcmm-ink) !important; }
.replica-benefits article span { color: #625d57 !important; }

.replica-ready {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(62px, 7vw, 95px) max(4vw, 32px) !important;
  color: #fff !important;
  background: linear-gradient(108deg, #171717, #090909 58%, #271013) !important;
}
.replica-ready > * { position: relative; z-index: 1; }
.replica-ready h2,
.replica-ready p { color: #fff !important; }
.replica-ready .gold-button,
.page-app .button.primary,
.page-app .button.secondary,
.page-app .button:not(.button-outline) {
  color: #fff !important;
  background: var(--fcmm-red) !important;
  border-color: var(--fcmm-red) !important;
  box-shadow: none !important;
}
.replica-ready .gold-button:hover,
.page-app .button.primary:hover,
.page-app .button.secondary:hover,
.page-app .button:not(.button-outline):hover { background: var(--fcmm-red-deep) !important; border-color: var(--fcmm-red-deep) !important; }
.replica-ready em { color: var(--fcmm-gold) !important; }

/* All inner application routes inherit the same editorial palette. */
body.app-route { background: var(--fcmm-paper) !important; }
.page-app { min-height: 100vh; }
.site-nav {
  color: #fff !important;
  background: #111 !important;
  border-bottom: 2px solid var(--fcmm-red) !important;
}
.site-nav a { color: #fff !important; }
.site-nav .links a.active,
.site-nav .links a:hover,
.site-nav .utility-login { color: var(--fcmm-red) !important; }
.site-nav .contact-link { color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
.site-nav .contact-link:hover { background: var(--fcmm-red) !important; border-color: var(--fcmm-red) !important; }
.page-hero {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  background:
    radial-gradient(circle at 88% 30%, rgba(236, 28, 36, .4), transparent 26%),
    linear-gradient(110deg, #121212, #050505) !important;
  border-bottom: 1px solid var(--fcmm-red) !important;
}
.page-hero::after {
  content: '';
  position: absolute;
  right: 6%; bottom: -82%; width: 36%; height: 165%;
  border: 1px solid rgba(236,28,36,.75); border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(236,28,36,.09), 0 0 0 27px rgba(236,28,36,.05);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1,
.page-hero .lead { color: #fff !important; }
.page-hero em { color: var(--fcmm-red) !important; }
.page-app main { background: var(--fcmm-paper) !important; }
.section-heading { border-bottom: 1px solid var(--fcmm-line); padding-bottom: 24px; }
.section-heading h2,
.page-app h2,
.page-app h3 { color: var(--fcmm-ink) !important; }
.page-app p { color: #514e49; }
.product-card,
.resource-card,
.info-card,
.portal-card,
.metric,
.calculator-form,
.calc-result,
.table-wrap,
.auth-panel {
  background: #fff !important;
  border: 1px solid var(--fcmm-line) !important;
  box-shadow: none !important;
}
.product-card:hover,
.resource-card:hover,
.info-card:hover,
.portal-card:hover { border-color: var(--fcmm-red) !important; box-shadow: 0 13px 25px rgba(16,16,16,.1) !important; }
.product-card .icon,
.info-card .icon,
.portal-card .icon,
.resource-card .tag,
.tag,
.latest { color: var(--fcmm-red) !important; }
.latest { background: #fff0f0 !important; }
.split-panel { border: 1px solid var(--fcmm-line); }
.visual-panel,
.dark-strip,
.portal-top {
  color: #fff !important;
  background:
    radial-gradient(circle at 90% 90%, rgba(236,28,36,.35), transparent 31%),
    #111 !important;
}
.visual-panel h2,
.visual-panel p,
.dark-strip h2,
.dark-strip p,
.portal-top h2,
.portal-top p { color: #fff !important; }
.timeline { border-top-color: var(--fcmm-line) !important; }
.timeline li b { color: #fff !important; background: var(--fcmm-red) !important; border-color: var(--fcmm-red) !important; }
.calculator { border: 1px solid var(--fcmm-line); background: #fff; }
.calc-result { background: #111 !important; }
.calc-result strong,
.calc-result p { color: #fff !important; }
.calc-result .eyebrow { color: var(--fcmm-gold) !important; }
.portal-shell { background: var(--fcmm-paper) !important; }
.tabs { border-bottom-color: var(--fcmm-line) !important; }
.tab.active { color: var(--fcmm-red) !important; border-bottom-color: var(--fcmm-red) !important; }
.pill.current,
.pill.live { color: #fff !important; background: var(--fcmm-red) !important; }
.pill.expiring { color: #9a6500 !important; background: #fff3ce !important; }
.pill.expired,
.pill.missing { color: #fff !important; background: #242424 !important; }
.broker-activity { border-top-color: var(--fcmm-line) !important; }
.broker-activity button { border-color: var(--fcmm-line) !important; background: #fff !important; }
.broker-activity button:hover { border-color: var(--fcmm-red) !important; }
.history-list li { border-bottom: 1px solid var(--fcmm-line); }
.history-list span { color: #726d66; }

/* The original mobile Hero remains navy/gold; following mobile sections switch to paper/red/black. */
.mobile-nav,
.mobile-hero { background-color: #03182b !important; }
.mobile-stats {
  color: var(--fcmm-ink) !important;
  background: #fff !important;
  border-bottom: 1px solid var(--fcmm-line);
}
.mobile-stats strong { color: var(--fcmm-red) !important; }
.mobile-stats span { color: #514e49 !important; }
.mobile-intro,
.mobile-products { background: #fff !important; }
.mobile-paths { background: #fff !important; }
.mobile-paths a:first-child { color: #fff !important; background: linear-gradient(135deg, #090909, #1d1112) !important; border-color: #101010 !important; }
.mobile-paths a:nth-child(2) { color: var(--fcmm-ink) !important; background: #fff !important; border: 1px solid var(--fcmm-line); }
.mobile-paths a i,
.mobile-paths a span { color: var(--fcmm-red) !important; }
.mobile-process,
.mobile-ready { color: #fff !important; background: #111 !important; }
.mobile-process h2,
.mobile-process li,
.mobile-ready h2,
.mobile-ready p { color: #fff !important; }
.mobile-process li b { background: var(--fcmm-red) !important; color: #fff !important; }
.mobile-footer,
.site-footer { color: #fff !important; background: #0d0d0d !important; border-top: 2px solid var(--fcmm-red); }
.mobile-footer a,
.site-footer a,
.site-footer p,
.site-footer h3 { color: #fff !important; }
.mobile-footer a:hover,
.site-footer a:hover { color: var(--fcmm-red) !important; }

@media (max-width: 760px) {
  .replica-intro::before { display: none; }
  .replica-intro .values article { border-left: 0; border-top: 1px solid var(--fcmm-line); }
  .replica-intro .values article:first-child { border-top: 0; }
  .replica-paths > a { min-height: 310px; }
  .replica-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .replica-product-grid > a { min-height: 165px; }
  .replica-benefits article { border-left: 0; border-top: 1px solid var(--fcmm-line); }
  .replica-benefits article:first-child { border-top: 0; }
  .replica-process::after,
  .replica-ready::after { width: 92vw; height: 70vw; right: -42vw; bottom: -25vw; }
  .site-nav.menu-open .links { background: #111 !important; border: 1px solid rgba(255,255,255,.18); }
  .site-nav.menu-open .links a { border-bottom-color: rgba(255,255,255,.12) !important; }
  .page-hero::after { width: 78%; right: -22%; }
}

@media (prefers-reduced-motion: reduce) {
  .replica-paths > a { transition: none; }
}

/* Eliminate legacy blue from secondary-page and authentication surfaces. */
.app-route .page-hero::before {
  z-index: 0;
  background:
    radial-gradient(circle at 82% 24%, rgba(236, 28, 36, .52), transparent 24%),
    repeating-linear-gradient(0deg, transparent 0 51px, rgba(255,255,255,.035) 52px),
    repeating-linear-gradient(90deg, transparent 0 51px, rgba(255,255,255,.025) 52px) !important;
}

.auth-shell { background: #111 !important; }
.auth-intro {
  color: #fff !important;
  background:
    radial-gradient(circle at 72% 23%, rgba(236, 28, 36, .35), transparent 18%),
    radial-gradient(circle at 80% 92%, rgba(236, 28, 36, .18), transparent 33%),
    #111 !important;
}
.auth-intro::after {
  border-color: rgba(236, 28, 36, .66) !important;
  box-shadow: 0 0 0 34px rgba(236, 28, 36, .07), 0 0 0 68px rgba(236, 28, 36, .035) !important;
}
.auth-intro .eyebrow,
.auth-intro li::before { color: var(--fcmm-red) !important; }
.auth-intro > p:not(.eyebrow),
.auth-intro ul { color: rgba(255,255,255,.78) !important; }
.auth-panel { background: var(--fcmm-paper) !important; }
.auth-back { color: var(--fcmm-ink) !important; }
.auth-form h2 { color: var(--fcmm-ink) !important; }
.auth-form input:focus { outline-color: var(--fcmm-red) !important; border-color: var(--fcmm-red) !important; }
.social-auth button:hover { color: #fff !important; background: var(--fcmm-red) !important; border-color: var(--fcmm-red) !important; }


/* Single FCMM type system: one dependable sans-serif family across every route and surface. */
:root {
  --fcmm-font: 'DM Sans', Arial, Helvetica, sans-serif;
  --sans: var(--fcmm-font);
  --serif: var(--fcmm-font);
}
body, button, input, select, textarea {
  font-family: var(--fcmm-font);
}
.fcmm-hero {
  --sans: var(--fcmm-font);
  --serif: var(--fcmm-font);
}
.auth-intro h1,
.auth-form h2 {
  font-family: var(--fcmm-font) !important;
}