/**
 * The Navigator — quiz styles.
 * Colours match Empaediatrics' real brand palette, pulled from
 * empaediatrics.com: navy headings (#273B72), orange brand accent
 * (#FE9456), and the site's lavender button colour (#8E9EDA) as the
 * primary interactive colour throughout. Red/amber/green stay as
 * clinical triage colours (amber rendered as a true gold/yellow, per
 * client direction), independent of the brand palette.
 */
.navigator-root {
	--nav-navy: #273B72;
	--nav-orange: #FE9456;
	--nav-orange-dark: #C85A1F;
	--nav-gold: #8E9EDA;
	--nav-gold-hover: #7c8ecf;
	--nav-red: #b4272b;
	--nav-red-bg: #fdecea;
	--nav-amber: #9c6b14;
	--nav-amber-bg: #fff8e6;
	--nav-yellow: #e4a63b;
	--nav-green: #0c7950;
	--nav-green-bg: #eaf7ee;
	--nav-border: #8E9EDA;
	--nav-border-accent: #FE9456;
	--nav-border-light: #e2e6ea;
	--nav-muted: #5b6673;
	--nav-card: #ffffff;
	/* Site's own light tint (the section background behind their white
	   "services" cards on empaediatrics.com) — used to separate the
	   borderless question options from the white quiz card beneath them,
	   the same way the real site separates white cards without a line. */
	--nav-bg: #F1F4FB;
	--nav-bg-hover: #E6EBF9;
	--nav-text: #273B72;
	/* Fills whatever container the theme/page provides — no fixed cap here,
	   so it follows the site's own content width rather than imposing one. */
	width: 100%;
	max-width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--nav-text);
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-break: break-word;
}
.navigator-root * { box-sizing: border-box; }

/* Defensive reset against the host theme's own typography rules. The
   theme applies its own font-family to bare h1–h4 tags site-wide
   (confirmed live: it forces Montserrat onto our headings instead of
   this plugin's font), which can beat our class-based selectors
   depending on the theme stylesheet's load order and specificity. Every
   heading in the approved design uses this plugin's own font stack, so
   we restate that here, scoped to .navigator-root and marked
   !important so it always wins regardless of what the active theme
   does. (Text-align is handled per-class below, not here, since one
   screen intentionally centers its heading.) */
.navigator-root h1,
.navigator-root h2,
.navigator-root h3,
.navigator-root h4 {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	text-transform: none !important;
	font-style: normal !important;
}

.navigator-card {
	background: var(--nav-card);
	border: none;
	border-radius: 14px;
	padding: 22px 20px;
	margin-bottom: 16px;
}
.navigator-muted { color: var(--nav-muted); margin-top: -6px; }
.navigator-small { font-size: 0.85rem; color: var(--nav-muted); }

/* Starter screen — hero + info cards + disclaimer, matching the approved design. */
.navigator-start-screen { display: flex; flex-direction: column; }

.navigator-hero {
	border-radius: 28px;
	padding: 30px 24px;
	background: none;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 34px;
	margin: 0 0 20px;
}
.navigator-hero-art { min-width: 0; }
.navigator-hero-art img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; }
.navigator-hero-copy { padding: 20px 0 30px; }
.navigator-hero-title {
	font-size: 56px;
	line-height: 1.08;
	margin: 0 0 9px;
	letter-spacing: -0.02em;
	color: var(--nav-navy);
	font-weight: 400;
	/* The theme centers bare h1 tags site-wide; this design is left-aligned. */
	text-align: left !important;
}
.navigator-hero-title .navigator-copyright { font-size: 0.38em; vertical-align: super; margin-left: 5px; }
.navigator-hero-title small { display: block; font-size: 16px; line-height: 1.4; font-weight: 400; letter-spacing: 0; margin-top: 10px; color: var(--nav-navy); }
.navigator-hero-lead { font-size: 26px; line-height: 1.25; margin: 26px 0 21px; color: var(--nav-navy); }
.navigator-hero-rule { height: 2px; width: 82px; background: var(--nav-orange); margin: 28px 0; }
.navigator-hero-intro { margin: 0; font-size: 17px; line-height: 1.55; }

