/*
   Layout polish (2026-09-30). Loaded after style.css by gateway16_enqueue_styles().
   Lives in its own file so style.css (a homepage snapshot source) stays byte-stable.
   1. Korean line breaking   2. Touch targets   3. Contrast   4. Component CSS
*/

/* 1. WordPress core ships word-break:break-word on columns, post titles and button links, which
   overrides the body's keep-all and cuts Korean words mid-syllable. Restore keep-all there;
   overflow-wrap still breaks a token (URL, long English term) that cannot fit on a line. */
body .wp-block-column,
body .wp-block-post-title,
body .wp-block-button__link {
	overflow-wrap: break-word;
	word-break: keep-all;
}

/* Balanced headings avoid a last line holding a single short word. */
h1, h2, h3, .wp-block-heading, .wp-block-post-title {
	text-wrap: balance;
}

/* 2. Links and buttons in header, footer and the floating CTA reach the 44px touch size. */
.ma-brand-link a,
.ma-footer-brand a {
	min-height: 2.75rem;
}

.ma-primary-nav a,
.ma-footer-nav a {
	align-items: center;
	display: inline-flex;
	min-height: 2.75rem;
}

.ma-footer-nav {
	row-gap: 0;
}

.ma-footer-nav a {
	justify-content: center;
	min-width: 2.75rem;
}

.ma-floating-cta-btn {
	min-height: 2.75rem;
}

/* 3. Ink on gold instead of white on gold (2.6:1 -> 6.9:1). */
.ma-floating-cta-btn__tag {
	background: #d6b45c;
	color: #142522;
}

/* 4. Component CSS for the pricing, booking and diagnostic modules. */

/* ==========================================================================
   gateway16 component CSS
   Modules: inc/pricing-packages.php, inc/booking-handler.php, inc/profile-evaluation.php

   Replaces the former .ma-card-selector-grid / .ma-option-card / .ma-card-label rules.

   JS contract (never broken by this file):
   - No rule here sets `display` on an element that inline JS toggles with style.display
     (.ma-eval-step, #ma-eval-wizard, #ma-eval-results, #eval-error-msg, #ma-share-toast,
     #ma-quick-booking-form, #bk-form-error, the <template>).
   - Two deliberate exceptions, because JS writes the SAME value the default needs:
     .ma-card-selector-grid (display:grid) and .ma-radio-pill-group (display:flex).
     Inline style always beats a class rule, so style.display = "none" still hides them.
   - No rule sets `width` on #ma-eval-progress (JS animates its inline width).
   - No !important anywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Scope tokens and text flow (zero specificity)
   -------------------------------------------------------------------------- */
