/* fonts.css */
/* ?v= must match the preloads in views/layout.js — without it serveStatic sends no ETag,
   so these re-download hourly forever. Bump both when a font file is replaced. */
@font-face {
	font-family: 'Southwest Sans';
	src: url('/static/fonts/SouthwestSans-Regular.woff2?v=1') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Light is the report hero's "The" and "Report"; it is not preloaded because /report is the
   only page that asks for it. */
@font-face {
	font-family: 'Southwest Sans';
	src: url('/static/fonts/SouthwestSans-Light.woff2?v=1') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Southwest Sans';
	src: url('/static/fonts/SouthwestSans-Medium.woff2?v=1') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Southwest Sans';
	src: url('/static/fonts/SouthwestSans-Bold.woff2?v=1') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Southwest Sans';
	src: url('/static/fonts/SouthwestSans-Black.woff2?v=1') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Southwest Sans';
	src: url('/static/fonts/SouthwestSans-Italic.woff2?v=1') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Southwest Sans';
	src: url('/static/fonts/SouthwestSans-BoldItalic.woff2?v=1') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* tokens.css */
:root {
	--color-bold-blue: #304cb2;
	--color-dark-blue: #1a2c80;
	--color-midnight-blue: #111b40;
	--color-blue-light: #a8c7fe;
	--color-blue-mid: #c2d8fe;
	--color-blue-pale: #dce9ff;
	--color-blue-faint: #f3f7ff;
	--color-deep-silver: #5e7e95;
	--color-summit-silver: #e5e3e3;
	--color-heat-blue: #7baaff;
	--color-sunrise-yellow: #ffbf27;
	--color-cream: #f7e9ce;
	--color-orange: #ff792e;
	--color-warm-red: #d5152e;
	--heat-stop-1: 0;
	--heat-stop-2: 0.2;
	--heat-stop-3: 0.43;
	--heat-stop-4: 0.64;
	--heat-stop-5: 0.85;
	--heat-stops:
		var(--color-heat-blue) calc(var(--heat-stop-1) * 100%),
		var(--color-bold-blue) calc(var(--heat-stop-2) * 100%),
		var(--color-sunrise-yellow) calc(var(--heat-stop-3) * 100%),
		var(--color-orange) calc(var(--heat-stop-4) * 100%),
		var(--color-warm-red) calc(var(--heat-stop-5) * 100%);

	--color-marker-green: #2f8f6b;
	--color-gray: #6b7280; 
	--color-map-line: #8e95b2;
	--color-gray-lighter: #f0f0f0;
	--color-gray-light: #e6e6e6;
	--color-gray-dark: #3d3d3d;
	--color-gray-mid: #656565;
	--color-bg: #fff;
	--color-text: var(--color-dark-blue);
	--color-text-light: #fff;
	--font-sans: 'Southwest Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--gap-3xs: 4px;
	--gap-xxs: 6px;
	--gap-xs: 8px;
	--gap-sm: 12px;
	--gap-md: 16px;
	--gap-lg: 24px;
	--gap-xl: 32px;
	--gap-xxl: 40px;
	--gap-3xl: 64px;

	--font-size-80: 80px;
	--font-size-64: 64px;
	--font-size-56: 56px;
	--font-size-48: 48px;
	--font-size-40: 40px;
	--font-size-36: 36px;
	--font-size-30: 30px;
	--font-size-24: 24px;
	--font-size-20: 20px;
	--font-size-16: 16px;
	--font-size-18: 18px;
	--font-size-14: 14px;
	--font-size-13: 13px;
	--font-size-12: 12px;
	--font-size-11: 11px;
	--font-size-10: 10px;

	--radius-xxs: 6px;
	--radius-xs: 8px;
	--radius-sm: 12px;
	--radius-md: 20px;
	--radius-pill: 99px;

	--container-md: 720px;
	--container-lg: 960px;
	--container-xl: 1140px;
	--container-max: var(--container-xl);

	--site-header-height: 88px;
	--vh-visible: min(100svh, 100dvh);
	--focus-ring: var(--color-text);
	--dur-quick: 0.15s;
	--dur-transition: 300ms;
	--ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
	--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-back: cubic-bezier(0.2, 0.9, 0.3, 1.08);
}

@supports not (height: 1svh) {
	:root {
		--vh-visible: 100vh;
	}
}

@media (max-width: 1199.98px) {
	:root {
		--container-max: var(--container-lg);
	}
}

@media (max-width: 991.98px) {
	:root {
		--container-max: var(--container-md);
	}
}

@media (max-width: 767.98px) {
	:root {
		--container-max: 100%;
		--site-header-height: 56px;
	}
}

/* base.css */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* the header is sticky, so an anchor target would land underneath it */
	scroll-padding-top: var(--site-header-height);
}

/* Scroll anchoring off document-wide: an htmx swap can change the height of a whole section, and
   Chrome compensates by scrolling the page the same distance. A nested scrolling box picks its own
   anchor and needs its own opt-out. */
body {
	overflow-anchor: none;
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	line-height: 1.5;
}

button {
	border: 0;
	font: inherit;
	cursor: pointer;
}

button:disabled {
	opacity: 0.6;
	cursor: default;
}

[hidden] {
	display: none !important;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--gap-md);
	z-index: 10;
}

/* An anchor with no class of its own would otherwise take the UA's link blue, which currentColor
   then draws the focus ring in. */
:where(a:not([class])) {
	color: inherit;
}

/* tabindex="-1" is a script-only focus target — site.js moves focus to the question or the score
   after a swap so the change is announced. Tab cannot reach them, so a ring marks nothing the user
   can act on; excluding them from the rule below is not enough, because iOS Safari then draws its
   own default ring on the programmatic focus. */
:where([tabindex="-1"]):focus {
	outline: none;
}

:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.skip-link:focus-visible {
	top: var(--gap-md);
}

.tm {
	font-size: 0.62em;
	vertical-align: 0.35em;
}

/* Zero line-height so a mark does not open the line it sits on. vertical-align: super clears the
   cap height by a few px and the mark reads as floating; this sits its top on the cap. */
sup {
	font-size: 0.6em;
	line-height: 0;
	vertical-align: 0.42em;
}

/* The unnamed cross-fade every section falls back to. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: var(--dur-transition);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* Each popover needs its own open-state display rules (:popover-open and .\:popover-open). */
[popover] {
	display: none;
}

/* error.css */
.error {
	margin: var(--gap-xs) 0 0;
	padding: var(--gap-xs) var(--gap-md);
	border-radius: var(--radius-xxs);
	background: var(--color-warm-red);
	color: var(--color-text-light);
	font-weight: 700;
	font-size: var(--font-size-14);
}

/* Only when site.js never ran. CSP forbids inline script, so the reveal is a delayed animation
   rather than a timer — which also stops a normal load flashing it. */
.no-js-warning {
	display: none;
}

.no-js .no-js-warning {
	/* Fixed, not in flow: in flow it reserves height on every load. */
	display: block;
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	visibility: hidden;
	margin: 0;
	padding: var(--gap-xs) var(--gap-md);
	background: var(--color-warm-red);
	color: var(--color-text-light);
	font-weight: 700;
	font-size: var(--font-size-14);
	text-align: center;
	animation: no-js-warning-reveal 0s linear 4s forwards;
}

@keyframes no-js-warning-reveal {
	to {
		visibility: visible;
	}
}

/* cookie-notice.css */
html {
	scroll-padding-bottom: var(--cookie-notice-space, 0px);
}
.cookie-notice {
	position: fixed;
	right: var(--gap-md);
	bottom: var(--gap-md);
	left: var(--gap-md);
	z-index: 20;
	max-width: 480px;
	margin-left: auto;
	padding: var(--gap-lg);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	box-shadow: 0 8px 32px rgb(17 27 64 / 0.3);
	color: var(--color-text);
	font-size: var(--font-size-16);
	line-height: 1.5;
}
.cookie-notice[hidden] {
	display: none;
}
.cookie-notice > p {
	margin: 0 0 var(--gap-md);
}
.cookie-notice__dismiss {
	width: 100%;
}

html.transition-cookie-notice {
	view-transition-name: none;
}
html.transition-cookie-notice .cookie-notice {
	view-transition-name: cookie-notice;
}
::view-transition-new(cookie-notice) {
	animation: var(--dur-transition) var(--ease-out-cubic) both cookie-notice-in;
}
::view-transition-old(cookie-notice) {
	animation: var(--dur-transition) var(--ease-out-cubic) both cookie-notice-out;
}

@keyframes cookie-notice-in {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}
@keyframes cookie-notice-out {
	to {
		opacity: 0;
		transform: translateY(24px);
	}
}

@media (max-width: 767.98px) {
	.cookie-notice {
		margin-inline: auto;
		font-size: var(--font-size-14);
	}
}

/* section.css */
.section {
	overflow: hidden;
	overflow: clip;
	display: flex;
	flex-direction: column;
	padding-block: var(--gap-xl);
}
.section--white {
	background: var(--color-bg);
}
.section--white + .section--white {
	border-top: 1px solid #e5e3e3;
}
.section--blue-light {
	background: var(--color-blue-light);
}
.section--gray-lighter {
	background: var(--color-gray-lighter);
}
.section--bold-blue {
	background: var(--color-bold-blue);
	--focus-ring: var(--color-text-light);
	color: var(--color-text-light);
}
.section--dark-blue {
	background: var(--color-dark-blue);
	--focus-ring: var(--color-text-light);
	color: var(--color-text-light);
}
.section--midnight-blue {
	background: var(--color-midnight-blue);
	--focus-ring: var(--color-text-light);
	color: var(--color-text-light);
}
.section--glow {
	background-image: radial-gradient(110% 65% at 0 0, rgb(168 199 254 / 0.9), rgb(168 199 254 / 0));
}

