/* Passport agency pages and their hub (templates/agency.php, page-passport-agencies.php;
   boards 80 AgencySeattle, 81 AgencySeattleMobile, 82 AgencyBooking, 83 AgencyHub, 84 AgencyHubMobile).
   Phones first; the desktop layout from 900 px. The top section, body and questions use article.css. */

/* ---------- Top: "At a glance" and the booking box ---------- */
.agency-top {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 16px;
}

.agency-glance {
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 18px;
	padding: 14px 16px 10px;
}

.agency-glance h2,
.agency-compare h2,
.agency-reviews h2 {
	margin: 0 0 6px;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--c-charcoal);
}

.agency-glance__rows {
	margin: 0;
}

.agency-glance__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 11px 0;
	border-top: 1px solid var(--c-border);
}

.agency-glance__row dt {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	font-weight: 800;
	color: var(--c-charcoal);
}

.agency-glance__icon {
	flex: none;
	width: 28px;
	padding-top: 1px;
	color: var(--c-teal);
}

.agency-glance__icon .icon {
	display: block;
}

.agency-glance__row dd {
	margin: 0;
	padding-left: 36px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-body);
}

.agency-glance__row dd strong {
	color: var(--c-charcoal);
}

/* "Not at": an old address that still circulates (amber band, board 80). */
.agency-glance__row--not-at {
	margin: 4px -12px 0;
	padding: 11px 12px;
	border-top: 0;
	border-radius: 10px;
	background: var(--c-amber-tint);
}

.agency-glance__row--not-at dt,
.agency-glance__row--not-at .agency-glance__icon {
	color: var(--c-warn);
}

/* Booking box (board 82): standard, or Washington's phone-only version. */
.agency-booking__box {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--c-pale);
	border: 1px solid var(--c-border);
	border-radius: 18px;
	padding: 16px;
}

.agency-booking__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--c-charcoal);
}

.agency-booking__text,
.agency-booking__courier p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--c-body);
}

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

.agency-booking__box .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 800;
}

.agency-booking__courier .btn {
	min-height: 48px;
	font-size: 15px;
}

.agency-booking__or,
.agency-booking__hours {
	margin: 0;
	font-size: 13px;
	color: var(--c-body);
}

.agency-booking__hours {
	color: var(--c-muted);
}

.agency-booking__or a {
	font-weight: 700;
	color: var(--c-teal);
}

.agency-booking__courier {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--c-border);
}

/* The amber "Appointments by phone only" label (booking box and hub card). */
.agency-tag {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--c-amber-tint);
	font-size: 12px;
	font-weight: 800;
	color: var(--c-warn);
}

/* ---------- Agency or courier ---------- */
.agency-compare {
	padding-bottom: 28px;
}

.agency-compare h2 {
	margin-bottom: 8px;
}

/* Phones: one card, each row's label then both answers side by side (board 81). */
.agency-compare {
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 18px;
	padding: 14px 16px;
	margin-bottom: 28px;
	width: calc(100% - 2 * var(--gutter));
}

.agency-compare table,
.agency-compare tbody {
	display: block;
	width: 100%;
	border-collapse: collapse;
}

.agency-compare thead {
	display: none;
}

.agency-compare tbody tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 4px 10px;
	padding: 10px 0;
	border-top: 1px solid var(--c-border);
}

.agency-compare tbody th {
	grid-column: 1 / -1;
	padding: 0;
	text-align: left;
	font-size: 13px;
	font-weight: 800;
	color: var(--c-charcoal);
}

.agency-compare tbody td {
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--c-body);
}

.agency-compare__who {
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.agency-compare__ours .agency-compare__who {
	color: var(--c-teal);
}

/* ---------- What customers say ---------- */
.agency-reviews {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: calc(100% - 2 * var(--gutter));
	margin-bottom: 8px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 18px;
	padding: 16px;
}

.agency-reviews h2 {
	margin: 0;
}

.agency-reviews__score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.agency-reviews__rating {
	font-size: 24px;
	font-weight: 800;
	color: var(--c-charcoal);
}

.agency-reviews__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--c-border);
}

