/*
 * Shared components (HANDOFF.md, Global components). Measurements come from the
 * phone (390 px) and desktop (1440 px) boards; phone first, desktop from 768 px,
 * full header menu from 1100 px.
 */

/* ---------- Logo (approved October 24, 2026): 150 px wide on phones, 180 px on desktop ---------- */
.logo {
	display: inline-flex;
	flex: none;
	text-decoration: none;
}

.logo__svg {
	display: block;
	width: 150px;
	height: auto;
	aspect-ratio: 185 / 58;
}

@media (min-width: 768px) {
	.logo__svg {
		width: 180px;
	}
}

/* ---------- Benefit bar ---------- */
.benefit-bar {
	background: var(--c-benefit);
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	color: var(--c-charcoal);
}

@media (min-width: 768px) {
	.benefit-bar {
		padding: 10px;
		font-size: 14px;
	}
}

/* ---------- Round icon buttons (call, menu) ---------- */
.round-btn,
.menu-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
}

.round-btn--teal {
	border-radius: 999px;
	background: var(--c-teal);
	color: var(--c-white);
}

.round-btn--teal:hover {
	background: var(--c-teal-hover);
	color: var(--c-white);
}

.menu-btn {
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-btn);
	background: var(--c-white);
	color: var(--c-charcoal);
}

.menu-btn__close,
.menu-btn[aria-expanded="true"] .menu-btn__open {
	display: none;
}

.menu-btn[aria-expanded="true"] .menu-btn__close {
	display: block;
}

/* ---------- Site header ---------- */
.site-header {
	position: relative;
	z-index: 50;
	background: var(--c-white);
	border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 8.5px; /* 10 px before the October 24 logo; the header keeps its height. */
}

.primary-nav ul {
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav a {
	font-size: 15px;
	font-weight: 600;
	color: var(--c-charcoal);
	text-decoration: none;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
	color: var(--c-teal);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-header__status {
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.primary-nav,
.site-header__status,
.site-header__call {
	display: none;
}

@media (min-width: 768px) {
	.site-header__inner {
		padding-block: 14px;
	}
}

@media (min-width: 1100px) {
	.primary-nav,
	.site-header__status,
	.site-header__call {
		display: flex;
	}

	.site-header__compact,
	.mobile-menu {
		display: none !important;
	}

	.site-header__actions {
		gap: 18px;
	}
}

/* Phone and tablet menu: the panel (rows and order: board 58, further down). */
.mobile-menu {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--c-white);
	border-bottom: 1px solid var(--c-border);
	box-shadow: 0 12px 24px rgba(36, 54, 60, 0.12);
	padding-bottom: 16px;
}

.mobile-menu__list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.mobile-menu__list a {
	display: flex;
	align-items: center;
	min-height: 52px;
	border-bottom: 1px solid var(--c-border);
	font-size: 16px;
	font-weight: 700;
	color: var(--c-charcoal);
	text-decoration: none;
}

.mobile-menu__list a[aria-current="page"] {
	color: var(--c-teal);
}

.mobile-menu__actions {
	display: grid;
	gap: 10px;
}

/* ---------- Checkout header ---------- */
.checkout-header {
	border-bottom: 1px solid var(--c-border);
}

.checkout-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 10.5px;
}

.checkout-header__right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.checkout-header__secure {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 700;
	color: var(--c-body);
}

.checkout-header__secure .icon {
	width: 15px;
	height: 15px;
	color: var(--c-teal);
}

.checkout-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--tap);
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
}

@media (min-width: 768px) {
	.checkout-header__inner {
		padding-block: 16px;
	}

	.checkout-header__right {
		gap: 24px;
	}

	.checkout-header__secure {
		gap: 8px;
		font-size: 14px;
	}

	.checkout-header__secure .icon {
		width: 18px;
		height: 18px;
	}
}

/* ---------- Checkout progress ---------- */
.checkout-progress {
	padding-top: 14px;
}

.checkout-progress__steps {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.checkout-progress__step {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-charcoal);
}

.checkout-progress__dot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--c-teal);
	color: var(--c-white);
	font-size: 14px;
	font-weight: 800;
}

.checkout-progress__step.is-current {
	font-weight: 800;
}

.checkout-progress__step.is-todo {
	color: var(--c-muted);
}

.checkout-progress__step.is-todo .checkout-progress__dot {
	background: var(--c-white);
	border: 2px solid var(--c-border);
	color: var(--c-muted);
}

.checkout-progress__line {
	flex: 1;
	max-width: 120px;
	height: 2px;
	background: var(--c-border);
}

.checkout-progress__line.is-done {
	background: var(--c-teal);
}

.checkout-progress__bars {
	display: flex;
	gap: 6px;
}

.checkout-progress__bars span {
	flex: 1;
	height: 5px;
	border-radius: 999px;
	background: var(--c-border);
}

.checkout-progress__bars span.is-done {
	background: var(--c-teal);
}

.checkout-progress__compact {
	display: grid;
	gap: 8px;
}

.checkout-progress__compact p {
	font-size: 13px;
	font-weight: 700;
	color: var(--c-muted);
}

@media (min-width: 768px) {
	.checkout-progress {
		padding-top: 28px;
	}
}

/* ---------- Checkout footer ---------- */
.checkout-footer {
	margin-top: 48px;
	border-top: 1px solid var(--c-border);
	font-size: 12px;
	line-height: 1.5;
	color: var(--c-muted);
}

.checkout-footer__inner {
	padding-block: 16px;
}

