:root { --navy: #031c30; --navy-2: #082944; --ink: #10284b; --gold: #d6ad61; --gold-light: #f5d28a; --cream: #f6f3ec; --line: rgba(214, 173, 97, .28); --sans: 'DM Sans', Arial, Helvetica, sans-serif; --serif: 'DM Sans', Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.desktop-reference { position: relative; width: 100%; line-height: 0; overflow: hidden; }
.reference-image { display: block; width: 100%; height: auto; }
.hotspot-layer { position: absolute; inset: 0; }
.hotspot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); border-radius: 999px; outline: none; }
.hotspot:hover { background: rgba(246, 208, 132, .07); box-shadow: inset 0 0 0 1px rgba(246, 208, 132, .38); }
.hotspot:focus-visible { background: rgba(246, 208, 132, .14); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mobile-home, .application, .toast { display: none; }

/* Shared application chrome */
.application.page-app { display: block; min-height: 100vh; background: #f8f6f0; }
.application .site-nav { display: flex; min-height: 76px; align-items: center; justify-content: space-between; padding: 0 5vw; color: #fff; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.12); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 14px; line-height: 1.02; font-weight: 700; }
.mark { display: grid; place-items: center; width: 30px; height: 30px; transform: rotate(45deg); background: #fff; color: #c6403e; font-weight: 900; font-size: 20px; line-height: 1; border-radius: 2px; }
.mark::first-letter { transform: rotate(-45deg); }
.site-nav .brand-line { display: flex; align-items: center; gap: 9px; }
.site-nav .links { display: flex; align-items: center; gap: 22px; font-size: 12px; color: rgba(255,255,255,.82); }
.site-nav .links a:hover, .site-nav .links a.active { color: var(--gold-light); }
.site-nav .contact-link { border: 1px solid var(--gold); border-radius: 999px; padding: 11px 18px; color: #fff; font-size: 12px; }
.site-nav .contact-link:hover { background: var(--gold); color: var(--navy); }
.application main { max-width: 1180px; margin: 0 auto; padding: 68px 5vw 112px; }
.breadcrumb { color: #997b43; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.application h1, .application h2, .application h3 { font-family: var(--serif); font-weight: 500; }
.application h1 { max-width: 760px; margin: 14px 0 16px; color: var(--ink); font-size: clamp(43px, 6vw, 78px); letter-spacing: -.05em; line-height: .96; }
.application h1 em, .application h2 em { color: #ba9250; font-weight: 400; }
.application .lead { max-width: 620px; margin: 0; color: #536071; font-size: 17px; line-height: 1.55; }
.page-hero { position: relative; overflow: hidden; padding: 78px 5vw 90px; color: #fff; background: radial-gradient(circle at 78% 22%, rgba(222, 176, 84, .34), transparent 19%), linear-gradient(115deg, #06182b 10%, #092d4e 56%, #06182b 100%); }
.page-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to right, #000, transparent); }
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: rgba(255,255,255,.8); }
.gold-button, .line-button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 46px; padding: 0 21px; border-radius: 999px; font-size: 13px; font-weight: 800; transition: transform .2s ease, background .2s ease, color .2s ease; cursor: pointer; }
.gold-button, .button.primary { color: #152136; background: linear-gradient(100deg, #f7dda0, #c99b4a); border: 1px solid #efd391; }
.gold-button:hover, .button.primary:hover { transform: translateY(-2px); background: #f7dc9e; }
.line-button, .button.secondary { color: #fff; background: transparent; border: 1px solid var(--gold); }
.line-button:hover, .button.secondary:hover { background: rgba(214,173,97,.15); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.info-card, .product-card, .resource-card, .portal-card { border: 1px solid #dfe2e0; background: #fff; padding: 28px; box-shadow: 0 10px 28px rgba(12, 29, 47, .05); }
.info-card .icon, .product-card .icon, .portal-card .icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(214,173,97,.6); border-radius: 50%; color: #ae843d; font-size: 20px; }
.info-card h3, .product-card h3, .resource-card h3, .portal-card h3 { margin: 20px 0 9px; font-size: 25px; line-height: 1; }
.info-card p, .product-card p, .resource-card p, .portal-card p { color: #657082; font-size: 14px; line-height: 1.5; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 76px; }
.section-heading h2 { margin: 8px 0 0; font-size: clamp(31px, 4vw, 51px); letter-spacing: -.04em; }
.text-link { display: inline-block; color: var(--gold-light); font-size: 13px; font-weight: 800; }
.text-link.dark { color: #9c783e; }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.dark-strip { padding: 68px 5vw; background: var(--navy); color: #fff; }
.dark-strip .content { max-width: 1180px; margin: 0 auto; }
.dark-strip h2 { margin: 8px 0 30px; font-size: clamp(32px, 4vw, 52px); font-family: var(--serif); font-weight: 500; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.product-card { min-height: 212px; color: #fff; background: linear-gradient(145deg, #123d62, #062038); border-color: rgba(134,187,226,.23); box-shadow: none; }
.product-card h3 { font-size: 22px; }
.product-card p { color: rgba(255,255,255,.72); }
.product-card .arrow { display: inline-grid; width: 29px; height: 29px; margin-top: 18px; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); }
.split-panel { display: grid; grid-template-columns: 1.03fr .97fr; gap: 60px; align-items: center; margin-top: 56px; }
.split-panel .visual-panel { min-height: 365px; padding: 44px; color: #fff; background: linear-gradient(145deg, rgba(2,24,43,.96), rgba(3,34,57,.7)), url('/assets/fcmm-home-reference.png') center 20%/cover; }
.split-panel .visual-panel h2 { margin-top: 110px; color: #fff; font-size: 48px; }
.timeline { display: grid; gap: 14px; }
.timeline li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; list-style: none; padding: 17px 0; border-bottom: 1px solid #dbe0e3; }
.timeline b { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #d5ad63; border-radius: 50%; color: #a47d3c; font-family: var(--serif); }
.timeline h3 { margin: 4px 0 6px; font-size: 23px; }
.timeline p { margin: 0; color: #657082; font-size: 14px; line-height: 1.45; }
.table-wrap { margin-top: 35px; overflow-x: auto; border: 1px solid #e0e3e0; background: #fff; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
th { padding: 14px 18px; color: #7b6539; background: #fbf8f0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
td { padding: 17px 18px; border-top: 1px solid #e9ecea; color: #34465e; }
.pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pill.current { color: #0d6b55; background: #d9f0e7; }.pill.expiring { color: #8a6015; background: #faedc7; }.pill.expired { color: #a43338; background: #f8dbdd; }.pill.missing { color: #6d6775; background: #e8e7e9; }.pill.live { color: #1a5b93; background: #e0edf9; }
.portal-shell { padding-top: 42px; }
.portal-top { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 28px 32px; color: #fff; background: linear-gradient(115deg, #061a2d, #11466f); }
.portal-top h2 { margin: 0 0 5px; font-size: 32px; }.portal-top p { margin: 0; color: rgba(255,255,255,.68); font-size: 13px; }
.tabs { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px; border: 1px solid #e1e4e1; background: #fff; }
.tab { padding: 10px 13px; border: 0; color: #59687a; background: transparent; font: 700 12px var(--sans); cursor: pointer; }.tab:hover, .tab.active { color: var(--navy); background: #f6eddb; }
.tab-panel { padding: 24px 0; }.tab-panel[hidden] { display: none; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 20px 0; }.metric { padding: 20px; border: 1px solid #e1e5e3; background: #fff; }.metric strong { display: block; color: var(--ink); font: 42px/1 var(--serif); }.metric span { display: block; margin-top: 8px; color: #647184; font-size: 12px; }
.calculator { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; margin-top: 42px; }.calculator-form, .calc-result { padding: 32px; background: #fff; border: 1px solid #dfe3df; }.calculator-form label { display: grid; gap: 8px; margin-bottom: 17px; color: #526175; font-size: 12px; font-weight: 800; }.calculator-form input { width: 100%; padding: 13px; border: 1px solid #ccd5d8; color: var(--ink); font: 16px var(--sans); }.calc-result { color: #fff; background: linear-gradient(145deg,#082e4e,#031c30); }.calc-result strong { display: block; margin: 17px 0 4px; color: var(--gold-light); font: 47px/1 var(--serif); }.calc-result p { color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.5; }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 42px; }.resource-card { min-height: 210px; position: relative; }.resource-card .tag { color: #a47d3c; font-size: 10px; font-weight: 800; letter-spacing: .13em; }.resource-card .latest { position: absolute; top: 18px; right: 18px; color: #11765b; background: #d9f0e7; padding: 4px 7px; font-size: 9px; font-weight: 800; }.resource-card .download { display: inline-flex; margin-top: 15px; color: #9b783f; font-size: 12px; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 40px; }.form-grid label { display: grid; gap: 8px; color: #526175; font-size: 12px; font-weight: 800; }.form-grid label.full { grid-column: 1/-1; }.form-grid input, .form-grid textarea, .chat-input { padding: 13px; border: 1px solid #cdd6d8; font: 14px var(--sans); }.form-grid textarea { min-height: 135px; resize: vertical; }.form-actions { margin-top: 18px; }
.site-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 25px; padding: 52px 5vw; color: #fff; background: var(--navy); }.site-footer h3 { margin: 0 0 13px; font-family: var(--serif); font-size: 23px; font-weight: 400; }.site-footer p, .site-footer a { display: block; margin: 6px 0; color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.45; }.site-footer a:hover { color: var(--gold-light); }
.chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: inline-grid; width: 56px; height: 56px; place-items: center; border: 1px solid #f3cf82; border-radius: 50%; color: #11243e; background: linear-gradient(135deg,#f9dea0,#c99b49); box-shadow: 0 10px 25px rgba(1,18,34,.28); font-size: 21px; cursor: pointer; }.chat-fab:hover { transform: translateY(-2px); }.chat-window { position: fixed; right: 24px; bottom: 92px; z-index: 20; width: min(370px, calc(100vw - 38px)); overflow: hidden; background: #fff; box-shadow: 0 20px 55px rgba(2,22,40,.28); }.chat-window[hidden] { display: none; }.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; color: #fff; background: var(--navy); }.chat-head strong { display: block; font-size: 14px; }.chat-head small { display: block; margin-top: 3px; color: var(--gold-light); font-size: 10px; }.chat-close { border: 0; color: #fff; background: none; font-size: 20px; cursor: pointer; }.chat-body { max-height: 280px; overflow: auto; padding: 17px; }.chat-message { margin: 0 0 11px; padding: 10px 12px; color: #405066; background: #f2f5f4; font-size: 13px; line-height: 1.45; }.chat-message.user { margin-left: 35px; color: #fff; background: #123b5d; }.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e4e8e7; }.chat-input { flex: 1; min-width: 0; padding: 10px; }.chat-send { padding: 0 12px; border: 0; color: #fff; background: var(--navy); cursor: pointer; }.toast { position: fixed; left: 50%; bottom: 28px; z-index: 50; max-width: calc(100vw - 30px); padding: 12px 16px; transform: translate(-50%, 90px); color: #fff; background: #092b49; box-shadow: 0 8px 30px rgba(0,0,0,.25); font-size: 13px; opacity: 0; transition: transform .25s ease, opacity .25s ease; }.toast.show { display: block; transform: translate(-50%, 0); opacity: 1; }

/* Mobile homepage only; the desktop image remains the exact visual source at larger widths. */
@media (max-width: 767px) { .desktop-reference { display: none; }.mobile-home { display: block; background: #fff; }.mobile-nav { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 20px; background: var(--navy); }.mobile-contact { padding: 9px 13px; border: 1px solid var(--gold); border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; }.mobile-hero { padding: 50px 23px 57px; color: #fff; background: linear-gradient(105deg, rgba(3,22,40,.95), rgba(3,28,48,.5)), url('/assets/fcmm-home-reference.png') 72% 6%/auto 460px no-repeat, var(--navy); }.eyebrow { margin: 0; color: var(--gold-light); font-size: 9px; font-weight: 800; letter-spacing: .2em; }.gold-text { color: #a97f3d; }.mobile-hero h1 { max-width: 300px; margin: 14px 0 8px; font: 51px/.95 var(--serif); letter-spacing: -.05em; }.mobile-hero h1 em, .mobile-intro em { color: var(--gold-light); font-weight: 400; }.hero-lede { max-width: 275px; margin: 0 0 12px; font: 26px/1.04 var(--serif); }.mobile-hero > p:not(.eyebrow):not(.hero-lede) { max-width: 250px; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.45; }.cta-row { display: grid; gap: 11px; margin-top: 26px; }.cta-row .line-button { width: fit-content; }.mobile-stats { display: grid; grid-template-columns: 1fr 1fr; padding: 18px 22px; color: #fff; background: #062741; gap: 16px; }.mobile-stats div { padding-left: 10px; border-left: 1px solid rgba(219,176,89,.4); }.mobile-stats strong { display: block; color: #f3d188; font: 27px var(--serif); }.mobile-stats span { display: block; margin-top: 4px; color: rgba(255,255,255,.76); font-size: 9px; font-weight: 700; text-transform: uppercase; }.mobile-intro, .mobile-process { padding: 45px 23px; }.mobile-intro h2, .mobile-process h2, .mobile-ready h2 { margin: 8px 0 13px; font: 37px/.98 var(--serif); letter-spacing: -.04em; }.mobile-intro p:not(.eyebrow), .mobile-ready p { color: #536071; font-size: 14px; line-height: 1.55; }.mobile-paths { display: grid; gap: 12px; padding: 0 14px 38px; }.mobile-paths a { display: grid; min-height: 220px; align-content: start; padding: 25px; color: #fff; background: linear-gradient(125deg, rgba(3,22,39,.96), rgba(9,48,75,.56)), url('/assets/fcmm-home-reference.png') center/cover; }.mobile-paths a:nth-child(2) { background-position: 78% 48%; }.mobile-paths span { color: var(--gold-light); font-size: 9px; font-weight: 800; letter-spacing: .16em; }.mobile-paths b { max-width: 250px; margin-top: 12px; font: 35px/.9 var(--serif); }.mobile-paths small { max-width: 250px; margin-top: 12px; color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.35; }.mobile-paths i { margin-top: auto; color: var(--gold-light); font-size: 12px; font-style: normal; font-weight: 800; }.mobile-products { padding: 42px 23px; color: #fff; background: var(--navy); }.mobile-products h2 { margin: 8px 0 23px; font: 33px/.98 var(--serif); }.mini-products { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 21px; }.mini-products a { padding: 16px 10px; border: 1px solid rgba(142,195,232,.3); color: rgba(255,255,255,.9); background: #0c3557; font-size: 12px; }.mobile-process ol { display: grid; gap: 12px; padding: 0; list-style: none; }.mobile-process li { display: flex; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid #e1e4e1; color: #4e6075; font-size: 13px; font-weight: 700; }.mobile-process b { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #cfa760; border-radius: 50%; color: #996f31; font-family: var(--serif); }.mobile-ready { padding: 45px 23px; color: #fff; background: linear-gradient(90deg, rgba(1,20,33,.83), rgba(1,20,33,.13)), url('/assets/fcmm-home-reference.png') 50% 86%/cover; }.mobile-ready p { color: rgba(255,255,255,.78); }.mobile-ready .gold-button { margin-top: 15px; }.mobile-footer { display: grid; gap: 22px; padding: 31px 23px; color: #fff; background: #03182a; }.mobile-footer > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.mobile-footer a { color: rgba(255,255,255,.7); font-size: 12px; }.mobile-footer .wordmark { color: #fff; }.application .site-nav { padding: 14px 20px; }.site-nav .links { display: none; }.application main { padding: 47px 22px 88px; }.page-hero { padding: 50px 22px; }.card-grid, .resource-grid, .product-grid, .stats-grid { grid-template-columns: 1fr; }.product-grid { gap: 12px; }.section-heading { display: block; margin-top: 50px; }.section-heading .text-link { margin-top: 15px; }.split-panel, .calculator { grid-template-columns: 1fr; gap: 24px; }.split-panel .visual-panel { min-height: 270px; }.split-panel .visual-panel h2 { margin-top: 65px; font-size: 40px; }.form-grid { grid-template-columns: 1fr; }.form-grid label.full { grid-column: auto; }.site-footer { grid-template-columns: 1fr; padding: 42px 22px; }.portal-top { display: block; padding: 23px; }.portal-top .button { margin-top: 15px; }.tabs { overflow-x: auto; flex-wrap: nowrap; }.tab { white-space: nowrap; }.chat-fab { right: 16px; bottom: 16px; }.chat-window { right: 16px; bottom: 81px; }.calculator-form, .calc-result { padding: 23px; } }
@media (min-width: 768px) { .mobile-home { display: none; } }


/* Live desktop reconstruction used when the supplied reference cannot be copied into the local workspace. */
.desktop-live { overflow: hidden; color: var(--ink); background: #fff; font-family: var(--sans); line-height: 1.2; }
.desktop-live * { box-sizing: border-box; }
.replica-nav { display: flex; min-height: 72px; align-items: center; gap: 34px; padding: 0 6%; color: #fff; background: #03182b; }
.replica-nav .wordmark { min-width: 160px; }
.replica-nav nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: clamp(15px, 2vw, 30px); }
.replica-nav nav a { padding: 28px 0 22px; color: rgba(255,255,255,.79); border-bottom: 2px solid transparent; font-size: 12px; white-space: nowrap; }
.replica-nav nav a:hover, .replica-nav nav a.active { color: #fff; border-color: var(--gold); }
.replica-contact { padding: 12px 20px; border: 1px solid var(--gold); border-radius: 999px; color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.replica-contact:hover { color: var(--navy); background: var(--gold); }
.replica-hero { display: grid; grid-template-columns: 45% 55%; min-height: 430px; padding: 54px 6% 42px; color: #fff; overflow: hidden; background: radial-gradient(circle at 68% 26%, rgba(235,185,83,.32), transparent 3%), radial-gradient(circle at 63% 42%, rgba(29,87,127,.55), transparent 30%), linear-gradient(121deg, #03192c 9%, #073157 72%, #031729); }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { margin: 10px 0 4px; color: #fff; font: clamp(57px, 6vw, 88px)/.85 var(--serif); letter-spacing: -.06em; }
.hero-copy h1 em { color: #e2b661; font-weight: 400; }
.hero-copy h2 { margin: 12px 0; color: #fff; font: clamp(24px, 2.5vw, 37px)/.97 var(--serif); font-weight: 500; letter-spacing: -.03em; }
.hero-copy > p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.84); font-size: 15px; line-height: 1.22; }
.hero-copy .cta-row { display: flex; gap: 13px; margin-top: 21px; }
.map-stage { position: relative; min-height: 324px; }
.map-stage > p { position: absolute; top: 12px; right: 0; color: rgba(255,255,255,.72); font-size: 9px; font-weight: 800; letter-spacing: .18em; line-height: 1.45; }
.map-shape { position: absolute; right: 7%; top: 42px; width: min(440px, 82%); height: 255px; filter: drop-shadow(0 0 17px rgba(225,179,73,.55)); background: radial-gradient(circle at 20% 48%, #f7d377 0 4px, transparent 5px), radial-gradient(circle at 49% 23%, #ffe093 0 4px, transparent 5px), radial-gradient(circle at 67% 43%, #f7d377 0 4px, transparent 5px), radial-gradient(circle at 75% 64%, #f7d377 0 4px, transparent 5px), radial-gradient(circle at 38% 73%, #f7d377 0 4px, transparent 5px), radial-gradient(circle at 58% 84%, #f7d377 0 4px, transparent 5px), radial-gradient(circle at 87% 32%, #f7d377 0 4px, transparent 5px), radial-gradient(circle at 90% 76%, #f7d377 0 4px, transparent 5px), linear-gradient(155deg, rgba(28,80,119,.74), rgba(2,22,42,.92)); clip-path: polygon(7% 41%, 12% 25%, 25% 22%, 38% 10%, 52% 12%, 64% 24%, 77% 18%, 89% 31%, 84% 43%, 96% 48%, 84% 59%, 84% 73%, 72% 78%, 62% 92%, 45% 87%, 38% 96%, 23% 82%, 12% 70%, 0 58%); border: 1px solid #d6ad61; }
.map-shape::after { position: absolute; inset: 0; content: ''; background: repeating-linear-gradient(25deg, transparent 0 31px, rgba(231,191,102,.62) 32px 33px, transparent 34px 59px), repeating-linear-gradient(142deg, transparent 0 45px, rgba(231,191,102,.54) 46px 47px, transparent 48px 75px); mix-blend-mode: screen; }
.map-shape i { position: absolute; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: #ffe8aa; box-shadow: 0 0 16px 5px rgba(255,200,84,.95); }
.map-shape i:nth-child(1) { left: 18%; top: 47%; }.map-shape i:nth-child(2) { left: 48%; top: 21%; }.map-shape i:nth-child(3) { left: 66%; top: 43%; }.map-shape i:nth-child(4) { left: 75%; top: 63%; }.map-shape i:nth-child(5) { left: 37%; top: 72%; }.map-shape i:nth-child(6) { left: 57%; top: 84%; }.map-shape i:nth-child(7) { left: 86%; top: 31%; }.map-shape i:nth-child(8) { left: 89%; top: 76%; }.map-shape i:nth-child(9) { left: 28%; top: 30%; }
.map-line { position: absolute; z-index: 3; height: 1px; transform-origin: left center; background: linear-gradient(90deg, transparent, #f7d377, transparent); }.line-a { left: 14%; top: 54%; width: 62%; transform: rotate(-19deg); }.line-b { left: 30%; top: 25%; width: 55%; transform: rotate(33deg); }.line-c { left: 22%; top: 73%; width: 56%; transform: rotate(-39deg); }
.replica-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 20px 6%; color: #fff; background: #042038; }
.replica-stats > div { display: grid; grid-template-columns: 35px 1fr; column-gap: 11px; padding: 0 19px; border-right: 1px solid rgba(255,255,255,.15); }.replica-stats > div:first-child { padding-left: 0; }.replica-stats > div:last-child { border: 0; }
.replica-stats b { grid-row: span 3; color: #e8bc67; font-size: 31px; }.replica-stats strong { color: #f4ce7b; font: 29px var(--serif); }.replica-stats span { margin-top: 2px; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .13em; }.replica-stats small { margin-top: 6px; color: rgba(255,255,255,.67); font-size: 9px; line-height: 1.3; }
.replica-intro { display: grid; grid-template-columns: .95fr 1.55fr; gap: 35px; padding: 46px 6% 28px; }.replica-intro h2 { margin: 8px 0 13px; font: clamp(31px, 3.4vw, 50px)/.94 var(--serif); letter-spacing: -.05em; }.replica-intro h2 em { color: #bb9451; font-weight: 400; }.replica-intro > div > p:not(.eyebrow) { max-width: 410px; color: #506077; font-size: 13px; line-height: 1.42; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); }.values article { padding: 10px 20px; text-align: center; border-left: 1px solid #e1e4e1; }.values article:first-child { border: 0; }.values span { display: inline-grid; width: 47px; height: 47px; place-items: center; border-radius: 50%; color: #b38b45; background: #fbf6e9; font-size: 24px; }.values h3 { margin: 11px 0 6px; font: 22px/.9 var(--serif); }.values p { margin: 0; color: #627087; font-size: 11px; line-height: 1.35; }
.replica-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; padding: 0 3% 19px; }.replica-paths a { position: relative; display: flex; min-height: 209px; flex-direction: column; padding: 25px; overflow: hidden; color: #fff; background: linear-gradient(125deg, rgba(3,22,38,.94), rgba(10,47,70,.56)), radial-gradient(circle at 70% 50%, rgba(239,187,76,.75), transparent 2%), linear-gradient(134deg,#102b45,#5d6b70 55%,#e6ac62); }.replica-paths a:nth-child(2) { background: linear-gradient(125deg, rgba(3,22,38,.91), rgba(10,47,70,.36)), linear-gradient(134deg,#3b5263,#dba15f 50%,#213e52); }.replica-paths a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.18); }.replica-paths span { color: #f5d28a; font-size: 9px; font-weight: 800; letter-spacing: .18em; }.replica-paths b { margin-top: 9px; font: 39px/.88 var(--serif); letter-spacing: -.04em; }.replica-paths p { margin: 13px 0; font-size: 13px; line-height: 1.25; }.replica-paths i { margin-top: auto; color: #162237; background: linear-gradient(100deg,#f5d99c,#d1a250); width: fit-content; padding: 11px 19px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 800; }
.replica-products { padding: 35px 4.5% 29px; color: #fff; background: #041f37; }.replica-section-title { position: relative; padding: 0 1.5%; }.replica-section-title h2 { margin: 7px 0 19px; font: 31px/.96 var(--serif); }.replica-section-title a { position: absolute; top: 9px; right: 0; color: #f2ce80; font-size: 11px; font-weight: 800; }.replica-product-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }.replica-product-grid a { display: flex; min-height: 155px; flex-direction: column; padding: 14px 12px; border: 1px solid rgba(124,177,216,.28); border-radius: 4px; color: #eac572; background: linear-gradient(160deg, rgba(17,58,90,.85), rgba(5,33,57,.85)); font-size: 26px; }.replica-product-grid a:hover { background: #154b74; }.replica-product-grid b { margin-top: 11px; color: #fff; font: 15px/1 var(--serif); }.replica-product-grid small { margin-top: 7px; color: rgba(255,255,255,.72); font-size: 9px; line-height: 1.25; }.replica-product-grid i { display: grid; width: 22px; height: 22px; margin-top: auto; place-items: center; border: 1px solid #c99c50; border-radius: 50%; color: #e4bc6e; font-size: 12px; font-style: normal; }
.replica-process { display: grid; grid-template-columns: 1fr 2.4fr; gap: 24px; align-items: center; padding: 35px 6% 30px; }.replica-process h2, .replica-benefits h2 { margin: 7px 0 10px; font: 31px/.95 var(--serif); }.replica-process p:not(.eyebrow), .replica-benefits p:not(.eyebrow) { margin: 0; color: #566479; font-size: 12px; line-height: 1.35; }.replica-process ol { display: grid; grid-template-columns: repeat(4,1fr); padding: 0; list-style: none; }.replica-process li { position: relative; display: grid; gap: 5px; justify-items: center; text-align: center; }.replica-process li:not(:last-child)::after { position: absolute; top: 17px; left: 60%; width: 79%; height: 1px; content: ''; background: #c9a45e; }.replica-process b { position: relative; z-index: 1; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #c9a45e; border-radius: 50%; color: #a77f3e; background: #fff; font: 20px var(--serif); }.replica-process strong { color: #203452; font-size: 11px; }.replica-process span { max-width: 106px; color: #687388; font-size: 9px; line-height: 1.2; }
.replica-benefits { display: grid; grid-template-columns: 1.1fr 2.1fr; gap: 30px; padding: 23px 6% 34px; border-top: 1px solid #e4e7e3; }.replica-benefits > div:last-child { display: grid; grid-template-columns: repeat(5,1fr); }.replica-benefits article { display: grid; gap: 6px; padding: 0 12px; border-left: 1px solid #e0e4e2; color: #b08740; font-size: 25px; }.replica-benefits article b { color: #253b5a; font-size: 10px; }.replica-benefits article span { color: #627087; font-size: 9px; line-height: 1.2; }
.replica-ready { position: relative; min-height: 158px; padding: 27px 6%; overflow: hidden; color: #fff; background: linear-gradient(90deg, rgba(1,21,36,.88), rgba(1,21,36,.13)), linear-gradient(10deg,#18241b 0 15%, transparent 15% 100%), radial-gradient(ellipse at 85% 20%, #f8d889 0 3%, #e5a75d 8%, #597173 34%, #0c263c 72%); }.replica-ready h2 { margin: 8px 0 4px; font: 35px/.95 var(--serif); }.replica-ready > p:not(.eyebrow) { margin: 0 0 15px; color: rgba(255,255,255,.82); font-size: 14px; }.replica-ready em { position: absolute; top: 30px; right: 8%; color: #f6d899; font: 20px/1.05 var(--serif); transform: rotate(-6deg); }.replica-ready .gold-button { min-height: 36px; font-size: 11px; }
.replica-footer { display: grid; grid-template-columns: 1.2fr .9fr 1.45fr 1.3fr .9fr; align-items: start; gap: 17px; padding: 28px 6% 22px; color: #fff; background: #03182b; }.replica-footer > p { margin: 11px 0 0; color: #e3bd72; font-size: 8px; font-weight: 800; letter-spacing: .16em; }.replica-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; }.replica-footer nav a, .replica-footer address { color: rgba(255,255,255,.71); font-size: 10px; font-style: normal; line-height: 1.35; }.replica-footer address a { color: rgba(255,255,255,.82); }.replica-footer > i { color: #f0d08f; font: 18px/1 var(--serif); transform: rotate(-5deg); }

/* Asset-independent visual fallback for secondary pages and compact home view. */
.split-panel .visual-panel { background: linear-gradient(145deg, rgba(2,24,43,.96), rgba(8,54,82,.72)), radial-gradient(circle at 72% 20%, rgba(236,185,85,.67), transparent 3%), linear-gradient(135deg,#0a2239,#31586b 52%,#c79050) !important; }
@media (max-width: 767px) { .mobile-hero { background: linear-gradient(105deg, rgba(3,22,40,.97), rgba(3,28,48,.55)), radial-gradient(circle at 78% 18%, rgba(232,182,81,.7), transparent 3%), linear-gradient(135deg,#071d32,#0c4266) !important; }.mobile-paths a { background: linear-gradient(125deg, rgba(3,22,39,.96), rgba(9,48,75,.56)), linear-gradient(135deg,#0a2239,#68808a 60%,#d5944e) !important; }.mobile-paths a:nth-child(2) { background: linear-gradient(125deg, rgba(3,22,39,.91), rgba(10,47,70,.36)), linear-gradient(135deg,#263d50,#d79952 55%,#1d425b) !important; }.mobile-ready { background: linear-gradient(90deg, rgba(1,20,33,.88), rgba(1,20,33,.18)), radial-gradient(circle at 85% 13%, #f9d889 0 3%, #e2a35b 11%, #597174 43%, #0d263b 92%) !important; } }
@media (max-width: 980px) and (min-width: 768px) { .replica-nav { gap: 18px; padding: 0 3%; }.replica-nav nav { gap: 12px; }.replica-nav nav a { font-size: 10px; }.replica-contact { padding: 9px 12px; font-size: 10px; }.replica-hero { min-height: 385px; padding-left: 4%; padding-right: 4%; }.replica-product-grid a { padding: 10px 8px; }.replica-product-grid b { font-size: 12px; }.replica-product-grid small { font-size: 8px; }.replica-intro, .replica-process, .replica-benefits { padding-left: 4%; padding-right: 4%; }.replica-footer { padding-left: 4%; padding-right: 4%; } }


/* Official FC Mortgage Management wordmark supplied by the client. */
.official-wordmark { min-width: 0 !important; }
.official-logo { display: block; width: 168px; height: auto; padding: 4px 7px; border-radius: 3px; background: #fff; }
.site-nav .official-logo { width: 150px; }
.replica-footer .official-logo { width: 145px; }
.mobile-nav .official-logo { width: 152px; }
.mobile-footer .official-logo { width: 154px; }
@media (max-width: 980px) and (min-width: 768px) { .replica-nav .official-logo { width: 145px; } }

/* Reversed official logo for navy navigation and footer surfaces. */
.official-logo {
  padding: 0;
  background: transparent;
  filter: brightness(0) invert(1);
}

/* The transformed asset is already white with the FC red mark retained. */
.official-logo { filter: none; }


/* Interaction, responsive navigation and premium surface upgrade. */
.app-route { background: #f6f4ee; }
.app-route .page-hero { position: relative; overflow: hidden; isolation: isolate; }
.app-route .page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 75% 28%, rgba(238,191,93,.22), transparent 20%), radial-gradient(circle at 62% 78%, rgba(31,89,128,.36), transparent 34%); }
.app-route .product-card, .app-route .resource-card, .app-route .info-card, .app-route .portal-card, .metric { transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.app-route .product-card:hover, .app-route .resource-card:hover, .app-route .info-card:hover, .app-route .portal-card:hover, .metric:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(3,29,50,.13); }
.site-nav { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px); }
.utility-login { color: #f5d28a; font-size: .78rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.menu-toggle, .mobile-menu-toggle { display: none; border: 0; background: transparent; padding: 8px; cursor: pointer; }
.menu-toggle span, .mobile-menu-toggle span { display: block; width: 23px; height: 2px; margin: 4px 0; background: currentColor; }
.broker-utility { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.outline-button { appearance: none; border: 1px solid rgba(245,210,138,.65); border-radius: 999px; background: transparent; color: #fff; padding: 10px 14px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.notice-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 4px; border-radius: 50%; background: #f5d28a; color: #06223a; font-size: .66rem; }
.broker-activity { margin-top: 32px; padding: 25px; border: 1px solid rgba(8,42,70,.13); background: #fff; display: grid; grid-template-columns: .7fr 1.3fr; gap: 26px; }
.broker-activity h3 { margin: 0; color: #092640; font-size: 1.55rem; }
.activity-list { display: grid; gap: 1px; background: rgba(8,42,70,.12); }
.activity-list button { display: grid; grid-template-columns: 72px 1fr auto; gap: 15px; align-items: center; text-align: left; padding: 16px; border: 0; background: #fbfaf6; color: #102a47; cursor: pointer; font: inherit; }
.activity-list button:hover { background: #fff4d8; }
.activity-list b { color: #b8852f; font-size: .82rem; text-transform: uppercase; }
.activity-list i { color: #8f6725; font-style: normal; font-size: .79rem; font-weight: 700; }
.resource-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; padding: 18px; background: #fff; border: 1px solid rgba(8,42,70,.12); }
.resource-toolbar label { display: grid; gap: 7px; color: #102a47; font-weight: 700; font-size: .82rem; width: min(100%, 420px); }
.resource-toolbar input { width: 100%; padding: 12px 14px; border: 1px solid #ccd3da; font: inherit; }
.interaction-modal[hidden] { display: none; }
.interaction-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,20,36,.66); backdrop-filter: blur(4px); }
.modal-card { position: relative; z-index: 1; width: min(100%, 560px); max-height: min(720px, 88vh); overflow: auto; padding: 34px; background: #fbfaf6; box-shadow: 0 28px 70px rgba(0,0,0,.3); }
.modal-card h2 { margin: 0 0 20px; color: #092640; font-size: clamp(1.7rem, 3vw, 2.45rem); }
.modal-close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 0; background: transparent; color: #092640; font-size: 1.8rem; cursor: pointer; }
.modal-form { display: grid; gap: 16px; }
.modal-form label, .auth-form label { display: grid; gap: 8px; color: #102a47; font-size: .84rem; font-weight: 700; }
.modal-form input, .modal-form select, .auth-form input { min-height: 46px; box-sizing: border-box; width: 100%; padding: 11px 13px; border: 1px solid #cbd1d5; background: #fff; color: #102a47; font: inherit; }
.dropzone { padding: 20px; border: 1px dashed #a78342; background: #fff6e3; text-align: center; }
.dropzone input { margin-top: 8px; border: 0; background: transparent; padding: 0; }
.notification-list { display: grid; gap: 10px; margin: 0 0 22px; }
.notification-list article { padding: 15px; background: #f3f0e8; border-left: 3px solid #c79c52; }
.notification-list b { color: #102a47; }
.notification-list p { margin: 6px 0 0; line-height: 1.5; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, .95fr) minmax(440px, 1.05fr); background: #06223a; }
.auth-intro { position: relative; padding: clamp(34px, 7vw, 100px); color: #fff; overflow: hidden; background: radial-gradient(circle at 76% 24%, rgba(244,198,109,.28), transparent 16%), radial-gradient(circle at 50% 75%, rgba(24,92,138,.36), transparent 31%), #06223a; }
.auth-intro::after { content: ''; position: absolute; width: 420px; height: 420px; right: -150px; bottom: -180px; border: 1px solid rgba(245,210,138,.38); border-radius: 50%; box-shadow: 0 0 0 34px rgba(245,210,138,.06), 0 0 0 68px rgba(245,210,138,.04); }
.auth-intro .official-logo { width: 176px; height: auto; }
.auth-intro .eyebrow { margin-top: clamp(72px, 14vh, 155px); color: #f5d28a; }
.auth-intro h1 { max-width: 620px; margin: 16px 0; font-size: clamp(3rem, 5vw, 5.7rem); line-height: .93; font-family: var(--sans); }
.auth-intro > p:not(.eyebrow) { max-width: 550px; color: #d9e4ee; font-size: 1.08rem; line-height: 1.6; }
.auth-intro ul { position: relative; z-index: 1; display: grid; gap: 13px; margin: 40px 0 0; padding: 0; list-style: none; color: #f8f4ea; }
.auth-intro li::before { content: '✦'; color: #f5d28a; padding-right: 10px; }
.auth-panel { display: grid; align-content: center; padding: clamp(32px, 7vw, 96px); background: #fbfaf6; }
.auth-back { margin-bottom: 38px; color: #33526e; font-weight: 700; }
.auth-form { width: min(100%, 470px); display: grid; gap: 17px; }
.auth-form h2 { margin: -8px 0 8px; color: #092640; font-size: clamp(2.2rem, 4vw, 3.3rem); font-family: var(--sans); }
.auth-form .field-action { position: relative; display: block; }
.show-password { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #8f6725; font-weight: 700; cursor: pointer; }
.form-inline { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.check { display: flex !important; grid-template-columns: auto 1fr; align-items: start; gap: 9px !important; line-height: 1.4; }
.check input { width: 17px; min-height: 17px; margin-top: 2px; }
.text-button { padding: 0; border: 0; background: transparent; color: #896126; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; text-align: left; }
.auth-helper { margin: 0; color: #66778a; font-size: .76rem; line-height: 1.5; }
.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: #8090a0; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: #d7dce0; }
.social-auth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.social-auth button { min-height: 42px; padding: 7px; border: 1px solid #ccd3da; background: #fff; color: #102a47; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.social-auth button:hover { background: #f6eddb; border-color: #b68a41; }
.auth-switch { margin: 4px 0 0; font-size: .88rem; color: #52677b; }
.auth-switch a { color: #896126; font-weight: 700; }
.step-indicator { display: flex; align-items: center; gap: 8px; color: #8e6729; font-size: .8rem; font-weight: 700; }
.step-indicator span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #b78b42; border-radius: 50%; }
.step-indicator .done, .step-indicator .active { background: #b78b42; color: #fff; }
.step-indicator i { width: 30px; height: 1px; background: #b78b42; }
.step-indicator small { margin-left: 4px; }
.auth-complete { padding: 10px 0; }
.auth-complete .icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border-radius: 50%; background: #dcebdc; color: #1d6636; font-size: 1.7rem; }

@media (max-width: 840px) {
  .site-nav { position: relative; grid-template-columns: 1fr auto; min-height: 68px; padding: 0 20px; }
  .site-nav .brand-line { grid-column: 1; }
  .site-nav .official-logo { max-width: 145px; }
  .menu-toggle { display: block; grid-column: 2; color: #fff; }
  .site-nav .links { display: none; }
  .site-nav.menu-open .links { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; display: grid; gap: 0; padding: 10px 20px 18px; background: #06223a; box-shadow: 0 16px 32px rgba(0,0,0,.24); }
  .site-nav.menu-open .links a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .contact-link, .utility-login { display: none; }
  .page-hero { padding: 70px 24px 82px !important; }
  .page-hero h1 { max-width: 750px; font-size: clamp(2.55rem, 11vw, 4.4rem) !important; }
  .page-hero .lead { font-size: 1rem; }
  main { width: min(100% - 40px, 1140px); }
  .section-heading { align-items: start; gap: 16px; }
  .product-grid, .resource-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calculator, .split-panel, .broker-activity { grid-template-columns: 1fr; }
  .portal-top { align-items: flex-start; flex-wrap: wrap; }
  .broker-utility { width: 100%; margin-left: 0; }
  .tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .tab { flex: 0 0 auto; }
  .table-wrap { overflow-x: auto; }
  .table-wrap table { min-width: 680px; }
  .activity-list button { grid-template-columns: 64px 1fr; }
  .activity-list i { grid-column: 2; }
  .resource-toolbar { align-items: stretch; flex-direction: column; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-intro { min-height: 450px; padding-bottom: 70px; }
  .auth-intro .eyebrow { margin-top: 68px; }
  .auth-panel { min-height: auto; }
}

@media (max-width: 620px) {
  body { overflow-x: hidden; }
  .mobile-nav { position: sticky; top: 0; z-index: 70; display: grid !important; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 15px 20px; background: #06223a; }
  .mobile-nav .official-logo { max-width: 142px; }
  .mobile-contact { font-size: .75rem; }
  .mobile-menu-toggle { display: block; color: #fff; }
  .mobile-menu { position: fixed; z-index: 65; top: 67px; left: 0; right: 0; display: grid; padding: 15px 22px 23px; background: #06223a; box-shadow: 0 16px 32px rgba(0,0,0,.26); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; font-weight: 700; }
  .site-nav { padding: 0 18px; }
  .page-hero { padding: 56px 20px 64px !important; }
  .product-grid, .resource-grid, .card-grid, .stats-grid { grid-template-columns: 1fr !important; }
  .section-heading { display: grid; margin-top: 52px; }
  .section-heading h2 { font-size: 2.25rem; }
  .product-card, .resource-card, .info-card, .portal-card { min-height: auto; }
  .portal-shell { margin-top: 30px; }
  .portal-top { padding: 24px 20px; }
  .portal-top h2 { font-size: 2.2rem; }
  .tabs { margin: 0 -1px; }
  .tab { padding: 15px 17px; }
  .broker-activity { padding: 20px; }
  .activity-list button { padding: 14px 12px; grid-template-columns: 56px 1fr; }
  .resource-toolbar { padding: 15px; }
  .calculator { margin-top: 28px; }
  .chat-window { right: 12px; bottom: 78px; width: min(calc(100vw - 24px), 390px); }
  .interaction-modal { padding: 12px; }
  .modal-card { padding: 30px 22px 24px; }
  .social-auth { grid-template-columns: 1fr; }
  .form-inline { align-items: flex-start; flex-direction: column; }
  .auth-intro { min-height: 420px; padding: 28px 24px 58px; }
  .auth-intro .official-logo { width: 150px; }
  .auth-intro h1 { font-size: clamp(2.8rem, 15vw, 4.15rem); }
  .auth-panel { padding: 30px 22px 48px; }
  .auth-back { margin-bottom: 30px; }
}

.auth-intro h1 { color: #fff; text-shadow: 0 6px 22px rgba(0,0,0,.18); }


/* Animated hero integration: source component replaces the static desktop hero while reusing the existing mobile content below it. */
.fcmm-hero { display: block; line-height: normal; }
@media (max-width: 767px) {
  .desktop-reference { display: block !important; line-height: normal; }
  .desktop-reference .desktop-live > :not(.fcmm-hero) { display: none !important; }
  .desktop-reference .desktop-live { background: #031525; }
  .mobile-home { display: block !important; }
  .mobile-home > .mobile-nav,
  .mobile-home > .mobile-hero,
  .mobile-home > .mobile-stats { display: none !important; }
}


/* Local mock API interface states. */
.auth-dev-code { margin: 4px 0 17px; padding: 11px 13px; border-left: 3px solid var(--gold); color: #765a24; background: #fbf4df; font-size: 12px; line-height: 1.45; }
.auth-dev-code strong { color: #142b49; font-size: 14px; letter-spacing: .08em; }
.session-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid rgba(245, 210, 138, .55); border-radius: 999px; color: #f5d28a; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.button:disabled, .auth-form button:disabled { cursor: wait; opacity: .6; transform: none; }
@media (max-width: 767px) { .session-chip { margin-bottom: 9px; } }

/* Official supplied logo: transparent wordmark shown consistently on all dark navigation and app surfaces. */
.official-logo {
  width: 184px;
  height: auto;
  max-height: 58px;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain;
}
@media (max-width: 860px) {
  .official-logo { width: 160px; max-height: 50px; }
}

/* Official red/white inverse lockup shared by the dark application and authentication navigation. */
.official-logo { display: inline-flex; width: auto; max-height: none; align-items: center; gap: 10px; vertical-align: middle; }
.official-logo img, .universe-brand .official-logo img { display: block; width: 39px !important; height: 43px; max-height: none; object-fit: contain; }
.official-logo-name { color: #fff; font: 700 15px/1.04 'DM Sans', Arial, Helvetica, sans-serif; letter-spacing: -.3px; white-space: nowrap; }
@media (max-width: 860px) {
  .official-logo img, .universe-brand .official-logo img { width: 33px !important; height: 37px; }
  .official-logo-name { font-size: 13px; }
}

/* Render the full user-supplied red/white wordmark unchanged on dark app and authentication navigation. */
img.official-logo, .universe-brand img.official-logo { display: block; width: 178px !important; height: auto; max-height: none; object-fit: contain; }
@media (max-width: 860px) { img.official-logo, .universe-brand img.official-logo { width: 150px !important; } }