.agency-reviews__stars .is-on {
	color: var(--c-amber);
}

.agency-reviews__stars .icon {
	display: block;
	width: 16px;
	height: 16px;
}

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

.agency-reviews__summary p,
.agency-reviews__summary ul {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--c-body);
}

.agency-reviews__summary ul {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 20px;
}

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

.agency-reviews__note {
	margin: 0;
	font-size: 12px;
	color: var(--c-muted);
}

.agency-reviews + .why-choose-us-wrap,
.agency-reviews + * {
	margin-top: 40px;
}

/* ---------- Hub (boards 83, 84) ---------- */
.agency-hub-hero {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-block: 10px 18px;
}

.agency-hub-hero h1 {
	margin: 0;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.agency-hub-hero__intro {
	margin: 0;
	max-width: 900px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--c-body);
}

.agency-hub-note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	max-width: 1100px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--c-amber-tint);
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-charcoal);
}

.agency-hub-note .icon {
	flex: none;
	margin-top: 1px;
	color: var(--c-warn);
}

.agency-hub-note a {
	font-weight: 800;
	color: var(--c-teal);
}

.agency-hub-list {
	padding-block: 0 32px;
}

.agency-hub-list ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agency-card {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 14px;
	text-decoration: none;
	color: var(--c-body);
}

.agency-card:hover,
.agency-card:focus-visible {
	border-color: var(--c-teal);
}

.agency-card__pin {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--c-pale-2);
	color: var(--c-teal);
}

.agency-card__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

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

.agency-card__address,
.agency-card__hours {
	font-size: 12px;
	line-height: 1.45;
}

.agency-card__hours {
	color: var(--c-muted);
}

.agency-card__more {
	font-weight: 800;
	color: var(--c-teal);
}

.agency-card .agency-tag {
	padding: 3px 9px;
	font-size: 11px;
}

@media (max-width: 767px) {
	.agency-card .agency-tag,
	.agency-card__address-city,
	.agency-card__more-words {
		display: none;
	}
}

@media (min-width: 900px) {
	.agency-top {
		display: grid;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		align-items: start;
		gap: 28px;
		padding-bottom: 32px;
	}

	.agency-glance {
		border-radius: 22px;
		padding: 20px 24px 14px;
	}

	.agency-glance h2,
	.agency-reviews h2 {
		font-size: 24px;
	}

	.agency-glance__row {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 12px;
		align-items: start;
	}

	.agency-glance__row dt {
		gap: 12px;
		font-size: 14px;
	}

	.agency-glance__row dd {
		padding-left: 0;
		font-size: 15px;
	}

	.agency-booking {
		position: sticky;
		top: 20px;
	}

	.agency-booking__box {
		border-radius: 22px;
		padding: 22px;
	}

	.agency-compare {
		width: 100%;
		margin-bottom: 0;
		padding: 0 var(--gutter) 32px;
		background: none;
		border: 0;
		border-radius: 0;
	}

	.agency-compare h2 {
		margin-bottom: 12px;
		font-size: 30px;
		letter-spacing: -0.02em;
	}

	.agency-compare__card {
		overflow-x: auto;
		padding: 8px;
		background: var(--c-white);
		border: 1px solid var(--c-border);
		border-radius: 22px;
	}

	.agency-compare table {
		display: table;
		border-collapse: collapse;
	}

	.agency-compare thead {
		display: table-header-group;
	}

	.agency-compare tbody {
		display: table-row-group;
	}

	.agency-compare tbody tr {
		display: table-row;
		padding: 0;
		border: 0;
	}

	.agency-compare thead th,
	.agency-compare thead td,
	.agency-compare tbody th,
	.agency-compare tbody td {
		padding: 12px 16px;
		text-align: left;
		vertical-align: top;
	}

	.agency-compare thead th {
		font-size: 15px;
		font-weight: 800;
		color: var(--c-charcoal);
	}

	.agency-compare thead td {
		width: 22%;
	}

	.agency-compare thead .agency-compare__ours {
		color: var(--c-teal);
		background: var(--c-pale-2);
		border-radius: 12px 12px 0 0;
	}

	.agency-compare tbody th,
	.agency-compare tbody td {
		border-top: 1px solid var(--c-border);
	}

	.agency-compare tbody th {
		font-size: 14px;
	}

	.agency-compare tbody td {
		font-size: 15px;
		line-height: 1.5;
	}

	.agency-compare tbody .agency-compare__ours {
		background: var(--c-pale);
	}

	.agency-compare__who {
		display: none;
	}

	.agency-reviews {
		max-width: var(--content-max);
		gap: 10px;
		border-radius: 22px;
		padding: 22px 26px;
	}

	.agency-reviews__rating {
		font-size: 28px;
	}

	.agency-reviews__stars .icon {
		width: 18px;
		height: 18px;
	}

	.agency-reviews__count {
		font-size: 13px;
	}

	.agency-reviews__summary p,
	.agency-reviews__summary ul {
		font-size: 16px;
	}
}