.checkout-footer__links {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.checkout-footer__links li + li::before {
	content: "·";
	margin: 0 0.35em;
}

.checkout-footer a {
	color: var(--c-muted);
}

@media (min-width: 768px) {
	.checkout-footer {
		font-size: 13px;
	}

	.checkout-footer__inner {
		display: flex;
		justify-content: space-between;
		gap: 24px;
		padding-block: 22px;
	}

	.checkout-footer__links {
		flex-wrap: nowrap;
		gap: 18px;
	}

	.checkout-footer__links li + li::before {
		content: none;
	}
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
	padding-top: 14px;
	font-size: 13px;
	color: var(--c-muted);
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flex items drop the markup's whitespace, so the separator is exactly the boards' " › ". */
.breadcrumb li {
	display: flex;
}

.breadcrumb li + li::before {
	content: " › ";
	white-space: pre;
}

.breadcrumb a {
	color: var(--c-muted);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--c-teal);
	text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
	color: var(--c-charcoal);
	font-weight: 600;
}

@media (min-width: 768px) {
	.breadcrumb {
		padding-top: 20px;
		font-size: 14px;
	}
}

/* ---------- Form fields (shared with the order screens) ---------- */
.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.field__label {
	font-size: 14px;
	font-weight: 700;
	color: var(--c-charcoal);
}

.field__box {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 50px;
	padding: 0 12px;
	border: 1.5px solid var(--c-field);
	border-radius: var(--r-field);
	background: var(--c-white);
	font-size: 16px;
	font-weight: 500;
	color: var(--c-charcoal);
}

.field__box--icon .icon {
	color: var(--c-teal);
}

.field__box:focus-within,
.field__select:focus-visible {
	outline: 3px solid var(--c-teal);
	outline-offset: 1px;
	border-color: var(--c-teal);
}

.field__input {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	border: 0;
	background: transparent;
	font-size: 16px;
	font-weight: 500;
}

.field__input:focus-visible {
	outline: none;
}

@media (min-width: 768px) {
	.field__label {
		font-size: 15px;
	}

	.field__box {
		min-height: 52px;
	}

	.field__input {
		min-height: 48px;
	}
}

/* ---------- Travel-date checker ---------- */
.checker {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 20px;
	box-shadow: var(--shadow-raised);
}

.checker__fields {
	display: grid;
	gap: 12px;
}

/* Board padding (6 px) keeps the label on one line at 390 px. */
.checker__submit {
	min-height: 54px;
	padding-inline: 6px;
}

/* Wraps only on screens narrower than the 390 px board. */
.checker__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.checker__trust:empty {
	display: none;
}

.checker__note {
	font-size: 12px;
	line-height: 1.5;
	color: var(--c-muted);
}

@media (min-width: 768px) {
	.checker {
		gap: 16px;
		padding: 28px;
		border-radius: 24px;
	}

	.checker__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.checker__submit {
		min-height: 56px;
	}

	.checker__trust {
		flex-wrap: wrap;
		gap: 8px;
	}

	.checker__note {
		font-size: 13px;
		line-height: 1.55;
	}
}

/* ---------- Trust badges ---------- */
.google-badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 12px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 10px;
	color: var(--c-charcoal);
	text-decoration: none;
}

.google-badge:hover {
	color: var(--c-charcoal);
	border-color: var(--c-field);
}

.google-badge__rating {
	font-size: 14px;
	font-weight: 800;
}

.google-badge__count {
	font-size: 11px;
	color: var(--c-muted);
}

.stars {
	display: inline-flex;
	gap: 1px;
}

.google-badge--sm {
	height: 36px;
}

.google-badge--sm .google-mark {
	width: 15px;
	height: 15px;
}

.google-badge--sm .stars svg {
	width: 10px;
	height: 10px;
}

.google-badge--sm .google-badge__rating {
	font-size: 12px;
}

.google-badge--sm .google-badge__count {
	font-size: 9px;
}

@media (min-width: 768px) {
	.google-badge--sm {
		height: 40px;
	}

	.google-badge--sm .google-mark {
		width: 16px;
		height: 16px;
	}

	.google-badge--sm .stars svg {
		width: 12px;
		height: 12px;
	}

	.google-badge--sm .google-badge__rating {
		font-size: 13px;
	}

	.google-badge--sm .google-badge__count {
		font-size: 10px;
	}
}

/* Seal images come in the sizes BBB supplies (293 × 61, 250 × 52, 200 × 42); beside a Google badge they're scaled
   to its height, keeping their proportions (owner's decisions, October 18 and 28). */
.bbb-seal {
	flex: none;
	display: block;
	line-height: 0;
}

.bbb-seal img {
	display: block;
	max-width: none;
	border: 0;
}

/* Owner's decision (October 18): under the checker the 200 × 42 seal is scaled to the board's
   slot, 40 px tall on desktop and 140 px wide on phones (beside the Google badge), keeping its proportions. */
.checker__trust .bbb-seal--small img {
	width: auto;
	height: 40px;
}

@media (max-width: 767px) {
	.checker__trust .bbb-seal--small img {
		width: 140px;
		height: auto;
	}
}

/* Owner's decision (October 18): in the footer the seal matches the Google badge's 44 px height. */
.site-footer__trust .bbb-seal img {
	width: auto;
	height: 44px;
}

