/******************************************************************************
 * modern.css — Modern UI refresh for the MCC public site.
 * Additive layer loaded after public.css; keeps the existing #074D80 brand
 * blue family and the per-customer theme logos untouched.
 ******************************************************************************/

/*------------------------------------------------------------------*/
/* Design tokens                                                    */
/*------------------------------------------------------------------*/
:root {
	--mcc-primary: #074D80; /* existing brand blue */
	--mcc-primary-600: #06436f;
	--mcc-primary-700: #053a61;
	--mcc-primary-800: #04314f;
	--mcc-accent: #3598db; /* existing nav hover blue */
	--mcc-accent-light: #5dade2;
	--mcc-success: #1f7a52;
	--mcc-success-600: #1a6846;
	--mcc-ink: #1f2d3d;
	--mcc-muted: #5b6b7b;
	--mcc-bg-soft: #f4f7fa;
	--mcc-border: #e3e9ef;
	--mcc-radius: 0.75rem;
	--mcc-radius-sm: 0.5rem;
	--mcc-shadow-sm: 0 1px 3px rgba(7, 77, 128, 0.08), 0 1px 2px rgba(7, 77, 128, 0.06);
	--mcc-shadow: 0 10px 25px -5px rgba(7, 77, 128, 0.15), 0 8px 10px -6px rgba(7, 77, 128, 0.10);
	--mcc-shadow-lg: 0 20px 40px -12px rgba(7, 77, 128, 0.25);
	--mcc-transition: 0.2s ease;
}

/*------------------------------------------------------------------*/
/* Base typography                                                  */
/*------------------------------------------------------------------*/
body {
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	color: var(--mcc-ink);
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.card-title {
	font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
	font-weight: 600;
	color: var(--mcc-primary);
	letter-spacing: -0.01em;
}

p {
	line-height: 1.7;
	color: var(--mcc-ink);
}

a {
	color: var(--mcc-primary);
	text-decoration: none;
	transition: color var(--mcc-transition);
}

a:hover {
	color: var(--mcc-accent);
}

/*------------------------------------------------------------------*/
/* Header / top bar                                                 */
/*------------------------------------------------------------------*/
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--mcc-border);
	box-shadow: var(--mcc-shadow-sm);
	padding-bottom: 0;
}

.site-header .container .img-fluid {
	max-height: 70px;
	width: auto;
}

/* The Member Login + phone action buttons in the header */
.site-header .btn {
	border-radius: 50rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.45rem 1.1rem;
	box-shadow: var(--mcc-shadow-sm);
	transition: transform var(--mcc-transition), box-shadow var(--mcc-transition), background-color var(--mcc-transition);
}

.site-header .btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--mcc-shadow);
}

/*------------------------------------------------------------------*/
/* Navigation bar                                                   */
/*------------------------------------------------------------------*/
.navbar.bg-dark {
	background: linear-gradient(90deg, var(--mcc-primary-800) 0%, var(--mcc-primary) 100%) !important;
	box-shadow: 0 2px 10px rgba(4, 49, 79, 0.25);
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	position: sticky;
	top: 0;
	z-index: 1030;
}

.navbar-dark .navbar-nav .nav-link {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 500;
	padding: 0.75rem 1.1rem;
	position: relative;
}

/* Animated underline on hover/focus.
   Plain links use ::after. Dropdown toggles (Monitoring & Alerts, Resources,
   My Account) reserve ::after for Bootstrap's caret, so they draw the same
   underline with ::before instead — see the dropdown-toggle block below. */
.navbar-dark .navbar-nav .nav-link:not(.dropdown-toggle)::after,
.navbar-dark .navbar-nav .dropdown-toggle.nav-link::before {
	content: "";
	position: absolute;
	left: 1.1rem;
	right: 1.1rem;
	bottom: 0.45rem;
	height: 2px;
	background: var(--mcc-accent-light);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--mcc-transition);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
	color: #fff;
}

.navbar-dark .navbar-nav .nav-link:not(.dropdown-toggle):hover::after,
.navbar-dark .navbar-nav .nav-link:not(.dropdown-toggle):focus::after,
.navbar-dark .navbar-nav .dropdown-toggle.nav-link:hover::before,
.navbar-dark .navbar-nav .dropdown-toggle.nav-link:focus::before,
.navbar-dark .navbar-nav .dropdown-toggle.nav-link.show::before {
	transform: scaleX(1);
}