:where(.ma-packages-section, .ma-booking-section, .ma-eval-container) {
	--ma-ink: var(--wp--preset--color--ink, #142522);
	--ma-canvas: var(--wp--preset--color--canvas, #f5f1e8);
	--ma-paper: var(--wp--preset--color--paper, #fffdf8);
	--ma-accent: var(--wp--preset--color--accent, #d6b45c);
	--ma-signal: var(--wp--preset--color--signal, #0f6b5b);
	--ma-quiet: var(--wp--preset--color--quiet, #53645f);
	--ma-line: var(--wp--preset--color--line, #c8d0ca);
	--ma-line-strong: var(--wp--preset--color--line-on-dark, #82918c);
	--ma-tint: #ecf1ec;
	--ma-danger: #8c2f1f;
	--ma-danger-bg: #fbeeea;
	--ma-danger-line: #e0b0a4;
	--ma-radius: 0.8rem;
	--ma-shadow: 0 0.75rem 2rem rgba(20, 37, 34, 0.05);
	overflow-wrap: break-word;
	word-break: keep-all;
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
	:where(.ma-packages-section, .ma-booking-section, .ma-eval-container) {
		--ma-tint: color-mix(in srgb, var(--ma-signal) 8%, var(--ma-paper));
	}
}

:where(.ma-packages-section, .ma-booking-section, .ma-eval-container),
:where(.ma-packages-section, .ma-booking-section, .ma-eval-container) *,
:where(.ma-packages-section, .ma-booking-section, .ma-eval-container) *::before,
:where(.ma-packages-section, .ma-booking-section, .ma-eval-container) *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. Pricing packages (inc/pricing-packages.php)
   -------------------------------------------------------------------------- */

/* Section header */
.ma-packages-header {
	max-width: 48rem;
}

.ma-packages-title {
	margin: 0.5rem 0 0.75rem;
}

.ma-packages-lead {
	color: var(--ma-quiet);
	margin: 0;
}

/* Cards grid: 1 column on phones, auto-fit tracks of at least 280px */
.ma-pricing-grid {
	--ma-gap: clamp(1rem, 2.5vw, 1.5rem);
	display: grid;
	gap: 1.75rem var(--ma-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	margin-top: clamp(2rem, 5vw, 2.75rem);
}

.ma-pricing-grid--1col {
	grid-template-columns: minmax(0, 40rem);
	justify-content: center;
}

.ma-pricing-grid--2col {
	margin-inline: auto;
	max-width: 60rem;
}

/* Three columns only when the GRID (not the viewport) is wide enough: each track wants a third of
   the width but never less than 280px, so a 720px content column falls back to two columns. */
.ma-pricing-grid--3col {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, calc((100% - 2 * var(--ma-gap)) / 3 - 1px))), 1fr));
}

/* Card */
.ma-pricing-card {
	--ma-pad: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius);
	box-shadow: var(--ma-shadow);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
	padding: var(--ma-pad);
	position: relative;
	scroll-margin-top: 6rem;
}

.ma-pricing-card--featured {
	border-color: var(--ma-accent);
	box-shadow: 0 0 0 1px var(--ma-accent), var(--ma-shadow);
}

.ma-pricing-ribbon {
	left: var(--ma-pad);
	max-width: calc(100% - 2 * var(--ma-pad));
	position: absolute;
	top: 0;
	transform: translateY(-50%);
	z-index: 1;
}

.ma-pricing-ribbon span {
	background: var(--ma-accent);
	border-radius: 999px;
	color: var(--ma-ink);
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.4;
	padding: 0.25rem 0.875rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.ma-pricing-card__header {
	display: grid;
	gap: 0.35rem;
}

.ma-pricing-tag {
	color: var(--ma-signal);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.45;
}

.ma-pricing-name {
	font-size: clamp(1.25rem, 2.2vw, 1.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0;
	text-wrap: balance;
}

.ma-pricing-name-en {
	color: var(--ma-quiet);
	font-size: 0.875rem;
	line-height: 1.45;
}

.ma-pricing-subtitle {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0.35rem 0 0;
}

.ma-pricing-target {
	background: var(--ma-canvas);
	border-left: 3px solid var(--ma-accent);
	border-radius: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
	padding: 0.75rem 1rem;
}

.ma-pricing-target strong {
	color: var(--ma-signal);
}

.ma-pricing-cost-box {
	border-block: 1px solid var(--ma-line);
	display: grid;
	gap: 0.35rem;
	padding-block: 1rem;
}

.ma-pricing-cost-notice {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.45;
}

.ma-pricing-cost-detail {
	color: var(--ma-quiet);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.ma-pricing-features__title {
	color: var(--ma-signal);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.4;
	margin: 0 0 0.75rem;
}

.ma-pricing-features ul {
	display: grid;
	gap: 0.65rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The markup already prints a check mark; suppress the native bullet so it is not doubled. */
.ma-pricing-features li {
	display: grid;
	font-size: 0.9375rem;
	gap: 0.5rem;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	line-height: 1.6;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ma-check-icon {
	color: var(--ma-signal);
	font-weight: 800;
	text-align: center;
}

.ma-pricing-card__action {
	margin-top: auto;
	padding-top: 0.25rem;
}

/* Buttons: outline by default, filled ink for the featured plan */
.ma-pricing-cta-btn,
.ma-packages-primary-btn {
	align-items: center;
	border: 1.5px solid var(--ma-ink);
	border-radius: 1.75rem;
	cursor: pointer;
	display: flex;
	font-size: 1rem;
	font-weight: 700;
	gap: 0.5rem;
	justify-content: center;
	line-height: 1.4;
	min-height: 3rem;
	padding: 0.75rem 1.25rem;
	text-align: center;
	text-decoration: none;
	text-wrap: balance;
}

.ma-pricing-cta-btn {
	background: transparent;
	color: var(--ma-ink);
	width: 100%;
}

.ma-pricing-cta-btn--primary,
.ma-packages-primary-btn {
	background: var(--ma-ink);
	color: var(--ma-paper);
}

.ma-pricing-cta-btn:hover,
.ma-packages-primary-btn:hover {
	background: var(--ma-signal);
	border-color: var(--ma-signal);
	color: var(--ma-paper);
}

.ma-arrow {
	display: inline-block;
}

/* Timeline */
.ma-timeline-wrapper,
.ma-onboarding-wrapper,
.ma-pricing-trust-box,
.ma-comparison-section,
.ma-packages-bottom-cta {
	margin-top: clamp(3rem, 7vw, 5rem);
}

.ma-timeline-header,
.ma-onboarding-header {
	margin-bottom: 1.75rem;
	max-width: 46rem;
}

.ma-timeline-eyebrow,
.ma-onboarding-eyebrow {
	color: var(--ma-signal);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ma-timeline-title,
.ma-onboarding-title {
	font-size: clamp(1.4rem, 3vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0.4rem 0 0.6rem;
}

.ma-timeline-desc,
.ma-onboarding-desc {
	color: var(--ma-quiet);
	margin: 0;
}

.ma-timeline-track {
	display: grid;
	gap: 1.25rem;
}

.ma-timeline-step {
	padding-left: 1.75rem;
	position: relative;
}

.ma-timeline-step::before {
	background: var(--ma-line);
	bottom: -1.25rem;
	content: "";
	left: 0.4375rem;
	position: absolute;
	top: 0.5rem;
	width: 2px;
}

.ma-timeline-step:last-child::before {
	display: none;
}

.ma-timeline-step::after {
	background: var(--ma-accent);
	border: 2px solid var(--ma-paper);
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px var(--ma-ink);
	content: "";
	height: 0.875rem;
	left: 0;
	position: absolute;
	top: 0.25rem;
	width: 0.875rem;
}

.ma-timeline-step__marker {
	display: grid;
	gap: 0.1rem;
	margin-bottom: 0.6rem;
}

.ma-phase-num {
	color: var(--ma-signal);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

.ma-phase-timing {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
}

.ma-timeline-step__card {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius);
	min-width: 0;
	padding: 1.125rem 1.25rem;
}

.ma-phase-title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 0.35rem;
	text-wrap: balance;
}

.ma-phase-desc {
	color: var(--ma-quiet);
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 0;
}

@media (min-width: 45rem) {
	.ma-timeline-step {
		column-gap: 2.5rem;
		display: grid;
		grid-template-columns: 11rem minmax(0, 1fr);
		padding-left: 0;
	}

	.ma-timeline-step::before {
		left: calc(11rem + 1.25rem - 1px);
	}

	.ma-timeline-step::after {
		left: calc(11rem + 1.25rem - 7px);
	}

	.ma-timeline-step__marker {
		align-content: start;
		margin-bottom: 0;
		padding-top: 0.05rem;
	}
}

/* Onboarding */
.ma-onboarding-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.ma-onboarding-card {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius);
	border-top: 3px solid var(--ma-accent);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	padding: 1.25rem;
}

.ma-onboarding-card__num {
	color: var(--ma-signal);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.4;
	white-space: nowrap;
}

.ma-onboarding-card__badge {
	align-self: flex-start;
	background: var(--ma-canvas);
	border: 1px solid var(--ma-line);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 0.15rem 0.7rem;
}

.ma-onboarding-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0.25rem 0 0;
	text-wrap: balance;
}

.ma-onboarding-card__desc {
	color: var(--ma-quiet);
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 0;
}

/* Trust box (light panel: the eyebrow inside uses the signal colour utility) */
.ma-pricing-trust-box {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius);
	border-top: 4px solid var(--ma-accent);
	box-shadow: var(--ma-shadow);
	padding: clamp(1.25rem, 4vw, 2.25rem);
}

.ma-pricing-trust-header {
	max-width: 46rem;
}

.ma-pricing-trust-header h4,
.ma-pricing-trust-main-title {
	font-size: clamp(1.25rem, 2.6vw, 1.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.35;
	margin: 0 0 0.5rem;
}

.ma-pricing-trust-header p {
	color: var(--ma-quiet);
	margin: 0;
}

.ma-pricing-trust-grid {
	display: grid;
	gap: 1.25rem 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	margin-top: 1.5rem;
}

.ma-pricing-trust-item {
	align-items: flex-start;
	border-top: 1px solid var(--ma-line);
	display: flex;
	gap: 0.875rem;
	padding-top: 1.25rem;
}

.ma-pricing-trust-item .ma-trust-icon {
	align-items: center;
	background: var(--ma-canvas);
	border: 1px solid var(--ma-line);
	border-radius: 50%;
	color: var(--ma-ink);
	display: flex;
	flex: none;
	font-size: 1.25rem;
	height: 2.75rem;
	justify-content: center;
	line-height: 1;
	width: 2.75rem;
}

.ma-trust-content {
	min-width: 0;
}

.ma-pricing-trust-item :is(h4, h5) {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 0.3rem;
}

.ma-pricing-trust-item p {
	color: var(--ma-quiet);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

/* Bottom call to action */
.ma-packages-bottom-cta {
	align-items: center;
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius);
	border-top: 4px solid var(--ma-accent);
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2rem);
	text-align: center;
}

.ma-packages-primary-btn {
	display: inline-flex;
	font-size: 1.0625rem;
	font-weight: 800;
	max-width: 100%;
	min-height: 3.25rem;
	padding: 0.875rem 1.75rem;
}

.ma-packages-sub-note {
	color: var(--ma-quiet);
	font-size: 0.9375rem;
	line-height: 1.7;
	max-width: 40rem;
}

/* --------------------------------------------------------------------------
   2. Shared by booking form and diagnostic: badge, title, controls, buttons
   -------------------------------------------------------------------------- */
.ma-booking-badge,
.ma-eval-badge {
	background: var(--ma-accent);
	border-radius: 999px;
	color: var(--ma-ink);
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.5;
	padding: 0.25rem 0.875rem;
}

.ma-booking-title,
.ma-eval-title {
	font-size: clamp(1.5rem, 4.2vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.3;
	margin: 0.75rem 0 0.6rem;
	text-wrap: balance;
}

.ma-booking-desc,
.ma-eval-subtitle {
	color: var(--ma-quiet);
	line-height: 1.65;
	margin: 0;
	max-width: 44rem;
}

/* Text controls */
.ma-form-field :where(input:not([type="checkbox"], [type="radio"]), select, textarea),
.ma-input-text {
	background-color: var(--ma-canvas);
	border: 1.5px solid var(--ma-line-strong);
	border-radius: 0.6rem;
	color: var(--ma-ink);
	display: block;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	margin: 0;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	text-overflow: ellipsis;
	width: 100%;
}

.ma-form-field textarea {
	line-height: 1.6;
	min-height: 7.5rem;
	resize: vertical;
}

.ma-form-field select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23142522' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
	background-position: right 1rem center;
	background-repeat: no-repeat;
	background-size: 1rem;
	padding-right: 2.75rem;
	text-overflow: ellipsis;
}

.ma-form-field :is(input, select, textarea)::placeholder,
.ma-input-text::placeholder {
	color: var(--ma-quiet);
	opacity: 1;
}

.ma-form-field :is(input, select, textarea):focus,
.ma-input-text:focus {
	background-color: var(--ma-paper);
	border-color: var(--ma-signal);
}

.ma-form-field :is(input, select, textarea):user-invalid,
.ma-input-text:user-invalid {
	border-color: var(--ma-danger);
}

.ma-form-field > label,
.ma-field-label {
	color: var(--ma-ink);
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.45;
}

.ma-form-field > label {
	margin-bottom: 0.4rem;
}

.ma-field-label {
	margin-bottom: 0.5rem;
}

.ma-req {
	color: var(--ma-danger);
	font-weight: 800;
}

/* Round radios, square checkboxes (native input restyled; the :checked state is real, not JS) */
:is(.ma-option-card, .ma-check-card, .ma-pill-label, .ma-consent-label) > input:is([type="checkbox"], [type="radio"]) {
	-webkit-appearance: none;
	appearance: none;
	background: var(--ma-paper);
	border: 1.5px solid var(--ma-line-strong);
	cursor: pointer;
	display: inline-grid;
	flex: none;
	height: 1.375rem;
	margin: 0;
	place-content: center;
	width: 1.375rem;
}

:is(.ma-option-card, .ma-check-card, .ma-pill-label, .ma-consent-label) > input[type="radio"] {
	border-radius: 50%;
}

:is(.ma-option-card, .ma-check-card, .ma-pill-label, .ma-consent-label) > input[type="checkbox"] {
	border-radius: 0.3rem;
}

:is(.ma-option-card, .ma-check-card, .ma-pill-label, .ma-consent-label) > input[type="checkbox"]::before {
	background: var(--ma-paper);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
	content: "";
	height: 0.75rem;
	transform: scale(0);
	width: 0.75rem;
}

:is(.ma-option-card, .ma-check-card, .ma-pill-label, .ma-consent-label) > input:checked {
	background: var(--ma-signal);
	border-color: var(--ma-signal);
}

:is(.ma-option-card, .ma-check-card, .ma-pill-label, .ma-consent-label) > input[type="radio"]:checked {
	box-shadow: inset 0 0 0 0.22rem var(--ma-paper);
}

:is(.ma-option-card, .ma-check-card, .ma-pill-label, .ma-consent-label) > input[type="checkbox"]:checked::before {
	transform: scale(1);
}

@media (forced-colors: active) {
	:is(.ma-option-card, .ma-check-card, .ma-pill-label, .ma-consent-label) > input:checked {
		background: Highlight;
		border-color: Highlight;
	}
}

/* Consent (booking form and diagnostic) */
.ma-consent-label {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	font-size: 0.9375rem;
	gap: 0.75rem;
	line-height: 1.6;
	min-height: 2.75rem;
}

.ma-consent-label > input {
	margin-top: 0.15rem;
}

.ma-consent-label a {
	text-decoration: underline;
}

.ma-consent-sub {
	color: var(--ma-quiet);
	font-size: 0.875rem;
	line-height: 1.65;
	margin: 0.5rem 0 0 2.125rem;
}

/* Error boxes: no display here, JS toggles them with style.display */
.ma-form-error,
.ma-alert-error {
	background: var(--ma-danger-bg);
	border: 1px solid var(--ma-danger-line);
	border-radius: 0.6rem;
	color: var(--ma-danger);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.55;
	margin-top: 1rem;
	padding: 0.875rem 1rem;
}

/* --------------------------------------------------------------------------
   3. Consultation booking form (inc/booking-handler.php)
   -------------------------------------------------------------------------- */
.ma-content-section.ma-booking-section {
	border-bottom: 0;
	scroll-margin-top: 6rem;
}

.ma-booking-card {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius);
	box-shadow: var(--ma-shadow);
	margin-inline: auto;
	max-width: 52rem;
	padding: clamp(1.25rem, 4vw, 2.5rem);
}

.ma-booking-card__header {
	border-bottom: 1px solid var(--ma-line);
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
	padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.ma-booking-trust-points {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9375rem;
	gap: 0.4rem 1.25rem;
	line-height: 1.5;
	margin-top: 1.25rem;
}

.ma-booking-trust-points span {
	color: var(--ma-ink);
	font-weight: 600;
}

.ma-booking-step + .ma-booking-step {
	margin-top: clamp(1.75rem, 4vw, 2.25rem);
}

.ma-booking-step > * + * {
	margin-top: 1rem;
}

.ma-booking-step__title {
	align-items: center;
	display: flex;
	font-size: 1.125rem;
	font-weight: 700;
	gap: 0.75rem;
	line-height: 1.4;
	margin: 0;
}

.ma-step-num {
	align-items: center;
	background: var(--ma-ink);
	border-radius: 50%;
	color: var(--ma-paper);
	display: inline-flex;
	flex: none;
	font-size: 0.9375rem;
	font-weight: 800;
	height: 2rem;
	justify-content: center;
	line-height: 1;
	width: 2rem;
}

.ma-form-grid {
	display: grid;
	gap: 1rem 1.25rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
	.ma-form-grid--2col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ma-form-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ma-booking-consent {
	background: var(--ma-canvas);
	border-radius: 0.6rem;
	margin-top: clamp(1.5rem, 3vw, 2rem);
	padding: 1rem 1.25rem;
}

.ma-booking-actions {
	margin-top: 1.5rem;
}

.ma-booking-submit-btn,
.ma-btn-eval {
	align-items: center;
	background: var(--ma-ink);
	border: 1.5px solid var(--ma-ink);
	border-radius: 1.75rem;
	color: var(--ma-paper);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	gap: 0.5rem;
	justify-content: center;
	line-height: 1.4;
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	text-align: center;
	text-wrap: balance;
}

.ma-booking-submit-btn {
	font-size: 1.0625rem;
	font-weight: 800;
	min-height: 3.5rem;
	padding: 0.875rem 1.5rem;
	width: 100%;
}

.ma-booking-submit-btn:hover,
.ma-btn-eval:hover {
	background: var(--ma-signal);
	border-color: var(--ma-signal);
}

.ma-booking-submit-btn:disabled,
.ma-btn-eval:disabled {
	background: var(--ma-quiet);
	border-color: var(--ma-quiet);
	cursor: wait;
}

/* Post-submit confirmation (cloned from the <template>; inline-styled slot box is left alone) */
.ma-booking-confirmation {
	padding-block: clamp(0.5rem, 2vw, 1rem);
	text-align: center;
}

.ma-confirm-icon {
	align-items: center;
	background: var(--ma-canvas);
	border: 1px solid var(--ma-line);
	border-radius: 50%;
	display: flex;
	font-size: 1.75rem;
	height: 4rem;
	justify-content: center;
	line-height: 1;
	margin: 0 auto 1rem;
	width: 4rem;
}

.ma-confirm-badge {
	background: var(--ma-signal);
	border-radius: 999px;
	color: var(--ma-paper);
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.5;
	padding: 0.25rem 0.875rem;
}

.ma-confirm-title {
	font-size: clamp(1.3rem, 3.6vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.35;
	margin: 0.75rem 0 0.6rem;
	text-wrap: balance;
}

.ma-confirm-id {
	color: var(--ma-quiet);
	margin: 0 0 1.5rem;
}

.ma-confirm-id strong {
	background: var(--ma-canvas);
	border: 1px solid var(--ma-line);
	border-radius: 0.4rem;
	color: var(--ma-ink);
	display: inline-block;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
	padding: 0.1rem 0.6rem;
	white-space: nowrap;
}

.ma-confirm-box {
	background: var(--ma-canvas);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius);
	padding: 1.25rem 1.5rem;
	text-align: left;
}

.ma-confirm-box h4 {
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 0.6rem;
}

.ma-confirm-box p {
	font-size: 0.9375rem;
	line-height: 1.8;
	margin: 0;
}

.ma-confirm-help {
	color: var(--ma-quiet);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-top: 1.25rem;
}

.ma-confirm-help a {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. Profile diagnostic wizard (inc/profile-evaluation.php)
   -------------------------------------------------------------------------- */
.ma-eval-container {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius);
	box-shadow: var(--ma-shadow);
	margin-inline: auto;
	max-width: 56rem;
	padding: clamp(1.25rem, 4vw, 2.5rem);
	scroll-margin-top: 4rem;
}

.ma-eval-header {
	border-bottom: 1px solid var(--ma-line);
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
	padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

/* Progress: JS writes the inline width of the bar; only height, colour and easing are ours */
.ma-eval-progress-wrap {
	background: var(--ma-line);
	border-radius: 999px;
	height: 0.5rem;
	margin-top: 1.5rem;
	overflow: hidden;
}

.ma-eval-progress-bar {
	background: var(--ma-signal);
	border-radius: inherit;
	height: 100%;
}

.ma-eval-step-indicator {
	color: var(--ma-signal);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.45;
	margin-top: 0.65rem;
}

/* Steps: JS shows/hides with style.display, so nothing here touches `display`.
   The entrance fade replays every time JS flips a step from none to block. */
@media (prefers-reduced-motion: no-preference) {
	.ma-eval-step {
		animation: ma-eval-step-in 240ms ease-out;
	}

	.ma-eval-progress-bar {
		transition: width 320ms ease;
	}
}

@keyframes ma-eval-step-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.ma-step-heading {
	font-size: clamp(1.15rem, 2.8vw, 1.35rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.4;
	margin: 0 0 0.4rem;
}

.ma-step-subdesc {
	color: var(--ma-quiet);
	margin: 0 0 1.25rem;
}

.ma-field-group {
	margin-top: 1.5rem;
}

/* JS toggles these with style.display = "grid" / "flex" / "none" (inline wins) */
/* auto-fit tracks follow the width of the wizard card, not the viewport */
.ma-card-selector-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	margin-top: 0.75rem;
}

.ma-card-selector-grid.cols-3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.ma-radio-pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Option cards (schools, brackets) and differentiator cards */
.ma-option-card,
.ma-check-card {
	align-items: flex-start;
	background: var(--ma-paper);
	border: 1.5px solid var(--ma-line);
	border-radius: 0.6rem;
	cursor: pointer;
	display: flex;
	gap: 0.75rem;
	min-height: 3.5rem;
	min-width: 0;
	padding: 0.875rem 1rem;
}

.ma-option-card:hover,
.ma-check-card:hover {
	border-color: var(--ma-signal);
	box-shadow: none;
}

.ma-option-card:has(> input:checked),
.ma-check-card:has(> input:checked) {
	background: var(--ma-tint);
	border-color: var(--ma-signal);
	box-shadow: 0 0 0 1px var(--ma-signal);
}

.ma-card-label,
.ma-check-body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.ma-card-label strong,
.ma-check-body strong {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.45;
	text-wrap: balance;
}

.ma-card-label small,
.ma-check-body small {
	color: var(--ma-quiet);
	display: block;
	font-size: 0.875rem;
	line-height: 1.55;
	text-wrap: balance;
}

.ma-checkbox-stack {
	display: grid;
	gap: 0.75rem;
}

/* Pills: track switch (inline-styled, JS recolours it) and round selector */
.ma-pill-label {
	align-items: center;
	background: var(--ma-paper);
	border: 1.5px solid var(--ma-line-strong);
	border-radius: 0.6rem;
	cursor: pointer;
	display: flex;
	font-size: 1rem;
	font-weight: 600;
	gap: 0.6rem;
	justify-content: center;
	line-height: 1.45;
	min-height: 3rem;
	padding: 0.6rem 1rem;
}

.ma-pill-label:hover {
	border-color: var(--ma-signal);
}

.ma-pill-label:has(> input:checked) {
	background: var(--ma-tint);
	border-color: var(--ma-signal);
}

/* Navigation: primary on top on phones, previous/next on one row from 720px */
.ma-nav-actions {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.ma-nav-actions .ma-btn-eval {
	width: 100%;
}

@media (min-width: 45rem) {
	.ma-nav-actions {
		flex-direction: row;
		justify-content: space-between;
	}

	.ma-nav-actions .ma-btn-eval {
		width: auto;
	}

	.ma-nav-actions .ma-btn-next:only-child {
		margin-left: auto;
	}
}

.ma-btn-prev {
	background: transparent;
	border-color: var(--ma-line-strong);
	color: var(--ma-ink);
}

.ma-btn-prev:hover {
	background: var(--ma-canvas);
	border-color: var(--ma-ink);
}

/* Step 5: lead gate */
.ma-gate-box {
	background: var(--ma-canvas);
	border-radius: var(--ma-radius);
	margin-top: 1.25rem;
	padding: clamp(1rem, 3vw, 1.5rem);
}

.ma-gate-preview-summary {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: 0.6rem;
	padding: 0.5rem 1rem;
}

.ma-preview-row {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9375rem;
	gap: 0.15rem 0.6rem;
	line-height: 1.55;
	padding-block: 0.5rem;
}

.ma-preview-row + .ma-preview-row {
	border-top: 1px solid var(--ma-line);
}

.ma-preview-row span {
	color: var(--ma-quiet);
	white-space: nowrap;
}

.ma-form-row {
	margin-top: 1.125rem;
}

.ma-consent-row {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: 0.6rem;
	margin-top: 1.25rem;
	padding: 0.75rem 1rem;
}

/* Results */
.ma-results-banner {
	align-items: center;
	background: var(--ma-canvas);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius);
	display: grid;
	gap: 1.25rem 2rem;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	padding: clamp(1.25rem, 4vw, 2rem);
	text-align: center;
}

.ma-score-circle-wrap {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	min-width: 0;
}

.ma-score-gauge {
	align-items: center;
	background: var(--ma-ink);
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--ma-canvas), 0 0 0 6px var(--ma-accent);
	color: var(--ma-paper);
	display: flex;
	flex-direction: column;
	height: 7.5rem;
	justify-content: center;
	width: 7.5rem;
}

.ma-score-num {
	font-size: 2.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
}

.ma-score-label {
	color: var(--ma-line);
	font-size: 0.9375rem;
	font-weight: 600;
	margin-top: 0.15rem;
}

/* JS sets the pill background inline per score tier; the text colour must stay light */
.ma-score-tier {
	background: var(--ma-signal);
	border-radius: 999px;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	max-width: 100%;
	padding: 0.4rem 1rem;
}

.ma-score-desc {
	min-width: 0;
}

.ma-score-desc h3 {
	font-size: clamp(1.15rem, 3vw, 1.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.4;
	margin: 0 0 0.5rem;
}

.ma-score-desc p {
	margin: 0;
}

@media (min-width: 45rem) {
	.ma-results-banner {
		grid-template-columns: auto minmax(0, 1fr);
		justify-items: stretch;
		text-align: left;
	}
}

.ma-results-breakdown-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
	margin-block: 1.25rem;
}

@media (min-width: 45rem) {
	.ma-results-breakdown-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ma-breakdown-card {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius);
	min-width: 0;
	padding: 1.25rem;
}

.ma-breakdown-card h4 {
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 0.75rem;
}

.ma-portfolio-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ma-portfolio-list li {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	justify-content: space-between;
	margin: 0;
	padding-block: 0.7rem;
}

.ma-portfolio-list li + li {
	border-top: 1px solid var(--ma-line);
}

.sch-name {
	font-weight: 700;
	min-width: 0;
}

.sch-fit {
	background: var(--ma-canvas);
	border: 1px solid var(--ma-line-strong);
	border-radius: 999px;
	color: var(--ma-ink);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
	padding: 0.15rem 0.7rem;
}

.sch-fit.badge-reach {
	background: var(--ma-accent);
	border-color: var(--ma-accent);
	color: var(--ma-ink);
}

.sch-fit.badge-safe {
	background: var(--ma-signal);
	border-color: var(--ma-signal);
	color: var(--ma-paper);
}

.ma-levers-list {
	display: grid;
	gap: 1rem;
}

.ma-lever-item {
	border-left: 3px solid var(--ma-accent);
	padding-left: 0.875rem;
}

.ma-lever-item strong {
	display: block;
	line-height: 1.5;
	margin-bottom: 0.25rem;
}

.ma-lever-item p {
	color: var(--ma-quiet);
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 0;
}

/* Result actions: playbook (outline) and consultation (primary, dark panel with gold button) */
.ma-results-action-banner {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 45rem) {
	.ma-results-action-banner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ma-action-playbook-box,
.ma-action-consult-box {
	border-radius: var(--ma-radius);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

.ma-action-playbook-box {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
}

.ma-action-consult-box {
	background: var(--ma-ink);
	color: var(--ma-paper);
}

.ma-action-playbook-box h4,
.ma-action-consult-box h4 {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.4;
	margin: 0;
}

.ma-action-playbook-box p,
.ma-action-consult-box p {
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 0;
}

.ma-action-playbook-box p {
	color: var(--ma-quiet);
}

.ma-action-consult-box p {
	color: var(--ma-line);
}

.ma-res-badge,
.ma-res-badge-gold {
	align-self: flex-start;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.5;
	padding: 0.2rem 0.75rem;
}

.ma-res-badge {
	border: 1.5px solid var(--ma-signal);
	color: var(--ma-signal);
}

.ma-res-badge-gold {
	background: var(--ma-accent);
	color: var(--ma-ink);
}

.ma-btn-download-playbook,
.ma-btn-claim-consultation {
	align-items: center;
	border-radius: 1.75rem;
	display: flex;
	font-size: 1rem;
	font-weight: 700;
	justify-content: center;
	line-height: 1.4;
	margin-top: auto;
	min-height: 3rem;
	padding: 0.75rem 1.25rem;
	text-align: center;
	text-decoration: none;
	text-wrap: balance;
}

.ma-btn-download-playbook {
	border: 1.5px solid var(--ma-ink);
	color: var(--ma-ink);
}

.ma-btn-download-playbook:hover {
	background: var(--ma-ink);
	color: var(--ma-paper);
}

.ma-btn-claim-consultation {
	background: var(--ma-accent);
	border: 1.5px solid var(--ma-accent);
	color: var(--ma-ink);
	font-weight: 800;
}

.ma-btn-claim-consultation:hover {
	background: var(--ma-paper);
	border-color: var(--ma-paper);
}

/* The share buttons are inline-styled (padding 12px 20px = 42px tall); a min-height is not inline */
.ma-btn-share-kakao,
.ma-btn-share-copy {
	min-height: 2.75rem;
}

/* Focus on the dark consultation panel: the theme ring is green, which is weak on ink */
.ma-action-consult-box a:focus-visible {
	outline-color: var(--ma-accent);
}

/* Hover motion only where a pointer exists and motion is welcome */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.ma-pricing-cta-btn,
	.ma-packages-primary-btn,
	.ma-booking-submit-btn,
	.ma-btn-eval,
	.ma-btn-download-playbook,
	.ma-btn-claim-consultation,
	.ma-option-card,
	.ma-check-card,
	.ma-pill-label,
	.ma-form-field :is(input, select, textarea),
	.ma-input-text {
		transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
	}

	.ma-arrow {
		transition: transform 160ms ease;
	}

	.ma-pricing-cta-btn:hover .ma-arrow,
	.ma-packages-primary-btn:hover .ma-arrow {
		transform: translateX(3px);
	}
}

/*
 * 2026-10-11 mobile spacing fixes
 * Production-only additional CSS (served inside global-styles-inline-css) copied verbatim
 * so a theme deploy cannot drop it. Identical rules are harmless if production keeps its copy.
 */
.ma-results-preview-section { display:none !important; }
@media (max-width:480px){
  .ma-comparison-table td, .ma-comparison-table th { vertical-align: top; }
  .ma-floating-cta-shell { transform:none !important; position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; width:100% !important; height:auto !important; display:flex !important; flex-direction:row !important; gap:0 !important; margin:0 !important; padding:0 0 env(safe-area-inset-bottom) !important; background:#fff !important; box-shadow:0 -2px 10px rgba(0,0,0,.12) !important; border-radius:0 !important; }
  .ma-floating-cta-shell .ma-floating-cta-btn { flex:1 1 50% !important; width:auto !important; min-width:0 !important; height:44px !important; min-height:0 !important; padding:0 8px !important; font-size:14px !important; line-height:1 !important; margin:0 !important; border-radius:0 !important; box-shadow:none !important; justify-content:center !important; align-items:center !important; position:relative !important; transform:none !important; }
  .ma-floating-cta-shell .ma-floating-cta-btn__tag, .ma-floating-cta-shell .ma-floating-cta-btn__pulse { display:none !important; }
  .gateway16-footer { padding-bottom: 56px !important; }
  body.page:has(.ma-results-page-wrap) main#main-content { padding-bottom: 0 !important; }
  .ma-results-page-wrap .ma-breakthrough-section { padding-bottom: 16px !important; }
  .ma-results-page-wrap .ma-defense-framework-block { padding-bottom: 0 !important; }
  body:has(.ma-results-page-wrap) footer.wp-block-template-part { margin-top: 0 !important; }
}