/* ---------- Four-way strip ---------- */
.four-way {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.four-way__title {
	margin-bottom: 2px;
	font-size: 22px;
	line-height: 1.2;
}

.four-way__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phone: icon, label over note, time on the right. */
.four-way__item {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	grid-template-areas:
		"icon label time"
		"icon note  time";
	align-items: center;
	column-gap: 10px;
	padding: 10px 12px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 14px;
}

.four-way__item.is-ours {
	border: 2px solid var(--c-teal);
}

.four-way__icon {
	grid-area: icon;
	width: 32px;
	height: 32px;
}

.four-way__icon .icon {
	width: 17px;
	height: 17px;
}

.four-way__label {
	grid-area: label;
	font-size: 14px;
	font-weight: 800;
	color: var(--c-charcoal);
}

.four-way__time {
	grid-area: time;
	max-width: 120px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
	text-align: right;
	color: var(--c-charcoal);
}

.four-way__note {
	grid-area: note;
	font-size: 12px;
	color: var(--c-muted);
}

.is-ours .four-way__label,
.is-ours .four-way__time {
	color: var(--c-teal);
}

.four-way__guide,
.four-way__link {
	font-weight: 700;
}

.four-way__guide {
	padding-top: 2px;
	font-size: 14px;
}

@media (min-width: 768px) {
	.four-way {
		gap: 14px;
	}

	.four-way__head {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 24px;
	}

	.four-way__title {
		margin: 4px 0 0;
		font-size: 28px;
		line-height: normal;
	}

	.four-way__guide {
		padding-top: 0;
		font-size: 15px;
	}

	.four-way__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	/* Desktop: card with icon beside label and time, then note, then link. */
	.four-way__item {
		grid-template-columns: 36px minmax(0, 1fr);
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas:
			"icon label"
			"icon time"
			"note note"
			"link link";
		align-items: start;
		column-gap: 10px;
		padding: 14px 16px;
		border-radius: 16px;
	}

	.four-way__icon {
		align-self: center;
		width: 36px;
		height: 36px;
	}

	.four-way__icon .icon {
		width: 20px;
		height: 20px;
	}

	.four-way__label {
		font-size: 15px;
	}

	.four-way__time {
		max-width: none;
		font-size: 14px;
		font-weight: 700;
		text-align: left;
	}

	.four-way__note {
		margin-top: 8px;
		line-height: 1.4;
	}

	.four-way__link {
		grid-area: link;
		align-self: end;
		margin-top: 8px;
		font-size: 13px;
	}
}

@media (min-width: 1100px) {
	.four-way__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* State pages (board 11): smaller heading, icon beside label, time and note, no links. */
@media (min-width: 768px) {
	.four-way--compact .four-way__title {
		margin: 0;
		font-size: 26px;
	}

	.four-way--compact .four-way__item {
		grid-template-rows: auto;
		grid-template-columns: 38px minmax(0, 1fr);
		grid-template-areas:
			"icon label"
			"icon time"
			"icon note";
		align-items: center;
		column-gap: 12px;
	}

	.four-way--compact .four-way__icon {
		width: 38px;
		height: 38px;
		border-radius: 11px;
	}

	.four-way--compact .four-way__note {
		margin-top: 0;
		line-height: normal;
	}
}

/* ---------- Why choose us ---------- */
.why-us {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 20px;
	background: var(--c-teal);
	border-radius: 20px;
}

.why-us__label {
	line-height: normal;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-amber);
}

.why-us__item h3 {
	font-size: 16px;
	letter-spacing: 0;
	color: var(--c-white);
}

.why-us__item p {
	font-size: 14px;
	line-height: 1.45;
	color: var(--c-on-teal);
}

.why-us__item p .why-us__promise {
	font-weight: 700;
	color: var(--c-amber);
}

.why-us-wrap.is-after-pale {
	margin-top: 28px;
}

@media (min-width: 768px) {
	.why-us-wrap,
	.why-us-wrap.is-after-pale {
		margin-top: 48px;
	}

	.why-us {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px 32px;
		padding: 32px 40px;
		border-radius: 24px;
	}

	.why-us__label {
		grid-column: 1 / -1;
		font-size: 14px;
	}

	.why-us__item {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.why-us__item h3 {
		font-size: 18px;
	}

	.why-us__item p {
		font-size: 15px;
		line-height: 1.5;
	}
}

/* ---------- Call band ---------- */
.call-band-wrap {
	margin-block: 32px;
}

.call-band {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 20px;
	background: var(--c-amber-tint);
	border-radius: 22px;
}

.call-band__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.call-band h2 {
	font-size: 24px;
	line-height: 1.2;
}

.call-band p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--c-body);
}

.call-band__actions {
	display: grid;
	gap: 12px;
}

@media (min-width: 768px) {
	.call-band-wrap {
		margin-block: 80px;
	}

	.call-band {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 32px;
		padding: 48px 56px;
		border-radius: 28px;
	}

	.call-band__text {
		gap: 10px;
		max-width: 720px;
	}

	.call-band h2 {
		font-size: 34px;
		line-height: 1.15;
	}

	.call-band p {
		font-size: 17px;
		line-height: 1.6;
	}

	.call-band__actions {
		display: flex;
		flex-wrap: wrap;
		flex: none;
	}
}

/* ---------- FAQ accordion ---------- */
.faq {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.faq__item {
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 14px;
}

.faq__q {
	font-size: 15px;
	letter-spacing: 0;
}

.faq__toggle {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	min-height: var(--tap);
	padding: 14px 16px;
	border: 0;
	border-radius: 14px;
	background: none;
	font-weight: 800;
	text-align: left;
}

.faq__sign {
	flex: none;
	color: var(--c-teal);
}

.faq__sign::before {
	content: "+";
}

.faq__toggle[aria-expanded="true"] .faq__sign::before {
	content: "\2212";
}

.faq__a {
	padding: 0 16px 14px;
	margin-top: -8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-body);
}

/* hidden="until-found" keeps the box for find-in-page, so drop its spacing while closed. */
.faq__a[hidden] {
	padding-block: 0;
	margin-top: 0;
}

.faq__a p + p {
	margin-top: 0.75em;
}

/* Fuller answers with lists and a table, in the guides' style (Passport Renewal, October 30):
   the FAQ's own spacing instead of a guide page's. */
.faq__a .faq__rich {
	display: block;
}

.faq__a .faq__rich > * {
	margin-block: 0;
}

.faq__a .faq__rich > * + * {
	margin-top: 0.75em;
}

.faq__a .faq__rich ul {
	padding-left: 1.2em;
}

.faq__a .faq__rich li + li {
	margin-top: 0.2em;
}

@media (min-width: 768px) {
	.faq__item,
	.faq__toggle {
		border-radius: 16px;
	}

	.faq__q {
		font-size: 17px;
	}

	.faq__toggle {
		gap: 16px;
		padding: 18px 20px;
	}

	.faq__a {
		padding: 0 20px 18px;
		margin-top: -10px;
		font-size: 15px;
		line-height: 1.55;
	}
}