@media (min-width: 768px) {
	.agency-hub-hero {
		gap: 14px;
		padding-block: 16px 28px;
	}

	.agency-hub-hero h1 {
		font-size: 46px;
		line-height: 1.06;
		letter-spacing: -0.025em;
	}

	.agency-hub-hero__intro {
		font-size: 18px;
	}

	.agency-hub-note {
		padding: 14px 18px;
		font-size: 15px;
	}

	.agency-hub-band {
		background: var(--c-pale);
		border-block: 1px solid var(--c-border);
	}

	.agency-hub-list {
		padding-block: 40px 56px;
	}

	.agency-hub-list ul {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 14px;
	}

	.agency-card {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 16px;
		border-radius: 16px;
	}

	.agency-card__pin {
		display: none;
	}

	.agency-card__city {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 17px;
	}

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

	.agency-card__text {
		gap: 6px;
	}

	.agency-card__address,
	.agency-card__hours {
		font-size: 13px;
	}

	.agency-card__more {
		margin-top: auto;
		padding-top: 4px;
		font-size: 13px;
	}

	.agency-card__arrow-only {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.agency-hub-list ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* "What customers say" without a rating: the source line under the heading (SEO chat, October 31). */
.agency-reviews__source {
	margin: 0;
	font-size: 12px;
	color: var(--c-muted);
}

@media (min-width: 900px) {
	.agency-reviews__source {
		font-size: 13px;
	}
}

/* ---------- Travel-date checker in the courier section (boards 80, 81; Roman, November 1) ---------- */
/* Source order bullets, checker, note; side by side once the section itself is wide enough
   (a container query: the side menu takes room on laptops). The checker is up to 560 px wide and
   the text keeps at least 380 px; a narrower checker stacks its two fields, as in the city hero. */
.agency-courier {
	container-type: inline-size;
	margin-block: 4px 20px;
}

.agency-courier__grid {
	display: grid;
	gap: 16px;
}

.agency-courier__bullets > :first-child,
.agency-courier__note > :first-child {
	margin-top: 0;
}

.agency-courier__bullets > :last-child,
.agency-courier__note > :last-child {
	margin-bottom: 0;
}

.agency-courier__checker {
	container-type: inline-size;
	max-width: 560px;
}

@container (max-width: 499px) {
	.agency-courier .checker__fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

.agency-courier .checker {
	margin-top: 4px;
	box-shadow: none;
}

/* The disclaimer at the boards' size: the article's paragraph style (16 px) would otherwise win. */
.article-section .agency-courier .checker__note {
	font-size: 12px;
	line-height: 1.5;
	color: var(--c-muted);
}

@media (min-width: 768px) {
	.article-section .agency-courier .checker__note {
		font-size: 13px;
		line-height: 1.55;
	}
}

@container (min-width: 840px) {
	.agency-courier__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, min(560px, calc(100% - 428px)));
		grid-template-areas: "bullets checker" "note checker";
		grid-template-rows: auto 1fr;
		align-items: start;
		column-gap: 48px;
		row-gap: 16px;
	}

	.agency-courier__bullets {
		grid-area: bullets;
	}

	.agency-courier__checker {
		grid-area: checker;
	}

	.agency-courier__note {
		grid-area: note;
	}

	.agency-courier .checker {
		margin-top: 6px;
	}
}

/* ---------- Section cards (Roman, November 1; approved from the local draft, board to follow) ---------- */
/* inc/agency-layout.php: from "Who can get an appointment" to the courier section, each section is
   a card (board 13's tinted "step by step" card) with an icon beside its heading; white inner
   panels for lists, numbered steps, note boxes, the amber tip box, and the teal-bordered card
   for our own service. */

.guide-body:has(.agency-block) {
	gap: 24px;
}

.guide-body .agency-block {
	background: var(--c-pale);
	border: 1px solid var(--c-border);
	border-radius: var(--r-card);
	padding: 16px 14px;
	gap: 12px;
}

.guide-body .agency-block--ours {
	background: var(--c-white);
	border: 2px solid var(--c-teal);
}

.agency-block__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.agency-block__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	color: var(--c-teal);
	display: flex;
	align-items: center;
	justify-content: center;
}