.section-header,
.section-content,
.section-footer {
	width: 100%;
	max-width: calc(var(--container-max) + var(--gap-lg) * 2);
	margin-inline: auto;
	padding-inline: var(--gap-lg);
}

.section-header {
	position: relative;
	margin-bottom: var(--gap-xl);
}
.section-content .section-header {
	max-width: none;
	padding-inline: 0;
}
.section-header--centered-sm {
	text-align: center;
}

.section-header__close {
	position: absolute;
	top: 0;
	right: var(--gap-lg);
}
.section-header__close > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	color: var(--color-dark-blue);
}

.section-header__tag {
	display: inline-block;
	margin: 0 0 var(--gap-lg);
	padding: var(--gap-xxs) var(--gap-md);
	border-radius: var(--radius-pill);
	background: var(--color-blue-faint);
	color: var(--color-bold-blue);
	font-weight: 700;
	font-size: var(--font-size-14);
}
.section-header--centered-sm > .section-header__tag {
	display: block;
	width: fit-content;
}

.section-header > h2 {
	text-wrap: balance;
	margin: 0 0 var(--gap-xs);
	font-size: var(--font-size-48);
	line-height: 1.1;
}
.section-header--lg > h2 {
	font-size: var(--font-size-80);
}
.section-header > p {
	margin: 0;
	font-size: var(--font-size-16);
}
.section-header--lg > p {
	font-size: var(--font-size-24);
}

.section-content--split-lg-1-1 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--gap-xl);
}

.section-footer {
	position: relative;
	margin-top: auto;
	text-align: center;
}


@media (max-width: 991.98px) {
	.section-content--split-lg-1-1 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767.98px) {
	.section-header > h2 {
		font-size: var(--font-size-30);
	}
	.section-header--lg > h2 {
		font-size: var(--font-size-56);
	}
	.section-header--lg > p {
		font-size: var(--font-size-20);
	}
	.section-footer > .button {
		display: block;
	}
}

/* site-header.css */
.site-header {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	min-height: var(--site-header-height);
	padding: 0 max(var(--gap-lg), calc((100% - var(--container-max)) / 2));
	border-bottom: 1px solid var(--color-gray-light);
	background: var(--color-bg);
}

.site-header__main {
	flex-grow: 1;
	display: flex;
	align-items: center;
	gap: var(--gap-lg);
}

.site-header__brand {
	display: flex;
	align-items: center;
	gap: var(--gap-lg);
}

.site-header__logo {
	height: 14px;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--gap-lg);
	margin-left: auto;
}


.site-header__links {
	display: flex;
	align-items: center;
	gap: 24px;
}

.site-header__link {
	color: var(--color-dark-blue);
	font-size: var(--font-size-16);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.site-header__link[aria-current] {
	text-decoration: underline;
}

.site-header__menu {
	display: none;
	align-items: center;
	padding: var(--gap-xs);
	background: none;
	color: var(--color-dark-blue);
}
.site-header__menu > .icon {
	width: 28px;
	height: 28px;
}

@media (hover: hover) {
	.site-header__link:hover {
		text-decoration: underline;
	}
}

@media (max-width: 991.98px) {
	.site-header__links {
		display: none;
	}
	.site-header__actions,
	.site-header__brand {
		gap: var(--gap-sm);
	}
	.site-header__book {
		margin-left: auto;
	}
	.site-header__actions {
		margin-left: 0;
	}
	.site-header__menu {
		display: flex;
	}
}

/* button.css */
.button {
	--_bg: var(--color-sunrise-yellow);
	--_fg: var(--color-dark-blue);
	display: inline-block;
	padding: var(--gap-sm) var(--gap-lg);
	border: 0;
	border-radius: var(--radius-xxs);
	background: var(--_bg);
	color: var(--_fg);
	font-weight: 700;
	text-decoration: none;
	text-decoration-thickness: 2px;
	white-space: nowrap;
	cursor: pointer;
}

.button--pill {
	border-radius: 25px;
}
.button--sm.button--pill {
	border-radius: 20px;
}

.button--sm {
	padding: var(--gap-xs) var(--gap-lg);
	font-size: var(--font-size-14);
}

.button--lg {
	padding: var(--gap-md) var(--gap-lg);
}

.button--white {
	--_bg: var(--color-bg);
	--_fg: var(--color-dark-blue);
	border: 1px solid var(--color-blue-light);
}

.button--bold-blue {
	--_bg: var(--color-bold-blue);
	--_fg: var(--color-text-light);
}

.button--dark-blue {
	--_bg: var(--color-dark-blue);
	--_fg: var(--color-text-light);
}

.button--outline {
	--_bg: transparent;
	--_fg: var(--color-dark-blue);
	border: 1px solid currentColor;
}

/* No background change: darkening the yellow puts it off-palette. */
.button:focus-visible,
.button:active {
	/* The shorthand would reset the thickness an element sets for itself. */
	text-decoration-line: underline;
}

@media (hover: hover) {
	.button:not(:disabled):hover {
		text-decoration-line: underline;
	}
}

/* Inline padding stays 24 at every width; only the block padding gives way. */
@media (max-width: 767.98px) {
	.button--lg {
		padding-block: var(--gap-sm);
	}
}

/* link.css */
.link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-quick);
}

.link--underline {
	/* The shorthand would reset the thickness an element sets for itself. */
	text-decoration-line: underline;
}

.link--light {
	font-weight: 400;
}

.link:focus-visible,
.link:active {
	background: rgb(0 0 0 / 0.1);
	text-decoration-line: underline;
}

@media (hover: hover) {
	.link:not(:disabled):hover {
		background: rgb(0 0 0 / 0.1);
		text-decoration-line: underline;
	}
}

/* icon.css */
.icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.icon--x {
	--icon: url('/static/img/icon-x.svg');
}

/* Not icon--x: that is the close cross, and these are brand marks. */
.icon--facebook {
	--icon: url('/static/img/icon-facebook.svg');
}

.icon--social-x {
	--icon: url('/static/img/icon-social-x.svg');
}

.icon--social-facebook {
	--icon: url('/static/img/icon-social-facebook.svg');
}

.icon--social-instagram {
	--icon: url('/static/img/icon-social-instagram.svg');
}

.icon--social-youtube {
	--icon: url('/static/img/icon-social-youtube.svg');
}

.icon--social-linkedin {
	--icon: url('/static/img/icon-social-linkedin.svg');
}

.icon--social-pinterest {
	--icon: url('/static/img/icon-social-pinterest.svg');
}

.icon--menu {
	--icon: url('/static/img/icon-menu.svg');
}

.icon--crosshair {
	--icon: url('/static/img/icon-crosshair.svg');
}

.icon--pin {
	--icon: url('/static/img/icon-pin.svg');
}

.icon--arrow {
	--icon: url('/static/img/icon-arrow.svg');
}

.icon--search {
	--icon: url('/static/img/icon-search.svg');
}

.icon--morning {
	--icon: url('/static/img/icon-morning.svg');
}

.icon--afternoon {
	--icon: url('/static/img/icon-afternoon.svg');
}

.icon--evening {
	--icon: url('/static/img/icon-evening.svg');
}

/* site-nav.css */
/* Opens below the header, not over it, so the logo and Book Now stay live while it is open.
   .site-header sets position on the popover's containing block, so the inset is viewport-relative
   only because a popover is in the top layer — it is not positioned against the header. */
.site-nav {
	inset: var(--site-header-height) 0 0 0;
	width: 100%;
	max-width: none;
	/* the UA sheet sizes a popover to fit-content, which would ignore the insets above */
	height: auto;
	max-height: none;
	margin: 0;
	padding: var(--gap-sm);
	overflow: hidden;
	border: 0;
	background: var(--color-dark-blue);
	--focus-ring: var(--color-text-light);
	color: var(--color-text);
}

.site-nav__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--gap-lg);
	height: 100%;
	padding: var(--gap-lg);
	border-radius: var(--radius-md);
	background: var(--color-blue-light);
}

.site-nav__close {
	align-self: flex-end;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: var(--radius-pill);
	background: none;
	color: var(--color-dark-blue);
}
.site-nav__close > .icon {
	width: 24px;
	height: 24px;
}

.site-nav__plane {
	width: 145px;
	height: auto;
	margin-top: calc(var(--gap-xxl) * -1);
	rotate: -12deg;
}

.site-nav__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-lg);
	margin-top: var(--gap-xl);
	text-align: center;
}

.site-nav__link {
	font-size: var(--font-size-24);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
/* The shorthand would reset the thickness above. */
.site-nav__link[aria-current] {
	text-decoration-line: underline;
}
/* The comp sits both clouds between the links and the footer block. Anchored to the footer
   rather than to a share of the panel, so a short viewport crowds the empty middle instead of
   pushing the clouds up through the links. */
.site-nav__sky {
	position: absolute;
	inset: auto 0 22%;
	z-index: -1;
}
.site-nav__cloud {
	position: absolute;
	width: var(--cloud-width);
	height: auto;
}
.site-nav__cloud--1 {
	--cloud-width: 150px;
	bottom: calc(var(--gap-lg) * -1);
	left: calc(var(--gap-xl) * -1);
}
.site-nav__cloud--2 {
	--cloud-width: 190px;
	bottom: var(--gap-xl);
	right: calc(var(--gap-xxl) * -1);
}

.site-nav__meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-md);
	margin-top: auto;
	color: var(--color-dark-blue);
	text-align: center;
}

.site-nav__site {
	font-size: var(--font-size-20);
}

.site-nav__enroll {
	text-underline-offset: 3px;
}

.site-nav__social {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 30px boxes around the 16px marks give the comp's 14px spacing and a tap target over 24px. */
.site-nav__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-pill);
	color: var(--color-midnight-blue);
}