/* Current page: keep the link bright and its underline shown */
.navbar-dark .navbar-nav .nav-link.active {
	color: #fff;
	font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link.active:not(.dropdown-toggle)::after,
.navbar-dark .navbar-nav .dropdown-toggle.nav-link.active::before {
	transform: scaleX(1);
	background: var(--mcc-accent-light);
}

/*------------------------------------------------------------------*/
/* Buttons                                                          */
/*------------------------------------------------------------------*/
.btn {
	border-radius: var(--mcc-radius-sm);
	font-weight: 600;
	transition: transform var(--mcc-transition), box-shadow var(--mcc-transition), background-color var(--mcc-transition), border-color var(--mcc-transition);
}

.btn-lg {
	padding: 0.8rem 2rem;
	border-radius: 50rem;
}

.btn-primary {
	--bs-btn-bg: var(--mcc-primary);
	--bs-btn-border-color: var(--mcc-primary);
	--bs-btn-hover-bg: var(--mcc-primary-700);
	--bs-btn-hover-border-color: var(--mcc-primary-700);
	--bs-btn-active-bg: var(--mcc-primary-800);
	--bs-btn-active-border-color: var(--mcc-primary-800);
	--bs-btn-disabled-bg: var(--mcc-primary);
	--bs-btn-disabled-border-color: var(--mcc-primary);
}

.btn-info {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--mcc-accent);
	--bs-btn-border-color: var(--mcc-accent);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #2a82c2;
	--bs-btn-hover-border-color: #2a82c2;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #2a82c2;
}

.btn-success {
	--bs-btn-bg: var(--mcc-success);
	--bs-btn-border-color: var(--mcc-success);
	--bs-btn-hover-bg: var(--mcc-success-600);
	--bs-btn-hover-border-color: var(--mcc-success-600);
	--bs-btn-active-bg: var(--mcc-success-600);
}

.btn-primary:hover,
.btn-info:hover,
.btn-success:hover {
	transform: translateY(-2px);
	box-shadow: var(--mcc-shadow);
}

/*------------------------------------------------------------------*/
/* Hero section                                                     */
/*------------------------------------------------------------------*/
/* Let the hero sit flush under the nav by removing the shell's top margin
   (#mainContent uses Bootstrap's my-2, which adds a top gap). */
#mainContent {
	margin-top: 0 !important;
}

.hero-image {
	position: relative;
	min-height: 400px;
	height: auto !important;
}

/* Gradient scrim so overlaid text/buttons stay legible on any photo */
.hero-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, rgba(4, 49, 79, 0.78) 0%, rgba(7, 77, 128, 0.55) 45%, rgba(53, 152, 219, 0.30) 100%);
}

.hero-image .btn-lg {
	font-size: 1.15rem;
	box-shadow: var(--mcc-shadow-lg);
}

/*------------------------------------------------------------------*/
/* Cards                                                            */
/*------------------------------------------------------------------*/
#SandboxSection {
	margin-top: -5rem; /* lift cards to overlap the hero for a modern layered look */
	position: relative;
	z-index: 2;
}

.card {
	border: 1px solid var(--mcc-border);
	border-radius: var(--mcc-radius);
	overflow: hidden;
	transition: transform var(--mcc-transition), box-shadow var(--mcc-transition);
}

.card.shadow {
	box-shadow: var(--mcc-shadow) !important;
}

.card:hover {
	transform: translateY(-6px);
	box-shadow: var(--mcc-shadow-lg) !important;
}

/* Accent bar across the top of each card */
.card::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--mcc-primary) 0%, var(--mcc-accent) 100%);
}

.card-body {
	padding: 1.75rem;
}

.card-title {
	font-size: 1.35rem;
	margin-bottom: 0.85rem;
}

.card-text {
	color: var(--mcc-muted);
}