.agency-block--ours .agency-block__icon {
	background: var(--c-pale-2);
	border-color: var(--c-pale-2);
}

.guide-body .agency-block .agency-block__head h2 {
	font-size: 21px;
}

/* A short line before a list ("From the State Department's list:"). */
.guide-body .agency-block p.agency-lead {
	font-size: 14px;
	font-weight: 700;
	color: var(--c-muted);
	margin-bottom: -4px;
}

/* Bullet lists: a white panel with one row per point. */
.guide-body .agency-block ul.agency-list {
	list-style: none;
	padding: 0 12px;
	gap: 0;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 14px;
	font-size: 15px;
	line-height: 1.5;
}

.agency-list > li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid var(--c-hairline);
}

.agency-list > li:first-child {
	border-top: 0;
}

.agency-list__text {
	min-width: 0;
}

.agency-list__mark {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 999px;
	background: var(--c-good-bg);
	color: var(--c-good);
	display: flex;
	align-items: center;
	justify-content: center;
}

.agency-list--flags .agency-list__mark {
	background: var(--c-warn-bg);
	color: var(--c-warn);
}

.agency-list__dot {
	flex: none;
	width: 8px;
	height: 8px;
	margin: 9px 7px 0;
	border-radius: 999px;
	background: var(--c-icon-quiet);
}

/* "Getting there": one small card per way of arriving. */
.guide-body .agency-block ul.agency-list--tiles {
	display: grid;
	gap: 10px;
	padding: 0;
	background: none;
	border: 0;
}

.agency-list--tiles > li,
.agency-list--tiles > li:first-child {
	padding: 12px;
	gap: 12px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 14px;
}

.agency-list--tiles .agency-list__mark {
	width: 30px;
	height: 30px;
	margin-top: 0;
	border-radius: 10px;
	background: var(--c-pale-2);
	color: var(--c-teal);
}

/* Numbered steps ("How to get an appointment"). */
.guide-body .agency-block ol.agency-steps {
	list-style: none;
	padding: 0;
	gap: 8px;
	counter-reset: agency-step;
	font-size: 15px;
	line-height: 1.5;
}

.agency-steps > li {
	counter-increment: agency-step;
	position: relative;
	min-height: 28px;
	padding: 12px 12px 12px 48px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 14px;
}

.agency-steps > li::before {
	content: counter(agency-step);
	position: absolute;
	left: 12px;
	top: 11px;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--c-teal);
	color: var(--c-white);
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Notes that open in bold ("Appointments are free.", "Coming from farther away?"). */
.guide-body .agency-block p.agency-note {
	position: relative;
	padding: 12px 12px 12px 40px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 14px;
	font-size: 15px;
	line-height: 1.5;
}

.agency-note__icon {
	position: absolute;
	left: 12px;
	top: 14px;
	display: flex;
	color: var(--c-teal);
}