@media (max-width: 991.98px) {
	.site-nav:popover-open {
		display: block;
	}
	.site-nav.\:popover-open {
		display: block;
	}
}

/* site-footer.css */
.site-footer {
	padding-block: var(--gap-xl) var(--gap-lg);
	background: linear-gradient(to top right, var(--color-dark-blue), var(--color-bold-blue));
	--focus-ring: var(--color-text-light);
	color: var(--color-gray-light);
	text-align: center;
}

.site-footer__props {
	display: flex;
	justify-content: center;
	margin: var(--gap-xl) 0 0;
	padding: 0;
	font-size: var(--font-size-14);
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
}

.site-footer__props > li {
	padding-inline: var(--gap-md);
}

.site-footer__props > li + li {
	border-left: 1px solid var(--color-text-light);
}

.site-footer__props sup {
	margin-left: 0.15em;
	font-size: 0.5em;
	font-weight: 400;
	line-height: 0;
}

.site-footer__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap-lg);
	margin-top: var(--gap-xxl);
}

.site-footer__notes {
	max-width: var(--container-md);
	margin: var(--gap-xl) auto 0;
	padding: 0;
	font-size: var(--font-size-12);
	font-weight: 300;
	line-height: 1.3;
	text-align: left;
	list-style: none;
	counter-reset: note;
}

/* Hanging superscript number: wrapped lines align with the text, not the marker. Not grid:
   that would split the text and links into separate cells. */
.site-footer__notes > li {
	position: relative;
	padding-left: 1.25ch;
	counter-increment: note;
}

.site-footer__notes > li + li {
	margin-top: var(--gap-xs);
}

.site-footer__notes a {
	font-weight: 700;
}


.site-footer__notes > li::before {
	content: counter(note);
	position: absolute;
	top: 0.15em;
	left: 0;
	font-size: 0.7em;
	line-height: 1;
}

/* Unnumbered, so the notes keep the numbers the props' superscripts point at. */
.site-footer__notes > .site-footer__rules {
	padding-left: 0;
	counter-increment: none;
}
.site-footer__notes > .site-footer__rules::before {
	content: none;
}

.site-footer__meta {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap-md);
	margin-top: var(--gap-lg);
	font-size: var(--font-size-14);
	text-align: left;
}

.site-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__links > li + li {
	margin-top: var(--gap-xxs);
}

.site-footer__legal {
	text-align: right;
}

.site-footer__copyright {
	margin: 0 0 var(--gap-xxs);
}

@media (max-width: 767.98px) {
	.site-footer__props > li {
		white-space: pre-line;
	}

	.site-footer__props,
	.site-footer__meta {
		font-size: var(--font-size-12);
	}
	.site-footer__meta {
		flex-direction: column;
		align-items: stretch;
	}
	.site-footer__legal {
		text-align: left;
	}
	.site-footer__notes {
		font-size: var(--font-size-10);
	}

	.site-footer__actions > .button {
		flex: 1 1 auto;
	}
}

/* menu.css */
.menu-button {
	anchor-name: --menu;
}
.menu {
	position-anchor: --menu;
	inset: auto;
	right: var(--gap-md);
	bottom: 72px;
	right: anchor(right);
	bottom: calc(anchor(top) + var(--gap-xs));
	margin: 0;
	flex-direction: column;
	align-items: stretch;
	gap: var(--gap-xxs);
	min-width: 240px;
	padding: var(--gap-md);
	border: 1px solid var(--color-blue-light);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-text);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}
.menu:popover-open {
	display: flex;
}
.menu.\:popover-open {
	display: flex;
}
.menu form {
	display: contents;
}
.menu .link {
	text-align: left;
}

.menu__label {
	margin: var(--gap-xs) 0 0;
	color: var(--color-gray);
	font-size: var(--font-size-12);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* card.css */
.card {
	padding: var(--gap-xl) var(--gap-lg);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-text);
}

/* form.css */
.form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-md);
	align-items: end;
	margin-bottom: var(--gap-lg);
}
/* The button sits beside a .field__input, which is taller by its padding and its 1px border. */
.form > .button {
	justify-self: start;
	padding-block: calc(var(--gap-md) + 1px);
}

@media (max-width: 767.98px) {
	.form {
		grid-template-columns: 1fr;
	}

	.form > .button {
		justify-self: stretch;
	}
}

/* field.css */
.field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap-xxs);
}
.field__label {
	font-size: var(--font-size-14);
	font-weight: 700;
}
.field__input {
	--_placeholder: #888da0;
	display: block;
	width: 100%;
	padding: var(--gap-md);
	border: 1px solid var(--color-blue-light);
	border-radius: var(--radius-xxs);
	background: var(--color-bg);
	color: var(--color-bold-blue);
	font: inherit;
	font-weight: 700;
}
/* Sample text, not an answer already typed: the field's own bold would read as filled in. */
.field__input::placeholder {
	color: var(--_placeholder);
	font-weight: 400;
}
/* A select has no ::placeholder, so its empty prompt option needs the same treatment by hand. */
.field__input:has(option[value=""]:checked) {
	color: var(--_placeholder);
	font-weight: 400;
}
.field__input:focus-visible {
	border-color: var(--color-bold-blue);
}
select.field__input {
	/* The stroke is baked into the file: a background-image cannot take currentColor,
	   so a palette change has to be made there too. */
	--_caret: url('/static/img/icon-caret.svg');
	-webkit-appearance: none;
	appearance: none;
	padding-right: calc(var(--gap-md) * 2 + 12px);
	background-image: var(--_caret);
	background-repeat: no-repeat;
	background-position: right var(--gap-md) center;
}

.field__button {
	position: absolute;
	top: 50%;
	right: calc(var(--gap-md) - var(--gap-xxs));
	translate: 0 -50%;
	padding: var(--gap-xxs);
	border: 0;
	background: none;
	color: var(--color-dark-blue);
	cursor: pointer;
}
.field__button > .icon {
	display: block;
}
.field__button--circle {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: var(--radius-pill);
	background: var(--color-blue-light);
	color: var(--color-bold-blue);
}

.field--selected > .field__input {
	border-color: var(--color-sunrise-yellow);
	background: var(--color-sunrise-yellow);
	color: var(--color-bold-blue);
	-webkit-text-fill-color: var(--color-bold-blue);
	opacity: 1;
}
.field--selected > .field__button {
	color: var(--color-bold-blue);
}

/* quiz-section.css */
.quiz-section--intro > .section-header {
	margin-bottom: 112px;
}
.quiz-section--intro > .section-header > h2 {
	margin-bottom: var(--gap-3xl);
	font-weight: 300;
}
.quiz-section--intro > .section-header > h2 > em {
	position: relative;
	display: inline-block;
	padding-inline: var(--gap-xl);
	border-radius: var(--radius-pill);
	background: var(--color-warm-red);
	font-weight: 700;
	font-style: normal;
}
.quiz-section--intro > .section-header > h2 > em:after {
	content: '';
	position: absolute;
	top: -15px;
	right: -10px;
	width: 30px;
	height: 40px;
	background: url('/static/img/icon-flame.svg') no-repeat center;
}
.quiz-section--intro > .section-header > p {
	position: relative;
	max-width: 34ch;
	margin-inline: auto;
}

.quiz-section--intro > .section-header > p > .quiz-section__icon {
	position: absolute;
	height: auto;
}
.quiz-section--intro > .section-header > p > .quiz-section__icon--note {
	top: -50px;
	right: -65px;
	width: 73px;
}
.quiz-section--intro > .section-header > p > .quiz-section__icon--calendar {
	bottom: -50px;
	left: -80px;
	width: 75px;
}
.quiz-section--intro > .section-header > p > .quiz-section__icon--envelope {
	bottom: -80px;
	right: -15px;
	width: 107px;
}

/* Two floors, and min-height rather than height: .section clips its overflow. Steps need the
   taller one — .quiz-card__city-results is flex: 1 1 0, so the location step's suggestion list
   gets whatever the card has spare. */
.quiz-section {
	min-height: 640px;
}

.quiz-section--step,
.quiz-section--calculating {
	min-height: 800px;
}

@media (max-width: 767.98px) {
	.quiz-section--intro > .section-header > h2 > em {
		display: block;
		width: fit-content;
		margin-inline: auto;
	}
}

@media (max-width: 575.98px) {
	.quiz-section--intro > .section-header > h2,
	.quiz-section--intro > .section-header > p {
		text-align: left;
	}
	/* The pill runs off the left edge, which the section clips, so "Burnout" starts on the gutter
	   like the lines above and below it. The left padding has to match the pull for that to hold. */
	.quiz-section--intro > .section-header > h2 > em {
		margin-inline: -53px 0;
		padding-inline: 53px var(--gap-xl);
	}
	.quiz-section--intro > .section-header > p {
		max-width: 25ch;
		font-size: var(--font-size-16);
	}
}

/* quiz-transitions.css */
/* A view-transition-name is global to the transition, not to the section declaring it, so naming
   these unconditionally would slide the quiz off screen on any swap anywhere on the page. */
html.transition-slide .quiz-section {
	view-transition-name: quiz-card;
}
html.transition-slide .quiz-section > .section-header {
	view-transition-name: quiz-header;
}
/* Identical in every state. Unnamed it belongs to whichever ancestor animates and dissolves in
   and out for nothing; named, it is carried across. */
html.transition-slide .quiz-section .section-header__tag {
	view-transition-name: quiz-tag;
}