/*------------------------------------------------------------------*/
/* Plans & pricing                                                  */
/*------------------------------------------------------------------*/
#PlansAndPricingSection {
	background: var(--mcc-bg-soft);
	border-radius: var(--mcc-radius);
	padding: 2.5rem 1.5rem;
	margin-top: 3rem;
}

.plans-heading {
	text-align: center;
	margin-bottom: 2rem;
}

#PlansAndPricingSection h2 {
	text-align: center;
	margin-bottom: 0;
}

/* Accent underline beneath the section heading */
#PlansAndPricingSection h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 0.85rem auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mcc-primary) 0%, var(--mcc-accent) 100%);
}

.plans-subtitle {
	margin: 0.85rem 0 0;
	color: var(--mcc-muted);
	font-size: 1.1rem;
}

/* Individual / Family segmented toggle */
.btn-group .btn-outline-secondary {
	--bs-btn-color: var(--mcc-primary);
	--bs-btn-border-color: var(--mcc-primary);
	--bs-btn-hover-bg: var(--mcc-primary);
	--bs-btn-hover-border-color: var(--mcc-primary);
	--bs-btn-active-bg: var(--mcc-primary);
	--bs-btn-active-border-color: var(--mcc-primary);
	--bs-btn-checked-bg: var(--mcc-primary);
	font-weight: 600;
}

.btn-check:checked + .btn-outline-secondary {
	color: #fff;
	background-color: var(--mcc-primary);
	border-color: var(--mcc-primary);
}

/*------------------------------------------------------------------*/
/* Carousel (reusable) — used by the plans and testimonials pages   */
/* Shows 3 cards per view (2 on tablet, 1 on mobile); driven by      */
/* carousel.js. Card-specific styling lives with each consumer.      */
/*------------------------------------------------------------------*/
.mcc-carousel {
	position: relative;
	margin-top: 1rem;
	padding: 0 3rem;
}

.mcc-carousel-viewport {
	overflow: hidden;
}

.mcc-carousel-track {
	display: flex;
	flex-wrap: nowrap;
	transition: transform 0.35s ease;
	will-change: transform;
}

.mcc-carousel-slide {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0.5rem 0.75rem;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.mcc-carousel-slide {
		flex-basis: 50%;
		max-width: 50%;
	}
}

@media (min-width: 992px) {
	.mcc-carousel-slide {
		flex-basis: 33.3333%;
		max-width: 33.3333%;
	}
}

/* Prev / next controls */
.mcc-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--mcc-primary);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	box-shadow: var(--mcc-shadow);
	transition: background-color var(--mcc-transition), transform var(--mcc-transition), opacity var(--mcc-transition);
}

.mcc-carousel-btn:hover {
	background: var(--mcc-primary-700);
}

.mcc-carousel-prev {
	left: 0;
}

.mcc-carousel-next {
	right: 0;
}

/* Hidden when there is only a single page of plans */
.mcc-carousel-btn[hidden] {
	display: none;
}

/* Pagination dots */
.mcc-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.mcc-carousel-dot {
	width: 0.7rem;
	height: 0.7rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--mcc-border);
	cursor: pointer;
	transition: background-color var(--mcc-transition), transform var(--mcc-transition);
}

.mcc-carousel-dot.is-active {
	background: var(--mcc-primary);
	transform: scale(1.25);
}

.plan-card {
	position: relative;
}

/* "Best Value" badge floats in the top-right corner of the card */
.plan-best-badge {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	width: 54px;
	height: 54px;
	z-index: 3;
	filter: drop-shadow(0 2px 4px rgba(4, 49, 79, 0.35));
}

/* Highlight the best-value plan (progressive enhancement via :has) */
.plan-card:has(.plan-best-badge) {
	border: 2px solid var(--mcc-accent);
	box-shadow: var(--mcc-shadow-lg) !important;
}

.plan-name {
	font-size: 1.3rem;
	margin-bottom: 0.75rem;
	min-height: 2.6em; /* keep prices aligned across cards with 1- or 2-line names */
	display: flex;
	align-items: center;
	justify-content: center;
}

.plan-price {
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--mcc-border);
}

.price-line {
	line-height: 1.1;
}

.price-line + .price-line {
	margin-top: 0.35rem;
}

.price-amount {
	font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--mcc-primary);
}