.navigator-info-card {
	margin: 0 0 20px;
	border-radius: 28px;
	padding: 32px 40px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 28px;
}
.navigator-info-scope { background: linear-gradient(135deg, #fdf1de, #fbe3bf); }
.navigator-info-emergency { background: linear-gradient(135deg, #fde4e4, #fbcfcf); }
.navigator-info-icon {
	flex: none;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.navigator-info-scope .navigator-info-icon { background: #fdf6ec; }
.navigator-info-emergency .navigator-info-icon { background: #fef0f0; }
.navigator-info-divider { flex: none; width: 2px; align-self: stretch; border-radius: 1px; background: rgba(161,89,27,0.28); }
.navigator-info-divider-red { background: rgba(220,38,38,0.28); }
.navigator-info-text { margin: 0; font-size: 19px; line-height: 1.5; color: #a1591b; }
.navigator-info-text strong { font-weight: 800; }
.navigator-emergency-heading { margin: 0 0 6px; font-size: 20px; line-height: 1.25; font-weight: 800; color: #dc2626; }
.navigator-emergency-big { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 800; color: #dc2626; }

.navigator-disclaimer-card {
	margin: 0 0 20px;
	border-radius: 28px;
	padding: 32px 40px;
	background: var(--nav-card);
	border: none;
	box-sizing: border-box;
}
.navigator-disclaimer-top { display: flex; align-items: flex-start; gap: 20px; }
.navigator-disclaimer-icon {
	flex: none;
	width: 66px;
	height: 66px;
	margin-top: 75px;
	border-radius: 50%;
	background: #dbeafe;
	display: flex;
	align-items: center;
	justify-content: center;
}
.navigator-disclaimer-h2 { font-size: 24px; line-height: 1.2; margin: 4px 0 10px; font-weight: 800; color: #1d4ed8; text-align: left !important; }
.navigator-disclaimer-text { margin: 0; font-size: 17px; line-height: 1.55; color: #3e5c78; }
.navigator-disclaimer-divider { height: 1px; background: #e7eaee; margin: 24px 0; }
.navigator-consent-row { display: flex; align-items: flex-start; gap: 16px; cursor: pointer; font-size: 17px; line-height: 1.5; color: #3e5c78; }
.navigator-consent-row input { width: 22px; height: 22px; flex: none; accent-color: #1d4ed8; margin: 1px 0; border-radius: 4px; }

.navigator-hero-start-wrap { display: flex; justify-content: center; margin: 34px 0 10px; }
.navigator-btn-hero-start {
	display: inline-block;
	border: none;
	border-radius: 999px;
	background: var(--nav-gold);
	color: #ffffff;
	padding: 19px 46px;
	font-weight: 700;
	font-size: 19px;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(142,158,218,0.35);
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
.navigator-btn-hero-start:hover:not(:disabled) { background: var(--nav-gold-hover); box-shadow: 0 8px 20px rgba(142,158,218,0.4); }
.navigator-btn-hero-start:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* Shared quiz card — question, review and outcome screens all sit in one of
   these, matching the approved Design-canvas previews (Questions.dc.html /
   Answers.dc.html "navq-"/"navr-" styles). */
.navigator-quiz-card {
	background: var(--nav-card);
	border: none;
	border-radius: 22px;
	padding: 40px 48px;
	margin-bottom: 16px;
	box-shadow: 0 16px 38px rgba(22,68,97,0.07);
	box-sizing: border-box;
}

.navigator-quiz-brand { display: flex; align-items: center; gap: 13px; margin: 0 0 24px; }
.navigator-quiz-brand img { width: 52px; height: 52px; flex: none; object-fit: contain; }
.navigator-quiz-brand-text { font-size: 24px; color: var(--nav-navy); line-height: 1.3; }
.navigator-quiz-brand-text small { display: block; font-size: 13px; font-weight: 500; color: var(--nav-navy); margin-top: 3px; }
.navigator-quiz-brand-text .navigator-copyright { font-size: 0.4em; vertical-align: super; margin-left: 3px; }

.navigator-eyebrow-label { color: var(--nav-orange); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; margin: 0; }
.navigator-page-heading { font-size: clamp(26px, 4vw, 39px); line-height: 1.17; color: var(--nav-navy); margin: 13px 0 12px; font-weight: 400; text-align: left !important; }
.navigator-outcome-title { font-size: clamp(32px, 5.5vw, 52px); line-height: 1.1; color: var(--nav-navy); margin: 10px 0 8px; font-weight: 400; text-align: left !important; }
.navigator-quiz-hint { color: var(--nav-navy); margin: 0 0 27px; font-size: 1rem; line-height: 1.5; }
.navigator-multi-hint { font-size: 0.72rem; color: var(--nav-orange-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin: -8px 0 14px; }

.navigator-quiz-progress-track { height: 7px; border-radius: 7px; background: #f6e8df; overflow: hidden; margin: 14px 0 36px; }
.navigator-quiz-progress-fill { height: 100%; background: linear-gradient(90deg, #c47b4d, #d5a873); transition: width 0.2s ease; }

.navigator-quiz-options { display: grid; gap: 11px; }
.navigator-quiz-opt {
	display: flex;
	align-items: center;
	gap: 15px;
	border: none;
	border-radius: 14px;
	padding: 16px 18px;
	cursor: pointer;
	background: var(--nav-bg);
	min-height: 62px;
	box-sizing: border-box;
	box-shadow: none;
	transition: background 0.15s ease;
}
/* No outline and no shadow, per the client's direction to match their
   site's borderless "services" cards — on empaediatrics.com those cards
   are plain white sitting on a light tinted section background, with no
   border or shadow at all; the separation comes purely from that colour
   contrast. The quiz card itself is white, so the options use the site's
   own light tint instead (was a white-on-white card with a shadow line,
   which read as an outline rather than the intended flush, relaxed look).
   Hover and selection are shown with a background tint only. */
.navigator-quiz-opt:hover { background: var(--nav-bg-hover); }
.navigator-quiz-opt.selected { background: rgba(142,158,218,0.18); box-shadow: 0 0 0 2px var(--nav-gold); }
.navigator-quiz-opt input { width: 20px; height: 20px; accent-color: var(--nav-gold); flex: none; }
.navigator-quiz-opt-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.navigator-quiz-opt-text { font-weight: 600; color: var(--nav-navy); font-size: 1rem; }

.navigator-tip-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 6px; }
.navigator-tip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	min-width: 16px;
	border-radius: 50%;
	border: 1.3px solid var(--nav-muted);
	background: transparent;
	color: var(--nav-muted);
	font-size: 9px;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	touch-action: manipulation;
}
.navigator-tip-btn:hover, .navigator-tip-btn:focus-visible { border-color: var(--nav-orange); color: var(--nav-orange); }
/* Shown on hover or keyboard focus — not on click/tap-to-toggle. */
.navigator-tip-popover {
	display: none;
	position: absolute;
	z-index: 5;
	top: 100%;
	left: 0;
	margin-top: 8px;
	padding: 10px 12px;
	background: var(--nav-navy);
	color: #fff;
	border-radius: 8px;
	font-size: 0.8rem;
	line-height: 1.4;
	width: max-content;
	max-width: 240px;
	box-shadow: 0 8px 20px rgba(22,68,97,0.28);
	pointer-events: none;
}
.navigator-tip-wrap:hover .navigator-tip-popover,
.navigator-tip-wrap:focus-within .navigator-tip-popover {
	display: block;
}

.navigator-quiz-buttons { display: flex; justify-content: space-between; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.navigator-quiz-btn {
	border: 1.5px solid var(--nav-border);
	border-radius: 11px;
	padding: 13px 24px;
	font-weight: 700;
	font-size: 0.95rem;
	font-family: inherit;
	cursor: pointer;
	background: transparent;
	color: var(--nav-navy);
	touch-action: manipulation;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
.navigator-quiz-btn-primary { background: var(--nav-gold); border-color: var(--nav-gold); color: #ffffff; box-shadow: 0 1px 2px rgba(142,158,218,0.25); }
.navigator-quiz-btn-primary:hover:not(:disabled) { background: var(--nav-gold-hover); border-color: var(--nav-gold-hover); }
.navigator-quiz-btn-secondary { background: #ffffff; }
.navigator-quiz-btn-secondary:hover { background: #fdf6ec; }
.navigator-quiz-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.navigator-quiz-btn-wrap { display: flex; justify-content: flex-start; margin-top: 4px; }

/* Review ("Check your answers before submitting") screen — same numbered
   card look as the outcome page's answers grid, but single-column and with
   a fixed navy number badge instead of a red/amber/green one: nothing is
   scored yet at this point, so there's nothing to colour-code. */
.navigator-review-grid { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 28px; }
.navigator-review-item {
	display: flex;
	align-items: stretch;
	border-radius: 10px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(39,59,114,0.07), 0 3px 10px rgba(39,59,114,0.04);
}
.navigator-review-num { flex: none; width: 34px; display: flex; align-items: center; justify-content: center; background: var(--nav-navy); color: #ffffff; font-weight: 800; font-size: 13px; }
.navigator-review-content { padding: 12px 16px; min-width: 0; flex: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.navigator-review-text { min-width: 0; }
.navigator-review-text strong { display: block; color: var(--nav-navy); font-size: 13.5px; font-weight: 700; line-height: 1.35; margin-bottom: 3px; }
.navigator-review-text span { display: block; color: var(--nav-navy); font-size: 12.5px; opacity: 0.8; line-height: 1.4; }
/* Plain "Edit" — no underline by default per client direction; a hover
   underline is kept as the usual affordance that it's clickable. */
.navigator-edit-link { flex: none; font-size: 0.82rem; color: var(--nav-navy); font-weight: 700; cursor: pointer; background: none; border: none; text-decoration: none; padding: 0; white-space: nowrap; }
.navigator-edit-link:hover { text-decoration: underline; }

.navigator-link-btn { background: none; color: var(--nav-orange); padding: 0; font-weight: 600; text-decoration: underline; border: none; cursor: pointer; }
.navigator-btn { font-size: 0.95rem; font-weight: 600; border-radius: 10px; padding: 12px 20px; cursor: pointer; border: none; touch-action: manipulation; }
.navigator-btn-primary { background: var(--nav-gold); color: #ffffff; box-shadow: 0 1px 2px rgba(142,158,218,0.25); transition: background 0.15s ease, box-shadow 0.15s ease; }
.navigator-btn-primary:hover { background: var(--nav-gold-hover); }
.navigator-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.navigator-subhead { font-size: 1rem; margin: 0 0 10px; color: var(--nav-navy); }

/* Outcome page — answer summary grid. No outline; a coloured number block
   on the left (red/amber/green) takes the place of the old bordered
   "Answer N" banner, matching the client's own site's services layout. */
.navigator-answers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 34px; }
.navigator-answer-item {
	display: flex;
	align-items: stretch;
	border-radius: 10px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(39,59,114,0.07), 0 3px 10px rgba(39,59,114,0.04);
}
.navigator-answer-num { flex: none; width: 34px; display: flex; align-items: center; justify-content: center; background: var(--banner); color: #ffffff; font-weight: 800; font-size: 13px; }
.navigator-answer-text { padding: 9px 13px; min-width: 0; }
.navigator-answer-text strong { display: block; color: var(--nav-navy); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.navigator-answer-text span { display: block; color: var(--nav-navy); font-size: 12px; opacity: 0.75; margin-top: 2px; }
.navigator-answer-green { --banner: var(--nav-green); }
.navigator-answer-amber { --banner: var(--nav-yellow); }
.navigator-answer-red { --banner: var(--nav-red); }

.navigator-section-heading { font-size: clamp(28px, 4vw, 36px); line-height: 1.2; margin: 0 0 22px; color: var(--nav-navy); font-weight: 400; text-align: left !important; }

/* Outcome page — the single guidance card that matches the computed result. */
.navigator-guidance-card {
	display: flex;
	align-items: center;
	gap: 36px;
	background: none;   /* no card box — sits flush on the page, per client */
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	box-sizing: border-box;
	margin: 0 0 40px;   /* a little more space between the three sections now there's no card edge */
}
.navigator-guidance-card img { width: clamp(140px, 26vw, 270px); height: clamp(140px, 26vw, 270px); flex: none; object-fit: contain; filter: brightness(1.012); } /* icon backgrounds are 252-253, not 255: lifts them to pure white so no faint square shows now the card background is gone */
.navigator-guidance-card h2 { font-size: clamp(24px, 3.5vw, 34px); line-height: 1.17; margin: 0 0 14px; font-weight: 400; text-align: left !important; }
.navigator-guidance-card p { margin: 0 0 16px; color: var(--nav-navy); font-size: 1rem; line-height: 1.5; }
.navigator-guidance-body p:last-child { margin-bottom: 0; }
/* Guidance body text in plain black; only the opening "If any answer is
   highlighted in red/yellow/green" phrase carries the card's colour.
   Yellow uses the darker amber tone -- bright yellow text is unreadable
   on white. */
.navigator-guidance-card .navigator-guidance-body p { color: #000000; }
.navigator-guidance-card .navigator-guidance-body ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; color: #000000; font-size: 1rem; line-height: 1.5; text-align: left; }
.navigator-guidance-card .navigator-guidance-body li { margin: 0 0 8px; color: #000000; }
.navigator-hl { font-weight: 700; }
.navigator-hl-red { color: var(--nav-red); }
.navigator-hl-amber { color: var(--nav-amber); }
.navigator-hl-green { color: var(--nav-green); }
.navigator-guidance-green { border-color: var(--nav-green); }
.navigator-guidance-green h2 { color: var(--nav-green); }
.navigator-guidance-amber { border-color: var(--nav-yellow); }
.navigator-guidance-amber h2 { color: var(--nav-amber); }
.navigator-guidance-red { border-color: var(--nav-red); }
.navigator-guidance-red h2 { color: var(--nav-red); }

.navigator-guidance-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.navigator-guidance-btn { display: inline-block; border: 1.5px solid var(--nav-gold); border-radius: 10px; padding: 12px 17px; background: var(--nav-gold); color: #ffffff !important; font-weight: 700; text-decoration: none; font-size: 0.9rem; }
/* The theme's own a:hover rule (bare tag + pseudo-class) otherwise beats
   our unset hover color and can render this text invisible against the
   button's own background — same theme-collision pattern as the
   headings above, so it's pinned here too. */
.navigator-guidance-btn:hover { background: var(--nav-gold-hover); border-color: var(--nav-gold-hover); color: #ffffff !important; }
.navigator-guidance-btn-secondary { background: #ffffff; border-color: var(--nav-gold); color: var(--nav-navy) !important; }
.navigator-guidance-btn-secondary:hover { background: #f4f5fc; color: var(--nav-navy) !important; }
.navigator-guidance-btn-urgent { border-color: var(--nav-red); background: var(--nav-red); color: #ffffff !important; }
.navigator-guidance-btn-urgent:hover { background: #9c2124; border-color: #9c2124; color: #ffffff !important; }

/* Free-text feedback box — kept small, and rendered last on the page per
   client direction ("only a few parents will write something"). Centred
   as a block on the page; the text and form fields inside stay left-
   aligned, which reads better for a heading + textarea than centred text. */
.navigator-email-box { max-width: 420px; border-top: 1px solid var(--nav-border-light); padding-top: 22px; margin: 10px auto 0; }
.navigator-email-box .navigator-subhead { font-size: 17px; font-weight: 700; }
.navigator-email-box textarea { width: 100%; min-height: 64px; border-radius: 10px; border: 1.5px solid var(--nav-gold); padding: 10px 12px; font-family: inherit; font-size: 0.85rem; margin: 10px 0 10px; background: var(--nav-card); color: var(--nav-text); resize: vertical; }
.navigator-email-box input[type="email"] { width: 100%; padding: 11px 12px; border-radius: 8px; border: 1.5px solid var(--nav-gold); font-size: 0.9rem; margin: 10px 0; background: var(--nav-card); color: var(--nav-text); }
.navigator-gdpr-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.navigator-gdpr-row input { margin-top: 3px; accent-color: var(--nav-orange); }
.navigator-gdpr-row label { font-size: 0.78rem; color: var(--nav-muted); }
.navigator-confirm { background: var(--nav-green-bg); color: var(--nav-green); padding: 10px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; }

/* Thumbs widget — moved up, directly under the guidance boxes. Kept small
   and centred on the page, rather than stretching the full card width for
   just a one-line question and two buttons. */
.navigator-feedback-box { max-width: 300px; text-align: center; margin: 26px auto 30px; padding: 24px 20px; }
.navigator-feedback-heading { font-size: 18px; margin: 0 0 12px; color: var(--nav-navy); font-weight: 400; }
.navigator-fb-buttons { display: flex; justify-content: center; gap: 14px; margin: 0 0 6px; }
/* No outline/border per client direction — the attached thumbs-up/down
   artwork is a self-contained glossy 3D icon and reads better plain. */
.navigator-fb-btn { background: none; border: none; border-radius: 10px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: transform 0.12s ease, opacity 0.12s ease; }
.navigator-fb-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.navigator-fb-btn:hover:not(:disabled) { transform: scale(1.06); }
.navigator-fb-btn.active { opacity: 1; transform: scale(1.06); }
.navigator-fb-btn:disabled { cursor: default; opacity: 0.5; }
.navigator-fb-btn.active:disabled { opacity: 1; }

.navigator-nav-back { text-align: center; margin-top: 24px; }

@media (max-width: 480px) {
	.navigator-root { padding: 0 4px; }
	.navigator-card { padding: 16px 14px; }
	.navigator-quiz-card { padding: 22px 18px; }

	.navigator-quiz-buttons { flex-direction: column; }
	.navigator-quiz-buttons .navigator-quiz-btn { width: 100%; }

	.navigator-page-heading { font-size: 28px; }
	.navigator-outcome-title { font-size: 32px; }
	.navigator-section-heading { font-size: 26px; }

	/* Review rows: let the edit link drop under long answer text instead of
	   squeezing the row horizontally. */
	.navigator-review-content { flex-wrap: wrap; }

	.navigator-answers-grid { grid-template-columns: 1fr; }

	.navigator-guidance-card { flex-direction: column; text-align: center; padding: 0; }
	.navigator-guidance-card h2 { text-align: center !important; }
	.navigator-guidance-card img { width: 150px; height: 150px; }
	.navigator-guidance-actions { justify-content: center; }

	.navigator-fb-btn { width: 48px; height: 48px; }
	.navigator-feedback-heading { font-size: 19px; }
	.navigator-fb-buttons { gap: 10px; }

	/* Starter screen — stack the hero art above the copy, and let the
	   gradient info cards stack their icon/divider/text vertically. */
	.navigator-hero { grid-template-columns: 1fr; padding: 20px 18px; gap: 16px; }
	.navigator-hero-art img { max-height: 220px; }
	.navigator-hero-copy { padding: 4px 0 6px; }
	.navigator-hero-title { font-size: 32px; }
	.navigator-hero-title small { font-size: 14px; }
	.navigator-hero-lead { font-size: 19px; margin: 16px 0 14px; }
	.navigator-hero-rule { width: 60px; margin: 18px 0; }
	.navigator-hero-intro { font-size: 15px; }
	.navigator-info-card { flex-direction: column; align-items: flex-start; padding: 20px 18px; gap: 14px; }
	.navigator-info-icon { width: 56px; height: 56px; }
	.navigator-info-icon svg { width: 26px !important; height: 26px !important; }
	.navigator-info-divider { width: 100%; height: 2px; align-self: auto; }
	.navigator-info-text { font-size: 16px; }
	.navigator-emergency-heading { font-size: 18px; }
	.navigator-emergency-big { font-size: 28px; }
	.navigator-disclaimer-card { padding: 20px 18px; }
	.navigator-disclaimer-top { flex-direction: column; align-items: flex-start; gap: 12px; }
	.navigator-disclaimer-icon { width: 52px; height: 52px; }
	.navigator-disclaimer-icon svg { width: 24px !important; height: 24px !important; }
	.navigator-disclaimer-h2 { font-size: 20px; }
	.navigator-disclaimer-text { font-size: 15px; }
	.navigator-consent-row { font-size: 15px; }
	.navigator-btn-hero-start { width: 100%; text-align: center; padding: 16px 20px; font-size: 17px; }
}

/* Very narrow devices (older/small phones) — tighten spacing further. */
@media (max-width: 360px) {
	.navigator-card { padding: 14px 12px; }
	.navigator-quiz-card { padding: 18px 14px; }
	.navigator-quiz-opt { padding: 11px 12px; }
	.navigator-quiz-btn { padding: 12px 14px; }
	.navigator-btn { padding: 12px 14px; }
	.navigator-hero-title { font-size: 26px; }
	.navigator-info-icon { width: 48px; height: 48px; }
	.navigator-info-icon svg { width: 22px !important; height: 22px !important; }
}