@keyframes quiz-card-in {
	from {
		transform: translateX(100%);
	}
}
@keyframes quiz-card-out {
	to {
		transform: translateX(-100%);
	}
}
@keyframes quiz-card-in-back {
	from {
		transform: translateX(-100%);
	}
}
@keyframes quiz-card-out-back {
	to {
		transform: translateX(100%);
	}
}
::view-transition-image-pair(quiz-card) {
	overflow: hidden;
	overflow: clip;
}
/* A name lifts the element out of the root snapshot, leaving a hole the white page shows through.
   The group carries the background the element took with it. */
::view-transition-group(quiz-card),
::view-transition-group(quiz-header) {
	background: var(--color-midnight-blue);
}

/* ::view-transition is a fixed overlay above the page, so the card paints over the sticky header.
   Groups are siblings, so z-index fixes it — but only once the header is named into the tree. */
html.transition-slide .site-header {
	view-transition-name: site-header;
}
/* Held still, not animated: the header is outside #quiz and identical across the swap, so it is
   named for z-order alone. WebKit captures a sticky element at its unstuck position, so an animated
   group starts a scroll-offset above the viewport and blinks the header out for the whole slide. */
::view-transition-group(site-header) {
	z-index: 1;
	animation: none;
	transform: none;
}

/* Only #quiz changes, so a root snapshot is a stale full-page still — and the layer the holes
   above are cut from. Out of the transition, the rest of the page paints live. */
html.transition-slide {
	view-transition-name: none;
}
::view-transition-old(quiz-card) {
	animation: var(--dur-transition) ease both quiz-card-out;
}
::view-transition-new(quiz-card) {
	animation: var(--dur-transition) ease both quiz-card-in;
}
html.transition-back::view-transition-old(quiz-card) {
	animation-name: quiz-card-out-back;
}
html.transition-back::view-transition-new(quiz-card) {
	animation-name: quiz-card-in-back;
}

/* quiz-card.css */
.quiz-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: calc(100% - var(--gap-lg) * 2);
	max-width: var(--container-md);
	margin-bottom: var(--gap-xl);
	margin-inline: auto;
	padding: var(--gap-xl) var(--gap-lg);
	border-radius: var(--radius-md);
	background: var(--color-bg);
}
.quiz-card form {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.quiz-card__progress {
	margin-bottom: var(--gap-lg);
}
.quiz-card__progress-bar {
	height: 12px;
	margin-bottom: var(--gap-sm);
	border-radius: var(--radius-pill);
	background: var(--color-gray-light);
}
.quiz-card__progress-fill {
	position: relative;
	width: calc(var(--progress) * 1%);
	height: 100%;
	border-radius: var(--radius-pill);
	background: linear-gradient(90deg, var(--color-blue-light), var(--color-bold-blue) 25%, var(--color-sunrise-yellow) 45%, var(--color-orange) 75%, var(--color-warm-red)) 0 0 / calc(100% * 100 / var(--progress)) 100% no-repeat;
}
.quiz-card__progress-fill::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 32px;
	height: 41px;
	translate: 50% calc(-50% - 5px);
	background: url('/static/img/icon-flame.svg') center / contain no-repeat;
}
.quiz-card__progress-step {
	color: var(--color-gray);
	font-size: var(--font-size-12);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.quiz-card__question {
	text-wrap: balance;
	margin: 0 0 var(--gap-xxl);
	color: var(--color-dark-blue);
	font-size: var(--font-size-30);
	line-height: 1.15;
}
.quiz-card__subtext {
	margin: calc(-1 * var(--gap-lg)) 0 var(--gap-lg);
	color: var(--color-gray);
}

.quiz-card__answer-list {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	margin-bottom: var(--gap-md);
}
/* Stretch gives them the width; .button's nowrap is the only thing a sentence cannot live with. */
.quiz-card__answer-list > button {
	/* All of them stand at the height two lines need, so one that wraps does not tower over the
	   rest. The padding is .button--lg's own, and the pixel is the border. Flex, because a
	   min-height on an inline-block would leave a single line sitting at the top. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(2lh + var(--gap-md) * 2 + 2px);
	white-space: normal;
	/* Centred, so an even pair of lines reads better than a long one over a short one. */
	text-wrap: balance;
}
.quiz-card__location {
	margin-bottom: var(--gap-md);
}
.quiz-card__geo {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-xxs);
	align-self: flex-start;
	margin-bottom: var(--gap-md);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-bold-blue);
	font-size: var(--font-size-12);
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}
.quiz-card__geo > .icon {
	width: 14px;
	height: 14px;
}
.quiz-card__geo:focus-visible > span,
.quiz-card__geo:active > span {
	text-decoration: underline;
}
.quiz-card__city-results:not(:empty) {
	border-top: 1px solid var(--color-gray-light);
}
.quiz-card__city-results {
	flex: 1 1 0;
	overflow-y: auto;
	/* Its own scrolling box, so it opts back in regardless of the #quiz-zone rule. */
	overflow-anchor: none;
	margin: 0 0 var(--gap-md);
	padding: 0;
	list-style: none;
}
.quiz-card__city-select {
	display: flex;
	align-items: center;
	gap: var(--gap-md);
	width: 100%;
	padding: var(--gap-md);
	border: 0;
	border-radius: var(--radius-xxs);
	background: none;
	color: var(--color-dark-blue);
	font-size: var(--font-size-16);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.quiz-card__city-select > span:last-child {
	margin-left: auto;
	font-size: var(--font-size-12);
	font-weight: 500;
	text-decoration: underline;
}

.quiz-card__city-empty {
	padding: var(--gap-md);
	color: var(--color-gray);
	font-size: var(--font-size-14);
}

.quiz-card__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	font-weight: 700;
	font-size: var(--font-size-14);
}
.quiz-card__nav > a {
	color: var(--color-dark-blue);
}
.quiz-card__nav > button {
	margin-left: auto;
}

@media (hover: hover) {
	.quiz-card__geo:hover > span {
		text-decoration: underline;
	}
	.quiz-card__city-select:hover {
		background: var(--color-blue-light);
	}
}

@media (max-width: 767.98px) {
	.quiz-card__question {
		font-size: var(--font-size-24);
	}
	/* .button--lg gives back 4px of block padding here. */
	.quiz-card__answer-list > button {
		min-height: calc(2lh + var(--gap-sm) * 2 + 2px);
	}
}

/* quiz-calculating.css */
.quiz-calculating {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-inline: var(--gap-lg);
	text-align: center;
}

.quiz-calculating__status {
	margin: 0 0 var(--gap-3xl);
	font-size: var(--font-size-24);
}

.quiz-calculating__windows {
	--window-width: 85px;
	--window-gap: var(--gap-md);
	--sky-width: calc(var(--window-width) * 3 + var(--window-gap) * 2);
	display: flex;
	gap: var(--window-gap);
	margin-bottom: var(--gap-xxl);
}

/* The window path is an 85x110 box with a 42.19 corner radius — exactly half its width, so the
   shape is a stadium and needs no asset. */
.quiz-calculating__window {
	position: relative;
	width: var(--window-width);
	height: 110px;
	border-radius: var(--radius-pill);
	overflow: hidden;
	background: var(--color-blue-light);
}

/* Each sky spans all three windows and is pulled left by its own index, so the three show
   different slices of one field and the clouds carry across the gaps. */
.quiz-calculating__sky {
	position: absolute;
	inset: 0;
	left: calc(var(--window) * -1 * (var(--window-width) + var(--window-gap)));
	width: var(--sky-width);
}

.quiz-calculating__cloud {
	position: absolute;
	left: 0;
	width: var(--cloud-width);
	height: auto;
	animation: quiz-calculating-cloud-by linear infinite;
}
.quiz-calculating__cloud--1 {
	--cloud-width: 120px;
	top: 64%;
	animation-duration: 1.5s;
	animation-delay: -0.11s;
}
.quiz-calculating__cloud--2 {
	--cloud-width: 95px;
	top: 20%;
	animation-duration: 2.2s;
	animation-delay: -1.03s;
}
.quiz-calculating__cloud--3 {
	--cloud-width: 75px;
	top: 47%;
	animation-duration: 3s;
	animation-delay: -0.54s;
}
.quiz-calculating__cloud--4 {
	--cloud-width: 55px;
	top: 29%;
	animation-duration: 4.5s;
	animation-delay: -3.55s;
}

/* Heights and start offsets are deliberately unpatterned — ordering either one by size lines the
   four up on a diagonal. The only fixed part is the largest cloud riding low enough to crop. */

/* Right to left, entering at the sky's right edge and leaving a full cloud past its left. Both
   ends are lengths off --cloud-width: a percentage here would interpolate against a length. */
@keyframes quiz-calculating-cloud-by {
	from {
		translate: var(--sky-width) 0;
	}
	to {
		translate: calc(var(--cloud-width) * -1) 0;
	}
}

.quiz-calculating__stat {
	margin: 0 0 var(--gap-xs);
	color: var(--color-sunrise-yellow);
	font-size: min(var(--font-size-64), 15vw);
	font-weight: 700;
	line-height: 1;
}

.quiz-calculating__caption {
	max-width: 35ch;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.quiz-calculating__cloud {
		animation-play-state: paused;
	}
}

/* quiz-score.css */
.quiz-score__layout {
	align-items: center;
	row-gap: var(--gap-xl);
}

.quiz-score__verdict {
	margin: 0 0 var(--gap-md);
	font-size: var(--font-size-30);
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
}

.quiz-score__verdict > strong {
	font-size: var(--font-size-40);
}

.quiz-score__copy {
	max-width: 45ch;
	margin: var(--gap-xl) auto 0;
	font-size: var(--font-size-16);
	line-height: 1.4;
	text-wrap: pretty;
	text-align: center;
}

.quiz-score__copy > p {
	text-wrap: pretty;
	margin: 0 0 var(--gap-md);
}