/* ---------- Collapsible rows (phones only) ---------- */
.collapsible__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 10px 14px;
	border: 1px solid var(--c-border);
	border-radius: 14px;
	background: var(--c-white);
	text-align: left;
}

.collapsible__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.collapsible__icon {
	width: 32px;
	height: 32px;
}

.collapsible__title {
	font-size: 15px;
	font-weight: 800;
	color: var(--c-charcoal);
}

.collapsible__summary {
	font-size: 13px;
	color: var(--c-muted);
}

.collapsible__chevron {
	color: var(--c-teal);
	transition: transform 0.2s ease;
}

[aria-expanded="true"] > .collapsible__chevron {
	transform: rotate(180deg);
}

.collapsible--amber .collapsible__toggle {
	border: 0;
	background: var(--c-amber-tint);
}

.collapsible--amber .collapsible__head {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.collapsible--amber .collapsible__summary {
	line-height: 1.4;
	color: var(--c-charcoal);
}

@media (max-width: 767px) {
	[data-collapsible]:not(.is-open) .collapsible__panel {
		display: none;
	}

	.collapsible.is-open .collapsible__panel {
		padding-top: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.collapsible__chevron {
		transition: none;
	}
}

/* ---------- Site footer ---------- */
.site-footer {
	border-top: 1px solid var(--c-border);
	background: var(--c-white);
}

.site-footer__grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-block: 28px;
}

/* Room for the fixed phone action bar. */
body:has(.action-bar) .site-footer__grid {
	padding-bottom: 120px;
}

.site-footer__about {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.site-footer__about > p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--c-body);
}

.site-footer__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.site-footer__social {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	border-radius: 12px;
	background: var(--c-pale);
	color: var(--c-teal);
	font-weight: 800;
	text-decoration: none;
}

.site-footer__row {
	font-size: 16px;
	letter-spacing: 0;
}

.site-footer__row button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-height: 53px; /* board: 52 px row plus its 1 px divider */
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--c-border);
	background: none;
	font-weight: 700;
	text-align: left;
}

/* Board: 6 px margin plus the column's 10 px gap before the first link. */
.site-footer__heading {
	margin-bottom: 16px;
	line-height: normal;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.site-footer__links,
.site-footer__contact ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

.site-footer__links a {
	display: inline-block;
	color: var(--c-charcoal);
	text-decoration: none;
}

.site-footer__links a:hover {
	color: var(--c-teal);
	text-decoration: underline;
}

.site-footer__links a.is-highlight {
	color: var(--c-teal);
	font-weight: 700;
}

.site-footer__col.is-open .site-footer__links {
	padding-block: 12px 4px;
}

.site-footer__contact ul {
	gap: 4px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-body);
}

.site-footer__contact .is-strong {
	font-weight: 800;
	color: var(--c-charcoal);
	text-decoration: none;
}

.site-footer__contact .is-plain {
	color: var(--c-charcoal);
	text-decoration: none;
}

.site-footer__contact a:hover {
	color: var(--c-teal);
	text-decoration: underline;
}

.legal-bar {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--c-muted);
}

.legal-bar ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

.legal-bar a {
	color: var(--c-muted);
}

@media (min-width: 768px) {
	.site-footer__grid {
		display: grid;
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 40px;
		padding-block: 56px 24px;
	}

	body:has(.action-bar) .site-footer__grid {
		padding-bottom: 24px;
	}

	.site-footer__about {
		gap: 16px;
	}

	.site-footer__about > p {
		font-size: 15px;
	}

	.site-footer__menus {
		display: contents;
	}

	.site-footer__social a {
		width: 40px;
		height: 40px;
	}

	.site-footer__contact ul {
		gap: 10px;
		font-size: 15px;
	}

	.site-footer__contact .is-strong {
		font-weight: 700;
	}

	.legal-bar {
		grid-column: 1 / -1;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 24px;
		margin-top: 8px;
		padding-top: 20px;
		border-top: 1px solid var(--c-border);
		font-size: 13px;
	}

	.legal-bar ul {
		gap: 18px;
		line-height: inherit;
	}
}

@media (min-width: 768px) and (max-width: 1099px) {
	/* Tablet: description and badges across the top, three link columns below. */
	.site-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.site-footer__about {
		grid-column: 1 / -1;
	}
}

/* ---------- Fixed phone action bar ---------- */
.action-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	background: var(--c-white);
	border-top: 1px solid var(--c-border);
	box-shadow: 0 -6px 18px rgba(36, 54, 60, 0.08);
}

.action-bar .btn {
	min-height: 48px;
	font-size: 15px;
}

/* ---------- Simple article layout (legal pages, fallback) ---------- */
.article {
	max-width: calc(800px + 2 * var(--gutter));
	padding-block: 24px 16px;
}

.article__body {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--c-body);
}

.article__body > * + * {
	margin-top: 1em;
}

.article__body h2 {
	margin-top: 1.6em;
}

/* ---------- Field errors ---------- */
.field__error {
	font-size: 13px;
	font-weight: 600;
	color: var(--c-warn);
}

.field__box:has([aria-invalid="true"]) {
	border-color: var(--c-warn);
}

/* ---------- Travel-date checker results (boards 03 and 04) ---------- */
.hero__results {
	margin-top: 14px;
}

.results {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* The checker scrolls the results here: a gap above the box, not the window's edge. */
	scroll-margin-top: 24px;
	padding: 16px;
	background: var(--c-pale);
	border: 1.5px solid var(--c-field);
	border-radius: 20px;
}

.results__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.results__meta {
	font-size: 13px;
	color: var(--c-muted);
}

/* Looks like a text link; the invisible padding keeps a 44 px tap target. */
.results__change {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	margin-block: -13px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-teal);
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