.price-annual .price-amount {
	font-size: 1.6rem;
}

.price-period {
	font-size: 0.95rem;
	color: var(--mcc-muted);
	font-weight: 500;
}

/* Feature list with check-mark markers */
.plan-features {
	margin: 0 auto 0.5rem;
	display: inline-block;
}

.plan-features li,
.feature-checklist li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.6rem;
	color: var(--mcc-ink);
	line-height: 1.4;
}

.plan-features li::before,
.feature-checklist li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.2rem;
	height: 1.2rem;
	line-height: 1.2rem;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 700;
	color: #fff;
	background: var(--mcc-success);
	border-radius: 50%;
}

/*------------------------------------------------------------------*/
/* Interior pages — page hero + content/prose column                */
/* Reusable across the public content pages (about-us, faqs, etc.). */
/*------------------------------------------------------------------*/
.page-hero {
	background: linear-gradient(120deg, var(--mcc-primary-800) 0%, var(--mcc-primary) 60%, var(--mcc-accent) 140%);
	padding: 2.75rem 0;
	margin-bottom: 0;
	box-shadow: var(--mcc-shadow-sm);
}

.page-hero-title {
	color: #fff;
	margin: 0;
	font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
	text-align: center;
}

/* Accent underline beneath the interior page title */
.page-hero-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 0.85rem auto 0;
	border-radius: 2px;
	background: var(--mcc-accent-light);
}

/* Vertical padding only — must NOT zero out the .container horizontal
   gutter (this class shares its element), or text hits the screen edge
   on mobile where .prose/.expand-list span the full width. */
.content-section {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

/* Constrained, comfortable reading column for body copy */
.prose {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.05rem;
}

.prose p {
	margin-bottom: 1.15rem;
}

.prose h2,
.prose h3,
.prose h4 {
	margin-top: 2rem;
	margin-bottom: 0.85rem;
}

.prose h3 {
	font-size: 1.4rem;
}

.prose ul,
.prose ol {
	margin-bottom: 1.15rem;
	line-height: 1.7;
}

.prose ul li,
.prose ol li {
	margin-bottom: 0.4rem;
}

/* Images sit nicely within the reading column (e.g. a floated figure) */
.prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--mcc-radius);
	box-shadow: var(--mcc-shadow-sm);
	margin-bottom: 1rem;
}

.prose img.float-md-end {
	margin-left: 1.5rem;
}

/*------------------------------------------------------------------*/
/* Contact method cards (contact-us)                                */
/*------------------------------------------------------------------*/
.contact-methods {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1rem;
}

/* Stacked on small screens; each card capped so it doesn't run full width. */
.contact-method {
	width: 100%;
	max-width: 360px;
}

.contact-method > .card {
	height: 100%;
}

/* Medium screens and up: cards sit side by side. width:auto lets each card
   grow to fit its content (e.g. a long email address) past the 260px default. */
@media (min-width: 768px) {
	.contact-methods {
		flex-direction: row;
		justify-content: center;
		align-items: stretch;
	}

	.contact-method {
		width: auto;
		min-width: 260px;
		max-width: none;
	}
}

.contact-method-icon {
	display: block;
	margin-bottom: 0.85rem;
	font-size: 2.4rem;
	color: var(--mcc-accent);
}

.contact-methods .card-text {
	font-size: 1.1rem;
	margin-bottom: 0;
	white-space: nowrap;
}

/*------------------------------------------------------------------*/
/* Testimonials                                                     */
/*------------------------------------------------------------------*/
.customer-testimonial .blockquote {
	position: relative;
	margin-bottom: 0;
	padding-top: 1.75rem;
}

/* Decorative opening quote mark */
.customer-testimonial .blockquote::before {
	content: "\201C";
	position: absolute;
	top: -0.85rem;
	left: -0.5rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4rem;
	line-height: 1;
	color: var(--mcc-accent);
	opacity: 0.3;
}

.customer-testimonial .blockquote p {
	position: relative;
	font-size: 1.05rem;
	font-style: italic;
	color: var(--mcc-ink);
}

.customer-testimonial .blockquote-footer {
	margin-top: 0.75rem;
	color: var(--mcc-primary);
	font-weight: 600;
}