.quiz-score__copy > p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767.98px) {
	.quiz-score__verdict {
		font-size: var(--font-size-24);
	}

	.quiz-score__verdict > strong {
		font-size: var(--font-size-30);
	}

	.quiz-score__copy {
		font-size: var(--font-size-14);
	}
}

/* burnout-gauge.css */
/* Registered so it can interpolate — an unregistered custom property is an opaque token and
   animating one flips at 50% instead of sweeping. */
@property --gauge-score {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

.burnout-gauge {
	--sweep-delay: 300ms;
	--sweep-duration: 1400ms;
	--gauge-sweep: 215deg;
	--gauge-from: 252.5deg;
	--gauge-centre: 50% 73.8%;
	--gauge-cap: 4.4deg;
	--gauge-0: calc(var(--gauge-from) - var(--gauge-cap));
	/* The --heat-stop-N positions from tokens.css, against this sweep rather than a percentage: a
	   conic gradient resolves a percentage against a full turn, not the 215deg this arc covers. */
	--gauge-stops:
		var(--color-heat-blue) calc(var(--gauge-cap) + var(--heat-stop-1) * var(--gauge-sweep)),
		var(--color-bold-blue) calc(var(--gauge-cap) + var(--heat-stop-2) * var(--gauge-sweep)),
		var(--color-sunrise-yellow) calc(var(--gauge-cap) + var(--heat-stop-3) * var(--gauge-sweep)),
		var(--color-orange) calc(var(--gauge-cap) + var(--heat-stop-4) * var(--gauge-sweep)),
		var(--color-warm-red) calc(var(--gauge-cap) + var(--heat-stop-5) * var(--gauge-sweep)),
		var(--color-warm-red) calc(var(--gauge-cap) + var(--gauge-sweep));
	/* Inline, not a file: this is a mask, so until it loads the fill paints as a bare
	   rectangle. A request cannot be made to arrive before first paint. */
	--gauge-arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 242 164'%3E%3Cpath d='M13.7 154.85A112.5 112.5 0 1 1 228.3 154.85' fill='none' stroke='%23000' stroke-width='17' stroke-linecap='round'/%3E%3C/svg%3E");
	position: relative;
	width: 242px;
	max-width: 100%;
	aspect-ratio: 242 / 164;
	margin: 0 auto;
}

.burnout-gauge__rail,
.burnout-gauge__fill {
	position: absolute;
	inset: 0;
}

/* The rail is the whole arc; the fill wears the dashed one, per element. */
.burnout-gauge__rail {
	-webkit-mask: var(--gauge-arc) 0 0 / 100% 100% no-repeat;
	mask: var(--gauge-arc) 0 0 / 100% 100% no-repeat;
}

.burnout-gauge__rail {
	background: var(--color-gray-light);
}

.burnout-gauge__fill {
	/* The mask reference is per instance, so the element carries it; see burnoutGauge.js. */
	background: conic-gradient(from var(--gauge-0) at var(--gauge-centre), var(--gauge-stops));
	/* mask-image is set per element, since a mask is referenced by id and each gauge needs its
	   own. The arc itself, dashed to the score: a conic cut can only ever end on a hard radial
	   line, where walking a round-capped stroke gives the tip GSDM draws, and it doubles as the
	   arc shape, so there is nothing left to composite. */
}
@supports (background: conic-gradient(in oklab, red, blue)) {
	.burnout-gauge__fill {
		background: conic-gradient(from var(--gauge-0) at var(--gauge-centre) in oklab, var(--gauge-stops));
	}
}

.burnout-gauge__defs {
	position: absolute;
	width: 0;
	height: 0;
}
.burnout-gauge__cut {
	stroke-dasharray: var(--gauge-score) 1;
}

/* Opt-in, because the share card renders the same component: a rasteriser grabbing its blob eagerly
   would export a half-swept arc. The delay clears the cross-fade the score arrives on, and the
   implicit to-keyframe picks up whatever --gauge-score the element was given.

   On the gauge itself, not the fill: the mask's path is a sibling of the fill, so a value animated
   down there never reaches it and the arc sits still. Here it inherits to both. */
.burnout-gauge--sweep {
	animation: burnout-gauge-sweep var(--sweep-duration) ease-in-out var(--sweep-delay) both;
}

/* Same box as the gauge, so the flame and label keep resolving their percentages against it. */
.burnout-gauge__reading {
	position: absolute;
	inset: 0;
}

/* Derived from the sweep so retiming it cannot leave the reading arriving after the arc. */
.burnout-gauge--sweep > .burnout-gauge__reading {
	animation: burnout-gauge-reading 350ms ease-out calc(var(--sweep-delay) + var(--sweep-duration)) both;
}

@keyframes burnout-gauge-sweep {
	from {
		--gauge-score: 0;
	}
}

@keyframes burnout-gauge-reading {
	from {
		opacity: 0;
	}
}

.burnout-gauge__flame {
	position: absolute;
	top: 45.2%;
	left: 49.7%;
	width: 31px;
	height: auto;
	translate: -50% -50%;
}

.burnout-gauge__label {
	position: absolute;
	top: 71.7%;
	left: 0;
	width: 100%;
	margin: 0;
	font-size: var(--font-size-30);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	translate: 0 -50%;
}

@media (prefers-reduced-motion: reduce) {
	.burnout-gauge--sweep > .burnout-gauge__fill,
	.burnout-gauge--sweep > .burnout-gauge__reading {
		animation: none;
	}
}

/* reward.css */
.reward {
	position: relative;
	color: var(--color-midnight-blue);
}

.reward__title {
	margin: 0 0 var(--gap-sm);
	color: var(--color-dark-blue);
	font-size: var(--font-size-36);
	line-height: 1.15;
	text-wrap: balance;
}
.reward__intro {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap-sm);
	margin-bottom: var(--gap-xxl);
}
.reward__subtitle {
	max-width: 28ch;
	margin: 0;
	font-size: var(--font-size-20);
}
.reward__plane {
	flex-shrink: 0;
	width: 134px;
	height: auto;
	margin-right: var(--gap-xs);
}
.reward .field__input {
	border-color: #bcbcbc;
	background: #f7f7f7;
}

.reward__label {
	display: block;
	margin: 0 0 var(--gap-sm);
	font-size: var(--font-size-14);
	font-weight: 500;
}
.reward form > .error {
	margin: var(--gap-sm) 0 0;
}
.reward .field {
	margin-top: var(--gap-sm);
}
.reward__terms {
	display: flex;
	gap: var(--gap-xs);
	align-items: flex-start;
	font-size: var(--font-size-14);
	line-height: 1.4;
}
.reward__terms-box {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--color-bold-blue);
}
.reward__turnstile {
	margin-top: var(--gap-sm);
}
.reward__help {
	margin: var(--gap-sm) 0 0;
	font-size: var(--font-size-14);
	line-height: 1.6;
}

.reward__fine-print {
	margin: var(--gap-xs) 0 0;
	font-size: var(--font-size-14);
}

.reward--success,
.reward--join,
.reward--paused {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 400px;
	padding-block: var(--gap-3xl);
	text-align: center;
}
.reward--success {
	isolation: isolate;
	overflow: hidden;
	background: var(--color-blue-light);
}

.reward__cloud {
	position: absolute;
	z-index: -1;
	left: calc(var(--cloud-width) * -1);
	width: var(--cloud-width);
	height: auto;
	animation: reward-cloud-by linear infinite;
}
.reward__cloud--1 {
	--cloud-width: 194px;
	top: 20px;
	animation-duration: 55s;
	animation-delay: -10s;
}
.reward__cloud--2 {
	--cloud-width: 126px;
	top: 318px;
	animation-duration: 95s;
	animation-delay: -64s;
}
.reward__cloud--3 {
	--cloud-width: 90px;
	top: 118px; /* the lane between the success title and copy; moves with .reward__copy's margin */
	animation-duration: 150s;
	animation-delay: -56s;
}

.reward--success .reward__plane,
.reward--join .reward__plane,
.reward--paused .reward__plane {
	position: absolute;
	top: var(--gap-lg);
	right: var(--gap-lg);
	width: 103px;
	margin: 0;
}

.reward__copy {
	max-width: 42ch;
	/* on top of the title's gap-sm: opens a lane under the title for the clouds to cross */
	margin: var(--gap-xl) auto 0;
	text-wrap: balance;
}

.reward__cta {
	align-self: center;
	margin-top: var(--gap-xxl);
}