.results__title {
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.results__title:focus {
	outline: none;
}

.results__list {
	display: grid;
	/* The column may shrink to the panel (Roman's phone, November 4): otherwise a card's widest line pushed it out on narrow phones or with larger text. */
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

/* The checking step before the results (owner, October 26): three lines tick off, then the
   results fade in with a brief teal glow, so the change from the example is easy to see. */
.results--checking {
	align-items: center;
	justify-content: center;
	min-height: 220px;
	height: 100%;
	box-sizing: border-box;
}

.checker-results[data-example] .results--checking,
.em-hero__example .results--checking {
	flex: 1;
}

.checking {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.checking__spinner {
	width: 36px;
	height: 36px;
	border: 3px solid var(--c-benefit);
	border-top-color: var(--c-teal);
	border-radius: 50%;
	animation: apv-spin 0.8s linear infinite;
}

.checking__title {
	color: var(--c-charcoal);
	font-size: 18px;
	font-weight: 800;
}

.checking__steps {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.checking__step {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--c-muted);
	font-size: 14px;
	transition: color 0.2s;
}

.checking__tick {
	flex: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--c-field);
	border-radius: 50%;
	box-sizing: border-box;
	transition: background-color 0.2s, border-color 0.2s;
}

.checking__step.is-done {
	color: var(--c-charcoal);
}

.checking__step.is-done .checking__tick {
	border-color: var(--c-teal);
	background: var(--c-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.results--reveal {
	animation: apv-reveal 0.45s ease-out, apv-glow 1.6s ease-out;
}

.checker__submit.is-busy {
	cursor: progress;
	opacity: 0.85;
}

@keyframes apv-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes apv-reveal {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

@keyframes apv-glow {
	0% {
		box-shadow: 0 0 0 0 rgba(31, 95, 103, 0.45);
	}
	35% {
		box-shadow: 0 0 0 6px rgba(31, 95, 103, 0.22);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(31, 95, 103, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.checking__spinner,
	.results--reveal {
		animation: none;
	}
}

.result--ok,
.result--none {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 16px;
}

.result--tight {
	border: 1.5px solid var(--c-amber);
}

.result__head {
	display: flex;
	flex-wrap: wrap; /* The tag drops below the name only when there's no room (November 4). */
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}

.result__name {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0;
	color: var(--c-charcoal);
}

.result__days {
	font-size: 13px;
	color: var(--c-muted);
}

/* "Est. back by [date]" (Roman, October 27): bold and dark, on its own line on phones and after the days on larger screens. */
.result__sep {
	display: none;
}

.result__est {
	display: block;
	white-space: nowrap;
	font-weight: 700;
	color: var(--c-charcoal);
}

.result__text {
	font-size: 14px;
	line-height: 1.45;
	color: var(--c-body);
}

.result__text strong {
	color: var(--c-charcoal);
}

.result__sub {
	font-size: 13px;
	color: var(--c-muted);
}

.result__foot {
	display: flex;
	flex-wrap: wrap; /* The button drops below the fee only when there's no room (November 4). */
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.result__fee {
	font-size: 24px;
	font-weight: 800;
}

.result__fee span {
	font-size: 12px;
	font-weight: 600;
	color: var(--c-muted);
}

.result__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

.result__actions .btn,
.result--none .btn {
	padding: 0 14px;
	font-size: 14px;
	font-weight: 800;
}

.result--none .btn {
	align-self: flex-start;
}

.result--late {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: #F4F6F6;
	border: 1px solid #E3E9EA;
	border-radius: 16px;
}

.result--late .result__name {
	font-size: 15px;
	color: var(--c-muted);
}

.tag {
	flex: none;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.tag--good {
	background: var(--c-good-bg);
	color: var(--c-good);
}

.tag--late {
	background: var(--c-warn-bg);
	color: var(--c-warn);
}

.tag--tight {
	background: var(--c-amber-tint);
	color: var(--c-warn);
	font-weight: 800;
}

.results__note {
	font-size: 12px;
	line-height: 1.5;
	color: var(--c-muted);
}

@media (min-width: 768px) {
	.results {
		gap: 14px;
		padding: 24px;
		border-radius: 24px;
	}

	.results__meta {
		font-size: 14px;
	}

	.results__title {
		font-size: 26px;
	}

	.results__list {
		gap: 14px;
	}

	.result--ok,
	.result--none {
		gap: 12px;
		padding: 20px;
		border-radius: 18px;
	}

	.result__name {
		font-size: 20px;
	}

	.result__days {
		font-size: 14px;
	}

	.result__sep {
		display: inline;
	}

	.result__est {
		display: inline;
	}

	.result--ok .tag {
		padding: 6px 12px;
		font-size: 13px;
	}

	.result__text {
		font-size: 15px;
		line-height: 1.5;
	}

	.result__fee {
		font-size: 28px;
	}

	.result__fee span {
		font-size: 13px;
	}

	.result__actions .btn,
	.result--none .btn {
		padding: 0 16px;
		font-size: 15px;
	}

	.result--late {
		padding: 12px 16px;
		border-radius: 14px;
	}

	.results__note {
		font-size: 13px;
		line-height: 1.55;
	}
}

@media (min-width: 1100px) {
	/* Not on the boards: two columns so cards do not stretch across 1280 px. */
	.home-results .results__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Reviews strip ---------- */
.reviews {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px 0 32px;
}

.reviews__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.reviews__intro h2 {
	font-size: 26px;
	line-height: normal;
}

.reviews__intro p {
	margin-top: 6px;
	font-size: 16px;
	color: var(--c-body);
}

/* Phones: badge on its own line, then the link with the pause button beside it. */
.reviews__summary {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	align-items: center;
	gap: 8px 12px;
}

.reviews__summary .reviews__badge {
	grid-column: 1 / -1;
	justify-self: start;
}

.reviews__toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 1.5px solid var(--c-border);
	border-radius: 999px;
	background: var(--c-white);
	color: var(--c-teal);
}

.reviews__toggle:hover {
	border-color: var(--c-teal);
}

.reviews__toggle-play,
.reviews__toggle[aria-pressed="true"] .reviews__toggle-pause {
	display: none;
}

.reviews__toggle[aria-pressed="true"] .reviews__toggle-play {
	display: block;
}

.reviews.is-paused .reviews__track {
	animation-play-state: paused;
}

.reviews__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 14px;
	color: var(--c-charcoal);
	text-decoration: none;
}

.reviews__badge:hover {
	color: var(--c-charcoal);
	border-color: var(--c-field);
}

.reviews__badge-text {
	display: flex;
	flex-direction: column;
}

.reviews__score {
	display: flex;
	align-items: center;
	gap: 6px;
}

.reviews__rating {
	font-size: 18px;
	font-weight: 800;
}

.reviews__count {
	font-size: 12px;
	color: var(--c-muted);
}

.reviews__all {
	font-size: 14px;
	font-weight: 700;
}

.reviews__marquee {
	overflow: hidden;
	padding-left: var(--gutter);
}

/* Two identical sets; moving by half the width loops seamlessly (the right padding equals the gap). */
.reviews__track {
	display: flex;
	gap: 12px;
	width: max-content;
	padding-right: 12px;
	animation: apv-reviews 40s linear infinite;
}

.reviews__copy {
	display: contents;
}

.reviews__marquee:hover .reviews__track,
.reviews__marquee:focus-within .reviews__track {
	animation-play-state: paused;
}

@keyframes apv-reviews {
	to {
		transform: translateX(-50%);
	}
}

.review {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 280px;
	padding: 18px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 20px;
	color: var(--c-charcoal);
	text-decoration: none;
}

.review:hover {
	color: var(--c-charcoal);
	border-color: var(--c-field);
}

.review__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.review__who {
	display: flex;
	align-items: center;
	gap: 10px;
}

.review__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--c-pale-2);
	color: var(--c-teal);
	font-size: 14px;
	font-weight: 800;
}

.review__name {
	display: block;
	font-size: 13px;
	font-weight: 800;
}

.review__when {
	display: block;
	font-size: 12px;
	color: var(--c-muted);
}

.review__stars,
.review__stars .stars {
	display: flex;
	gap: 2px;
}

.review__text {
	font-size: 14px;
	line-height: 1.55;
}

.review__more {
	margin-top: auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--c-teal);
}

.reviews__read-all {
	font-size: 15px;
	font-weight: 700;
}

@media (min-width: 768px) {
	.reviews {
		gap: 28px;
		padding-block: 64px;
	}

	.reviews__head {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: 24px;
	}

	.reviews__intro h2 {
		font-size: 36px;
	}

	.reviews__summary {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.reviews__rating {
		font-size: 20px;
	}

	.reviews__all {
		font-size: 15px;
	}

	.reviews__track {
		gap: 20px;
		padding-right: 20px;
		animation-duration: 45s;
	}

	.review {
		width: 360px;
		padding: 22px;
	}

	.review__name {
		font-size: 14px;
	}

	.review__text {
		font-size: 15px;
	}
}

/* Visitors who turn off motion: no scrolling animation; swipe or scroll instead. */
@media (prefers-reduced-motion: reduce) {
	.reviews__track {
		animation: none;
	}

	.reviews__copy,
	.reviews__toggle {
		display: none;
	}

	.reviews__marquee {
		overflow-x: auto;
	}
}

/* ---------- Section heads (eyebrow, heading, intro, link) ---------- */
.section-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.section-head__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.section-head h2 {
	font-size: 26px;
	line-height: normal;
}

.section-head__lead {
	font-size: 15px;
	line-height: 1.5;
	color: var(--c-body);
}

.section-head__link {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
}

@media (min-width: 768px) {
	.section-head {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: 24px;
	}

	.section-head__text {
		gap: 6px;
	}

	.section-head h2 {
		font-size: 36px;
	}

	.section-head__lead {
		font-size: 17px;
		line-height: normal;
	}
}

/* ---------- Phone action bar after a date check ---------- */
.action-bar__lead {
	display: none;
	grid-column: 1 / -1;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: var(--c-charcoal);
}

.has-checker-results .action-bar__lead {
	display: block;
}

.has-checker-results .action-bar {
	padding-top: 12px;
}

/* ---------- Checker: title and departure time (emergency page) ---------- */
.checker__title {
	font-size: 20px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: 0;
}

.checker__note {
	margin-top: auto;
}

@media (min-width: 768px) {
	.checker__title {
		font-size: 22px;
	}

	.checker--time .checker__fields {
		row-gap: 16px;
	}

	.checker--time .checker__service {
		grid-column: 1 / -1;
	}
}

/* ---------- FAQ section (emergency and service pages) ---------- */
.faq-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-block: 32px 28px;
}

/* Straight after a white "What to send us" section, its own padding is enough. */
.send-list:not(.band--pale) + .faq-section {
	padding-top: 0;
}

.faq-section__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.faq-section h2 {
	font-size: 26px;
	line-height: 1.15;
}

.faq-section__lead {
	font-size: 17px;
	line-height: 1.55;
	color: var(--c-body);
}

@media (min-width: 768px) {
	.faq-section {
		display: grid;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: 56px;
		align-items: start;
		padding-block: 72px 24px;
	}

	.faq-section__head {
		gap: 12px;
	}

	.faq-section h2 {
		font-size: 38px;
		line-height: 1.12;
	}
}

/* ---------- What to send us ---------- */
.send-list {
	padding-block: 32px;
}

.send-list__inner,
.send-list__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.send-list h2 {
	font-size: 26px;
	line-height: 1.15;
}

.send-list__lead {
	font-size: 18px;
	line-height: 1.55;
	color: var(--c-body);
}

.send-list__items {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.send-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 16px;
}

.send-item__check {
	width: 32px;
	height: 32px;
}

.send-item__body,
.send-item__title,
.send-item__text {
	display: block;
}

.send-item__title {
	font-size: 15px;
	font-weight: 800;
}

.send-item__text {
	font-size: 13px;
	line-height: 1.45;
	color: var(--c-body);
}

.send-item__note {
	font-weight: 700;
	color: var(--c-teal);
}

.send-list__actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.send-list__buttons {
	display: grid;
	gap: 12px;
}

.send-list__actions .btn {
	font-size: 15px;
}

/* Form links under checklist items and the sealed envelope rule (handoff update oct29c): the
   site's teal links, bold, each on its own line with a 28 px tap height. */
.send-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 4px;
}

.send-links__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

.send-links__link:hover,
.send-links__link:focus-visible {
	text-decoration: underline;
}

.send-links__link svg {
	flex: none;
}


/* Sealed envelope rule (in-person services, service-pages-content.md). */
.send-list__rule {
	padding: 14px 16px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-left: 4px solid var(--c-teal);
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-body);
}

.send-list__rule strong {
	color: var(--c-charcoal);
}

/* Several checklists (Passport Card): only the chosen one shows. */
[data-send-set][hidden] {
	display: none;
}

/* Passport Card: "Renewing a card · First card" above "What to send us" (owner, October 19). */
.route-choice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
}

.route-choice__legend {
	float: left;
	width: 100%;
	font-size: 14px;
	font-weight: 700;
	color: var(--c-charcoal);
}

.route-choice__option {
	position: relative;
	display: inline-flex;
}

.route-choice__option input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.route-choice__option span {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 18px;
	background: var(--c-white);
	border: 1.5px solid var(--c-field);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	color: var(--c-charcoal);
}

.route-choice__option input:checked + span {
	background: var(--c-teal);
	border-color: var(--c-teal);
	color: var(--c-white);
}

.route-choice__option input:focus-visible + span {
	outline: 3px solid var(--c-teal);
	outline-offset: 2px;
}

/* The printed sheet's heading; hidden on screen. */
.send-list__print-head {
	display: none;
}

.send-list__actions .btn--outline {
	font-weight: 700;
}

@media (min-width: 768px) {
	.send-list {
		padding-block: 72px;
	}

	.send-list__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"intro items"
			"actions items"
			". items";
		gap: 0 56px;
		align-items: start;
	}

	.send-list__intro {
		grid-area: intro;
		gap: 16px;
	}

	.send-list h2 {
		font-size: 38px;
		line-height: 1.12;
	}

	.send-list__items {
		grid-area: items;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.send-item {
		gap: 14px;
		padding: 18px;
		border-radius: 18px;
	}

	.send-item__check {
		width: 36px;
		height: 36px;
	}

	.send-item__title {
		font-size: 17px;
	}

	.send-item__text {
		font-size: 14px;
		line-height: 1.5;
	}

	.send-list__actions {
		grid-area: actions;
		margin-top: 20px;
	}

	.send-list__buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.send-list__actions .btn {
		font-size: 16px;
	}
}

/* ---------- Results panel filling a column (emergency page example) ---------- */
.checker-results[data-example]:not([hidden]),
.em-hero__example .checker-results:not([hidden]) {
	display: flex;
	flex: 1;
}

.checker-results[data-example] .results,
.em-hero__example .results {
	flex: 1;
}

/* Phones: the tight result's Call button is in the fixed bar below, so its card shows only Start
   order, beside the fee like every other card (Roman, November 4; board 05 drew it full width). */

/* ---------- Pop-up: modal on desktop, bottom sheet on phones (owner, October 19) ---------- */
.popup {
	width: 100%;
	max-width: 100%;
	max-height: 90vh;
	margin: auto 0 0;
	padding: 0;
	border: 0;
	border-radius: 20px 20px 0 0;
	background: var(--c-white);
	color: var(--c-charcoal);
	box-shadow: 0 -12px 32px rgba(36, 54, 60, 0.16);
	overflow: auto;
	overscroll-behavior: contain;
}

.popup::backdrop {
	background: rgba(36, 54, 60, 0.45);
}

.popup__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 12px;
	background: var(--c-white);
}

.popup__title {
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.popup__close {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 1.5px solid var(--c-border);
	border-radius: 999px;
	background: var(--c-white);
	color: var(--c-charcoal);
}

.popup__body {
	padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Inside the pop-up the checker needs no card of its own. */
.popup .checker {
	padding: 0;
	border: 0;
	box-shadow: none;
}

.popup .checker-results {
	margin-top: 14px;
}

@media (min-width: 768px) {
	.popup {
		width: calc(100% - 48px);
		max-height: calc(100vh - 64px);
		margin: auto;
		border-radius: 24px;
		box-shadow: 0 24px 64px rgba(36, 54, 60, 0.24);
	}

	.popup--narrow {
		max-width: 680px;
	}

	.popup--wide {
		max-width: 760px;
	}

	.popup__head {
		padding: 24px 28px 16px;
	}

	.popup__title {
		font-size: 24px;
	}

	.popup__body {
		padding: 0 28px 28px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.popup[open] {
		animation: apv-popup-in 0.18s ease-out;
	}

	@keyframes apv-popup-in {
		from {
			opacity: 0;
			transform: translateY(16px);
		}
	}
}

/* ---------- Service chooser tiles (homepage picker style, compact) ---------- */
.chooser {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chooser__tile {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	min-height: 56px;
	padding: 10px 12px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 14px;
	color: var(--c-charcoal);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.25;
	text-decoration: none;
}

.chooser__tile:hover {
	color: var(--c-charcoal);
	border-color: var(--c-teal);
}

.chooser__icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
}

.chooser__help {
	margin-top: 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-body);
}

.chooser__help a {
	font-weight: 800;
}

@media (min-width: 768px) {
	.chooser {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	.chooser__tile {
		padding: 12px 14px;
		font-size: 15px;
	}
}

/* ---------- "No service makes your date": link to the emergency page ---------- */
.result__more {
	font-size: 15px;
	font-weight: 700;
}

/* ---------- Header dropdown: Passport Services (board 57, October 24 b) ---------- */
.primary-nav__group {
	position: relative;
}

.primary-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 0 2px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--c-charcoal);
	font-size: 15px;
	font-weight: 600;
}

.primary-nav__toggle:hover,
.primary-nav__toggle.is-current,
.primary-nav__toggle[aria-expanded="true"] {
	color: var(--c-teal);
}

.primary-nav__toggle[aria-expanded="true"] {
	border-bottom-color: var(--c-teal);
}

.primary-nav__toggle .icon {
	transition: transform 0.2s ease;
}

.primary-nav__toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

/* A bridge over the gap under the toggle, so the pointer can reach the panel without closing it. */
.primary-nav__group::after {
	content: "";
	position: absolute;
	left: -8px;
	right: -8px;
	top: 100%;
	height: 32px;
}

.primary-nav__dropdown,
.primary-nav ul.primary-nav__dropdown {
	position: absolute;
	top: calc(100% + 30px);
	left: -8px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 290px;
	padding: 10px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(36, 54, 60, 0.16);
}

.primary-nav ul.primary-nav__dropdown[hidden] {
	display: none;
}

.primary-nav__dropdown a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-charcoal);
}