/* "We value your feedback" call-to-action block */
.feedback-callout {
	background: var(--mcc-bg-soft);
	border-radius: var(--mcc-radius);
	padding: 2.5rem 1.5rem;
	margin-top: 2rem;
}

.feedback-callout p {
	max-width: 640px;
	color: var(--mcc-muted);
	margin-bottom: 1.5rem;
}

/*------------------------------------------------------------------*/
/* Collapsible list / accordion                                     */
/* Reusable: wrap items in .expand-list; each item is a <section>   */
/* .expand-item with an <h6><a data-bs-toggle="collapse"> trigger    */
/* and a .collapse.expand-body panel. Used by fully-managed-recovery */
/* and any page with the same expandable-list markup.                */
/*------------------------------------------------------------------*/
.expand-list {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.expand-item {
	display: block;
	margin-bottom: 0.75rem;
	background: #fff;
	border: 1px solid var(--mcc-border);
	border-radius: var(--mcc-radius-sm);
	box-shadow: var(--mcc-shadow-sm);
	overflow: hidden;
}

.expand-item h6 {
	margin: 0;
}

/* The trigger is an <a> */
.expand-item h6 > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--mcc-primary);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mcc-transition), color var(--mcc-transition);
}

.expand-item h6 > a:hover,
.expand-item h6 > a:focus {
	background: var(--mcc-bg-soft);
	color: var(--mcc-accent);
}

/* Chevron that rotates when the item is expanded */
.expand-item h6 > a::after {
	content: "";
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.6rem;
	margin-right: 0.25rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--mcc-transition);
}

.expand-item h6 > a[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

/* Expanded panel body (carries .collapse for the BS5 plugin) */
.expand-body {
	padding: 0.5rem 1.5rem 1rem;
	border-top: 1px solid var(--mcc-border);
	color: var(--mcc-ink);
}

.expand-body ul,
.expand-body ol {
	margin-bottom: 0;
	line-height: 1.6;
}

.expand-body li {
	margin-bottom: 0.5rem;
}

.expand-body li:last-child {
	margin-bottom: 0;
}

/*------------------------------------------------------------------*/
/* Forms                                                            */
/*------------------------------------------------------------------*/
.form-control,
.form-select {
	border-radius: var(--mcc-radius-sm);
	border-color: var(--mcc-border);
	transition: border-color var(--mcc-transition), box-shadow var(--mcc-transition);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--mcc-accent);
	box-shadow: 0 0 0 0.2rem rgba(53, 152, 219, 0.25);
}

/* Floating labels — smaller label text than the Bootstrap 1rem default.
   Applies to both the resting (placeholder) and floated states, since the
   floated label is just a scale() transform of this same element. */
.form-floating > label {
	font-size: 0.875rem;
}

/* Fieldset sections (enrollment field controls group fields in
   <fieldset><legend> and asp:Panel GroupingText). Render each legend as a
   modern section title with an accent underline rather than a boxed legend. */
fieldset {
	border: 0;
	padding: 0;
	margin-bottom: 2rem;
}

legend {
	float: none;
	width: 100%;
	margin-bottom: 1.25rem;
	padding-bottom: 0.5rem;
	font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--mcc-primary);
	border-bottom: 2px solid var(--mcc-border);
}

/* Centered account/auth form cards (login, change/forgot password, etc.) */
.auth-card {
	background: #fff;
	border: 1px solid var(--mcc-border);
	border-radius: var(--mcc-radius);
	box-shadow: var(--mcc-shadow);
	padding: 2rem;
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

.auth-card h1 {
	font-size: 1.6rem;
	text-align: center;
	margin-bottom: 0.75rem;
}

/* The "Required fields marked with *" note reads better centered in a card */
.auth-card > .required {
	text-align: center;
}

/*------------------------------------------------------------------*/
/* Enrollment step progress bar (EnrollmentProgress control)        */
/* Control renders numbered <span id="...Icon"> badges + title      */
/* <span id="...Title">, marking the active step .current-tab /     */
/* .current-title.                                                  */
/*------------------------------------------------------------------*/
.service-banner {
	background: var(--mcc-bg-soft);
	border-bottom: 1px solid var(--mcc-border);
	padding: 1.5rem 0;
}

.service-banner .row {
	align-items: center;
}

.service-banner .row > div {
	text-align: center;
}

/* Mobile-only "Step" label */
.service-banner .step {
	margin-bottom: 0.5rem;
	font-size: 1rem;
	color: var(--mcc-muted);
}

/* Numbered circular step badges */
.service-banner span[id$="Icon"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--mcc-border);
	color: var(--mcc-muted);
	font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
	font-weight: 600;
	transition: background-color var(--mcc-transition), border-color var(--mcc-transition), color var(--mcc-transition);
}