@keyframes reward-cloud-by {
	to {
		left: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reward__cloud {
		animation-play-state: paused;
	}
}

@media (max-width: 767.98px) {
	.reward__title {
		font-size: var(--font-size-30);
	}
	.reward__subtitle {
		font-size: var(--font-size-16);
	}
	.reward__label,
	.reward__terms,
	.reward__help,
	.reward__fine-print {
		font-size: var(--font-size-12);
	}
	.reward__plane {
		width: 104px;
		margin-right: 0;
	}
}

@media (max-width: 575.98px) {
	.reward__plane {
		width: 75px;
	}
	.reward--success .reward__plane,
	.reward--join .reward__plane,
	.reward--paused .reward__plane {
		display: none;
	}
}

/* itinerary.css */
.itinerary__layout {
	grid-template-rows: min-content 1fr;
	grid-template-areas:
		"head plan"
		"form plan";
	align-items: start;
}
.itinerary__layout > .section-header {
	grid-area: head;
}
.itinerary__layout > .itinerary__form {
	grid-area: form;
}
.itinerary__layout > .itinerary__result {
	grid-area: plan;
}

.itinerary__card {
	max-height: 560px;
	overflow-y: auto;
	scrollbar-width: thin;
	margin-bottom: var(--gap-lg);
}

.itinerary__title {
	margin: 0;
	color: var(--color-bold-blue);
	font-size: var(--font-size-24);
}

.itinerary__subtitle {
	margin: 0 0 var(--gap-lg);
	color: var(--color-gray);
}

.itinerary__day {
	padding: var(--gap-md) 0;
}

.itinerary__day + .itinerary__day {
	border-top: 1px solid var(--color-gray-light);
}

.itinerary__day-heading {
	margin: 0 0 var(--gap-sm);
	font-size: var(--font-size-14);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.itinerary__item {
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: var(--gap-md);
	margin-bottom: var(--gap-sm);
}

.itinerary__item-time {
	display: grid;
	place-items: center;
	grid-row: 1 / 3;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-xs);
	background: var(--color-blue-pale);
	color: var(--color-bold-blue);
}
.itinerary__item-time > .icon {
	width: 22px;
	height: 22px;
}

.itinerary__item-title {
	color: var(--color-bold-blue);
	font-weight: 700;
}

.itinerary__item-note {
	text-wrap: pretty;
	grid-column: 2;
	margin: 0;
	color: var(--color-gray);
	font-size: var(--font-size-14);
}

.itinerary__variants {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
	align-items: center;
	margin-bottom: var(--gap-lg);
}

.itinerary__variants > p {
	width: 100%;
	margin: 0;
	font-weight: 700;
}

@media (max-width: 991.98px) {
	.itinerary__layout {
		grid-template-areas:
			"head"
			"form"
			"plan";
	}

	.itinerary__card {
		max-height: none;
	}
}

/* ooo.css */
.ooo .section-header > p {
	color: var(--color-midnight-blue);
}

.ooo__panel {
	grid-template-areas:
		"form note"
		"form copy";
	align-items: start;
}
.ooo__panel > .ooo__form {
	grid-area: form;
}
.ooo__panel > .ooo__note {
	grid-area: note;
}
.ooo__panel > .ooo__copy {
	grid-area: copy;
}
.ooo__panel > .error {
	grid-area: note;
}

.ooo__note {
	margin-bottom: var(--gap-lg);
	color: var(--color-text);
}

.ooo__subject {
	margin: 0 0 var(--gap-md);
	padding-bottom: var(--gap-md);
	border-bottom: 1px solid var(--color-gray-light);
	color: var(--color-bold-blue);
	font-size: var(--font-size-20);
}

.ooo__body {
	margin: 0;
	white-space: pre-line;
}

.ooo__copy {
	display: block;
	margin: 0 auto;
	color: var(--color-dark-blue);
}

@media (max-width: 991.98px) {
	.ooo__panel {
		grid-template-areas:
			"form"
			"note"
			"copy";
	}
}

/* section-carousel.css */
.section-carousel {
	margin-bottom: var(--gap-lg);
}

/* Inside, not outside: the track spans the full width, so an outset ring is clipped at the
   viewport edges on narrow screens. */
.section-carousel__track:focus-visible {
	outline-offset: -2px;
}

.section-carousel__track {
	display: flex;
	gap: var(--gap-md);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--radius-md);
}

.section-carousel__card {
	flex: 0 0 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-lg);
	border-radius: var(--radius-sm);
	scroll-snap-align: center;
	text-align: center;
}

.section-carousel__card--midnight-blue {
	padding: var(--gap-xl) var(--gap-lg);
	background: var(--color-midnight-blue);
	--focus-ring: var(--color-text-light);
	color: var(--color-text-light);
}

.section-carousel__pips {
	display: flex;
	justify-content: center;
	gap: var(--gap-sm);
	margin-top: var(--gap-md);
}
.section-carousel__pips > a {
	width: 24px;
	height: 24px;
	padding: 7px;
	border-radius: var(--radius-pill);
	background: var(--color-gray);
	background-clip: content-box;
}
.section-carousel__pips > a[aria-current] {
	background-color: var(--color-bold-blue);
}

.section--dark-blue .section-carousel__pips > a {
	background-color: var(--color-blue-light);
}
.section--dark-blue .section-carousel__pips > a[aria-current] {
	background-color: var(--color-text-light);
}

@media (max-width: 767.98px) {
	.section-carousel__track {
		margin-inline: calc(var(--gap-lg) * -1);
		padding-inline: var(--gap-lg);
		border-radius: 0;
	}
}

/* share-section.css */
.share-section {
	grid-template-rows: min-content 1fr;
	grid-template-areas:
		"head  card"
		"share card";
	align-items: start;
}
.share-section > .section-header {
	grid-area: head;
}
.share-section > .section-carousel {
	grid-area: card;
}
.share-section > .share-section__actions {
	grid-area: share;
}
.share-section__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--gap-sm);
	width: min(100%, 340px);
	margin-bottom: var(--gap-lg);
	text-align: center;
}

/* Icon only, so they sit as a row rather than stretching like the buttons above them.
   44px keeps the tap target honest now the label is gone. */
.share-section__networks {
	display: flex;
	justify-content: center;
	gap: var(--gap-md);
	margin-top: var(--gap-xs);
}
.share-section__network {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	color: var(--color-dark-blue);
}
.share-section__network > .icon {
	width: 22px;
	height: 22px;
}

@media (max-width: 991.98px) {
	.share-section {
		grid-template-rows: auto;
		grid-template-areas:
			"head"
			"card"
			"share";
	}

	/* Share and Save share a row; the copy link and the icon strip each take their own. */
	.share-section__actions {
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		width: auto;
	}
	.share-section__share,
	.share-section__save {
		flex: 1 1 0;
	}
	.share-section__copy,
	.share-section__networks {
		flex-basis: 100%;
	}

	/* Phones and tablets share through the sheet; the network links are the desktop route. */
	.share-section__networks {
		display: none;
	}
}

/* share-card.css */
.share-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
	width: 100%;
	padding: var(--gap-lg) var(--gap-md);
	border-radius: var(--radius-md);
	background: var(--color-midnight-blue);
	color: var(--color-text-light);
	text-align: center;
}

.share-card__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-lg);
	min-height: 440px;
	margin-block: var(--gap-md);
}
.share-card__content--inset {
	justify-content: center;
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
	padding: var(--gap-lg) var(--gap-md);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-midnight-blue);
}
.share-card__content > h3 {
	margin: 0;
	font-size: var(--font-size-24);
}
.share-card__content--inset > h3 {
	font-size: var(--font-size-20);
	font-weight: 400;
}

.share-card__copy {
	text-wrap: pretty;
	max-width: 30ch;
	margin: 0;
	font-size: var(--font-size-14);
	line-height: 1.4;
}

.share-card__copy > strong {
	display: block;
}

.share-card__drivers {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.share-card__driver {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-xxs);
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	padding-inline: var(--gap-xs);
	border-radius: var(--radius-pill);
	background: var(--color-blue-light);
	font-size: var(--font-size-11);
	font-weight: 700;
	line-height: 1.15;
}
/* Centres 91px apart: the middle disc slides under both neighbours, further when it is the larger top. */
.share-card__driver:nth-child(2) {
	margin-inline: calc(var(--tuck, 9px) * -1);
}
.share-card__driver--top {
	--tuck: 13px;
	z-index: 1;
	position: relative;
	width: 108px;
	height: 108px;
	background: var(--color-sunrise-yellow);
	translate: 0 -16px;
}

.share-card__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.share-card__cta-lead {
	margin: 0;
	font-size: var(--font-size-24);
	font-weight: 700;
}
.share-card__cta-lead > em {
	color: var(--color-sunrise-yellow);
	font-style: normal;
}
.share-card__cta-sub {
	margin: 0;
}
.share-card__cta-url {
	margin: var(--gap-md) 0 var(--gap-xl);
	color: var(--color-sunrise-yellow);
}

/* map.css */
.map {
	position: relative;
}

.map__base {
	display: block;
	width: 100%;
	height: auto;
}

/* Same viewBox as the image and the same box, so the two scale as one and a dot keeps its place.
   The state colours are baked into the file itself — an <img> cannot read these tokens. */
.map__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}




/* A nested <svg> clips to its own viewport, which would cut the halo short mid-travel for a
   city near the edge of the frame. */
/* The halo blooms past the layer's own box. */
.map__you-layer {
	overflow: visible;
}

/* Green is off the heat ramp, so the marker cannot be read as a temperature. */
.map__you-dot {
	fill: var(--color-marker-green);
	animation: map-you-fade 1.4s ease-in-out infinite;
}

/* Same clock as the fade, so the two read as one beat. */
.map__you-halo {
	fill: var(--color-marker-green);
	transform-box: fill-box;
	transform-origin: center;
	animation: map-you-halo 1.4s ease-out infinite;
}

@keyframes map-you-fade {
	from, to { opacity: 1; }
	50% { opacity: 0.2; }
}