/* Staff tips ("The three mistakes our staff see most often"): the amber box. */
.agency-tip {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 14px 14px 42px;
	background: var(--c-amber-tint);
	border-radius: 14px;
}

.agency-tip__icon {
	position: absolute;
	left: 14px;
	top: 15px;
	display: flex;
	color: var(--c-warn);
}

.guide-body .agency-tip p,
.guide-body .agency-tip ol,
.guide-body .agency-tip ul {
	font-size: 15px;
	line-height: 1.55;
	color: var(--c-charcoal);
}

.guide-body .agency-tip ol {
	padding-left: 20px;
	gap: 6px;
}

.agency-tip ol li::marker {
	font-weight: 800;
	color: var(--c-warn);
}

/* The courier card's checker: the homepage line above the fields (Roman, November 1). */
.guide-body .agency-block--ours p.checker__lead {
	font-size: 17px;
	line-height: 1.4;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--c-charcoal);
	text-wrap: balance;
}

@media (min-width: 768px) {
	.guide-body:has(.agency-block) {
		gap: 28px;
	}

	.guide-body .agency-block {
		border-radius: 22px;
		padding: 26px 28px;
		gap: 16px;
	}

	.agency-block__icon {
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}

	.guide-body .agency-block .agency-block__head h2 {
		font-size: 26px;
	}

	.guide-body .agency-block ul.agency-list {
		padding: 2px 16px;
		line-height: 1.55;
	}

	.agency-list > li {
		gap: 12px;
		padding: 12px 0;
	}

	/* "What to bring": two columns of checks. */
	.guide-body .agency-block ul.agency-list--checklist {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 28px;
	}

	.agency-list--checklist > li:nth-child(2) {
		border-top: 0;
	}

	.guide-body .agency-block ul.agency-list--tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		padding: 0;
	}

	.agency-list--tiles > li,
	.agency-list--tiles > li:first-child {
		padding: 14px;
	}

	.agency-list--tiles .agency-list__mark {
		width: 34px;
		height: 34px;
	}

	.guide-body .agency-block ol.agency-steps {
		gap: 10px;
		line-height: 1.55;
	}

	.agency-steps > li {
		padding: 14px 16px 14px 56px;
	}

	.agency-steps > li::before {
		left: 16px;
		top: 13px;
		width: 28px;
		height: 28px;
		font-size: 14px;
	}

	.guide-body .agency-block p.agency-note {
		padding: 14px 16px 14px 46px;
		line-height: 1.55;
	}

	.agency-note__icon {
		left: 16px;
		top: 16px;
	}

	.agency-tip {
		padding: 16px 18px 16px 48px;
	}

	.agency-tip__icon {
		left: 18px;
		top: 17px;
	}

	.guide-body .agency-block--ours p.checker__lead {
		font-size: 20px;
	}
}

/* Side by side from a 760 px section inside the courier card (its padding takes about 60 px, so
   the 840 px rule above would stack it on 1280 px laptops). The checker card runs down to the
   end of "When you don't need us", with the disclaimer at its foot (Roman, November 1). */
@container (min-width: 760px) {
	.agency-block--ours .agency-courier__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, min(560px, calc(100% - 428px)));
		grid-template-areas: "bullets checker" "note checker";
		grid-template-rows: auto 1fr;
		column-gap: 48px;
		row-gap: 16px;
		align-items: stretch;
	}

	.agency-block--ours .agency-courier__bullets {
		grid-area: bullets;
		align-self: start;
	}

	.agency-block--ours .agency-courier__note {
		grid-area: note;
		align-self: start;
	}

	.agency-block--ours .agency-courier__checker {
		grid-area: checker;
		display: flex;
		flex-direction: column;
	}
}

/* Grows only when its box is a column (the side-by-side layout above); this can't sit in the
   query because the checker's nearest container is its own 560 px box. */
.agency-block--ours .agency-courier__checker > .checker {
	flex: 1 1 auto;
}

.guide-body .agency-block--ours p.checker__note {
	margin-top: auto;
}