/* Active step badge */
.service-banner span[id$="Icon"].current-tab {
	background: var(--mcc-primary);
	border-color: var(--mcc-primary);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(7, 77, 128, 0.15);
}

/* Step titles under each badge */
.service-banner span[id$="Title"] {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.78rem;
	line-height: 1.25;
	color: var(--mcc-muted);
}

.service-banner span[id$="Title"].current-title {
	color: var(--mcc-primary);
	font-weight: 600;
}

/* Current-step heading on the right of the bar */
.service-banner h3 {
	margin: 0;
	font-size: 1.2rem;
	text-align: left;
}

/*------------------------------------------------------------------*/
/* Footer                                                           */
/*------------------------------------------------------------------*/
.site-footer {
	background: linear-gradient(90deg, var(--mcc-primary-800) 0%, var(--mcc-primary) 100%) !important;
	padding-top: 2.5rem !important;
	padding-bottom: 2rem !important;
}

.site-footer .list-inline {
	margin-bottom: 1rem;
}

.site-footer .list-inline-item {
	margin: 0 0.25rem;
}

.site-footer .text-light {
	opacity: 0.9;
	font-weight: 500;
	transition: opacity var(--mcc-transition), color var(--mcc-transition);
}

.site-footer .text-light:hover {
	opacity: 1;
	color: var(--mcc-accent-light) !important;
}

.site-footer p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9rem;
	margin-bottom: 0;
}

/*------------------------------------------------------------------*/
/* Member app (MCC_App.Master) — the logged-in area                 */
/* The member nav reuses the same .navbar.bg-dark markup as the      */
/* public site, so it inherits the gradient nav above. These rules   */
/* cover the pieces unique to the member shell.                      */
/*------------------------------------------------------------------*/
/* Header band: affiliate logo + account actions + product name */
.member-header {
	background: #fff;
	border-bottom: 1px solid var(--mcc-border);
	box-shadow: var(--mcc-shadow-sm);
}

.member-header img.img-fluid {
	max-height: 64px;
	width: auto;
}

/* Contact Us / phone / Log Out cluster (top-right) */
.member-header .float-end p {
	margin-bottom: 0.4rem;
}

/* Customer product name + "Identity Care Center" subtitle */
.member-header h1 {
	margin: 0.25rem 0 1rem;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.member-header h1 .text-primary {
	color: var(--mcc-primary) !important;
}

/* Page-title banner below the nav (replaces the old bubbles image) */
#bannerTitle {
	background: var(--mcc-bg-soft);
	background-image: none;
	border-bottom: 1px solid var(--mcc-border);
	padding: 1.1rem 0;
	margin-bottom: 0;
}

#bannerTitle h2 {
	margin: 0;
	font-size: 1.5rem;
}

/* Breathing room between the banner band and page content */
#content {
	padding-top: 1.5rem;
}

/* Nav dropdowns (Monitoring & Alerts, Resources, My Account) */
.navbar-dark .dropdown-menu {
	border: none;
	border-radius: var(--mcc-radius-sm);
	box-shadow: var(--mcc-shadow);
	padding: 0.4rem;
	margin-top: 0.25rem;
}

.navbar-dark .dropdown-item {
	border-radius: var(--mcc-radius-sm);
	padding: 0.5rem 0.85rem;
	font-weight: 500;
	color: var(--mcc-ink);
}

.navbar-dark .dropdown-item:hover,
.navbar-dark .dropdown-item:focus {
	background: var(--mcc-bg-soft);
	color: var(--mcc-primary);
}