/* Opens at the dot's edge and well above --_halo, which is too faint to see once it travels. */
@keyframes map-you-halo {
	from { transform: scale(0.64); opacity: 0.8; }
	to { transform: scale(var(--_grow)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	/* Left as an ordinary green dot and halo, indistinguishable in kind from the rest. */
	.map__you-dot {
		animation: none;
	}
	.map__you-halo {
		animation: none;
		opacity: var(--_halo);
	}
}

/* heat-map.css */
.heat-map__layout {
	row-gap: var(--gap-xl);
}

.heat-map__results,
.heat-map__results .section-carousel {
	display: flex;
	flex-direction: column;
}
.heat-map__results .section-carousel,
.heat-map__results .section-carousel__track {
	flex: 1;
}

.heat-map {
	padding: var(--gap-md);
	border-radius: var(--radius-sm);
	background: var(--color-blue-mid);
}

.heat-map__legend {
	width: min(60%, 360px);
	margin: var(--gap-sm) auto 0;
	padding: var(--gap-xs) var(--gap-sm) var(--gap-xxs);
	border-radius: var(--radius-xxs);
	background: var(--color-blue-pale);
}

.heat-map__scale {
	height: 8px;
	border-radius: var(--radius-pill);
	background: linear-gradient(to right, var(--heat-stops));
}
@supports (background: linear-gradient(in oklab, red, blue)) {
	.heat-map__scale {
		background: linear-gradient(to right in oklab, var(--heat-stops));
	}
}

.heat-map__scale-labels {
	display: flex;
	justify-content: space-between;
	margin: var(--gap-xxs) 0 0;
	color: var(--color-dark-blue);
	font-size: var(--font-size-12);
	font-weight: 700;
	line-height: 1;
}

/* city-detail.css */
.city-detail {
	--rule: 1px solid rgb(255 255 255 / 0.3);
	align-self: stretch;
	text-align: left;
}

.city-detail__title {
	margin: 0;
	padding-bottom: var(--gap-md);
	border-bottom: var(--rule);
	font-size: var(--font-size-30);
	font-weight: 500;
	line-height: 1.2;
}

.city-detail__lead {
	margin: 0;
	padding: var(--gap-md) var(--gap-sm);
	border-bottom: var(--rule);
	font-size: var(--font-size-24);
	line-height: 1.4;
}

.city-detail__figure {
	color: var(--color-sunrise-yellow);
	font-size: var(--font-size-30);
	font-weight: 700;
}

.city-detail__stats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	padding: var(--gap-lg) 0;
	border-bottom: var(--rule);
}
.city-detail__stat {
	padding-inline: var(--gap-md);
}
.city-detail__stat + .city-detail__stat {
	border-left: var(--rule);
}

.city-detail__stat-value {
	margin: 0 0 var(--gap-xs);
	color: var(--color-sunrise-yellow);
	font-size: var(--font-size-30);
	font-weight: 700;
	line-height: 1;
}

.city-detail__stat-label {
	margin: 0;
	font-size: var(--font-size-12);
	line-height: 1.3;
}

.city-detail__delta {
	margin: var(--gap-xs) 0 0;
	font-size: var(--font-size-12);
	font-weight: 700;
	line-height: 1.3;
}
.city-detail__delta--up {
	color: var(--color-orange);
}
.city-detail__delta--down {
	color: var(--color-heat-blue);
}

/* notification-vacation.css */
/* 342 is the board's 390 frame less the section gutter each side. */
.notification-vacation {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 342px;
	margin-inline: auto;
	text-align: center;
}

/* The comp centres the star 17px above the logo and 42px in from the band's right edge on a 390
   frame; the offsets carry the 12.5px margin around the star in the 130px export. */
.notification-vacation__badge {
	position: absolute;
	top: -82px;
	right: -42px;
	width: 130px;
	height: 130px;
}

/* "Add spinning animation to the sunburst behind the bell" — the bell itself holds still, so the
   art has to be in the document rather than an <img> for CSS to reach the one path. */
.notification-vacation__badge .nv-badge__burst {
	transform-box: fill-box;
	transform-origin: center;
	animation: notification-vacation-burst 40s linear infinite;
}

@keyframes notification-vacation-burst {
	to {
		rotate: 1turn;
	}
}

@media (prefers-reduced-motion: reduce) {
	.notification-vacation__badge .nv-badge__burst {
		animation: none;
	}
}

.notification-vacation__logo {
	width: 217px;
	height: auto;
	margin: 0 0 var(--gap-lg);
}

.notification-vacation__title {
	margin: 0 0 var(--gap-xs);
	font-size: var(--font-size-24);
	line-height: 28px;
	text-wrap: balance;
}
.notification-vacation__reg {
	font-weight: 400;
}

.notification-vacation__tagline {
	margin: 0 0 var(--gap-md);
	font-size: var(--font-size-20);
	text-wrap: pretty;
}

.notification-vacation__cta {
	align-self: stretch;
	margin-bottom: var(--gap-lg);
}

.notification-vacation__fine-print {
	margin: var(--gap-3xl) 0 0;
	color: var(--color-summit-silver);
	font-size: var(--font-size-12);
	font-weight: 300;
	line-height: 1.3;
	text-wrap: balance;
}

@media (max-width: 767.98px) {
	.notification-vacation__fine-print {
		font-size: var(--font-size-10);
	}
}

/* quiz-hero.css */
.quiz-hero {
	--hero-t: 1;
	--hero-hold: 3500ms;
	/* The moment the burnt half hands over to Enter Airplane Mode. Everything in the second half
	   waits on this one value, hero-notice.css included. */
	--hero-flip: calc(var(--hero-t) * var(--hero-hold));
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--gap-lg);
	/* The top block settles ~307 down and the coil wants 385 plus its 16 off the floor, so under
	   about 700 the coil climbs behind the toggle and the headline, and past about 800 the hero
	   only grows the empty band between them. Both bounds live in the min-height: a max-height
	   would lose to it and do nothing. */
	min-height: clamp(700px, calc(var(--vh-visible) - var(--site-header-height)), 800px);
	--hero-pad-top: clamp(var(--gap-xl), 8svh, 96px);
	padding-block: var(--hero-pad-top) clamp(var(--gap-xl), 10svh, 120px);
	padding-inline: var(--gap-lg);
	/* Fitted to the comp's blurred-ellipse wash: blue across the top, hanging lower on the right,
	   with a soft highlight below the toggle. */
	background:
		radial-gradient(43% 36% at 50% 58%, rgb(227 237 241 / 0.68), transparent),
		radial-gradient(82% 49% at 91% 9%, #8bafec, rgb(139 175 236 / 0.55) 50%, transparent),
		linear-gradient(#8bafec, #d5e3ec 34%, #e3edf1 57%, #d6e4e9);
	text-align: center;
}
@supports not (height: 1svh) {
	.quiz-hero {
		--hero-pad-top: clamp(var(--gap-xl), 8vh, 96px);
		padding-block: var(--hero-pad-top) clamp(var(--gap-xl), 10vh, 120px);
	}
}
/* Above the pile and the clouds, in the bottom corner where neither the notification banner nor
   the title reaches. */
.quiz-hero__debug {
	position: absolute;
	right: var(--gap-md);
	bottom: var(--gap-md);
	z-index: 2;
}

.quiz-hero__pile {
	bottom: 0;
	z-index: -1;
	opacity: 0;
	animation: quiz-hero-fade-out calc(var(--hero-t) * 500ms) ease var(--hero-flip) both;
}

.quiz-hero__sky {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}
.quiz-hero__cloud {
	position: absolute;
	left: calc(var(--cloud-width) * -1);
	width: var(--cloud-width);
	height: auto;
	animation: quiz-hero-cloud-by linear infinite;
}
.quiz-hero__cloud--1 {
	--cloud-width: 135px;
	top: 0;
	animation-duration: 160s;
	animation-delay: -18s;
}
.quiz-hero__cloud--2 {
	--cloud-width: 190px;
	top: 40%;
	animation-duration: 105s;
	animation-delay: -74s;
}
.quiz-hero__cloud--3 {
	--cloud-width: 135px;
	top: 92%;
	animation-duration: 230s;
	animation-delay: -67s;
}

/* A div wrapping the two states, with only Enter Airplane Mode inside the h1 — the burnt headline
   is a transient, not part of the page's heading. The size and weight the h1 used to carry as the
   outer element have to be stated here now, and reset on it below. */
.quiz-hero__title {
	display: grid;
	margin: 0;
	font-size: var(--font-size-80);
	font-weight: 700;
	line-height: 1.05;
}
.quiz-hero__title-lead {
	display: block;
	margin-bottom: var(--gap-3xs);
	font-size: var(--font-size-40);
	font-weight: 400;
	line-height: 1.17;
}
.quiz-hero__title-state {
	grid-area: 1 / 1;
	/* The calm state is the h1, whose own 2em and margin would otherwise land on top of the size
	   set above. */
	margin: 0;
	font-size: inherit;
	color: var(--color-dark-blue);
}
.quiz-hero__title-state--calm {
	animation: quiz-hero-fade-in calc(var(--hero-t) * 400ms) ease calc(var(--hero-flip) + var(--hero-t) * 150ms) both;
}
/* `forwards` rather than `both` on each: a `both` fill would hold its own start value through the
   other's delay and the two would fight over the property. Both keyframes state both ends, or the
   fade-out would read its target off the fade-in that is still filling and never move. */
.quiz-hero__title-state--burnt {
	color: var(--color-text-light);
	opacity: 0;
	animation:
		quiz-hero-fade-in calc(var(--hero-t) * 400ms) var(--ease-in-out-cubic) calc(var(--hero-t) * 2100ms) forwards,
		quiz-hero-fade-out calc(var(--hero-t) * 500ms) ease var(--hero-flip) forwards;
}
.quiz-hero__accent {
	color: var(--color-sunrise-yellow);
}

.quiz-hero__toggle {
	--knob-travel: -63.2px;
	position: relative;
	width: 90px;
	height: 39px;
	border: 1px solid #8c8c8c;
	border-radius: var(--radius-pill);
	background: #f7f7f7;
	opacity: 0;
	/* Second of the three that cascade in 200ms apart — flame, toggle, headline — then it holds
	   while the track turns over at the flip. The two animations never touch the same property,
	   so neither fill gets in the other's way. */
	animation:
		quiz-hero-fade-in calc(var(--hero-t) * 400ms) var(--ease-in-out-cubic) calc(var(--hero-t) * 1900ms) both,
		quiz-hero-track calc(var(--hero-t) * 500ms) ease var(--hero-flip) both;
}
.quiz-hero__knob {
	position: absolute;
	top: 50%;
	right: -13.6px;
	display: grid;
	place-items: center;
	translate: 0 -50%;
	filter: drop-shadow(-2px 0 4.5px rgb(0 0 0 / 0.3));
	animation: quiz-hero-knob calc(var(--hero-t) * 750ms) var(--ease-in-out-cubic) var(--hero-flip) both;
}
.quiz-hero__knob > img {
	grid-area: 1 / 1;
	width: auto;
	height: 50.1px;
	animation: quiz-hero-fade-in calc(var(--hero-t) * 400ms) ease calc(var(--hero-flip) + var(--hero-t) * 150ms) both;
}
.quiz-hero__knob-off {
	grid-area: 1 / 1;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-pill);
	background: #f7f7f7;
	opacity: 0;
	animation: quiz-hero-fade-out calc(var(--hero-t) * 400ms) ease calc(var(--hero-flip) + var(--hero-t) * 50ms) both;
}

.quiz-hero__copy {
	max-width: 45ch;
	/* auto top margin takes the hero's free space, so the title sits at the top and the copy and
	   buttons sit at the bottom rather than the whole stack bunching in the middle. */
	margin: auto 0 0;
	font-size: var(--font-size-20);
	line-height: 1.3;
	animation: quiz-hero-fade-in calc(var(--hero-t) * 500ms) ease calc(var(--hero-flip) + var(--hero-t) * 600ms) both;
}
.quiz-hero__lead {
	margin: 0 0 var(--gap-xs);
	font-weight: 700;
}
.quiz-hero__intro {
	margin: 0;
	color: var(--color-midnight-blue);
}
.quiz-hero__note {
	color: inherit;
	text-decoration: none;
}

.quiz-hero__nav {
	display: flex;
	align-items: center;
	gap: var(--gap-md);
	animation: quiz-hero-fade-in calc(var(--hero-t) * 500ms) ease calc(var(--hero-flip) + var(--hero-t) * 700ms) both;
}

/* Both ends stated on each. A from-only keyframe takes its other end from the underlying value,
   which on the burnt headline is whatever the animation beside it is already holding — so it ran
   0 to 0 on the way in and 1 to 1 on the way out. Every element using these rests at the end value
   anyway, so naming it changes nothing for them. */
@keyframes quiz-hero-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes quiz-hero-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes quiz-hero-track {
	from {
		border-color: #dfdfdf;
		background: #b8b8b8;
	}
}
@keyframes quiz-hero-knob {
	from {
		translate: var(--knob-travel) -50%;
	}
}
@keyframes quiz-hero-cloud-by {
	to {
		translate: calc(100vw + var(--cloud-width)) 0;
	}
}

.hero-seen .quiz-hero {
	--hero-t: 0;
}
.hero-paused .quiz-hero {
	--hero-t: 1;
}
.hero-paused .quiz-hero * {
	animation-play-state: paused;
}

@media (max-width: 767.98px) {
	/* 700 flat on phones so the quiz peeks below. It used to give way to a short viewport, to keep
	   the CTAs off the fold, but the coil needs the room more: below 700 it rides up behind the
	   toggle. The CTAs only matter once the hero has flipped, by which point the coil has gone. */
	.quiz-hero {
		min-height: 700px;
	}

	.quiz-hero__title {
		font-size: var(--font-size-48);
	}
	.quiz-hero__title-lead {
		font-size: var(--font-size-24);
	}
	.quiz-hero__nav {
		flex-direction: column;
	}
	.quiz-hero__cloud--1 {
		top: 0;
	}
}

/* quiz-hero-coil.css */
/* Storyboards 1-6 on the Figma "Nav + Hero" board. The coil draws itself over 2s, the flame fades
   in on its head, then the headline arrives — see quiz-hero.css for those two. The board's own
   reveal is a rectangular wipe, which cuts the line flat wherever it stops; that version is in
   attic/hero-coil-clip. */
/* The burnt state's whole backdrop, the blue behind the coil as well as the coil: they arrive
   together and leave together, so one layer rather than this and a ::before fading in lockstep.
   opacity: 0 is what the fade-out lands on; the backwards fill holds it up until the flip, which
   is also why the hero's own pale wash only shows once this has gone. */
.quiz-hero__coil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(#273f9e, var(--color-dark-blue));
	opacity: 0;
	animation: quiz-hero-fade-out calc(var(--hero-t) * 500ms) ease var(--hero-flip) both;
}

.quiz-hero__coil-line {
	position: absolute;
	bottom: 16px;
	left: 50%;
	translate: -50% 0;
	/* The board's own width, and no wider: the stroke rides the viewBox, so stretching the coil to
	   a desktop hero would take 24 up past 70. Narrower than that it shrinks to fit rather than
	   losing the head and the flame off the right. */
	width: min(100%, 390px);
	height: auto;
	/* The tail runs well past the viewBox on its way to the 1920 edge; the hero crops it. */
	overflow: visible;
	/* Both paths together, not the tail on its own: the drawn line would otherwise arrive at full
	   strength alongside a tail still coming up. The flame is in here too, but it holds at zero on
	   its own animation until 1.7s, well after this has settled. */
	animation: quiz-hero-fade-in calc(var(--hero-t) * 800ms) var(--ease-out-cubic) both;
}

/* pathLength="1" on the path normalises the dash maths, so editing the geometry cannot put the
   draw out of step. One dash the whole length of the path, walked on from offset 1 to 0, which
   starts it at the bottom-left bleed and lands the head where the flame arrives. */
.quiz-hero__coil-path {
	stroke-dasharray: 1 1;
	animation: quiz-hero-coil calc(var(--hero-t) * 2000ms) var(--ease-out-cubic) both;
}

.quiz-hero__coil-flame {
	animation: quiz-hero-fade-in calc(var(--hero-t) * 400ms) var(--ease-out-cubic) calc(var(--hero-t) * 1700ms) both;
}

@keyframes quiz-hero-coil {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}

/* hero-notice.css */
/* The Notification Vacation banner at the top of the hero, styled as a phone notification and
   dropped in from above once the hero has switched to Airplane Mode. Figma: NV Banner, 374 x 65,
   8px from the top and sides of a 390 frame. */
.hero-notice {
	--notice-inset: var(--gap-xs);
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
	width: min(374px, 100% + var(--gap-lg) * 2 - var(--notice-inset) * 2);
	min-height: 65px;
	/* First flex child: pull up through the hero's top padding so it sits 8px from the edge. */
	margin-top: calc(var(--notice-inset) - var(--hero-pad-top));
	padding: var(--gap-sm);
	border-radius: var(--radius-sm);
	background: rgb(255 255 255 / 0.2);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgb(255 255 255 / 0.3);
	color: var(--color-dark-blue);
	text-align: left;
	text-decoration: none;
	animation: hero-notice-drop 600ms var(--ease-out-back) calc(var(--hero-flip) + var(--hero-t) * 1100ms + 300ms) both;
}
.hero-notice:hover,
.hero-notice:focus-visible {
	background: rgb(255 255 255 / 0.32);
}

.hero-notice__icon {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}
.hero-notice__icon > img {
	display: block;
	width: 40px;
	height: 40px;
}
/* The unread dot rides the icon's top-right corner, as on the board. */
.hero-notice__dot {
	position: absolute;
	top: -5px;
	right: -2px;
	width: 11px;
	height: 11px;
	border-radius: var(--radius-pill);
	background: var(--color-warm-red);
}

.hero-notice__body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.hero-notice__meta {
	display: flex;
	justify-content: space-between;
	gap: var(--gap-sm);
	font-size: 10px;
	line-height: 1.2;
	color: var(--color-gray-mid);
}
.hero-notice__app {
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	opacity: 0.7;
}
.hero-notice__text {
	font-size: var(--font-size-14);
	line-height: 1.3;
}

@keyframes hero-notice-drop {
	from {
		translate: 0 calc(-100% - var(--notice-inset) * 2);
		opacity: 0;
	}
}

/* faq.css */
.faq {
	width: 100%;
	padding-block: 120px;
	color: var(--color-dark-blue);
}
.faq__title {
	margin: 0 0 var(--gap-xl);
	font-size: var(--font-size-64);
	font-weight: 300;
	line-height: 1.1;
}
.faq__title b {
	font-weight: 700;
}
.faq__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 16px;
	align-items: start;
	padding-top: 50px;
	font-weight: 300;
	font-size: var(--font-size-24);
	line-height: 1.1;
}
.faq__item {
	border-bottom: 1px solid var(--color-bold-blue);
}
.faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--gap-md);
	min-height: calc(2lh + 2 * var(--gap-lg));
	padding-block: var(--gap-lg);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.faq__question::-webkit-details-marker {
	display: none;
}
.faq__question::after {
	content: '';
	flex: none;
	width: 13px;
	height: 8px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.faq__item[open] > .faq__question::after {
	rotate: 180deg;
}
.faq__answer {
	padding-bottom: var(--gap-lg);
	font-size: var(--font-size-20);
	font-weight: 400;
}
.faq__answer > p {
	margin: 0 0 1em;
}
.faq__answer > ol {
	margin: 0;
	padding-left: 1.4em;
}

@media (max-width: 1199.98px) {
	.faq__title {
		margin-bottom: var(--gap-lg);
		font-size: var(--font-size-48);
	}
}

@media (max-width: 991.98px) {
	.faq__title {
		margin-bottom: var(--gap-md);
	}
	.faq {
		padding-block: 60px;
	}
	.faq__columns {
		grid-template-columns: 1fr;
		padding-top: var(--gap-lg);
		font-size: var(--font-size-16);
		/* The comp's line-height: normal, which for Southwest Sans at 16px is exactly 20. */
		line-height: 1.25;
	}
	.faq__question {
		min-height: 0;
	}
	.faq__answer {
		font-size: inherit;
	}
}