:root {
--mg-green:#00b67a;
--mg-green-dark:#018a5c;
--mg-navy:#0b2545;
--mg-orange:#ff7a1a;
--mg-gold:#ffb400;
--mg-bg:#f6f9f8;
--mg-border:#e6eaec;
--mg-text-muted:#5b6b75;
}
* {
	box-sizing: border-box;
}
body {
	font-family: 'Inter', sans-serif;
	color: var(--mg-navy);
	background: #fff;
}
h1, h2, h3, h4, .font-display {
	font-family: 'Poppins', sans-serif;
	color: var(--mg-navy);
	font-weight: 700;
}
a {
	text-decoration: none;
}
.text-mg-green {
	color: var(--mg-green) !important;
}
.bg-mg-green {
	background: var(--mg-green) !important;
}
.btn-mg-green {
	background: var(--mg-green);
	border-color: var(--mg-green);
	color: #fff;
	font-weight: 600;
}
.btn-mg-green:hover {
	background: var(--mg-green-dark);
	border-color: var(--mg-green-dark);
	color: #fff;
}
.btn-mg-orange {
	background: var(--mg-orange);
	border-color: var(--mg-orange);
	color: #fff;
	font-weight: 600;
}
.btn-mg-orange:hover {
	background: #e6690a;
	border-color: #e6690a;
	color: #fff;
}
.btn-outline-mg {
	border: 1.5px solid var(--mg-navy);
	color: var(--mg-navy);
	font-weight: 600;
}
.btn-outline-mg:hover {
	background: var(--mg-navy);
	color: #fff;
}
/* ===== Top promo bar ===== */
.promo-bar {
	background: var(--mg-navy);
	color: #fff;
	font-size: .85rem;
	padding: .5rem 0;
}
.promo-bar a {
	color: var(--mg-gold);
	font-weight: 600;
}
/* ===== Navbar ===== */
.navbar-mg {
	background: #fff;
	border-bottom: 1px solid var(--mg-border);
}
.navbar-mg .nav-link {
	color: var(--mg-navy);
	font-weight: 600;
	font-size: .92rem;
	padding: .5rem .85rem;
}
.navbar-mg .nav-link:hover {
	color: var(--mg-green);
}
.brand-logo {
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--mg-navy);
	display: flex;
	align-items: center;
	gap: .4rem;
}
.brand-logo .dot {
	color: var(--mg-green);
}
.dropdown-menu {
	border: 1px solid var(--mg-border);
	box-shadow: 0 12px 24px rgba(11,37,69,.08);
}
/* ===== Hero / header ===== */
.breadcrumb-row {
	font-size: .85rem;
}
.article-hero {
	background: linear-gradient(180deg, #f0fbf6 0%, #ffffff 100%);
	border-bottom: 1px solid var(--mg-border);
}
.hero-icon-wrap {
	width: 96px;
	height: 96px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--mg-border);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(11,37,69,.06);
}
.meta-pill {
	font-size: .8rem;
	color: var(--mg-text-muted);
	display: flex;
	align-items: center;
	gap: .4rem;
}
.author-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mg-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .8rem;
}
/* ===== Section nav (scrollspy pills) ===== */
.section-nav {
	position: sticky;
	top: 0;
	z-index: 1020;
	background: #fff;
	border-bottom: 1px solid var(--mg-border);
}
.section-nav .nav-link {
	color: var(--mg-text-muted);
	font-weight: 600;
	font-size: .85rem;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	padding: .75rem .9rem;
}
.section-nav .nav-link.active {
	color: var(--mg-green);
	border-bottom-color: var(--mg-green);
	background: transparent;
}
.section-nav-scroll {
	overflow-x: auto;
	scrollbar-width: none;
}
.section-nav-scroll::-webkit-scrollbar {
display:none;
}
/* ===== Content sections ===== */
.section-block {
	padding: 3rem 0;
	border-bottom: 1px solid var(--mg-border);
}
.lead-text {
	color: #33424d;
	font-size: 1.05rem;
	line-height: 1.75;
}
.callout-box {
	background: #f0fbf6;
	border: 1px solid #c9eede;
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
}
/* ===== Contact Detail Cards ===== */
.contact-card {
	border: 1px solid var(--mg-border);
	border-radius: 12px;
	padding: 1.5rem;
	background: #f6f9f8;
	height: 100%;
}
/* ===== Success Toast Styles ===== */
.success-banner {
    display: none;
    background-color: #f0fbf6;
    border: 1px solid #c9eede;
    color: var(--mg-green-dark);
    font-weight: 500;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

/* ===== Product cards ===== */
.product-card {
	border: 1px solid var(--mg-border);
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 2rem;
	box-shadow: 0 2px 10px rgba(11,37,69,.04);
}
.product-card-top {
	padding: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
	border-bottom: 1px solid var(--mg-border);
}
.brand-badge {
	width: 64px;
	height: 64px;
	border-radius: 14px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 1rem;
	flex-shrink: 0;
}
.stars i {
	color: var(--mg-gold);
	font-size: .95rem;
}
.quick-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: var(--mg-bg);
	border-bottom: 1px solid var(--mg-border);
}
.quick-fact-label {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mg-text-muted);
}
.quick-fact-value {
	font-weight: 700;
	font-size: 1rem;
}

@media (max-width:767px) {
.quick-facts {
	grid-template-columns: repeat(2, 1fr);
}
}
.nav-tabs-mg {
	border-bottom: 1px solid var(--mg-border);
	padding: 0 1.5rem;
}
.nav-tabs-mg .nav-link {
	border: none;
	color: var(--mg-text-muted);
	font-weight: 600;
	font-size: .9rem;
	border-bottom: 2px solid transparent;
	padding: .9rem .25rem;
	margin-right: 1.5rem;
}
.nav-tabs-mg .nav-link.active {
	color: var(--mg-navy);
	border-bottom-color: var(--mg-green);
	background: transparent;
}
.tab-content-mg {
	padding: 1.5rem;
}
.pros-cons-col i {
	margin-right: .5rem;
}
.simple-site-block {
	padding: 1.5rem 0;
	border-bottom: 1px dashed var(--mg-border);
}
.simple-site-block:last-child {
	border-bottom: none;
}
/* ===== Tips ===== */
.tip-num {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--mg-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex-shrink: 0;
}
/* ===== FAQ ===== */
.accordion-button {
	font-weight: 600;
	color: var(--mg-navy);
}
.accordion-button:not(.collapsed) {
	color: var(--mg-green-dark);
	background: #f0fbf6;
}
.accordion-button:focus {
	box-shadow: none;
	border-color: var(--mg-border);
}
/* ===== Related products ===== */
.related-card {
	border: 1px solid var(--mg-border);
	border-radius: 14px;
	padding: 1.25rem;
	height: 100%;
	transition: box-shadow .15s ease, transform .15s ease;
}
.related-card:hover {
	box-shadow: 0 10px 24px rgba(11,37,69,.08);
	transform: translateY(-2px);
}
/* ===== Footer ===== */
footer {
	background: var(--mg-navy);
	color: #cfd9e2;
}
footer a {
	color: #cfd9e2;
}
footer a:hover {
	color: #fff;
}
footer h6 {
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	margin-bottom: 1rem;
}
.newsletter-box {
	background: #0e2e57;
	border-radius: 16px;
}
/* ===== Back to top ===== */
#backToTop {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 1030;
	display: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
}
.toc-popover-list a {
	color: var(--mg-navy);
	font-weight: 600;
	font-size: .9rem;
}
.toc-popover-list a:hover {
	color: var(--mg-green);
}