/* The member nav has ~14 top-level items. Keep each label on a single line
   and tighten the horizontal spacing/size so the links fit without wrapping
   mid-label. Scoped to .member-header so the public site nav is unaffected. */
.member-header .navbar-dark .navbar-nav .nav-link {
	white-space: nowrap;
	padding-left: 0.6rem;
	padding-right: 0.6rem;
	font-size: 0.9rem;
}

/* Match the animated underline inset to the tighter member-nav padding */
.member-header .navbar-dark .navbar-nav .nav-link:not(.dropdown-toggle)::after,
.member-header .navbar-dark .navbar-nav .dropdown-toggle.nav-link::before {
	left: 0.6rem;
	right: 0.6rem;
}

/* Member footer (links + copyright + trust seals) */
#footerLinks {
	margin-top: 3rem;
	padding-bottom: 2rem;
	color: var(--mcc-muted);
	font-size: 0.9rem;
}

#footerLinks hr {
	border-color: var(--mcc-border);
	opacity: 1;
}

/* Home dashboard — membership features check-list (reuses the marker above) */
.feature-checklist {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

/* Home dashboard — Documents & Resources list with glyphicon file icons */
.resource-list {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.resource-list li {
	margin-bottom: 0.6rem;
	line-height: 1.4;
}

.resource-list .glyphicon {
	color: var(--mcc-primary);
	margin-right: 0.5rem;
}

/* Home dashboard — welcome header (greeting + last login) */
.welcome-header {
	margin-bottom: 1.25rem;
}

.welcome-title {
	margin-bottom: 0.15rem;
}

.welcome-meta {
	color: var(--mcc-muted);
	font-size: 0.9rem;
	margin-bottom: 0;
}

/* Credit score speedometer gauge (credit-report-and-score) */
.score-gauge {
	max-width: 320px;
	margin: 0 auto;
}

.score-gauge-svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

/* The colored rating arcs; stroke color is set inline per band */
.score-gauge-band {
	fill: none;
	stroke-width: 14;
	stroke-linecap: butt;
}

.score-gauge-label {
	font-size: 11px;
	font-weight: 600;
	fill: var(--mcc-muted);
}

/* The needle's RESTING angle comes from the SVG `transform` attribute on the
   #scoreNeedle outer group (set in code-behind as rotate(angle 100 100)) — its
   built-in pivot is reliable and needs no transform-origin. This inner group
   only runs the load sweep: at rest it's identity (so the outer transform shows
   through), and during the animation it rotates around (100,100). */
.score-gauge-needle {
	transform-box: view-box;
	transform-origin: 100px 100px;
	animation: score-needle-sweep 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.score-gauge-needle line {
	stroke: var(--mcc-ink);
	stroke-width: 3.5;
	stroke-linecap: round;
}

.score-gauge-needle circle {
	fill: var(--mcc-ink);
}

/* Sweep from the gauge's start (-90deg absolute) up to the resting angle. This
   inner rotation is relative to the outer group (which already holds the score
   angle), so the start offset is -90deg minus that angle; it ends at identity. */
@keyframes score-needle-sweep {
	from { transform: rotate(calc(-90deg - var(--needle-angle, 0deg))); }
	to { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	.score-gauge-needle {
		animation: none;
	}
}

/* Inline credit-monitoring alert-detail iframe (replaces the old pop-up window) */
.alert-detail-frame-wrap {
	margin-top: 0.5rem;
}

.alert-detail-frame {
	width: 100%;
	min-height: 600px;
	border: 1px solid var(--mcc-border);
	border-radius: var(--mcc-radius-sm);
}

/* Report heading + Print button on one line (credit-report-and-score).
   The button carries .d-print-none so only the heading reaches paper. */
.report-print-bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	/* Below ~lg the button wraps onto its own line and becomes the last thing in
	   the bar, so the heading's own bottom margin no longer separates the bar
	   from the tabs underneath. Own the spacing here instead. */
	margin-bottom: 0.75rem;
}

.report-print-bar h3 {
	margin-bottom: 0;
}

/* Inline three-bureau credit report iframe (replaces the old pop-up window) */
.credit-report-frame-wrap {
	margin-top: 0.5rem;
}

.credit-report-frame {
	width: 100%;
	min-height: 800px;
	border: 1px solid var(--mcc-border);
	border-radius: var(--mcc-radius-sm);
}

/* Scheduled-maintenance notice (Home.aspx) — soften the harsh yellow */
.maintenance-alert {
	background: #fff8e1;
	border: 1px solid #f5d27a;
	border-radius: var(--mcc-radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	color: #5b4b1f;
}

.maintenance-alert h4 {
	color: #8a6d1f;
	margin-bottom: 0.5rem;
}

/* Membership Upgrade (upgrade.aspx) — plan-comparison matrix polish */
.upgrade-plans-table {
	min-width: 720px; /* keep columns readable; .table-responsive scrolls below this */
}

/* Freeze the product-name column so it stays in view while scrolling tiers.
   Solid bg + box-shadow:none defeats the BS5.3 striped inset so scrolled
   cells don't bleed through the sticky column. */
.upgrade-plans-table thead th:first-child,
.upgrade-plans-table tbody td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background-color: var(--mcc-bg-soft);
	box-shadow: none;
	border-right: 1px solid var(--mcc-border);
	font-weight: 600;
	text-align: start;
}

/* Clean stacked tier header: badge -> name -> price -> Upgrade CTA */
.upgrade-tier-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

.upgrade-tier-badge {
	max-height: 48px;
	width: auto;
}

.upgrade-tier-name {
	font-weight: 600;
	line-height: 1.2;
}

.upgrade-tier-price {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--mcc-primary);
}

/* Subtle emphasis on the member's current-coverage column header */
.upgrade-tier-current {
	background-color: var(--mcc-bg-soft);
}

/*------------------------------------------------------------------*/
/* Responsive tabs                                                  */
/*------------------------------------------------------------------*/
/*
	Tab strips with several long labels (the single-bureau credit report)
	wrap onto multiple rows on anything narrower than a desktop. Because
	.nav-tabs only draws its border-bottom under the last row, the rows
	above render as detached boxes and the active tab's notch cuts into
	nothing. Below lg we drop the tab metaphor and render the same markup
	as wrapping pills, so every tab stays visible and the wrap looks
	deliberate. The six credit-report tabs need the full lg width before
	they fit on one line, so the cutover is at 992px, not 768px.
*/
@media (max-width: 991.98px) {
	.nav-tabs-responsive {
		border-bottom: 0;
		gap: 0.375rem;
	}

	.nav-tabs-responsive .nav-link {
		background-color: #fff;
		border: 1px solid var(--mcc-border);
		border-radius: var(--mcc-radius-sm);
		color: var(--mcc-primary);
		font-size: 0.9375rem;
		margin-bottom: 0;
		padding: 0.4375rem 0.75rem;
	}

	.nav-tabs-responsive .nav-link:hover,
	.nav-tabs-responsive .nav-link:focus {
		background-color: var(--mcc-bg-soft);
		border-color: var(--mcc-border);
	}

	.nav-tabs-responsive .nav-link.active {
		background-color: var(--mcc-primary);
		border-color: var(--mcc-primary);
		color: #fff;
	}

	/* .bg-secondary is !important, so the active-pill badge has to be too */
	.nav-tabs-responsive .nav-link.active .badge {
		background-color: rgba(255, 255, 255, 0.25) !important;
		color: #fff;
	}

	/* The pills no longer join the panel, so close the box on all four sides */
	.tab-content-bordered {
		border-top-width: 1px;
		border-radius: var(--mcc-radius-sm);
		margin-top: 0.75rem;
	}

	.tab-content-bordered > [role="tabpanel"] {
		padding: 1.25rem;
	}
}

/* Phones are tight enough to want the padding back; tablets are not */
@media (max-width: 575.98px) {
	.tab-content-bordered > [role="tabpanel"] {
		padding: 1rem;
	}
}

/*------------------------------------------------------------------*/
/* Responsive tweaks                                                */
/*------------------------------------------------------------------*/
@media (max-width: 767.98px) {
	.hero-image {
		min-height: 360px;
	}

	#SandboxSection {
		margin-top: 1.5rem; /* drop the overlap on small screens */
	}
}