/*
	Midgard City Shared Theme

	Available theme options:
	color: royal, ember, forest, ocean
	style: compact, classic, field

	Current live defaults are controlled in:
	- /site_state.json
	- /site_guard.js
*/

:root {
	--mc-font-body: Arial, Helvetica, sans-serif;
	--mc-font-heading: Arial, Helvetica, sans-serif;
	--mc-font-mono: "Consolas", "Courier New", monospace;
	--mc-base-size: 14px;
	--mc-small-size: 12px;
	--mc-line-height: 1.52;
	--mc-heading-weight: 600;
	--mc-letter-spacing: 0;
	--mc-radius-panel: 0px;
	--mc-radius-card: 0px;
	--mc-radius-button: 0px;
	--mc-shadow-lg: 0 14px 32px rgba(8, 6, 5, 0.24);
	--mc-shadow-md: 0 8px 18px rgba(8, 6, 5, 0.16);
	--mc-shadow-inset: inset 0 1px 0 rgba(255, 248, 229, 0.10);
	--mc-page-bg: #0b1019;
	--mc-panel: rgba(19, 28, 41, 0.92);
	--mc-panel-2: rgba(27, 39, 57, 0.86);
	--mc-panel-3: rgba(13, 19, 29, 0.94);
	--mc-border: rgba(100, 142, 187, 0.26);
	--mc-border-soft: rgba(100, 142, 187, 0.14);
	--mc-text: #edf3fb;
	--mc-muted: rgba(207, 219, 235, 0.76);
	--mc-muted-2: rgba(170, 190, 214, 0.62);
	--mc-accent: #74a7da;
	--mc-accent-2: #d3b46d;
	--mc-btn-text: #0f1926;
	--mc-btn-bg: linear-gradient(180deg, #d6e4f2 0%, #94b7d8 52%, #58799b 100%);
	--mc-btn-bg-hover: linear-gradient(180deg, #e4eef7 0%, #a5c4e0 52%, #6988a8 100%);
	--mc-btn-bg-alt: linear-gradient(180deg, #eadcae 0%, #c3a664 52%, #8d713a 100%);
	--ui-bg: var(--mc-panel);
	--ui-bg-2: var(--mc-panel-2);
	--ui-border: var(--mc-border);
	--ui-border-soft: var(--mc-border-soft);
	--ui-text: var(--mc-text);
	--ui-muted: var(--mc-muted);
	--ui-muted-2: var(--mc-muted-2);
	--accent: var(--mc-accent);
	--accent-2: var(--mc-accent-2);
	--panel-radius: var(--mc-radius-panel);
	--card-radius: var(--mc-radius-card);
	--btn-radius: var(--mc-radius-button);
	--shadow: var(--mc-shadow-lg);
	--shadow-soft: var(--mc-shadow-md);
	--btn-bg: var(--mc-btn-bg);
	--btn-bg-hover: var(--mc-btn-bg-hover);
}

:root[data-site-color="ember"] {
	--mc-page-bg: #100b08;
	--mc-panel: rgba(53, 33, 18, 0.88);
	--mc-panel-2: rgba(71, 46, 24, 0.80);
	--mc-panel-3: rgba(34, 22, 13, 0.90);
	--mc-border: rgba(198, 161, 101, 0.28);
	--mc-border-soft: rgba(198, 161, 101, 0.14);
	--mc-text: #f4ebd8;
	--mc-muted: rgba(238, 224, 197, 0.76);
	--mc-muted-2: rgba(219, 202, 172, 0.60);
	--mc-accent: #c7a165;
	--mc-accent-2: #c47b62;
	--mc-btn-text: #241507;
	--mc-btn-bg: linear-gradient(180deg, #d9bb83 0%, #bf9150 52%, #8b5f2b 100%);
	--mc-btn-bg-hover: linear-gradient(180deg, #e6c992 0%, #cb9c5a 52%, #996833 100%);
}

:root[data-site-color="royal"] {
	--mc-page-bg: #0b1019;
	--mc-panel: rgba(19, 28, 41, 0.92);
	--mc-panel-2: rgba(27, 39, 57, 0.86);
	--mc-panel-3: rgba(13, 19, 29, 0.94);
	--mc-border: rgba(100, 142, 187, 0.26);
	--mc-border-soft: rgba(100, 142, 187, 0.14);
	--mc-text: #edf3fb;
	--mc-muted: rgba(207, 219, 235, 0.76);
	--mc-muted-2: rgba(170, 190, 214, 0.62);
	--mc-accent: #74a7da;
	--mc-accent-2: #d3b46d;
	--mc-btn-text: #0f1926;
	--mc-btn-bg: linear-gradient(180deg, #d6e4f2 0%, #94b7d8 52%, #58799b 100%);
	--mc-btn-bg-hover: linear-gradient(180deg, #e4eef7 0%, #a5c4e0 52%, #6988a8 100%);
}

:root[data-site-color="forest"] {
	--mc-page-bg: #0a100a;
	--mc-panel: rgba(24, 49, 32, 0.88);
	--mc-panel-2: rgba(35, 67, 43, 0.80);
	--mc-panel-3: rgba(16, 31, 20, 0.90);
	--mc-border: rgba(133, 177, 118, 0.30);
	--mc-border-soft: rgba(133, 177, 118, 0.16);
	--mc-text: #ecf5e8;
	--mc-muted: rgba(219, 233, 214, 0.74);
	--mc-muted-2: rgba(189, 210, 182, 0.60);
	--mc-accent: #92bc76;
	--mc-accent-2: #d7bf7e;
	--mc-btn-text: #10210f;
	--mc-btn-bg: linear-gradient(180deg, #c2d99a 0%, #89ac5c 52%, #56733a 100%);
	--mc-btn-bg-hover: linear-gradient(180deg, #d1e3ab 0%, #97ba68 52%, #628042 100%);
}

:root[data-site-color="ocean"] {
	--mc-page-bg: #081015;
	--mc-panel: rgba(23, 43, 59, 0.88);
	--mc-panel-2: rgba(30, 58, 77, 0.80);
	--mc-panel-3: rgba(15, 28, 39, 0.90);
	--mc-border: rgba(114, 165, 202, 0.30);
	--mc-border-soft: rgba(114, 165, 202, 0.16);
	--mc-text: #ecf5fb;
	--mc-muted: rgba(213, 228, 239, 0.76);
	--mc-muted-2: rgba(179, 204, 221, 0.60);
	--mc-accent: #7ab6dd;
	--mc-accent-2: #d6c07f;
	--mc-btn-text: #0f2230;
	--mc-btn-bg: linear-gradient(180deg, #c6dfef 0%, #7faec9 52%, #4f7592 100%);
	--mc-btn-bg-hover: linear-gradient(180deg, #d7e9f4 0%, #90bdd6 52%, #5e84a0 100%);
}

:root[data-site-style="compact"] {
	--mc-base-size: 14px;
	--mc-small-size: 12px;
	--mc-line-height: 1.48;
	--mc-radius-panel: 0px;
	--mc-radius-card: 0px;
	--mc-radius-button: 0px;
	--mc-shadow-lg: 0 14px 34px rgba(8, 6, 5, 0.28);
	--mc-shadow-md: 0 8px 18px rgba(8, 6, 5, 0.18);
}

:root[data-site-style="classic"] {
	--mc-base-size: 14px;
	--mc-small-size: 12px;
	--mc-line-height: 1.52;
}

:root[data-site-style="field"] {
	--mc-base-size: 14px;
	--mc-small-size: 12px;
	--mc-line-height: 1.52;
	--mc-radius-panel: 0px;
	--mc-radius-card: 0px;
	--mc-radius-button: 0px;
}

html {
	font-size: var(--mc-base-size);
}

body {
	font-family: var(--mc-font-body) !important;
	font-size: 1rem !important;
	line-height: var(--mc-line-height) !important;
	letter-spacing: 0 !important;
	background:
		linear-gradient(180deg, rgba(10, 8, 6, 0.52), rgba(10, 8, 6, 0.86)),
		radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 28%),
		url("/img/splash-bg.png") center top / cover no-repeat fixed,
		var(--mc-page-bg) !important;
	color: var(--mc-text) !important;
}

body,
*,
*::before,
*::after,
input,
select,
textarea,
button {
	font-family: var(--mc-font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.section-title,
.listing-title,
.hero h1,
.hero-title,
.panel-title,
.job-title {
	font-family: var(--mc-font-heading) !important;
	font-weight: var(--mc-heading-weight) !important;
	letter-spacing: var(--mc-letter-spacing) !important;
	text-transform: none !important;
	text-shadow: none !important;
}

h1,
.hero h1 {
	font-size: clamp(1.55rem, 2.5vw, 2rem) !important;
	line-height: 1.1 !important;
}

h2,
.section-title {
	font-size: clamp(1.2rem, 1.9vw, 1.45rem) !important;
	line-height: 1.15 !important;
}

h3,
.title,
.listing-title {
	font-size: clamp(1rem, 1.3vw, 1.15rem) !important;
	line-height: 1.2 !important;
}

p,
li,
td,
th,
label,
small,
.muted,
.desc,
.subtitle,
.hero p,
.section-copy {
	font-size: 0.98rem !important;
	line-height: var(--mc-line-height) !important;
}

small,
.eyebrow,
.meta,
.card-meta,
.badge,
.chip,
.status-pill,
.metric-label,
.stat-label,
.label {
	font-size: var(--mc-small-size) !important;
	letter-spacing: 0.01em !important;
	font-weight: 600 !important;
	text-transform: none !important;
}

.container,
.section,
.panel,
.card,
.hero,
.listing,
.listing-card,
.metric,
.stat-card,
.preview-panel,
.market-card,
.box,
.feature-card,
.guide-card {
	border-radius: var(--mc-radius-panel) !important;
	box-shadow: var(--mc-shadow-md) !important;
	background: linear-gradient(160deg, var(--mc-panel-2), var(--mc-panel-3)) !important;
}

.card,
.listing,
.listing-card,
.metric,
.stat-card,
.feature-card,
.guide-card,
.box {
	border-radius: var(--mc-radius-card) !important;
}

.container,
.section,
.panel,
.card,
.hero,
.listing,
.listing-card,
.metric,
.stat-card,
.preview-panel,
.market-card,
.box {
	border-color: var(--mc-border) !important;
}

.container::after,
.hero::after {
	border-radius: 0 !important;
}

.title,
.section-title,
.listing-title,
.hero h1,
.hero p,
.subtitle,
.desc,
.muted,
.card-meta,
.section-copy,
label,
th,
td,
li,
p {
	color: inherit;
}

.title,
.section-title,
.listing-title,
.hero h1 {
	color: var(--mc-text) !important;
}

.hero p,
.subtitle,
.desc,
.muted,
.card-meta,
.section-copy,
label,
th {
	color: var(--mc-muted) !important;
	text-shadow: none !important;
}

a.btn,
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.action-button,
.primary-button,
.secondary-button {
	min-height: 40px !important;
	padding: 0.6rem 1rem !important;
	border-radius: var(--mc-radius-button) !important;
	background: var(--mc-btn-bg) !important;
	border: 1px solid rgba(69, 42, 19, 0.62) !important;
	color: var(--mc-btn-text) !important;
	font-size: 0.92rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: var(--mc-shadow-inset), 0 8px 18px rgba(15, 9, 5, 0.20) !important;
}

a.btn:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.action-button:hover,
.primary-button:hover,
.secondary-button:hover {
	background: var(--mc-btn-bg-hover) !important;
}

input,
select,
textarea {
	border-radius: 10px !important;
	border: 1px solid var(--mc-border) !important;
	font-size: 0.92rem !important;
}

table th {
	font-size: 0.84rem !important;
	letter-spacing: 0.01em !important;
	font-weight: 600 !important;
	text-transform: none !important;
}

table td {
	font-size: 0.92rem !important;
}

.nav-tabs,
.market-tabs,
.tab-row,
.button-row {
	gap: 0.65rem !important;
}

.hero,
.section,
.panel,
.card {
	padding-top: min(20px, 4vw) !important;
	padding-bottom: min(20px, 4vw) !important;
}

.stats-grid,
.listing-grid,
.feature-grid,
.card-grid {
	gap: 0.7rem !important;
}

strong,
b,
.value,
.metric-value,
.stat-value,
.home-hang,
.tab,
.nav-link,
.topbar a,
.toolbar a,
.toolbar button,
.nav-tabs a,
.market-tabs a,
.button-row a,
.button-row button {
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-shadow: none !important;
}

.eyebrow,
.badge,
.chip,
.status-pill,
.home-hang,
.title,
.section-title,
.listing-title,
.hero-title,
.panel-title {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.home-hang {
	padding: 9px 12px !important;
	border-radius: 0 !important;
	font-size: 0.9rem !important;
}

.eyebrow,
.badge,
.chip,
.status-pill,
.pill,
.tag,
.home-hang,
.actions a,
.info-links a,
.job-token,
.job-detail,
.job-detail-portrait,
.job-tag,
.info-hub,
.adventurer-parade,
.splash-panel,
.status-card,
.btn,
a.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input,
select,
textarea,
.tab,
.nav-link,
.metric,
.stat-card,
.listing,
.listing-card,
.box,
.feature-card,
.guide-card,
.panel,
.section,
.card,
.hero,
.container {
	border-radius: 0 !important;
}

.badge,
.status-pill,
.metric .k,
.metric .v,
.job-token span,
.job-detail-kicker,
.job-detail-role,
.job-tag,
.info-links a,
.actions a,
.title,
.section-title,
.listing-title,
.eyebrow {
	font-family: var(--mc-font-body) !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-shadow: none !important;
}

.metric .k,
.job-detail-kicker,
.job-detail-role {
	font-size: 0.8rem !important;
}

.actions a,
.info-links a {
	height: auto !important;
	min-height: 38px !important;
	min-width: 0 !important;
	padding: 0.65rem 1rem !important;
	border-radius: 0 !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.badge,
.status-pill,
.job-tag,
.info-links a,
.job-detail-portrait::after {
	border-radius: 0 !important;
}

.card,
.metric,
.info-hub,
.adventurer-parade,
.job-token,
.job-detail,
.job-detail-portrait,
.status-card {
	border-radius: 0 !important;
}

.job-token:hover,
.actions a:hover,
.info-links a:hover {
	transform: none !important;
}

body .bg-vignette {
	background:
		linear-gradient(180deg, rgba(5, 9, 15, 0.32), rgba(5, 9, 15, 0.78)),
		radial-gradient(circle at 50% 18%, rgba(125, 172, 221, 0.12), rgba(125, 172, 221, 0) 28%) !important;
}

body .container,
body .splash-panel,
body .info-hub,
body .adventurer-parade,
body .job-detail,
body .card,
body .metric,
body .status-card,
body .box,
body .feature-card,
body .guide-card,
body .market-card,
body .preview-panel,
body .listing,
body .listing-card {
	background: linear-gradient(180deg, rgba(18, 28, 41, 0.94), rgba(11, 18, 29, 0.96)) !important;
	border: 1px solid rgba(103, 143, 189, 0.28) !important;
	box-shadow: none !important;
}

body .splash-panel::before,
body .job-detail::before,
body .hero::before,
body .container::before {
	background: none !important;
}

body .badge,
body .eyebrow,
body .status-pill,
body .job-tag,
body .pill,
body .tag {
	background: rgba(30, 45, 66, 0.92) !important;
	border: 1px solid rgba(112, 154, 201, 0.34) !important;
	color: #e7eef8 !important;
	padding: 6px 12px !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}

body .actions a,
body .info-links a,
body a.btn,
body .btn,
body button,
body input[type="submit"],
body input[type="button"],
body input[type="reset"] {
	background: #22374f !important;
	border: 1px solid #4f7095 !important;
	color: #edf4fb !important;
	box-shadow: none !important;
}

body .actions a:hover,
body .info-links a:hover,
body a.btn:hover,
body .btn:hover,
body button:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body input[type="reset"]:hover {
	background: #2b4562 !important;
	border-color: #6a8db6 !important;
}

body .actions a.primary,
body .btn.primary,
body .primary-button,
body .primary {
	background: #36577a !important;
	border-color: #7ea4cf !important;
	color: #f4f8fd !important;
}

body .actions a.secondary,
body .btn.secondary,
body .secondary-button,
body .secondary {
	background: #1c2f45 !important;
	border-color: #4f7095 !important;
	color: #edf4fb !important;
}

body .job-token {
	background: #182636 !important;
	border: 1px solid rgba(103, 143, 189, 0.28) !important;
	padding: 12px 10px !important;
	box-shadow: none !important;
}

body .job-token:hover,
body .job-token.is-active {
	background: #24384e !important;
	border-color: #6f93bb !important;
	box-shadow: none !important;
}

body .job-token span {
	color: #edf4fb !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

body .job-detail {
	padding: 18px !important;
}

body .job-detail-shell {
	gap: 16px !important;
}

body .job-detail-portrait {
	background: #142130 !important;
	border: 1px solid rgba(103, 143, 189, 0.22) !important;
	box-shadow: none !important;
}

body .job-detail-portrait::before {
	border-radius: 0 !important;
	border: 1px solid rgba(103, 143, 189, 0.18) !important;
}

body .job-detail-portrait::after {
	background: #1b2c40 !important;
	border: 1px solid rgba(103, 143, 189, 0.22) !important;
	color: #d8e4f2 !important;
}

body .job-detail-kicker,
body .job-detail-role,
body .job-detail-note,
body .job-detail-text,
body .info-hub p,
body .parade-head p,
body .hero p,
body .card p {
	color: #b8c8db !important;
}

body .job-detail h3,
body .info-hub h2,
body .card h3,
body .parade-head h2,
body .hero h1 {
	color: #f3f7fc !important;
}

body .job-detail-rule {
	background: rgba(103, 143, 189, 0.22) !important;
}

body table th {
	background: #1f3147 !important;
	color: #e6eef8 !important;
	border-color: rgba(103, 143, 189, 0.24) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 600 !important;
}

body table td {
	background: rgba(14, 22, 34, 0.72) !important;
	color: #edf4fb !important;
	border-color: rgba(103, 143, 189, 0.16) !important;
}

body input,
body select,
body textarea {
	background: #122030 !important;
	color: #edf4fb !important;
	border: 1px solid rgba(103, 143, 189, 0.28) !important;
	box-shadow: none !important;
}

body input::placeholder,
body textarea::placeholder {
	color: #8fa7c3 !important;
}

body .char-name-head,
body .char-name-fallback {
	background: #162536 !important;
	border: 1px solid rgba(103, 143, 189, 0.22) !important;
}

body .home-hang {
	background: #1a2d43 !important;
	border: 1px solid rgba(103, 143, 189, 0.28) !important;
	color: #edf4fb !important;
	box-shadow: none !important;
}

body .home-hang::before,
body .home-hang::after {
	background: #6f93bb !important;
	box-shadow: none !important;
}

body .notice.success {
	background: rgba(46, 86, 68, 0.32) !important;
	border: 1px solid rgba(113, 168, 137, 0.24) !important;
	color: #dff7ea !important;
}

body .notice.error {
	background: rgba(104, 49, 49, 0.28) !important;
	border: 1px solid rgba(177, 105, 105, 0.24) !important;
	color: #ffe2e2 !important;
}

body .top-links a,
body .market-nav a,
body .metric-link,
body .action-link,
body .button,
body button.secondary {
	background: #1c2f45 !important;
	border: 1px solid #4f7095 !important;
	color: #edf4fb !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body .top-links a:hover,
body .market-nav a:hover,
body .metric-link:hover,
body .action-link:hover,
body .button:hover,
body button.secondary:hover {
	background: #27415e !important;
	border-color: #6e92bb !important;
}

body .hero,
body .hero-card,
body .section,
body .char-card,
body .market-card,
body .meta-box,
body .metric,
body .empty,
body .requirements li,
body .notice {
	background: linear-gradient(180deg, rgba(18, 28, 41, 0.94), rgba(11, 18, 29, 0.96)) !important;
	border: 1px solid rgba(103, 143, 189, 0.24) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body .hero,
body .section {
	padding: 18px !important;
}

body .eyebrow,
body .badge,
body .badge.ok,
body .badge.locked,
body .badge.blocked {
	background: #22374f !important;
	border: 1px solid #4f7095 !important;
	color: #edf4fb !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body .form-grid select,
body .form-grid input,
body .form-grid textarea,
body .field select,
body .field input,
body .field textarea,
body .field button,
body .inline-form button,
body select,
body input,
body textarea,
body button {
	background: #122030 !important;
	border: 1px solid rgba(103, 143, 189, 0.28) !important;
	color: #edf4fb !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body button,
body .field button,
body .inline-form button {
	background: #36577a !important;
	border-color: #7ea4cf !important;
	color: #f4f8fd !important;
}

body button:hover,
body .field button:hover,
body .inline-form button:hover {
	background: #456a91 !important;
	border-color: #94b6db !important;
}

body .section-head,
body .card-head {
	border-bottom: 1px solid rgba(103, 143, 189, 0.18) !important;
}

body .metric .k,
body .meta-box .k,
body .section-head p,
body .hero-card p,
body .hero p,
body .requirements li,
body .empty,
body .muted,
body label,
body th {
	color: #b8c8db !important;
}

body .metric .v,
body .meta-box .v,
body .hero-card h2,
body .section-head h2,
body .char-top h3,
body .market-card h3 {
	color: #f3f7fc !important;
}

body .btn,
body .tab,
body .guide-link,
body .acc-icon,
body .home-hang,
body a.guide-link,
body .guide-card .guide-link {
	background: #1c2f45 !important;
	border: 1px solid #4f7095 !important;
	color: #edf4fb !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

body .btn:hover,
body .tab:hover,
body .guide-link:hover,
body .acc-icon:hover,
body .home-hang:hover,
body a.guide-link:hover,
body .guide-card .guide-link:hover,
body .tab.is-active,
body .acc-item.is-open .acc-icon {
	background: #27415e !important;
	border-color: #6e92bb !important;
	box-shadow: none !important;
}

body .panel,
body .section,
body .guide-card,
body .acc-item,
body .kv,
body code,
body .cmd-list code,
body .rule-list code {
	background: linear-gradient(180deg, rgba(18, 28, 41, 0.94), rgba(11, 18, 29, 0.96)) !important;
	border: 1px solid rgba(103, 143, 189, 0.24) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body .container,
body .hero {
	background: linear-gradient(180deg, rgba(18, 28, 41, 0.94), rgba(11, 18, 29, 0.96)) !important;
	border: 1px solid rgba(103, 143, 189, 0.24) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body .container::before,
body .container::after,
body .hero::before,
body .hero::after {
	background: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body .eyebrow,
body .title {
	background: transparent !important;
	color: #edf4fb !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-shadow: none !important;
}

body .k,
body .section-sub,
body .acc-meta,
body .hero p,
body .rule-list,
body .cmd-list,
body .guide-card p {
	color: #b8c8db !important;
}

body .v,
body .v-note,
body .section-title,
body .hero h1,
body .guide-card h3,
body .acc-btn {
	color: #f3f7fc !important;
}

@media (max-width: 768px) {
	html {
		font-size: calc(var(--mc-base-size) - 1px);
	}

	h1,
	.hero h1 {
		font-size: clamp(1.35rem, 7vw, 1.7rem) !important;
	}

	h2,
	.section-title {
		font-size: clamp(1.1rem, 5vw, 1.28rem) !important;
	}

	a.btn,
	.btn,
	button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"],
	.action-button,
	.primary-button,
	.secondary-button {
		min-height: 38px !important;
		padding: 0.55rem 0.9rem !important;
	}
}