.primary-nav__dropdown a:hover,
.primary-nav__dropdown a:focus-visible,
.primary-nav__dropdown a[aria-current="page"] {
	background: var(--c-pale);
	color: var(--c-teal);
}

/* The small teal clock after "Last-Minute Travel" (boards 57 and 58). */
.nav-item__icon {
	flex: none;
	color: var(--c-teal);
}

.primary-nav__more {
	margin-top: 6px;
	border-top: 1px solid var(--c-border);
}

.primary-nav .primary-nav__more a {
	display: block;
	padding: 10px 12px 4px;
	border-radius: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--c-teal);
	text-decoration: underline;
}

.primary-nav .primary-nav__more a:hover {
	background: none;
}

/* ---------- Phone and tablet menu (board 58, October 24 b) ---------- */
.mobile-menu .container {
	padding-block: 14px 24px;
}

.mobile-menu__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 6px 4px 10px;
	border: 0;
	background: none;
	color: var(--c-charcoal);
	font-size: 17px;
	font-weight: 800;
	text-align: left;
}

.mobile-menu__toggle .icon {
	color: var(--c-charcoal);
	transition: transform 0.2s ease;
}

.mobile-menu__toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.mobile-menu__sub {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.mobile-menu__sub[hidden] {
	display: none;
}

.mobile-menu__list .mobile-menu__sub a {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 0;
	padding: 12px 4px;
	border-bottom: 0;
	border-top: 1px solid var(--c-hairline);
	font-size: 16px;
	font-weight: 600;
}

.mobile-menu__list .mobile-menu__sub li:first-child a {
	border-top: 0;
}

.mobile-menu__list .mobile-menu__link {
	justify-content: space-between;
	min-height: 0;
	padding: 14px 4px;
	border-bottom: 0;
	border-top: 1px solid var(--c-border);
	font-size: 17px;
	font-weight: 800;
}

.mobile-menu__arrow {
	color: var(--c-teal);
}

@media (prefers-reduced-motion: reduce) {
	.primary-nav__toggle .icon,
	.mobile-menu__toggle .icon {
		transition: none;
	}
}

/* ---------- Print this checklist (service pages, owner, October 19) ----------
 * The button marks its section and prints; everything else on the page is left off the sheet.
 */
@media print {
	@page {
		margin: 16mm;
	}

	html.is-printing-section body > *:not(main),
	html.is-printing-section main > *:not(.is-print-target) {
		display: none !important;
	}

	.is-print-target {
		padding: 0 !important;
		background: none !important;
		border: 0 !important;
		color: #000;
	}

	.is-print-target .send-list__inner {
		display: block;
		max-width: none;
		padding: 0;
	}

	.is-print-target .send-list__print-head {
		display: block;
		margin: 0 0 12px;
		font-size: 12px;
		color: #000;
	}

	/* Heading first, then the list; buttons and links stay on screen only. */
	.is-print-target .send-list__inner {
		display: flex;
		flex-direction: column;
	}

	.is-print-target .send-list__print-head {
		order: -1;
	}

	.is-print-target .route-choice,
	.is-print-target .send-list__actions {
		display: none;
	}

	.is-print-target h2 {
		margin: 4px 0 8px;
		font-size: 24px;
	}

	.is-print-target .send-list__lead {
		display: block !important;
		margin-bottom: 14px;
		font-size: 13px;
		color: #000;
	}

	.is-print-target .send-list__items {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.is-print-target .send-item {
		padding: 10px 12px;
		border: 1px solid #888;
		border-radius: 8px;
		break-inside: avoid;
	}

	.is-print-target .send-item__check {
		width: 22px;
		height: 22px;
		background: none;
		border: 1.5px solid #000;
		border-radius: 4px;
		color: transparent; /* an empty tick box to check off by hand */
	}

	.is-print-target .send-item__title,
	.is-print-target .send-item__text,
	.is-print-target .send-item__note {
		color: #000;
	}
}

/* ---------- Visa destination tile (homepage and visa hub) ---------- */
.destination {
	position: relative;
	display: block;
	width: 230px;
	height: 320px;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 10px 24px rgba(36, 54, 60, 0.12);
	text-decoration: none;
}

.destination img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.destination__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 48px 16px 16px;
	background: linear-gradient(180deg, rgba(24, 38, 42, 0) 0%, rgba(24, 38, 42, 0.78) 100%);
	color: var(--c-white);
}

.destination__name {
	display: block;
	font-size: 19px;
	font-weight: 800;
}

.destination__sub {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #E3EEEF;
}

@media (min-width: 1100px) {
	.destination {
		width: 100%;
		border-radius: 22px;
	}

	.destination__name {
		font-size: 20px;
	}
}

/* Passport Card: only the chosen route's "Print this checklist" link shows (board 78, October 29). */
.send-list__buttons [hidden] {
	display: none;
}